@intlayer/design-system 8.1.2 → 8.1.3

package/dist/esm/components/Tab/TabContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabContext.mjs","names":[],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n  useContext,\n  useState,\n} from 'react';\n\ntype TabContextValue = {\n  tabsValues: Record<string, any>;\n  setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const TabContext = createContext<TabContextValue>({\n  tabsValues: {},\n  setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useTabContext = () => useContext(TabContext);\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n  const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n  return (\n    <TabContext\n      value={{\n        tabsValues,\n        setTabsValues,\n      }}\n    >\n      {children}\n    </TabContext>\n  );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAa,aAAa,cAA+B;CACvD,YAAY,EAAE;CACd,sBAAsB;CACvB,CAAC;;;;AAKF,MAAa,sBAAsB,WAAW,WAAW;;;;AAKzD,MAAa,eAAsC,EAAE,eAAe;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAA8B,EAAE,CAAC;AAErE,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACD;EAEA;GACU"}
+{"version":3,"file":"TabContext.mjs","names":[],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n  useContext,\n  useState,\n} from 'react';\n\ntype TabContextValue = {\n  tabsValues: Record<string, any>;\n  setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const TabContext = createContext<TabContextValue>({\n  tabsValues: {},\n  setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useTabContext = () => useContext(TabContext);\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n  const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n  return (\n    <TabContext\n      value={{\n        tabsValues,\n        setTabsValues,\n      }}\n    >\n      {children}\n    </TabContext>\n  );\n};\n"],"mappings":"yHAoBA,MAAa,EAAa,EAA+B,CACvD,WAAY,EAAE,CACd,mBAAsB,IACvB,CAAC,CAKW,MAAsB,EAAW,EAAW,CAK5C,GAAsC,CAAE,cAAe,CAClE,GAAM,CAAC,EAAY,GAAiB,EAA8B,EAAE,CAAC,CAErE,OACE,EAAC,EAAA,CACC,MAAO,CACL,aACA,gBACD,CAEA,YACU"}

package/dist/esm/components/Tab/index.mjs

@@ -1,3 +1 @@
-import { Tab } from "./Tab.mjs";
-
-export { Tab };
+import{Tab as e}from"./Tab.mjs";export{e as Tab};

package/dist/esm/components/TabSelector/TabSelector.mjs

@@ -1,112 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
-import { cloneElement, useEffect, useRef } from "react";
-import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/TabSelector/TabSelector.tsx
-let TabSelectorColor = /* @__PURE__ */ function(TabSelectorColor) {
-	TabSelectorColor["PRIMARY"] = "primary";
-	TabSelectorColor["SECONDARY"] = "secondary";
-	TabSelectorColor["DESTRUCTIVE"] = "destructive";
-	TabSelectorColor["NEUTRAL"] = "neutral";
-	TabSelectorColor["LIGHT"] = "light";
-	TabSelectorColor["DARK"] = "dark";
-	TabSelectorColor["TEXT"] = "text";
-	return TabSelectorColor;
-}({});
-const tabSelectorVariant = cva("relative z-0 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 -z-1 rounded-lg 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"
-		},
-		orientation: {
-			horizontal: "top-0 h-full w-auto transition-[left,width]",
-			vertical: "left-0 h-auto w-full transition-[top,height]"
-		}
-	},
-	defaultVariants: { orientation: "horizontal" }
-});
-/**
-*
-* 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>
-* ```
-*/
-const TabSelector = ({ tabs, selectedChoice, onTabClick, color = TabSelectorColor.PRIMARY, hoverable = false, orientation = "horizontal", className }) => {
-	const optionsRefs = useRef([]);
-	const indicatorRef = useRef(null);
-	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, {
-		isHoverable: hoverable,
-		orientation
-	});
-	useEffect(() => {
-		calculatePosition();
-	}, [selectedChoice, tabs]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn(tabSelectorVariant({ color }), className),
-		"aria-orientation": orientation,
-		"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,
-				orientation
-			})),
-			style: choiceIndicatorPosition,
-			ref: indicatorRef
-		}, `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`)]
-	});
-};
-
-//#endregion
-export { TabSelector, TabSelectorColor };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useItemSelector as t}from"../../hooks/useItemSelector.mjs";import{cloneElement as n,useEffect as r,useRef as i}from"react";import{cva as a}from"class-variance-authority";import{jsx as o,jsxs as s}from"react/jsx-runtime";let c=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e}({});const l=a(`relative z-0 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`}}),u=a(`absolute -z-1 rounded-lg 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`},orientation:{horizontal:`top-0 h-full w-auto transition-[left,width]`,vertical:`left-0 h-auto w-full transition-[top,height]`}},defaultVariants:{orientation:`horizontal`}}),d=({tabs:a,selectedChoice:d,onTabClick:f,color:p=c.PRIMARY,hoverable:m=!1,orientation:h=`horizontal`,className:g})=>{let _=i([]),v=i(null),{choiceIndicatorPosition:y,calculatePosition:b}=t(_,{isHoverable:m,orientation:h});return r(()=>{b()},[d,a]),s(`div`,{className:e(l({color:p}),g),"aria-orientation":h,"aria-multiselectable":`false`,role:`tablist`,children:[a.map((e,t)=>{let r=e.key,i=d===r;return n(e,{key:r??t,role:`tab`,onClick:t=>{e.props?.onClick?.(t),f?.(r)},"aria-selected":i,"data-active":i,tabIndex:i?0:-1,ref:e=>{_.current[t]=e}})}),y&&o(`div`,{className:e(u({color:p,orientation:h})),style:y,ref:v},`${d}${JSON.stringify(a.map(e=>e.key))}`)]})};export{d as TabSelector,c as TabSelectorColor};
 //# sourceMappingURL=TabSelector.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ItemSelectorOrientation,\n  useItemSelector,\n} from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  useEffect,\n  useRef,\n} from 'react';\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 z-0 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 -z-1 rounded-lg 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      orientation: {\n        horizontal: 'top-0 h-full w-auto transition-[left,width]',\n        vertical: 'left-0 h-auto w-full transition-[top,height]',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n  key: string | number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n  tabs: ReactElement<T>[];\n  selectedChoice: T['key'];\n  onTabClick?: (choice: T['key']) => void;\n  hoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\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 TabSelectorItemProps>({\n  tabs,\n  selectedChoice,\n  onTabClick,\n  color = TabSelectorColor.PRIMARY,\n  hoverable = false,\n  orientation = 'horizontal',\n  className,\n}: TabSelectorProps<T>) => {\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    { isHoverable: hoverable, orientation }\n  );\n\n  useEffect(() => {\n    calculatePosition();\n  }, [selectedChoice, tabs]);\n\n  return (\n    <div\n      className={cn(\n        tabSelectorVariant({\n          color,\n        }),\n        className\n      )}\n      aria-orientation={orientation}\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: MouseEvent<HTMLElement>) => {\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              orientation,\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"],"mappings":";;;;;;;;;AAiBA,IAAY,8DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;EACP,EACF;CACD,iBAAiB,EACf,OAAO,WACR;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,mFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,YAAY;GACZ,UAAU;GACX;EACF;CACD,iBAAiB,EACf,aAAa,cACd;CACF,CACF;;;;;;;;;;;;;;;;;;AAkCD,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,iBAAiB,SACzB,YAAY,OACZ,cAAc,cACd,gBACyB;CACzB,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EAAE,aAAa;EAAW;EAAa,CACxC;AAED,iBAAgB;AACd,qBAAmB;IAClB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;aAEJ,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;AAEtC,UAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;AACvC,SAAI,OAAO,UAAU,EAAE;AACvB,kBAAa,IAAI;;IAEnB,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;AACxB,iBAAY,QAAQ,SAAS;;IAEhC,CAAiB;IAClB,EACD,2BACC,oBAAC;GACC,WAAW,GACT,iBAAiB;IACf;IACA;IACD,CAAC,CACH;GACD,OAAO;GACP,KAAK;KACA,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE;GAEA"}
+{"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ItemSelectorOrientation,\n  useItemSelector,\n} from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  useEffect,\n  useRef,\n} from 'react';\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 z-0 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 -z-1 rounded-lg 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      orientation: {\n        horizontal: 'top-0 h-full w-auto transition-[left,width]',\n        vertical: 'left-0 h-auto w-full transition-[top,height]',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n  key: string | number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n  tabs: ReactElement<T>[];\n  selectedChoice: T['key'];\n  onTabClick?: (choice: T['key']) => void;\n  hoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\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 TabSelectorItemProps>({\n  tabs,\n  selectedChoice,\n  onTabClick,\n  color = TabSelectorColor.PRIMARY,\n  hoverable = false,\n  orientation = 'horizontal',\n  className,\n}: TabSelectorProps<T>) => {\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    { isHoverable: hoverable, orientation }\n  );\n\n  useEffect(() => {\n    calculatePosition();\n  }, [selectedChoice, tabs]);\n\n  return (\n    <div\n      className={cn(\n        tabSelectorVariant({\n          color,\n        }),\n        className\n      )}\n      aria-orientation={orientation}\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: MouseEvent<HTMLElement>) => {\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              orientation,\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"],"mappings":"wRAiBA,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,YAAA,cACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,cAGF,MAAM,EAAqB,EACzB,0DACA,CACE,SAAU,CACR,MAAO,CACL,QAAS,8BACT,UAAW,kCACX,YAAa,qDACb,QAAS,8BACT,MAAO,0BACP,KAAM,sCACN,KAAM,wBACP,CACF,CACD,gBAAiB,CACf,MAAO,UACR,CACF,CACF,CAEK,EAAmB,EACvB,kFACA,CACE,SAAU,CACR,MAAO,CACL,QAAS,wCACT,UAAW,0CACX,YAAa,4CACb,QAAS,4CACT,MAAO,uCACP,KAAM,6CACN,KAAM,8CACP,CACD,YAAa,CACX,WAAY,8CACZ,SAAU,+CACX,CACF,CACD,gBAAiB,CACf,YAAa,aACd,CACF,CACF,CAkCY,GAA+C,CAC1D,OACA,iBACA,aACA,QAAQ,EAAiB,QACzB,YAAY,GACZ,cAAc,aACd,eACyB,CACzB,IAAM,EAAc,EAAsB,EAAE,CAAC,CACvC,EAAe,EAA8B,KAAK,CAClD,CAAE,0BAAyB,qBAAsB,EACrD,EACA,CAAE,YAAa,EAAW,cAAa,CACxC,CAMD,OAJA,MAAgB,CACd,GAAmB,EAClB,CAAC,EAAgB,EAAK,CAAC,CAGxB,EAAC,MAAA,CACC,UAAW,EACT,EAAmB,CACjB,QACD,CAAC,CACF,EACD,CACD,mBAAkB,EAClB,uBAAqB,QACrB,KAAK,oBAEJ,EAAK,KAAK,EAAK,IAAU,CACxB,IAAM,EAAM,EAAI,IAEV,EAAa,IAAmB,EAEtC,OAAO,EAAa,EAAK,CACvB,IAAK,GAAO,EACZ,KAAM,MACN,QAAU,GAA+B,CACvC,EAAI,OAAO,UAAU,EAAE,CACvB,IAAa,EAAI,EAEnB,gBAAiB,EACjB,cAAe,EACf,SAAU,EAAa,EAAI,GAC3B,IAAM,GAAoB,CACxB,EAAY,QAAQ,GAAS,GAEhC,CAAiB,EAClB,CACD,GACC,EAAC,MAAA,CACC,UAAW,EACT,EAAiB,CACf,QACA,cACD,CAAC,CACH,CACD,MAAO,EACP,IAAK,GACA,GAAG,IAAiB,KAAK,UAAU,EAAK,IAAK,GAAQ,EAAI,IAAI,CAAC,GACnE,CAAA,EAEA"}

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

@@ -1,3 +1 @@
-import { TabSelector, TabSelectorColor } from "./TabSelector.mjs";
-
-export { TabSelector, TabSelectorColor };
+import{TabSelector as e,TabSelectorColor as t}from"./TabSelector.mjs";export{e as TabSelector,t as TabSelectorColor};

package/dist/esm/components/Table/Table.mjs

@@ -1,196 +1,2 @@
-'use client';
-
-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";
-import { MoveDiagonal } from "lucide-react";
-import { useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/Table/Table.tsx
-/**
-* 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
-*/
-const Table = ({ className, isRollable = false, displayModal, ...props }) => {
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		children: [
-			displayModal && /* @__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,
-				className: "max-w-full overflow-x-auto",
-				children: /* @__PURE__ */ jsx("table", {
-					className: cn("min-w-full max-w-full table-auto overflow-x-auto bg-background text-left", 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("min-w-full max-w-full table-auto text-left", className),
-						...props
-					})
-				}) : /* @__PURE__ */ jsx(Fragment$1, {})
-			})
-		]
-	});
-};
-
-//#endregion
-export { Table };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t}from"../Button/Button.mjs";import{ExpandCollapse as n}from"../ExpandCollapse/ExpandCollapse.mjs";import{Modal as r,ModalSize as i}from"../Modal/Modal.mjs";import{MoveDiagonal as a}from"lucide-react";import{useState as o}from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({className:u,isRollable:d=!1,displayModal:f,...p})=>{let[m,h]=o(!1);return l(`div`,{className:`relative`,children:[f&&c(`div`,{className:`sticky top-48 z-10`,children:c(`div`,{className:`absolute top-4 right-2`,children:c(t,{variant:`hoverable`,size:`icon-md`,onClick:()=>{h(!0)},label:`Move`,Icon:a})})}),c(n,{isRollable:d,className:`max-w-full overflow-x-auto`,children:c(`table`,{className:e(`min-w-full max-w-full table-auto overflow-x-auto bg-background text-left`,u),...p})}),c(r,{isOpen:m,onClose:()=>h(!1),size:i.XL,hasCloseButton:!0,children:m?c(`div`,{className:`grid`,children:c(`table`,{className:e(`min-w-full max-w-full table-auto text-left`,u),...p})}):c(s,{})})]})};export{u as Table};
 //# sourceMappingURL=Table.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport { type FC, type HTMLAttributes, useState } from 'react';\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  displayModal?: 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> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  ...props\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      {displayModal && (\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      )}\n      <ExpandCollapse\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto\"\n      >\n        <table\n          className={cn(\n            'min-w-full max-w-full table-auto overflow-x-auto bg-background text-left',\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                'min-w-full max-w-full table-auto text-left',\n                className\n              )}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;AAErD,QACE,qBAAC;EAAI,WAAU;;GACZ,gBACC,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;OACN;MACE;KACF;GAER,oBAAC;IACa;IACZ,WAAU;cAEV,oBAAC;KACC,WAAW,GACT,4EACA,UACD;KACD,GAAI;MACJ;KACa;GAEjB,oBAAC;IACC,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;cAEC,cACC,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,WAAW,GACT,8CACA,UACD;MACD,GAAI;OACJ;MACE,GAEN,mCAAK;KAED;;GACJ"}
+{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport { type FC, type HTMLAttributes, useState } from 'react';\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  displayModal?: 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> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  ...props\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      {displayModal && (\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      )}\n      <ExpandCollapse\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto\"\n      >\n        <table\n          className={cn(\n            'min-w-full max-w-full table-auto overflow-x-auto bg-background text-left',\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                'min-w-full max-w-full table-auto text-left',\n                className\n              )}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":"gXAsMA,MAAa,GAAyB,CACpC,YACA,aAAa,GACb,eACA,GAAG,KACC,CACJ,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAErD,OACE,EAAC,MAAA,CAAI,UAAU,qBACZ,GACC,EAAC,MAAA,CAAI,UAAU,8BACb,EAAC,MAAA,CAAI,UAAU,kCACb,EAAC,EAAA,CACC,QAAQ,YACR,KAAK,UACL,YAAe,CACb,EAAe,GAAK,EAEtB,MAAM,OACN,KAAM,GACN,EACE,EACF,CAER,EAAC,EAAA,CACa,aACZ,UAAU,sCAEV,EAAC,QAAA,CACC,UAAW,EACT,2EACA,EACD,CACD,GAAI,GACJ,EACa,CAEjB,EAAC,EAAA,CACC,OAAQ,EACR,YAAe,EAAe,GAAM,CACpC,KAAM,EAAU,GAChB,eAAA,YAEC,EACC,EAAC,MAAA,CAAI,UAAU,gBACb,EAAC,QAAA,CACC,UAAW,EACT,6CACA,EACD,CACD,GAAI,GACJ,EACE,CAEN,EAAA,EAAA,EAAA,CAAK,EAED,GACJ"}

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

@@ -1,3 +1 @@
-import { Table } from "./Table.mjs";
-
-export { Table };
+import{Table as e}from"./Table.mjs";export{e as Table};

package/dist/esm/components/Table/table.content.mjs

@@ -1,37 +1,2 @@
-import { t } from "intlayer";
-
-//#region src/components/Table/table.content.ts
-const tableContent = {
-	key: "table",
-	content: { show: 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: "Показать все данные таблицы",
-		tr: "Tüm tablo içeriğini göster",
-		pl: "Pokaż całą zawartość tabeli",
-		id: "Tampilkan semua isi tabel",
-		vi: "Hiển thị tất cả nội dung bảng",
-		uk: "Показати весь вміст таблиці"
-	}) },
-	title: "Table component content",
-	description: "Content declaration related to the Table component, specifically for UI message to display all table content.",
-	tags: [
-		"table",
-		"component content",
-		"design system"
-	]
-};
-
-//#endregion
-export { tableContent as default };
+import{t as e}from"intlayer";const t={key:`table`,content:{show:e({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:`Показать все данные таблицы`,tr:`Tüm tablo içeriğini göster`,pl:`Pokaż całą zawartość tabeli`,id:`Tampilkan semua isi tabel`,vi:`Hiển thị tất cả nội dung bảng`,uk:`Показати весь вміст таблиці`})},title:`Table component content`,description:`Content declaration related to the Table component, specifically for UI message to display all table content.`,tags:[`table`,`component content`,`design system`]};export{t as default};
 //# sourceMappingURL=table.content.mjs.map

package/dist/esm/components/Table/table.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } 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      tr: 'Tüm tablo içeriğini göster',\n      pl: 'Pokaż całą zawartość tabeli',\n      id: 'Tampilkan semua isi tabel',\n      vi: 'Hiển thị tất cả nội dung bảng',\n      uk: 'Показати весь вміст таблиці',\n    }),\n  },\n  title: 'Table component content',\n  description:\n    'Content declaration related to the Table component, specifically for UI message to display all table content.',\n  tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,MAAM,EAAE;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;EAAgB;CACtD"}
+{"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } 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      tr: 'Tüm tablo içeriğini göster',\n      pl: 'Pokaż całą zawartość tabeli',\n      id: 'Tampilkan semua isi tabel',\n      vi: 'Hiển thị tất cả nội dung bảng',\n      uk: 'Показати весь вміст таблиці',\n    }),\n  },\n  title: 'Table component content',\n  description:\n    'Content declaration related to the Table component, specifically for UI message to display all table content.',\n  tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":"6BAEA,MAAM,EAAe,CACnB,IAAK,QACL,QAAS,CACP,KAAM,EAAE,CACN,GAAI,yBACJ,GAAI,sCACJ,GAAI,wCACJ,QAAS,yBACT,GAAI,8BACJ,GAAI,iBACJ,GAAI,gBACJ,GAAI,YACJ,GAAI,0CACJ,GAAI,oCACJ,GAAI,4BACJ,GAAI,4BACJ,GAAI,8BACJ,GAAI,6BACJ,GAAI,8BACJ,GAAI,4BACJ,GAAI,gCACJ,GAAI,8BACL,CAAC,CACH,CACD,MAAO,0BACP,YACE,gHACF,KAAM,CAAC,QAAS,oBAAqB,gBAAgB,CACtD"}