@intlayer/design-system 5.1.5 → 5.1.7

package/dist/components/TabSelector/TabSelector.mjs

@@ -16,13 +16,13 @@ const tabSelectorVariant = cva(
   {
     variants: {
       color: {
-        primary: "border-primary text-primary dark:border-primary-dark dark:text-primary-dark",
-        secondary: "border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark",
-        destructive: "border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark",
-        neutral: "border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark",
+        primary: "border-primary text-primary",
+        secondary: "border-secondary text-secondary",
+        destructive: "border-destructive bg-destructive text-destructive",
+        neutral: "border-neutral text-neutral ",
         light: "border-white text-white",
         dark: "border-neutral-800 text-neutral-800",
-        text: "border-text text-text dark:border-text-dark dark:text-text-dark"
+        text: "border-text text-text"
       }
     },
     defaultVariants: {
@@ -35,13 +35,13 @@ const indicatorVariant = cva(
   {
     variants: {
       color: {
-        primary: "bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark",
-        secondary: "bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark",
-        destructive: "bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark",
-        neutral: "bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text",
+        primary: "bg-primary/10 aria-selected:text-text",
+        secondary: "bg-secondary/10 aria-selected:text-text",
+        destructive: "bg-destructive/10 aria-selected:text-text",
+        neutral: "bg-neutral/10 aria-selected:text-white/10",
         light: "bg-white/10 aria-selected:text-black",
         dark: "bg-neutral-800/10 aria-selected:text-white",
-        text: "bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text"
+        text: "bg-text/10 aria-selected:text-text-opposite"
       }
     }
   }
@@ -90,9 +90,11 @@ const TabSelector = ({
         choiceIndicatorPosition && /* @__PURE__ */ jsx(
           "div",
           {
-            className: indicatorVariant({
-              color
-            }),
+            className: cn(
+              indicatorVariant({
+                color
+              })
+            ),
             style: choiceIndicatorPosition,
             ref: indicatorRef
           },

package/dist/components/TabSelector/TabSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useRef,\n  type HTMLAttributes,\n  type ReactElement,\n  cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n  'relative flex size-full flex-row items-center gap-2',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text',\n        light: 'bg-white/10 aria-selected:text-black',\n        dark: 'bg-neutral-800/10 aria-selected:text-white',\n        text: 'bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n  key: string | number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n  tabs: ReactElement<T>[];\n  selectedChoice: T['key'];\n  onTabClick?: (choice: T['key']) => void;\n  hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n  VariantProps<typeof tabSelectorVariant>;\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <TabSelector\n *   selectedChoice=\"option1\"\n *   onTabClick={(choice) => console.log(choice)}\n *   hoverable={true}\n * >\n *   <Button key=\"option1\"/>\n *   <Button key=\"option2\"/>\n *   <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n  tabs,\n  selectedChoice,\n  onTabClick,\n  color = 'primary',\n  hoverable = false,\n  className,\n}: TabSelectorProps<T>) => {\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(\n    optionsRefs,\n    undefined,\n    hoverable\n  );\n\n  return (\n    <div\n      className={cn(\n        tabSelectorVariant({\n          color,\n        }),\n        className\n      )}\n      aria-orientation=\"horizontal\"\n      aria-multiselectable=\"false\"\n      role=\"tablist\"\n    >\n      {tabs.map((Tab, index) => {\n        const key = Tab.key!;\n\n        const isSelected = selectedChoice === key;\n\n        return cloneElement(Tab, {\n          key: key ?? index,\n          role: 'tab',\n          onClick: () => onTabClick?.(key),\n          'aria-selected': isSelected,\n          ref: (el: HTMLElement) => {\n            optionsRefs.current[index] = el!;\n          },\n        } as unknown as T);\n      })}\n      {choiceIndicatorPosition && (\n        <div\n          className={indicatorVariant({\n            color,\n          })}\n          style={choiceIndicatorPosition}\n          ref={indicatorRef}\n          key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAc,OAAsB,EAAE;AACtC,QAAA,eAAe,OAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAAA;AAAA,UAC/B,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useRef,\n  type HTMLAttributes,\n  type ReactElement,\n  cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n  'relative flex size-full flex-row items-center gap-2',\n  {\n    variants: {\n      color: {\n        primary: 'border-primary text-primary',\n        secondary: 'border-secondary text-secondary',\n        destructive: 'border-destructive bg-destructive text-destructive',\n        neutral: 'border-neutral text-neutral ',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary: 'bg-primary/10 aria-selected:text-text',\n        secondary: 'bg-secondary/10 aria-selected:text-text',\n        destructive: 'bg-destructive/10 aria-selected:text-text',\n        neutral: 'bg-neutral/10 aria-selected:text-white/10',\n        light: 'bg-white/10 aria-selected:text-black',\n        dark: 'bg-neutral-800/10 aria-selected:text-white',\n        text: 'bg-text/10 aria-selected:text-text-opposite',\n      },\n    },\n  }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n  key: string | number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n  tabs: ReactElement<T>[];\n  selectedChoice: T['key'];\n  onTabClick?: (choice: T['key']) => void;\n  hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n  VariantProps<typeof tabSelectorVariant>;\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <TabSelector\n *   selectedChoice=\"option1\"\n *   onTabClick={(choice) => console.log(choice)}\n *   hoverable={true}\n * >\n *   <Button key=\"option1\"/>\n *   <Button key=\"option2\"/>\n *   <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n  tabs,\n  selectedChoice,\n  onTabClick,\n  color = 'primary',\n  hoverable = false,\n  className,\n}: TabSelectorProps<T>) => {\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(\n    optionsRefs,\n    undefined,\n    hoverable\n  );\n\n  return (\n    <div\n      className={cn(\n        tabSelectorVariant({\n          color,\n        }),\n        className\n      )}\n      aria-orientation=\"horizontal\"\n      aria-multiselectable=\"false\"\n      role=\"tablist\"\n    >\n      {tabs.map((Tab, index) => {\n        const key = Tab.key!;\n\n        const isSelected = selectedChoice === key;\n\n        return cloneElement(Tab, {\n          key: key ?? index,\n          role: 'tab',\n          onClick: () => onTabClick?.(key),\n          'aria-selected': isSelected,\n          ref: (el: HTMLElement) => {\n            optionsRefs.current[index] = el!;\n          },\n        } as unknown as T);\n      })}\n      {choiceIndicatorPosition && (\n        <div\n          className={cn(\n            indicatorVariant({\n              color,\n            })\n          )}\n          style={choiceIndicatorPosition}\n          ref={indicatorRef}\n          key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAc,OAAsB,EAAE;AACtC,QAAA,eAAe,OAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAAA;AAAA,UAC/B,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cACD,CAAA;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/components/Tag/index.cjs

@@ -15,12 +15,11 @@ const containerVariants = classVarianceAuthority.cva("backdrop-blur w-fit", {
       full: "rounded-full"
     },
     color: {
-      success: "bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark",
-      error: "bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark",
-      warning: "bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark",
-      neutral: "bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark",
-      info: "bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark",
-      text: "bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark"
+      success: "bg-success/10 border-success text-success ",
+      error: "bg-error/10 border-error text-error",
+      warning: "bg-warning/10 border-warning text-warning",
+      neutral: "bg-neutral/10 /10 border-neutral text-neutral ",
+      text: "bg-text/10  border-text  text-text"
     },
     size: {
       xs: "py-0.5 px-2 text-xs border-[1.2px]",
@@ -31,7 +30,7 @@ const containerVariants = classVarianceAuthority.cva("backdrop-blur w-fit", {
     },
     border: {
       none: "border-none",
-      with: "border-text dark:border-text-dark border-[1.5px]"
+      with: "border-text  border-[1.5px]"
     },
     background: {
       none: "bg-none",

package/dist/components/Tag/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    color: {\n      success:\n        'bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark',\n      error:\n        'bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark',\n      warning:\n        'bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark',\n      neutral:\n        'bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark',\n      info: 'bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark',\n      text: 'bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark',\n    },\n    size: {\n      xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n      sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n      md: 'py-1 px-2 text-base border-2',\n      lg: 'py-2 px-3 text-lg border-2',\n      xl: 'py-4 px-5 text-xl border-2',\n    },\n    border: {\n      none: 'border-none',\n      with: 'border-text dark:border-text-dark border-[1.5px]',\n    },\n    background: {\n      none: 'bg-none',\n      with: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: 'full',\n    border: 'none',\n    color: 'text',\n    size: 'md',\n  },\n});\n\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["cva","jsx"],"mappings":";;;;AAMA,MAAM,oBAAoBA,2BAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SACE;AAAA,MACF,OACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,CAAC;AAEM,MAAM,MAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEF,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,kBAAkB;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    color: {\n      success: 'bg-success/10 border-success text-success ',\n      error: 'bg-error/10 border-error text-error',\n      warning: 'bg-warning/10 border-warning text-warning',\n      neutral: 'bg-neutral/10 /10 border-neutral text-neutral ',\n      text: 'bg-text/10  border-text  text-text',\n    },\n    size: {\n      xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n      sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n      md: 'py-1 px-2 text-base border-2',\n      lg: 'py-2 px-3 text-lg border-2',\n      xl: 'py-4 px-5 text-xl border-2',\n    },\n    border: {\n      none: 'border-none',\n      with: 'border-text  border-[1.5px]',\n    },\n    background: {\n      none: 'bg-none',\n      with: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: 'full',\n    border: 'none',\n    color: 'text',\n    size: 'md',\n  },\n});\n\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["cva","jsx"],"mappings":";;;;AAMA,MAAM,oBAAoBA,2BAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,CAAC;AAEM,MAAM,MAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEF,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,kBAAkB;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;;"}

package/dist/components/Tag/index.d.ts

@@ -2,8 +2,8 @@ import { VariantProps } from 'class-variance-authority';
 import { FC, HTMLAttributes, PropsWithChildren } from 'react';
 type TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> & HTMLAttributes<HTMLDivElement>;
 declare const containerVariants: (props?: ({
-    roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | null | undefined;
-    color?: "text" | "success" | "warning" | "error" | "neutral" | "info" | null | undefined;
+    roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    color?: "text" | "error" | "neutral" | "success" | "warning" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
     border?: "none" | "with" | null | undefined;
     background?: "none" | "with" | null | undefined;

package/dist/components/Tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnE,KAAK,QAAQ,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,GACvE,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,iBAAiB;;;;;;8EA+CrB,CAAC;AAEH,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAyB5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnE,KAAK,QAAQ,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,GACvE,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,iBAAiB;;;;;;8EA0CrB,CAAC;AAEH,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAyB5B,CAAC"}

package/dist/components/Tag/index.mjs

@@ -13,12 +13,11 @@ const containerVariants = cva("backdrop-blur w-fit", {
       full: "rounded-full"
     },
     color: {
-      success: "bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark",
-      error: "bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark",
-      warning: "bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark",
-      neutral: "bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark",
-      info: "bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark",
-      text: "bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark"
+      success: "bg-success/10 border-success text-success ",
+      error: "bg-error/10 border-error text-error",
+      warning: "bg-warning/10 border-warning text-warning",
+      neutral: "bg-neutral/10 /10 border-neutral text-neutral ",
+      text: "bg-text/10  border-text  text-text"
     },
     size: {
       xs: "py-0.5 px-2 text-xs border-[1.2px]",
@@ -29,7 +28,7 @@ const containerVariants = cva("backdrop-blur w-fit", {
     },
     border: {
       none: "border-none",
-      with: "border-text dark:border-text-dark border-[1.5px]"
+      with: "border-text  border-[1.5px]"
     },
     background: {
       none: "bg-none",

package/dist/components/Tag/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    color: {\n      success:\n        'bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark',\n      error:\n        'bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark',\n      warning:\n        'bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark',\n      neutral:\n        'bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark',\n      info: 'bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark',\n      text: 'bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark',\n    },\n    size: {\n      xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n      sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n      md: 'py-1 px-2 text-base border-2',\n      lg: 'py-2 px-3 text-lg border-2',\n      xl: 'py-4 px-5 text-xl border-2',\n    },\n    border: {\n      none: 'border-none',\n      with: 'border-text dark:border-text-dark border-[1.5px]',\n    },\n    background: {\n      none: 'bg-none',\n      with: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: 'full',\n    border: 'none',\n    color: 'text',\n    size: 'md',\n  },\n});\n\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAMA,MAAM,oBAAoB,IAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SACE;AAAA,MACF,OACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,CAAC;AAEM,MAAM,MAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,kBAAkB;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    color: {\n      success: 'bg-success/10 border-success text-success ',\n      error: 'bg-error/10 border-error text-error',\n      warning: 'bg-warning/10 border-warning text-warning',\n      neutral: 'bg-neutral/10 /10 border-neutral text-neutral ',\n      text: 'bg-text/10  border-text  text-text',\n    },\n    size: {\n      xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n      sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n      md: 'py-1 px-2 text-base border-2',\n      lg: 'py-2 px-3 text-lg border-2',\n      xl: 'py-4 px-5 text-xl border-2',\n    },\n    border: {\n      none: 'border-none',\n      with: 'border-text  border-[1.5px]',\n    },\n    background: {\n      none: 'bg-none',\n      with: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: 'full',\n    border: 'none',\n    color: 'text',\n    size: 'md',\n  },\n});\n\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAMA,MAAM,oBAAoB,IAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,CAAC;AAEM,MAAM,MAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,kBAAkB;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/TextArea/AutoSizeTextArea.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/TextArea/AutoSizeTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["import {\n  type FC,\n  useRef,\n  useEffect,\n  type ChangeEventHandler,\n  useImperativeHandle,\n  useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = useCallback(() => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  }, [autoSize, maxRows]);\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = useCallback(\n    (el: HTMLTextAreaElement | null) => {\n      textAreaRef.current = el;\n      if (el) {\n        adjustHeight();\n      }\n    },\n    [adjustHeight]\n  );\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-scroll',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":["useRef","useImperativeHandle","useCallback","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;AAgBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAcA,oBAAmC,IAAI;AAEvCC,eAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAeC,aAAAA,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtBC,eAAAA,UAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEA,QAAM,SAASD,aAAA;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGE,SAAAE,2BAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;;"}
+{"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  useRef,\n  useEffect,\n  type ChangeEventHandler,\n  useImperativeHandle,\n  useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = useCallback(() => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  }, [autoSize, maxRows]);\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = useCallback(\n    (el: HTMLTextAreaElement | null) => {\n      textAreaRef.current = el;\n      if (el) {\n        adjustHeight();\n      }\n    },\n    [adjustHeight]\n  );\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-scroll',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":["useRef","useImperativeHandle","useCallback","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;;AAkBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAcA,oBAAmC,IAAI;AAEvCC,eAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAeC,aAAAA,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtBC,eAAAA,UAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEA,QAAM,SAASD,aAAA;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGE,SAAAE,2BAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;;"}

package/dist/components/TextArea/AutoSizeTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EAMR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6DxD,CAAC"}
+{"version":3,"file":"AutoSizeTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,EAAE,EAMR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6DxD,CAAC"}

package/dist/components/TextArea/AutoSizeTextArea.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useImperativeHandle, useCallback, useEffect } from "react";
 import { cn } from "../../utils/cn.mjs";

package/dist/components/TextArea/AutoSizeTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["import {\n  type FC,\n  useRef,\n  useEffect,\n  type ChangeEventHandler,\n  useImperativeHandle,\n  useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = useCallback(() => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  }, [autoSize, maxRows]);\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = useCallback(\n    (el: HTMLTextAreaElement | null) => {\n      textAreaRef.current = el;\n      if (el) {\n        adjustHeight();\n      }\n    },\n    [adjustHeight]\n  );\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-scroll',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAgBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAc,OAAmC,IAAI;AAEvC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAe,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtB,YAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  useRef,\n  useEffect,\n  type ChangeEventHandler,\n  useImperativeHandle,\n  useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = useCallback(() => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  }, [autoSize, maxRows]);\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = useCallback(\n    (el: HTMLTextAreaElement | null) => {\n      textAreaRef.current = el;\n      if (el) {\n        adjustHeight();\n      }\n    },\n    [adjustHeight]\n  );\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-scroll',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAc,OAAmC,IAAI;AAEvC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAe,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtB,YAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/components/TextArea/AutocompleteTextArea.cjs

@@ -0,0 +1,105 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const editorReact = require("@intlayer/editor-react");
+const ReactExports = require("react");
+require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
+require("../../hooks/useAsync/useAsyncStateStore.cjs");
+const hooks_intlayerAPIHooks = require("../../hooks/intlayerAPIHooks.cjs");
+require("deepmerge");
+const components_TextArea_AutoSizeTextArea = require("./AutoSizeTextArea.cjs");
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = ReactExports.useState(value);
+  ReactExports.useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+};
+const AutoCompleteTextarea = ({
+  isActive = true,
+  suggestion: suggestionProp,
+  ...props
+}) => {
+  const defaultValue = String(props.value ?? props.defaultValue ?? "");
+  const { autocomplete } = hooks_intlayerAPIHooks.useAutocomplete();
+  const configuration = editorReact.useConfiguration();
+  const [isTyped, setIsTyped] = ReactExports.useState(false);
+  const [text, setText] = ReactExports.useState(defaultValue);
+  const [suggestion, setSuggestion] = ReactExports.useState("");
+  const debouncedText = useDebounce(text, 200);
+  ReactExports.useEffect(() => {
+    if (typeof props.value === "undefined") return;
+    setText(defaultValue);
+  }, [props.value, props.defaultValue]);
+  ReactExports.useEffect(() => {
+    if (!isActive) return;
+    if (!isTyped) return;
+    const fetchSuggestion = async () => {
+      try {
+        const response = await autocomplete({
+          text: debouncedText,
+          openAiApiKey: configuration.editor.openAiApiKey,
+          model: configuration.editor.openAiApiModel,
+          temperature: configuration.editor.openAiApiTemperature
+        });
+        const autocompletion = response?.data?.autocompletion ?? "";
+        if (autocompletion.startsWith(debouncedText)) {
+          const remaining = autocompletion.slice(debouncedText.length);
+          return setSuggestion(remaining);
+        }
+        return setSuggestion(autocompletion);
+      } catch (err) {
+        console.error("Autocomplete error:", err);
+      }
+    };
+    if (debouncedText.length > 3) {
+      setSuggestion("");
+      fetchSuggestion();
+    } else {
+      setSuggestion("");
+    }
+  }, [debouncedText, isActive]);
+  const acceptSuggestion = () => {
+    setText((prevText) => prevText + suggestion);
+    setSuggestion("");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "align-text-top text-transparent", children: text }),
+          (suggestion || suggestionProp) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral ml-3 align-text-top", children: suggestionProp ?? suggestion })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
+      {
+        ...props,
+        value: text,
+        onChange: (e) => {
+          setIsTyped(true);
+          setText(e.target.value);
+          props.onChange?.(e);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Tab" && suggestion) {
+            e.preventDefault();
+            acceptSuggestion();
+          }
+          props.onKeyDown?.(e);
+        }
+      }
+    )
+  ] });
+};
+exports.AutoCompleteTextarea = AutoCompleteTextarea;
+exports.useDebounce = useDebounce;
+//# sourceMappingURL=AutocompleteTextArea.cjs.map

package/dist/components/TextArea/AutocompleteTextArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteTextArea.cjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useState, useEffect } from 'react';\nimport { useAutocomplete } from '../../hooks';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\n\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\n\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n\n  // Only update this “debouncedText” after the user stops typing for 500ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const response = await autocomplete({\n          text: debouncedText,\n          openAiApiKey: configuration.editor.openAiApiKey,\n          model: configuration.editor.openAiApiModel,\n          temperature: configuration.editor.openAiApiTemperature,\n        });\n        // e.g. response.data.autocompletion = \"Hello World\"\n        const autocompletion = response?.data?.autocompletion ?? '';\n\n        // If the suggested text starts with what the user typed,\n        // we only store the *remaining* part as the suggestion\n        // so that we can render \"ghost\" text appropriately.\n        if (autocompletion.startsWith(debouncedText)) {\n          const remaining = autocompletion.slice(debouncedText.length);\n          return setSuggestion(remaining);\n        }\n\n        return setSuggestion(autocompletion);\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive]);\n\n  const acceptSuggestion = () => {\n    // Merge the typed text with the suggestion\n    setText((prevText) => prevText + suggestion);\n    setSuggestion('');\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      {/*\n        --- Background/Ghost layer ---\n        Mirrors user's typed text and shows suggestion as ghosted/gray\n      */}\n      <div\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        <span className=\"align-text-top text-transparent\">{text}</span>\n        {(suggestion || suggestionProp) && (\n          <span className=\"text-neutral ml-3 align-text-top\">\n            {suggestionProp ?? suggestion}\n          </span>\n        )}\n      </div>\n      {/*\n        --- Actual editable textarea ---\n        Must share the same styling (font size, line-height, etc.) so\n        text lines up exactly underneath the background layer.\n      */}\n      <AutoSizedTextArea\n        {...props}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          // If user presses Tab and we have a suggestion, accept it\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useState","useEffect","useAutocomplete","useConfiguration","jsxs","jsx","AutoSizedTextArea"],"mappings":";;;;;;;;;;;AAUa,MAAA,cAAc,CAAK,OAAU,UAAqB;AAC7D,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,aAAAA,SAAY,KAAK;AAE7DC,eAAAA,UAAU,MAAM;AACR,UAAA,QAAQ,WAAW,MAAM;AAC7B,wBAAkB,KAAK;AAAA,OACtB,KAAK;AAGD,WAAA,MAAM,aAAa,KAAK;AAAA,EAAA,GAC9B,CAAC,OAAO,KAAK,CAAC;AAEV,SAAA;AACT;AAOO,MAAM,uBAAsD,CAAC;AAAA,EAClE,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAC7D,QAAA,EAAE,aAAa,IAAIC,uCAAgB;AACzC,QAAM,gBAAgBC,YAAAA,iBAAiB;AACvC,QAAM,CAAC,SAAS,UAAU,IAAIH,aAAAA,SAAS,KAAK;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAIA,aAAAA,SAAS,YAAY;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,EAAE;AAGzC,QAAA,gBAAgB,YAAY,MAAM,GAAG;AAE3CC,eAAAA,UAAU,MAAM;AACV,QAAA,OAAO,MAAM,UAAU,YAAa;AACxC,YAAQ,YAAY;AAAA,KACnB,CAAC,MAAM,OAAO,MAAM,YAAY,CAAC;AAEpCA,eAAAA,UAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,QAAI,CAAC,QAAS;AAEd,UAAM,kBAAkB,YAAY;AAC9B,UAAA;AACI,cAAA,WAAW,MAAM,aAAa;AAAA,UAClC,MAAM;AAAA,UACN,cAAc,cAAc,OAAO;AAAA,UACnC,OAAO,cAAc,OAAO;AAAA,UAC5B,aAAa,cAAc,OAAO;AAAA,QAAA,CACnC;AAEK,cAAA,iBAAiB,UAAU,MAAM,kBAAkB;AAKrD,YAAA,eAAe,WAAW,aAAa,GAAG;AAC5C,gBAAM,YAAY,eAAe,MAAM,cAAc,MAAM;AAC3D,iBAAO,cAAc,SAAS;AAAA,QAAA;AAGhC,eAAO,cAAc,cAAc;AAAA,eAC5B,KAAK;AACJ,gBAAA,MAAM,uBAAuB,GAAG;AAAA,MAAA;AAAA,IAE5C;AAEI,QAAA,cAAc,SAAS,GAAG;AAE5B,oBAAc,EAAE;AACA,sBAAA;AAAA,IAAA,OACX;AAEL,oBAAc,EAAE;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,eAAe,QAAQ,CAAC;AAE5B,QAAM,mBAAmB,MAAM;AAErB,YAAA,CAAC,aAAa,WAAW,UAAU;AAC3C,kBAAc,EAAE;AAAA,EAClB;AAGE,SAAAG,2BAAA,KAAC,OAAI,EAAA,WAAU,mBAKb,UAAA;AAAA,IAAAA,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,UAAA;AAAA,UAACC,2BAAA,IAAA,QAAA,EAAK,WAAU,mCAAmC,UAAK,MAAA;AAAA,WACtD,cAAc,mBACdA,2BAAAA,IAAC,UAAK,WAAU,oCACb,4BAAkB,WACrB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IAMAA,2BAAA;AAAA,MAACC,qCAAA;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,qBAAW,IAAI;AACP,kBAAA,EAAE,OAAO,KAAK;AACtB,gBAAM,WAAW,CAAC;AAAA,QACpB;AAAA,QACA,WAAW,CAAC,MAAM;AAEZ,cAAA,EAAE,QAAQ,SAAS,YAAY;AACjC,cAAE,eAAe;AACA,6BAAA;AAAA,UAAA;AAEnB,gBAAM,YAAY,CAAC;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;;"}

package/dist/components/TextArea/AutocompleteTextArea.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AutoSizedTextAreaProps } from './AutoSizeTextArea';
+export declare const useDebounce: <T>(value: T, delay: number) => T;
+export type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {
+    isActive?: boolean;
+    suggestion?: string;
+};
+export declare const AutoCompleteTextarea: FC<AutocompleteTextAreaProps>;
+//# sourceMappingURL=AutocompleteTextArea.d.ts.map

package/dist/components/TextArea/AutocompleteTextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAErD,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW,GAAI,CAAC,SAAU,CAAC,SAAS,MAAM,KAAG,CAazD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAAG;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0G9D,CAAC"}

package/dist/components/TextArea/AutocompleteTextArea.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useConfiguration } from "@intlayer/editor-react";
+import { useState, useEffect } from "react";
+import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
+import "../../hooks/useAsync/useAsyncStateStore.mjs";
+import { useAutocomplete } from "../../hooks/intlayerAPIHooks.mjs";
+import "deepmerge";
+import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+};
+const AutoCompleteTextarea = ({
+  isActive = true,
+  suggestion: suggestionProp,
+  ...props
+}) => {
+  const defaultValue = String(props.value ?? props.defaultValue ?? "");
+  const { autocomplete } = useAutocomplete();
+  const configuration = useConfiguration();
+  const [isTyped, setIsTyped] = useState(false);
+  const [text, setText] = useState(defaultValue);
+  const [suggestion, setSuggestion] = useState("");
+  const debouncedText = useDebounce(text, 200);
+  useEffect(() => {
+    if (typeof props.value === "undefined") return;
+    setText(defaultValue);
+  }, [props.value, props.defaultValue]);
+  useEffect(() => {
+    if (!isActive) return;
+    if (!isTyped) return;
+    const fetchSuggestion = async () => {
+      try {
+        const response = await autocomplete({
+          text: debouncedText,
+          openAiApiKey: configuration.editor.openAiApiKey,
+          model: configuration.editor.openAiApiModel,
+          temperature: configuration.editor.openAiApiTemperature
+        });
+        const autocompletion = response?.data?.autocompletion ?? "";
+        if (autocompletion.startsWith(debouncedText)) {
+          const remaining = autocompletion.slice(debouncedText.length);
+          return setSuggestion(remaining);
+        }
+        return setSuggestion(autocompletion);
+      } catch (err) {
+        console.error("Autocomplete error:", err);
+      }
+    };
+    if (debouncedText.length > 3) {
+      setSuggestion("");
+      fetchSuggestion();
+    } else {
+      setSuggestion("");
+    }
+  }, [debouncedText, isActive]);
+  const acceptSuggestion = () => {
+    setText((prevText) => prevText + suggestion);
+    setSuggestion("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "align-text-top text-transparent", children: text }),
+          (suggestion || suggestionProp) && /* @__PURE__ */ jsx("span", { className: "text-neutral ml-3 align-text-top", children: suggestionProp ?? suggestion })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AutoSizedTextArea,
+      {
+        ...props,
+        value: text,
+        onChange: (e) => {
+          setIsTyped(true);
+          setText(e.target.value);
+          props.onChange?.(e);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Tab" && suggestion) {
+            e.preventDefault();
+            acceptSuggestion();
+          }
+          props.onKeyDown?.(e);
+        }
+      }
+    )
+  ] });
+};
+export {
+  AutoCompleteTextarea,
+  useDebounce
+};
+//# sourceMappingURL=AutocompleteTextArea.mjs.map

package/dist/components/TextArea/AutocompleteTextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteTextArea.mjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useState, useEffect } from 'react';\nimport { useAutocomplete } from '../../hooks';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\n\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\n\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n\n  // Only update this “debouncedText” after the user stops typing for 500ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const response = await autocomplete({\n          text: debouncedText,\n          openAiApiKey: configuration.editor.openAiApiKey,\n          model: configuration.editor.openAiApiModel,\n          temperature: configuration.editor.openAiApiTemperature,\n        });\n        // e.g. response.data.autocompletion = \"Hello World\"\n        const autocompletion = response?.data?.autocompletion ?? '';\n\n        // If the suggested text starts with what the user typed,\n        // we only store the *remaining* part as the suggestion\n        // so that we can render \"ghost\" text appropriately.\n        if (autocompletion.startsWith(debouncedText)) {\n          const remaining = autocompletion.slice(debouncedText.length);\n          return setSuggestion(remaining);\n        }\n\n        return setSuggestion(autocompletion);\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive]);\n\n  const acceptSuggestion = () => {\n    // Merge the typed text with the suggestion\n    setText((prevText) => prevText + suggestion);\n    setSuggestion('');\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      {/*\n        --- Background/Ghost layer ---\n        Mirrors user's typed text and shows suggestion as ghosted/gray\n      */}\n      <div\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        <span className=\"align-text-top text-transparent\">{text}</span>\n        {(suggestion || suggestionProp) && (\n          <span className=\"text-neutral ml-3 align-text-top\">\n            {suggestionProp ?? suggestion}\n          </span>\n        )}\n      </div>\n      {/*\n        --- Actual editable textarea ---\n        Must share the same styling (font size, line-height, etc.) so\n        text lines up exactly underneath the background layer.\n      */}\n      <AutoSizedTextArea\n        {...props}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          // If user presses Tab and we have a suggestion, accept it\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUa,MAAA,cAAc,CAAK,OAAU,UAAqB;AAC7D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAY,KAAK;AAE7D,YAAU,MAAM;AACR,UAAA,QAAQ,WAAW,MAAM;AAC7B,wBAAkB,KAAK;AAAA,OACtB,KAAK;AAGD,WAAA,MAAM,aAAa,KAAK;AAAA,EAAA,GAC9B,CAAC,OAAO,KAAK,CAAC;AAEV,SAAA;AACT;AAOO,MAAM,uBAAsD,CAAC;AAAA,EAClE,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AAC7D,QAAA,EAAE,aAAa,IAAI,gBAAgB;AACzC,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,YAAY;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAGzC,QAAA,gBAAgB,YAAY,MAAM,GAAG;AAE3C,YAAU,MAAM;AACV,QAAA,OAAO,MAAM,UAAU,YAAa;AACxC,YAAQ,YAAY;AAAA,KACnB,CAAC,MAAM,OAAO,MAAM,YAAY,CAAC;AAEpC,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,QAAI,CAAC,QAAS;AAEd,UAAM,kBAAkB,YAAY;AAC9B,UAAA;AACI,cAAA,WAAW,MAAM,aAAa;AAAA,UAClC,MAAM;AAAA,UACN,cAAc,cAAc,OAAO;AAAA,UACnC,OAAO,cAAc,OAAO;AAAA,UAC5B,aAAa,cAAc,OAAO;AAAA,QAAA,CACnC;AAEK,cAAA,iBAAiB,UAAU,MAAM,kBAAkB;AAKrD,YAAA,eAAe,WAAW,aAAa,GAAG;AAC5C,gBAAM,YAAY,eAAe,MAAM,cAAc,MAAM;AAC3D,iBAAO,cAAc,SAAS;AAAA,QAAA;AAGhC,eAAO,cAAc,cAAc;AAAA,eAC5B,KAAK;AACJ,gBAAA,MAAM,uBAAuB,GAAG;AAAA,MAAA;AAAA,IAE5C;AAEI,QAAA,cAAc,SAAS,GAAG;AAE5B,oBAAc,EAAE;AACA,sBAAA;AAAA,IAAA,OACX;AAEL,oBAAc,EAAE;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,eAAe,QAAQ,CAAC;AAE5B,QAAM,mBAAmB,MAAM;AAErB,YAAA,CAAC,aAAa,WAAW,UAAU;AAC3C,kBAAc,EAAE;AAAA,EAClB;AAGE,SAAA,qBAAC,OAAI,EAAA,WAAU,mBAKb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,UAAA;AAAA,UAAC,oBAAA,QAAA,EAAK,WAAU,mCAAmC,UAAK,MAAA;AAAA,WACtD,cAAc,mBACd,oBAAC,UAAK,WAAU,oCACb,4BAAkB,WACrB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IAMA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,qBAAW,IAAI;AACP,kBAAA,EAAE,OAAO,KAAK;AACtB,gBAAM,WAAW,CAAC;AAAA,QACpB;AAAA,QACA,WAAW,CAAC,MAAM;AAEZ,cAAA,EAAE,QAAQ,SAAS,YAAY;AACjC,cAAE,eAAe;AACA,6BAAA;AAAA,UAAA;AAEnB,gBAAM,YAAY,CAAC;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/TextArea/index.cjs

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_TextArea_AutoSizeTextArea = require("./AutoSizeTextArea.cjs");
 const components_TextArea_TextArea = require("./TextArea.cjs");
+const components_TextArea_AutocompleteTextArea = require("./AutocompleteTextArea.cjs");
 exports.AutoSizedTextArea = components_TextArea_AutoSizeTextArea.AutoSizedTextArea;
 exports.TextArea = components_TextArea_TextArea.TextArea;
+exports.AutoCompleteTextarea = components_TextArea_AutocompleteTextArea.AutoCompleteTextarea;
+exports.useDebounce = components_TextArea_AutocompleteTextArea.useDebounce;
 //# sourceMappingURL=index.cjs.map

package/dist/components/TextArea/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/TextArea/index.d.ts

@@ -1,3 +1,4 @@
 export * from './AutoSizeTextArea';
 export * from './TextArea';
+export * from './AutocompleteTextArea';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/TextArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC"}

package/dist/components/TextArea/index.mjs

@@ -1,7 +1,10 @@
 import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
 import { TextArea } from "./TextArea.mjs";
+import { AutoCompleteTextarea, useDebounce } from "./AutocompleteTextArea.mjs";
 export {
+  AutoCompleteTextarea,
   AutoSizedTextArea,
-  TextArea
+  TextArea,
+  useDebounce
 };
 //# sourceMappingURL=index.mjs.map

package/dist/components/TextArea/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs

@@ -11,7 +11,7 @@ const components_ThemeSwitcherDropDown_types = require("./types.cjs");
 const ButtonItem = ({ Icon, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full p-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
   components_Button_Button.Button,
   {
-    className: "hover:bg-text/10 focus:bg-text-opposite/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 w-full cursor-pointer rounded-lg p-1 text-left focus:outline-none disabled:text-white/25",
+    className: "hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden w-full cursor-pointer rounded-lg p-1 text-left disabled:text-white/25",
     Icon,
     "data-mode": "system",
     role: "option",

package/dist/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopThemeSwitcher.cjs","sources":["../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { type ButtonProps, Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"hover:bg-text/10 focus:bg-text-opposite/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 w-full cursor-pointer rounded-lg p-1 text-left focus:outline-none disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant=\"none\"\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"names":["jsx","Button","Modes","useState","mode","jsxs","DropDown","CircleDashed","Sun","Moon","Container"],"mappings":";;;;;;;;;;AASA,MAAM,aAA8B,CAAC,EAAE,MAAM,UAAU,GAAG,MAAA,MACxDA,2BAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,2BAAA;AAAA,EAACC,yBAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA,aAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,GACF;AASK,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqBC,uCAAA,MAAM,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAIC,aAAAA,SAAgB,WAAW;AAE7C,QAAA,aAAa,CAACC,UAAgB;AAC9BA,QAAAA,UAASF,6CAAM,QAAQ;AAChB,eAAA,eAAeA,6CAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAASE,KAAI;AAAA,IAAA;AAEf,YAAQA,KAAI;AAAA,EACd;AAEA,QAAM,kBAAkB;AAGtB,SAAAC,2BAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,iBACpB,UAAA;AAAA,IAAAD,2BAAA;AAAA,MAACC,0BAAAA,SAAS;AAAA,MAAT;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAW;AAAA,QAEV,UAAA;AAAA,UAAA,SAASJ,uCAAM,MAAA,UAAWF,2BAAAA,IAAAO,YAAAA,cAAA,EAAa,aAAU,UAAS;AAAA,UAC1D,SAASL,uCAAM,MAAA,SAAUF,2BAAAA,IAAAQ,YAAAA,KAAA,EAAI,aAAU,SAAQ;AAAA,UAC/C,SAASN,uCAAM,MAAA,QAASF,2BAAAA,IAAAS,YAAAA,MAAA,EAAK,aAAU,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAECT,2BAAA,IAAAM,0BAAA,SAAS,OAAT,EAAe,YAAY,iBAAiB,aAAW,MAAC,YAAU,MACjE,UAACD,2BAAAA,KAAAK,2BAAAA,WAAA,EAAU,WAAU,iCAAgC,WAAU,KAC7D,UAAA;AAAA,MAAAV,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMO,YAAA;AAAA,UACN,SAAS,MAAM,WAAWL,uCAAA,MAAM,MAAM;AAAA,UACtC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMQ,YAAA;AAAA,UACN,SAAS,MAAM,WAAWN,uCAAA,MAAM,KAAK;AAAA,UACrC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMS,YAAA;AAAA,UACN,SAAS,MAAM,WAAWP,uCAAA,MAAM,IAAI;AAAA,UACpC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"DesktopThemeSwitcher.cjs","sources":["../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { type ButtonProps, Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden w-full cursor-pointer rounded-lg p-1 text-left disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant=\"none\"\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"names":["jsx","Button","Modes","useState","mode","jsxs","DropDown","CircleDashed","Sun","Moon","Container"],"mappings":";;;;;;;;;;AASA,MAAM,aAA8B,CAAC,EAAE,MAAM,UAAU,GAAG,MAAA,MACxDA,2BAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,2BAAA;AAAA,EAACC,yBAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA,aAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,GACF;AASK,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqBC,uCAAA,MAAM,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAIC,aAAAA,SAAgB,WAAW;AAE7C,QAAA,aAAa,CAACC,UAAgB;AAC9BA,QAAAA,UAASF,6CAAM,QAAQ;AAChB,eAAA,eAAeA,6CAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAASE,KAAI;AAAA,IAAA;AAEf,YAAQA,KAAI;AAAA,EACd;AAEA,QAAM,kBAAkB;AAGtB,SAAAC,2BAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,iBACpB,UAAA;AAAA,IAAAD,2BAAA;AAAA,MAACC,0BAAAA,SAAS;AAAA,MAAT;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAW;AAAA,QAEV,UAAA;AAAA,UAAA,SAASJ,uCAAM,MAAA,UAAWF,2BAAAA,IAAAO,YAAAA,cAAA,EAAa,aAAU,UAAS;AAAA,UAC1D,SAASL,uCAAM,MAAA,SAAUF,2BAAAA,IAAAQ,YAAAA,KAAA,EAAI,aAAU,SAAQ;AAAA,UAC/C,SAASN,uCAAM,MAAA,QAASF,2BAAAA,IAAAS,YAAAA,MAAA,EAAK,aAAU,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAECT,2BAAA,IAAAM,0BAAA,SAAS,OAAT,EAAe,YAAY,iBAAiB,aAAW,MAAC,YAAU,MACjE,UAACD,2BAAAA,KAAAK,2BAAAA,WAAA,EAAU,WAAU,iCAAgC,WAAU,KAC7D,UAAA;AAAA,MAAAV,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMO,YAAA;AAAA,UACN,SAAS,MAAM,WAAWL,uCAAA,MAAM,MAAM;AAAA,UACtC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMQ,YAAA;AAAA,UACN,SAAS,MAAM,WAAWN,uCAAA,MAAM,KAAK;AAAA,UACrC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMS,YAAA;AAAA,UACN,SAAS,MAAM,WAAWP,uCAAA,MAAM,IAAI;AAAA,UACpC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs

@@ -9,7 +9,7 @@ import { Modes } from "./types.mjs";
 const ButtonItem = ({ Icon, children, ...props }) => /* @__PURE__ */ jsx("div", { className: "relative w-full p-0.5", children: /* @__PURE__ */ jsx(
   Button,
   {
-    className: "hover:bg-text/10 focus:bg-text-opposite/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 w-full cursor-pointer rounded-lg p-1 text-left focus:outline-none disabled:text-white/25",
+    className: "hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden w-full cursor-pointer rounded-lg p-1 text-left disabled:text-white/25",
     Icon,
     "data-mode": "system",
     role: "option",