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

package/dist/types/components/SwitchSelector/index.d.ts

@@ -0,0 +1,217 @@
+import { HTMLAttributes, ReactNode } from "react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/SwitchSelector/index.d.ts
+
+/**
+ * Configuration for a single choice in the SwitchSelector
+ *
+ * @template T - The type of the choice value
+ * @interface SwitchSelectorChoice
+ */
+type SwitchSelectorChoice<T$1 = boolean> = {
+  /** The visual content displayed for this choice (text, icons, or React elements) */
+  content: ReactNode;
+  /** The value associated with this choice */
+  value: T$1;
+} & HTMLAttributes<HTMLButtonElement>;
+/**
+ * Array of choices for the SwitchSelector component
+ *
+ * @template T - The type of the choice values
+ */
+type SwitchSelectorChoices<T$1> = SwitchSelectorChoice<T$1>[];
+/**
+ * Props interface for the SwitchSelector component
+ *
+ * @template T - The type of the choice values
+ * @interface SwitchSelectorProps
+ */
+type SwitchSelectorProps<T$1 = boolean> = {
+  /**
+   * Array of selectable choices
+   * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]
+   * @example
+   * ```tsx
+   * <SwitchSelector choices={[
+   *   { content: 'Draft', value: 'draft' },
+   *   { content: 'Published', value: 'published' },
+   *   { content: 'Archived', value: 'archived' }
+   * ]} />
+   * ```
+   */
+  choices?: SwitchSelectorChoices<T$1>;
+  /**
+   * Controlled value for the selected choice
+   * @example
+   * ```tsx
+   * const [status, setStatus] = useState('draft');
+   * <SwitchSelector value={status} onChange={setStatus} />
+   * ```
+   */
+  value?: T$1;
+  /**
+   * Default selected value for uncontrolled mode
+   * @example
+   * ```tsx
+   * <SwitchSelector defaultValue="published" />
+   * ```
+   */
+  defaultValue?: T$1;
+  /**
+   * Callback function triggered when selection changes
+   * @param choice - The newly selected choice value
+   * @example
+   * ```tsx
+   * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />
+   * ```
+   */
+  onChange?: (choice: T$1) => void;
+  /** Additional CSS classes for custom styling */
+  className?: string;
+} & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
+/**
+ * Color variants for the SwitchSelector component
+ *
+ * @enum SwitchSelectorColor
+ */
+declare enum SwitchSelectorColor {
+  /** Primary brand color theme */
+  PRIMARY = "primary",
+  /** Secondary accent color theme */
+  SECONDARY = "secondary",
+  /** Destructive/error color theme for dangerous actions */
+  DESTRUCTIVE = "destructive",
+  /** Neutral gray color theme */
+  NEUTRAL = "neutral",
+  /** Light color theme for dark backgrounds */
+  LIGHT = "light",
+  /** Dark color theme for light backgrounds */
+  DARK = "dark",
+  /** Text color theme that adapts to content */
+  TEXT = "text",
+}
+declare const switchSelectorVariant: (props?: {
+  color?: SwitchSelectorColor;
+} & class_variance_authority_types0.ClassProp) => string;
+/**
+ * Size variants for the SwitchSelector component
+ *
+ * @enum SwitchSelectorSize
+ */
+declare enum SwitchSelectorSize {
+  /** Small size - compact for tight layouts */
+  SM = "sm",
+  /** Medium size - standard for most use cases */
+  MD = "md",
+  /** Large size - prominent for important selections */
+  LG = "lg",
+}
+declare const choiceVariant: (props?: {
+  size?: SwitchSelectorSize;
+} & class_variance_authority_types0.ClassProp) => string;
+/**
+ * SwitchSelector - A versatile toggle component for multi-option selection
+ *
+ * A sophisticated switch selector component that provides an elegant way to choose between
+ * multiple options with smooth animations and visual feedback. Built with accessibility
+ * in mind, it supports keyboard navigation and screen reader announcements.
+ *
+ * ## Key Features
+ * - **Smooth Animations**: Fluid indicator transitions between options
+ * - **Accessible**: Full keyboard navigation and ARIA support
+ * - **Flexible Styling**: Multiple color themes and size variants
+ * - **Generic Types**: Type-safe values with TypeScript generics
+ * - **Controlled/Uncontrolled**: Supports both usage patterns
+ * - **Custom Content**: Rich content support including icons and text
+ *
+ * ## Use Cases
+ * - Settings toggles (On/Off, Light/Dark theme)
+ * - Status selectors (Draft/Published/Archived)
+ * - View mode switches (List/Grid/Card)
+ * - Filter options (All/Active/Completed)
+ * - Language or region selection
+ * - Any multi-option toggle interface
+ *
+ * ## Accessibility
+ * - **Keyboard Navigation**: Tab to focus, arrow keys to navigate options
+ * - **Screen Readers**: Proper ARIA labels and role attributes
+ * - **Focus Management**: Clear visual focus indicators
+ * - **State Announcements**: Selection changes announced to assistive technology
+ *
+ * ## Visual Design
+ * The component features a pill-shaped container with individual choice buttons.
+ * A smooth-sliding background indicator highlights the active selection, creating
+ * an intuitive and polished user experience.
+ *
+ * @template T - The type of values for the choices (string, number, boolean, etc.)
+ *
+ * @example
+ * Basic boolean toggle:
+ * ```tsx
+ * <SwitchSelector
+ *   defaultValue={false}
+ *   onChange={(value) => setEnabled(value)}
+ * />
+ * ```
+ *
+ * @example
+ * Multi-option selector with custom content:
+ * ```tsx
+ * <SwitchSelector
+ *   choices={[
+ *     { content: <>📝 Draft</>, value: 'draft' },
+ *     { content: <>✅ Published</>, value: 'published' },
+ *     { content: <>📦 Archived</>, value: 'archived' }
+ *   ]}
+ *   value={currentStatus}
+ *   onChange={setStatus}
+ *   color={SwitchSelectorColor.SECONDARY}
+ *   size={SwitchSelectorSize.LG}
+ * />
+ * ```
+ *
+ * @example
+ * View mode switcher:
+ * ```tsx
+ * <SwitchSelector
+ *   choices={[
+ *     { content: 'List', value: 'list' },
+ *     { content: 'Grid', value: 'grid' },
+ *     { content: 'Card', value: 'card' }
+ *   ]}
+ *   defaultValue="grid"
+ *   color={SwitchSelectorColor.NEUTRAL}
+ *   onChange={(view) => setViewMode(view)}
+ * />
+ * ```
+ *
+ * @example
+ * Theme selector with icons:
+ * ```tsx
+ * <SwitchSelector
+ *   choices={[
+ *     { content: <>☀️ Light</>, value: 'light' },
+ *     { content: <>🌙 Dark</>, value: 'dark' },
+ *     { content: <>⚙️ System</>, value: 'system' }
+ *   ]}
+ *   value={theme}
+ *   onChange={setTheme}
+ *   size={SwitchSelectorSize.SM}
+ * />
+ * ```
+ */
+declare const SwitchSelector: <T>({
+  choices,
+  value,
+  defaultValue,
+  onChange,
+  color,
+  size,
+  className
+}: SwitchSelectorProps<T>) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SwitchSelector, SwitchSelectorChoice, SwitchSelectorChoices, SwitchSelectorColor, SwitchSelectorProps, SwitchSelectorSize };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/SwitchSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;AAmBA;;AAIS,KAJG,oBAIH,CAAA,MAAA,OAAA,CAAA,GAAA;EACU;EAAf,OAAA,EAHO,SAGP;EAAc;EAON,KAAA,EARH,GAQG;AAaZ,CAAA,GApBI,cAoBQ,CApBO,iBAoBY,CAAA;;;;;;AA8CP,KA3DZ,qBA2DY,CAAA,GAAA,CAAA,GA3De,oBA2Df,CA3DoC,GA2DpC,CAAA,EAAA;;;;;AAQxB;AAeC;AA4BW,KAjGA,mBAiGkB,CAAA,MAAA,OAAA,CAAA,GAAA;EASxB;AA6HN;;;;;;;;;;;EA8EC,OAAA,CAAA,EAxSW,qBAwSX,CAxSiC,GAwSjC,CAAA;;;;;;;;;UA9RS;;;;;;;;iBASO;;;;;;;;;sBAUK;;;IAIlB,oBAAoB,yBACtB,oBAAoB;;;;;;aAOV,mBAAA;;;;;;;;;;;;;;;;cAiBN;UAmBL;IAAA,+BAAA,CAAA;;;;;;aAOW,kBAAA;;;;;;;;cASN;SAcL;IAAA,+BAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+GY;;;;;;;;GAQV,oBAAoB,OAAE,kBAAA,CAAA,GAAA,CAAA"}

package/dist/types/components/Tab/Tab.d.ts

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode } from "react";
+import * as class_variance_authority_types2 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/components/Tab/Tab.d.ts
+declare const tabContainerVariant: (props?: {
+  variant?: "default" | "bordered" | "ghost";
+} & class_variance_authority_types2.ClassProp) => string;
+type TabProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof tabContainerVariant> & {
+  defaultTab?: string;
+  group?: string;
+  children: ReactNode;
+};
+type TabItemProps = HTMLAttributes<HTMLDivElement> & {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+};
+declare const Tab: (({
+  defaultTab,
+  group,
+  variant,
+  children,
+  className,
+  ...props
+}: TabProps) => react_jsx_runtime2.JSX.Element) & {
+  Item: {
+    ({
+      children,
+      ...props
+    }: TabItemProps): react_jsx_runtime2.JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+export { Tab, TabItemProps, TabProps };
+//# sourceMappingURL=Tab.d.ts.map

package/dist/types/components/Tab/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","names":[],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":[],"mappings":";;;;;;cA0BM;;IAcL,+BAAA,CAAA;KAEW,QAAA,GAAW,eAAe,kBACpC,oBAAoB;EAjBhB,UAAA,CAAA,EAAA,MAAA;EAgBM,KAAA,CAAA,EAAA,MAAQ;EAAkB,QAAA,EAIxB,SAJwB;CAAf;AACD,KAMV,YAAA,GAAe,cANL,CAMoB,cANpB,CAAA,GAAA;EAApB,KAAA,EAAA,MAAA;EAGY,KAAA,EAAA,MAAA;EAAS,QAAA,CAAA,EAAA,OAAA;EAGX,QAAA,EAIA,SAJY;CAAkB;AAAf,cAkLd,GAlLc,EAAA,CAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA0CxB,QA1CwB,EAAA,GA0ChB,kBAAA,CAAA,GAAA,CAAA,OA1CgB,CAAA,GAAA;EAIf,IAAA,EAAA;IAAS,CAAA;MAAA,QAAA;MAAA,GAAA;IAAA,CAAA,EAOoB,YAPpB,CAAA,EAOgC,kBAAA,CAAA,GAAA,CAAA,OAPhC;IA8KR,WAEX,EAAA,MAAA;EAFc,CAAA;CAAA"}

package/dist/types/components/Tab/TabContext.d.ts

@@ -0,0 +1,23 @@
+import * as react3 from "react";
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from "react";
+
+//#region src/components/Tab/TabContext.d.ts
+type TabContextValue = {
+  tabsValues: Record<string, any>;
+  setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;
+};
+/**
+ * Context that store the current locale on the client side
+ */
+declare const TabContext: react3.Context<TabContextValue>;
+/**
+ * Hook that provides the current locale
+ */
+declare const useTabContext: () => TabContextValue;
+/**
+ * Provider that store the current locale on the client side
+ */
+declare const TabProvider: FC<PropsWithChildren>;
+//#endregion
+export { TabContext, TabProvider, useTabContext };
+//# sourceMappingURL=TabContext.d.ts.map

package/dist/types/components/Tab/TabContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContext.d.ts","names":[],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":[],"mappings":";;;;KAYK,eAAA;cACS;iBACG,SAAS,eAAe;AAJ1B,CAAA;;;;AAIE,cAMJ,UANI,EAMM,MAAA,CAAA,OANN,CAMM,eANN,CAAA;;AAMjB;AAQA;AAKa,cALA,aAKgB,EAAA,GAAA,GALH,eAKE;;;;cAAf,aAAa,GAAG"}

package/dist/types/components/Tab/index.d.ts

@@ -0,0 +1,2 @@
+import { Tab, TabItemProps, TabProps } from "./Tab.js";
+export { Tab, TabItemProps, TabProps };

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

@@ -0,0 +1,57 @@
+import { HTMLAttributes, ReactElement } from "react";
+import * as class_variance_authority_types4 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+
+//#region src/components/TabSelector/TabSelector.d.ts
+declare enum TabSelectorColor {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  DESTRUCTIVE = "destructive",
+  NEUTRAL = "neutral",
+  LIGHT = "light",
+  DARK = "dark",
+  TEXT = "text",
+}
+declare const tabSelectorVariant: (props?: {
+  color?: "text" | "primary" | "secondary" | "neutral" | "destructive" | "light" | "dark";
+} & class_variance_authority_types4.ClassProp) => string;
+type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
+  key: string | number;
+};
+type TabSelectorProps<T$1 extends TabSelectorItemProps> = {
+  tabs: ReactElement<T$1>[];
+  selectedChoice: T$1['key'];
+  onTabClick?: (choice: T$1['key']) => void;
+  hoverable?: boolean;
+} & HTMLAttributes<HTMLElement> & Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {
+  color?: TabSelectorColor | `${TabSelectorColor}`;
+};
+/**
+ *
+ * Component that allows the user to select one of the provided choices.
+ *
+ * Example:
+ * ```jsx
+ * <TabSelector
+ *   selectedChoice="option1"
+ *   onTabClick={(choice) => console.log(choice)}
+ *   hoverable={true}
+ * >
+ *   <Button key="option1"/>
+ *   <Button key="option2"/>
+ *   <Button key="option3"/>
+ * </TabSelector>
+ * ```
+ */
+declare const TabSelector: <T extends TabSelectorItemProps>({
+  tabs,
+  selectedChoice,
+  onTabClick,
+  color,
+  hoverable,
+  className
+}: TabSelectorProps<T>) => react_jsx_runtime5.JSX.Element;
+//#endregion
+export { TabSelector, TabSelectorColor, TabSelectorItemProps, TabSelectorProps };
+//# sourceMappingURL=TabSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabSelector.d.ts","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":[],"mappings":";;;;;;aAcY,gBAAA;;;;EAAA,OAAA,GAAA,SAAgB;EAUtB,KAAA,GAAA,OAAA;EAqCM,IAAA,GAAA,MAAA;EAIA,IAAA,GAAA,MAAA;;cAzCN,kBA0Ce,EAAA,CAAA,KACH,CADG,EAAA;EAAb,KAAA,CAAA,EAAA,MAAA,GAAA,SAAA,GAAA,WAAA,GAAA,SAAA,GAAA,aAAA,GAAA,OAAA,GAAA,MAAA;CACU,GAzBjB,+BAAA,CAAA,SAyBiB,EAAA,GAAA,MAAA;AACM,KAPZ,oBAAA,GAAuB,cAOX,CAP0B,WAO1B,CAAA,GAAA;EAEL,GAAA,EAAA,MAAA,GAAA,MAAA;CAAf;AACuB,KANf,gBAMe,CAAA,YANY,oBAMZ,CAAA,GAAA;EAApB,IAAA,EALC,YAKD,CALc,GAKd,CAAA,EAAA;EAAL,cAAA,EAJgB,GAIhB,CAAA,KAAA,CAAA;EACU,UAAA,CAAA,EAAA,CAAA,MAAA,EAJY,GAIZ,CAAA,KAAA,CAAA,EAAA,GAAA,IAAA;EAAsB,SAAA,CAAA,EAAA,OAAA;CAAgB,GAF9C,cAE8C,CAF/B,WAE+B,CAAA,GADhD,IACgD,CAD3C,YAC2C,CAAA,OADvB,kBACuB,CAAA,EAAA,OAAA,CAAA,GAAA;EAoBrC,KAAA,CAAA,EApBD,gBAsFX,GAAA,GAtFiC,gBAsFjC,EAAA;CAlEqC;;;;;;;;;;;;;;;;;;cAAzB,wBAAyB;;;;;;;GAOnC,iBAAiB,OAAE,kBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,2 @@
+import { TabSelector, TabSelectorColor, TabSelectorItemProps, TabSelectorProps } from "./TabSelector.js";
+export { TabSelector, TabSelectorColor, TabSelectorItemProps, TabSelectorProps };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":[],"mappings":";;;;;;AAG+D;AAmM/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA9IK,UAAA,GAAa,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8IpB,OAAO,GAAG"}

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

@@ -0,0 +1,2 @@
+import { Table } from "./Table.js";
+export { Table };

package/dist/types/components/Table/table.content.d.ts

@@ -0,0 +1,55 @@
+import * as _intlayer_types269 from "@intlayer/types";
+
+//#region src/components/Table/table.content.d.ts
+declare const tableContent: {
+  key: string;
+  content: {
+    show: _intlayer_types269.TypedNodeModel<_intlayer_types269.NodeType.Translation, {
+      en: string;
+      fr: string;
+      es: string;
+      'en-GB': string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+    }, {
+      nodeType: _intlayer_types269.NodeType.Translation | "translation";
+    } & {
+      translation: {
+        en: string;
+        fr: string;
+        es: string;
+        'en-GB': string;
+        de: string;
+        ja: string;
+        ko: string;
+        zh: string;
+        it: string;
+        pt: string;
+        hi: string;
+        ar: string;
+        ru: string;
+        tr: string;
+        pl: string;
+        id: string;
+        vi: string;
+      };
+    }>;
+  };
+  title: string;
+  description: string;
+  tags: string[];
+};
+//#endregion
+export { tableContent as default };
+//# sourceMappingURL=table.content.d.ts.map

package/dist/types/components/Table/table.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.content.d.ts","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":[],"mappings":";;;cAEM;;;IAAA,IAAA,mCA2BgB,0CAAA"}