@bitrix24/b24ui-nuxt 0.1.1

package/dist/shared/b24ui-nuxt.CNGvMe2S.mjs

@@ -0,0 +1,4074 @@
+import 'node:url';
+import { kebabCase } from 'scule';
+import { addTypeTemplate, addTemplate } from '@nuxt/kit';
+import { defuFn } from 'defu';
+
+const getDefaultUiConfig = () => ({});
+const defaultOptions = {
+  colorMode: true
+};
+
+const advice = {
+  slots: {
+    root: "flex items-end",
+    descriptionWrapper: [
+      "relative"
+    ],
+    descriptionBorder: [
+      "fill-blue-500 dark:fill-blue-300"
+    ],
+    descriptionBg: [
+      "fill-white dark:fill-base-900"
+    ],
+    descriptionAngle: [
+      "absolute",
+      "w-[14px] h-[12px]"
+    ],
+    description: [
+      "grow",
+      "w-11/12 py-3 px-md2 ms-2",
+      // -9/12
+      "rounded-[23px]",
+      "font-b24-secondary text-md leading-md font-normal",
+      "border-1",
+      "border-blue-500 bg-white text-base-950",
+      "dark:border-blue-300 dark:bg-base-900 dark:text-base-200"
+    ],
+    leading: "me-1.5 ms-2",
+    leadingIcon: "shrink-0 size-[42px]",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "lg"
+  },
+  variants: {
+    angle: {
+      top: {
+        root: "items-start",
+        leading: "mt-0.5",
+        descriptionAngle: [
+          "start-[0.8px] top-[9px]",
+          "scale-x-100 -scale-y-100",
+          "rtl:-scale-x-100"
+        ].join(" ")
+      },
+      bottom: {
+        root: "items-end",
+        descriptionAngle: [
+          "start-[0.8px] bottom-[9px]",
+          "rtl:-scale-x-100"
+        ].join(" ")
+      }
+    }
+  },
+  defaultVariants: {
+    angle: "bottom"
+  }
+};
+
+const alert = {
+  slots: {
+    root: "relative overflow-hidden w-full rounded-3xs flex",
+    wrapper: "min-w-0 flex-1 flex flex-col gap-1 font-b24-primary font-normal",
+    title: "font-bold",
+    description: "",
+    icon: "shrink-0 size-6",
+    avatar: "shrink-0",
+    avatarSize: "",
+    actions: "flex flex-wrap gap-1.5 shrink-0",
+    close: "p-0.5"
+  },
+  variants: {
+    color: {
+      default: {
+        root: [
+          "text-base-950 bg-base-200",
+          "dark:text-base-950 dark:bg-base-200"
+        ],
+        close: "text-base-800 dark:text-base-800 hover:text-base-950 dark:hover:text-base-950"
+      },
+      danger: {
+        root: [
+          "text-red-700 bg-red-200",
+          "dark:text-red-700 dark:bg-red-300"
+        ],
+        close: "text-red-700 dark:text-red-700 hover:text-red-800 dark:hover:text-red-800"
+      },
+      success: {
+        root: [
+          "text-green-780 bg-green-200",
+          "dark:text-green-780 dark:bg-green-300"
+        ],
+        close: "text-green-780 dark:text-green-780 hover:text-green-800 dark:hover:text-green-800"
+      },
+      warning: {
+        root: [
+          "text-orange-700 bg-orange-200",
+          "dark:text-orange-750 dark:bg-orange-300"
+        ],
+        close: "text-orange-700 dark:text-orange-750 hover:text-orange-800 dark:hover:text-orange-800"
+      },
+      primary: {
+        root: [
+          "text-blue-700 bg-blue-200",
+          "dark:text-blue-700 dark:bg-blue-300"
+        ],
+        close: "text-blue-700 dark:text-blue-700 hover:text-blue-800 dark:hover:text-blue-800"
+      },
+      secondary: {
+        root: [
+          "text-cyan-700 bg-cyan-150",
+          "dark:text-cyan-750 dark:bg-cyan-300"
+        ],
+        close: "text-cyan-700 dark:text-cyan-750 hover:text-cyan-800 dark:hover:text-cyan-800"
+      },
+      collab: {
+        root: [
+          "text-collab-700 bg-collab-200",
+          "dark:text-collab-700 dark:bg-collab-300"
+        ],
+        close: "text-collab-700 dark:text-collab-700 hover:text-collab-800 dark:hover:text-collab-800"
+      },
+      ai: {
+        root: [
+          "text-ai-700 bg-ai-200",
+          "dark:text-ai-700 dark:bg-ai-300"
+        ],
+        close: "text-ai-700 dark:text-ai-700 hover:text-ai-800 dark:hover:text-ai-800"
+      }
+    },
+    size: {
+      sm: {
+        root: "py-xs ps-sm pe-xs gap-2",
+        title: "text-sm leading-normal",
+        description: "text-sm leading-normal",
+        avatarSize: "md"
+      },
+      md: {
+        root: "py-md ps-md pe-xs gap-2.5",
+        title: "text-md leading-none",
+        description: "text-md leading-[17px]",
+        avatarSize: "xl"
+      }
+    },
+    multiline: {
+      true: {
+        root: "items-start",
+        actions: "items-start mt-2"
+      },
+      false: {
+        root: "items-center",
+        actions: "items-center"
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    color: "default",
+    size: "md"
+  }
+};
+
+const avatar = {
+  slots: {
+    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-base-100 dark:bg-base-900",
+    image: "h-full w-full rounded-[inherit] object-cover data-[error]:hidden",
+    fallback: "font-medium text-base-500 dark:text-base-600 truncate",
+    icon: "text-base-500 shrink-0 dark:text-base-600"
+  },
+  variants: {
+    size: {
+      "3xs": {
+        root: "size-xs2 text-4xs font-regular",
+        icon: "size-xs2"
+      },
+      "2xs": {
+        root: "size-5 text-4xs font-regular",
+        icon: "size-5"
+      },
+      "xs": {
+        root: "size-6 text-3xs font-regular",
+        icon: "size-6"
+      },
+      "sm": {
+        root: "size-7 text-xs",
+        icon: "size-7"
+      },
+      "md": {
+        root: "size-8 text-sm",
+        icon: "size-8"
+      },
+      "lg": {
+        root: "size-[42px] text-2xl",
+        icon: "size-[42px]"
+      },
+      "xl": {
+        root: "size-12 text-2xl",
+        icon: "size-12"
+      },
+      "2xl": {
+        root: "size-[60px] text-5xl",
+        icon: "size-[60px]"
+      },
+      "3xl": {
+        root: "size-[94px] text-[34px]",
+        icon: "size-[94px]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+};
+
+const avatarGroup = {
+  slots: {
+    root: "inline-flex justify-end",
+    base: "relative rounded-full ring-white dark:ring-base-700 last: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 -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 badge = {
+  slots: {
+    base: [
+      "select-none font-b24-secondary font-normal",
+      "inline-flex items-center",
+      "transition-all duration-200 ease-linear",
+      "px-2 leading-normal rounded-md"
+      // 'text-base-800 dark:text-base-250'
+    ],
+    wrapper: "inline-flex items-center",
+    label: "max-w-full whitespace-nowrap text-ellipsis",
+    // truncate ////
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailingIcon: "shrink-0 cursor-pointer  hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35"
+  },
+  variants: {
+    useLink: {
+      true: {
+        base: "cursor-pointer",
+        wrapper: "group",
+        label: "group-hover:underline group-hover:decoration-dashed"
+      }
+    },
+    useClose: {
+      true: "pe-2xs"
+    },
+    useFill: {
+      true: "",
+      false: "bg-transparent"
+    },
+    leading: {
+      true: "ps-2xs"
+    },
+    color: {
+      default: "",
+      danger: "",
+      success: "",
+      warning: "",
+      primary: "",
+      secondary: "",
+      collab: "",
+      ai: ""
+    },
+    depth: {
+      light: "font-normal",
+      normal: "font-bold",
+      dark: "font-bold"
+    },
+    size: {
+      xs: {
+        base: "text-5xs gap-0.5",
+        wrapper: "h-[14px] gap-0.5",
+        label: "underline-offset-1",
+        leadingIcon: "size-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-sm "
+      },
+      sm: {
+        base: "text-4xs gap-1",
+        wrapper: "h-[16px] gap-1",
+        label: "underline-offset-1",
+        leadingIcon: "size-sm2",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-sm2"
+      },
+      md: {
+        base: "text-3xs gap-1",
+        wrapper: "h-[17px] gap-1",
+        label: "underline-offset-1",
+        leadingIcon: "size-[15px]",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-[15px]"
+      },
+      lg: {
+        base: "text-xs gap-1 rounded-lg",
+        wrapper: "h-[24px] gap-1",
+        leadingIcon: "size-[22px]",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-[22px]"
+      },
+      xl: {
+        base: "text-md gap-1 rounded-xl",
+        wrapper: "h-[31px] gap-1",
+        leadingIcon: "size-[26px]",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-[26px]"
+      }
+    }
+  },
+  compoundVariants: [
+    // region default ////
+    // TAG_LIGHT ////
+    {
+      color: "default",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-base-900 bg-base-100 ring-base-100",
+        "dark:text-base-900 dark:bg-base-150 dark:ring-base-150"
+      ].join(" ")
+    },
+    // DEFAULT ////
+    {
+      color: "default",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-base-800 bg-base-150 ring-base-150",
+        "dark:text-base-950 dark:bg-base-200 dark:ring-base-200"
+      ].join(" ")
+    },
+    // LIGHT ////
+    // @memo it should be LIGHT but that's equivalent to DEFAULT -> so we make it really dark ////
+    {
+      color: "default",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-base-500 ring-base-500",
+        "dark:text-base-50 dark:bg-base-600 dark:ring-base-600"
+      ].join(" ")
+    },
+    // endregion ////
+    // region danger ////
+    // LIGHT_RED ////
+    {
+      color: "danger",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-red-800 bg-red-500/17 ring-red-500/17",
+        "dark:text-red-900 dark:bg-red-300 dark:ring-red-300"
+      ].join(" ")
+    },
+    // DANGER ////
+    {
+      color: "danger",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-red-800 bg-red-250 ring-red-250",
+        "dark:text-red-800 dark:bg-red-350 dark:ring-red-350"
+      ].join(" ")
+    },
+    // danger_dark ////
+    {
+      color: "danger",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-red-500 ring-red-500",
+        "dark:text-red-250 dark:bg-red-600 dark:ring-red-600"
+      ].join(" ")
+    },
+    // endregion ////
+    // region success ////
+    // LIGHT_GREEN ////
+    // @memo it should be LIGHT_GREEN but that's equivalent to SUCCESS -> so we make it really light ////
+    {
+      color: "success",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-green-800 bg-green-500/17 ring-green-500/17",
+        "dark:text-green-900 dark:bg-green-300 dark:ring-green-300"
+      ].join(" ")
+    },
+    // SUCCESS ////
+    {
+      color: "success",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-green-800 bg-green-300 ring-green-300",
+        "dark:text-green-800 dark:bg-green-330 dark:ring-green-330"
+      ].join(" ")
+    },
+    // success_dark ////
+    {
+      color: "success",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-green-500 ring-green-500",
+        "dark:text-green-250 dark:bg-green-600 dark:ring-green-600"
+      ].join(" ")
+    },
+    // endregion ////
+    // region warning ////
+    // ORANGE ////
+    {
+      color: "warning",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-orange-800 bg-orange-250 ring-orange-300",
+        "dark:text-orange-900 dark:bg-orange-300 dark:ring-orange-300"
+      ].join(" ")
+    },
+    // LIGHT_ORANGE ////
+    {
+      color: "warning",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-orange-800 bg-orange-300 ring-orange-300",
+        "dark:text-orange-800 dark:bg-orange-400 dark:ring-orange-400"
+      ].join(" ")
+    },
+    // WARNING ////
+    {
+      color: "warning",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-orange-500 ring-orange-500",
+        "dark:text-orange-250 dark:bg-orange-600 dark:ring-orange-600"
+      ].join(" ")
+    },
+    // endregion ////
+    // region primary ////
+    // LIGHT_BLUE ////
+    // @memo it should be LIGHT_BLUE but that's equivalent to PRIMARY -> so we make it really light ////
+    {
+      color: "primary",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-blue-800 bg-blue-500/17 ring-blue-500/17",
+        "dark:text-blue-900 dark:bg-blue-300 dark:ring-blue-300"
+      ].join(" ")
+    },
+    // PRIMARY ////
+    {
+      color: "primary",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-blue-700 bg-blue-250 ring-blue-250",
+        "dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300"
+      ].join(" ")
+    },
+    // primary_dark ////
+    {
+      color: "primary",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-blue-500 ring-blue-500",
+        "dark:text-blue-250 dark:bg-blue-600 dark:ring-blue-600"
+      ].join(" ")
+    },
+    // endregion ////
+    // region secondary ////
+    // TAG_SECONDARY ////
+    {
+      color: "secondary",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-base-master bg-blue-320 ring-blue-320",
+        "dark:text-base-master dark:bg-blue-400 dark:ring-blue-400"
+      ].join(" ")
+    },
+    // SECONDARY ////
+    {
+      color: "secondary",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-white bg-cyan-350 ring-cyan-350",
+        "dark:text-cyan-100 dark:bg-cyan-400 dark:ring-cyan-400"
+      ].join(" ")
+    },
+    // secondary_dark ////
+    {
+      color: "secondary",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-cyan-500 ring-cyan-500",
+        "dark:text-cyan-250 dark:bg-cyan-600 dark:ring-cyan-600"
+      ].join(" ")
+    },
+    // endregion ////
+    // region collab ////
+    {
+      color: "collab",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-collab-800 bg-collab-500/17 ring-collab-500/17",
+        "dark:text-collab-900 dark:bg-collab-300 dark:ring-collab-300"
+      ].join(" ")
+    },
+    {
+      color: "collab",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-collab-800 bg-collab-300 ring-collab-300",
+        "dark:text-collab-800 dark:bg-collab-300 dark:ring-collab-300"
+      ].join(" ")
+    },
+    {
+      color: "collab",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-collab-500 ring-collab-500",
+        "dark:text-collab-250 dark:bg-collab-600 dark:ring-collab-600"
+      ].join(" ")
+    },
+    // endregion ////
+    // region ai ////
+    // COPILOT_LIGHT_REVERSE ////
+    {
+      color: "ai",
+      depth: "light",
+      class: [
+        "ring ring-inset",
+        "text-ai-500 bg-white ring-ai-10",
+        "dark:text-ai-500 dark:bg-ai-50 dark:ring-ai-50"
+      ].join(" ")
+    },
+    // LAVENDER ////
+    {
+      color: "ai",
+      depth: "normal",
+      class: [
+        "ring ring-inset",
+        "text-ai-500 bg-ai-150 ring-ai-150",
+        "dark:text-ai-600 dark:bg-ai-200 dark:ring-ai-200"
+      ].join(" ")
+    },
+    // COPILOT_LIGHT ////
+    {
+      color: "ai",
+      depth: "dark",
+      class: [
+        "ring ring-inset",
+        "text-white bg-ai-330 ring-ai-330",
+        "dark:text-ai-100 dark:bg-ai-400 dark:ring-ai-400"
+      ].join(" ")
+    },
+    // endregion ////
+    // region useLink & useFill ////
+    {
+      useLink: true,
+      useFill: false,
+      class: [
+        // 'hover:bg-base-100 dark:hover:bg-base-900'
+      ].join(" ")
+    },
+    {
+      useFill: false,
+      class: "text-base-800 dark:text-base-250 bg-transparent dark:bg-transparent"
+    },
+    // endregion ////
+    // region useClose ////
+    {
+      useClose: true,
+      class: ""
+    }
+    // endregion ////
+  ],
+  defaultVariants: {
+    color: "default",
+    depth: "normal",
+    size: "md",
+    useFill: false
+  }
+};
+
+const buttonGroupVariant = {
+  buttonGroup: {
+    horizontal: [
+      "focus-visible:outline-none",
+      "ring ring-inset ring-0 focus-visible:ring-2",
+      "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
+      "not-only:first:border-e-0 not-only:not-first:border-s-0"
+    ].join(" "),
+    vertical: [
+      "focus-visible:outline-none",
+      "ring ring-inset ring-0 focus-visible:ring-2",
+      "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
+    ].join(" ")
+  },
+  noSplit: {
+    false: [
+      "not-only:not-first:after:content-[''] not-only:not-first:after:absolute",
+      "not-only:not-first:after:top-[7px] not-only:not-first:after:bottom-[6px] not-only:not-first:after:left-0 not-only:not-first:after:w-px",
+      "not-only:not-first:after:bg-current/30"
+    ].join(" ")
+  }
+};
+const buttonGroupVariantWithRoot = {
+  buttonGroup: {
+    horizontal: {
+      root: "group",
+      base: [
+        "focus-visible:outline-none",
+        "ring ring-inset ring-1 focus-visible:ring-2",
+        "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none",
+        "group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0"
+      ].join(" ")
+    },
+    vertical: {
+      root: "group",
+      base: [
+        "focus-visible:outline-none",
+        "ring ring-inset ring-1 focus-visible:ring-2",
+        "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
+      ].join(" ")
+    }
+  },
+  noSplit: {
+    false: [
+      "not-only:not-first:after:content-[''] not-only:not-first:after:absolute",
+      "not-only:not-first:after:top-[7px] not-only:not-first:after:bottom-[6px] not-only:not-first:after:left-0 not-only:not-first:after:w-px",
+      "not-only:not-first:after:bg-current/30"
+    ].join(" ")
+  }
+};
+const buttonGroup = {
+  base: "relative",
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    orientation: {
+      horizontal: "inline-flex -space-x-px",
+      vertical: "flex flex-col -space-y-px"
+    }
+  }
+};
+
+const button = {
+  slots: {
+    base: [
+      "select-none cursor-pointer inline-flex items-center",
+      "relative focus:outline-hidden",
+      "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50",
+      "transition duration-150 ease-linear"
+      // transition-colors
+    ],
+    baseLine: [
+      "inline-flex items-center"
+    ],
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailingIcon: "shrink-0"
+  },
+  variants: {
+    ...buttonGroupVariant,
+    color: {
+      // DEFAULT ////
+      default: [
+        "text-white dark:text-base-100 bg-base-650 border border-base-650",
+        "hover:bg-base-850 hover:border-base-850 hover:focus-visible:ring-0",
+        "active:bg-slate-850 active:border-slate-850 active:focus-visible:ring-0",
+        "disabled:bg-base-650 aria-disabled:bg-base-650 disabled:border-base-650 aria-disabled:border-base-650",
+        "focus-visible:outline-base-650",
+        "ring-base-850 focus-visible:ring-base-850"
+      ].join(" "),
+      danger: [
+        "text-white dark:text-red-100 bg-red-720 border border-red-720",
+        "hover:bg-red-790 hover:border-red-790 hover:focus-visible:ring-0",
+        "active:bg-red-730 active:border-red-730 active:focus-visible:ring-0",
+        "disabled:bg-red-720 aria-disabled:bg-red-720 disabled:border-red-720 aria-disabled:border-red-720",
+        "focus-visible:outline-red-720",
+        "ring-red-800 focus-visible:ring-red-800"
+      ].join(" "),
+      // SUCCESS ////
+      success: [
+        "text-base-900 bg-green-450 border border-green-450",
+        "hover:bg-green-370 hover:border-green-370 hover:focus-visible:ring-0",
+        "active:bg-green-430 active:border-green-430 active:focus-visible:ring-0",
+        "disabled:bg-green-450 aria-disabled:bg-green-450 disabled:border-green-450 aria-disabled:border-green-450",
+        "focus-visible:outline-green-450",
+        "ring-green-500 focus-visible:ring-green-500"
+      ].join(" "),
+      // new WARNING ////
+      warning: [
+        "text-white dark:text-orange-100 bg-orange-500 border border-orange-500",
+        "hover:bg-orange-500/75 hover:border-orange-500/75 hover:focus-visible:ring-0",
+        "active:bg-orange-500/85 active:border-orange-500/85 active:focus-visible:ring-0",
+        "disabled:bg-orange-500 aria-disabled:bg-orange-500 disabled:border-bg-orange-500 aria-disabled:border-bg-orange-500",
+        "focus-visible:outline-orange-500",
+        "ring-orange-800 focus-visible:ring-orange-800"
+      ].join(" "),
+      // PRIMARY ////
+      primary: [
+        "text-white dark:text-blue-100 bg-blue-530 border border-blue-530",
+        "hover:bg-blue-450 hover:border-blue-450 hover:focus-visible:ring-0",
+        "active:bg-blue-550 active:border-blue-550 active:focus-visible:ring-0",
+        "disabled:bg-blue-530 aria-disabled:bg-blue-530 disabled:border-blue-530 aria-disabled:border-blue-530",
+        "focus-visible:outline-blue-530",
+        "ring-blue-800 focus-visible:ring-blue-800"
+      ].join(" "),
+      // SECONDARY ////
+      secondary: [
+        "text-base-900 bg-cyan-160 border border-cyan-230",
+        "hover:bg-cyan-150 hover:border-cyan-230 hover:focus-visible:ring-0",
+        "active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0",
+        "disabled:bg-cyan-160 aria-disabled:bg-cyan-160 disabled:border-cyan-230 aria-disabled:border-cyan-230",
+        "focus-visible:outline-cyan-160",
+        "ring-cyan-500 focus-visible:ring-cyan-500"
+      ].join(" "),
+      // COLLAB ////
+      collab: [
+        "text-white dark:text-collab-100 bg-collab-600 border border-collab-600",
+        "hover:bg-collab-500 hover:border-collab-500 hover:focus-visible:ring-0",
+        "active:bg-collab-700 active:border-collab-700 active:focus-visible:ring-0",
+        "disabled:bg-collab-600 aria-disabled:bg-collab-600 disabled:border-collab-600 aria-disabled:border-collab-600",
+        "focus-visible:outline-collab-600",
+        "ring-collab-900 focus-visible:ring-collab-900"
+      ].join(" "),
+      // AI ////
+      ai: [
+        "text-white dark:text-ai-100 bg-ai-450 border border-ai-450",
+        "hover:bg-ai-370 hover:border-ai-370 hover:focus-visible:ring-0",
+        "active:bg-ai-550 active:border-ai-550 active:focus-visible:ring-0",
+        "disabled:bg-ai-450 aria-disabled:bg-ai-450 disabled:border-ai-450 aria-disabled:border-ai-450",
+        "focus-visible:outline-ai-450",
+        "ring-ai-900 focus-visible:ring-ai-900"
+      ].join(" "),
+      // LINK ////
+      link: [
+        "no-underline decoration-solid decoration-auto",
+        "text-base-900 decoration-gray-900 bg-transparent border border-transparent dark:text-base-300",
+        "hover:text-base-750 dark:hover:text-base-400 hover:focus-visible:ring-0",
+        "active:text-base-900 dark:active:text-base-700 active:focus-visible:ring-0",
+        "disabled:text-base-900 aria-disabled:text-base-900 dark:disabled:text-base-300 dark:aria-disabled:disabled:text-base-300",
+        "focus-visible:outline-base-400",
+        "ring-base-850 focus-visible:ring-base-850"
+      ].join(" ")
+    },
+    depth: {
+      light: "",
+      normal: "",
+      dark: ""
+    },
+    size: {
+      xs: {
+        base: "h-xl2 ps-4 pe-4 text-3xs leading-none",
+        // 26px
+        baseLine: "gap-1",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-md2"
+      },
+      sm: {
+        base: "h-3xl ps-[18px] pe-[18px] text-xs leading-none",
+        // 32px
+        baseLine: "gap-1.5",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-lg"
+      },
+      md: {
+        base: "h-5xl ps-5 pe-5 text-xs leading-none",
+        // 40px
+        baseLine: "gap-1.5",
+        leadingIcon: "size-xl2",
+        leadingAvatarSize: "sm",
+        trailingIcon: "size-lg"
+      },
+      lg: {
+        base: "h-6xl ps-[28px] pe-[28px] text-xs leading-none",
+        // ? 48px
+        baseLine: "gap-2",
+        leadingIcon: "size-xl2",
+        leadingAvatarSize: "md",
+        trailingIcon: "size-lg"
+      }
+    },
+    block: {
+      true: {
+        base: "w-full",
+        baseLine: "w-full justify-center",
+        trailingIcon: "ms-auto"
+      }
+    },
+    rounded: {
+      true: "rounded-full",
+      false: "rounded-2xs"
+    },
+    leading: {
+      true: ""
+    },
+    useLabel: {
+      true: "",
+      false: "ps-1.5 pe-1.5 justify-center"
+    },
+    useDropdown: {
+      true: "ps-2 pe-2"
+    },
+    useWait: {
+      true: ""
+    },
+    useClock: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    normalCase: {
+      true: "font-semibold normal-case",
+      false: "font-bold uppercase"
+    }
+  },
+  compoundVariants: [
+    // region default ////
+    {
+      // BASE_LIGHT ////
+      color: "default",
+      depth: "light",
+      class: [
+        "text-base-800 dark:text-base-800 bg-base-200 border border-base-300",
+        "hover:bg-base-320 hover:border-base-320 hover:focus-visible:ring-0",
+        "active:bg-base-250 active:border-base-250 active:focus-visible:ring-0",
+        "disabled:bg-base-200 aria-disabled:bg-base-200 disabled:border-base-300 aria-disabled:border-base-300",
+        "focus-visible:outline-base-200"
+      ].join(" ")
+    },
+    {
+      // new BASE_DARK ////
+      color: "default",
+      depth: "dark",
+      class: [
+        "text-white dark:text-base-100 bg-base-900 border border-base-900",
+        "hover:bg-base-900/75 hover:border-base-900/75 hover:focus-visible:ring-0",
+        "active:bg-base-900/85 active:border-base-900/85 active:focus-visible:ring-0",
+        "disabled:bg-base-900 aria-disabled:bg-base-900 disabled:border-base-900 aria-disabled:border-base-900",
+        "focus-visible:outline-base-900",
+        "ring-base-700 focus-visible:ring-base-700"
+      ].join(" ")
+    },
+    // endregion ////
+    // region danger ////
+    {
+      // DANGER_LIGHT ////
+      color: "danger",
+      depth: "light",
+      class: [
+        "text-red-750 dark:text-red-760 bg-red-270 border border-red-270",
+        "hover:bg-red-250 hover:border-red-250 dark:hover:bg-red-200 dark:hover:border-red-200 hover:focus-visible:ring-0",
+        "active:bg-red-350 active:border-red-350 dark:active:bg-red-350 dark:active:border-red-350 active:focus-visible:ring-0",
+        "disabled:bg-red-270 aria-disabled:bg-red-270 disabled:border-red-270 aria-disabled:border-red-270",
+        "dark:disabled:bg-red-270 dark:aria-disabled:bg-red-270 dark:disabled:border-red-270 dark:aria-disabled:border-red-270",
+        "focus-visible:outline-red-270"
+      ].join(" ")
+    },
+    {
+      // DANGER_DARK ////
+      color: "danger",
+      depth: "dark",
+      class: [
+        "text-white dark:text-red-100 bg-red-850 border border-red-850",
+        "hover:bg-red-760 hover:border-red-760 hover:focus-visible:ring-0",
+        "active:bg-red-930 active:border-red-930 active:focus-visible:ring-0",
+        "disabled:bg-red-850 aria-disabled:bg-red-850 disabled:border-red-850 aria-disabled:border-red-850",
+        "focus-visible:outline-red-850",
+        "ring-red-950 focus-visible:ring-red-950"
+      ].join(" ")
+    },
+    // endregion ////
+    // region success ////
+    {
+      // SUCCESS_LIGHT ////
+      color: "success",
+      depth: "light",
+      class: [
+        "text-green-780 bg-green-280 border border-green-280",
+        "hover:bg-green-270 hover:border-green-270 hover:focus-visible:ring-0",
+        "dark:hover:bg-green-200 dark:hover:border-green-200",
+        "active:bg-green-330 active:border-green-270 active:focus-visible:ring-0",
+        "dark:active:bg-green-330 dark:active:border-green-270",
+        "disabled:bg-green-280 aria-disabled:bg-green-280 disabled:border-green-280 aria-disabled:border-green-280",
+        "dark:disabled:bg-green-280 dark:aria-disabled:bg-green-280 dark:disabled:border-green-280 dark:aria-disabled:border-green-280",
+        "focus-visible:outline-green-280"
+      ].join(" ")
+    },
+    {
+      // SUCCESS_DARK ////
+      color: "success",
+      depth: "dark",
+      class: [
+        "text-white dark:text-green-100 bg-green-730 border border-green-730",
+        "hover:bg-green-570 hover:border-green-570 hover:focus-visible:ring-0",
+        "active:bg-green-570 active:border-green-570 active:focus-visible:ring-0",
+        "disabled:bg-green-730 aria-disabled:bg-green-730 disabled:border-green-730 aria-disabled:border-green-730",
+        "focus-visible:outline-green-730",
+        "ring-green-900 focus-visible:ring-green-900"
+      ].join(" ")
+    },
+    // endregion ////
+    // region warning ////
+    {
+      // WARNING_LIGHT ////
+      color: "warning",
+      depth: "light",
+      class: [
+        "text-orange-750 dark:text-orange-750 bg-orange-350/80 border border-orange-350/80 dark:bg-orange-230 dark:border-orange-230",
+        "hover:bg-orange-500/65 hover:border-orange-500/65 dark:hover:bg-orange-400 dark:hover:border-orange-400 hover:focus-visible:ring-0",
+        "active:bg-orange-550 active:border-orange-550 dark:active:bg-orange-600 dark:active:border-orange-600 active:focus-visible:ring-0",
+        "disabled:bg-orange-230 aria-disabled:bg-orange-230 disabled:border-orange-230 aria-disabled:border-orange-230 dark:disabled:bg-orange-230 dark:aria-disabled:bg-orange-230 dark:disabled:border-orange-230 dark:aria-disabled:border-orange-230",
+        "focus-visible:outline-orange-230"
+      ].join(" ")
+    },
+    {
+      // new WARNING_DARK ////
+      color: "warning",
+      depth: "dark",
+      class: [
+        "text-white dark:text-orange-100 bg-orange-700 border border-orange-700",
+        "hover:bg-orange-700/75 hover:border-orange-700/75 hover:focus-visible:ring-0",
+        "active:bg-orange-700/85 active:border-orange-700/85 active:focus-visible:ring-0",
+        "disabled:bg-orange-700 aria-disabled:bg-orange-700 disabled:border-orange-700 aria-disabled:border-orange-700",
+        "focus-visible:outline-orange-700"
+      ].join(" ")
+    },
+    // endregion ////
+    // region primary ////
+    {
+      // new PRIMARY_LIGHT ////
+      color: "primary",
+      depth: "light",
+      class: [
+        "text-blue-800 dark:text-blue-800 bg-blue-300 border border-blue-400",
+        "hover:bg-blue-300/75 hover:border-blue-300/75 hover:focus-visible:ring-0",
+        "active:bg-blue-300/85 active:border-blue-300/85 active:focus-visible:ring-0",
+        "disabled:bg-blue-300 aria-disabled:bg-blue-300 disabled:border-blue-300 aria-disabled:border-blue-300",
+        "focus-visible:outline-blue-300"
+      ].join(" ")
+    },
+    {
+      // PRIMARY_DARK ////
+      color: "primary",
+      depth: "dark",
+      class: [
+        "text-white dark:text-blue-100 bg-blue-650 border border-blue-650",
+        "hover:bg-blue-630 hover:border-blue-630 hover:focus-visible:ring-0",
+        "active:bg-blue-750 active:border-blue-750 active:focus-visible:ring-0",
+        "disabled:bg-blue-650 aria-disabled:bg-blue-650 disabled:border-blue-650 aria-disabled:border-blue-650",
+        "focus-visible:outline-blue-650"
+      ].join(" ")
+    },
+    // endregion ////
+    // region secondary ////
+    {
+      // SECONDARY_LIGHT ////
+      color: "secondary",
+      depth: "light",
+      class: [
+        "text-blue-620 dark:text-blue-850 bg-blue-310 border border-blue-310",
+        "hover:bg-cyan-150 hover:border-cyan-150 hover:focus-visible:ring-0",
+        "active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0",
+        "disabled:bg-blue-310 aria-disabled:bg-blue-310 disabled:border-blue-310 aria-disabled:border-blue-310",
+        "focus-visible:outline-blue-310"
+      ].join(" ")
+    },
+    {
+      // new SECONDARY_DARK ////
+      color: "secondary",
+      depth: "dark",
+      class: [
+        "text-base-900 bg-cyan-350 border-cyan-500",
+        "hover:bg-cyan-350/75 hover:focus-visible:ring-0",
+        "active:bg-cyan-350/85 active:focus-visible:ring-0",
+        "disabled:bg-cyan-350 aria-disabled:bg-cyan-350",
+        "focus-visible:outline-cyan-350",
+        "ring-cyan-900 focus-visible:ring-cyan-900"
+      ].join(" ")
+    },
+    // endregion ////
+    // region collab ////
+    {
+      // new collab_LIGHT ////
+      color: "collab",
+      depth: "light",
+      class: [
+        "text-collab-900 dark:text-collab-900 bg-collab-300 border border-collab-400",
+        "hover:bg-collab-300/75 hover:border-collab-300/75 hover:focus-visible:ring-0",
+        "active:bg-collab-300/85 active:border-collab-300/85 active:focus-visible:ring-0",
+        "disabled:bg-collab-300 aria-disabled:bg-collab-300 disabled:border-collab-300 aria-disabled:border-collab-300",
+        "focus-visible:outline-collab-300"
+      ].join(" ")
+    },
+    {
+      // new collab_DARK ////
+      color: "collab",
+      depth: "dark",
+      class: [
+        "text-white dark:text-collab-100 bg-collab-700 border border-collab-700",
+        "hover:bg-collab-700/75 hover:border-collab-700/75 hover:focus-visible:ring-0",
+        "active:bg-collab-700/85 active:border-collab-700/85 active:focus-visible:ring-0",
+        "disabled:bg-collab-700 aria-disabled:bg-collab-700 disabled:border-collab-700 aria-disabled:border-collab-700",
+        "focus-visible:outline-collab-700"
+      ].join(" ")
+    },
+    // endregion ////
+    // region ai ////
+    {
+      // new AI_LIGHT ////
+      color: "ai",
+      depth: "light",
+      class: [
+        "text-ai-900 dark:text-ai-900 bg-ai-300 border border-ai-400",
+        "hover:bg-ai-300/75 hover:border-ai-300/75 hover:focus-visible:ring-0",
+        "active:bg-ai-300/85 active:border-ai-300/85 active:focus-visible:ring-0",
+        "disabled:bg-ai-300 aria-disabled:bg-ai-300 disabled:border-ai-300 aria-disabled:border-ai-300",
+        "focus-visible:outline-ai-300"
+      ].join(" ")
+    },
+    {
+      // new AI_DARK ////
+      color: "ai",
+      depth: "dark",
+      class: [
+        "text-white dark:text-ai-100 bg-ai-550 border border-ai-550",
+        "hover:bg-ai-550/75 hover:border-ai-550/75 hover:focus-visible:ring-0",
+        "active:bg-ai-550/85 active:border-ai-550/85 active:focus-visible:ring-0",
+        "disabled:bg-ai-550 aria-disabled:bg-ai-550 disabled:border-ai-550 aria-disabled:border-ai-550",
+        "focus-visible:outline-ai-550",
+        "ring-ai-900 focus-visible:ring-ai-900"
+      ].join(" ")
+    },
+    // endregion ////
+    // region link ////
+    {
+      // LIGHT ////
+      color: "link",
+      depth: "light",
+      class: [
+        "text-base-900 dark:text-base-300 bg-transparent border border-transparent",
+        "hover:text-base-master dark:hover:text-base-100 hover:bg-base-30 dark:hover:bg-base-850 hover:focus-visible:ring-0",
+        "active:text-base-ebony active:bg-blue-270 dark:active:text-base-100 dark:active:bg-slate-850 active:focus-visible:ring-0",
+        "disabled:text-base-master disabled:bg-base-30 aria-disabled:bg-base-30 dark:disabled:text-base-100 dark:aria-disabled:text-base-100 dark:disabled:bg-base-850 dark:aria-disabled:bg-base-850",
+        "focus-visible:outline-base-30 dark:focus-visible:outline-base-850"
+      ].join(" ")
+    },
+    {
+      // LIGHT_BORDER ////
+      color: "link",
+      depth: "light",
+      useLabel: true,
+      class: "ps-1.5 pe-1.5"
+    },
+    {
+      // LIGHT_BORDER ////
+      color: "link",
+      depth: "dark",
+      class: [
+        "",
+        "border",
+        "text-base-900 bg-transparent border-base-330 dark:text-base-300 dark:border-base-800",
+        "hover:text-base-900 dark:hover:text-base-900 hover:bg-base-320 hover:border-base-330 hover:focus-visible:ring-0",
+        "active:text-base-900 dark:active:text-base-900 active:bg-base-250 active:border-base-550 active:focus-visible:ring-0",
+        "disabled:bg-transparent disabled:border-base-330 aria-disabled:bg-transparent aria-disabled:border-base-330",
+        "dark:disabled:text-base-900 dark:aria-disabled:text-base-900",
+        "dark:disabled:border-base-900 dark:aria-disabled:border-base-900",
+        "focus-visible:outline-base-330"
+      ].join(" ")
+    },
+    // endregion ////
+    // region size && leading ////
+    {
+      size: "xs",
+      leading: true,
+      useLabel: true,
+      useDropdown: false,
+      class: "ps-1.5 pe-4"
+    },
+    {
+      size: "sm",
+      leading: true,
+      useLabel: true,
+      useDropdown: false,
+      class: "ps-2.5 pe-[18px]"
+    },
+    {
+      size: "md",
+      leading: true,
+      useLabel: true,
+      useDropdown: false,
+      class: "ps-3.5 pe-5"
+    },
+    {
+      size: "lg",
+      leading: true,
+      useLabel: true,
+      useDropdown: false,
+      class: "ps-4 pe-[28px]"
+    },
+    // endregion ////
+    // region size && useDropdown ////
+    {
+      size: "xs",
+      leading: false,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-4 pe-1.5"
+    },
+    {
+      size: "sm",
+      leading: false,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-[18px] pe-1.5"
+    },
+    {
+      size: "md",
+      leading: false,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-5 pe-2.5"
+    },
+    {
+      size: "lg",
+      leading: false,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-[28px] pe-3.5"
+    },
+    // endregion ////
+    // region size && leading && useDropdown ////
+    {
+      size: "xs",
+      leading: true,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-1.5 pe-1.5"
+    },
+    {
+      size: "sm",
+      leading: true,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-2.5 pe-1.5"
+    },
+    {
+      size: "md",
+      leading: true,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-3.5 pe-2.5"
+    },
+    {
+      size: "lg",
+      leading: true,
+      useLabel: true,
+      useDropdown: true,
+      class: "ps-4 pe-3.5"
+    },
+    // endregion ////
+    // region noCaps ////
+    {
+      normalCase: true,
+      size: "xs",
+      class: "text-xs"
+    },
+    {
+      normalCase: true,
+      size: "sm",
+      class: "text-sm"
+    },
+    {
+      normalCase: true,
+      size: ["md", "lg"],
+      class: "text-md"
+    }
+    // endregion ////
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "default",
+    depth: "normal"
+  }
+};
+
+const checkbox = {
+  slots: {
+    root: "relative flex items-start",
+    base: "cursor-pointer shrink-0 flex items-center justify-center rounded-2xs text-white dark:text-base-150 ring ring-inset ring-base-300 dark:ring-base-700 focus-visible:outline-2 focus-visible:outline-offset-2",
+    container: "flex items-center",
+    wrapper: "font-b24-primary ms-2",
+    icon: "shrink-0 size-full",
+    label: "cursor-pointer block font-regular text-base-master dark:text-base-400",
+    description: "text-base-500 dark:text-base-600"
+  },
+  variants: {
+    color: {
+      default: "focus-visible:outline-base-900 dark:focus-visible:outline-base-350",
+      danger: "focus-visible:outline-red-500 dark:focus-visible:outline-red-600",
+      success: "focus-visible:outline-green-500 dark:focus-visible:outline-green-600",
+      warning: "focus-visible:outline-orange-500 dark:focus-visible:outline-orange-600",
+      primary: "focus-visible:outline-blue-500 dark:focus-visible:outline-blue-600",
+      secondary: "focus-visible:outline-cyan-350 dark:focus-visible:outline-cyan-500",
+      collab: "focus-visible:outline-collab-500 dark:focus-visible:outline-collab-600",
+      ai: "focus-visible:outline-ai-500 dark:focus-visible:outline-ai-600"
+    },
+    size: {
+      xs: {
+        base: "size-3",
+        container: "h-4",
+        wrapper: "text-xs",
+        label: "leading-4"
+      },
+      sm: {
+        base: "size-3.5",
+        container: "h-4",
+        wrapper: "text-sm",
+        label: "leading-4"
+      },
+      md: {
+        base: "size-4",
+        container: "h-5",
+        wrapper: "text-md",
+        label: "leading-5"
+      },
+      lg: {
+        base: "size-5",
+        container: "h-5",
+        wrapper: "text-xl",
+        label: "leading-5"
+      }
+    },
+    required: {
+      true: {
+        label: "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75",
+        description: "cursor-not-allowed opacity-75"
+      }
+    },
+    checked: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      color: "default",
+      checked: true,
+      class: "ring-2 ring-base-900 bg-base-900 dark:ring-base-350 dark:bg-base-350 dark:text-base-800"
+    },
+    {
+      color: "danger",
+      checked: true,
+      class: "ring-2 ring-red-500 bg-red-500 dark:ring-red-600 dark:bg-red-600 dark:text-red-250"
+    },
+    {
+      color: "success",
+      checked: true,
+      class: "ring-2 ring-green-500 bg-green-500 dark:ring-green-600 dark:bg-green-600 dark:text-green-250"
+    },
+    {
+      color: "warning",
+      checked: true,
+      class: "ring-2 ring-orange-500 bg-orange-500 dark:ring-orange-600 dark:bg-orange-600 dark:text-orange-250"
+    },
+    {
+      color: "primary",
+      checked: true,
+      class: "ring-2 ring-blue-500 bg-blue-500 dark:ring-blue-600 dark:bg-blue-600 dark:text-blue-250"
+    },
+    {
+      color: "secondary",
+      checked: true,
+      class: "ring-2 ring-cyan-350 bg-cyan-350 dark:ring-cyan-500 dark:bg-cyan-500"
+    },
+    {
+      color: "collab",
+      checked: true,
+      class: "ring-2 ring-collab-500 bg-collab-500 dark:ring-collab-600 dark:bg-collab-600 dark:text-collab-250"
+    },
+    {
+      color: "ai",
+      checked: true,
+      class: "ring-2 ring-ai-500 bg-ai-500 dark:ring-ai-600 dark:bg-ai-600 dark:text-ai-250"
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+};
+
+const chip = {
+  slots: {
+    root: "relative inline-flex items-center justify-center shrink-0",
+    base: "select-none rounded-sm flex items-center justify-center p-1 text-white leading-none font-semibold font-b24-secondary whitespace-nowrap"
+  },
+  variants: {
+    color: {
+      default: "bg-base-500 dark:bg-base-900 dark:text-base-150",
+      danger: "bg-red-500 dark:bg-red-600 dark:text-red-250",
+      success: "bg-green-500 dark:bg-green-600 dark:text-green-250",
+      warning: "bg-orange-500 dark:bg-orange-600 dark:text-orange-250",
+      primary: "bg-blue-500 dark:bg-blue-600 dark:text-blue-250",
+      secondary: "bg-cyan-350 dark:bg-cyan-500",
+      collab: "bg-collab-500 dark:bg-collab-800 dark:text-collab-250",
+      ai: "bg-ai-500 dark:bg-ai-800 dark:text-ai-250",
+      link: "bg-base-900/85 text-white dark:bg-white/85 dark:text-base-900"
+    },
+    size: {
+      "3xs": "h-1 min-w-1 text-[0px] text-transparent p-0",
+      "2xs": "h-1.5 min-w-1.5 text-[0px] text-transparent p-0",
+      "xs": "h-xs2 min-w-xs2 text-[0px] text-transparent  p-0",
+      "sm": "h-sm min-w-sm text-4xs font-regular",
+      "md": "h-md min-w-md text-3xs",
+      "lg": "h-lg min-w-lg rounded-md text-xs",
+      "xl": "h-lg min-w-lg rounded-md text-xs",
+      "2xl": "h-lg min-w-lg rounded-md text-xs",
+      "3xl": "h-lg min-w-lg rounded-md text-xs"
+    },
+    position: {
+      "top-right": "top-0 right-0",
+      "bottom-right": "bottom-0 right-0",
+      "top-left": "top-0 left-0",
+      "bottom-left": "bottom-0 left-0"
+    },
+    inset: {
+      false: ""
+    },
+    standalone: {
+      true: "",
+      false: "ring ring-white dark:ring-base-700 absolute"
+    }
+  },
+  compoundVariants: [
+    // not inset ////
+    {
+      position: "top-right",
+      inset: false,
+      standalone: false,
+      class: "-translate-y-1/2 translate-x-1/2 transform"
+    },
+    {
+      position: "bottom-right",
+      inset: false,
+      standalone: false,
+      class: "translate-y-1/2 translate-x-1/2 transform"
+    },
+    {
+      position: "top-left",
+      inset: false,
+      standalone: false,
+      class: "-translate-y-1/2 -translate-x-1/2 transform"
+    },
+    {
+      position: "bottom-left",
+      inset: false,
+      standalone: false,
+      class: "translate-y-1/2 -translate-x-1/2 transform"
+    },
+    // inset ////
+    {
+      position: "top-right",
+      size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
+      inset: true,
+      standalone: false,
+      class: "-translate-y-1/3 translate-x-1/3 transform"
+    },
+    {
+      position: "top-right",
+      size: ["2xs", "3xl"],
+      inset: true,
+      standalone: false,
+      class: "translate-y-0 translate-x-0 transform"
+    },
+    {
+      position: "bottom-right",
+      size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
+      inset: true,
+      standalone: false,
+      class: "translate-y-1/3 translate-x-1/3 transform"
+    },
+    {
+      position: "bottom-right",
+      size: ["2xs", "3xl"],
+      inset: true,
+      standalone: false,
+      class: "translate-y-0 translate-x-0 transform"
+    },
+    {
+      position: "top-left",
+      size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
+      inset: true,
+      standalone: false,
+      class: "-translate-y-1/3 -translate-x-1/3 transform"
+    },
+    {
+      position: "top-left",
+      size: ["2xs", "3xl"],
+      inset: true,
+      standalone: false,
+      class: "-translate-y-0 -translate-x-0 transform"
+    },
+    {
+      position: "bottom-left",
+      size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
+      inset: true,
+      standalone: false,
+      class: "translate-y-1/3 -translate-x-1/3 transform"
+    },
+    {
+      position: "bottom-left",
+      size: ["2xs", "3xl"],
+      inset: true,
+      standalone: false,
+      class: "translate-y-0 -translate-x-0 transform"
+    }
+  ],
+  defaultVariants: {
+    size: "sm",
+    color: "danger",
+    position: "top-right"
+  }
+};
+
+const container = {
+  base: "max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8"
+  // max-w-7xl w-full
+};
+
+const countdown = {
+  slots: {
+    base: [
+      "relative flex flex-row flex-nowrap items-center justify-between",
+      "text-base-500 dark:text-base-600"
+    ],
+    label: "",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    circleBase: "-scale-x-100 absolute inset-x-0 inset-y-0",
+    circleGroup: "fill-none stroke-none",
+    circleElement: "stroke-transparent stroke-1",
+    circlePath: [
+      "stroke-[7px] rotate-90 origin-center stroke-current transition-all duration-1000 ease-linear"
+    ]
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "gap-0.5 text-5xs leading-none",
+        leadingIcon: "size-sm",
+        leadingAvatarSize: "3xs"
+      },
+      sm: {
+        base: "gap-1 text-4xs leading-none",
+        leadingIcon: "size-sm2",
+        leadingAvatarSize: "3xs"
+      },
+      md: {
+        base: "gap-1 text-md leading-none",
+        leadingIcon: "size-[16px]",
+        leadingAvatarSize: "3xs"
+      },
+      lg: {
+        base: "gap-1 text-lg leading-none",
+        leadingIcon: "size-[22px]",
+        leadingAvatarSize: "2xs"
+      },
+      xl: {
+        base: "gap-1 text-xl leading-none",
+        leadingIcon: "size-[26px]",
+        leadingAvatarSize: "xs"
+      }
+    },
+    leading: {
+      true: ""
+    },
+    useCircle: {
+      true: {
+        base: "justify-center",
+        circleBase: "size-full"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: "xs",
+      useCircle: true,
+      class: "text-7xs leading-normal p-0.5"
+    },
+    {
+      size: "sm",
+      useCircle: true,
+      class: "text-6xs leading-normal p-1.5"
+    },
+    {
+      size: "md",
+      useCircle: true,
+      class: "text-3xs leading-normal p-1.5"
+    },
+    {
+      size: "lg",
+      useCircle: true,
+      class: "text-xs leading-normal p-1.5 pb-2"
+    },
+    {
+      size: "xl",
+      useCircle: true,
+      class: "text-sm leading-normal p-2 pb-2.5"
+    }
+  ],
+  defaultVariants: {
+    size: "md"
+  }
+};
+
+const form = {
+  base: ""
+};
+
+const formField = {
+  slots: {
+    root: "font-b24-system font-regular",
+    wrapper: "leading-none",
+    labelWrapper: "flex content-center items-center justify-between",
+    label: "block text-base-900 dark:text-base-400",
+    hint: "text-base-500 dark:text-base-600",
+    container: "relative",
+    description: "mt-0.5 leading-tight text-base-500 dark:text-base-600",
+    error: "mt-1 text-red-500 dark:text-red-600",
+    errorIcon: "size-lg",
+    help: "mt-1.5 leading-tight italic text-base-500 dark:text-base-600"
+  },
+  variants: {
+    useDescription: {
+      true: { wrapper: "mb-1.5" },
+      false: { wrapper: "mb-2.5" }
+    },
+    size: {
+      xs: { root: "text-xs", errorIcon: "size-md" },
+      sm: { root: "text-xs", errorIcon: "size-md" },
+      md: { root: "text-sm", errorIcon: "size-md2" },
+      lg: { root: "text-md" }
+    },
+    required: {
+      true: {
+        label: "after:content-['*'] after:ms-0.5 after:text-red-500 after:dark:text-red-600"
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: "md"
+  }
+};
+
+const input = {
+  slots: {
+    root: "relative inline-flex items-center w-full",
+    base: [
+      "w-full py-0 border-0 focus:outline-none",
+      "disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
+      "dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
+      "appearance-none transition duration-300 ease-linear",
+      // transition-colors
+      "ring ring-inset ring-base-300",
+      "dark:ring-base-800",
+      "text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
+      "dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
+      "font-b24-primary font-regular text-md leading-none",
+      "align-middle",
+      "text-ellipsis whitespace-nowrap"
+    ],
+    leading: "absolute inset-y-0 start-0 flex items-center",
+    leadingIcon: "shrink-0 text-base-400",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailing: "absolute inset-y-0 end-0 flex items-center",
+    trailingIcon: "shrink-0 text-base-400",
+    tag: [
+      "pointer-events-none select-none",
+      "absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center",
+      "font-b24-primary font-bold text-6xs leading-none uppercase rounded-full"
+    ]
+  },
+  variants: {
+    ...buttonGroupVariantWithRoot,
+    size: {
+      xs: {
+        base: "px-3 h-xl2 gap-1",
+        // 26px
+        leading: "px-1",
+        trailing: "px-1",
+        leadingIcon: "size-lg2",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-lg2"
+      },
+      sm: {
+        base: "px-3 h-8 gap-1.5",
+        // 32px
+        leading: "px-1.5",
+        trailing: "px-1.5",
+        leadingIcon: "size-lg2",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-lg2"
+      },
+      md: {
+        base: "px-3 h-10 gap-1.5",
+        // 40px
+        leading: "px-2",
+        trailing: "px-2",
+        leadingIcon: "size-[24px]",
+        leadingAvatarSize: "sm",
+        trailingIcon: "size-[24px]"
+      },
+      lg: {
+        base: "px-3 h-12 gap-2",
+        // 48px
+        leading: "px-2",
+        trailing: "px-2",
+        leadingIcon: "size-[24px]",
+        leadingAvatarSize: "md",
+        trailingIcon: "size-[24px]"
+      }
+    },
+    color: {
+      default: "",
+      danger: "",
+      success: "",
+      warning: "",
+      primary: "",
+      secondary: "",
+      collab: "",
+      ai: ""
+    },
+    tagColor: {
+      default: {
+        tag: "text-white bg-base-900 dark:text-base-150 dark:bg-base-900"
+      },
+      danger: {
+        tag: "text-white bg-red-500 dark:text-red-250 dark:bg-red-600"
+      },
+      success: {
+        tag: "text-white bg-green-500 dark:text-green-250 dark:bg-green-600"
+      },
+      warning: {
+        tag: "text-white bg-orange-500 dark:text-orange-250 dark:bg-orange-600"
+      },
+      primary: {
+        tag: "text-white bg-blue-500 dark:text-blue-250 dark:bg-blue-600"
+      },
+      secondary: {
+        tag: "text-white bg-cyan-350 dark:text-base-150 dark:bg-cyan-500"
+      },
+      collab: {
+        tag: "text-white bg-collab-500 dark:text-collab-200 dark:bg-collab-800"
+      },
+      ai: {
+        tag: "text-white bg-ai-500 dark:text-ai-200 dark:bg-ai-800"
+      }
+    },
+    rounded: {
+      true: "rounded-3xl",
+      false: "rounded-2xs"
+    },
+    noPadding: {
+      true: {
+        base: "px-0"
+      }
+    },
+    noBorder: {
+      true: "ring-0 focus-visible:ring-0"
+    },
+    underline: {
+      true: "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
+    },
+    leading: {
+      true: ""
+    },
+    trailing: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    highlight: {
+      true: ""
+    },
+    type: {
+      file: "file:me-1.5 file:text-base-500 file:outline-none"
+    }
+  },
+  compoundVariants: [
+    // region ring for focus and highlight ////
+    // region default ////
+    {
+      color: "default",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-base-900 dark:focus-visible:ring-base-350"
+    },
+    {
+      color: "default",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-base-900 dark:ring-base-350"
+    },
+    {
+      color: "default",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-base-900 dark:focus-visible:border-b-base-350"
+    },
+    {
+      color: "default",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-base-900 dark:border-b-base-350"
+    },
+    // endregion ////
+    // region danger ////
+    {
+      color: "danger",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-600"
+    },
+    {
+      color: "danger",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-red-500 dark:ring-red-600"
+    },
+    {
+      color: "danger",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-red-500 dark:focus-visible:border-b-red-600"
+    },
+    {
+      color: "danger",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-red-500 dark:border-b-red-600"
+    },
+    // endregion ////
+    // region success ////
+    {
+      color: "success",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-600"
+    },
+    {
+      color: "success",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-green-500 dark:ring-green-600"
+    },
+    {
+      color: "success",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-green-500 dark:focus-visible:border-b-green-600"
+    },
+    {
+      color: "success",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-green-500 dark:border-b-green-600"
+    },
+    // endregion ////
+    // region warning ////
+    {
+      color: "warning",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-600"
+    },
+    {
+      color: "warning",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-orange-500 dark:ring-orange-600"
+    },
+    {
+      color: "warning",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-orange-500 dark:focus-visible:border-b-orange-600"
+    },
+    {
+      color: "warning",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-orange-500 dark:border-b-orange-600"
+    },
+    // endregion ////
+    // region primary ////
+    {
+      color: "primary",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-600"
+    },
+    {
+      color: "primary",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-blue-500 dark:ring-blue-600"
+    },
+    {
+      color: "primary",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-blue-500 dark:focus-visible:border-b-blue-600"
+    },
+    {
+      color: "primary",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-blue-500 dark:border-b-blue-600"
+    },
+    // endregion ////
+    // region secondary ////
+    {
+      color: "secondary",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-350 dark:focus-visible:ring-cyan-500"
+    },
+    {
+      color: "secondary",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-cyan-350 dark:ring-cyan-500"
+    },
+    {
+      color: "secondary",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-cyan-350 dark:focus-visible:border-b-cyan-500"
+    },
+    {
+      color: "secondary",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-cyan-350 dark:border-b-cyan-500"
+    },
+    // endregion ////
+    // region collab ////
+    {
+      color: "collab",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-collab-500 dark:focus-visible:ring-collab-600"
+    },
+    {
+      color: "collab",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-collab-500 dark:ring-collab-600"
+    },
+    {
+      color: "collab",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-collab-500 dark:focus-visible:border-b-collab-600"
+    },
+    {
+      color: "collab",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-collab-500 dark:border-b-collab-600"
+    },
+    // endregion ////
+    // region ai ////
+    {
+      color: "ai",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ai-500 dark:focus-visible:ring-ai-600"
+    },
+    {
+      color: "ai",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-ai-500 dark:ring-ai-600"
+    },
+    {
+      color: "ai",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-ai-500 dark:focus-visible:border-b-ai-600"
+    },
+    {
+      color: "ai",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-ai-500 dark:border-b-ai-600"
+    },
+    // endregion ////
+    // endregion ////
+    // region type file ////
+    {
+      type: "file",
+      size: "xs",
+      class: "py-1.5"
+    },
+    {
+      type: "file",
+      size: "sm",
+      class: "py-2.5"
+    },
+    {
+      type: "file",
+      size: "md",
+      class: "py-3"
+    },
+    {
+      type: "file",
+      size: "lg",
+      class: "py-4"
+    },
+    // endregion ////
+    // region leading ////
+    {
+      leading: true,
+      size: "xs",
+      class: "ps-7"
+    },
+    {
+      leading: true,
+      size: "sm",
+      class: "ps-8"
+    },
+    {
+      leading: true,
+      size: "md",
+      class: "ps-[39px]"
+    },
+    {
+      leading: true,
+      size: "lg",
+      class: "ps-[42px]"
+    },
+    // endregion ////
+    // region trailing ////
+    {
+      trailing: true,
+      size: "xs",
+      class: "pe-7"
+    },
+    {
+      trailing: true,
+      size: "sm",
+      class: "pe-8"
+    },
+    {
+      trailing: true,
+      size: "md",
+      class: "pe-[39px]"
+    },
+    {
+      trailing: true,
+      size: "lg",
+      class: "pe-[39px]"
+    },
+    // endregion ////
+    // region loading ////
+    {
+      loading: true,
+      leading: true,
+      class: {
+        leadingIcon: "size-[21px]"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
+        trailingIcon: "size-[21px]"
+      }
+    }
+    // endregion ////
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    tagColor: "primary"
+  }
+};
+
+const kbd = {
+  base: "inline-flex items-center justify-center px-1 rounded-2xs font-normal font-b24-system-mono",
+  variants: {
+    depth: {
+      light: [
+        "ring ring-inset",
+        "text-base-900 bg-base-800/5 ring-base-800/20",
+        "dark:text-base-150 dark:bg-base-200/5 dark:ring-base-200/20"
+      ].join(" "),
+      normal: [
+        "ring ring-inset",
+        "text-base-800 bg-base-150 ring-base-150",
+        "dark:text-base-950 dark:bg-base-200 dark:ring-base-200"
+      ].join(" "),
+      dark: [
+        "ring ring-inset",
+        "text-white bg-base-500 ring-base-500",
+        "dark:text-base-50 dark:bg-base-600 dark:ring-base-600"
+      ].join(" ")
+    },
+    size: {
+      sm: "h-[20px] min-w-[20px] text-[10px] leading-none",
+      md: "h-[24px] min-w-[24px] text-[14px] leading-none",
+      lg: "h-[28px] min-w-[28px] text-[18px] leading-none"
+    }
+  },
+  defaultVariants: {
+    depth: "light",
+    size: "md"
+  }
+};
+
+const link = (options) => ({
+  base: "cursor-pointer focus-visible:outline-info-text",
+  variants: {
+    active: {
+      true: "text-blue-700 dark:text-blue-300 hover:not-disabled:not-aria-disabled:underline underline-offset-2",
+      false: [
+        "text-base-900 hover:not-disabled:not-aria-disabled:text-blue-700",
+        "dark:text-base-300 dark:hover:not-disabled:not-aria-disabled:text-blue-300",
+        "hover:not-disabled:not-aria-disabled:underline underline-offset-2",
+        "transition-colors"
+      ]
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-75"
+    },
+    isAction: {
+      true: [
+        "text-nowrap",
+        "text-sm h-auto py-0 font-normal rounded-none",
+        "border border-x-0 border-t-0 border-dashed border-b-base-900",
+        "text-base-900 dark:text-base-300 ",
+        "dark:border-b-base-300",
+        "hover:not-disabled:not-aria-disabled:no-underline",
+        "hover:text-blue-700 hover:not-disabled:not-aria-disabled:text-blue-700 hover:border-b-blue-700",
+        "dark:hover:text-blue-300 dark:hover:not-disabled:not-aria-disabled:text-blue-300 dark:hover:border-b-blue-300",
+        "focus-visible:outline-base-700"
+      ].join(" ")
+    }
+  }
+});
+
+const progress = {
+  slots: {
+    root: "gap-2",
+    base: "relative overflow-hidden rounded-full bg-base-200 dark:bg-base-800",
+    indicator: "rounded-full size-full transition-transform duration-200 ease-out",
+    status: "flex justify-end text-base-500 dark:text-base-600 transition-[width] duration-200",
+    steps: "grid items-end",
+    step: "truncate text-end row-start-1 col-start-1 transition-opacity"
+  },
+  variants: {
+    animation: {
+      "loading": "",
+      "carousel": "",
+      "carousel-inverse": "",
+      "swing": "",
+      "elastic": ""
+    },
+    color: {
+      default: {
+        indicator: "bg-base-900 dark:bg-base-100",
+        steps: "text-base-500"
+      },
+      danger: {
+        indicator: "bg-red-500 dark:bg-red-600",
+        steps: "text-base-500"
+      },
+      success: {
+        indicator: "bg-green-500 dark:bg-green-600",
+        steps: "text-base-500"
+      },
+      warning: {
+        indicator: "bg-orange-500 dark:bg-orange-600",
+        steps: "text-base-500"
+      },
+      primary: {
+        indicator: "bg-blue-500 dark:bg-blue-600",
+        steps: "text-base-500"
+      },
+      secondary: {
+        indicator: "bg-cyan-350 dark:bg-cyan-500",
+        steps: "text-base-500"
+      },
+      collab: {
+        indicator: "bg-collab-500 dark:bg-collab-600",
+        steps: "text-base-500"
+      },
+      ai: {
+        indicator: "bg-ai-500 dark:bg-ai-900/85",
+        steps: "text-base-500"
+      }
+    },
+    size: {
+      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"
+      }
+    },
+    step: {
+      active: {
+        step: "opacity-100"
+      },
+      first: {
+        step: "opacity-100 text-base-500 dark:text-base-600"
+      },
+      other: {
+        step: "opacity-0"
+      },
+      last: {
+        step: ""
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full flex flex-col",
+        base: "w-full",
+        status: "flex-row"
+      },
+      vertical: {
+        root: "h-full flex flex-row-reverse",
+        base: "h-full",
+        status: "flex-col min-w-[32px]"
+      }
+    },
+    inverted: {
+      true: {
+        status: "self-end"
+      }
+    }
+  },
+  compoundVariants: [
+    // region base ////
+    {
+      inverted: true,
+      orientation: "horizontal",
+      class: {
+        step: "text-start",
+        status: "flex-row-reverse"
+      }
+    },
+    {
+      inverted: true,
+      orientation: "vertical",
+      class: {
+        steps: "items-start",
+        status: "flex-col-reverse"
+      }
+    },
+    // endregion ////
+    // region horizontal ////
+    {
+      orientation: "horizontal",
+      size: "2xs",
+      class: "h-px"
+    },
+    {
+      orientation: "horizontal",
+      size: "xs",
+      class: "h-0.5"
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      class: "h-1"
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      class: "h-2"
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      class: "h-3"
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      class: "h-4"
+    },
+    {
+      orientation: "horizontal",
+      size: "2xl",
+      class: "h-5"
+    },
+    // endregion ////
+    // region vertical ////
+    {
+      orientation: "vertical",
+      size: "2xs",
+      class: "w-px"
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      class: "w-0.5"
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      class: "w-1"
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      class: "w-2"
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      class: "w-3"
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      class: "w-4"
+    },
+    {
+      orientation: "vertical",
+      size: "2xl",
+      class: "w-5"
+    },
+    // endregion ////
+    // region animation ////
+    {
+      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]"
+      }
+    },
+    {
+      orientation: "horizontal",
+      animation: "loading",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"
+      }
+    },
+    {
+      orientation: "vertical",
+      animation: "loading",
+      class: {
+        indicator: "data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]"
+      }
+    }
+    // endregion ////
+  ],
+  defaultVariants: {
+    animation: "loading",
+    color: "primary",
+    size: "md"
+  }
+};
+
+const radioGroup = {
+  slots: {
+    root: "relative",
+    fieldset: "flex",
+    legend: "mb-1.5 block font-medium text-base-master dark:text-base-400",
+    item: "flex items-start",
+    base: "cursor-pointer rounded-full ring ring-inset ring-base-300 dark:ring-base-700 focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: " flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-base-dark after:rounded-full",
+    container: "flex items-center",
+    wrapper: "font-b24-primary font-regular ms-2",
+    label: "cursor-pointer block text-base-master dark:text-base-400",
+    description: "text-base-500 dark:text-base-600"
+  },
+  variants: {
+    color: {
+      default: {
+        base: "focus-visible:outline-base-900 dark:focus-visible:outline-base-900",
+        indicator: "bg-base-900 dark:bg-base-350"
+      },
+      danger: {
+        base: "focus-visible:outline-red-500 dark:focus-visible:outline-red-600",
+        indicator: "bg-red-500 dark:bg-red-600"
+      },
+      success: {
+        base: "focus-visible:outline-green-500 dark:focus-visible:outline-green-600",
+        indicator: "bg-green-500 dark:bg-green-600"
+      },
+      warning: {
+        base: "focus-visible:outline-orange-500 dark:focus-visible:outline-orange-600",
+        indicator: "bg-orange-500 dark:bg-orange-600"
+      },
+      primary: {
+        base: "focus-visible:outline-blue-500 dark:focus-visible:outline-blue-600",
+        indicator: "bg-blue-500 dark:bg-blue-600"
+      },
+      secondary: {
+        base: "focus-visible:outline-cyan-350 dark:focus-visible:outline-cyan-500",
+        indicator: "bg-cyan-350 dark:bg-cyan-500"
+      },
+      collab: {
+        base: "focus-visible:outline-collab-500 dark:focus-visible:outline-collab-600",
+        indicator: "bg-collab-500 dark:bg-collab-600"
+      },
+      ai: {
+        base: "focus-visible:outline-ai-500 dark:focus-visible:outline-ai-600",
+        indicator: "bg-ai-500 dark:bg-ai-600"
+      }
+    },
+    orientation: {
+      horizontal: {
+        fieldset: "flex-row",
+        wrapper: "me-2"
+      },
+      vertical: {
+        fieldset: "flex-col"
+      }
+    },
+    size: {
+      xs: {
+        fieldset: "gap-1",
+        legend: "text-xs",
+        base: "size-3",
+        item: "text-xs",
+        label: "leading-4",
+        container: "h-4",
+        indicator: "after:size-1"
+      },
+      sm: {
+        fieldset: "gap-1.5",
+        legend: "text-xs",
+        base: "size-3.5",
+        item: "text-sm",
+        label: "leading-4",
+        container: "h-4",
+        indicator: "after:size-1"
+      },
+      md: {
+        fieldset: "gap-1",
+        legend: "text-sm",
+        base: "size-4",
+        item: "text-md",
+        label: "leading-5",
+        container: "h-5",
+        indicator: "after:size-1.5"
+      },
+      lg: {
+        fieldset: "gap-1.5",
+        legend: "text-sm",
+        base: "size-5",
+        item: "text-xl",
+        label: "leading-5",
+        container: "h-5",
+        indicator: "after:size-2"
+      }
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75",
+        label: "cursor-not-allowed opacity-75"
+      }
+    },
+    required: {
+      true: {
+        label: "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+};
+
+const range = {
+  slots: {
+    root: "relative flex items-center select-none touch-none",
+    track: "relative bg-base-200 dark:bg-base-800 overflow-hidden rounded-full grow",
+    range: "absolute rounded-full",
+    thumb: "rounded-full bg-white dark:bg-base-100 ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
+  },
+  variants: {
+    color: {
+      default: {
+        range: "bg-base-900 dark:bg-base-350",
+        thumb: "ring-base-900 dark:ring-base-400 focus-visible:outline-base-900/50 dark:focus-visible:outline-base-700/50"
+      },
+      danger: {
+        range: "bg-red-500 dark:bg-red-600",
+        thumb: "ring-red-500 dark:ring-red-600 focus-visible:outline-red-500/50 dark:focus-visible:outline-red-600/50"
+      },
+      success: {
+        range: "bg-green-500 dark:bg-green-600",
+        thumb: "ring-green-500 dark:ring-green-600 focus-visible:outline-green-500/50 dark:focus-visible:outline-green-600/50"
+      },
+      warning: {
+        range: "bg-orange-500 dark:bg-orange-600",
+        thumb: "ring-orange-500 dark:ring-orange-600 focus-visible:outline-orange-500/50 dark:focus-visible:outline-orange-600/50"
+      },
+      primary: {
+        range: "bg-blue-500 dark:bg-blue-600",
+        thumb: "ring-blue-500 dark:ring-blue-600 focus-visible:outline-blue-500/50 dark:focus-visible:outline-blue-600/50"
+      },
+      secondary: {
+        range: "bg-cyan-350 dark:bg-cyan-500",
+        thumb: "ring-cyan-350 dark:ring-cyan-500 focus-visible:outline-cyan-350/50 dark:focus-visible:outline-cyan-500/50"
+      },
+      collab: {
+        range: "bg-collab-500 dark:bg-collab-600",
+        thumb: "ring-collab-500 dark:ring-collab-600 focus-visible:outline-collab-500/50 dark:focus-visible:outline-collab-600/50"
+      },
+      ai: {
+        range: "bg-ai-500 dark:bg-ai-600",
+        thumb: "ring-ai-500 dark:ring-ai-600 focus-visible:outline-ai-500/50 dark:focus-visible:outline-ai-600/50"
+      }
+    },
+    size: {
+      xs: {
+        thumb: "size-3"
+      },
+      sm: {
+        thumb: "size-3.5"
+      },
+      md: {
+        thumb: "size-4"
+      },
+      lg: {
+        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: [
+    // region horizontal ////
+    {
+      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]"
+      }
+    },
+    // endregion ////
+    // region vertical ////
+    {
+      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]"
+      }
+    }
+    // endregion ////
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+};
+
+const defSize = {
+  label: "h-9 ps-2 pe-3 text-sm gap-2",
+  item: "h-9 ps-3 pe-3 text-sm gap-2",
+  itemLeadingIcon: "size-5",
+  itemLeadingAvatarSize: "2xs",
+  itemLeadingChip: "size-3 not-group-data-reka-collection-item:ps-2.5",
+  itemLeadingChipSize: "sm",
+  itemTrailingIcon: "size-3",
+  scrollUpDownButtonIcon: "size-4",
+  trailingIcon: "size-lg2"
+};
+const select = () => {
+  return defuFn(
+    {
+      slots: {
+        root: () => "relative inline-flex items-center min-w-full w-full",
+        base: () => [
+          "relative inline-flex items-center group",
+          "min-w-full w-full py-0 border-0 focus:outline-none",
+          "cursor-pointer disabled:cursor-not-allowed",
+          "disabled:bg-base-30/37 disabled:text-base-500",
+          "dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
+          "appearance-none transition duration-300 ease-linear",
+          // transition-colors
+          "ring ring-inset ring-base-300",
+          "dark:ring-base-800",
+          "text-base-master bg-white hover:text-base-900 focus:text-base-900 active:text-base-900",
+          "dark:text-base-150 dark:bg-transparent dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
+          "font-b24-primary font-regular text-sm",
+          "align-middle",
+          "text-ellipsis whitespace-nowrap"
+        ],
+        value: "truncate pointer-events-none",
+        placeholder: "truncate text-base-400 dark:text-base-300",
+        arrow: "fill-base-master/10 dark:fill-base-100/20",
+        content: [
+          "max-h-60 w-[var(--reka-popper-anchor-width)]",
+          "bg-white dark:bg-base-dark",
+          "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
+          "overflow-hidden",
+          "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+          "pointer-events-auto"
+        ],
+        scrollUpDownButton: [
+          "flex items-center justify-center h-[25px] cursor-default backdrop-blur",
+          "text-base-800 bg-white",
+          "dark:text-base-100 dark:bg-base-dark"
+        ],
+        scrollUpDownButtonIcon: "",
+        viewport: "divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1",
+        group: "p-1 isolate",
+        empty: "py-2 text-center text-sm text-base-500 dark:text-base-600",
+        label: [
+          "flex items-center",
+          "font-semibold text-base-900 dark:text-base-200"
+        ],
+        separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
+        item: [
+          "group relative w-full flex items-center select-none outline-none",
+          "before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
+          "cursor-pointer",
+          "data-disabled:cursor-not-allowed data-disabled:opacity-75",
+          "text-base-master dark:text-base-150 data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
+          "transition-colors before:transition-colors"
+        ],
+        itemLeadingIcon: [
+          "shrink-0 text-base-500 dark:text-base-700 group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
+          "transition-colors"
+        ],
+        itemLeadingAvatar: "shrink-0",
+        itemLeadingAvatarSize: "",
+        itemLeadingChip: "shrink-0",
+        itemLeadingChipSize: "",
+        itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+        itemTrailingIcon: "shrink-0",
+        itemLabel: "truncate"
+      },
+      variants: {
+        ...buttonGroupVariantWithRoot,
+        size: {
+          xs: defSize,
+          sm: defSize,
+          md: defSize,
+          lg: defSize
+        }
+      }
+    },
+    input
+  );
+};
+
+const separator = {
+  slots: {
+    root: "flex items-center align-center text-center",
+    border: "",
+    container: "font-b24-primary font-normal text-base-500 flex",
+    icon: "shrink-0 size-7",
+    avatar: "shrink-0",
+    avatarSize: "sm",
+    label: "text-sm"
+  },
+  variants: {
+    color: {
+      default: { border: "border-base-master/10 dark:border-base-100/20" },
+      danger: { border: "border-red-500 dark:border-red-600" },
+      success: { border: "border-green-500 dark:border-green-600" },
+      warning: { border: "border-orange-500 dark:border-orange-600" },
+      primary: { border: "border-blue-500 dark:border-blue-600" },
+      secondary: { border: "border-cyan-350 dark:border-cyan-500" },
+      collab: { border: "border-collab-500 dark:border-collab-600" },
+      ai: { border: "border-ai-500 dark:border-ai-600" }
+    },
+    orientation: {
+      horizontal: {
+        root: "w-full flex-row",
+        border: "w-full",
+        container: "mx-3 whitespace-nowrap"
+      },
+      vertical: {
+        root: "h-full flex-col",
+        border: "h-full",
+        container: "my-2"
+      }
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    },
+    type: {
+      solid: {
+        border: "border-solid"
+      },
+      dashed: {
+        border: "border-dashed"
+      },
+      dotted: {
+        border: "border-dotted"
+      }
+    }
+  },
+  compoundVariants: [
+    // region horizontal ////
+    {
+      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]" }
+    },
+    // endregion ////
+    // region vertical ////
+    {
+      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]" }
+    }
+    // endregion ////
+  ],
+  defaultVariants: {
+    color: "default",
+    size: "xs",
+    type: "solid"
+  }
+};
+
+const skeleton = {
+  base: "animate-pulse rounded-md bg-gray-200 dark:bg-gray-800"
+};
+
+const _switch = {
+  slots: {
+    root: "relative flex items-start",
+    base: ["cursor-pointer inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-base-200 dark:data-[state=unchecked]:bg-base-800", "transition-colors duration-200"],
+    container: "flex items-center",
+    thumb: "group pointer-events-none rounded-full bg-white dark:bg-base-100 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-base-400 dark:group-data-[state=unchecked]:text-base-700 opacity-0 p-0.5 size-10/10", "transition-[color,opacity] duration-200"],
+    wrapper: "font-b24-primary font-regular ms-2",
+    label: "cursor-pointer block text-base-master dark:text-base-400",
+    description: "text-base-500 dark:text-base-600"
+  },
+  variants: {
+    color: {
+      default: {
+        base: "data-[state=checked]:bg-base-900 focus-visible:outline-base-900 dark:data-[state=checked]:bg-base-100 dark:focus-visible:outline-base-100",
+        icon: "group-data-[state=checked]:text-base-900 dark:group-data-[state=checked]:text-base-900",
+        thumb: "dark:data-[state=checked]:bg-base-master"
+      },
+      danger: {
+        base: "data-[state=checked]:bg-red-500 focus-visible:outline-red-500 dark:data-[state=checked]:bg-red-600 dark:focus-visible:outline-red-600",
+        icon: "group-data-[state=checked]:text-red-500 dark:group-data-[state=checked]:text-red-600"
+      },
+      success: {
+        base: "data-[state=checked]:bg-green-500 focus-visible:outline-green-500 dark:data-[state=checked]:bg-green-600 dark:focus-visible:outline-green-600",
+        icon: "group-data-[state=checked]:text-green-500 dark:group-data-[state=checked]:text-green-600"
+      },
+      warning: {
+        base: "data-[state=checked]:bg-orange-500 focus-visible:outline-orange-500 dark:data-[state=checked]:bg-orange-600 dark:focus-visible:outline-orange-600",
+        icon: "group-data-[state=checked]:text-orange-500 dark:group-data-[state=checked]:text-orange-600"
+      },
+      primary: {
+        base: "data-[state=checked]:bg-blue-500 focus-visible:outline-blue-500 dark:data-[state=checked]:bg-blue-600 dark:focus-visible:outline-blue-600",
+        icon: "group-data-[state=checked]:text-blue-500 dark:group-data-[state=checked]:text-blue-600"
+      },
+      secondary: {
+        base: "data-[state=checked]:bg-cyan-350 focus-visible:outline-cyan-350 dark:data-[state=checked]:bg-cyan-500 dark:focus-visible:outline-cyan-500",
+        icon: "group-data-[state=checked]:text-cyan-350 dark:group-data-[state=checked]:text-cyan-500"
+      },
+      collab: {
+        base: "data-[state=checked]:bg-collab-500 focus-visible:outline-collab-500 dark:data-[state=checked]:bg-collab-600 dark:focus-visible:outline-collab-600",
+        icon: "group-data-[state=checked]:text-collab-500 dark:group-data-[state=checked]:text-collab-600"
+      },
+      ai: {
+        base: "data-[state=checked]:bg-ai-500 focus-visible:outline-ai-500 dark:data-[state=checked]:bg-ai-600 dark:focus-visible:outline-ai-600",
+        icon: "group-data-[state=checked]:text-ai-500 dark:group-data-[state=checked]:text-ai-600"
+      }
+    },
+    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",
+        label: "leading-4"
+      },
+      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-sm",
+        label: "leading-4"
+      },
+      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-md",
+        label: "leading-5"
+      },
+      lg: {
+        base: "w-10",
+        container: "h-5",
+        thumb: "size-5 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
+        wrapper: "text-xl",
+        label: "leading-5"
+      }
+    },
+    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-red-500 dark:after:text-red-600"
+      }
+    },
+    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 tabs = {
+  slots: {
+    root: "flex items-center gap-2",
+    list: "relative flex p-1 group",
+    indicator: "absolute transition-[translate,width] duration-200",
+    trigger: [
+      "group relative inline-flex items-center shrink-0 min-w-0",
+      "data-[state=inactive]:text-base-600 dark:data-[state=inactive]:text-base-600",
+      "hover:data-[state=inactive]:not-disabled:text-base-master dark:hover:data-[state=inactive]:not-disabled:text-base-150",
+      "font-medium rounded-xl",
+      "cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden",
+      "transition-colors"
+    ],
+    content: "focus:outline-none w-full",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    label: ""
+  },
+  variants: {
+    color: {
+      default: "",
+      danger: "",
+      success: "",
+      warning: "",
+      primary: "",
+      secondary: "",
+      collab: "",
+      ai: ""
+    },
+    variant: {
+      pill: {
+        list: "bg-base-100 dark:bg-transparent rounded-md",
+        trigger: "flex-1 w-full",
+        indicator: "rounded-xl shadow-xs"
+      },
+      link: {
+        list: "border-base-300 dark:border-base-800",
+        indicator: "rounded-full"
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        list: "w-full",
+        indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]",
+        trigger: "justify-center"
+      },
+      vertical: {
+        list: "flex-col",
+        indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--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: [
+    // region orientation ////
+    // region orientation horizontal.pill ////
+    {
+      orientation: "horizontal",
+      variant: "pill",
+      class: {
+        indicator: "inset-y-1"
+      }
+    },
+    // endregion ////
+    // region orientation horizontal.link ////
+    {
+      orientation: "horizontal",
+      variant: "link",
+      class: {
+        list: "border-b -mb-px",
+        indicator: "-bottom-px h-px"
+      }
+    },
+    // endregion ////
+    // region orientation vertical.pill ////
+    {
+      orientation: "vertical",
+      variant: "pill",
+      class: {
+        indicator: "inset-x-1",
+        list: "items-center"
+      }
+    },
+    // endregion ////
+    // region orientation vertical.link ////
+    {
+      orientation: "vertical",
+      variant: "link",
+      class: {
+        list: "border-s -ms-px",
+        indicator: "-start-px w-px"
+      }
+    },
+    // endregion ////
+    // endregion ////
+    // region color ////
+    // region color.default ////
+    {
+      color: "default",
+      variant: "pill",
+      class: {
+        indicator: "bg-base-900 dark:bg-base-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-base-900",
+          "dark:data-[state=active]:text-base-200 dark:focus-visible:outline-base-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "default",
+      variant: "link",
+      class: {
+        indicator: "bg-base-900 dark:dark:bg-base-350",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-base-900 focus-visible:ring-base-900",
+          "dark:data-[state=active]:text-base-350 dark:focus-visible:ring-base-350"
+        ]
+      }
+    },
+    // endregion ////
+    // region color.danger ////
+    {
+      color: "danger",
+      variant: "pill",
+      class: {
+        indicator: "bg-red-900 dark:bg-red-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-red-900",
+          "dark:data-[state=active]:text-red-200 dark:focus-visible:outline-red-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "danger",
+      variant: "link",
+      class: {
+        indicator: "bg-red-900 dark:dark:bg-red-300",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-red-900 focus-visible:ring-red-900",
+          "dark:data-[state=active]:text-red-300 dark:focus-visible:ring-red-300"
+        ]
+      }
+    },
+    // endregion ////
+    // region color.success ////
+    {
+      color: "success",
+      variant: "pill",
+      class: {
+        indicator: "bg-green-900 dark:bg-green-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-green-900",
+          "dark:data-[state=active]:text-green-200 dark:focus-visible:outline-green-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "success",
+      variant: "link",
+      class: {
+        indicator: "bg-green-900 dark:dark:bg-green-300",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-green-900 focus-visible:ring-green-900",
+          "dark:data-[state=active]:text-green-300 dark:focus-visible:ring-green-300"
+        ]
+      }
+    },
+    // endregion ////
+    // region color.warning ////
+    {
+      color: "warning",
+      variant: "pill",
+      class: {
+        indicator: "bg-orange-900 dark:bg-orange-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-orange-900",
+          "dark:data-[state=active]:text-orange-200 dark:focus-visible:outline-orange-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "warning",
+      variant: "link",
+      class: {
+        indicator: "bg-orange-900 dark:dark:bg-orange-300",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-orange-900 focus-visible:ring-orange-900",
+          "dark:data-[state=active]:text-orange-300 dark:focus-visible:ring-orange-300"
+        ]
+      }
+    },
+    // endregion ////
+    // region color.primary ////
+    {
+      color: "primary",
+      variant: "pill",
+      class: {
+        indicator: "bg-blue-900 dark:bg-blue-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-blue-900",
+          "dark:data-[state=active]:text-blue-200 dark:focus-visible:outline-blue-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "primary",
+      variant: "link",
+      class: {
+        indicator: "bg-blue-900 dark:dark:bg-blue-300",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-blue-900 focus-visible:ring-blue-900",
+          "dark:data-[state=active]:text-blue-300 dark:focus-visible:ring-blue-300"
+        ]
+      }
+    },
+    // endregion ////
+    // region color.secondary ////
+    {
+      color: "secondary",
+      variant: "pill",
+      class: {
+        indicator: "bg-cyan-900 dark:bg-cyan-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-cyan-900",
+          "dark:data-[state=active]:text-cyan-200 dark:focus-visible:outline-cyan-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "secondary",
+      variant: "link",
+      class: {
+        indicator: "bg-cyan-900 dark:dark:bg-cyan-300",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-cyan-900 focus-visible:ring-cyan-900",
+          "dark:data-[state=active]:text-cyan-300 dark:focus-visible:ring-cyan-300"
+        ]
+      }
+    },
+    // endregion ////
+    // region color.collab ////
+    {
+      color: "collab",
+      variant: "pill",
+      class: {
+        indicator: "bg-collab-900 dark:bg-collab-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-collab-900",
+          "dark:data-[state=active]:text-collab-200 dark:focus-visible:outline-collab-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "collab",
+      variant: "link",
+      class: {
+        indicator: "bg-collab-900 dark:dark:bg-collab-300",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-collab-900 focus-visible:ring-collab-900",
+          "dark:data-[state=active]:text-collab-300 dark:focus-visible:ring-collab-300"
+        ]
+      }
+    },
+    // endregion ////
+    // region color.ai ////
+    {
+      color: "ai",
+      variant: "pill",
+      class: {
+        indicator: "bg-ai-900 dark:bg-ai-900",
+        trigger: [
+          "data-[state=active]:text-white focus-visible:outline-ai-900",
+          "dark:data-[state=active]:text-ai-200 dark:focus-visible:outline-ai-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2]"
+        ]
+      }
+    },
+    {
+      color: "ai",
+      variant: "link",
+      class: {
+        indicator: "bg-ai-900 dark:dark:bg-ai-300",
+        trigger: [
+          "focus-visible:ring-2 focus-visible:ring-inset",
+          "data-[state=active]:text-ai-900 focus-visible:ring-ai-900",
+          "dark:data-[state=active]:text-ai-300 dark:focus-visible:ring-ai-300"
+        ]
+      }
+    }
+    // endregion ////
+    // endregion ////
+  ],
+  defaultVariants: {
+    color: "default",
+    variant: "link",
+    size: "md"
+  }
+};
+
+const textarea = {
+  slots: {
+    root: "relative inline-flex items-center w-full",
+    base: [
+      "w-full px-3 py-1.5 border-0 focus:outline-none",
+      "disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
+      "dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
+      "appearance-none transition duration-300 ease-linear",
+      // transition-colors
+      "ring ring-inset ring-base-300",
+      "dark:ring-base-800",
+      "text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
+      "dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
+      "font-b24-primary font-regular text-md leading-normal",
+      "align-middle"
+    ],
+    tag: [
+      "pointer-events-none select-none",
+      "absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center",
+      "font-b24-primary font-bold text-6xs leading-none uppercase rounded-full"
+    ]
+  },
+  variants: {
+    ...buttonGroupVariantWithRoot,
+    color: {
+      default: "",
+      danger: "",
+      success: "",
+      warning: "",
+      primary: "",
+      secondary: "",
+      collab: "",
+      ai: ""
+    },
+    tagColor: {
+      default: {
+        tag: "text-white bg-base-900 dark:text-base-150 dark:bg-base-900"
+      },
+      danger: {
+        tag: "text-white bg-red-500 dark:text-red-250 dark:bg-red-600"
+      },
+      success: {
+        tag: "text-white bg-green-500 dark:text-green-250 dark:bg-green-600"
+      },
+      warning: {
+        tag: "text-white bg-orange-500 dark:text-orange-250 dark:bg-orange-600"
+      },
+      primary: {
+        tag: "text-white bg-blue-500 dark:text-blue-250 dark:bg-blue-600"
+      },
+      secondary: {
+        tag: "text-white bg-cyan-350 dark:text-base-150 dark:bg-cyan-500"
+      },
+      collab: {
+        tag: "text-white bg-collab-500 dark:text-collab-200 dark:bg-collab-800"
+      },
+      ai: {
+        tag: "text-white bg-ai-500 dark:text-ai-200 dark:bg-ai-800"
+      }
+    },
+    rounded: {
+      true: "rounded-3xl",
+      false: "rounded-2xs"
+    },
+    noPadding: {
+      true: {
+        base: "px-0"
+      }
+    },
+    noBorder: {
+      true: "ring-0 focus-visible:ring-0"
+    },
+    underline: {
+      true: "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
+    },
+    highlight: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    // region ring for focus and highlight ////
+    // region default ////
+    {
+      color: "default",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-base-900 dark:focus-visible:ring-base-350"
+    },
+    {
+      color: "default",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-base-900 dark:ring-base-350"
+    },
+    {
+      color: "default",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-base-900 dark:focus-visible:border-b-base-350"
+    },
+    {
+      color: "default",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-base-900 dark:border-b-base-350"
+    },
+    // endregion ////
+    // region danger ////
+    {
+      color: "danger",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-600"
+    },
+    {
+      color: "danger",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-red-500 dark:ring-red-600"
+    },
+    {
+      color: "danger",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-red-500 dark:focus-visible:border-b-red-600"
+    },
+    {
+      color: "danger",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-red-500 dark:border-b-red-600"
+    },
+    // endregion ////
+    // region success ////
+    {
+      color: "success",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-600"
+    },
+    {
+      color: "success",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-green-500 dark:ring-green-600"
+    },
+    {
+      color: "success",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-green-500 dark:focus-visible:border-b-green-600"
+    },
+    {
+      color: "success",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-green-500 dark:border-b-green-600"
+    },
+    // endregion ////
+    // region warning ////
+    {
+      color: "warning",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-600"
+    },
+    {
+      color: "warning",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-orange-500 dark:ring-orange-600"
+    },
+    {
+      color: "warning",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-orange-500 dark:focus-visible:border-b-orange-600"
+    },
+    {
+      color: "warning",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-orange-500 dark:border-b-orange-600"
+    },
+    // endregion ////
+    // region primary ////
+    {
+      color: "primary",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-600"
+    },
+    {
+      color: "primary",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-blue-500 dark:ring-blue-600"
+    },
+    {
+      color: "primary",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-blue-500 dark:focus-visible:border-b-blue-600"
+    },
+    {
+      color: "primary",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-blue-500 dark:border-b-blue-600"
+    },
+    // endregion ////
+    // region secondary ////
+    {
+      color: "secondary",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-350 dark:focus-visible:ring-cyan-500"
+    },
+    {
+      color: "secondary",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-cyan-350 dark:ring-cyan-500"
+    },
+    {
+      color: "secondary",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-cyan-350 dark:focus-visible:border-b-cyan-500"
+    },
+    {
+      color: "secondary",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-cyan-350 dark:border-b-cyan-500"
+    },
+    // endregion ////
+    // region collab ////
+    {
+      color: "collab",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-collab-500 dark:focus-visible:ring-collab-600"
+    },
+    {
+      color: "collab",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-collab-500 dark:ring-collab-600"
+    },
+    {
+      color: "collab",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-collab-500 dark:focus-visible:border-b-collab-600"
+    },
+    {
+      color: "collab",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-collab-500 dark:border-b-collab-600"
+    },
+    // endregion ////
+    // region ai ////
+    {
+      color: "ai",
+      noBorder: false,
+      underline: false,
+      class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ai-500 dark:focus-visible:ring-ai-600"
+    },
+    {
+      color: "ai",
+      highlight: true,
+      noBorder: false,
+      underline: false,
+      class: "ring ring-inset ring-ai-500 dark:ring-ai-600"
+    },
+    {
+      color: "ai",
+      noBorder: false,
+      underline: true,
+      class: "focus-visible:border-b-ai-500 dark:focus-visible:border-b-ai-600"
+    },
+    {
+      color: "ai",
+      highlight: true,
+      noBorder: false,
+      underline: true,
+      class: "border-b-ai-500 dark:border-b-ai-600"
+    }
+    // endregion ////
+    // endregion ////
+  ],
+  defaultVariants: {
+    color: "primary",
+    tagColor: "primary"
+  }
+};
+
+const toast = {
+  slots: {
+    root: [
+      "relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex gap-2.5 focus:outline-none",
+      "font-b24-primary",
+      "dark:ring-2 dark:ring-base-900",
+      "bg-base-ebony/80 dark:bg-base-dark",
+      "text-sm font-normal",
+      "text-white dark:text-base-150"
+    ],
+    wrapper: "w-0 flex-1 flex flex-col gap-1",
+    title: "font-medium",
+    description: "",
+    icon: "shrink-0 size-6",
+    avatar: "shrink-0",
+    avatarSize: "xl",
+    actions: "flex gap-1.5 shrink-0",
+    progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
+    close: "p-0.5 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
+  },
+  variants: {
+    color: {
+      default: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-base-400 dark:focus-visible:ring-base-400",
+        icon: "text-white",
+        progress: "bg-base-350 dark:bg-base-350"
+      },
+      danger: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-400 dark:focus-visible:ring-red-400",
+        icon: "text-red-500",
+        progress: "bg-red-500 dark:bg-red-500"
+      },
+      success: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-400 dark:focus-visible:ring-green-400",
+        icon: "text-green-500",
+        progress: "bg-green-500 dark:bg-green-500"
+      },
+      warning: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-400 dark:focus-visible:ring-orange-400",
+        icon: "text-orange-500",
+        progress: "bg-orange-500 dark:bg-orange-500"
+      },
+      primary: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400 dark:focus-visible:ring-blue-400",
+        icon: "text-blue-500",
+        progress: "bg-blue-500 dark:bg-blue-500"
+      },
+      secondary: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-400 dark:focus-visible:ring-cyan-400",
+        icon: "text-cyan-500",
+        progress: "bg-cyan-500 dark:bg-cyan-500"
+      },
+      collab: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-collab-400 dark:focus-visible:ring-collab-400",
+        icon: "text-collab-500",
+        progress: "bg-collab-500 dark:bg-collab-500"
+      },
+      ai: {
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-400 dark:focus-visible:ring-ai-400",
+        icon: "text-ai-500",
+        progress: "bg-ai-500 dark:bg-ai-500"
+      }
+    },
+    multiline: {
+      true: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      },
+      false: {
+        root: "items-center",
+        actions: "items-center"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+};
+
+const toaster = {
+  slots: {
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
+    base: "pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible 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 transition-[transform,translate,height] duration-200 ease-out"
+  },
+  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: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]",
+      right: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]",
+      down: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]",
+      left: "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: "data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
+    },
+    {
+      swipeDirection: [
+        "up",
+        "down"
+      ],
+      class: "data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
+    }
+  ],
+  defaultVariants: {
+    position: "top-right"
+  }
+};
+
+const tooltip = {
+  slots: {
+    content: [
+      "flex items-center gap-1 shadow-sm rounded-2xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "min-h-6 px-2 py-1 text-xs",
+      "bg-base-dark/85 text-white",
+      "dark:bg-base-dark dark:text-base-150 dark:ring dark:ring-base-100/20",
+      "pointer-events-auto"
+    ],
+    arrow: "fill-base-dark dark:fill-base-100/20",
+    text: "text-pretty max-w-[200px]",
+    // truncate
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-[''] before:me-0.5`,
+    kbdsSize: "sm",
+    kbdsDepth: "normal"
+  }
+};
+
+const theme = {
+  __proto__: null,
+  advice: advice,
+  alert: alert,
+  avatar: avatar,
+  avatarGroup: avatarGroup,
+  badge: badge,
+  button: button,
+  buttonGroup: buttonGroup,
+  checkbox: checkbox,
+  chip: chip,
+  container: container,
+  countdown: countdown,
+  form: form,
+  formField: formField,
+  input: input,
+  kbd: kbd,
+  link: link,
+  progress: progress,
+  radioGroup: radioGroup,
+  range: range,
+  select: select,
+  separator: separator,
+  skeleton: skeleton,
+  switch: _switch,
+  tabs: tabs,
+  textarea: textarea,
+  toast: toast,
+  toaster: toaster,
+  tooltip: tooltip
+};
+
+const themeProse = {
+  __proto__: null
+};
+
+const descriptionList = {
+  slots: {
+    root: "w-full shrink-0",
+    // ????
+    legend: "font-semibold text-black dark:text-base-150",
+    text: "text-base-500 dark:text-base-400",
+    container: "grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]",
+    labelWrapper: [
+      "col-start-1 border-t border-base-950/5 text-base-500 first:border-none sm:border-t sm:border-base-950/5 dark:border-white/5 dark:text-base-400 sm:dark:border-white/5",
+      "flex flex-nowrap flex-row items-center justify-start gap-1.5"
+    ].join(" "),
+    icon: "shrink-0 size-6 text-base-500 dark:text-base-400",
+    avatar: "shrink-0",
+    avatarSize: "",
+    label: "",
+    descriptionWrapper: "text-base-950 sm:border-t sm:border-base-950/5 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none",
+    description: "text-base-900 dark:text-base-150",
+    actions: "flex flex-wrap gap-1.5 shrink-0",
+    footer: "border-t border-base-950/5 dark:border-white/5"
+  },
+  variants: {
+    size: {
+      sm: {
+        legend: "text-md",
+        text: "mt-1 max-w-2/3 text-sm",
+        container: "mt-2.5 text-md",
+        labelWrapper: "pt-3 sm:py-3",
+        avatarSize: "xs",
+        label: "",
+        descriptionWrapper: "pb-3 pt-1 sm:py-3",
+        description: "",
+        footer: "mt-2 p-2"
+      },
+      md: {
+        legend: "text-xl",
+        text: "mt-2 max-w-2/3 text-lg leading-5",
+        container: "mt-3 text-lg",
+        labelWrapper: "pt-3 sm:py-3",
+        avatarSize: "xs",
+        label: "",
+        descriptionWrapper: "pb-3 pt-1 sm:py-3",
+        description: "",
+        footer: "mt-4 p-4"
+      }
+    },
+    multiline: {
+      true: {
+        descriptionWrapper: "",
+        actions: "items-start mt-2.5"
+      },
+      false: {
+        descriptionWrapper: "w-full flex flex-row items-center justify-between gap-4",
+        actions: "items-center"
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: "md"
+  }
+};
+
+const themeContent = {
+  __proto__: null,
+  descriptionList: descriptionList
+};
+
+function replaceBrackets(value) {
+  return value.replace(/\[\[/g, "<").replace(/\]\]/g, ">");
+}
+function getTemplates(options) {
+  const templates = [];
+  function generateVariantDeclarations(variants, result) {
+    return variants.map((variant) => {
+      const keys = Object.keys(result.variants[variant]);
+      return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
+    });
+  }
+  for (const component in theme) {
+    templates.push({
+      filename: `b24ui/${kebabCase(component)}.ts`,
+      write: true,
+      getContents: async () => {
+        const template = theme[component];
+        const result = typeof template === "function" ? template(options) : template;
+        const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+          const keys = Object.keys(values);
+          return keys.some((key) => key !== "true" && key !== "false");
+        }).map(([key]) => key);
+        let json = JSON.stringify(result, null, 2);
+        for (const variant of variants) {
+          json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
+          json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+            const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+            return `${before}${replaced}${after}`;
+          });
+        }
+        return [
+          ...generateVariantDeclarations(variants, result),
+          `export default ${json}`
+        ].join("\n\n");
+      }
+    });
+  }
+  for (const component in themeProse) {
+    templates.push({
+      filename: `b24ui/prose/${kebabCase(component)}.ts`,
+      write: true,
+      getContents: async () => {
+        const template = themeProse[component];
+        const result = typeof template === "function" ? template(options) : template;
+        const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+          const keys = Object.keys(values);
+          return keys.some((key) => key !== "true" && key !== "false");
+        }).map(([key]) => key);
+        let json = JSON.stringify(result, null, 2);
+        for (const variant of variants) {
+          json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
+          json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+            const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+            return `${before}${replaced}${after}`;
+          });
+        }
+        return [
+          ...generateVariantDeclarations(variants, result),
+          `export default ${json}`
+        ].join("\n\n");
+      }
+    });
+  }
+  for (const component in themeContent) {
+    templates.push({
+      filename: `b24ui/content/${kebabCase(component)}.ts`,
+      write: true,
+      getContents: async () => {
+        const template = themeContent[component];
+        const result = typeof template === "function" ? template(options) : template;
+        const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+          const keys = Object.keys(values);
+          return keys.some((key) => key !== "true" && key !== "false");
+        }).map(([key]) => key);
+        let json = JSON.stringify(result, null, 2);
+        for (const variant of variants) {
+          json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
+          json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+            const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+            return `${before}${replaced}${after}`;
+          });
+        }
+        return [
+          ...generateVariantDeclarations(variants, result),
+          `export default ${json}`
+        ].join("\n\n");
+      }
+    });
+  }
+  templates.push({
+    filename: "b24ui/index.ts",
+    write: true,
+    getContents: () => Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+  });
+  templates.push({
+    filename: "types/b24ui.d.ts",
+    getContents: () => replaceBrackets(`import * as b24ui from '#build/b24ui'
+import type { DeepPartial } from '#b24ui/types/utils'
+import type { defaultConfig } from 'tailwind-variants'
+
+type AppConfigUI = {
+  tv?: typeof defaultConfig
+} & DeepPartial[[typeof b24ui]]
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    b24ui?: AppConfigUI
+  }
+}
+
+export {}
+`)
+  });
+  templates.push({
+    filename: "b24ui-image-component.ts",
+    write: true,
+    getContents: ({ app }) => {
+      const image = app?.components?.find((c) => c.pascalName === "NuxtImg" && !c.filePath.includes("nuxt/dist/app"));
+      return image ? `export { default } from "${image.filePath}"` : 'export default "img"';
+    }
+  });
+  return templates;
+}
+function addTemplates(options, nuxt, resolve) {
+  const templates = getTemplates(options);
+  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") });
+  });
+}
+
+export { getDefaultUiConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g };