Skip to content

Installation

  • Node.js (v16 or later)
  • Vue 3 (preferably with Vite)
  1. Terminal window
    npx @vue-form-forge/cli@latest

    This command will install the required dependencies and add the form builder to your src/components/form-builder directory.

  2. Terminal window
    npm install tailwindcss @tailwindcss/vite
    vite.config.ts
    import { defineConfig } from "vite";
    import tailwindcss from "@tailwindcss/vite";
    export default defineConfig({
    plugins: [tailwindcss()],
    });

    IMPORTANT: for the Formkit theme to work, you will need a tailwind config file even if you are using v4.

    tailwind.config.js
    module.exports = {
    content: ["formkit.theme.ts"],
    purge: [],
    darkMode: "class",
    theme: {
    extend: {},
    },
    variants: {
    extend: {},
    },
    plugins: [],
    };
    style.css
    @import "tailwindcss";
    @import "tw-animate-css";
    @custom-variant dark (&:is(.dark *));
    @config "../../tailwind.config.js";
    @theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-border-red: var(--border-red);
    --color-ring: var(--ring);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    }
    :root {
    --background: oklch(0.99 0.02 145);
    --foreground: oklch(0.147 0.004 49.25);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.147 0.004 49.25);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.147 0.004 49.25);
    --primary: oklch(0.216 0.006 56.043);
    --primary-foreground: oklch(0.985 0.001 106.423);
    --secondary: oklch(0.97 0.001 106.424);
    --secondary-foreground: oklch(0.216 0.006 56.043);
    --muted: oklch(0.97 0.001 106.424);
    --muted-foreground: oklch(0.553 0.013 58.071);
    --accent: oklch(0.65 0.2 145);
    --accent-foreground: oklch(0.216 0.006 56.043);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.923 0.003 48.717);
    --border-red: oklch(0.5493 0.131 26.86);
    --input: oklch(0.923 0.003 48.717);
    --ring: oklch(72.3% 0.219 149.579);
    --radius: 0.625rem;
    --sidebar: oklch(0.973 0.036 142.742);
    --sidebar-foreground: oklch(0.147 0.004 49.25);
    --sidebar-primary: oklch(0.216 0.006 56.043);
    --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
    --sidebar-accent: oklch(0.9 0.05 145);
    --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
    --sidebar-border: oklch(0.923 0.003 48.717);
    --sidebar-ring: oklch(0.709 0.01 56.259);
    }
    .dark {
    --background: oklch(0.35 0.008 145);
    --foreground: oklch(0.92 0.003 145);
    --card: oklch(0.32 0.006 145);
    --card-foreground: oklch(0.92 0.003 145);
    --popover: oklch(0.32 0.006 145);
    --popover-foreground: oklch(0.92 0.003 145);
    --primary: oklch(0.92 0.003 145);
    --primary-foreground: oklch(0.216 0.006 56.043);
    --border-red: oklch(0.5493 0.131 26.86);
    --secondary: oklch(0.4 0.01 145);
    --secondary-foreground: oklch(0.92 0.003 145);
    --muted: oklch(0.38 0.008 145);
    --muted-foreground: oklch(0.75 0.005 145);
    --accent: oklch(0.6 0.08 145);
    --accent-foreground: oklch(0.92 0.003 145);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.45 0.01 145);
    --input: oklch(0.45 0.01 145);
    --ring: oklch(72.3% 0.15 149.579);
    --sidebar: oklch(0.25 0.008 145);
    --sidebar-foreground: oklch(0.92 0.003 145);
    --sidebar-primary: oklch(0.7 0.05 145);
    --sidebar-primary-foreground: oklch(0.92 0.003 145);
    --sidebar-accent: oklch(0.5 0.01 145);
    --sidebar-accent-foreground: oklch(0.92 0.003 145);
    --sidebar-border: oklch(0.3 0.008 145);
    --sidebar-ring: oklch(0.6 0.05 145);
    }
    @layer base {
    * {
    @apply border-border outline-ring/50;
    }
    body {
    @apply bg-background text-foreground;
    }
    }
  3. formkit.config.ts
    import { rootClasses } from "./formkit.theme.ts";
    import { defaultConfig } from "@formkit/vue";
    export default defaultConfig({
    config: {
    rootClasses,
    },
    });

    Add the config to your application entry point

    Section titled “Add the config to your application entry point”
    main.ts
    import { createApp } from "vue";
    import "./style.css";
    import { plugin, defaultConfig } from "@formkit/vue";
    import App from "./App.vue";
    import config from "../formkit.config";
    createApp(App).use(plugin, defaultConfig(config)).mount("#app");
formkit.theme.ts
import type { FormKitNode } from "@formkit/core";
/**
* @privateRemarks
* This theme file has been edited manually and is no longer able to be updated
* by the cli tool. If you need to make changes to this theme, please make sure
* to edit the `formkit.theme.ts` file instead.
*
* @variables - radius=rounded-xl,accentColor=green,colorTemperature=stone,spacing=1.5,scale=sm,inputShadow=shadow-md,baseColorShade=600,borderShadeLightMode=400,borderShadeDarkMode=800,inputMaxWidth=max-w-[24em],tagRadius=rounded,swatchRadius=rounded
* @theme - form-forge-custom
**/
/**
* 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
* }
* })
* ```
**/
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 };
}
/**
* 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-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"font-bold": true,
"rounded-xl": true,
"outline-none": true,
flex: true,
"!text-xs": true,
"px-6": true,
"py-3": true,
"items-center": true,
"mb-1.5": true,
"text-xs": true,
"ring-offset-2": true,
"ring-green-500": true,
"focus-visible:ring-2": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"group-data-[prefix-icon]:pl-4": true,
"group-data-[suffix-icon]:pr-4": true,
border: true,
"border-green-600": true,
"text-green-600": true,
"group-[]/repeater:shadow": true,
"group-[]/multistep:shadow": true,
"dark:border-green-500": true,
},
"family:box__wrapper": {
"inline-flex": true,
"items-center": true,
"mb-0.5": true,
"group-data-[multiple]:mb-0": true,
},
"family:box__legend": {
block: true,
"text-stone-700": true,
"text-xs": true,
"font-bold": true,
"dark:text-stone-300": true,
"mb-1.5": true,
},
"family:box__input": {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": 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-green-500": true,
"peer-checked:border-green-600": true,
relative: true,
block: true,
"text-base": true,
"w-[1em]": true,
"aspect-[1/1]": true,
border: true,
"border-stone-400": true,
"text-transparent": true,
"peer-checked:bg-green-300": true,
"peer-checked:text-green-600": 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-stone-100": true,
"group-data-[disabled]:grayscale": true,
"shadow-md": true,
"peer-disabled:cursor-not-allowed": true,
"group-[]/repeater:shadow-none": true,
"group-[]/multistep:shadow-none": true,
"dark:border-green-800/60": true,
"dark:bg-transparent": true,
"dark:ring-offset-green-500": true,
"dark:peer-focus-visible:ring-1": true,
"dark:peer-disabled:bg-stone-600/50": true,
"dark:peer-checked:bg-green-900": true,
"dark:peer-checked:text-green-400": 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": 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-stone-700": true,
"text-xs": true,
"font-bold": true,
"mb-0.5": true,
"!mb-0": true,
"!font-normal": true,
"!text-sm": true,
"dark:text-stone-300": true,
},
"family:box__optionHelp": {
"text-stone-500": true,
"text-[11px]": true,
"[line-height:1em]": true,
"-mt-1": true,
"mb-1.5": true,
"ml-[min(2em,1.7rem)]": true,
relative: true,
"left-0": true,
},
"family:box__help": {
"text-stone-500": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-stone-400": true,
"mb-0.5": true,
"group-data-[multiple]:mb-1.5": true,
"group-data-[multiple]:-mt-1.5": true,
},
"family:text__wrapper": {
flex: true,
"flex-col": true,
"items-start": true,
"justify-start": true,
"mb-1": true,
"last:mb-0": true,
},
"family:text__label": {
block: true,
"text-stone-700": true,
"text-xs": true,
"font-bold": true,
"dark:text-stone-300": true,
"!inline-flex": true,
"mb-1": true,
},
"family:text__inner": {
"text-sm": true,
flex: true,
"items-center": true,
"w-full": true,
"py-1.5": true,
"px-2.5": true,
"rounded-xl": true,
border: true,
"border-stone-400": true,
"bg-white": true,
"focus-within:ring-1": true,
"focus-within:!ring-green-500": true,
"focus-within:!border-green-500": 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-stone-100": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"shadow-md": true,
"group-[]/repeater:shadow-none": true,
"group-[]/multistep:shadow-none": true,
"dark:bg-transparent": true,
"dark:border-green-500/20": true,
"dark:group-data-[disabled]:bg-stone-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-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"text-sm": true,
"text-stone-700": true,
"min-w-0": true,
"min-h-[1.5em]": true,
grow: true,
"outline-none": true,
"bg-transparent": true,
"selection:bg-green-100": true,
"placeholder:text-stone-400": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"dark:placeholder-stone-400/50": true,
"dark:text-stone-300": true,
"border-none": true,
"p-0": true,
"focus:ring-0": true,
},
"family:text__prefixIcon": {
flex: true,
"items-center": true,
"-ml-0.5": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
"family:text__suffixIcon": {
flex: true,
"items-center": true,
"-mr-0.5": true,
"ml-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
"family:dropdown__wrapper": {
"mb-1.5": true,
},
"family:dropdown__inner": {
relative: true,
flex: true,
"items-center": true,
"bg-white": true,
border: true,
"border-stone-400": true,
"rounded-xl": true,
"group-data-[is-multiline]:!rounded-xl": true,
"focus-within:ring-1": true,
"focus-within:!ring-green-500": true,
"focus-within:!border-green-500": 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-stone-100": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"shadow-md": true,
"group-[]/repeater:shadow-none": true,
"group-[]/multistep:shadow-none": true,
"dark:bg-transparent": true,
"dark:border-green-500/20": true,
"dark:group-data-[disabled]:bg-stone-700/40": true,
"dark:group-data-[invalid]:border-red-500": true,
"dark:group-data-[invalid]:ring-red-500": true,
},
"family:dropdown__input": {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
grow: true,
"p-1.5": true,
"pr-0": true,
"pl-2.5": true,
"text-sm": true,
"text-stone-700": true,
"text-ellipsis": true,
"min-w-0": true,
"outline-none": true,
"bg-transparent": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"group-data-[prefix-icon]:!pl-0": true,
"group-data-[suffix-icon]:!pr-0": true,
"placeholder:text-stone-400": true,
"selection:bg-green-100": true,
"dark:placeholder:text-stone-500": true,
"dark:text-stone-300": true,
"border-none": true,
"focus:ring-0": true,
"bg-none": true,
},
"family:dropdown__listboxButton": {
"w-[2.5em]": true,
"self-stretch": true,
"text-sm": true,
flex: true,
"items-center": true,
"text-stone-700": true,
"z-10": true,
"dark:text-stone-300": true,
"data-[disabled]:cursor-not-allowed": true,
},
"family:dropdown__removeSelection": {
"w-[2.5em]": true,
"self-stretch": true,
"text-sm": true,
flex: true,
"items-center": true,
"text-stone-700": true,
"hover:text-red-400": true,
"z-10": true,
"dark:text-stone-300": true,
},
"family:dropdown__controlLabel": {
absolute: true,
"opacity-0": true,
"pointer-events-none": true,
"text-[0px]": true,
},
"family:dropdown__selectIcon": {
"text-sm": true,
"inline-flex": true,
"justify-center": true,
"w-[2.5em]": true,
relative: true,
"my-auto": true,
"[&>svg]:w-[1em]": true,
"[&>svg]:mx-auto": true,
},
"family:dropdown__closeIcon": {
"text-sm": true,
"w-[0.75em]": true,
relative: true,
"m-auto": true,
},
"family:dropdown__prefixIcon": {
flex: true,
"items-center": true,
"-ml-0.5": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"!ml-1.5": true,
"!mr-0": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
"family:dropdown__suffixIcon": {
flex: true,
"items-center": true,
"-mr-0.5": true,
"ml-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"!mr-1.5": true,
"!ml-0": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
"family:dropdown__dropdownWrapper": {
"rounded-xl": true,
"shadow-xl": true,
"mt-0.5": true,
"overflow-clip": true,
"empty:hidden": true,
border: true,
"border-stone-300": true,
"dark:border-stone-700": true,
"group-data-[expanded]:opacity-100": true,
"group-data-[overscroll]:m-0": true,
"group-data-[overscroll]:shadow-none": true,
"group-data-[overscroll]:border-none": true,
},
"family:dropdown__listitemGroup": {
"group/optgroup": true,
"last:pb-0": true,
"border-t": true,
"border-b": true,
"-mb-px": true,
"border-stone-300": true,
"dark:border-stone-700": true,
},
"family:dropdown__groupLabel": {
block: true,
"pt-1": true,
"pb-0.5": true,
"px-2": true,
"font-bold": true,
"pointer-events-none": true,
"text-stone-600": true,
"dark:text-stone-500": true,
},
"family:dropdown__listbox": {
"bg-white": true,
"rounded-xl": true,
"empty:hidden": true,
"dark:bg-stone-800": true,
"group-data-[overscroll]:shadow-xl": true,
"group-data-[overscroll]:border": true,
"group-data-[overscroll]:border-stone-300": true,
"group-data-[overscroll]:dark:border-stone-700": true,
},
"family:dropdown__listitem": {
relative: true,
flex: true,
"items-center": true,
"px-1.5": true,
"py-1": true,
"first:pt-1.5": true,
"last:pb-1.5": true,
"text-stone-700": true,
"text-sm": true,
"data-[is-active]:bg-green-100": true,
"dark:text-stone-200": true,
"dark:data-[is-active]:text-stone-700": true,
"before:content-['']": true,
"before:absolute": true,
"before:inset-0": true,
"data-[is-active]:first:before:rounded-xl": true,
"data-[is-active]:first:before:rounded-b-none": true,
"data-[is-active]:last:before:rounded-xl": true,
"data-[is-active]:last:before:rounded-t-none": true,
"data-[is-active]:first:last:before:rounded-xl": true,
"data-[is-active]:before:ring-1": true,
"data-[is-active]:before:ring-green-500": true,
"data-[is-active]:before:ring-inset": true,
"data-[is-active]:before:ring-offset-green-100": true,
"group-[]/optgroup:first:before:!rounded-none": true,
"group-[]/optgroup:last:before:!rounded-none": true,
},
"family:dropdown__selectedIcon": {
flex: true,
absolute: true,
"items-center": true,
"text-green-600": true,
"left-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
},
"family:dropdown__option": {
"ml-[1.5em]": true,
},
"family:dropdown__loadMore": {
"data-[is-active]:bg-green-100": true,
},
"family:dropdown__loadMoreInner": {
flex: true,
"text-xs": true,
"text-stone-500": true,
"p-1.5": true,
"items-center": true,
"justify-center": true,
"[&>span]:mr-1.5": true,
"cursor-pointer": true,
"dark:text-stone-200": true,
"dark:hover:text-green-500": true,
},
"family:dropdown__selectionWrapper": {
grow: true,
flex: true,
"items-center": true,
"text-stone-700": true,
},
"family:dropdown__selection": {
grow: true,
"text-stone-700": true,
"group-data-[multiple]:p-1.5": true,
"dark:text-stone-300": true,
},
"family:dropdown__tagsWrapper": {
"w-full": true,
},
"family:dropdown__tagWrapper": {
"group/tag": true,
rounded: true,
"mr-0.5": true,
"mb-0.5": true,
"outline-none": true,
"data-[active-selection=true]:ring-2": true,
"data-[active-selection=true]:ring-green-500": true,
},
"family:dropdown__tags": {
"inline-flex": true,
"flex-wrap": true,
"items-center": true,
"w-full": true,
"-mb-0.5": true,
"empty:mb-0": true,
},
"family:dropdown__tag": {
flex: true,
"items-center": true,
"cursor-default": true,
rounded: true,
"text-xs": true,
"px-1": true,
"py-0.5": true,
"bg-green-600": true,
"text-white": true,
"[&>[type=button]]:!w-[0.5em]": true,
"[&>[type=button]]:aspect-[1/1]": true,
"[&>[type=button]]:!text-inherit": true,
"[&>[type=button]]:cursor-pointer": true,
"group-data-[active-selection=true]/tag:bg-green-400": true,
"group-data-[active-selection=true]/tag:text-stone-700": true,
},
"family:dropdown__tagLabel": {
"mr-1": true,
},
"family:dropdown__emptyMessage": {
flex: true,
"items-center": true,
"px-1.5": true,
"py-1": true,
"first:pt-1.5": true,
"last:pb-1.5": true,
"text-stone-700": true,
"text-xs": true,
"aria-selected:text-white": true,
"aria-selected:bg-green-600": true,
},
button__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"bg-green-50": true,
"hover:bg-green-100": true,
"dark:text-green-500": true,
"dark:bg-transparent": true,
"dark:hover:bg-green-50/5": true,
},
checkbox__decorator: {
rounded: true,
},
checkbox__decoratorIcon: {
"max-w-[66.66%]": true,
},
color__inner: {
"!w-auto": true,
"!p-1.5": true,
"!inline-flex": true,
"group-data-[prefix-icon]:border": true,
"group-data-[prefix-icon]:border-stone-400": true,
"group-data-[suffix-icon]:border": true,
"group-data-[suffix-icon]:border-stone-400": true,
"dark:group-data-[prefix-icon]:border-stone-800": true,
"dark:group-data-[suffix-icon]:border-stone-800": true,
},
color__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"!w-14": true,
"bg-transparent": true,
"cursor-pointer": true,
"rounded-xl": true,
"overflow-clip": true,
"[&::-webkit-color-swatch-wrapper]:p-0": true,
"[&::-webkit-color-swatch]:border-none": true,
"[&::-moz-color-swatch]:border-none": true,
"group-data-[prefix-icon]:mx-1.5": true,
"group-data-[suffix-icon]:mx-1.5": true,
},
color__prefixIcon: {
flex: true,
"items-center": true,
"-ml-0.5": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"group-data-[prefix-icon]:m-1.5": true,
"group-data-[prefix-icon]:mr-0": true,
},
color__suffixIcon: {
flex: true,
"items-center": true,
"-mr-0.5": true,
"ml-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"group-data-[suffix-icon]:m-1.5": true,
"group-data-[prefix-icon]:ml-0": true,
},
date__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"focus:[&::-webkit-datetime-edit-day-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-month-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-year-field]:bg-green-100": true,
},
"datetime-local__input": {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"focus:[&::-webkit-datetime-edit-day-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-month-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-year-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-hour-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-minute-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-ampm-field]:bg-green-100": true,
},
file__fileList: {
"group/list": true,
peer: true,
"w-full": true,
"min-w-0": true,
"data-[has-multiple]:mb-[1.25em]": true,
},
file__fileItemIcon: {
"h-[1em]": true,
"w-[1em]": true,
"mr-1.5": true,
"shrink-0": true,
},
file__fileItem: {
flex: true,
"min-w-0": true,
"items-center": true,
"text-stone-700": true,
"mb-1.5": true,
"last:mb-0": true,
"dark:text-stone-300": true,
},
file__fileName: {
truncate: true,
"min-w-0": true,
"w-full": true,
shrink: true,
"leading-5": true,
"group-data-[has-multiple]/list:text-xs": true,
},
file__fileRemove: {
"right-1.5": true,
"ring-green-500": true,
"rounded-xl": true,
"z-20": true,
flex: true,
"appearance-none": true,
"items-center": true,
"text-[8px]": true,
"outline-none": true,
"hover:!text-red-500": true,
"focus-visible:ring-2": true,
"group-data-[disabled]:pointer-events-none": true,
"group-data-[disabled]:!text-stone-500": true,
"peer-data-[has-multiple]:absolute": true,
"peer-data-[has-multiple]:bottom-[max(0.5em,8px)]": true,
"peer-data-[has-multiple]:left-2.5": true,
"peer-data-[has-multiple]:text-green-600": true,
"peer-data-[has-multiple]:text-[11px]": true,
"[line-height:1em]": true,
"peer-data-[has-multiple]:whitespace-nowrap": true,
"group-data-[prefix-icon]:peer-data-[has-multiple]:left-1.5": true,
"dark:hover:!text-red-400": true,
},
file__fileRemoveIcon: {
block: true,
"text-base": true,
"w-[0.75em]": true,
relative: true,
"z-10": true,
},
file__inner: {
relative: true,
"cursor-pointer": true,
"group-data-[has-multiple]:rounded-xl": true,
},
file__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"cursor-pointer": true,
"text-transparent": true,
absolute: true,
"inset-0": true,
"opacity-0": true,
"z-10": true,
"file:pointer-events-none": true,
"file:w-0": true,
"file:h-0": true,
"file:overflow-hidden": true,
},
file__noFiles: {
flex: true,
"w-full": true,
"items-center": true,
"text-stone-400": true,
"dark:text-stone-500": true,
},
file__noFilesIcon: {
"w-[1em]": true,
"mr-1.5": true,
},
form__form: {
"group/form": true,
},
form__actions: {
"": true,
},
form__summaryInner: {
"group/summary": true,
border: true,
"border-stone-400": true,
"bg-white": true,
"rounded-xl": true,
"py-1.5": true,
"px-2.5": true,
"shadow-md": true,
"dark:bg-transparent": true,
"dark:border-stone-800": true,
},
form__summaryHeader: {
"text-base": true,
"text-stone-700": true,
"font-bold": true,
"mb-1.5": true,
"dark:text-stone-300": true,
},
form__messages: {
"": true,
},
form__message: {
"text-red-600": true,
"mb-1.5": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-red-400": true,
"group-[]/summary:text-xs": true,
},
form__messageLink: {
"group-[]/summary:outline-none": true,
"group-[]/summary:focus-visible:ring-2": true,
"group-[]/summary:ring-green-600": true,
},
month__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"focus:[&::-webkit-datetime-edit-month-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-year-field]:bg-green-100": true,
},
radio__decorator: {
"rounded-full": true,
},
radio__decoratorIcon: {
"max-w-[50%]": true,
},
range__inner: {
relative: true,
"!border-none": true,
"!ring-0": true,
"!px-0": true,
"!bg-transparent": true,
"!shadow-none": true,
},
range__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"group/input": true,
"cursor-pointer": true,
"[&::-webkit-slider-runnable-track]:bg-stone-400/50": true,
"[&::-webkit-slider-runnable-track]:h-[0.25em]": true,
"[&::-webkit-slider-runnable-track]:rounded-xl": true,
"dark:[&::-webkit-slider-runnable-track]:bg-stone-600/50": true,
"[&::-webkit-slider-thumb]:appearance-none": true,
"[&::-webkit-slider-thumb]:w-[0.85em]": true,
"[&::-webkit-slider-thumb]:aspect-[1/1]": true,
"[&::-webkit-slider-thumb]:bg-green-600": true,
"[&::-webkit-slider-thumb]:rounded-full": true,
"[&::-webkit-slider-thumb]:relative": true,
"[&::-webkit-slider-thumb]:top-1/2": true,
"[&::-webkit-slider-thumb]:-translate-y-1/2": true,
"[&::-webkit-slider-thumb]:group-data-[disabled]:bg-stone-500": true,
"[&::-webkit-slider-thumb]:group-data-[disabled]:!ring-stone-300": true,
"[&::-webkit-slider-thumb]:focus-visible:ring-2": true,
"[&::-webkit-slider-thumb]:focus:!ring-green-500": true,
"[&::-webkit-slider-thumb]:focus:ring-offset-2": true,
"[&::-webkit-slider-thumb]:shadow-md": true,
"dark:[&::-webkit-slider-thumb]:group-data-[disabled]:!ring-stone-700":
true,
"dark:[&::-webkit-slider-thumb]:focus:ring-offset-stone-700": true,
"[&::-moz-range-track]:bg-stone-400/50": true,
"[&::-moz-range-track]:h-[0.25]": true,
"[&::-moz-range-track]:rounded-xl": true,
"dark:[&::-moz-range-track]:bg-stone-600/50": true,
"[&::-moz-range-thumb]:appearance-none": true,
"[&::-moz-range-thumb]:border-none": true,
"[&::-moz-range-thumb]:w-[0.85em]": true,
"[&::-moz-range-thumb]:h-[0.85em]": true,
"[&::-moz-range-thumb]:bg-green-600": true,
"[&::-moz-range-thumb]:rounded-full": true,
"[&::-moz-range-thumb]:group-data-[disabled]:bg-stone-500": true,
"[&::-moz-range-thumb]:group-data-[disabled]:!ring-stone-300": true,
"[&::-moz-range-thumb]:focus-visible:ring-2": true,
"[&::-moz-range-thumb]:focus:!ring-green-500": true,
"[&::-moz-range-thumb]:focus:ring-offset-2": true,
"[&::-moz-range-thumb]:shadow-md": true,
"dark:[&::-moz-range-thumb]:group-data-[disabled]:!ring-stone-500": true,
"dark:[&::-moz-range-thumb]:focus:ring-offset-stone-700": true,
},
select__wrapper: {
"mb-1.5": true,
},
select__inner: {
relative: true,
flex: true,
"items-center": true,
"bg-white": true,
border: true,
"border-stone-400": true,
"rounded-xl": true,
"focus-within:ring-1": true,
"focus-within:!ring-green-500": true,
"focus-within:!border-green-500": 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-stone-100": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"shadow-md": true,
"group-[]/repeater:shadow-none": true,
"group-[]/multistep:shadow-none": true,
"group-data-[multiple]:rounded-xl": true,
"dark:bg-transparent": true,
"dark:border-green-500/20": true,
"dark:group-data-[disabled]:bg-stone-800/5": true,
"dark:group-data-[invalid]:border-red-500": true,
"dark:group-data-[invalid]:ring-red-500": true,
},
select__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
grow: true,
"p-1.5": true,
"py-1.5": true,
"px-2.5": true,
"pr-[2em]": true,
"text-sm": true,
"text-stone-700": true,
"text-ellipsis": true,
"min-w-0": true,
"outline-none": true,
"bg-transparent": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"group-data-[prefix-icon]:!pl-0": true,
"group-data-[suffix-icon]:!pr-0": true,
"data-[placeholder]:text-stone-400": true,
"group-data-[multiple]:!p-0": true,
"selection:bg-green-100": true,
"dark:data-[placeholder]:text-stone-400/50": true,
"dark:text-stone-300": true,
"border-none": true,
"focus:ring-0": true,
"bg-none": true,
},
select__selectIcon: {
absolute: true,
"w-[1em]": true,
"text-stone-700": true,
"pointer-events-none": true,
"right-1.5": true,
"group-data-[suffix-icon]:mr-[1.5em]": true,
"dark:text-stone-300": true,
},
select__optGroup: {
"bg-white": true,
"text-stone-700": true,
"group/optgroup": true,
"group-data-[multiple]:px-1.5": true,
"pt-1.5": true,
"font-bold": true,
"text-xs": true,
"dark:bg-stone-800": true,
"dark:text-stone-300": true,
},
select__option: {
"bg-white": true,
"text-stone-700": true,
"group-data-[disabled]:opacity-50": true,
"group-data-[disabled]:select-none": true,
"group-data-[multiple]:checked:bg-green-100": true,
"group-data-[multiple]:focus:bg-green-100": true,
"group-data-[multiple]:text-xs": true,
"group-data-[multiple]:outline-none": true,
"group-data-[multiple]:border-none": true,
"group-data-[multiple]:py-1.5": true,
"group-data-[multiple]:px-1.5": true,
"dark:bg-stone-800": true,
"dark:text-stone-300": true,
"dark:group-data-[multiple]:focus:bg-green-800": true,
"dark:group-data-[multiple]:checked:bg-green-800": true,
},
select__prefixIcon: {
flex: true,
"items-center": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"ml-1.5": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
select__suffixIcon: {
flex: true,
"items-center": true,
"ml-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"mr-1.5": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
submit__outer: {
group: true,
"max-w-[24em]": true,
"min-w-0": true,
grow: true,
"mb-3.5": true,
"data-[disabled]:select-none": true,
"text-sm": true,
"data-[disabled]:opacity-100": true,
},
submit__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"bg-green-600": true,
"!text-white": true,
"active:text-green-100": true,
"active:bg-green-700": true,
"hover:bg-green-700": true,
"disabled:border-stone-400": true,
"disabled:bg-stone-400": true,
"disabled:text-stone-100": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"dark:disabled:border-stone-100": true,
"dark:disabled:bg-stone-500": true,
"dark:disabled:text-stone-200": true,
"dark:text-white": true,
"dark:ring-offset-green-500": 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-2.5": true,
"group-data-[loading=true]/form:before:-ml-1": 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-0.5": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"text-stone-100": true,
},
submit__suffixIcon: {
flex: true,
"items-center": true,
"-mr-0.5": true,
"ml-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"text-stone-100": true,
},
textarea__inner: {
flex: true,
"items-center": true,
"mb-1.5": true,
"bg-white": true,
border: true,
"border-stone-400": true,
"rounded-xl": true,
"focus-within:ring-1": true,
"focus-within:!ring-green-500": true,
"focus-within:!border-green-500": 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-stone-100": true,
"shadow-md": true,
"group-[]/repeater:shadow-none": true,
"group-[]/multistep:shadow-none": true,
"dark:border-green-500/20": true,
"dark:group-data-[disabled]:bg-stone-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-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"text-sm": true,
"h-20": true,
"text-stone-700": true,
"min-w-0": true,
grow: true,
shrink: true,
"!py-1.5": true,
"!px-2.5": true,
"outline-none": true,
"bg-transparent": true,
"selection:bg-green-100": true,
"placeholder:text-stone-400": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"dark:placeholder-stone-400/50": true,
"dark:text-stone-300": true,
"p-0": true,
"border-none": true,
"focus:ring-0": true,
},
textarea__prefixIcon: {
flex: true,
"items-center": true,
"-ml-0.5": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"!ml-1.5": true,
"!mr-0": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
textarea__suffixIcon: {
flex: true,
"items-center": true,
"-mr-0.5": true,
"ml-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"!mr-1.5": true,
"!ml-0": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
time__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"focus:[&::-webkit-datetime-edit-hour-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-minute-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-ampm-field]:bg-green-100": true,
},
week__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"focus:[&::-webkit-datetime-edit-week-field]:bg-green-100": true,
"focus:[&::-webkit-datetime-edit-year-field]:bg-green-100": true,
},
autocomplete__selections: {
flex: true,
absolute: true,
"inset-0": true,
"group-data-[multiple]:static": true,
"group-data-[multiple]:block": true,
"group-data-[empty]:hidden": true,
"group-data-[multiple]:mt-1": true,
},
autocomplete__selectionWrapper: {
"bg-stone-100": true,
"rounded-xl": true,
"group-data-[multiple]:border": true,
"group-data-[multiple]:border-stone-300": true,
"group-data-[multiple]:mb-1": true,
"outline-none": true,
"data-[active-selection=true]:ring-2": true,
"data-[active-selection=true]:ring-green-500": true,
"dark:bg-stone-600": true,
"dark:group-data-[multiple]:border-stone-700": true,
"[&.formkit-dropZone]:opacity-25": true,
"[&.formkit-touchDropZone]:opacity-25": true,
"[&.formkit-touchDragging]:!flex": true,
"[&.formkit-longTouch]:opacity-25": true,
},
autocomplete__selection: {
"rounded-xl": true,
just: true,
"pl-1.5": true,
"[&>*]:ml-0": true,
"dark:text-stone-200": true,
},
colorpicker__outer: {
group: true,
"max-w-[24em]": true,
"min-w-0": true,
grow: true,
"mb-3.5": true,
"data-[disabled]:select-none": true,
"data-[disabled]:opacity-50": true,
"text-sm": true,
"data-[disabled]:cursor-not-allowed": true,
"data-[disabled]:pointer-events-none": true,
},
colorpicker__help: {
"text-stone-500": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-stone-400": true,
"group-data-[inline]:-mt-1": true,
"group-data-[inline]:mb-1.5": true,
},
colorpicker__inner: {
relative: true,
"inline-flex": true,
"!w-auto": true,
"pl-1.5": true,
"group-data-[inline]:border-none": true,
"group-data-[inline]:shadow-none": true,
"group-data-[inline]:p-0": true,
"group-data-[inline]:bg-transparent": true,
"group-data-[inline]:outline-none": true,
"group-data-[inline]:!ring-0": true,
"group-data-[inline]:!w-full": true,
"group-data-[inline]:rounded-xl": true,
},
colorpicker__swatchPreview: {
"w-full": true,
flex: true,
"justify-start": true,
"items-center": true,
"rounded-xl": true,
"text-sm": true,
"cursor-pointer": true,
"outline-none": true,
},
colorpicker__canvasSwatchPreviewWrapper: {
relative: true,
"before:content-['']": true,
"before:absolute": true,
"before:inset-0": true,
"before:rounded-xl": true,
"before:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)]": true,
"before:z-[2]": true,
},
colorpicker__canvasSwatchPreview: {
"text-sm": true,
"rounded-xl": true,
"aspect-[1/1]": true,
"shrink-0": true,
grow: true,
"!w-[1.5em]": true,
},
colorpicker__valueString: {
"text-sm": true,
"text-stone-700": true,
"selection:bg-green-100": true,
"font-mono": true,
"inline-block": true,
"ml-1.5": true,
"mr-1.5": true,
"dark:text-stone-300": true,
"dark:selection:text-stone-700": true,
},
colorpicker__panel: {
absolute: true,
"left-0": true,
"top-full": true,
"z-[99]": true,
flex: true,
"w-[100vw]": true,
"max-w-[18.5em]": true,
"touch-manipulation": true,
"flex-col": true,
"rounded-xl": true,
border: true,
"bg-white": true,
"p-1.5": true,
"shadow-lg": true,
"group-data-[inline]:static": true,
"group-data-[inline]:max-w-none": true,
"border-stone-400": true,
"group-data-[inline]:z-auto": true,
"group-data-[inline]:w-full": true,
"group-data-[inline]:shadow-md": true,
"group-data-[inline]:group-data-[disabled]:!cursor-not-allowed": true,
"group-data-[inline]:group-data-[disabled]:!pointer-events-none": true,
"group-data-[inline]:[&:has([id^=swatches]:first-child:last-child)]:w-auto":
true,
"group-data-[inline]:[&:has([id^=swatches]:first-child:last-child)_[id^=swatches]>div]:w-[1.5em]":
true,
"dark:bg-stone-800": true,
"dark:border-stone-800": true,
"dark:group-data-[inline]:bg-transparent": true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:!fixed":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:top-auto":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:max-w-none":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:bottom-0":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:left-0":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:rounded-none":
true,
},
colorpicker__panelClose: {
flex: true,
"justify-end": true,
"items-center": true,
"text-stone-600": true,
"mb-1.5": true,
"-mt-1": true,
"border-none": true,
"bg-none": true,
"border-b": true,
"border-stone-300": true,
"w-[calc(100%+1rem)]": true,
"-ml-2": true,
"pt-0": true,
"pr-1.5": true,
"pb-1.5": true,
"pl-1.5": true,
"dark:border-stone-800": true,
},
colorpicker__closeIcon: {
"w-[2rem]": true,
"aspect-[1/1]": true,
"p-1": true,
"rounded-xl": true,
border: true,
"[&>svg]:w-full": true,
"[&>svg]:aspect-[1/1]": true,
"[&>svg]:max-w-none": true,
"[&>svg]:max-h-none": true,
},
colorpicker__controlGroup: {
grid: true,
"[grid-template-areas:'a_a_a'_'b_c_e'_'b_d_e']": true,
"mb-1.5": true,
},
colorpicker__LS: {
"[grid-area:a]": true,
relative: true,
"mb-1.5": true,
},
colorpicker__canvas: {
block: true,
"w-full": true,
},
colorpicker__canvasLS: {
"aspect-[2/1]": true,
"cursor-pointer": true,
"rounded-lg": true,
},
colorpicker__canvasHue: {
"rounded-lg": true,
},
colorpicker__canvasAlpha: {
"rounded-lg": true,
},
colorpicker__preview: {
"rounded-xl": true,
"after:rounded-xl": true,
relative: true,
"inline-flex": true,
"aspect-[1/1]": true,
"overflow-hidden": true,
"[grid-area:b]": true,
"mr-1.5": true,
"after:absolute": true,
"after:left-0": true,
"after:top-0": true,
"after:h-full": true,
"after:w-full": true,
"after:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)]": true,
"after:content-['']": true,
"w-[2em]": true,
"dark:after:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.25)]": true,
},
colorpicker__hue: {
"[grid-area:c]": true,
relative: true,
"inline-flex": true,
"h-3/4": true,
},
colorpicker__alpha: {
"[grid-area:d]": true,
relative: true,
"inline-flex": true,
"h-3/4": true,
},
colorpicker__eyeDropper: {
"[grid-area:e]": true,
"w-[2em]": true,
"ml-1.5": true,
"inline-flex": true,
"self-center": true,
"justify-center": true,
"justify-self-center": true,
"aspect-[1/1]": true,
"rounded-xl": true,
border: true,
"border-stone-300": true,
"cursor-pointer": true,
"content-center": true,
"items-center": true,
"text-stone-600": true,
"dark:border-stone-800": true,
},
colorpicker__eyeDropperIcon: {
"w-auto": true,
"[&>svg]:w-[1em]": true,
"dark:text-stone-400": true,
},
colorpicker__control: {
absolute: true,
"bg-white": true,
"shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_3px_rgba(0,0,0,0.2)]": true,
"-translate-y-1/2": true,
"-translate-x-1/2": true,
"pointer-events-none": true,
"data-[prevent-focus-style]:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_3px_rgba(0,0,0,0.2)]":
true,
"focus-visible:outline-none": true,
"focus-visible:ring-2": true,
"focus-visible:ring-offset-2": true,
"focus-visible:ring-green-500": true,
},
colorpicker__controlLS: {
"w-[10px]": true,
"h-[10px]": true,
"rounded-full": true,
},
colorpicker__controlHue: {
"w-[4px]": true,
"h-[calc(100%-2px)]": true,
"top-1/2": true,
"rounded-xl": true,
},
colorpicker__controlAlpha: {
"w-[4px]": true,
"h-[calc(100%-2px)]": true,
"top-1/2": true,
"rounded-xl": true,
},
colorpicker__formatField: {
flex: true,
"items-center": true,
"justify-center": true,
grow: true,
},
colorpicker__colorField: {
"bg-transparent": true,
"text-stone-700": true,
border: true,
"border-stone-300": true,
"dark:border-stone-800": true,
"dark:text-stone-300": true,
"dark:selection:text-stone-700": true,
},
colorpicker__colorInputGroup: {
flex: true,
"items-center": true,
"justify-center": true,
grow: true,
},
colorpicker__fieldGroup: {
flex: true,
"flex-col": true,
"items-center": true,
"justify-center": true,
"w-full": true,
"mr-0.5": true,
"[&>input]:p-1": true,
"[&>input]:text-sm": true,
"[&>input]:text-stone-700": true,
"[&>input]:selection:bg-green-100": true,
"[&>input]:m-0": true,
"[&>input]:grow": true,
"[&>input]:shrink": true,
"[&>input]:w-full": true,
"[&>input]:border": true,
"[&>input]:border-stone-300": true,
"[&>input]:rounded-xl": true,
"[&>input]:text-center": true,
"[&>input]:appearance-none": true,
"[&>input::-webkit-outer-spin-button]:appearance-none": true,
"[&>input::-webkit-inner-spin-button]:appearance-none": true,
"[&>input::-webkit-inner-spin-button]:m-0": true,
"[&>input:focus]:outline-none": true,
"[&>input:focus]:ring-1": true,
"[&>input:focus]:ring-green-600": true,
"[&>input:focus]:border-green-600": true,
"max-[431px]:[&>input]:text-base": true,
},
colorpicker__fieldLabel: {
"text-xs": true,
"text-stone-500": true,
"mt-1.5": true,
"dark:text-stone-400": true,
},
colorpicker__formatSwitcher: {
flex: true,
"justify-end": true,
"self-start": true,
uppercase: true,
"shrink-0": true,
"p-1": true,
"mt-0.5": true,
"text-stone-600": true,
rounded: true,
"select-none": true,
"dark:text-stone-400": true,
},
colorpicker__switchIcon: {
"[&>svg]:w-3": true,
},
colorpicker__swatches: {
"inline-flex": true,
"flex-wrap": true,
"w-full": true,
"justify-self-center": true,
"min-w-0": true,
"mx-auto": true,
"px-[1px]": true,
"pt-1.5": true,
"pb-1.5": true,
"mt-1.5": true,
"-mb-1.5": true,
"border-t": true,
"border-stone-300": true,
"overflow-auto": true,
"max-h-[200px]": true,
"select-none": true,
"first:-mt-[3px]": true,
"first:last:-mb-[3px]": true,
"first:last:pb-[2px]": true,
"first:pt-px": true,
"first:border-t-0": true,
"dark:border-stone-800": true,
},
colorpicker__swatchGroup: {
flex: true,
"flex-wrap": true,
"w-full": true,
"mb-1.5": true,
"last:mb-0": true,
},
colorpicker__swatchGroupLabel: {
"ml-1": true,
block: true,
"w-full": true,
"text-xs": true,
"text-stone-500": true,
"dark:text-stone-400": true,
},
colorpicker__swatch: {
relative: true,
"text-sm": true,
"w-[calc((100%/10)-0.5em)]": true,
"max-w-[22px]": true,
"m-[0.16em]": true,
"cursor-pointer": true,
"before:content-['']": true,
"before:absolute": true,
"before:inset-0": true,
"before:rounded": true,
"before:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)]": true,
"before:pointer-events-none": true,
"before:z-[2]": true,
"dark:before:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.25)]": true,
"data-[active=true]:after:content-['']": true,
"data-[active=true]:after:block": true,
"data-[active=true]:after:absolute": true,
"data-[active=true]:after:w-1.5": true,
"data-[active=true]:after:h-1.5": true,
"data-[active=true]:after:top-1/2": true,
"data-[active=true]:after:left-1/2": true,
"data-[active=true]:after:pointer-events-none": true,
"data-[active=true]:after:rounded-full": true,
"data-[active=true]:after:-translate-x-1/2": true,
"data-[active=true]:after:-translate-y-1/2": true,
"data-[active=true]:after:bg-white": true,
"data-[active=true]:after:z-[2]": true,
"data-[active=true]:after:ring-1": true,
"data-[active=true]:after:ring-[rgba(0,0,0,0.33)]": true,
"[&>canvas]:block": true,
"[&>canvas]:w-full": true,
"[&>canvas]:aspect-[1/1]": true,
"[&>canvas]:rounded": true,
"[&>canvas:focus-visible]:outline-none": true,
"[&>canvas:focus-visible]:ring-2": true,
"[&>canvas:focus-visible]:ring-green-500": true,
"[&>canvas:focus-visible]:ring-offset-2": true,
"[&>canvas:focus-visible]:ring-offset-white": true,
"dark:[&>canvas:focus-visible]:ring-offset-stone-700": true,
},
datepicker__inner: {
relative: true,
},
datepicker__removeSelection: {
"self-stretch": true,
"text-sm": true,
flex: true,
"items-center": true,
"ml-0.5": true,
"mr-1.5": true,
"text-stone-700": true,
"hover:text-red-400": true,
"z-10": true,
"dark:text-stone-300": true,
},
datepicker__clearIcon: {
"[&>svg]:w-[0.75em]": true,
},
datepicker__panelWrapper: {
"group/panel": true,
absolute: true,
"min-w-[20em]": true,
"top-[calc(100%_+_0.5em)]": true,
"left-0": true,
"shadow-[0_0_1.25em_rgba(0,0,0,.25)]": true,
"rounded-xl": true,
"p-3.5": true,
"bg-white": true,
"z-10": true,
"dark:bg-stone-800": true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:!fixed":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:top-auto":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:max-w-none":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:bottom-0":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:left-0":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:rounded-none":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:w-full":
true,
},
datepicker__panelHeader: {
grid: true,
"grid-cols-[2.5em_1fr_2.5em]": true,
"justify-center": true,
"items-center": true,
"border-b-2": true,
"border-stone-300": true,
"mb-1.5": true,
"pb-2": true,
"dark:border-stone-700": true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:grid-cols-[2.5em_1fr_2.5em_2.5em]":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:group-data-[panel=time]/panel:grid-cols-[2.5em_1fr_2.5em]":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:group-data-[panel=month]/panel:grid-cols-[2.5em_1fr_2.5em]":
true,
},
datepicker__panelClose: {
"aspect-[1/1]": true,
border: true,
"border-stone-300": true,
"rounded-xl": true,
flex: true,
"items-center": true,
"justify-center": true,
"text-stone-700": true,
"[&_svg]:w-[1.25em]": true,
"dark:text-stone-300": true,
"dark:border-stone-800": true,
"[@media(max-width:431px)_and_(hover:none)]:group-data-[panel=time]/panel:col-start-3":
true,
"[@media(max-width:431px)_and_(hover:none)]:group-data-[panel=month]/panel:col-start-3":
true,
},
datepicker__panel: {
flex: true,
"justify-center": true,
},
datepicker__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"placeholder:text-stone-400": true,
},
datepicker__monthsHeader: {
flex: true,
"items-center": true,
"justify-center": true,
"col-start-2": true,
"col-end-2": true,
},
datepicker__timeHeader: {
flex: true,
"items-center": true,
"justify-center": true,
"col-start-2": true,
"col-end-2": true,
},
datepicker__months: {
grid: true,
"grid-cols-3": true,
"w-full": true,
},
datepicker__month: {
"m-1.5": true,
"p-1.5": true,
"text-center": true,
"text-stone-700": true,
"rounded-xl": true,
"bg-stone-200": true,
"aria-selected:!bg-green-600": true,
"aria-selected:!text-white": true,
"focus:outline": true,
"focus:outline-2": true,
"focus:outline-green-600": true,
"focus:outline-offset-2": true,
"focus:bg-white": true,
"focus:text-stone-700": true,
"data-[is-extra=true]:opacity-25": true,
"group-data-[disabled=true]:opacity-50": true,
"group-data-[disabled=true]:cursor-default": true,
"group-data-[disabled=true]:pointer-events-none": true,
"dark:bg-stone-700": true,
"dark:text-stone-300": true,
},
datepicker__yearsHeader: {
flex: true,
"items-center": true,
"justify-center": true,
"text-stone-700": true,
"col-start-2": true,
"col-end-2": true,
"dark:text-stone-300": true,
},
datepicker__years: {
grid: true,
"grid-cols-5": true,
"w-full": true,
},
datepicker__year: {
"text-sm": true,
"text-center": true,
"text-stone-700": true,
"items-center": true,
"m-1.5": true,
"p-1.5": true,
"rounded-xl": true,
"bg-stone-200": true,
"aria-selected:!bg-green-600": true,
"aria-selected:!text-white": true,
"focus:outline": true,
"focus:outline-2": true,
"focus:outline-green-600": true,
"focus:outline-offset-2": true,
"focus:bg-white": true,
"data-[is-extra=true]:opacity-25": true,
"group-data-[disabled=true]:opacity-50": true,
"group-data-[disabled=true]:cursor-default": true,
"group-data-[disabled=true]:pointer-events-none": true,
"dark:bg-stone-700": true,
"dark:text-stone-300": true,
},
datepicker__weekDays: {
grid: true,
"grid-cols-7": true,
},
datepicker__weekDay: {
"w-[2.25em]": true,
"text-stone-700": true,
"m-1.5": true,
"rounded-xl": true,
"font-medium": true,
lowercase: true,
"dark:text-stone-500": true,
},
datepicker__calendarWeeks: {
"": true,
},
datepicker__week: {
grid: true,
"grid-cols-7": true,
"group-data-[disabled=true]:opacity-50": true,
"group-data-[disabled=true]:cursor-default": true,
"group-data-[disabled=true]:pointer-events-none": true,
},
datepicker__dayCell: {
flex: true,
"items-center": true,
"justify-center": true,
"text-center": true,
"text-stone-700": true,
"w-[2.25em]": true,
"h-[2.25em]": true,
"m-1": true,
"p-1.5": true,
"rounded-xl": true,
"bg-stone-200": true,
"aria-selected:bg-green-600": true,
"aria-selected:text-white": true,
"focus:outline": true,
"focus:outline-2": true,
"focus:outline-green-600": true,
"focus:outline-offset-2": true,
"focus:bg-white": true,
"data-[is-extra=true]:opacity-25": true,
"data-[disabled=true]:opacity-50": true,
"data-[disabled=true]:cursor-default": true,
"data-[disabled=true]:pointer-events-none": true,
"dark:bg-stone-600": true,
"dark:text-stone-300": true,
"dark:aria-selected:bg-green-600": true,
"dark:aria-selected:text-white": true,
"dark:focus:outline-green-600": true,
"dark:focus:bg-stone-200": true,
"dark:focus:text-stone-700": true,
},
datepicker__timeInput: {
"w-full": true,
"border-2": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"text-stone-700": true,
"border-stone-300": true,
"rounded-xl": true,
"p-1.5": true,
"my-2": true,
"focus-visible:outline-green-600": true,
"dark:text-stone-300": true,
"dark:bg-transparent": true,
"dark:border-stone-700": true,
},
datepicker__daysHeader: {
flex: true,
"items-center": true,
"justify-center": true,
},
datepicker__prev: {
"mr-auto": true,
"px-2": true,
"py-px": true,
"hover:bg-stone-100": true,
"rounded-xl": true,
"col-start-1": true,
"col-end-1": true,
"focus-visible:outline-none": true,
"focus-visible:ring-2": true,
"focus-visible:ring-green-500": true,
"focus-visible:ring-offset-2": true,
},
datepicker__prevLabel: {
hidden: true,
},
datepicker__prevIcon: {
flex: true,
"w-[0.75em]": true,
"select-none": true,
"text-stone-700": true,
"[&>svg]:w-full": true,
"dark:text-stone-300": true,
},
datepicker__dayButton: {
"appearance-none": true,
"text-stone-700": true,
"cursor-pointer": true,
"px-2": true,
"py-px": true,
"border-2": true,
"border-stone-300": true,
"rounded-xl": true,
"mx-1": true,
"hover:border-green-600": true,
"focus-visible:outline-none": true,
"focus-visible:ring-2": true,
"focus-visible:ring-green-500": true,
"focus-visible:ring-offset-2": true,
"dark:text-stone-300": true,
"dark:border-stone-700": true,
"dark:hover:border-green-500": true,
},
datepicker__monthButton: {
"appearance-none": true,
"text-stone-700": true,
"cursor-pointer": true,
"px-2": true,
"py-px": true,
"border-2": true,
"border-stone-300": true,
"rounded-xl": true,
"mx-1": true,
"hover:border-green-600": true,
"focus-visible:outline-none": true,
"focus-visible:ring-2": true,
"focus-visible:ring-green-500": true,
"focus-visible:ring-offset-2": true,
"dark:text-stone-300": true,
"dark:border-stone-700": true,
"dark:hover:border-green-500": true,
},
datepicker__yearButton: {
"appearance-none": true,
"text-stone-700": true,
"cursor-pointer": true,
"px-2": true,
"py-px": true,
"border-2": true,
"border-stone-300": true,
"rounded-xl": true,
"mx-1": true,
"hover:border-green-600": true,
"focus-visible:outline-none": true,
"focus-visible:ring-2": true,
"focus-visible:ring-green-500": true,
"focus-visible:ring-offset-2": true,
"dark:text-stone-300": true,
"dark:border-stone-700": true,
"dark:hover:border-green-500": true,
},
datepicker__next: {
"ml-auto": true,
"px-2": true,
"py-px": true,
"rounded-xl": true,
"hover:bg-stone-100": true,
"hover:rounded": true,
"col-start-3": true,
"col-end-3": true,
"focus-visible:outline-none": true,
"focus-visible:ring-2": true,
"focus-visible:ring-green-500": true,
"focus-visible:ring-offset-2": true,
},
datepicker__nextLabel: {
hidden: true,
},
datepicker__nextIcon: {
flex: true,
"w-[0.75em]": true,
"select-none": true,
"text-stone-700": true,
"[&>svg]:w-full": true,
"dark:text-stone-300": true,
},
datepicker__openButton: {
"appearance-none": true,
"border-0": true,
"bg-transparent": true,
flex: true,
"p-0": true,
"self-stretch": true,
"cursor-pointer": true,
"focus-visible:outline-none": true,
"focus-visible:ring-2": true,
"focus-visible:ring-green-500": true,
"focus-visible:ring-offset-2": true,
"focus-visible:rounded-xl": true,
},
datepicker__calendarIcon: {
"text-stone-600": true,
"focus-visible:text-green-600": true,
flex: true,
"w-[1em]": true,
"grow-0": true,
"shrink-0": true,
"self-stretch": true,
"select-none": true,
"[&>svg]:w-full": true,
"[&>svg]:m-auto": true,
"[&>svg]:max-h-[1em]": true,
"[&>svg]:max-w-[1em]": true,
},
dropdown__placeholder: {
"text-stone-400": true,
grow: true,
"dark:text-stone-400/50": true,
},
dropdown__selector: {
flex: true,
grow: true,
"justify-between": true,
"w-full": true,
"py-1.5": true,
"pl-2.5": true,
"pr-0": true,
"text-sm": true,
"text-stone-700": true,
"text-left": true,
"group-data-[disabled]:!cursor-not-allowed": true,
"group-data-[prefix-icon]:!pl-0": true,
"group-data-[suffix-icon]:!pr-0": true,
"data-[placeholder]:text-stone-400": true,
"selection:bg-green-100": true,
"dark:data-[placeholder]:text-stone-400/50": true,
"dark:text-stone-300": true,
},
dropdown__selectIcon: {
"shrink-0": true,
},
dropdown__selectionsWrapper: {
"w-[85%]": true,
"overflow-hidden": true,
},
dropdown__selection: {
"[&>*]:ml-0": true,
},
dropdown__selections: {
"inline-flex": true,
"items-center": true,
},
dropdown__selectionsItem: {
"whitespace-nowrap": true,
"mr-1": true,
},
dropdown__tagWrapper: {
"[&.formkit-dropZone_.formkit-tag]:opacity-25": true,
"[&.formkit-touchDropZone_.formkit-tag]:opacity-25": true,
},
dropdown__truncationCount: {
flex: true,
"items-center": true,
"justify-center": true,
"h-[1.5em]": true,
"rounded-xl": true,
"bg-stone-400": true,
"text-white": true,
"whitespace-nowrap": true,
"text-[11px]": true,
"[line-height:1em]": true,
"tracking-tighter": true,
"leading-0": true,
"py-1": true,
"px-1": true,
"shrink-0": true,
"my-auto": true,
},
mask__inner: {
relative: true,
},
mask__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"group-data-[has-overlay]:!caret-stone-700": true,
"dark:group-data-[has-overlay]:!caret-stone-300": true,
},
rating__inner: {
"text-stone-300": true,
},
rating__itemsWrapper: {
relative: true,
"inline-flex": true,
"focus:border-green-600": true,
},
rating__onItemRow: {
"h-full": true,
"w-full": true,
},
rating__offItemRow: {
"h-full": true,
"w-full": true,
},
rating__onItemWrapper: {
"[&>*]:w-full": true,
"[&>*]:h-full": true,
"w-full": true,
"h-full": true,
"text-yellow-400": true,
},
rating__offItemWrapper: {
"text-stone-400": true,
"w-full": true,
"h-full": true,
"[&>*]:w-full": true,
"[&>*]:h-full": true,
"dark:text-stone-600": true,
},
rating__ratingItem: {
relative: true,
"focus-within:outline": true,
"focus-within:outline-green-600": true,
"w-[1.5em]": true,
"h-[1.5em]": true,
},
rating__itemLabelInner: {
"h-px": true,
"w-px": true,
"overflow-hidden": true,
absolute: true,
"white-space-nowrap": true,
},
rating__itemLabel: {
absolute: true,
"h-full": true,
},
rating__ratingIcon: {
"w-[1.5em]": true,
"h-[1.5em]": true,
flex: true,
},
rating__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"outline-none": true,
},
rating__messages: {
"mt-1.5": true,
},
repeater__outer: {
"min-w-0": true,
grow: true,
"mb-3.5": true,
"text-sm": true,
"group/repeater": true,
"max-w-full": true,
},
repeater__fieldset: {
"min-w-0": true,
},
repeater__legend: {
block: true,
"text-stone-700": true,
"text-xs": true,
"font-bold": true,
"dark:text-stone-300": true,
"mb-1.5": true,
},
repeater__content: {
"min-w-0": true,
grow: true,
"p-4": true,
flex: true,
"flex-col": true,
"align-center": true,
"[&>div[data-type]]:max-w-none": true,
"[&>div[data-type]:last-child]:mb-0": true,
},
repeater__addButton: {
"!mb-0": true,
"group-data-[disabled]/repeater:pointer-events-none": true,
"group-data-[disabled]/repeater:opacity-50": true,
"group-data-[disabled]/repeater:grayscale": true,
},
repeater__controlLabel: {
absolute: true,
"opacity-0": true,
"pointer-events-none": true,
"text-[0px]": true,
},
repeater__controls: {
flex: true,
"flex-col": true,
"items-center": true,
"justify-center": true,
"bg-stone-50": true,
"p-1.5": true,
"[&>li]:aspect-[1/1]": true,
"dark:bg-stone-800": true,
"rounded-xl": true,
"rounded-tl-none": true,
"rounded-bl-none": true,
},
repeater__downControl: {
"w-[1.5em]": true,
"h-[1.5em]": true,
"my-1.5": true,
"mx-auto": true,
flex: true,
"items-center": true,
"appearance-none": true,
"justify-center": true,
"aspect-[1/1]": true,
"text-stone-500": true,
"hover:text-green-600": true,
"disabled:hover:text-inherit": true,
"disabled:opacity-25": true,
"disabled:!text-stone-500": true,
"dark:text-stone-300": true,
"dark:disabled:!text-stone-300": true,
"dark:hover:text-green-500": true,
},
repeater__upControl: {
"w-[1.5em]": true,
"h-[1.5em]": true,
"my-1.5": true,
"mx-auto": true,
flex: true,
"items-center": true,
"appearance-none": true,
"justify-center": true,
"aspect-[1/1]": true,
"text-stone-500": true,
"hover:text-green-600": true,
"disabled:hover:text-inherit": true,
"disabled:opacity-25": true,
"disabled:!text-stone-500": true,
"dark:text-stone-300": true,
"dark:disabled:!text-stone-300": true,
"dark:hover:text-green-500": true,
},
repeater__removeControl: {
"w-[1.5em]": true,
"h-[1.5em]": true,
"my-1.5": true,
"mx-auto": true,
flex: true,
"items-center": true,
"appearance-none": true,
"justify-center": true,
"aspect-[1/1]": true,
"text-stone-500": true,
"hover:text-green-600": true,
"disabled:hover:text-inherit": true,
"disabled:opacity-25": true,
"disabled:!text-stone-500": true,
"dark:text-stone-300": true,
"dark:disabled:!text-stone-300": true,
"dark:hover:text-green-500": true,
},
repeater__insertControl: {
"w-[1.5em]": true,
"h-[1.5em]": true,
"my-1.5": true,
"mx-auto": true,
flex: true,
"items-center": true,
"appearance-none": true,
"justify-center": true,
"aspect-[1/1]": true,
"text-stone-500": true,
"hover:text-green-600": true,
"disabled:hover:text-inherit": true,
"disabled:opacity-25": true,
"disabled:!text-stone-500": true,
"dark:text-stone-300": true,
"dark:disabled:!text-stone-300": true,
"dark:hover:text-green-500": true,
},
repeater__help: {
"text-stone-500": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-stone-400": true,
"mb-1.5": true,
"-mt-1": true,
},
repeater__item: {
flex: true,
relative: true,
"w-full": true,
"mb-1.5": true,
"bg-white": true,
border: true,
"border-stone-300": true,
"rounded-xl": true,
"shadow-md": true,
"dark:border-stone-700": true,
"dark:bg-transparent": true,
"[&.formkit-dropZone]:opacity-30": true,
"[&.formkit-dropZone]:blur-[2px]": true,
},
repeater__dragHandleWrapper: {
relative: true,
"w-8": true,
"bg-stone-50": true,
"rounded-xl": true,
"rounded-tr-none": true,
"rounded-br-none": true,
"dark:bg-stone-800": true,
},
repeater__dragHandle: {
"w-full": true,
"h-full": true,
flex: true,
absolute: true,
"top-0": true,
"left-0": true,
"cursor-grab": true,
"active:cursor-grabbing": true,
},
repeater__dragHandleIcon: {
"w-2": true,
"m-auto": true,
"text-stone-500": true,
"dark:text-stone-700": true,
"[&>svg>path]:fill-current": true,
},
repeater__moveDownIcon: {
block: true,
"w-[0.75em]": true,
"aspect-[1/1]": true,
},
repeater__moveUpIcon: {
block: true,
"w-[0.75em]": true,
"aspect-[1/1]": true,
},
repeater__removeIcon: {
block: true,
"w-[1.25em]": true,
"aspect-[1/1]": true,
},
repeater__addIcon: {
block: true,
"w-[1.25em]": true,
"aspect-[1/1]": true,
},
slider__outer: {
group: true,
"max-w-[24em]": true,
"min-w-0": true,
grow: true,
"mb-3.5": true,
"data-[disabled]:select-none": true,
"data-[disabled]:opacity-50": true,
"text-sm": true,
"data-[disabled]:pointer-events-none": true,
},
slider__help: {
"text-stone-500": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-stone-400": true,
"-mt-0.5": true,
"mb-1.5": true,
},
slider__sliderInner: {
flex: true,
"items-center": true,
"[&>[data-type=number]]:mb-0": true,
"[&>[data-type=number]]:ml-2.5": true,
"[&>[data-type=number]]:shrink": true,
"[&>[data-type=number]]:grow-0": true,
"[&[data-has-mark-labels=true]_[id^=track]]:mb-4": true,
},
slider__track: {
grow: true,
relative: true,
"z-20": true,
"py-2": true,
"select-none": true,
},
slider__trackWrapper: {
"px-[2px]": true,
"rounded-full": true,
"bg-stone-300": true,
"dark:bg-stone-500": true,
},
slider__trackInner: {
"h-1": true,
"mx-0.5": true,
relative: true,
},
slider__prefixIcon: {
flex: true,
"items-center": true,
"-ml-0.5": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
slider__suffixIcon: {
flex: true,
"items-center": true,
"-mr-0.5": true,
"ml-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
"text-stone-600": true,
"dark:text-stone-300": true,
},
slider__fill: {
"h-full": true,
"rounded-full": true,
absolute: true,
"top-0": true,
"-mx-1": true,
"bg-green-600": true,
"group-data-[disabled]:bg-stone-500": true,
},
slider__marks: {
absolute: true,
"pointer-events-none": true,
"inset-0": true,
},
slider__mark: {
absolute: true,
"top-1/2": true,
"w-[3px]": true,
"h-[3px]": true,
"rounded-full": true,
"-translate-x-1/2": true,
"-translate-y-1/2": true,
"bg-stone-400": true,
"data-[active=true]:bg-white": true,
},
slider__markLabel: {
absolute: true,
"top-[calc(100%+0.5em)]": true,
"left-1/2": true,
"text-stone-400": true,
"text-[11px]": true,
"[line-height:1em]": true,
"-translate-x-1/2": true,
},
slider__handles: {
"m-0": true,
"p-0": true,
"list-none": true,
},
slider__handle: {
group: true,
"select-none": true,
"w-4": true,
"h-4": true,
"rounded-full": true,
"bg-white": true,
absolute: true,
"top-1/2": true,
"left-0": true,
"z-30": true,
"-translate-x-1/2": true,
"-translate-y-1/2": true,
"shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1),0_1px_2px_0_rgba(0,0,0,0.5)]":
true,
"focus-visible:outline-0": true,
"focus-visible:ring-2": true,
"ring-green-600": true,
"data-[is-target=true]:z-20": true,
"dark:bg-stone-200": true,
},
slider__tooltip: {
absolute: true,
"bottom-full": true,
"left-1/2": true,
"-translate-x-1/2": true,
"-translate-y-[4px]": true,
"bg-green-600": true,
"text-white": true,
"py-1": true,
"px-1": true,
"text-xs": true,
"leading-none": true,
"whitespace-nowrap": true,
rounded: true,
"opacity-0": true,
"pointer-events-none": true,
"transition-opacity": true,
'after:content-[""]': true,
"after:absolute": true,
"after:top-full": true,
"after:left-1/2": true,
"after:-translate-x-1/2": true,
"after:-translate-y-[1px]": true,
"after:border-4": true,
"after:border-transparent": true,
"after:border-t-green-600": true,
"group-hover:opacity-100": true,
"group-focus-visible:opacity-100": true,
"group-data-[show-tooltip=true]:opacity-100": true,
},
slider__linkedValues: {
flex: true,
"items-start": true,
"justify-between": true,
},
slider__minValue: {
grow: true,
"!max-w-[45%]": true,
"mb-0": true,
"[&>div>div]:relative": true,
'[&>div>div::after]:content-[""]': true,
"[&>div>div::after]:absolute": true,
"[&>div>div::after]:top-1/2": true,
"[&>div>div::after]:left-[105.5%]": true,
"[&>div>div::after]:w-[12%]": true,
"[&>div>div::after]:h-[1px]": true,
"[&>div>div::after]:bg-stone-400": true,
"dark:[&>div>div::after]:bg-stone-800": true,
},
slider__maxValue: {
grow: true,
"!max-w-[45%]": true,
"mb-0": true,
relative: true,
},
slider__chart: {
relative: true,
"z-20": true,
"mb-2": true,
flex: true,
"justify-between": true,
"items-center": true,
"w-full": true,
"aspect-[3/1]": true,
},
slider__chartBar: {
absolute: true,
"bottom-0": true,
"h-full": true,
"bg-stone-400": true,
"data-[active=false]:bg-stone-300": true,
"dark:bg-stone-500": true,
"dark:data-[active=false]:bg-stone-600": true,
},
taglist__inner: {
"py-1.5": true,
"pr-0": true,
"pl-0": true,
},
taglist__tags: {
"pl-2.5": true,
},
taglist__tagWrapper: {
"[&.formkit-dropZone_.formkit-tag]:opacity-25": true,
"[&.formkit-touchDropZone_.formkit-tag]:opacity-25": true,
},
taglist__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"!p-0": true,
"!w-[0%]": true,
"min-w-[1em]": true,
"inline-block": true,
"-mt-0.5": true,
"first:mt-0": true,
"first:mb-0.5": true,
},
taglist__listboxButton: {
"ml-auto": true,
"shrink-0": true,
},
toggle__outer: {
group: true,
"min-w-0": true,
grow: true,
"mb-3.5": true,
"data-[disabled]:select-none": true,
"data-[disabled]:opacity-50": true,
"text-sm": true,
"max-w-none": true,
},
toggle__altLabel: {
block: true,
"w-full": true,
"mb-1.5": true,
"font-bold": true,
"text-[11px]": true,
"[line-height:1em]": true,
"text-stone-700": true,
"dark:text-stone-300": true,
},
toggle__inner: {
peer: true,
"inline-block": true,
"mr-1.5": true,
},
toggle__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
peer: true,
absolute: true,
"opacity-0": true,
"w-0": true,
"h-0": true,
},
toggle__label: {
block: true,
"text-stone-700": true,
"text-xs": true,
"font-bold": true,
"mb-0.5": true,
"dark:text-stone-300": true,
"peer-first:font-normal": true,
"peer-first:mb-0": true,
},
toggle__innerLabel: {
absolute: true,
"text-stone-200": true,
"text-[10px]": true,
"font-bold": true,
"select-none": true,
"left-full": true,
"top-1/2": true,
"-translate-x-full": true,
"-translate-y-1/2": true,
"px-1": true,
},
toggle__thumb: {
relative: true,
"p-0.5": true,
"left-0": true,
"aspect-[1/1]": true,
"rounded-full": true,
"transition-all": true,
"w-[1.25em]": true,
"bg-stone-50": true,
"text-stone-600": true,
"shadow-base": true,
},
toggle__track: {
"p-0.5": true,
"min-w-[3em]": true,
relative: true,
"cursor-pointer": true,
"select-none": true,
"rounded-full": true,
"transition-all": true,
"bg-stone-400": true,
"peer-checked:bg-green-600": true,
"peer-checked:[&>div:last-child]:left-full": true,
"peer-checked:[&>div:last-child]:-translate-x-full": true,
"peer-checked:[&>div:first-child:not(:last-child)]:left-0": true,
"peer-checked:[&>div:first-child:not(:last-child)]:translate-x-0": true,
shadow: true,
"peer-focus-visible:ring-2": true,
"peer-focus-visible:ring-green-500": true,
"peer-focus-visible:ring-offset-2": true,
"dark:bg-stone-500": true,
},
toggle__valueLabel: {
"font-bold": true,
"text-[11px]": true,
"[line-height:1em]": true,
"text-stone-700": true,
"dark:text-stone-300": true,
},
toggle__wrapper: {
flex: true,
"flex-wrap": true,
"items-center": true,
"mb-1.5": true,
},
togglebuttons__wrapper: {
"mb-1.5": true,
},
togglebuttons__options: {
"group/options": true,
"inline-flex": true,
"data-[vertical=true]:flex-col": true,
},
togglebuttons__option: {
"group/option": true,
},
togglebuttons__input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
"!px-3.5": true,
"!mb-0": true,
relative: true,
"focus:z-10": true,
"group-data-[vertical=true]/options:w-full": true,
"justify-center": true,
"bg-green-50": true,
"disabled:opacity-50": true,
"disabled:cursor-not-allowed": true,
"group-data-[disabled]:disabled:opacity-100": true,
"dark:bg-transparent": true,
"dark:disabled:bg-transparent": true,
"dark:disabled:text-green-500": true,
"dark:text-green-500": true,
"aria-[pressed=true]:bg-green-600": true,
"aria-[pressed=true]:text-white": true,
"dark:aria-[pressed=true]:bg-green-600": true,
"dark:aria-[pressed=true]:text-white": true,
"group-[]/option:!rounded-none": true,
"group-data-[vertical=false]/options:group-first/option:!rounded-xl": true,
"group-data-[vertical=true]/options:group-first/option:!rounded-xl": true,
"group-data-[vertical=false]/options:group-first/option:!rounded-tr-none":
true,
"group-data-[vertical=false]/options:group-first/option:!rounded-br-none":
true,
"group-data-[vertical=true]/options:group-first/option:!rounded-bl-none":
true,
"group-data-[vertical=true]/options:group-first/option:!rounded-br-none":
true,
"group-data-[vertical=false]/options:group-last/option:!rounded-xl": true,
"group-data-[vertical=true]/options:group-last/option:!rounded-xl": true,
"group-data-[vertical=false]/options:group-last/option:!rounded-tl-none":
true,
"group-data-[vertical=false]/options:group-last/option:!rounded-bl-none":
true,
"group-data-[vertical=true]/options:group-last/option:!rounded-tl-none":
true,
"group-data-[vertical=true]/options:group-last/option:!rounded-tr-none":
true,
"group-data-[vertical=false]/options:group-[]/option:!border-r-0": true,
"group-data-[vertical=false]/options:group-last/option:!border-r": true,
"group-data-[vertical=false]/options:group-[]/option:aria-[pressed=true]:border-x-green-500":
true,
"group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-green-600":
true,
"group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-green-600":
true,
"dark:group-data-[vertical=false]/options:group-[]/option:aria-[pressed=true]:border-x-green-600":
true,
"dark:group-data-[vertical=false]/options:group-first/option:aria-[pressed=true]:border-l-green-600":
true,
"dark:group-data-[vertical=false]/options:group-last/option:aria-[pressed=true]:border-r-green-600":
true,
"group-data-[vertical=true]/options:group-[]/option:!border-b-0": true,
"group-data-[vertical=true]/options:group-last/option:!border-b": true,
"group-data-[vertical=true]/options:group-[]/option:aria-[pressed=true]:border-y-green-500":
true,
"group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-green-600":
true,
"group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-green-600":
true,
"dark:group-data-[vertical=true]/options:group-[]/option:aria-[pressed=true]:border-y-green-600":
true,
"dark:group-data-[vertical=true]/options:group-first/option:aria-[pressed=true]:border-t-green-600":
true,
"dark:group-data-[vertical=true]/options:group-last/option:aria-[pressed=true]:border-b-green-600":
true,
},
transferlist__outer: {
group: true,
"min-w-0": true,
grow: true,
"mb-3.5": true,
"data-[disabled]:select-none": true,
"data-[disabled]:opacity-50": true,
"text-sm": true,
"max-w-none": true,
"[&_.dnd-placeholder]:bg-green-600": true,
"[&_.dnd-placeholder]:text-white": true,
},
transferlist__wrapper: {
flex: true,
"flex-col": true,
"sm:flex-row": true,
"justify-between": true,
"w-full": true,
"max-w-none": true,
},
transferlist__help: {
"text-stone-500": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-stone-400": true,
"pb-1.5": true,
},
transferlist__transferlist: {
grow: true,
shrink: true,
"min-w-0": true,
"shadow-md": true,
"group-[]/repeater:shadow-none": true,
"group-[]/multistep:shadow-none": true,
"aspect-[4/5]": true,
flex: true,
"flex-col": true,
"h-[350px]": true,
border: true,
"border-stone-300": true,
"rounded-xl": true,
"overflow-hidden": true,
"select-none": true,
"[&:has(:focus-visible)]:ring-1": true,
"[&:has(:focus-visible)]:ring-green-500": true,
"dark:border-stone-800": true,
"dark:bg-stone-900/50": true,
},
transferlist__transferlistHeader: {
flex: true,
"bg-stone-100": true,
"text-stone-600": true,
"text-xs": true,
"justify-between": true,
"items-center": true,
"border-b": true,
"border-stone-300": true,
"py-1.5": true,
"px-2": true,
"dark:bg-stone-700": true,
"dark:border-stone-800": true,
"dark:text-stone-400": true,
},
transferlist__transferlistHeaderItemCount: {
"ml-auto": true,
"text-xs": true,
"min-w-[1.5em]": true,
"[line-height:1.5em]": true,
"px-1.5": true,
"text-center": true,
"rounded-full": true,
"bg-stone-200": true,
"text-stone-700": true,
"dark:bg-stone-500": true,
"dark:text-stone-300": true,
},
transferlist__transferlistListItems: {
"list-none": true,
"bg-white": true,
"h-full": true,
"overflow-x-hidden": true,
"overflow-y-auto": true,
"dark:bg-transparent": true,
"outline-none": true,
},
transferlist__transferlistListItem: {
"py-1.5": true,
"px-1.5": true,
"text-stone-700": true,
"ring-1": true,
"ring-stone-200": true,
"aria-selected:bg-green-100": true,
"data-[is-active=true]:bg-green-100": true,
"data-[is-active=true]:ring-green-200": true,
"aria-selected:ring-green-200": true,
relative: true,
flex: true,
"cursor-pointer": true,
"items-center": true,
"bg-white": true,
"pl-[1.5em]": true,
"first:-mt-px": true,
"first:border-t": true,
"aria-selected:z-[2]": true,
"aria-selected:border-transparent": true,
"aria-selected:ring-1": true,
"data-[is-active=true]:z-[2]": true,
"data-[is-active=true]:border-transparent": true,
"data-[is-active=true]:ring-1": true,
"group-data-[is-max=true]:cursor-not-allowed": true,
"dark:bg-stone-800": true,
"dark:text-stone-300": true,
"dark:data-[is-active=true]:bg-green-900": true,
"dark:aria-selected:bg-green-900": true,
"dark:ring-stone-700": true,
"dark:data-[is-active=true]:ring-green-600": true,
"dark:aria-selected:ring-green-600": true,
"[&.formkit-dropZone]:bg-green-100": true,
"[&.formkit-selectionDropZone]:bg-green-100": true,
"[&.formkit-touchDropZone]:bg-green-100": true,
"[&.formkit-touchSelectionDropZone]:bg-green-100": true,
"[&.formkit-longTouch]:bg-green-100": true,
"dark:[&.formkit-dropZone]:bg-green-900": true,
"dark:[&.formkit-selectionDropZone]:bg-green-900": true,
"dark:[&.formkit-touchDropZone]:bg-green-900": true,
"dark:[&.formkit-touchSelectionDropZone]:bg-green-900": true,
"dark:[&.formkit-longTouch]:bg-green-900": true,
},
transferlist__transferlistOption: {
"text-xs": true,
},
transferlist__transferControls: {
"inline-flex": true,
"grow-0": true,
shrink: true,
border: true,
"border-stone-300": true,
"flex-row": true,
"sm:flex-col": true,
"justify-center": true,
"my-1.5": true,
"sm:my-auto": true,
"mx-auto": true,
"sm:mx-1.5": true,
"rounded-xl": true,
"overflow-clip": true,
"shadow-sm": true,
"group-[]/repeater:shadow-none": true,
"group-[]/multistep:shadow-none": true,
"dark:border-stone-800": true,
},
transferlist__sourceEmptyMessage: {
"appearance-none": true,
"border-none": true,
"w-full": true,
"my-1.5": true,
"text-center": true,
"text-stone-500": true,
italic: true,
},
transferlist__sourceListItems: {
"group-data-[is-max=true]:opacity-50": true,
},
transferlist__targetEmptyMessage: {
"appearance-none": true,
"border-none": true,
"w-full": true,
"my-1.5": true,
"text-center": true,
"text-stone-500": true,
italic: true,
},
transferlist__emptyMessageInner: {
flex: true,
"items-center": true,
"justify-center": true,
"p-1.5": true,
"text-sm": true,
},
transferlist__transferlistControls: {
"bg-white": true,
"p-1.5": true,
"border-b": true,
"border-stone-200": true,
"dark:bg-stone-700": true,
"dark:border-stone-700": true,
},
transferlist__transferlistSearch: {
flex: true,
border: true,
"border-stone-300": true,
"rounded-xl": true,
"items-center": true,
"text-stone-700": true,
"selection:bg-green-100": true,
"dark:border-stone-800": true,
"dark:text-stone-300": true,
"dark:selection:bg-green-100": true,
"dark:selection:text-stone-700": true,
"dark:bg-stone-800": true,
},
transferlist__transferlistSearchInput: {
"border-none": true,
"px-1.5": true,
"py-1.5": true,
"w-full": true,
"bg-transparent": true,
"outline-none": true,
"text-xs": true,
},
transferlist__transferlistSearchClear: {
flex: true,
"w-[0.75em]": true,
"mr-1.5": true,
"[&_svg]:w-full": true,
},
transferlist__controlLabel: {
absolute: true,
"opacity-0": true,
"pointer-events-none": true,
"text-[0px]": true,
},
transferlist__selectedIcon: {
"w-[0.75em]": true,
absolute: true,
"left-[0.5em]": true,
"select-none": true,
"text-green-600": true,
"dark:text-green-500": true,
},
transferlist__transferlistButton: {
"sm:w-5": true,
relative: true,
flex: true,
"justify-center": true,
"text-sm": true,
"shrink-0": true,
"box-content": true,
"text-stone-700": true,
"disabled:bg-stone-200": true,
"disabled:!text-stone-400": true,
"bg-stone-50": true,
"hover:text-green-600": true,
"cursor-pointer": true,
"appearance-none": true,
"border-none": true,
"p-2.5": true,
"hover:z-10": true,
"disabled:cursor-not-allowed": true,
"disabled:opacity-50": true,
"disabled:hover:text-current": true,
"disabled:hover:outline-none": true,
"focus-visible:ring-1": true,
"focus-visible:ring-green-500": true,
"focus-visible:z-10": true,
"dark:bg-stone-800": true,
"dark:text-stone-400": true,
"dark:disabled:!text-stone-600": true,
"dark:disabled:bg-stone-900": true,
"dark:disabled:hover:text-current": true,
"dark:disabled:hover:outline-none": true,
"dark:hover:text-green-500": true,
},
transferlist__fastForwardIcon: {
"w-4": true,
flex: true,
"select-none": true,
"[&>svg]:m-auto": true,
"[&>svg]:w-full": true,
"[&>svg]:max-w-[1rem]": true,
"[&>svg]:max-h-[1rem]": true,
"rotate-90": true,
"sm:rotate-0": true,
},
transferlist__moveRightIcon: {
"w-4": true,
flex: true,
"select-none": true,
"[&>svg]:m-auto": true,
"[&>svg]:w-full": true,
"[&>svg]:max-w-[1rem]": true,
"[&>svg]:max-h-[1rem]": true,
"rotate-90": true,
"sm:rotate-0": true,
},
transferlist__moveLeftIcon: {
"w-4": true,
flex: true,
"select-none": true,
"[&>svg]:m-auto": true,
"[&>svg]:w-full": true,
"[&>svg]:max-w-[1rem]": true,
"[&>svg]:max-h-[1rem]": true,
"rotate-90": true,
"sm:rotate-0": true,
},
transferlist__rewindIcon: {
"w-4": true,
flex: true,
"select-none": true,
"[&>svg]:m-auto": true,
"[&>svg]:w-full": true,
"[&>svg]:max-w-[1rem]": true,
"[&>svg]:max-h-[1rem]": true,
"rotate-90": true,
"sm:rotate-0": true,
},
transferlist__messages: {
"mt-1.5": true,
},
barcode__barcodeIcon: {
"w-[1.5em]": true,
"text-stone-700": true,
"cursor-pointer": true,
"dark:text-stone-300": true,
},
barcode__dialog: {
"border-none": true,
"outline-none": true,
"overflow-clip": true,
"p-0": true,
"bg-black": true,
"rounded-xl": true,
"w-[100%-2rem]": true,
"max-w-[30rem]": true,
"[&::backdrop]:bg-stone-800/50": true,
},
barcode__video: {
"w-full": true,
"aspect-[1/1]": true,
"object-cover": true,
block: true,
"pointer-events-none": true,
},
barcode__closeIcon: {
"cursor-pointer": true,
absolute: true,
"bg-white": true,
"color-stone-700": true,
"w-[1.5em]": true,
"h-[1.5em]": true,
"rounded-xl": true,
flex: true,
"top-1.5": true,
"right-1.5": true,
"z-20": true,
"[&>svg]:w-[1.25em]": true,
"[&>svg]:h-[1.25em]": true,
"[&>svg]:m-auto": true,
},
barcode__overlay: {
"text-stone-700": true,
"dark:text-stone-300": true,
absolute: true,
"top-1/2": true,
"left-1/2": true,
"w-[min(20em,75%)]": true,
"aspect-[1/1]": true,
"-translate-x-1/2": true,
"-translate-y-1/2": true,
"rounded-xl": true,
"pointer-events-none": true,
"shadow-[0_0_0_999em_rgba(0,0,0,0.5)]": true,
},
barcode__overlayDecorators: {
absolute: true,
"inset-0": true,
"z-10": true,
},
barcode__overlayDecoratorTopLeft: {
absolute: true,
"w-[1.5rem]": true,
"h-[1.5rem]": true,
"rounded-xl": true,
"top-0": true,
"left-0": true,
"border-l-4": true,
"border-t-4": true,
"rounded-tr-none": true,
"rounded-bl-none": true,
},
barcode__overlayDecoratorTopRight: {
absolute: true,
"w-[1.5rem]": true,
"h-[1.5rem]": true,
"rounded-xl": true,
"top-0": true,
"right-0": true,
"border-r-4": true,
"border-t-4": true,
"rounded-tl-none": true,
"rounded-br-none": true,
},
barcode__overlayDecoratorBottomRight: {
absolute: true,
"w-[1.5rem]": true,
"h-[1.5rem]": true,
"rounded-xl": true,
"bottom-0": true,
"right-0": true,
"border-r-4": true,
"border-b-4": true,
"rounded-tr-none": true,
"rounded-bl-none": true,
},
barcode__overlayDecoratorBottomLeft: {
absolute: true,
"w-[1.5rem]": true,
"h-[1.5rem]": true,
"rounded-xl": true,
"bottom-0": true,
"left-0": true,
"border-l-4": true,
"border-b-4": true,
"rounded-tl-none": true,
"rounded-br-none": true,
},
"multi-step__outer": {
group: true,
"min-w-0": true,
grow: true,
"mb-3.5": true,
"data-[disabled]:select-none": true,
"data-[disabled]:opacity-50": true,
"text-sm": true,
"group/multistep": true,
"max-w-[32rem]": true,
},
"multi-step__wrapper": {
"group/wrapper": true,
"data-[tab-style=tab]:shadow-md": true,
"data-[tab-style=tab]:rounded-xl": true,
},
"multi-step__tabs": {
flex: true,
"items-center": true,
"group-data-[tab-style=tab]/wrapper:overflow-auto": true,
"group-data-[tab-style=tab]/wrapper:border": true,
"group-data-[tab-style=tab]/wrapper:border-b-0": true,
"group-data-[tab-style=tab]/wrapper:border-stone-300": true,
"group-data-[tab-style=tab]/wrapper:rounded-xl": true,
"group-data-[tab-style=tab]/wrapper:rounded-bl-none": true,
"group-data-[tab-style=tab]/wrapper:rounded-br-none": true,
"dark:group-data-[tab-style=tab]/wrapper:border-stone-800": true,
"group-data-[tab-style=progress]/wrapper:my-5": true,
"group-data-[tab-style=progress]/wrapper:justify-around": true,
"group-data-[tab-style=progress]/wrapper:overflow-visible": true,
"group-data-[tab-style=progress]/wrapper:group-data-[hide-labels=true]/wrapper:mb-3":
true,
},
"multi-step__tab": {
"group/tab": true,
"group-data-[tab-style=tab]/wrapper:relative": true,
"group-data-[tab-style=tab]/wrapper:flex": true,
"group-data-[tab-style=tab]/wrapper:grow": true,
"group-data-[tab-style=tab]/wrapper:text-xs": true,
"group-data-[tab-style=tab]/wrapper:items-center": true,
"group-data-[tab-style=tab]/wrapper:justify-center": true,
"group-data-[tab-style=tab]/wrapper:cursor-pointer": true,
"group-data-[tab-style=tab]/wrapper:text-stone-700": true,
"group-data-[tab-style=tab]/wrapper:bg-stone-100": true,
"group-data-[tab-style=tab]/wrapper:py-3": true,
"group-data-[tab-style=tab]/wrapper:px-3.5": true,
"group-data-[tab-style=tab]/wrapper:border-r": true,
"group-data-[tab-style=tab]/wrapper:border-b": true,
"group-data-[tab-style=tab]/wrapper:border-stone-300": true,
"group-data-[tab-style=tab]/wrapper:last:border-r-0": true,
"group-data-[tab-style=tab]/wrapper:shadow-[inset_0_-0.5em_0.5em_-0.5em_rgba(0,0,0,0.1)]":
true,
"group-data-[tab-style=tab]/wrapper:data-[active=true]:bg-white": true,
"group-data-[tab-style=tab]/wrapper:data-[active=true]:font-bold": true,
"group-data-[tab-style=tab]/wrapper:data-[active=true]:border-b-white":
true,
"group-data-[tab-style=tab]/wrapper:data-[active=true]:z-10": true,
"group-data-[tab-style=tab]/wrapper:data-[active=true]:shadow-[0_0_0.5em_0_rgba(0,0,0,0.1)]":
true,
"dark:group-data-[tab-style=tab]/wrapper:text-stone-300": true,
"dark:group-data-[tab-style=tab]/wrapper:bg-stone-950/20": true,
"dark:group-data-[tab-style=tab]/wrapper:data-[active=true]:bg-transparent":
true,
"dark:group-data-[tab-style=tab]/wrapper:data-[active=true]:border-b-transparent":
true,
"dark:group-data-[tab-style=tab]/wrapper:border-stone-800": true,
"group-data-[tab-style=progress]/wrapper:flex": true,
"group-data-[tab-style=progress]/wrapper:flex-col": true,
"group-data-[tab-style=progress]/wrapper:items-center": true,
"group-data-[tab-style=progress]/wrapper:grow": true,
"group-data-[tab-style=progress]/wrapper:shrink-0": true,
"group-data-[tab-style=progress]/wrapper:relative": true,
"group-data-[tab-style=progress]/wrapper:before:block": true,
"group-data-[tab-style=progress]/wrapper:before:text-xs": true,
"group-data-[tab-style=progress]/wrapper:before:w-[1.25rem]": true,
"group-data-[tab-style=progress]/wrapper:before:h-[1.25rem]": true,
"group-data-[tab-style=progress]/wrapper:before:border-4": true,
"group-data-[tab-style=progress]/wrapper:before:border-stone-300": true,
"group-data-[tab-style=progress]/wrapper:before:rounded-full": true,
"group-data-[tab-style=progress]/wrapper:before:bg-white": true,
"group-data-[tab-style=progress]/wrapper:before:z-10": true,
"dark:group-data-[tab-style=progress]/wrapper:before:border-stone-800":
true,
"dark:group-data-[tab-style=progress]/wrapper:before:bg-stone-950": true,
"group-data-[tab-style=progress]/wrapper:after:block": true,
"group-data-[tab-style=progress]/wrapper:after:h-1": true,
"group-data-[tab-style=progress]/wrapper:after:w-full": true,
"group-data-[tab-style=progress]/wrapper:after:absolute": true,
"group-data-[tab-style=progress]/wrapper:after:top-[0.5em]": true,
"group-data-[tab-style=progress]/wrapper:after:left-[calc(50%+0.5em)]":
true,
"group-data-[tab-style=progress]/wrapper:after:bg-stone-300": true,
"group-data-[tab-style=progress]/wrapper:data-[valid=true]:data-[visited=true]:after:bg-green-600":
true,
"group-data-[tab-style=progress]/wrapper:last:after:hidden": true,
"dark:group-data-[tab-style=progress]/wrapper:after:bg-stone-800": true,
"dark:group-data-[tab-style=progress]/wrapper:data-[valid=true]:data-[visited=true]:after:bg-green-600":
true,
},
"multi-step__tabLabel": {
"group-data-[tab-style=progress]/wrapper:absolute": true,
"group-data-[tab-style=progress]/wrapper:text-stone-800": true,
"group-data-[tab-style=progress]/wrapper:top-full": true,
"group-data-[tab-style=progress]/wrapper:w-full": true,
"group-data-[tab-style=progress]/wrapper:whitespace-nowrap": true,
"group-data-[tab-style=progress]/wrapper:text-[11px]": true,
"[line-height:1em]": true,
"dark:group-data-[tab-style=progress]/wrapper:text-stone-300": true,
},
"multi-step__badge": {
"bg-red-600": true,
absolute: true,
"font-mono": true,
"font-bold": true,
flex: true,
"items-center": true,
"justify-center": true,
"aspect-[1/1]": true,
"[line-height:1.25rem]": true,
"text-white": true,
"rounded-full": true,
"group-data-[valid=true]/tab:bg-green-600": true,
"group-data-[tab-style=tab]/wrapper:text-[0.66rem]": true,
"group-data-[tab-style=tab]/wrapper:p-1.5": true,
"group-data-[tab-style=tab]/wrapper:w-5": true,
"group-data-[tab-style=tab]/wrapper:h-5": true,
"group-data-[tab-style=tab]/wrapper:top-1": true,
"group-data-[tab-style=tab]/wrapper:right-1": true,
"group-data-[tab-style=progress]/wrapper:w-[1.25rem]": true,
"group-data-[tab-style=progress]/wrapper:h-[1.25rem]": true,
"group-data-[tab-style=progress]/wrapper:p-1": true,
"group-data-[tab-style=progress]/wrapper:text-[10px]": true,
"group-data-[tab-style=progress]/wrapper:[line-height:0]": true,
"group-data-[tab-style=progress]/wrapper:z-10": true,
},
"multi-step__validStepIcon": {
"w-full": true,
"h-full": true,
"mt-0.5": true,
},
"multi-step__steps": {
"px-9": true,
"pt-7": true,
"pb-3.5": true,
"bg-white": true,
border: true,
"border-stone-300": true,
"rounded-xl": true,
"dark:bg-transparent": true,
"dark:border-stone-800": true,
"group-data-[tab-style=tab]/wrapper:border-t-0": true,
"group-data-[tab-style=tab]/wrapper:rounded-tl-none": true,
"group-data-[tab-style=tab]/wrapper:rounded-tr-none": true,
"group-data-[tab-style=progress]/wrapper:shadow-md": true,
"[&_[data-type]]:max-w-none": true,
},
step__stepActions: {
flex: true,
"justify-between": true,
"[&>*]:grow-0": true,
},
step__stepPrevious: {
"mr-1": true,
},
step__stepNext: {
"ml-auto": 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-full": true,
"min-w-full": true,
grow: true,
"mb-3.5": true,
"data-[disabled]:select-none": true,
"data-[disabled]:opacity-50": true,
"text-sm": true,
},
label: {
"pointer-events-none": true,
block: true,
"text-stone-700": true,
"text-xs": true,
"font-bold": true,
"mb-0.5": true,
"dark:text-stone-300": true,
},
legend: {
block: true,
"text-stone-700": true,
"text-xs": true,
"font-bold": true,
"dark:text-stone-300": true,
},
input: {
"appearance-none": true,
"[color-scheme:light]": true,
"dark:[color-scheme:dark]": true,
"selection:bg-green-100": true,
"selection:text-stone-700": true,
"group-data-[has-overlay]:selection:!text-transparent": true,
},
prefixIcon: {
flex: true,
"items-center": true,
"-ml-0.5": true,
"mr-1.5": true,
"text-sm": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
},
suffixIcon: {
flex: true,
"items-center": true,
"-mr-0.5": true,
"ml-1.5": true,
"text-sm": 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-1.5": true,
"text-sm": true,
"text-stone-500": true,
"h-[1em]": true,
"w-[1em]": true,
"shrink-0": true,
"[&>svg]:w-full": true,
},
loadMoreInner: {
flex: true,
"text-xs": true,
"text-stone-500": true,
"p-1.5": true,
"items-center": true,
"justify-center": true,
"[&>span]:mr-1.5": true,
},
help: {
"text-stone-500": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-stone-400": true,
},
message: {
"text-red-600": true,
"mb-1.5": true,
"text-[11px]": true,
"[line-height:1em]": true,
"dark:text-red-400": true,
},
overlay: {
"text-stone-700": true,
"dark:text-stone-300": true,
},
overlayPlaceholder: {
"text-stone-400": true,
"dark:text-stone-400/50": true,
},
overlayLiteral: {
"text-stone-700": true,
"dark:text-stone-300": true,
},
overlayChar: {
"text-stone-700": true,
"dark:text-stone-300": true,
},
overlayEnum: {
"text-stone-700": true,
"dark:text-stone-300": true,
},
};
<script setup lang="ts">
import {
FormBuilder,
BuilderProvider,
type FormBuilderConfig,
} from "./components/form-builder/main";
import { computed } from "vue";
const formBuilderConfig = computed<FormBuilderConfig>(() => ({
apiKey: import.meta.env.VITE_MY_OPEN_AI_KEY,
}));
</script>
<template>
<BuilderProvider :config="formBuilderConfig">
<FormBuilder />
</BuilderProvider>
</template>