@byyuurin/ui 0.0.10 → 0.1.0

package/dist/shared/ui.DSyJHSTk.mjs

@@ -0,0 +1,3787 @@
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import { findPath, addTypeTemplate, addTemplate } from '@nuxt/kit';
+import { loadConfig } from '@unocss/config';
+import { genExport } from 'knitwork';
+import { kebabCase } from 'scule';
+import { n as neutralColors } from './ui.CzIlLITK.mjs';
+import { ct } from '@byyuurin/ui-kit';
+import { defu } from 'defu';
+
+const name = "@byyuurin/ui";
+const version = "0.1.0";
+
+const accordion = ct({
+  parts: {
+    root: "w-full",
+    item: "border-b border-default last:border-b-0",
+    header: "flex",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-pointer",
+    content: [
+      "overflow-hidden focus:outline-none",
+      "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
+      "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
+    ],
+    body: "text-sm pb-3.5",
+    leadingIcon: "shrink-0 size-5",
+    trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
+    label: "text-start break-words"
+  },
+  variants: {
+    disabled: {
+      true: {
+        trigger: "cursor-not-allowed opacity-75"
+      }
+    }
+  }
+});
+
+const alert = (options) => ct({
+  parts: {
+    root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
+    wrapper: "min-w-0 flex-1 flex flex-col",
+    title: "text-sm font-medium",
+    description: "text-sm opacity-90",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xl",
+    actions: "flex flex-wrap gap-1.5 shrink-0",
+    close: "p-0"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    orientation: {
+      horizontal: {
+        root: "items-center",
+        actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-2.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
+      }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        root: `bg-${color} text-inverted`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        root: `text-${color} ring ring-inset ring-${color}/25`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: {
+        root: `bg-${color}/10 text-${color}`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: {
+        root: `bg-${color}/10 text-${color} ring ring-inset ring-${color}/25`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        root: "text-inverted bg-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        root: "text-highlighted bg-default ring ring-inset ring-default"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      class: {
+        root: "text-highlighted bg-elevated/50"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: {
+        root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid"
+  }
+});
+
+const avatar = ct({
+  parts: {
+    root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated",
+    image: "h-full w-full rounded-[inherit] object-cover",
+    fallback: "font-medium leading-none text-muted truncate",
+    icon: "text-muted shrink-0"
+  },
+  variants: {
+    size: {
+      "3xs": {
+        root: "size-4 text-[0.5rem]"
+      },
+      "2xs": {
+        root: "size-5 text-[0.625rem]"
+      },
+      "xs": {
+        root: "size-6 text-xs"
+      },
+      "sm": {
+        root: "size-7 text-sm"
+      },
+      "md": {
+        root: "size-8 text-base"
+      },
+      "lg": {
+        root: "size-9 text-lg"
+      },
+      "xl": {
+        root: "size-10 text-xl"
+      },
+      "2xl": {
+        root: "size-11 text-[1.375rem]"
+      },
+      "3xl": {
+        root: "size-12 text-2xl"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+const avatarGroup = ct({
+  parts: {
+    root: "inline-flex flex-row-reverse justify-end",
+    base: "relative rounded-full ring-bg first:me-0"
+  },
+  variants: {
+    size: {
+      "3xs": {
+        base: "ring -me-0.5"
+      },
+      "2xs": {
+        base: "ring -me-0.5"
+      },
+      "xs": {
+        base: "ring -me-0.5"
+      },
+      "sm": {
+        base: "ring-2 -me-1.5"
+      },
+      "md": {
+        base: "ring-2 -me-1.5"
+      },
+      "lg": {
+        base: "ring-2 -me-1.5"
+      },
+      "xl": {
+        base: "ring-3 -me-2"
+      },
+      "2xl": {
+        base: "ring-3 -me-2"
+      },
+      "3xl": {
+        base: "ring-3 -me-2"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+const fieldGroup = ct(
+  /* @unocss-include */
+  {
+    base: "relative",
+    variants: {
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: ""
+      },
+      orientation: {
+        horizontal: "inline-flex -space-x-px",
+        vertical: "flex flex-col -space-y-px"
+      }
+    }
+  }
+);
+const fieldGroupVariant = {
+  fieldGroup: {
+    horizontal: {
+      base: "not-only-child:first:rounded-e-none not-only-child:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]"
+    },
+    vertical: {
+      base: "not-only-child:first:rounded-b-none not-only-child:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]"
+    }
+  }
+};
+const fieldGroupVariantWithRoot = {
+  fieldGroup: {
+    horizontal: {
+      root: "group has-focus-visible:z-[1]",
+      base: "group-not-only-child:group-first:rounded-e-none group-not-only-child:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
+    },
+    vertical: {
+      root: "group has-focus-visible:z-[1]",
+      base: "group-not-only-child:group-first:rounded-b-none group-not-only-child:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
+    }
+  }
+};
+
+const badge = (options) => ct({
+  parts: {
+    base: "font-medium inline-flex items-center",
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailingIcon: "shrink-0"
+  },
+  variants: {
+    ...fieldGroupVariant,
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    size: {
+      xs: {
+        base: "text-[0.5rem]/3 px-1 py-0.5 gap-1 rounded-sm",
+        leadingIcon: "size-3",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-3"
+      },
+      sm: {
+        base: "text-[0.625rem]/3 px-1.5 py-1 gap-1 rounded-sm",
+        leadingIcon: "size-3",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-3"
+      },
+      md: {
+        base: "text-xs px-2 py-1 gap-1 rounded-md",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
+      },
+      lg: {
+        base: "text-sm px-2 py-1 gap-1.5 rounded-md",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-5"
+      },
+      xl: {
+        base: "text-base px-2.5 py-1 gap-1.5 rounded-md",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-6"
+      }
+    },
+    square: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: { base: `bg-${color} text-inverted` }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: { base: `text-${color} ring ring-inset ring-${color}/50` }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: { base: `bg-${color}/10 text-${color}` }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: { base: `bg-${color}/10 text-${color} ring ring-inset ring-${color}/25` }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: { base: "text-inverted bg-inverted" }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      class: { base: "ring ring-inset ring-accented text-default bg-default" }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      class: { base: "text-default bg-elevated" }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: { base: "ring ring-inset ring-accented text-default bg-elevated" }
+    },
+    {
+      size: "xs",
+      square: true,
+      class: { base: "p-0.5" }
+    },
+    {
+      size: "sm",
+      square: true,
+      class: { base: "p-1" }
+    },
+    {
+      size: "md",
+      square: true,
+      class: { base: "p-1" }
+    },
+    {
+      size: "lg",
+      square: true,
+      class: { base: "p-1" }
+    },
+    {
+      size: "xl",
+      square: true,
+      class: { base: "p-1" }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "md"
+  }
+});
+
+const breadcrumb = (options) => ct({
+  parts: {
+    root: "relative min-w-0",
+    list: "flex items-center gap-1.5",
+    item: "flex min-w-0",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary",
+    linkLeadingIcon: "shrink-0 size-5",
+    linkLeadingAvatar: "shrink-0",
+    linkLeadingAvatarSize: "2xs",
+    linkLabel: "truncate",
+    separator: "flex",
+    separatorIcon: "shrink-0 size-5 text-muted"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-primary font-semibold"
+      },
+      false: {
+        link: "text-muted font-medium"
+      }
+    },
+    disabled: {
+      true: {
+        link: "cursor-not-allowed opacity-75"
+      }
+    },
+    to: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      active: false,
+      to: true,
+      class: {
+        link: [
+          "hover:text-default",
+          options.theme.transitions && "transition-colors"
+        ]
+      }
+    }
+  ]
+});
+
+const button = (options) => ct({
+  parts: {
+    base: [
+      "rounded-md font-medium inline-flex items-center",
+      options.theme.transitions && "transition-colors",
+      "cursor-pointer disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75"
+    ],
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailingIcon: "shrink-0"
+  },
+  variants: {
+    ...fieldGroupVariant,
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: "",
+      ghost: "",
+      link: ""
+    },
+    size: {
+      xs: {
+        base: "px-2 py-1 text-xs gap-1",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
+      },
+      sm: {
+        base: "px-2.5 py-1.5 text-xs gap-1.5",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
+      },
+      md: {
+        base: "px-2.5 py-1.5 text-sm gap-1.5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-5"
+      },
+      lg: {
+        base: "px-3 py-2 text-sm gap-2",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-5"
+      },
+      xl: {
+        base: "px-3 py-2 text-base gap-2",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-6"
+      }
+    },
+    block: {
+      true: {
+        base: "w-full justify-center",
+        trailingIcon: "ms-auto"
+      }
+    },
+    square: {
+      true: ""
+    },
+    leading: {
+      true: ""
+    },
+    trailing: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    active: {
+      true: {
+        base: ""
+      },
+      false: {
+        base: ""
+      }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        base: `text-inverted bg-${color} hover:bg-${color}/75 active:bg-${color}/75 disabled:bg-${color} aria-disabled:bg-${color} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        base: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 active:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 } focus-visible:ring-${color}`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: {
+        base: `text-${color} bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 focus:outline-none focus-visible:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: {
+        base: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10 hover:bg-${color}/15 active:bg-${color}/15 disabled:bg-${color}/10 aria-disabled:bg-${color}/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-${color}`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "ghost",
+      class: {
+        base: `text-${color} hover:bg-${color}/10 active:bg-${color}/10 focus:outline-none focus-visible:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "link",
+      class: {
+        base: `text-${color} hover:text-${color}/75 active:text-${color}/75 disabled:text-${color} aria-disabled:text-${color} focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        base: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        base: "ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      class: {
+        base: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: {
+        base: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "ghost",
+      class: {
+        base: "text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "link",
+      class: {
+        base: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      size: "xs",
+      square: true,
+      class: { base: "p-1" }
+    },
+    {
+      size: "sm",
+      square: true,
+      class: { base: "p-1.5" }
+    },
+    {
+      size: "md",
+      square: true,
+      class: { base: "p-1.5" }
+    },
+    {
+      size: "lg",
+      square: true,
+      class: { base: "p-2" }
+    },
+    {
+      size: "xl",
+      square: true,
+      class: { base: "p-2" }
+    },
+    {
+      loading: true,
+      leading: true,
+      class: {
+        leadingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
+        trailingIcon: "animate-spin"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "md"
+  }
+});
+
+const calendar = (options) => ct({
+  parts: {
+    root: "",
+    header: "flex items-center justify-between",
+    body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
+    heading: "text-center font-medium truncate mx-auto",
+    grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
+    gridRow: "grid grid-cols-7 place-items-center",
+    gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
+    gridBody: "grid",
+    headCell: "rounded-md",
+    cell: "relative text-center",
+    cellTrigger: [
+      "m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap cursor-pointer focus-visible:ring-2 focus:outline-none",
+      "data-[today]:font-semibold",
+      "data-[unavailable]:line-through data-[unavailable]:text-muted data-[unavailable]:pointer-events-none",
+      "data-[outside-view]:text-muted",
+      "data-[disabled]:not-[[data-selected]]:text-muted data-[disabled]:cursor-not-allowed",
+      options.theme.transitions && "transition"
+    ]
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        headCell: `text-${color}`,
+        cellTrigger: `focus-visible:ring-${color}`
+      }])),
+      neutral: {
+        headCell: "text-highlighted",
+        cellTrigger: "focus-visible:ring-inverted"
+      }
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    size: {
+      xs: {
+        heading: "text-xs",
+        cell: "text-xs",
+        headCell: "text-[0.625rem]",
+        cellTrigger: "size-7",
+        body: "space-y-2 pt-2"
+      },
+      sm: {
+        heading: "text-xs",
+        headCell: "text-xs",
+        cell: "text-xs",
+        cellTrigger: "size-7"
+      },
+      md: {
+        heading: "text-sm",
+        headCell: "text-xs",
+        cell: "text-sm",
+        cellTrigger: "size-8"
+      },
+      lg: {
+        heading: "text-base",
+        headCell: "text-base",
+        cellTrigger: "size-9 text-base"
+      },
+      xl: {
+        heading: "text-lg",
+        headCell: "text-lg",
+        cellTrigger: "size-10 text-lg"
+      }
+    },
+    outsideView: {
+      false: {
+        cellTrigger: "not-hover:data-[outside-view]:data-[selected]:bg-default not-hover:data-[outside-view]:data-[selected]:text-muted not-hover:data-[outside-view]:data-[selected]:ring-0"
+      }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        cellTrigger: `data-[selected]:bg-${color} data-[selected]:text-inverted data-[today]:not-[[data-selected]]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-[[data-selected]]:bg-${color}/20`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      outsideView: false,
+      class: {
+        cellTrigger: `hover:data-[outside-view]:data-[selected]:bg-${color}/20`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        cellTrigger: "data-[selected]:bg-inverted data-[selected]:text-inverted data-[today]:not-[[data-selected]]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-[[data-selected]]:bg-inverted/10"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "solid",
+      outsideView: false,
+      class: {
+        cellTrigger: "hover:data-[outside-view]:data-[selected]:bg-inverted/10"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        cellTrigger: `data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/50 data-[selected]:text-${color} data-[today]:not-[[data-selected]]:text-${color} data-[highlighted]:bg-${color}/10 hover:not-[[data-selected]]:bg-${color}/10`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        cellTrigger: "data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-[selected]:text-default data-[selected]:bg-default data-[today]:not-[[data-selected]]:text-highlighted data-[highlighted]:bg-inverted/10 hover:not-[[data-selected]]:bg-inverted/10"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: {
+        cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-[today]:not-[[data-selected]]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-[[data-selected]]:bg-${color}/20`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "soft",
+      class: {
+        cellTrigger: "data-[selected]:bg-elevated data-[selected]:text-default data-[today]:not-[[data-selected]]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-[[data-selected]]:bg-inverted/10"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: {
+        cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/25 data-[today]:not-[[data-selected]]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-[[data-selected]]:bg-${color}/20`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: {
+        cellTrigger: "data-[selected]:bg-elevated data-[selected]:text-default data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-[today]:not-[[data-selected]]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-[[data-selected]]:bg-inverted/10"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid",
+    size: "md",
+    outsideView: true
+  }
+});
+
+const card = ct({
+  parts: {
+    root: "rounded divide-y",
+    header: "flex flex-wrap items-center gap-1 p-4 sm:px-6",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6 empty:hidden",
+    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    title: "flex-grow text-xl text-highlighted font-semibold",
+    description: "w-full text-muted text-sm"
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: "bg-inverted text-inverted"
+      },
+      outline: {
+        root: "bg-default ring ring-default divide-y divide-default"
+      },
+      soft: {
+        root: "bg-elevated/50 divide-y divide-default"
+      },
+      subtle: {
+        root: "bg-elevated/50 ring ring-default divide-y divide-default"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+
+const carousel = (options) => ct({
+  parts: {
+    root: "relative focus:outline-none",
+    viewport: "overflow-hidden",
+    container: "flex items-start",
+    item: "min-w-0 shrink-0 basis-full",
+    controls: "",
+    arrows: "",
+    prev: "absolute rounded-full",
+    next: "absolute rounded-full",
+    dots: "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
+    dot: [
+      "cursor-pointer size-3 bg-accented rounded-full",
+      options.theme.transitions && "transition"
+    ]
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        container: "flex-col -mt-4",
+        item: "pt-4",
+        prev: "top-4 sm:-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90",
+        next: "bottom-4 sm:-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90"
+      },
+      horizontal: {
+        container: "flex-row -ms-4",
+        item: "ps-4",
+        prev: "start-4 sm:-start-12 top-1/2 -translate-y-1/2",
+        next: "end-4 sm:-end-12 top-1/2 -translate-y-1/2"
+      }
+    },
+    active: {
+      true: {
+        dot: "data-[state=active]:bg-inverted"
+      }
+    }
+  }
+});
+
+const checkbox = (options) => ct({
+  parts: {
+    root: "relative flex items-start",
+    container: "flex items-center",
+    base: "rounded-sm ring ring-inset ring-accented overflow-hidden cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: "flex items-center justify-center size-full text-inverted data-[state=checked]:animate-[scale-in_100ms_ease-in-out]",
+    icon: "shrink-0 size-full",
+    wrapper: "w-full",
+    label: "block font-medium text-default cursor-pointer",
+    description: "text-muted"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        base: `focus-visible:outline-${color}`,
+        indicator: `bg-${color}`
+      }])),
+      neutral: {
+        base: "focus-visible:outline-inverted",
+        indicator: "bg-inverted"
+      }
+    },
+    variant: {
+      list: {
+        root: ""
+      },
+      card: {
+        root: "border border-muted rounded-lg"
+      }
+    },
+    indicator: {
+      start: {
+        root: "flex-row",
+        wrapper: "ms-2"
+      },
+      end: {
+        root: "flex-row-reverse",
+        wrapper: "me-2"
+      },
+      hidden: {
+        base: "sr-only",
+        wrapper: "text-center"
+      }
+    },
+    size: {
+      xs: {
+        base: "size-3",
+        container: "h-4",
+        wrapper: "text-xs"
+      },
+      sm: {
+        base: "size-3.5",
+        container: "h-4",
+        wrapper: "text-xs"
+      },
+      md: {
+        base: "size-4",
+        container: "h-5",
+        wrapper: "text-sm"
+      },
+      lg: {
+        base: "size-4.5",
+        container: "h-5",
+        wrapper: "text-sm"
+      },
+      xl: {
+        base: "size-5",
+        container: "h-6",
+        wrapper: "text-base"
+      }
+    },
+    required: {
+      true: {
+        label: `after:content-['*'] after:ms-0.5 after:text-error`
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75",
+        description: "cursor-not-allowed opacity-75"
+      }
+    },
+    checked: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    { size: "xs", variant: "card", class: { root: "p-2.5" } },
+    { size: "sm", variant: "card", class: { root: "p-3" } },
+    { size: "md", variant: "card", class: { root: "p-3.5" } },
+    { size: "lg", variant: "card", class: { root: "p-4" } },
+    { size: "xl", variant: "card", class: { root: "p-4.5" } },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "card",
+      class: {
+        root: `has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "card",
+      class: {
+        root: "has-data-[state=checked]:border-inverted"
+      }
+    },
+    {
+      variant: "card",
+      disabled: true,
+      class: {
+        root: "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "list",
+    indicator: "start"
+  }
+});
+
+const chip = (options) => ct({
+  parts: {
+    root: "relative inline-flex items-center justify-center shrink-0",
+    base: "rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { base: `bg-${color}` }])),
+      neutral: { base: "bg-inverted" }
+    },
+    size: {
+      "3xs": { base: "h-[4px] min-w-[4px] text-[4px]" },
+      "2xs": { base: "h-[5px] min-w-[5px] text-[5px]" },
+      "xs": { base: "h-[6px] min-w-[6px] text-[6px]" },
+      "sm": { base: "h-[7px] min-w-[7px] text-[7px]" },
+      "md": { base: "h-[8px] min-w-[8px] text-[8px]" },
+      "lg": { base: "h-[9px] min-w-[9px] text-[9px]" },
+      "xl": { base: "h-[10px] min-w-[10px] text-[10px]" },
+      "2xl": { base: "h-[11px] min-w-[11px] text-[11px]" },
+      "3xl": { base: "h-[12px] min-w-[12px] text-[12px]" }
+    },
+    position: {
+      "top-right": { base: "top-0 right-0" },
+      "bottom-right": { base: "bottom-0 right-0" },
+      "top-left": { base: "top-0 left-0" },
+      "bottom-left": { base: "bottom-0 left-0" }
+    },
+    show: {
+      true: {
+        base: "animate-[scale-in_200ms_ease-out]"
+      }
+    },
+    inset: {
+      false: ""
+    },
+    standalone: {
+      false: { base: "absolute" }
+    }
+  },
+  compoundVariants: [
+    {
+      position: "top-right",
+      inset: false,
+      class: {
+        base: "-translate-y-1/2 translate-x-1/2 transform"
+      }
+    },
+    {
+      position: "bottom-right",
+      inset: false,
+      class: {
+        base: "translate-y-1/2 translate-x-1/2 transform"
+      }
+    },
+    {
+      position: "top-left",
+      inset: false,
+      class: {
+        base: "-translate-y-1/2 -translate-x-1/2 transform"
+      }
+    },
+    {
+      position: "bottom-left",
+      inset: false,
+      class: {
+        base: "translate-y-1/2 -translate-x-1/2 transform"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    position: "top-right"
+  }
+});
+
+const collapsible = ct({
+  parts: {
+    root: "",
+    content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+  }
+});
+
+const drawer = ct({
+  parts: {
+    overlay: "fixed inset-0 bg-elevated/75",
+    content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
+    header: "flex flex-wrap items-center gap-1 p-4 sm:px-6",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6",
+    footer: "flex items-center gap-1 p-4 sm:p-6",
+    title: "flex-grow text-xl text-highlighted font-semibold",
+    description: "w-full text-muted text-sm",
+    close: "ms-auto"
+  },
+  variants: {
+    direction: {
+      top: {
+        content: "inset-x-0 top-0 max-h-full"
+      },
+      right: {
+        content: "right-0 inset-y-0 w-full max-w-md"
+      },
+      bottom: {
+        content: "inset-x-0 bottom-0 max-h-full"
+      },
+      left: {
+        content: "left-0 inset-y-0 w-full max-w-md"
+      }
+    },
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
+      }
+    },
+    inset: {
+      true: {
+        content: "rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      direction: ["top", "bottom"],
+      class: {
+        content: "h-auto max-h-[96%]"
+      }
+    },
+    {
+      direction: ["left", "right"],
+      class: {
+        content: "w-auto max-w-[calc(100%-2rem)]"
+      }
+    },
+    {
+      direction: "top",
+      inset: true,
+      class: {
+        content: "inset-x-4 top-4"
+      }
+    },
+    {
+      direction: "top",
+      inset: false,
+      class: {
+        content: "inset-x-0 top-0 rounded-b-lg"
+      }
+    },
+    {
+      direction: ["top"],
+      transition: true,
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-top_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-top_500ms_cubic-bezier(0.32,0.72,0,1)]"
+      }
+    },
+    {
+      direction: "bottom",
+      inset: true,
+      class: {
+        content: "inset-x-4 bottom-4"
+      }
+    },
+    {
+      direction: "bottom",
+      inset: false,
+      class: {
+        content: "inset-x-0 bottom-0 rounded-t-lg"
+      }
+    },
+    {
+      direction: ["bottom"],
+      transition: true,
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-bottom_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-bottom_500ms_cubic-bezier(0.32,0.72,0,1)]"
+      }
+    },
+    {
+      direction: "left",
+      inset: true,
+      class: {
+        content: "inset-y-4 left-4"
+      }
+    },
+    {
+      direction: "left",
+      inset: false,
+      class: {
+        content: "inset-y-0 left-0 rounded-r-lg"
+      }
+    },
+    {
+      direction: ["left"],
+      transition: true,
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-left_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-left_500ms_cubic-bezier(0.32,0.72,0,1)]"
+      }
+    },
+    {
+      direction: "right",
+      inset: true,
+      class: {
+        content: "inset-y-4 right-4"
+      }
+    },
+    {
+      direction: "right",
+      inset: false,
+      class: {
+        content: "inset-y-0 right-0 rounded-l-lg"
+      }
+    },
+    {
+      direction: ["right"],
+      transition: true,
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-right_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-right_500ms_cubic-bezier(0.32,0.72,0,1)]"
+      }
+    }
+  ]
+});
+
+const dropdownMenu = (options) => ct({
+  parts: {
+    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-[--reka-dropdown-menu-content-transform-origin] flex flex-col",
+    viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
+    arrow: "fill-default",
+    group: "p-1 isolate",
+    label: "w-full flex items-center font-semibold text-highlighted",
+    separator: "-mx-1 my-1 h-px bg-border",
+    item: "group relative w-full flex items-start select-none outline-none before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-md data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75",
+    itemLeadingIcon: "shrink-0",
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    itemTrailingIcon: "shrink-0",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+    itemTrailingKbdsSize: "",
+    itemWrapper: "flex-1 flex flex-col items-start min-w-0",
+    itemLabel: "truncate",
+    itemDescription: "truncate text-muted",
+    itemLabelExternalIcon: "inline-block size-3 align-top text-dimmed"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    active: {
+      true: {
+        item: "text-highlighted before:bg-elevated",
+        itemLeadingIcon: "text-default"
+      },
+      false: {
+        item: [
+          "text-default data-[highlighted]:text-highlighted data-[state=open]:text-highlighted data-[highlighted]:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50",
+          options.theme.transitions && "transition-colors before:transition-colors"
+        ],
+        itemLeadingIcon: [
+          "text-dimmed group-data-[highlighted]:text-default group-data-[state=open]:text-default",
+          options.theme.transitions && "transition-colors"
+        ]
+      }
+    },
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
+      }
+    },
+    size: {
+      xs: {
+        label: "p-1 text-xs gap-1",
+        item: "p-1 text-xs gap-1",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      sm: {
+        label: "p-1.5 text-xs gap-1.5",
+        item: "p-1.5 text-xs gap-1.5",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      md: {
+        label: "p-1.5 text-sm gap-1.5",
+        item: "p-1.5 text-sm gap-1.5",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "md"
+      },
+      lg: {
+        label: "p-2 text-sm gap-2",
+        item: "p-2 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "md"
+      },
+      xl: {
+        label: "p-2 text-base gap-2",
+        item: "p-2 text-base gap-2",
+        itemLeadingIcon: "size-6",
+        itemLeadingAvatarSize: "xs",
+        itemTrailingIcon: "size-6",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "lg"
+      }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      active: false,
+      class: {
+        item: `text-${color} data-[highlighted]:text-${color} data-[highlighted]:before:bg-${color}/10 data-[state=open]:before:bg-${color}/10`,
+        itemLeadingIcon: `text-${color}/75 group-data-[highlighted]:text-${color} group-data-[state=open]:text-${color}`
+      }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      active: true,
+      class: {
+        item: `text-${color} before:bg-${color}/10`,
+        itemLeadingIcon: `text-${color}`
+      }
+    }))
+  ],
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+const form = ct({
+  base: ""
+});
+
+const formField = ct({
+  parts: {
+    root: "",
+    wrapper: "",
+    labelWrapper: "flex content-center items-center justify-between",
+    label: "block font-medium text-default",
+    container: "mt-1 relative",
+    description: "text-muted",
+    error: "mt-2 text-error",
+    hint: "text-muted",
+    help: "mt-2 text-muted"
+  },
+  variants: {
+    size: {
+      xs: { root: "text-xs" },
+      sm: { root: "text-xs" },
+      md: { root: "text-sm" },
+      lg: { root: "text-sm" },
+      xl: { root: "text-base" }
+    },
+    required: {
+      true: {
+        label: `after:content-['*'] after:ms-0.5 after:text-error`
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+const inputTheme = (options) => ct({
+  parts: {
+    root: "relative inline-flex items-center",
+    base: [
+      "w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      options.theme.transitions && "transition-colors"
+    ],
+    leading: "absolute inset-y-0 start-0 flex items-center",
+    leadingIcon: "shrink-0 text-dimmed",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailing: "absolute inset-y-0 end-0 flex items-center",
+    trailingIcon: "shrink-0 text-dimmed"
+  },
+  variants: {
+    ...fieldGroupVariantWithRoot,
+    size: {
+      xs: {
+        base: "px-2 py-1 text-xs gap-1",
+        leading: "ps-2",
+        trailing: "pe-2",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
+      },
+      sm: {
+        base: "px-2.5 py-1.5 text-xs gap-1.5",
+        leading: "ps-2.5",
+        trailing: "pe-2.5",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
+      },
+      md: {
+        base: "px-2.5 py-1.5 text-sm gap-1.5",
+        leading: "ps-2.5",
+        trailing: "pe-2.5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-5"
+      },
+      lg: {
+        base: "px-3 py-2 text-sm gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-5"
+      },
+      xl: {
+        base: "px-3 py-2 text-base gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-6"
+      }
+    },
+    variant: {
+      outline: { base: "text-highlighted bg-default ring ring-inset ring-accented" },
+      soft: { base: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" },
+      subtle: { base: "text-highlighted bg-elevated ring ring-inset ring-accented" },
+      ghost: { base: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" },
+      none: { base: "text-highlighted bg-transparent" }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    leading: {
+      true: ""
+    },
+    trailing: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    highlight: {
+      true: ""
+    },
+    type: {
+      file: { base: "file:me-1.5 file:font-medium file:text-muted file:outline-none" }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: ["outline", "subtle"],
+      class: { base: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}` }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      highlight: true,
+      class: { base: `ring ring-inset ring-${color}` }
+    })),
+    {
+      color: "neutral",
+      variant: ["outline", "subtle"],
+      class: { base: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" }
+    },
+    {
+      color: "neutral",
+      highlight: true,
+      class: { base: "ring ring-inset ring-inverted" }
+    },
+    {
+      leading: true,
+      size: "xs",
+      class: { base: "ps-7" }
+    },
+    {
+      leading: true,
+      size: "sm",
+      class: { base: "ps-8" }
+    },
+    {
+      leading: true,
+      size: "md",
+      class: { base: "ps-9" }
+    },
+    {
+      leading: true,
+      size: "lg",
+      class: { base: "ps-10" }
+    },
+    {
+      leading: true,
+      size: "xl",
+      class: { base: "ps-11" }
+    },
+    {
+      trailing: true,
+      size: "xs",
+      class: { base: "pe-7" }
+    },
+    {
+      trailing: true,
+      size: "sm",
+      class: { base: "pe-8" }
+    },
+    {
+      trailing: true,
+      size: "md",
+      class: { base: "pe-9" }
+    },
+    {
+      trailing: true,
+      size: "lg",
+      class: { base: "pe-10" }
+    },
+    {
+      trailing: true,
+      size: "xl",
+      class: { base: "pe-11" }
+    },
+    {
+      loading: true,
+      leading: true,
+      class: {
+        leadingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
+        trailingIcon: "animate-spin"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "outline"
+  }
+});
+
+const inputNumber = (options) => {
+  const input = inputTheme(options);
+  return ct({
+    parts: {
+      root: "relative inline-flex items-center",
+      base: [
+        "w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+        options.theme.transitions && "transition-colors"
+      ],
+      increment: "absolute flex items-center",
+      decrement: "absolute flex items-center"
+    },
+    variants: {
+      ...fieldGroupVariantWithRoot,
+      color: {
+        ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+        neutral: ""
+      },
+      size: {
+        xs: { base: "px-2 py-1 text-xs gap-1" },
+        sm: { base: "px-2.5 py-1.5 text-xs gap-1.5" },
+        md: { base: "px-2.5 py-1.5 text-sm gap-1.5" },
+        lg: { base: "px-3 py-2 text-sm gap-2" },
+        xl: { base: "px-3 py-2 text-base gap-2" }
+      },
+      variant: {
+        ...input.variants.variant
+      },
+      disabled: {
+        true: {
+          increment: "opacity-75 cursor-not-allowed",
+          decrement: "opacity-75 cursor-not-allowed"
+        }
+      },
+      orientation: {
+        horizontal: {
+          base: "text-center",
+          increment: "inset-y-0 end-0 pe-1",
+          decrement: "inset-y-0 start-0 ps-1"
+        },
+        vertical: {
+          increment: "top-0 end-0 pe-1 [&>button]:py-0 scale-80",
+          decrement: "bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"
+        }
+      },
+      highlight: {
+        true: ""
+      },
+      increment: {
+        false: ""
+      },
+      decrement: {
+        false: ""
+      }
+    },
+    compoundVariants: [
+      ...(options.theme.colors || []).map((color) => ({
+        color,
+        variant: ["outline", "subtle"],
+        class: { base: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}` }
+      })),
+      ...(options.theme.colors || []).map((color) => ({
+        color,
+        highlight: true,
+        class: { base: `ring ring-inset ring-${color}` }
+      })),
+      {
+        color: "neutral",
+        variant: ["outline", "subtle"],
+        class: { base: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" }
+      },
+      {
+        color: "neutral",
+        highlight: true,
+        class: { base: "ring ring-inset ring-inverted" }
+      },
+      {
+        orientation: "horizontal",
+        decrement: false,
+        class: { base: "text-start" }
+      },
+      {
+        decrement: true,
+        size: "xs",
+        class: { base: "ps-7" }
+      },
+      {
+        decrement: true,
+        size: "sm",
+        class: { base: "ps-8" }
+      },
+      {
+        decrement: true,
+        size: "md",
+        class: { base: "ps-9" }
+      },
+      {
+        decrement: true,
+        size: "lg",
+        class: { base: "ps-10" }
+      },
+      {
+        decrement: true,
+        size: "xl",
+        class: { base: "ps-11" }
+      },
+      {
+        increment: true,
+        size: "xs",
+        class: { base: "pe-7" }
+      },
+      {
+        increment: true,
+        size: "sm",
+        class: { base: "pe-8" }
+      },
+      {
+        increment: true,
+        size: "md",
+        class: { base: "pe-9" }
+      },
+      {
+        increment: true,
+        size: "lg",
+        class: { base: "pe-10" }
+      },
+      {
+        increment: true,
+        size: "xl",
+        class: { base: "pe-11" }
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      variant: "outline"
+    }
+  });
+};
+
+const kbd = (options) => ct({
+  base: "inline-flex items-center justify-center p-1 rounded-sm font-medium font-sans",
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    size: {
+      sm: "h-4 min-w-4 text-[0.5rem]",
+      md: "h-5 min-w-5 text-[0.75rem]",
+      lg: "h-6 min-w-6 text-[1rem]"
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: `text-inverted bg-${color}`
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: `ring ring-inset ring-${color}/50 text-${color}`
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: `text-${color} bg-${color}/10`
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: `text-${color} ring ring-inset ring-${color}/25 bg-${color}/10`
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: "text-inverted bg-inverted"
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      class: "ring ring-inset ring-accented text-default bg-default"
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      class: "text-default bg-elevated"
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: "ring ring-inset ring-accented text-default bg-elevated"
+    }
+  ],
+  defaultVariants: {
+    variant: "outline",
+    color: "neutral",
+    size: "md"
+  }
+});
+
+const link = (options) => ct({
+  base: "focus-visible:outline-primary",
+  variants: {
+    active: {
+      true: "text-primary",
+      false: "text-muted"
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-75"
+    }
+  },
+  compoundVariants: [
+    {
+      active: false,
+      disabled: false,
+      class: [
+        "hover:text-default",
+        options.theme.transitions && "transition-colors"
+      ]
+    }
+  ]
+});
+
+const modal = ct({
+  parts: {
+    overlay: "fixed inset-0 bg-elevated/75",
+    content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
+    header: "flex flex-wrap items-center gap-1 p-4 sm:px-6",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6",
+    footer: "flex items-center gap-1 p-4 sm:px-6",
+    title: "flex-grow text-xl text-highlighted font-semibold",
+    description: "w-full text-muted text-sm",
+    close: "ms-auto"
+  },
+  variants: {
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+      }
+    },
+    fullscreen: {
+      true: {
+        content: "inset-0"
+      },
+      false: {
+        content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden"
+      }
+    }
+  }
+});
+
+const navigationMenu = (options) => ct({
+  parts: {
+    root: "relative flex gap-1.5 [&>div]:min-w-0",
+    list: "isolate min-w-0",
+    label: "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5",
+    item: "min-w-0",
+    link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:content-empty before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    linkLeadingIcon: "shrink-0 size-5",
+    linkLeadingAvatar: "shrink-0",
+    linkLeadingAvatarSize: "2xs",
+    linkTrailing: "group ms-auto inline-flex gap-1.5 items-center",
+    linkTrailingBadge: "shrink-0",
+    linkTrailingBadgeSize: "sm",
+    linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
+    linkLabel: "truncate",
+    linkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
+    childList: "isolate",
+    childLabel: "text-xs text-highlighted",
+    childItem: "",
+    childLink: "group relative size-full flex items-start text-start text-sm before:content-empty before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    childLinkWrapper: "min-w-0",
+    childLinkIcon: "size-5 shrink-0",
+    childLinkLabel: "truncate",
+    childLinkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
+    childLinkDescription: "text-muted",
+    separator: "px-2 h-px bg-border",
+    viewportWrapper: "absolute top-full left-0 flex w-full",
+    viewport: "relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-[--reka-navigation-menu-viewport-height] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]",
+    content: "",
+    indicator: "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
+    arrow: "relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        link: `focus-visible:before:ring-${color}`,
+        childLink: `focus-visible:before:ring-${color}`
+      }])),
+      neutral: {
+        link: "focus-visible:before:ring-inverted",
+        childLink: "focus-visible:before:ring-inverted"
+      }
+    },
+    highlightColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      pill: "",
+      link: ""
+    },
+    orientation: {
+      horizontal: {
+        root: "items-center justify-between",
+        list: "flex items-center",
+        item: "py-2",
+        link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
+        childList: "grid p-2",
+        childLink: "px-3 py-2 gap-2 before:inset-x-px before:inset-y-0",
+        childLinkLabel: "font-medium",
+        content: "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto"
+      },
+      vertical: {
+        root: "flex-col",
+        link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0",
+        childLabel: "px-1.5 py-0.5",
+        childLink: "p-1.5 gap-1.5 before:inset-y-px before:inset-x-0"
+      }
+    },
+    contentOrientation: {
+      horizontal: {
+        viewportWrapper: "justify-center",
+        content: "data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
+      },
+      vertical: {
+        viewport: "sm:w-[--reka-navigation-menu-viewport-width] left-[--reka-navigation-menu-viewport-left]"
+      }
+    },
+    active: {
+      true: {
+        childLink: "before:bg-elevated text-highlighted",
+        childLinkIcon: "text-default"
+      },
+      false: {
+        link: "text-muted",
+        linkLeadingIcon: "text-dimmed",
+        childLink: [
+          "hover:before:bg-elevated/50 text-default hover:text-highlighted",
+          options.theme.transitions && "transition-colors before:transition-colors"
+        ],
+        childLinkIcon: [
+          "text-dimmed group-hover:text-default",
+          options.theme.transitions && "transition-colors"
+        ]
+      }
+    },
+    disabled: {
+      true: {
+        link: "cursor-not-allowed opacity-75"
+      }
+    },
+    highlight: {
+      true: ""
+    },
+    level: {
+      true: ""
+    },
+    collapsed: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      contentOrientation: "horizontal",
+      class: {
+        childList: "grid-cols-2 gap-2"
+      }
+    },
+    {
+      orientation: "horizontal",
+      contentOrientation: "vertical",
+      class: {
+        childList: "gap-1",
+        content: "w-60"
+      }
+    },
+    {
+      orientation: "vertical",
+      collapsed: false,
+      class: {
+        childList: "ms-5 border-s border-default",
+        childItem: "ps-1.5 -ms-px",
+        content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+      }
+    },
+    {
+      orientation: "vertical",
+      collapsed: true,
+      class: {
+        link: "px-1.5",
+        content: "shadow-sm rounded-sm min-h-6 p-1"
+      }
+    },
+    {
+      orientation: "horizontal",
+      highlight: true,
+      class: {
+        link: [
+          "after:content-empty after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full",
+          options.theme.transitions && "after:transition-colors"
+        ]
+      }
+    },
+    {
+      orientation: "vertical",
+      highlight: true,
+      level: true,
+      class: {
+        link: [
+          "after:content-empty after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full",
+          options.theme.transitions && "after:transition-colors"
+        ]
+      }
+    },
+    {
+      disabled: false,
+      active: false,
+      variant: "pill",
+      class: {
+        link: [
+          "hover:text-highlighted hover:before:bg-elevated/50",
+          options.theme.transitions && "transition-colors before:transition-colors"
+        ],
+        linkLeadingIcon: [
+          "group-hover:text-default",
+          options.theme.transitions && "transition-colors"
+        ]
+      }
+    },
+    {
+      disabled: false,
+      active: false,
+      variant: "pill",
+      orientation: "horizontal",
+      class: {
+        link: "data-[state=open]:text-highlighted",
+        linkLeadingIcon: "group-data-[state=open]:text-default"
+      }
+    },
+    {
+      disabled: false,
+      variant: "pill",
+      highlight: true,
+      orientation: "horizontal",
+      class: {
+        link: "data-[state=open]:before:bg-elevated/50"
+      }
+    },
+    {
+      disabled: false,
+      variant: "pill",
+      highlight: false,
+      active: false,
+      orientation: "horizontal",
+      class: {
+        link: "data-[state=open]:before:bg-elevated/50"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "pill",
+      active: true,
+      class: {
+        link: `text-${color}`,
+        linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "pill",
+      active: true,
+      class: {
+        link: "text-highlighted",
+        linkLeadingIcon: "text-highlighted group-data-[state=open]:text-highlighted"
+      }
+    },
+    {
+      variant: "pill",
+      active: true,
+      highlight: false,
+      class: {
+        link: "before:bg-elevated"
+      }
+    },
+    {
+      variant: "pill",
+      active: true,
+      highlight: true,
+      disabled: false,
+      class: {
+        link: ["hover:before:bg-elevated/50", options.theme.transitions && "before:transition-colors"]
+      }
+    },
+    {
+      disabled: false,
+      active: false,
+      variant: "link",
+      class: {
+        link: ["hover:text-highlighted", options.theme.transitions && "transition-colors"],
+        linkLeadingIcon: ["group-hover:text-default", options.theme.transitions && "transition-colors"]
+      }
+    },
+    {
+      disabled: false,
+      active: false,
+      variant: "link",
+      orientation: "horizontal",
+      class: {
+        link: "data-[state=open]:text-highlighted",
+        linkLeadingIcon: "group-data-[state=open]:text-default"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "link",
+      active: true,
+      class: {
+        link: `text-${color}`,
+        linkLeadingIcon: `text-${color} group-data-[state=open]:text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "link",
+      active: true,
+      class: {
+        link: "text-highlighted",
+        linkLeadingIcon: "text-highlighted group-data-[state=open]:text-highlighted"
+      }
+    },
+    ...(options.theme.colors || []).map((highlightColor) => ({
+      highlightColor,
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: `after:bg-${highlightColor}`
+      }
+    })),
+    {
+      highlightColor: "neutral",
+      highlight: true,
+      level: true,
+      active: true,
+      class: {
+        link: "after:bg-inverted"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    highlightColor: "primary",
+    variant: "pill"
+  }
+});
+
+const pagination = ct({
+  parts: {
+    root: "",
+    list: "flex items-center gap-1",
+    ellipsis: "pointer-events-none",
+    label: "min-w-5 text-center",
+    item: "",
+    first: "",
+    prev: "",
+    next: "",
+    last: ""
+  }
+});
+
+const pinInput = (options) => ct({
+  parts: {
+    root: "relative inline-flex items-center gap-1.5",
+    base: [
+      "rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      options.theme.transitions && "transition-colors"
+    ]
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "size-6 text-xs"
+      },
+      sm: {
+        base: "size-7 text-xs"
+      },
+      md: {
+        base: "size-8 text-sm"
+      },
+      lg: {
+        base: "size-9 text-sm"
+      },
+      xl: {
+        base: "size-10 text-base"
+      }
+    },
+    variant: {
+      outline: {
+        base: "text-highlighted bg-default ring ring-inset ring-accented"
+      },
+      soft: {
+        base: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50"
+      },
+      subtle: {
+        base: "text-highlighted bg-elevated ring ring-inset ring-accented"
+      },
+      ghost: {
+        base: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent"
+      },
+      none: {
+        base: "text-highlighted bg-transparent"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    highlight: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: ["outline", "subtle"],
+      class: { base: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}` }
+    })),
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      highlight: true,
+      class: { base: `ring ring-inset ring-${color}` }
+    })),
+    {
+      color: "neutral",
+      variant: ["outline", "subtle"],
+      class: { base: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" }
+    },
+    {
+      color: "neutral",
+      highlight: true,
+      class: { base: "ring ring-inset ring-inverted" }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "outline"
+  }
+});
+
+const popover = ct({
+  parts: {
+    content: [
+      "z-1 bg-default shadow-lg rounded-md ring ring-default focus:outline-none pointer-events-auto",
+      "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-[--reka-popover-content-transform-origin]"
+    ],
+    arrow: "fill-default"
+  }
+});
+
+const progress = (options) => ct({
+  parts: {
+    root: "gap-2",
+    base: "relative overflow-hidden rounded-full bg-accented",
+    indicator: "rounded-full size-full transition-transform duration-200 ease-out",
+    status: "flex text-dimmed transition-[width] duration-200",
+    steps: "grid items-end",
+    step: "truncate text-end row-start-1 col-start-1 transition-opacity"
+  },
+  variants: {
+    animation: {
+      "carousel": "",
+      "carousel-inverse": "",
+      "swing": "",
+      "elastic": ""
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        indicator: `bg-${color}`,
+        steps: `text-${color}`
+      }])),
+      neutral: {
+        indicator: "bg-inverted",
+        steps: "text-inverted"
+      }
+    },
+    size: {
+      "2xs": {
+        status: "text-xs",
+        steps: "text-xs"
+      },
+      "xs": {
+        status: "text-xs",
+        steps: "text-xs"
+      },
+      "sm": {
+        status: "text-sm",
+        steps: "text-sm"
+      },
+      "md": {
+        status: "text-sm",
+        steps: "text-sm"
+      },
+      "lg": {
+        status: "text-sm",
+        steps: "text-sm"
+      },
+      "xl": {
+        status: "text-base",
+        steps: "text-base"
+      },
+      "2xl": {
+        status: "text-base",
+        steps: "text-base"
+      }
+    },
+    step: {
+      active: {
+        step: "opacity-100"
+      },
+      first: {
+        step: "opacity-100 text-muted"
+      },
+      other: {
+        step: "opacity-0"
+      },
+      last: {
+        step: ""
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full flex flex-col",
+        base: "w-full",
+        status: "flex-row items-center justify-end min-w-fit"
+      },
+      vertical: {
+        root: "h-full flex flex-row-reverse",
+        base: "h-full",
+        status: "flex-col justify-end min-h-fit"
+      }
+    },
+    inverted: {
+      true: {
+        status: "self-end"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      inverted: true,
+      orientation: "horizontal",
+      class: {
+        step: "text-start",
+        status: "flex-row-reverse"
+      }
+    },
+    {
+      inverted: true,
+      orientation: "vertical",
+      class: {
+        steps: "items-start",
+        status: "flex-col-reverse"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "2xs",
+      class: { base: "h-px" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xs",
+      class: { base: "h-0.5" }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      class: { base: "h-1" }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      class: { base: "h-2" }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      class: { base: "h-3" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      class: { base: "h-4" }
+    },
+    {
+      orientation: "horizontal",
+      size: "2xl",
+      class: { base: "h-5" }
+    },
+    {
+      orientation: "vertical",
+      size: "2xs",
+      class: { base: "w-px" }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      class: { base: "w-0.5" }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      class: { base: "w-1" }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      class: { base: "w-2" }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      class: { base: "w-3" }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      class: { base: "w-4" }
+    },
+    {
+      orientation: "vertical",
+      size: "2xl",
+      class: { base: "w-5" }
+    },
+    {
+      orientation: "horizontal",
+      animation: "carousel",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      orientation: "vertical",
+      animation: "carousel",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      animation: "carousel-inverse",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      orientation: "vertical",
+      animation: "carousel-inverse",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      animation: "swing",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      orientation: "vertical",
+      animation: "swing",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      animation: "elastic",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      orientation: "vertical",
+      animation: "elastic",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
+      }
+    }
+  ],
+  defaultVariants: {
+    animation: "carousel",
+    color: "primary",
+    size: "md"
+  }
+});
+
+const radioGroup = (options) => ct({
+  parts: {
+    root: "relative",
+    fieldset: "flex gap-x-2",
+    legend: "mb-1 block font-medium text-default",
+    item: "flex items-start",
+    container: "flex items-center",
+    base: "rounded-full ring ring-inset ring-accented overflow-hidden cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: [
+      "flex items-center justify-center size-full rounded-full scale-0 data-[state=checked]:scale-65",
+      options.theme.transitions && "transition-transform"
+    ],
+    wrapper: "w-full",
+    label: "block font-medium text-default cursor-pointer",
+    description: "text-muted"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        base: `focus-visible:outline-${color} data-[state=checked]:ring-${color}/50`,
+        indicator: `bg-${color}`
+      }])),
+      neutral: {
+        base: "focus-visible:outline-inverted data-[state=checked]:ring-[--ui-text]/50",
+        indicator: "bg-inverted"
+      }
+    },
+    variant: {
+      list: {
+        item: ""
+      },
+      card: {
+        item: "border border-muted rounded-lg"
+      },
+      table: {
+        item: "border border-muted"
+      }
+    },
+    orientation: {
+      horizontal: {
+        fieldset: "flex-row"
+      },
+      vertical: {
+        fieldset: "flex-col"
+      }
+    },
+    indicator: {
+      start: {
+        item: "flex-row",
+        wrapper: "ms-2"
+      },
+      end: {
+        item: "flex-row-reverse",
+        wrapper: "me-2"
+      },
+      hidden: {
+        base: "sr-only",
+        wrapper: "text-center"
+      }
+    },
+    size: {
+      xs: {
+        fieldset: "gap-y-0.5",
+        legend: "text-xs",
+        base: "size-3",
+        item: "text-xs",
+        container: "h-4",
+        indicator: ""
+      },
+      sm: {
+        fieldset: "gap-y-0.5",
+        legend: "text-xs",
+        base: "size-3.5",
+        item: "text-xs",
+        container: "h-4",
+        indicator: ""
+      },
+      md: {
+        fieldset: "gap-y-1",
+        legend: "text-sm",
+        base: "size-4",
+        item: "text-sm",
+        container: "h-5",
+        indicator: ""
+      },
+      lg: {
+        fieldset: "gap-y-1",
+        legend: "text-sm",
+        base: "size-4.5",
+        item: "text-sm",
+        container: "h-5",
+        indicator: ""
+      },
+      xl: {
+        fieldset: "gap-y-1.5",
+        legend: "text-base",
+        base: "size-5",
+        item: "text-base",
+        container: "h-6",
+        indicator: ""
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75",
+        description: "opacity-75"
+      }
+    },
+    required: {
+      true: {
+        legend: `after:content-['*'] after:ms-0.5 after:text-error`
+      }
+    }
+  },
+  compoundVariants: [
+    { variant: ["card", "table"], disabled: true, class: { item: "cursor-not-allowed" } },
+    { variant: ["card", "table"], disabled: false, class: { item: "cursor-pointer" } },
+    { size: "xs", variant: ["card", "table"], class: { item: "p-2.5" } },
+    { size: "sm", variant: ["card", "table"], class: { item: "p-3" } },
+    { size: "md", variant: ["card", "table"], class: { item: "p-3.5" } },
+    { size: "lg", variant: ["card", "table"], class: { item: "p-4" } },
+    { size: "xl", variant: ["card", "table"], class: { item: "p-4.5" } },
+    {
+      orientation: "horizontal",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
+        fieldset: "gap-0 -space-x-px"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
+        fieldset: "gap-0 -space-y-px"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "card",
+      class: {
+        item: `has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "card",
+      class: {
+        item: "has-data-[state=checked]:border-inverted"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "table",
+      class: {
+        item: `has-data-[state=checked]:bg-${color}/10 has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:z-[1]`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "table",
+      class: {
+        item: "has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "list",
+    orientation: "vertical",
+    indicator: "start"
+  }
+});
+
+const scrollArea = ct({
+  parts: {
+    root: "relative overflow-hidden",
+    viewport: "size-full rounded outline-none",
+    scrollbar: [
+      "flex select-none touch-none p-0.5 duration-160 ease-out",
+      "data-[orientation=vertical]:w-3 data-[orientation=vertical]:my-2",
+      "data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:mx-2"
+    ],
+    thumb: [
+      "relative flex-1 bg-[--ui-border-accented] opacity-80 rounded cursor-pointer transition-colors",
+      "hover:bg-[--ui-text-dimmed]",
+      "before:content-empty before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-10 before:min-h-10 "
+    ],
+    corner: ""
+  }
+});
+
+const select = (options) => {
+  const input = inputTheme(options);
+  return ct({
+    parts: {
+      ...input.parts,
+      root: void 0,
+      base: [
+        "relative group rounded-md inline-flex items-center focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-75",
+        options.theme.transitions && "transition-colors"
+      ],
+      value: "truncate pointer-events-none",
+      placeholder: "truncate text-dimmed",
+      arrow: "fill-default",
+      content: [
+        "z-1 max-h-60 w-[--reka-select-trigger-width] bg-default shadow-lg rounded-md ring ring-default overflow-hidden origin-[--reka-select-content-transform-origin] pointer-events-auto flex flex-col",
+        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
+      ],
+      viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
+      group: "p-1 isolate",
+      empty: "text-center text-muted",
+      label: "font-semibold text-highlighted",
+      separator: "-mx-1 my-1 h-px bg-border",
+      item: [
+        "group relative w-full flex items-start select-none outline-none before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-md cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75 text-default data-[highlighted]:not-[[data-disabled]]:text-highlighted data-[highlighted]:not-[[data-disabled]]:before:bg-elevated/50",
+        options.theme.transitions && "transition-colors before:transition-colors"
+      ],
+      itemLeadingIcon: [
+        "shrink-0 text-dimmed group-data-[highlighted]:group-not-[[data-disabled]]:text-default group-not-[[data-disabled]]:text-default",
+        options.theme.transitions && "transition-colors"
+      ],
+      itemLeadingAvatar: "shrink-0",
+      itemLeadingAvatarSize: "",
+      itemLeadingChip: "shrink-0",
+      itemLeadingChipSize: "",
+      itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+      itemTrailingIcon: "shrink-0",
+      itemWrapper: "flex-1 flex flex-col min-w-0",
+      itemLabel: "truncate",
+      itemDescription: "truncate text-muted"
+    },
+    variants: {
+      ...input.variants,
+      ...fieldGroupVariant,
+      size: {
+        xs: {
+          ...input.variants.size.xs,
+          label: "p-1 text-[0.625rem]/3 gap-1",
+          item: "p-1 text-xs gap-1",
+          itemLeadingIcon: "size-4",
+          itemLeadingAvatarSize: "3xs",
+          itemLeadingChip: "size-4",
+          itemLeadingChipSize: "sm",
+          itemTrailingIcon: "size-4",
+          empty: "p-1 text-xs"
+        },
+        sm: {
+          ...input.variants.size.sm,
+          label: "p-1.5 text-[0.625rem]/3 gap-1.5",
+          item: "p-1.5 text-xs gap-1.5",
+          itemLeadingIcon: "size-4",
+          itemLeadingAvatarSize: "3xs",
+          itemLeadingChip: "size-4",
+          itemLeadingChipSize: "sm",
+          itemTrailingIcon: "size-4",
+          empty: "p-1.5 text-xs"
+        },
+        md: {
+          ...input.variants.size.md,
+          label: "p-1.5 text-xs gap-1.5",
+          item: "p-1.5 text-sm gap-1.5",
+          itemLeadingIcon: "size-5",
+          itemLeadingAvatarSize: "2xs",
+          itemLeadingChip: "size-5",
+          itemLeadingChipSize: "md",
+          itemTrailingIcon: "size-5",
+          empty: "p-1.5 text-sm"
+        },
+        lg: {
+          ...input.variants.size.lg,
+          label: "p-2 text-xs gap-2",
+          item: "p-2 text-sm gap-2",
+          itemLeadingIcon: "size-5",
+          itemLeadingAvatarSize: "2xs",
+          itemLeadingChip: "size-5",
+          itemLeadingChipSize: "md",
+          itemTrailingIcon: "size-5",
+          empty: "p-2 text-sm"
+        },
+        xl: {
+          ...input.variants.size.xl,
+          label: "p-2 text-sm gap-2",
+          item: "p-2 text-base gap-2",
+          itemLeadingIcon: "size-6",
+          itemLeadingAvatarSize: "xs",
+          itemLeadingChip: "size-6",
+          itemLeadingChipSize: "lg",
+          itemTrailingIcon: "size-6",
+          empty: "p-2 text-base"
+        }
+      }
+    },
+    compoundVariants: [
+      ...input.compoundVariants.map((item) => {
+        return {
+          ...item,
+          class: {
+            ...item.class,
+            base: typeof item.class.base === "string" ? item.class.base.replace(/focus-visible:/g, "focus:") : item.class.base
+          }
+        };
+      })
+    ],
+    defaultVariants: {
+      ...input.defaultVariants
+    }
+  });
+};
+
+const separator = (options) => ct({
+  parts: {
+    root: "flex items-center align-middle text-center",
+    border: "",
+    container: "font-medium text-default flex",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xs",
+    label: "text-sm"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-${color}` }])),
+      neutral: { border: "border-default" }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full flex-row",
+        border: "",
+        container: "mx-3 whitespace-nowrap"
+      },
+      vertical: {
+        root: "h-full flex-col",
+        border: "",
+        container: "my-2"
+      }
+    },
+    start: {
+      true: {
+        border: "flex-grow data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto"
+      }
+    },
+    end: {
+      true: {
+        border: "flex-grow data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto"
+      }
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    },
+    type: {
+      solid: {
+        border: "border-solid"
+      },
+      dashed: {
+        border: "border-dashed"
+      },
+      dotted: {
+        border: "border-dotted"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      start: false,
+      end: false,
+      class: { border: "w-full" }
+    },
+    {
+      orientation: "vertical",
+      start: false,
+      end: false,
+      class: { border: "h-full" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xs",
+      class: { border: "border-t" }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      class: { border: "border-t-[2px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      class: { border: "border-t-[3px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      class: { border: "border-t-[4px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      class: { border: "border-t-[5px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      class: { border: "border-s" }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      class: { border: "border-s-[2px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      class: { border: "border-s-[3px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      class: { border: "border-s-[4px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      class: { border: "border-s-[5px]" }
+    }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    size: "xs",
+    type: "solid"
+  }
+});
+
+const skeleton = ct({
+  base: "animate-pulse rounded-md bg-elevated"
+});
+
+const slider = (options) => ct({
+  parts: {
+    root: "relative flex items-center select-none touch-none",
+    track: "relative bg-accented overflow-hidden rounded-full grow",
+    range: "absolute rounded-full",
+    thumb: "rounded-full ring-2 ring-bg/10 focus-visible:ring-bg focus-visible:outline-2 focus-visible:outline-offset-2"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        range: `bg-${color}`,
+        thumb: `bg-${color} focus-visible:outline-${color}`
+      }])),
+      neutral: {
+        range: "bg-inverted",
+        thumb: "bg-inverted focus-visible:outline-inverted"
+      }
+    },
+    size: {
+      xs: {
+        thumb: "size-3"
+      },
+      sm: {
+        thumb: "size-3.5"
+      },
+      md: {
+        thumb: "size-4"
+      },
+      lg: {
+        thumb: "size-4.5"
+      },
+      xl: {
+        thumb: "size-5"
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full",
+        range: "h-full"
+      },
+      vertical: {
+        root: "flex-col h-full",
+        range: "w-full"
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-75 cursor-not-allowed"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      size: "xs",
+      class: {
+        track: "h-[6px]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      class: {
+        track: "h-[7px]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      class: {
+        track: "h-[8px]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      class: {
+        track: "h-[9px]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      class: {
+        track: "h-[10px]"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      class: {
+        track: "w-[6px]"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      class: {
+        track: "w-[7px]"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      class: {
+        track: "w-[8px]"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      class: {
+        track: "w-[9px]"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      class: {
+        track: "w-[10px]"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
+const _switch = (options) => ct({
+  parts: {
+    root: "relative flex items-start",
+    base: [
+      "inline-flex items-center shrink-0 rounded-full border-2 border-transparent cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented",
+      options.theme.transitions && "transition-colors duration-200"
+    ],
+    container: "flex items-center",
+    thumb: "group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
+    icon: [
+      "absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12",
+      options.theme.transitions && "transition-[color,opacity] duration-200"
+    ],
+    wrapper: "ms-2",
+    label: "block font-medium text-default cursor-pointer",
+    description: "text-muted"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        base: `data-[state=checked]:bg-${color} focus-visible:outline-${color}`,
+        icon: `group-data-[state=checked]:text-${color}`
+      }])),
+      neutral: {
+        base: "data-[state=checked]:bg-inverted focus-visible:outline-inverted",
+        icon: "group-data-[state=checked]:text-highlighted"
+      }
+    },
+    size: {
+      xs: {
+        base: "w-7",
+        container: "h-4",
+        thumb: "size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3",
+        wrapper: "text-xs"
+      },
+      sm: {
+        base: "w-8",
+        container: "h-4",
+        thumb: "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5",
+        wrapper: "text-xs"
+      },
+      md: {
+        base: "w-9",
+        container: "h-5",
+        thumb: "size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
+        wrapper: "text-sm"
+      },
+      lg: {
+        base: "w-10",
+        container: "h-5",
+        thumb: "size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5",
+        wrapper: "text-sm"
+      },
+      xl: {
+        base: "w-11",
+        container: "h-6",
+        thumb: "size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5",
+        wrapper: "text-base"
+      }
+    },
+    checked: {
+      true: {
+        icon: "group-data-[state=checked]:opacity-100"
+      }
+    },
+    unchecked: {
+      true: {
+        icon: "group-data-[state=unchecked]:opacity-100"
+      }
+    },
+    loading: {
+      true: {
+        icon: "animate-spin"
+      }
+    },
+    required: {
+      true: {
+        label: `after:content-['*'] after:ms-0.5 after:text-error`
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75",
+        description: "cursor-not-allowed opacity-75"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});
+
+const table = (options) => ct({
+  parts: {
+    root: "relative overflow-auto",
+    base: "min-w-full",
+    caption: "sr-only",
+    thead: "relative",
+    tbody: "[&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
+    tfoot: "relative",
+    tr: "data-[selected=true]:bg-elevated/50",
+    th: "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
+    td: "p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+    separator: "absolute z-[1] left-0 w-full h-px bg-[--ui-border-accented]",
+    empty: "py-6 text-center text-sm text-muted",
+    loading: "py-6 text-center"
+  },
+  variants: {
+    virtualize: {
+      false: {
+        base: "overflow-clip",
+        tbody: "divide-y divide-default"
+      }
+    },
+    pinned: {
+      true: {
+        th: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
+        td: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+      }
+    },
+    sticky: {
+      true: {
+        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur",
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+      },
+      header: {
+        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+      },
+      footer: {
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+      }
+    },
+    loading: {
+      true: {
+        thead: "after:content-empty after:absolute after:z-[1] after:h-px"
+      }
+    },
+    loadingAnimation: {
+      "carousel": "",
+      "carousel-inverse": "",
+      "swing": "",
+      "elastic": ""
+    },
+    loadingColor: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((loadingColor) => ({
+      loading: true,
+      loadingColor,
+      class: {
+        thead: `after:bg-${loadingColor}`
+      }
+    })),
+    {
+      loading: true,
+      loadingColor: "neutral",
+      class: {
+        thead: "after:bg-inverted"
+      }
+    },
+    {
+      loading: true,
+      loadingAnimation: "carousel",
+      class: {
+        thead: "after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      loading: true,
+      loadingAnimation: "carousel-inverse",
+      class: {
+        thead: "after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      loading: true,
+      loadingAnimation: "swing",
+      class: {
+        thead: "after:animate-[swing_2s_ease-in-out_infinite]"
+      }
+    },
+    {
+      loading: true,
+      loadingAnimation: "elastic",
+      class: {
+        thead: "after:animate-[elastic_2s_ease-in-out_infinite]"
+      }
+    }
+  ],
+  defaultVariants: {
+    loadingColor: "primary",
+    loadingAnimation: "carousel"
+  }
+});
+
+const tabs = (options) => ct({
+  parts: {
+    root: "flex items-center gap-2",
+    list: "relative flex p-1",
+    indicator: "absolute transition duration-200",
+    trigger: [
+      "relative inline-flex items-center min-w-0 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75",
+      "data-[state=inactive]:text-muted data-[state=inactive]:not-disabled:cursor-pointer hover:data-[state=inactive]:not-disabled:text-default",
+      options.theme.transitions && "transition-colors"
+    ],
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    label: "truncate",
+    trailingBadge: "shrink-0",
+    trailingBadgeSize: "sm",
+    content: "focus:outline-none w-full"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      pill: {
+        list: "bg-elevated rounded-lg",
+        trigger: "grow",
+        indicator: "rounded-md shadow-xs"
+      },
+      link: {
+        list: "border-default",
+        indicator: "rounded-full",
+        trigger: "focus:outline-none"
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        list: "w-full",
+        indicator: "left-0 w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position]",
+        trigger: "justify-center"
+      },
+      vertical: {
+        list: "flex-col",
+        indicator: "top-0 h-[--reka-tabs-indicator-size] translate-y-[--reka-tabs-indicator-position]"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "px-2 py-1 text-xs gap-1",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs"
+      },
+      sm: {
+        trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs"
+      },
+      md: {
+        trigger: "px-3 py-1.5 text-sm gap-1.5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs"
+      },
+      lg: {
+        trigger: "px-3 py-2 text-sm gap-2",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs"
+      },
+      xl: {
+        trigger: "px-3 py-2 text-base gap-2",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "xs"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      variant: "pill",
+      class: {
+        indicator: "inset-y-1"
+      }
+    },
+    {
+      orientation: "horizontal",
+      variant: "link",
+      class: {
+        list: "border-b -mb-px",
+        indicator: "-bottom-px h-px"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: "pill",
+      class: {
+        indicator: "inset-x-1",
+        list: "items-center"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: "link",
+      class: {
+        list: "border-s -ms-px",
+        indicator: "-start-px w-px"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "pill",
+      class: {
+        indicator: `bg-${color}`,
+        trigger: `data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "pill",
+      class: {
+        indicator: "bg-inverted",
+        trigger: "data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "link",
+      class: {
+        indicator: `bg-${color}`,
+        trigger: `data-[state=active]:text-${color} focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "link",
+      class: {
+        indicator: "bg-inverted",
+        trigger: "data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "pill",
+    size: "md"
+  }
+});
+
+const textarea = (options) => {
+  const input = inputTheme(options);
+  return ct(defu({
+    parts: {
+      leading: "absolute start-0 flex items-start",
+      trailing: "absolute end-0 flex items-start"
+    },
+    variants: {
+      autoresize: {
+        true: {
+          base: "resize-none"
+        }
+      },
+      size: {
+        xs: {
+          leading: "ps-2 inset-y-1",
+          trailing: "pe-2 inset-y-1"
+        },
+        sm: {
+          leading: "ps-2.5 inset-y-1.5",
+          trailing: "pe-2.5 inset-y-1.5"
+        },
+        md: {
+          leading: "ps-2.5 inset-y-1.5",
+          trailing: "pe-2.5 inset-y-1.5"
+        },
+        lg: {
+          leading: "ps-3 inset-y-2",
+          trailing: "pe-3 inset-y-2"
+        },
+        xl: {
+          leading: "ps-3 inset-y-2",
+          trailing: "pe-3 inset-y-2"
+        }
+      }
+    }
+  }, input));
+};
+
+const toast = (options) => ct({
+  parts: {
+    root: "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",
+    wrapper: "w-0 flex-1 flex flex-col",
+    title: "text-sm font-medium text-highlighted",
+    description: "text-sm text-muted",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xl",
+    actions: "flex gap-1.5 shrink-0",
+    progress: "absolute inset-x-0 bottom-0",
+    close: "p-0"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`,
+        icon: `text-${color}`
+      }])),
+      neutral: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted",
+        icon: "text-highlighted"
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "items-center",
+        actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+
+const toastProvider = ct({
+  parts: {
+    viewport: [
+      "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] focus:outline-none",
+      "data-[expanded=true]:h-[--height]"
+    ],
+    base: [
+      "pointer-events-auto absolute inset-x-0 z-[--index] [transform:var(--transform)] transition-all duration-200 ease-out",
+      "data-[expanded=false]:data-[front=false]:h-[--front-height]",
+      "data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out]",
+      "data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out]",
+      "data-[swipe=move]:transition-none"
+    ]
+  },
+  variants: {
+    position: {
+      "top-left": {
+        viewport: "left-4"
+      },
+      "top-center": {
+        viewport: "left-1/2 transform -translate-x-1/2"
+      },
+      "top-right": {
+        viewport: "right-4"
+      },
+      "bottom-left": {
+        viewport: "left-4"
+      },
+      "bottom-center": {
+        viewport: "left-1/2 transform -translate-x-1/2"
+      },
+      "bottom-right": {
+        viewport: "right-4"
+      }
+    },
+    swipeDirection: {
+      up: {
+        base: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]"
+      },
+      right: {
+        base: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]"
+      },
+      down: {
+        base: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]"
+      },
+      left: {
+        base: "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: ["top-left", "top-center", "top-right"],
+      class: {
+        viewport: "top-4",
+        base: "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
+      }
+    },
+    {
+      position: ["bottom-left", "bottom-center", "bottom-right"],
+      class: {
+        viewport: "bottom-4",
+        base: "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
+      }
+    },
+    {
+      swipeDirection: ["left", "right"],
+      class: {
+        base: [
+          "data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x]",
+          "data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x]",
+          "data-[swipe=cancel]:translate-x-0"
+        ]
+      }
+    },
+    {
+      swipeDirection: ["up", "down"],
+      class: {
+        base: [
+          "data-[swipe=move]:translate-y-[--reka-toast-swipe-move-y]",
+          "data-[swipe=end]:translate-y-[--reka-toast-swipe-end-y]",
+          "data-[swipe=cancel]:translate-y-0"
+        ]
+      }
+    }
+  ],
+  defaultVariants: {
+    position: "bottom-right"
+  }
+});
+
+const tooltip = ct({
+  parts: {
+    content: "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-[--reka-tooltip-content-transform-origin] pointer-events-auto",
+    arrow: "fill-default",
+    text: "truncate",
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['\xB7'] not-first-of-type:before:me-0.5`,
+    kbdsSize: "sm"
+  }
+});
+
+const theme = {
+  __proto__: null,
+  accordion: accordion,
+  alert: alert,
+  avatar: avatar,
+  avatarGroup: avatarGroup,
+  badge: badge,
+  breadcrumb: breadcrumb,
+  button: button,
+  calendar: calendar,
+  card: card,
+  carousel: carousel,
+  checkbox: checkbox,
+  chip: chip,
+  collapsible: collapsible,
+  drawer: drawer,
+  dropdownMenu: dropdownMenu,
+  fieldGroup: fieldGroup,
+  form: form,
+  formField: formField,
+  input: inputTheme,
+  inputNumber: inputNumber,
+  kbd: kbd,
+  link: link,
+  modal: modal,
+  navigationMenu: navigationMenu,
+  pagination: pagination,
+  pinInput: pinInput,
+  popover: popover,
+  progress: progress,
+  radioGroup: radioGroup,
+  scrollArea: scrollArea,
+  select: select,
+  separator: separator,
+  skeleton: skeleton,
+  slider: slider,
+  switch: _switch,
+  table: table,
+  tabs: tabs,
+  textarea: textarea,
+  toast: toast,
+  toastProvider: toastProvider,
+  tooltip: tooltip
+};
+
+function getTemplates(options, uiConfig, nuxt) {
+  const templates = [];
+  const isDev = process.argv.includes("--uiDev");
+  function writeThemeTemplate(theme2, path) {
+    for (const component in theme2) {
+      templates.push({
+        filename: `ui/${""}${kebabCase(component)}.ts`,
+        write: true,
+        getContents: () => {
+          const template = theme2[component];
+          const result = typeof template === "function" ? template(options) : template;
+          const json = JSON.stringify(result, null, 2);
+          if (isDev) {
+            const templatePath = fileURLToPath(new URL(`theme/${""}${kebabCase(component)}`, import.meta.url));
+            return [
+              [
+                `// @unocss-include`,
+                `import type { ModuleOptions } from '@byyuurin/ui'`,
+                `import { ct } from '@byyuurin/ui-kit'`,
+                `import template from ${JSON.stringify(templatePath)}`
+              ].join("\n"),
+              `const options: ModuleOptions = ${JSON.stringify(options, null, 2)}`,
+              `const result = typeof template === 'function' ? (template as Function)(options) : template`,
+              `if (result?.defaultVariants?.color && options.theme?.defaultVariants?.color)
+  result.defaultVariants.color = options.theme.defaultVariants.color`,
+              `if (result?.defaultVariants?.size && options.theme?.defaultVariants?.size)
+  result.defaultVariants.size = options.theme.defaultVariants.size`,
+              `const theme = ct(${json})`,
+              `export default result as typeof theme`
+            ].join("\n\n");
+          }
+          return [
+            `// @unocss-include
+import { ct } from '@byyuurin/ui-kit'`,
+            `export default ct(${json})`
+          ].join("\n\n");
+        }
+      });
+    }
+  }
+  function writeUnoTemplate() {
+    templates.push({
+      filename: "uno-merge.ts",
+      write: true,
+      async getContents() {
+        const { config } = await loadConfig();
+        const configPath = await findPath(["uno.config", "unocss.config"], { extensions: [".ts", ".mjs"] });
+        const userConfigSource = [];
+        if (configPath) {
+          if (nuxt && isDev) {
+            userConfigSource.push(
+              `import config from ${JSON.stringify(configPath.replace(/\.ts$/, ""))}`,
+              ``,
+              `const userConfig: UserConfig = { theme: config.theme, shortcuts: config.shortcuts }`
+            );
+          } else {
+            let shortcuts;
+            if (config.shortcuts) {
+              shortcuts = Array.isArray(config.shortcuts) ? config.shortcuts : [config.shortcuts];
+              shortcuts = shortcuts.filter((s) => {
+                if (Array.isArray(s))
+                  return !(s[0] instanceof RegExp);
+                return true;
+              });
+            }
+            userConfigSource.push(
+              ``,
+              `const userConfig: UserConfig = ${JSON.stringify({ theme: config.theme, shortcuts }, null, 2)}`
+            );
+          }
+        } else {
+          userConfigSource.push(
+            ``,
+            `const userConfig: UserConfig = {}`
+          );
+        }
+        return `import { createUnoMerge } from '@byyuurin/uno-merge'
+import { createUnoPreset } from '@byyuurin/ui/unocss'
+import type { UserConfig } from '@unocss/core'
+import { mergeConfigs } from '@unocss/core'
+import { presetWind4 } from '@unocss/preset-wind4'
+${userConfigSource.join("\n")}
+
+export const { merge: unoMerge } = await createUnoMerge(mergeConfigs([
+  {
+    presets: [
+      presetWind4(),
+      createUnoPreset(${JSON.stringify({ colors: options.theme?.colors })})
+    ]
+  },
+  userConfig,
+]))`;
+      }
+    });
+  }
+  writeThemeTemplate(theme);
+  writeUnoTemplate();
+  templates.push({
+    filename: "ui/index.ts",
+    write: true,
+    getContents() {
+      const contents = Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n");
+      return contents;
+    }
+  });
+  templates.push({
+    filename: "types/ui.d.ts",
+    getContents() {
+      const appIcon = Object.keys(uiConfig.icons ?? {}).map((s) => `'${s}'`).join(" | ");
+      const appNeutralColor = neutralColors.map((s) => `'${s}'`).join(" | ");
+      return `import * as ui from '#build/ui'
+import type { UIConfig } from '@byyuurin/ui'
+import type { colors } from '@unocss/preset-wind4/colors'
+
+type NeutralColor = ${appNeutralColor}
+type Color = keyof Omit<typeof colors, NeutralColor | 'black' | 'white'> | (string & {})
+
+type AppConfigIcons = Record<${appIcon} | (string & {}), string>
+
+export type AppConfigUI = {
+  colors?: {
+    ${options.theme?.colors?.map((color) => `'${color}'?: Color`).join("\n    ")}
+    neutral?: NeutralColor | (string & {})
+  }
+  icons?: Partial<AppConfigIcons>
+} & UIConfig<typeof ui>
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    /** UI theme configuration */
+    ui?: AppConfigUI
+  }
+}
+
+export {}
+`;
+    }
+  });
+  templates.push({
+    filename: "ui-image-component.ts",
+    write: true,
+    getContents: ({ app }) => {
+      const image = app?.components?.find((c) => c.pascalName === "NuxtImg" && !/nuxt(?:-nightly)?\/dist\/app/.test(c.filePath));
+      return image ? genExport(image.filePath, [{ name: image.export, as: "default" }]) : 'export default "img"';
+    }
+  });
+  return templates;
+}
+function addTemplates(options, nuxt, resolve) {
+  const templates = getTemplates(options, nuxt.options.appConfig.ui, nuxt);
+  for (const template of templates) {
+    if (template.filename.endsWith(".d.ts"))
+      addTypeTemplate(template);
+    else
+      addTemplate(template);
+  }
+  nuxt.hook("prepare:types", ({ references }) => {
+    references.push({ path: resolve("./runtime/types/app.config.d.ts") });
+    references.push({ path: resolve("./runtime/types/unocss.d.ts") });
+  });
+}
+
+export { addTemplates as a, getTemplates as g, name as n, version as v };