@intlayer/design-system 8.4.4 → 8.4.5

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

@@ -1,2 +1,34 @@
-"use client";import{createContext as e,useContext as t,useState as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=e({tabsValues:{},setTabsValues:(()=>{})}),a=()=>t(i),o=({children:e})=>{let[t,a]=n({});return r(i,{value:{tabsValues:t,setTabsValues:a},children:e})};export{i as TabContext,o as TabProvider,a as useTabContext};
+'use client';
+
+import { createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Tab/TabContext.tsx
+/**
+* Context that store the current locale on the client side
+*/
+const TabContext = createContext({
+	tabsValues: {},
+	setTabsValues: (() => {})
+});
+/**
+* Hook that provides the current locale
+*/
+const useTabContext = () => useContext(TabContext);
+/**
+* Provider that store the current locale on the client side
+*/
+const TabProvider = ({ children }) => {
+	const [tabsValues, setTabsValues] = useState({});
+	return /* @__PURE__ */ jsx(TabContext, {
+		value: {
+			tabsValues,
+			setTabsValues
+		},
+		children
+	});
+};
+
+//#endregion
+export { TabContext, TabProvider, useTabContext };
 //# sourceMappingURL=TabContext.mjs.map

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":"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,EAAD,CACE,MAAO,CACL,aACA,gBACD,CAEA,WACU,CAAA"}
+{"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,YAAD;EACE,OAAO;GACL;GACA;GACD;EAEA;EACU"}

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

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

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

@@ -1,2 +1,112 @@
-"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};
+'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 };
 //# 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":"wRAiBA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,UAAA,YACA,EAAA,YAAA,cACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,aACD,CAED,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,MAAD,CACE,UAAW,EACT,EAAmB,CACjB,QACD,CAAC,CACF,EACD,CACD,mBAAkB,EAClB,uBAAqB,QACrB,KAAK,mBATP,CAWG,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,MAAD,CACE,UAAW,EACT,EAAiB,CACf,QACA,cACD,CAAC,CACH,CACD,MAAO,EACP,IAAK,EAEL,CADK,GAAG,IAAiB,KAAK,UAAU,EAAK,IAAK,GAAQ,EAAI,IAAI,CAAC,GACnE,CAEA"}
+{"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,mBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;AAED,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,OAAD;EACE,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;YATP,CAWG,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,OAAD;GACE,WAAW,GACT,iBAAiB;IACf;IACA;IACD,CAAC,CACH;GACD,OAAO;GACP,KAAK;GAEL,EADK,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE,CAEA"}

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

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

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

@@ -1,2 +1,196 @@
-"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{useState as a}from"react";import{MoveDiagonal as o}from"lucide-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]=a(!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:o})})}),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};
+'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 { useState } from "react";
+import { MoveDiagonal } from "lucide-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 };
 //# 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":"gXAsMA,MAAa,GAAyB,CACpC,YACA,aAAa,GACb,eACA,GAAG,KACC,CACJ,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAErD,OACE,EAAC,MAAD,CAAK,UAAU,oBAAf,CACG,GACC,EAAC,MAAD,CAAK,UAAU,8BACb,EAAC,MAAD,CAAK,UAAU,kCACb,EAAC,EAAD,CACE,QAAQ,YACR,KAAK,UACL,YAAe,CACb,EAAe,GAAK,EAEtB,MAAM,OACN,KAAM,EACN,CAAA,CACE,CAAA,CACF,CAAA,CAER,EAAC,EAAD,CACc,aACZ,UAAU,sCAEV,EAAC,QAAD,CACE,UAAW,EACT,2EACA,EACD,CACD,GAAI,EACJ,CAAA,CACa,CAAA,CAEjB,EAAC,EAAD,CACE,OAAQ,EACR,YAAe,EAAe,GAAM,CACpC,KAAM,EAAU,GAChB,eAAA,YAEC,EACC,EAAC,MAAD,CAAK,UAAU,gBACb,EAAC,QAAD,CACE,UAAW,EACT,6CACA,EACD,CACD,GAAI,EACJ,CAAA,CACE,CAAA,CAEN,EAAA,EAAA,EAAK,CAAA,CAED,CAAA,CACJ"}
+{"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,OAAD;EAAK,WAAU;YAAf;GACG,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;MACN;KACE;IACF;GAER,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,WAAW,GACT,4EACA,UACD;KACD,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}

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

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

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

@@ -1,2 +1,37 @@
-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};
+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 };
 //# 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":"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"}
+{"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"}