formkit.theme.ts

import type { FormKitNode } from '@formkit/core'

/**
 * @privateRemarks
 * This file was generated by the FormKit CLI and should not be manually
 * edited unless you’d like to "eject" from the CLI’s ability to update it.
 *
 * @checksum - 41c8c4d0d685de8a04a9af6afb9bfb64b533705d3cd74fcb40a8398e61bf8bd5
 * @variables - radius=rounded,pink-600Color=blue,colorTemperature=neutral,spacing=2,scale=base,inputShadow=shadow,baseColorShade=600,borderShadeLightMode=400,borderShadeDarkMode=500,inputMaxWidth=max-w-none,tagRadius=rounded,swatchRadius=rounded
 * @theme - regenesis
 */

/**
 * This is the theme function itself, it should be imported and used as the
 * config.rootClasses function. For example:
 *
 * ```js
 * import { theme } from './formkit.theme'
 * import { defineFormKitConfig } from '@formkit/vue'
 *
 * export default defineFormKitConfig({
 *   config: {
 *     rootClasses: theme
 *   }
 * })
 * ```
 */

/**
 * These classes have already been merged with globals using tailwind-merge
 * and are ready to be used directly in the theme.
 */
const classes: Record<string, Record<string, boolean>> = {
  'family:button__wrapper': {
    'group-data-[disabled=true]:grayscale': true,
  },
  'family:button__input': {
    'appearance-none': true,
    '[color-scheme:light]': true,
    'dark:[color-scheme:dark]': true,
    'selection:bg-persian': true,
    'selection:text-licorice': true,
    'group-data-[has-overlay]:selection:!text-transparent': true,
    'font-bold': true,
    'rounded': true,
    'outline-none': true,
    'flex': true,
    '!text-sm': true,
    'px-7': true,
    'py-3': true,
    'items-center': true,
    'mb-1.5': true,
    'text-sm': true,
    'ring-offset-2': true,
    'ring-persian': true,
    'focus-visible:ring-2': true,
    'group-data-[disabled]:!cursor-not-allowed': true,
    'shadow': true,
    'group-data-[prefix-icon]:pl-5': true,
    'group-data-[suffix-icon]:pr-5': true,
    'border': true,
    'border-persian': true,
    'text-persian': true,
    'group-[]/repeater:shadow-sm': true,
    'group-[]/multistep:shadow-sm': true,
    'dark:border-persian': true,
  },
  'family:box__wrapper': {
    'inline-flex': true,
    'items-center': true,
    'mb-1': true,
    'group-data-[multiple]:mb-0': true,
  },
  'family:box__legend': {
    'block': true,
    'text-licorice': true,
    'text-sm': true,
    'font-bold': true,
    'dark:text-licorice': true,
    'mb-2': true,
  },
  'family:box__input': {
    'appearance-none': true,
    '[color-scheme:light]': true,
    'dark:[color-scheme:dark]': true,
    'selection:bg-persian': true,
    'selection:text-licorice': true,
    'group-data-[has-overlay]:selection:!text-transparent': true,
    'peer': true,
    'pointer-events-none': true,
    'absolute': true,
    'h-0': true,
    'w-0': true,
    'overflow-hidden': true,
    'opacity-0': true,
  },
  'family:box__decorator': {
    'mr-1.5': true,
    'bg-white': true,
    'ring-persian': true,
    'peer-checked:border-persian': true,
    'relative': true,
    'block': true,
    'text-lg': true,
    'w-[1em]': true,
    'aspect-square': true,
    'border': true,
    'border-khaki': true,
    'text-transparent': true,
    'peer-checked:bg-blue-50': true,
    'peer-checked:text-persian': true,
    'peer-focus-visible:ring-2': true,
    'peer-focus-visible:ring-offset-1': true,
    'select-none': true,
    'group-data-[disabled]:!cursor-not-allowed': true,
    'peer-disabled:bg-neutral-100': true,
    'group-data-[disabled]:grayscale': true,
    'shadow': true,
    'peer-disabled:cursor-not-allowed': true,
    'group-[]/repeater:shadow-none': true,
    'group-[]/multistep:shadow-none': true,
    'dark:border-khaki': true,
    'dark:bg-transparent': true,
    'dark:ring-offset-persian': true,
    'dark:peer-focus-visible:ring-1': true,
    'dark:peer-disabled:bg-neutral-600/50': true,
    'dark:peer-checked:bg-persian': true,
    'dark:peer-checked:text-persian': true,
  },
  'family:box__decoratorIcon': {
    'absolute': true,
    'left-1/2': true,
    'top-1/2': true,
    'flex': true,
    'h-full': true,
    'w-full': true,
    '-translate-x-1/2': true,
    '-translate-y-1/2': true,
  },
  'family:box__option': {
    'mb-1.5': true,
    'last:mb-0': true,
    'data-[disabled]:opacity-50': true,
    'data-[disabled]:select-none': true,
    'group-data-[disabled]:data-[disabled]:opacity-100': true,
  },
  'family:box__label': {
    'block': true,
    'text-licorice': true,
    'text-sm': true,
    'font-bold': true,
    'mb-1': true,
    '!mb-0': true,
    '!font-normal': true,
    '!text-sm': true,
    'dark:text-licorice': true,
  },
  'family:box__optionHelp': {
    'text-neutral-500': true,
    'text-xs': true,
    '-mt-1': true,
    'mb-1.5': true,
    'ml-[min(2em,1.7rem)]': true,
    'relative': true,
    'left-px': true,
  },
  'family:box__help': {
    'text-neutral-500': true,
    'text-xs': true,
    'dark:text-neutral-400': true,
    'mb-1': true,
    'group-data-[multiple]:mb-2': true,
    'group-data-[multiple]:-mt-1.5': true,
  },
  'family:text__wrapper': {
    'flex': true,
    'flex-col': true,
    'items-start': true,
    'justify-start': true,
    'mb-1.5': true,
    'last:mb-0': true,
  },
  'family:text__label': {
    'block': true,
    'text-licorice': true,
    'text-sm': true,
    'font-bold': true,
    'dark:text-licorice': true,
    '!inline-flex': true,
    'mb-1': true,
  },
  'family:text__inner': {
    'text-base': true,
    'flex': true,
    'items-center': true,
    'w-full': true,
    'py-2': true,
    'px-3': true,
    'rounded': true,
    'border': true,
    'border-khaki': true,
    'bg-white': true,
    'focus-within:ring-1': true,
    'focus-within:!ring-persian': true,
    'focus-within:!border-persian': true,
    'group-data-[invalid]:border-red-500': true,
    'group-data-[invalid]:ring-1': true,
    'group-data-[invalid]:ring-red-500': true,
    'group-data-[disabled]:bg-neutral-100': true,
    'group-data-[disabled]:!cursor-not-allowed': true,
    'shadow': true,
    'group-[]/repeater:shadow-none': true,
    'group-[]/multistep:shadow-none': true,
    'dark:bg-transparent': true,
    'dark:border-khaki': true,
    'dark:group-data-[disabled]:bg-neutral-800/5': true,
    'dark:group-data-[invalid]:border-red-500': true,
    'dark:group-data-[invalid]:ring-red-500': true,
  },
  'family:text__input': {
    'appearance-none': true,
    '[color-scheme:light]': true,
    'dark:[color-scheme:dark]': true,
    'selection:text-licorice': true,
    'group-data-[has-overlay]:selection:!text-transparent': true,
    'text-base': true,
    'text-licorice': true,
    'min-w-0': true,
    'grow': true,
    'outline-none': true,
    'bg-transparent': true,
    'selection:bg-persian': true,
    'placeholder:text-neutral-400': true,
    'group-data-[disabled]:!cursor-not-allowed': true,
    'dark:placeholder-neutral-400/50': true,
    'dark:text-licorice': true,
    'border-none': true,
    'p-0': true,
    'focus:ring-0': true,
  },
  'family:text__prefixIcon': {
    'flex': true,
    'items-center': true,
    '-ml-1': true,
    'mr-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
    'text-neutral-600': true,
    'dark:text-licorice': true,
  },
  'family:text__suffixIcon': {
    'flex': true,
    'items-center': true,
    '-mr-1': true,
    'ml-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
    'text-neutral-600': true,
    'dark:text-licorice': true,
  },
  'form__form': {
    'group/form': true,
    'w-full': true,
  },
  'form__actions': {
    '': true,
  },
  'form__summaryInner': {
    'group/summary': true,
    'border': true,
    'border-khaki': true,
    'bg-white': true,
    'rounded': true,
    'py-2': true,
    'px-3': true,
    'shadow': true,
    'dark:bg-transparent': true,
    'dark:border-khaki': true,
  },
  'form__summaryHeader': {
    'text-lg': true,
    'text-licorice': true,
    'font-bold': true,
    'mb-2': true,
    'dark:text-licorice': true,
  },
  'form__messages': {
    '': true,
  },
  'form__message': {
    'text-red-600': true,
    'mb-1.5': true,
    'text-xs': true,
    'dark:text-red-400': true,
    'group-[]/summary:text-sm': true,
  },
  'form__messageLink': {
    'group-[]/summary:outline-none': true,
    'group-[]/summary:focus-visible:ring-2': true,
    'group-[]/summary:ring-persian': true,
  },
  'submit__outer': {
    'group': true,
    'max-w-none': true,
    'min-w-0': true,
    'grow': true,
    'mb-4': true,
    'data-[disabled]:select-none': true,
    'text-base': true,
    'data-[disabled]:opacity-100': true,
  },
  'submit__input': {
    'appearance-none': true,
    '[color-scheme:light]': true,
    'dark:[color-scheme:dark]': true,
    'selection:bg-persian': true,
    'selection:text-licorice': true,
    'group-data-[has-overlay]:selection:!text-transparent': true,
    'bg-persian': true,
    '!text-white': true,
    'active:text-persian': true,
    'active:bg-persian': true,
    'hover:bg-persian': true,
    'disabled:border-khaki': true,
    'disabled:bg-neutral-400': true,
    'disabled:text-neutral-100': true,
    'group-data-[disabled]:!cursor-not-allowed': true,
    'dark:disabled:border-khaki': true,
    'dark:disabled:bg-neutral-500': true,
    'dark:disabled:text-neutral-200': true,
    'dark:text-white': true,
    'dark:ring-offset-persian': true,
    'before:transition-all': true,
    'group-data-[loading=true]/form:before:content[\'\']': true,
    'group-data-[loading=true]/form:before:block': true,
    'group-data-[loading=true]/form:before:animate-spin': true,
    'group-data-[loading=true]/form:before:w-5': true,
    'group-data-[loading=true]/form:before:h-5': true,
    'group-data-[loading=true]/form:before:rounded-full': true,
    'group-data-[loading=true]/form:before:mr-3': true,
    'group-data-[loading=true]/form:before:-ml-1.5': true,
    'group-data-[loading=true]/form:before:border-2': true,
    'group-data-[loading=true]/form:before:border-solid': true,
    'group-data-[loading=true]/form:before:border-white': true,
    'group-data-[loading=true]/form:before:border-r-transparent': true,
  },
  'submit__prefixIcon': {
    'flex': true,
    'items-center': true,
    '-ml-1': true,
    'mr-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
    'text-neutral-100': true,
  },
  'submit__suffixIcon': {
    'flex': true,
    'items-center': true,
    '-mr-1': true,
    'ml-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
    'text-neutral-100': true,
  },
  'textarea__inner': {
    'flex': true,
    'items-center': true,
    'mb-1.5': true,
    'bg-white': true,
    'border': true,
    'border-khaki': true,
    'rounded': true,
    'focus-within:ring-1': true,
    'focus-within:!ring-persian': true,
    'focus-within:!border-persian': true,
    'group-data-[invalid]:border-red-500': true,
    'group-data-[invalid]:ring-1': true,
    'group-data-[invalid]:ring-red-500': true,
    'group-data-[disabled]:bg-neutral-100': true,
    'shadow': true,
    'group-[]/repeater:shadow-none': true,
    'group-[]/multistep:shadow-none': true,
    'dark:border-khaki': true,
    'dark:group-data-[disabled]:bg-neutral-800/5': true,
    'dark:group-data-[invalid]:border-red-500': true,
    'dark:group-data-[invalid]:ring-red-500': true,
    'dark:bg-transparent': true,
  },
  'textarea__input': {
    'appearance-none': true,
    '[color-scheme:light]': true,
    'dark:[color-scheme:dark]': true,
    'selection:text-licorice': true,
    'group-data-[has-overlay]:selection:!text-transparent': true,
    'text-base': true,
    'h-24': true,
    'text-licorice': true,
    'min-w-0': true,
    'grow': true,
    'shrink': true,
    '!py-2': true,
    '!px-3': true,
    'outline-none': true,
    'bg-transparent': true,
    'selection:bg-persian': true,
    'placeholder:text-neutral-400': true,
    'group-data-[disabled]:!cursor-not-allowed': true,
    'dark:placeholder-neutral-400/50': true,
    'dark:text-licorice': true,
    'p-0': true,
    'border-none': true,
    'focus:ring-0': true,
  },
  'textarea__prefixIcon': {
    'flex': true,
    'items-center': true,
    '-ml-1': true,
    'mr-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
    '!ml-2': true,
    '!mr-0': true,
    'text-neutral-600': true,
    'dark:text-licorice': true,
  },
  'textarea__suffixIcon': {
    'flex': true,
    'items-center': true,
    '-mr-1': true,
    'ml-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
    '!mr-2': true,
    '!ml-0': true,
    'text-neutral-600': true,
    'dark:text-licorice': true,
  },
}

/**
 * Globals are merged prior to generating this file these are included for
 * any other non-matching inputs.
 */
const globals: Record<string, Record<string, boolean>> = {
  outer: {
    'group': true,
    'max-w-none': true,
    'min-w-0': true,
    'grow': true,
    'mb-4': true,
    'data-[disabled]:select-none': true,
    'data-[disabled]:opacity-50': true,
    'text-base': true,
  },
  label: {
    'block': true,
    'text-licorice': true,
    'text-sm': true,
    'font-bold': true,
    'mb-1': true,
    'dark:text-licorice': true,
  },
  legend: {
    'block': true,
    'text-licorice': true,
    'text-sm': true,
    'font-bold': true,
    'dark:text-licorice': true,
  },
  input: {
    'appearance-none': true,
    '[color-scheme:light]': true,
    'dark:[color-scheme:dark]': true,
    'selection:bg-persian': true,
    'selection:text-licorice': true,
    'group-data-[has-overlay]:selection:!text-transparent': true,
  },
  prefixIcon: {
    'flex': true,
    'items-center': true,
    '-ml-1': true,
    'mr-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
  },
  suffixIcon: {
    'flex': true,
    'items-center': true,
    '-mr-1': true,
    'ml-2': true,
    'text-base': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
  },
  loaderIcon: {
    'animate-spin': true,
    'flex': true,
    'items-center': true,
    'my-auto': true,
    'ml-2': true,
    'text-base': true,
    'text-neutral-500': true,
    'h-[1em]': true,
    'w-[1em]': true,
    'shrink-0': true,
    '[&>svg]:w-full': true,
  },
  loadMoreInner: {
    'flex': true,
    'text-sm': true,
    'text-neutral-500': true,
    'p-2': true,
    'items-center': true,
    'justify-center': true,
    '[&>span]:mr-2': true,
  },
  help: {
    'text-neutral-500': true,
    'text-xs': true,
    'dark:text-neutral-400': true,
  },
  message: {
    'text-red-600': true,
    'mb-1.5': true,
    'text-xs': true,
    'dark:text-red-400': true,
  },
  overlay: {
    'text-licorice': true,
    'dark:text-licorice': true,
  },
  overlayPlaceholder: {
    'text-neutral-400': true,
    'dark:text-neutral-400/50': true,
  },
  overlayLiteral: {
    'text-licorice': true,
    'dark:text-licorice': true,
  },
  overlayChar: {
    'text-licorice': true,
    'dark:text-licorice': true,
  },
  overlayEnum: {
    'text-licorice': true,
    'dark:text-licorice': true,
  },
}

export function rootClasses(
  sectionName: string,
  node: FormKitNode,
): Record<string, boolean> {
  const key = `${node.props.type}__${sectionName}`
  const semanticKey = `formkit-${sectionName}`
  const familyKey = node.props.family
    ? `family:${node.props.family}__${sectionName}`
    : ''
  const memoKey = `${key}__${familyKey}`
  if (!(memoKey in classes)) {
    const sectionClasses = classes[key] ?? globals[sectionName] ?? {}
    sectionClasses[semanticKey] = true
    if (familyKey in classes)
      classes[memoKey] = { ...classes[familyKey], ...sectionClasses }
    else
      classes[memoKey] = sectionClasses
  }
  return classes[memoKey] ?? { [semanticKey]: true }
}