@intlayer/design-system 5.7.8 → 5.8.1-canary.0

package/dist/components/SwitchSelector/index.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, createElement } from "react";
 import { cva } from "class-variance-authority";
 import "@intlayer/config/built";
-import "../../better-auth.8zoxzg-F-D8e0X4ys.js";
+import "../../better-auth.CMQ3rA-I-7umXOENE.js";
 import "@intlayer/editor-react";
 import "../Toaster/Toast.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
@@ -16,37 +16,85 @@ const defaultChoices = [
   { content: "Off", value: false },
   { content: "On", value: true }
 ];
+var SwitchSelectorColor = /* @__PURE__ */ ((SwitchSelectorColor2) => {
+  SwitchSelectorColor2["PRIMARY"] = "primary";
+  SwitchSelectorColor2["SECONDARY"] = "secondary";
+  SwitchSelectorColor2["DESTRUCTIVE"] = "destructive";
+  SwitchSelectorColor2["NEUTRAL"] = "neutral";
+  SwitchSelectorColor2["LIGHT"] = "light";
+  SwitchSelectorColor2["DARK"] = "dark";
+  SwitchSelectorColor2["TEXT"] = "text";
+  return SwitchSelectorColor2;
+})(SwitchSelectorColor || {});
 const switchSelectorVariant = cva(
   "flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]",
   {
     variants: {
       color: {
-        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"
+        [
+          "primary"
+          /* PRIMARY */
+        ]: "border-primary text-primary",
+        [
+          "secondary"
+          /* SECONDARY */
+        ]: "border-secondary text-secondary",
+        [
+          "destructive"
+          /* DESTRUCTIVE */
+        ]: "border-destructive bg-destructive text-destructive",
+        [
+          "neutral"
+          /* NEUTRAL */
+        ]: "border-neutral text-neutral ",
+        [
+          "light"
+          /* LIGHT */
+        ]: "border-white text-white",
+        [
+          "dark"
+          /* DARK */
+        ]: "border-neutral-800 text-neutral-800",
+        [
+          "text"
+          /* TEXT */
+        ]: "border-text text-text"
       }
     },
     defaultVariants: {
       color: "primary"
+      /* PRIMARY */
     }
   }
 );
+var SwitchSelectorSize = /* @__PURE__ */ ((SwitchSelectorSize2) => {
+  SwitchSelectorSize2["SM"] = "sm";
+  SwitchSelectorSize2["MD"] = "md";
+  SwitchSelectorSize2["LG"] = "lg";
+  return SwitchSelectorSize2;
+})(SwitchSelectorSize || {});
 const choiceVariant = cva(
   "z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none",
   {
     variants: {
       size: {
-        sm: "py-1 px-2 text-xs",
-        md: "p-2 text-sm",
-        lg: "p-4 text-base"
+        [
+          "sm"
+          /* SM */
+        ]: "py-1 px-2 text-xs",
+        [
+          "md"
+          /* MD */
+        ]: "p-2 text-sm",
+        [
+          "lg"
+          /* LG */
+        ]: "p-4 text-base"
       }
     },
     defaultVariants: {
       size: "md"
+      /* MD */
     }
   }
 );
@@ -55,13 +103,34 @@ const indicatorVariant = cva(
   {
     variants: {
       color: {
-        primary: "bg-primary aria-selected:text-text",
-        secondary: "bg-secondary aria-selected:text-text",
-        destructive: "bg-destructive aria-selected:text-text",
-        neutral: "bg-neutral aria-selected:text-white ",
-        light: "bg-white aria-selected:text-black",
-        dark: "bg-neutral-800 aria-selected:text-white",
-        text: "bg-text aria-selected:text-text-opposite"
+        [
+          "primary"
+          /* PRIMARY */
+        ]: "bg-primary aria-selected:text-text",
+        [
+          "secondary"
+          /* SECONDARY */
+        ]: "bg-secondary aria-selected:text-text",
+        [
+          "destructive"
+          /* DESTRUCTIVE */
+        ]: "bg-destructive aria-selected:text-text",
+        [
+          "neutral"
+          /* NEUTRAL */
+        ]: "bg-neutral aria-selected:text-white ",
+        [
+          "light"
+          /* LIGHT */
+        ]: "bg-white aria-selected:text-black",
+        [
+          "dark"
+          /* DARK */
+        ]: "bg-neutral-800 aria-selected:text-white",
+        [
+          "text"
+          /* TEXT */
+        ]: "bg-text aria-selected:text-text-opposite"
       }
     }
   }
@@ -140,6 +209,8 @@ const SwitchSelector = ({
   );
 };
 export {
-  SwitchSelector
+  SwitchSelector,
+  SwitchSelectorColor,
+  SwitchSelectorSize
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\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 choiceVariant = cva(\n  'z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary: 'bg-primary aria-selected:text-text',\n        secondary: 'bg-secondary aria-selected:text-text',\n        destructive: 'bg-destructive aria-selected:text-text',\n        neutral: 'bg-neutral aria-selected:text-white ',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-opposite',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n        [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n        [SwitchSelectorColor.DESTRUCTIVE]:\n          'border-destructive bg-destructive text-destructive',\n        [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral ',\n        [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n        [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n        [SwitchSelectorColor.TEXT]: 'border-text text-text',\n      },\n    },\n    defaultVariants: {\n      color: SwitchSelectorColor.PRIMARY,\n    },\n  }\n);\n\nexport enum SwitchSelectorSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [SwitchSelectorSize.SM]: 'py-1 px-2 text-xs',\n        [SwitchSelectorSize.MD]: 'p-2 text-sm',\n        [SwitchSelectorSize.LG]: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: SwitchSelectorSize.MD,\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n        [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n        [SwitchSelectorColor.DESTRUCTIVE]:\n          'bg-destructive aria-selected:text-text',\n        [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white ',\n        [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n        [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n        [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\n          );\n        })}\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["SwitchSelectorColor","SwitchSelectorSize","value"],"mappings":"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"}

package/dist/components/TabSelector/TabSelector.cjs

@@ -5,7 +5,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const classVarianceAuthority = require("class-variance-authority");
 const ReactExports = require("react");
 require("@intlayer/config/built");
-require("../../better-auth.8zoxzg-F-BEBqzpjz.cjs");
+require("../../better-auth.CMQ3rA-I-C2nBKRMa.cjs");
 require("@intlayer/editor-react");
 require("../Toaster/Toast.cjs");
 require("../../hooks/useAsync/useAsyncStateStore.cjs");
@@ -14,6 +14,16 @@ require("deepmerge");
 const hooks_useItemSelector = require("../../hooks/useItemSelector.cjs");
 require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 const utils_cn = require("../../utils/cn.cjs");
+var TabSelectorColor = /* @__PURE__ */ ((TabSelectorColor2) => {
+  TabSelectorColor2["PRIMARY"] = "primary";
+  TabSelectorColor2["SECONDARY"] = "secondary";
+  TabSelectorColor2["DESTRUCTIVE"] = "destructive";
+  TabSelectorColor2["NEUTRAL"] = "neutral";
+  TabSelectorColor2["LIGHT"] = "light";
+  TabSelectorColor2["DARK"] = "dark";
+  TabSelectorColor2["TEXT"] = "text";
+  return TabSelectorColor2;
+})(TabSelectorColor || {});
 const tabSelectorVariant = classVarianceAuthority.cva(
   "relative flex size-full flex-row items-center gap-2",
   {
@@ -108,4 +118,5 @@ const TabSelector = ({
   );
 };
 exports.TabSelector = TabSelector;
+exports.TabSelectorColor = TabSelectorColor;
 //# sourceMappingURL=TabSelector.cjs.map

package/dist/components/TabSelector/TabSelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabSelector.cjs","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":["cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqBA,uBAAAA;AAAAA,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,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmBA,uBAAAA;AAAAA,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;AACzB,QAAM,cAAcC,aAAAA,OAAsB,EAAE;AAC5C,QAAM,eAAeA,aAAAA,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4BC,sBAAAA;AAAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,aAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,SAAAA;AAAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,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,EAAA;AAIR;;"}
+{"version":3,"file":"TabSelector.cjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  cloneElement,\n  useRef,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\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  Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n    color?: TabSelectorColor;\n  };\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 = TabSelectorColor.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":["TabSelectorColor","cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;;AAYO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,WAAA,IAAY;AACZA,oBAAA,aAAA,IAAc;AACdA,oBAAA,SAAA,IAAU;AACVA,oBAAA,OAAA,IAAQ;AACRA,oBAAA,MAAA,IAAO;AACPA,oBAAA,MAAA,IAAO;AAPG,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAUZ,MAAM,qBAAqBC,uBAAAA;AAAAA,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,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmBA,uBAAAA;AAAAA,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;AAiCO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACzB,QAAM,cAAcC,aAAAA,OAAsB,EAAE;AAC5C,QAAM,eAAeA,aAAAA,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4BC,sBAAAA;AAAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,aAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,SAAAA;AAAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,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,EAAA;AAIR;;;"}

package/dist/components/TabSelector/TabSelector.d.ts

@@ -1,5 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes, ReactElement } from 'react';
+export declare enum TabSelectorColor {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    DESTRUCTIVE = "destructive",
+    NEUTRAL = "neutral",
+    LIGHT = "light",
+    DARK = "dark",
+    TEXT = "text"
+}
 declare const tabSelectorVariant: (props?: ({
     color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -11,7 +20,9 @@ type TabSelectorProps<T extends TabProps> = {
     selectedChoice: T['key'];
     onTabClick?: (choice: T['key']) => void;
     hoverable?: boolean;
-} & HTMLAttributes<HTMLElement> & VariantProps<typeof tabSelectorVariant>;
+} & HTMLAttributes<HTMLElement> & Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {
+    color?: TabSelectorColor;
+};
 /**
  *
  * Component that allows the user to select one of the provided choices.

package/dist/components/TabSelector/TabSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,kBAAkB;;8EAkBvB,CAAC;AAmBF,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACnD,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,WAAW,CAAC,GAC7B,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,EAAE,oEAO7C,gBAAgB,CAAC,CAAC,CAAC,4CAkDrB,CAAC"}
+{"version":3,"file":"TabSelector.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAIf,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,kBAAkB;;8EAkBvB,CAAC;AAmBF,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACnD,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,WAAW,CAAC,GAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,EAAE,oEAO7C,gBAAgB,CAAC,CAAC,CAAC,4CAkDrB,CAAC"}

package/dist/components/TabSelector/TabSelector.mjs

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { useRef, cloneElement } from "react";
 import "@intlayer/config/built";
-import "../../better-auth.8zoxzg-F-D8e0X4ys.js";
+import "../../better-auth.CMQ3rA-I-7umXOENE.js";
 import "@intlayer/editor-react";
 import "../Toaster/Toast.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
@@ -12,6 +12,16 @@ import "deepmerge";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import { cn } from "../../utils/cn.mjs";
+var TabSelectorColor = /* @__PURE__ */ ((TabSelectorColor2) => {
+  TabSelectorColor2["PRIMARY"] = "primary";
+  TabSelectorColor2["SECONDARY"] = "secondary";
+  TabSelectorColor2["DESTRUCTIVE"] = "destructive";
+  TabSelectorColor2["NEUTRAL"] = "neutral";
+  TabSelectorColor2["LIGHT"] = "light";
+  TabSelectorColor2["DARK"] = "dark";
+  TabSelectorColor2["TEXT"] = "text";
+  return TabSelectorColor2;
+})(TabSelectorColor || {});
 const tabSelectorVariant = cva(
   "relative flex size-full flex-row items-center gap-2",
   {
@@ -106,6 +116,7 @@ const TabSelector = ({
   );
 };
 export {
-  TabSelector
+  TabSelector,
+  TabSelectorColor
 };
 //# sourceMappingURL=TabSelector.mjs.map

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: '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,IACR;AAAA,IAEF,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;AACzB,QAAM,cAAc,OAAsB,EAAE;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,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;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,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,EAAA;AAIR;"}
+{"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  cloneElement,\n  useRef,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\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  Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n    color?: TabSelectorColor;\n  };\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 = TabSelectorColor.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":["TabSelectorColor"],"mappings":";;;;;;;;;;;;;;AAYO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,WAAA,IAAY;AACZA,oBAAA,aAAA,IAAc;AACdA,oBAAA,SAAA,IAAU;AACVA,oBAAA,OAAA,IAAQ;AACRA,oBAAA,MAAA,IAAO;AACPA,oBAAA,MAAA,IAAO;AAPG,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAUZ,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,IACR;AAAA,IAEF,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;AAiCO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACzB,QAAM,cAAc,OAAsB,EAAE;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MAAA;AAAA,MAEF,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,KAAK,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;AACxB,0BAAY,QAAQ,KAAK,IAAI;AAAA,YAC/B;AAAA,UAAA,CACe;AAAA,QACnB,CAAC;AAAA,QACA,2BACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,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,EAAA;AAIR;"}

package/dist/components/TabSelector/index.cjs

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_TabSelector_TabSelector = require("./TabSelector.cjs");
 exports.TabSelector = components_TabSelector_TabSelector.TabSelector;
+exports.TabSelectorColor = components_TabSelector_TabSelector.TabSelectorColor;
 //# sourceMappingURL=index.cjs.map

package/dist/components/TabSelector/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/TabSelector/index.d.ts

@@ -1,2 +1,3 @@
 export * from './TabSelector';
+export { TabSelectorColor } from './TabSelector';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TabSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/TabSelector/index.mjs

@@ -1,5 +1,6 @@
-import { TabSelector } from "./TabSelector.mjs";
+import { TabSelector, TabSelectorColor } from "./TabSelector.mjs";
 export {
-  TabSelector
+  TabSelector,
+  TabSelectorColor
 };
 //# sourceMappingURL=index.mjs.map

package/dist/components/Table/Table.cjs

@@ -0,0 +1,58 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-react");
+const ReactExports = require("react");
+const utils_cn = require("../../utils/cn.cjs");
+const components_Button_Button = require("../Button/Button.cjs");
+const components_ExpandCollapse_ExpandCollapse = require("../ExpandCollapse/ExpandCollapse.cjs");
+const components_Modal_Modal = require("../Modal/Modal.cjs");
+const Table = ({ className, isRollable, ...props }) => {
+  const [isModalOpen, setIsModalOpen] = ReactExports.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-48 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      components_Button_Button.Button,
+      {
+        variant: "hoverable",
+        size: "icon-md",
+        onClick: () => {
+          setIsModalOpen(true);
+        },
+        label: "Move",
+        Icon: lucideReact.MoveDiagonal
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_ExpandCollapse_ExpandCollapse.ExpandCollapse, { isRollable, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "table",
+      {
+        className: utils_cn.cn(
+          "max-w-full table-auto text-left min-w-full",
+          className
+        ),
+        ...props
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_Modal_Modal.Modal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        size: components_Modal_Modal.ModalSize.XL,
+        hasCloseButton: true,
+        children: isModalOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            className: utils_cn.cn(
+              "max-w-full table-auto text-left min-w-full",
+              className
+            ),
+            ...props
+          }
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+      }
+    )
+  ] });
+};
+exports.Table = Table;
+//# sourceMappingURL=Table.cjs.map

package/dist/components/Table/Table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.cjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n  isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <div className=\"sticky top-48 z-10\">\n        <div className=\"absolute top-4 right-2\">\n          <Button\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            onClick={() => {\n              setIsModalOpen(true);\n            }}\n            label=\"Move\"\n            Icon={MoveDiagonal}\n          />\n        </div>\n      </div>\n      <ExpandCollapse isRollable={isRollable}>\n        <table\n          className={cn(\n            'max-w-full table-auto text-left min-w-full',\n            className\n          )}\n          {...props}\n        />\n      </ExpandCollapse>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size={ModalSize.XL}\n        hasCloseButton\n      >\n        {isModalOpen ? (\n          <div className=\"grid\">\n            <table\n              className={cn(\n                'max-w-full table-auto text-left min-w-full',\n                className\n              )}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"names":["useState","jsxs","jsx","Button","MoveDiagonal","ExpandCollapse","cn","Modal","ModalSize","Fragment"],"mappings":";;;;;;;;;;AAaO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,KAAK;AAEpD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAU,sBACb,UAAAA,+BAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAACC,yBAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAMC,YAAAA;AAAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACAF,2BAAAA,IAACG,yCAAAA,kBAAe,YACd,UAAAH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI,SAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IAEAJ,2BAAAA;AAAAA,MAACK,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAMC,uBAAAA,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACCN,+BAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEAJ,+BAAAO,WAAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, FC } from 'react';
+type TableProps = HTMLAttributes<HTMLTableElement> & {
+    isRollable?: boolean;
+};
+export declare const Table: FC<TableProps>;
+export {};
+//# sourceMappingURL=Table.d.ts.map

package/dist/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1D,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAkDhC,CAAC"}

package/dist/components/Table/Table.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { MoveDiagonal } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
+import { Modal, ModalSize } from "../Modal/Modal.mjs";
+const Table = ({ className, isRollable, ...props }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "sticky top-48 z-10", children: /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-2", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "hoverable",
+        size: "icon-md",
+        onClick: () => {
+          setIsModalOpen(true);
+        },
+        label: "Move",
+        Icon: MoveDiagonal
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(ExpandCollapse, { isRollable, children: /* @__PURE__ */ jsx(
+      "table",
+      {
+        className: cn(
+          "max-w-full table-auto text-left min-w-full",
+          className
+        ),
+        ...props
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        size: ModalSize.XL,
+        hasCloseButton: true,
+        children: isModalOpen ? /* @__PURE__ */ jsx("div", { className: "grid", children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            className: cn(
+              "max-w-full table-auto text-left min-w-full",
+              className
+            ),
+            ...props
+          }
+        ) }) : /* @__PURE__ */ jsx(Fragment, {})
+      }
+    )
+  ] });
+};
+export {
+  Table
+};
+//# sourceMappingURL=Table.mjs.map

package/dist/components/Table/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n  isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <div className=\"sticky top-48 z-10\">\n        <div className=\"absolute top-4 right-2\">\n          <Button\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            onClick={() => {\n              setIsModalOpen(true);\n            }}\n            label=\"Move\"\n            Icon={MoveDiagonal}\n          />\n        </div>\n      </div>\n      <ExpandCollapse isRollable={isRollable}>\n        <table\n          className={cn(\n            'max-w-full table-auto text-left min-w-full',\n            className\n          )}\n          {...props}\n        />\n      </ExpandCollapse>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size={ModalSize.XL}\n        hasCloseButton\n      >\n        {isModalOpen ? (\n          <div className=\"grid\">\n            <table\n              className={cn(\n                'max-w-full table-auto text-left min-w-full',\n                className\n              )}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAU,sBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACA,oBAAC,kBAAe,YACd,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAM,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACC,oBAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEA,oBAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;"}

package/dist/components/Table/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_Table_Table = require("./Table.cjs");
+exports.Table = components_Table_Table.Table;
+//# sourceMappingURL=index.cjs.map

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

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

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

@@ -0,0 +1,2 @@
+export * from './Table';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Table/index.mjs

@@ -0,0 +1,5 @@
+import { Table } from "./Table.mjs";
+export {
+  Table
+};
+//# sourceMappingURL=index.mjs.map

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

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

package/dist/components/Table/table.content.cjs

@@ -0,0 +1,24 @@
+"use strict";
+const intlayer = require("intlayer");
+const tableContent = {
+  key: "table",
+  content: {
+    show: intlayer.t({
+      en: "Show all table content",
+      fr: "Afficher tout le contenu du tableau",
+      es: "Mostrar todo el contenido de la tabla",
+      "en-GB": "Show all table content",
+      de: "Alle Tabellendaten anzeigen",
+      ja: "テーブルのすべての内容を表示",
+      ko: "테이블의 모든 내용 표시",
+      zh: "显示表格的所有内容",
+      it: "Mostra tutto il contenuto della tabella",
+      pt: "Mostrar todo o conteúdo da tabela",
+      hi: "सभी तालिका सामग्री दिखाएं",
+      ar: "اظهار جميع محتويات الجدول",
+      ru: "Показать все данные таблицы"
+    })
+  }
+};
+module.exports = tableContent;
+//# sourceMappingURL=table.content.cjs.map

package/dist/components/Table/table.content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.content.cjs","sources":["../../../src/components/Table/table.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst tableContent = {\n  key: 'table',\n  content: {\n    show: t({\n      en: 'Show all table content',\n      fr: 'Afficher tout le contenu du tableau',\n      es: 'Mostrar todo el contenido de la tabla',\n      'en-GB': 'Show all table content',\n      de: 'Alle Tabellendaten anzeigen',\n      ja: 'テーブルのすべての内容を表示',\n      ko: '테이블의 모든 내용 표시',\n      zh: '显示表格的所有内容',\n      it: 'Mostra tutto il contenuto della tabella',\n      pt: 'Mostrar todo o conteúdo da tabela',\n      hi: 'सभी तालिका सामग्री दिखाएं',\n      ar: 'اظهار جميع محتويات الجدول',\n      ru: 'Показать все данные таблицы',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"names":["t"],"mappings":";;AAEA,MAAM,eAAe;AAAA,EACnB,KAAK;AAAA,EACL,SAAS;AAAA,IACP,MAAMA,SAAAA,EAAE;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EAAA;AAEL;;"}