@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/components/TabSelector/TabSelector.cjs

@@ -1,125 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classVarianceAuthority = require("class-variance-authority");
-const ReactExports = require("react");
-require("@intlayer/config/built");
-require("../../better-auth.CiuwFiHM-C2nBKRMa.cjs");
-require("@intlayer/editor-react");
-require("@tanstack/react-query");
-require("@intlayer/api");
-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",
-  {
-    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"
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  }
-);
-const indicatorVariant = classVarianceAuthority.cva(
-  "absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
-  {
-    variants: {
-      color: {
-        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-opposite"
-      }
-    }
-  }
-);
-const TabSelector = ({
-  tabs,
-  selectedChoice,
-  onTabClick,
-  color = "primary",
-  hoverable = false,
-  className
-}) => {
-  const optionsRefs = ReactExports.useRef([]);
-  const indicatorRef = ReactExports.useRef(null);
-  const { choiceIndicatorPosition } = hooks_useItemSelector.useItemSelector(
-    optionsRefs,
-    void 0,
-    hoverable
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: utils_cn.cn(
-        tabSelectorVariant({
-          color
-        }),
-        className
-      ),
-      "aria-orientation": "horizontal",
-      "aria-multiselectable": "false",
-      role: "tablist",
-      children: [
-        tabs.map((Tab, index) => {
-          const key = Tab.key;
-          const isSelected = selectedChoice === key;
-          return ReactExports.cloneElement(Tab, {
-            key: key ?? index,
-            role: "tab",
-            onClick: (e) => {
-              Tab.props?.onClick?.(e);
-              onTabClick?.(key);
-            },
-            "aria-selected": isSelected,
-            "data-active": isSelected,
-            tabIndex: isSelected ? 0 : -1,
-            ref: (el) => {
-              optionsRefs.current[index] = el;
-            }
-          });
-        }),
-        choiceIndicatorPosition && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils_cn.cn(
-              indicatorVariant({
-                color
-              })
-            ),
-            style: choiceIndicatorPosition,
-            ref: indicatorRef
-          },
-          `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`
-        )
-      ]
-    }
-  );
-};
-exports.TabSelector = TabSelector;
-exports.TabSelectorColor = TabSelectorColor;
-//# sourceMappingURL=TabSelector.cjs.map

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

@@ -1 +0,0 @@
-{"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\ntype 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 | `${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: (e: unknown) => {\n            Tab.props?.onClick?.(e);\n            onTabClick?.(key);\n          },\n          'aria-selected': isSelected,\n          'data-active': isSelected as unknown as string,\n          tabIndex: isSelected ? 0 : -1,\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,CAAC,MAAe;AACvB,kBAAI,OAAO,UAAU,CAAC;AACtB,2BAAa,GAAG;AAAA,YAClB;AAAA,YACA,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,UAAU,aAAa,IAAI;AAAA,YAC3B,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,45 +0,0 @@
-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;
-type TabProps = HTMLAttributes<HTMLElement> & {
-    key: string | number;
-};
-type TabSelectorProps<T extends TabProps> = {
-    tabs: ReactElement<T>[];
-    selectedChoice: T['key'];
-    onTabClick?: (choice: T['key']) => void;
-    hoverable?: boolean;
-} & HTMLAttributes<HTMLElement> & Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {
-    color?: TabSelectorColor | `${TabSelectorColor}`;
-};
-/**
- *
- * Component that allows the user to select one of the provided choices.
- *
- * Example:
- * ```jsx
- * <TabSelector
- *   selectedChoice="option1"
- *   onTabClick={(choice) => console.log(choice)}
- *   hoverable={true}
- * >
- *   <Button key="option1"/>
- *   <Button key="option2"/>
- *   <Button key="option3"/>
- * </TabSelector>
- * ```
- */
-export declare const TabSelector: <T extends TabProps>({ tabs, selectedChoice, onTabClick, color, hoverable, className, }: TabSelectorProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=TabSelector.d.ts.map

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

@@ -1 +0,0 @@
-{"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,KAAK,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC5C,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,GAAG,GAAG,gBAAgB,EAAE,CAAC;CAClD,CAAC;AAEJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,EAAE,oEAO7C,gBAAgB,CAAC,CAAC,CAAC,4CAuDrB,CAAC"}

package/dist/components/TabSelector/TabSelector.mjs

@@ -1,125 +0,0 @@
-"use client";
-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.CiuwFiHM-7umXOENE.js";
-import "@intlayer/editor-react";
-import "@tanstack/react-query";
-import "@intlayer/api";
-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",
-  {
-    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"
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  }
-);
-const indicatorVariant = cva(
-  "absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
-  {
-    variants: {
-      color: {
-        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-opposite"
-      }
-    }
-  }
-);
-const TabSelector = ({
-  tabs,
-  selectedChoice,
-  onTabClick,
-  color = "primary",
-  hoverable = false,
-  className
-}) => {
-  const optionsRefs = useRef([]);
-  const indicatorRef = useRef(null);
-  const { choiceIndicatorPosition } = useItemSelector(
-    optionsRefs,
-    void 0,
-    hoverable
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        tabSelectorVariant({
-          color
-        }),
-        className
-      ),
-      "aria-orientation": "horizontal",
-      "aria-multiselectable": "false",
-      role: "tablist",
-      children: [
-        tabs.map((Tab, index) => {
-          const key = Tab.key;
-          const isSelected = selectedChoice === key;
-          return cloneElement(Tab, {
-            key: key ?? index,
-            role: "tab",
-            onClick: (e) => {
-              Tab.props?.onClick?.(e);
-              onTabClick?.(key);
-            },
-            "aria-selected": isSelected,
-            "data-active": isSelected,
-            tabIndex: isSelected ? 0 : -1,
-            ref: (el) => {
-              optionsRefs.current[index] = el;
-            }
-          });
-        }),
-        choiceIndicatorPosition && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              indicatorVariant({
-                color
-              })
-            ),
-            style: choiceIndicatorPosition,
-            ref: indicatorRef
-          },
-          `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`
-        )
-      ]
-    }
-  );
-};
-export {
-  TabSelector,
-  TabSelectorColor
-};
-//# sourceMappingURL=TabSelector.mjs.map

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

@@ -1 +0,0 @@
-{"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\ntype 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 | `${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: (e: unknown) => {\n            Tab.props?.onClick?.(e);\n            onTabClick?.(key);\n          },\n          'aria-selected': isSelected,\n          'data-active': isSelected as unknown as string,\n          tabIndex: isSelected ? 0 : -1,\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,CAAC,MAAe;AACvB,kBAAI,OAAO,UAAU,CAAC;AACtB,2BAAa,GAAG;AAAA,YAClB;AAAA,YACA,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,UAAU,aAAa,IAAI;AAAA,YAC3B,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

@@ -1,6 +0,0 @@
-"use strict";
-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 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

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

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

@@ -1 +0,0 @@
-{"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,6 +0,0 @@
-import { TabSelector, TabSelectorColor } from "./TabSelector.mjs";
-export {
-  TabSelector,
-  TabSelectorColor
-};
-//# sourceMappingURL=index.mjs.map

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

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

package/dist/components/Table/Table.cjs

@@ -1,65 +0,0 @@
-"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,
-        className: "max-w-full overflow-x-auto",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "table",
-          {
-            className: utils_cn.cn(
-              "max-w-full overflow-x-auto table-auto text-left min-w-full bg-background",
-              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

@@ -1 +0,0 @@
-{"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\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n *   <thead>\n *     <tr>\n *       <th>Name</th>\n *       <th>Email</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n *   <thead>\n *     <tr>\n *       <th>Product</th>\n *       <th>Price</th>\n *       <th>Stock</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>Laptop</td>\n *       <td>$999</td>\n *       <td>15</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n  isRollable?: boolean;\n};\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Name</th>\n *       <th scope=\"col\">Email</th>\n *       <th scope=\"col\">Status</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n *           Active\n *         </span>\n *       </td>\n *     </tr>\n *     <tr>\n *       <td>Jane Smith</td>\n *       <td>jane@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n *           Pending\n *         </span>\n *       </td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n *   isRollable\n *   className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n *   <thead className=\"bg-gray-50\">\n *     <tr>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Product ID\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Name\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Category\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Price\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Stock\n *       </th>\n *     </tr>\n *   </thead>\n *   <tbody className=\"bg-white divide-y divide-gray-200\">\n *     {products.map((product) => (\n *       <tr key={product.id} className=\"hover:bg-gray-50\">\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           #{product.id}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n *           {product.name}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.category}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           ${product.price.toFixed(2)}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.stock} units\n *         </td>\n *       </tr>\n *     ))}\n *   </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n *   <thead>\n *     <tr className=\"border-b-2 border-gray-300\">\n *       <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n *     </tr>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\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\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto\"\n      >\n        <table\n          className={cn(\n            'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\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":";;;;;;;;;;AAqMO,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;AAAAA,MAACG,yCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGFJ,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

@@ -1,191 +0,0 @@
-import { HTMLAttributes, FC } from 'react';
-/**
- * Properties for the Table component that extends standard HTML table attributes
- *
- * @interface TableProps
- * @extends {HTMLAttributes<HTMLTableElement>}
- *
- * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper
- * @property {string} [className] - Additional CSS classes for custom styling
- * @property {ReactNode} children - The table content including thead, tbody, tfoot elements
- *
- * @example
- * ```tsx
- * // Basic table usage
- * <Table>
- *   <thead>
- *     <tr>
- *       <th>Name</th>
- *       <th>Email</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr>
- *       <td>John Doe</td>
- *       <td>john@example.com</td>
- *     </tr>
- *   </tbody>
- * </Table>
- *
- * // Collapsible table with custom styling
- * <Table isRollable className="border border-gray-300 rounded-lg">
- *   <thead>
- *     <tr>
- *       <th>Product</th>
- *       <th>Price</th>
- *       <th>Stock</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr>
- *       <td>Laptop</td>
- *       <td>$999</td>
- *       <td>15</td>
- *     </tr>
- *   </tbody>
- * </Table>
- * ```
- */
-type TableProps = HTMLAttributes<HTMLTableElement> & {
-    isRollable?: boolean;
-};
-/**
- * Table component that provides an enhanced table experience with modal expansion and collapsible content
- *
- * The Table component wraps a standard HTML table element with additional functionality:
- * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal
- * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving
- * - **Responsive Design**: Handles large tables gracefully with modal overflow
- * - **Sticky Controls**: Table controls remain accessible even when scrolling
- *
- * ## Features
- * - **Modal View**: Full-screen modal for better viewing of large tables
- * - **Expand/Collapse**: Optional collapsible wrapper to save space
- * - **Responsive**: Handles overflow and responsive behavior automatically
- * - **Accessibility**: Maintains proper table semantics and keyboard navigation
- * - **Customizable**: Supports all standard HTML table attributes and styling
- *
- * ## Best Practices
- * - Use semantic HTML table structure (thead, tbody, tfoot)
- * - Provide proper column headers with scope attributes
- * - Use the isRollable prop for large tables that might need space management
- * - Apply consistent styling through the className prop
- * - Consider pagination for very large datasets
- *
- * @param {TableProps} props - The properties for the Table component
- * @returns {JSX.Element} The rendered table with enhanced functionality
- *
- * @example
- * ```tsx
- * // Simple data table
- * <Table>
- *   <thead>
- *     <tr>
- *       <th scope="col">Name</th>
- *       <th scope="col">Email</th>
- *       <th scope="col">Status</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr>
- *       <td>John Doe</td>
- *       <td>john@example.com</td>
- *       <td>
- *         <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
- *           Active
- *         </span>
- *       </td>
- *     </tr>
- *     <tr>
- *       <td>Jane Smith</td>
- *       <td>jane@example.com</td>
- *       <td>
- *         <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
- *           Pending
- *         </span>
- *       </td>
- *     </tr>
- *   </tbody>
- * </Table>
- *
- * // Large collapsible table with custom styling
- * <Table
- *   isRollable
- *   className="border border-gray-200 rounded-lg overflow-hidden"
- * >
- *   <thead className="bg-gray-50">
- *     <tr>
- *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
- *         Product ID
- *       </th>
- *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
- *         Name
- *       </th>
- *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
- *         Category
- *       </th>
- *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
- *         Price
- *       </th>
- *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
- *         Stock
- *       </th>
- *     </tr>
- *   </thead>
- *   <tbody className="bg-white divide-y divide-gray-200">
- *     {products.map((product) => (
- *       <tr key={product.id} className="hover:bg-gray-50">
- *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
- *           #{product.id}
- *         </td>
- *         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
- *           {product.name}
- *         </td>
- *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
- *           {product.category}
- *         </td>
- *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
- *           ${product.price.toFixed(2)}
- *         </td>
- *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
- *           {product.stock} units
- *         </td>
- *       </tr>
- *     ))}
- *   </tbody>
- * </Table>
- *
- * // Financial data table with formatted numbers
- * <Table className="w-full border-collapse">
- *   <thead>
- *     <tr className="border-b-2 border-gray-300">
- *       <th scope="col" className="text-left py-3 px-4">Quarter</th>
- *       <th scope="col" className="text-right py-3 px-4">Revenue</th>
- *       <th scope="col" className="text-right py-3 px-4">Profit</th>
- *       <th scope="col" className="text-right py-3 px-4">Growth</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr className="border-b border-gray-200">
- *       <td className="py-3 px-4 font-medium">Q1 2024</td>
- *       <td className="py-3 px-4 text-right">$2,450,000</td>
- *       <td className="py-3 px-4 text-right text-green-600">$345,000</td>
- *       <td className="py-3 px-4 text-right text-green-600">+12.5%</td>
- *     </tr>
- *     <tr className="border-b border-gray-200">
- *       <td className="py-3 px-4 font-medium">Q2 2024</td>
- *       <td className="py-3 px-4 text-right">$2,780,000</td>
- *       <td className="py-3 px-4 text-right text-green-600">$398,000</td>
- *       <td className="py-3 px-4 text-right text-green-600">+13.5%</td>
- *     </tr>
- *   </tbody>
- * </Table>
- * ```
- *
- * @see {@link ExpandCollapse} - Component used for collapsible table content
- * @see {@link Modal} - Component used for full-screen table view
- * @see {@link Button} - Component used for the modal trigger button
- */
-export declare const Table: FC<TableProps>;
-export {};
-//# sourceMappingURL=Table.d.ts.map

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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwIG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDhC,CAAC"}