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

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

@@ -0,0 +1,106 @@
+import { LinkColor } from "../Link/Link.js";
+import { FC, HTMLAttributes, ReactNode } from "react";
+import * as class_variance_authority_types7 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import { LocalesValues } from "@intlayer/types";
+
+//#region src/components/Breadcrumb/index.d.ts
+/**
+ * Breadcrumb variant styles using class-variance-authority
+ */
+declare const breadcrumbVariants: (props?: {
+  size?: "small" | "medium" | "large";
+  spacing?: "compact" | "normal" | "loose";
+} & class_variance_authority_types7.ClassProp) => string;
+/**
+ * Detailed breadcrumb link configuration with optional href or onClick
+ */
+type DetailedBreadcrumbLink = {
+  /**
+   * URL to navigate to when the breadcrumb item is clicked
+   */
+  href?: string;
+  /**
+   * Text content to display for this breadcrumb item
+   */
+  text: string;
+  /**
+   * Custom click handler function for interactive breadcrumb items
+   */
+  onClick?: () => void;
+};
+/**
+ * Union type representing different breadcrumb item configurations:
+ * - string: Simple text breadcrumb item
+ * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties
+ */
+type BreadcrumbLink = string | DetailedBreadcrumbLink;
+type BreadcrumbProps = {
+  /**
+   * Array of breadcrumb items
+   */
+  links: BreadcrumbLink[];
+  /**
+   * Color scheme for breadcrumb links
+   * @default LinkColor.TEXT
+   */
+  color?: LinkColor | `${LinkColor}`;
+  /**
+   * Locale for internationalization
+   */
+  locale?: LocalesValues;
+  /**
+   * Element type for ARIA current attribute
+   * @default 'page'
+   */
+  elementType?: 'page' | 'location';
+  /**
+   * Custom separator between breadcrumb items
+   * @default ChevronRightIcon
+   */
+  separator?: ReactNode;
+  /**
+   * ARIA label for breadcrumb navigation
+   * @default 'breadcrumb'
+   */
+  ariaLabel?: string;
+  /**
+   * Whether to include structured data markup
+   * @default true
+   */
+  includeStructuredData?: boolean;
+  /**
+   * Maximum number of breadcrumb items to show before truncation
+   */
+  maxItems?: number;
+} & VariantProps<typeof breadcrumbVariants> & HTMLAttributes<HTMLOListElement>;
+/**
+ * Breadcrumb component providing navigational context with accessibility features
+ *
+ * Features:
+ * - Supports links, buttons, and static text elements
+ * - Full keyboard navigation support
+ * - ARIA attributes for screen readers
+ * - Schema.org structured data for SEO
+ * - Customizable separators and styling
+ * - Internationalization support
+ * - Responsive design variants
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   links={[
+ *     'Home',
+ *     { href: '/products', text: 'Products' },
+ *     { onClick: handleCategory, text: 'Electronics' },
+ *     'Smartphones'
+ *   ]}
+ *   size="medium"
+ *   ariaLabel="Product navigation"
+ * />
+ * ```
+ */
+declare const Breadcrumb: FC<BreadcrumbProps>;
+//#endregion
+export { Breadcrumb, BreadcrumbLink, BreadcrumbProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAW0C,cA0CpC,kBAiBJ,EAAA,CAAA,KAgJyB,CAhJzB,EAAA;EA0HG,IAAA,CAAA,EAAA,OAAA,GAAA,QAAsB,GAAA,OAAA;EAoBf,OAAA,CAAA,EAAA,SAAc,GAAA,QAAY,GAAA,OAAA;AAEtC,CAAA,GAhJE,+BAAA,CAAA,SAgJyB,EAAA,GAAA,MAAA;;;;KAtBtB,sBAAA,GAmCM;EAUG;;;EAgBG,IAAA,CAAA,EAAA,MAAA;EAAf;;AA4BF;;;;;;;;;;;;KArEY,cAAA,YAA0B;KAE1B,eAAA;;;;SAIH;;;;;UAKC,eAAe;;;;WAId;;;;;;;;;;cAUG;;;;;;;;;;;;;;;IAeV,oBAAoB,sBACtB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BJ,YAAY,GAAG"}

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

@@ -0,0 +1,170 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
+import * as class_variance_authority_types8 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import { LucideIcon } from "lucide-react";
+
+//#region src/components/Button/Button.d.ts
+/**
+ * Button size variants for different use cases
+ */
+declare enum ButtonSize {
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+  ICON_SM = "icon-sm",
+  ICON_MD = "icon-md",
+  ICON_LG = "icon-lg",
+  ICON_XL = "icon-xl",
+}
+/**
+ * Icon positioning within the button
+ */
+declare enum ButtonIconPosition {
+  LEFT = "left",
+  RIGHT = "right",
+}
+/**
+ * Button visual style variants
+ */
+declare enum ButtonVariant {
+  DEFAULT = "default",
+  NONE = "none",
+  OUTLINE = "outline",
+  LINK = "link",
+  INVISIBLE_LINK = "invisible-link",
+  HOVERABLE = "hoverable",
+  INPUT = "input",
+}
+/**
+ * Button color themes that work with the design system
+ */
+declare enum ButtonColor {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  DESTRUCTIVE = "destructive",
+  NEUTRAL = "neutral",
+  LIGHT = "light",
+  DARK = "dark",
+  TEXT = "text",
+  TEXT_INVERSE = "text-inverse",
+  ERROR = "error",
+  SUCCESS = "success",
+  CUSTOM = "custom",
+}
+/**
+ * Text alignment options for button content
+ */
+declare enum ButtonTextAlign {
+  LEFT = "left",
+  CENTER = "center",
+  RIGHT = "right",
+}
+/**
+ * Enhanced button variants with improved accessibility and focus states
+ */
+declare const buttonVariants: (props?: {
+  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "error" | "success" | "custom" | "text" | "primary" | "neutral" | "secondary" | "destructive" | "light" | "dark" | "text-inverse";
+  variant?: "default" | "input" | "none" | "link" | "outline" | "invisible-link" | "hoverable";
+  textAlign?: "left" | "center" | "right";
+  isFullWidth?: boolean;
+  hasIconLeft?: boolean;
+  hasIconRight?: boolean;
+} & class_variance_authority_types8.ClassProp) => string;
+/**
+ * Enhanced Button component props with comprehensive type safety and accessibility features
+ */
+type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+  /**
+   * Accessible label for screen readers and assistive technologies.
+   * This is required for accessibility compliance.
+   */
+  label: string;
+  /**
+   * Optional icon to display on the left side of the button
+   */
+  Icon?: FC | LucideIcon;
+  /**
+   * Optional icon to display on the right side of the button
+   */
+  IconRight?: FC | LucideIcon;
+  /**
+   * Additional CSS classes for icon styling
+   */
+  iconClassName?: string;
+  /**
+   * Shows loading spinner and disables button interaction when true
+   */
+  isLoading?: boolean;
+  /**
+   * Marks the button as active (useful for navigation or toggle states)
+   */
+  isActive?: boolean;
+  /**
+   * Marks the button as selected
+   */
+  isSelected?: boolean;
+  /**
+   * Makes the button span the full width of its container
+   */
+  isFullWidth?: boolean;
+  /**
+   * Additional description for complex buttons (optional)
+   */
+  'aria-describedby'?: string;
+  /**
+   * Expanded state for collapsible sections (optional)
+   */
+  'aria-expanded'?: boolean;
+  /**
+   * Controls whether the button has popup/menu (optional)
+   */
+  'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+  /**
+   * Indicates if button controls are currently pressed (for toggle buttons)
+   */
+  'aria-pressed'?: boolean;
+};
+/**
+ * Button Component - A comprehensive, accessible button component
+ *
+ * Features:
+ * - Full accessibility compliance with ARIA attributes
+ * - Multiple variants and sizes for different use cases
+ * - Icon support (left and right positioning)
+ * - Loading states with spinner
+ * - Keyboard navigation support
+ * - Focus management with visible indicators
+ * - Responsive design adaptations
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button label="Click me">Click me</Button>
+ *
+ * // Button with icon and loading state
+ * <Button
+ *   label="Save document"
+ *   Icon={SaveIcon}
+ *   isLoading={saving}
+ *   disabled={!hasChanges}
+ * >
+ *   Save
+ * </Button>
+ *
+ * // Destructive action button
+ * <Button
+ *   variant={ButtonVariant.OUTLINE}
+ *   color={ButtonColor.DESTRUCTIVE}
+ *   label="Delete item permanently"
+ *   aria-describedby="delete-warning"
+ * >
+ *   Delete
+ * </Button>
+ * ```
+ */
+declare const Button: FC<ButtonProps>;
+//#endregion
+export { Button, ButtonColor, ButtonIconPosition, ButtonProps, ButtonSize, ButtonTextAlign, ButtonVariant };
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAQY,aAAA,UAAA;EAcA,EAAA,GAAA,IAAA;EA8BA,EAAA,GAAA,IAAA;EAaA,EAAA,GAAA,IAAA;EAiBA,EAAA,GAAA,IAAA;EASN,OAAA,GAAA,SAyFL;EAKW,OAAA,GAAA,SAAW;EACA,OAAA,GAAA,SAAA;EAArB,OAAA,GAAA,SAAA;;;;;AAaS,aAjLC,kBAAA;EAiLI,IAAA,GAAA,MAAA;EAKA,KAAA,GAAA,OAAA;;;AA8FhB;;aAtPY,aAAA;;;;;;;;;;;;aAaA,WAAA;;;;;;;;;;;;;;;;aAiBA,eAAA;;;;;;;;cASN;;;;;;;;IAyFL,+BAAA,CAAA;;;;KAKW,WAAA,GAAc,kBACxB,qBAAqB,oBACrB,qBAEA,oBAAoB;;;;;;;;;SAUX,KAAK;;;;cAKA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8FR,QAAQ,GAAG"}

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

@@ -0,0 +1,2 @@
+import { Button, ButtonColor, ButtonIconPosition, ButtonProps, ButtonSize, ButtonTextAlign, ButtonVariant } from "./Button.js";
+export { Button, ButtonColor, ButtonIconPosition, ButtonProps, ButtonSize, ButtonTextAlign, ButtonVariant };

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

@@ -0,0 +1,23 @@
+import { FC, HTMLAttributes, PropsWithChildren } from "react";
+
+//#region src/components/ClickOutsideDiv/index.d.ts
+type ClickOutsideDivProps = PropsWithChildren<{
+  /**
+   * Callback function called when a click occurs outside the component
+   */
+  onClickOutSide: () => void;
+  /**
+   * Whether to listen for Escape key presses
+   * @default false
+   */
+  listenForEscape?: boolean;
+  /**
+   * Whether the component is disabled (won't trigger onClickOutSide)
+   * @default false
+   */
+  disabled?: boolean;
+}> & HTMLAttributes<HTMLDivElement>;
+declare const ClickOutsideDiv: FC<ClickOutsideDivProps>;
+//#endregion
+export { ClickOutsideDiv, ClickOutsideDivProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":[],"mappings":";;;KAWY,oBAAA,GAAuB;;AAAnC;;EAgBiB,cAAA,EAAA,GAAA,GAAA,IAAA;EAAf;;AAEF;;;;;;;;KAFE,eAAe;cAEJ,iBAAiB,GAAG"}

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

@@ -0,0 +1,142 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+import * as class_variance_authority_types9 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/CollapsibleTable/CollapsibleTable.d.ts
+declare const collapsibleTableVariants: (props?: {
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+  variant?: "default" | "ghost" | "dark" | "outlined";
+  spacing?: "sm" | "md" | "lg" | "none" | "auto";
+} & class_variance_authority_types9.ClassProp) => string;
+interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
+  /** Table title displayed in the header */
+  title: string;
+  /** Array of data objects to display in the table */
+  data: Record<string, unknown>[];
+  /** Custom class for the main container */
+  className?: string;
+  /** Custom class for the header section */
+  headerClassName?: string;
+  /** Custom class for the content wrapper */
+  contentClassName?: string;
+  /** Custom class for the table element */
+  tableClassName?: string;
+  /** Custom class for table header cells */
+  thClassName?: string;
+  /** Custom class for table body cells */
+  tdClassName?: string;
+  /** Custom class for table rows */
+  trClassName?: string;
+  /** Controls if the table is expanded by default */
+  defaultExpanded?: boolean;
+  /** Controlled expansion state */
+  isExpanded?: boolean;
+  /** Callback when expansion state changes */
+  onExpandToggle?: (expanded: boolean) => void;
+  /** Custom icon for the toggle (defaults to ChevronRight) */
+  toggleIcon?: ReactNode;
+  /** Header border style variant */
+  borderStyle?: 'none' | 'dashed' | 'solid';
+  /** Table spacing variant */
+  tableSpacing?: 'none' | 'sm' | 'md' | 'lg';
+  /** Table layout variant */
+  tableLayout?: 'auto' | 'fixed';
+  /** Custom column renderers */
+  columnRenderers?: Record<string, (value: unknown, row: Record<string, unknown>) => ReactNode>;
+  /** Disable the collapse functionality */
+  disabled?: boolean;
+  /** Accessible label for screen readers */
+  'aria-label'?: string;
+  /** ID for the table content (for aria-controls) */
+  contentId?: string;
+}
+/**
+ * CollapsibleTable component that displays tabular data in an expandable/collapsible format.
+ * It provides a clickable header that controls the visibility of the table content with smooth animations.
+ *
+ * Features:
+ * - Supports both controlled and uncontrolled modes
+ * - Customizable styling with CVA variants (size, variant, spacing)
+ * - Multiple className props for granular styling control
+ * - Custom column rendering and ordering
+ * - Accessible with proper ARIA attributes and keyboard navigation
+ * - Responsive design with overflow handling
+ * - Empty state customization
+ * - Flexible data structure support
+ *
+ * @example
+ * // Basic usage
+ * const userData = [
+ *   { name: 'John Doe', role: 'Developer', experience: '5 years' },
+ *   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },
+ * ];
+ *
+ * <CollapsibleTable
+ *   title="Team Members"
+ *   data={userData}
+ *   defaultExpanded={true}
+ * />
+ *
+ * @example
+ * // Advanced usage with custom styling and renderers
+ * const projectData = [
+ *   { name: 'Project A', status: 'active', priority: 'high' },
+ *   { name: 'Project B', status: 'completed', priority: 'medium' },
+ * ];
+ *
+ * const columnRenderers = {
+ *   status: (value) => (
+ *     <Badge variant={value === 'active' ? 'success' : 'default'}>
+ *       {value}
+ *     </Badge>
+ *   ),
+ *   priority: (value) => (
+ *     <span className={`font-semibold ${
+ *       value === 'high' ? 'text-red-600' :
+ *       value === 'medium' ? 'text-yellow-600' : 'text-green-600'
+ *     }`}>
+ *       {value}
+ *     </span>
+ *   ),
+ * };
+ *
+ * <CollapsibleTable
+ *   title="Project Dashboard"
+ *   data={projectData}
+ *   variant="dark"
+ *   size="lg"
+ *   borderStyle="solid"
+ *   columnRenderers={columnRenderers}
+ *   headerClassName="bg-slate-800 text-white"
+ *   tableClassName="bg-slate-900"
+ *   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}
+ * />
+ *
+ * @param title - The text or React node displayed in the table header
+ * @param data - Array of objects representing table rows. Keys become column headers, values become cell content
+ * @param className - Additional CSS classes for the main container element
+ * @param headerClassName - Additional CSS classes for the clickable header section
+ * @param contentClassName - Additional CSS classes for the table content wrapper
+ * @param tableClassName - Additional CSS classes for the HTML table element
+ * @param thClassName - Additional CSS classes for table header cells (th elements)
+ * @param tdClassName - Additional CSS classes for table body cells (td elements)
+ * @param trClassName - Additional CSS classes for table rows (tr elements)
+ * @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)
+ * @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled
+ * @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter
+ * @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react
+ * @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+ * @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'
+ * @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'
+ * @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'
+ * @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'
+ * @param tableLayout - CSS table-layout property: 'auto' | 'fixed'
+ * @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode
+ * @param disabled - When true, disables click interaction and shows disabled visual state
+ * @param aria-label - Accessible label for screen readers describing the table purpose
+ * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided
+ */
+declare const CollapsibleTable: FC<CollapsibleTableProps>;
+//#endregion
+export { CollapsibleTable, CollapsibleTableProps };
+//# sourceMappingURL=CollapsibleTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTable.d.ts","names":[],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":[],"mappings":";;;;;cASM,gCA8EJ;;;EA9EI,OAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IA+BL,GAAA,MAAA,GAAA,MAAA;AA8CD,CAAA,GA9CC,+BAAA,CAAA,SA+CC,EAAA,GAAA,MAAA;AAA4B,UADb,qBAAA,SACP,IAAoB,CAAf,cAAe,CAAA,cAAA,CAAA,EAAA,OAAA,CAAA,EAC1B,YAD0B,CAAA,OACN,wBADM,CAAA,CAAA;EAAf;EACS,KAAA,EAAA,MAAA;EAIhB;EAsBO,IAAA,EAtBP,MAsBO,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA;EAUW;EAA4B,SAAA,CAAA,EAAA,MAAA;EAFlC;EAnCV,eAAA,CAAA,EAAA,MAAA;EACN;EAAY,gBAAA,CAAA,EAAA,MAAA;EAoIH;;;;;;;;;;;;;;;eA1GE;;;;;;;;oBAQK,qCAEM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgGzC,kBAAkB,GAAG"}

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

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

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

@@ -0,0 +1,92 @@
+import * as react4 from "react";
+import { ComponentProps, FC, HTMLAttributes } from "react";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+import { DialogProps } from "@radix-ui/react-dialog";
+import { Command as Command$1 } from "cmdk";
+
+//#region src/components/Command/index.d.ts
+declare const CommandRoot: FC<ComponentProps<typeof Command$1>>;
+/**
+ * Usage example:
+ * ```jsx
+ * <Command>
+ *   <Command.Trigger>
+ *     <Command.Input placeholder="Search..." />
+ *   </Command.Trigger>
+ *   <Command.Dialog>
+ *     <Command.List>
+ *       <Command.Item>Item 1</Command.Item>
+ *       <Command.Item>Item 2</Command.Item>
+ *       <Command.Item>Item 3</Command.Item>
+ *     </Command.List>
+ *   </Command.Dialog>
+ * </Command>
+ * ```
+ */
+declare const Command: {
+  Dialog: FC<DialogProps>;
+  Input: FC<Omit<Pick<Pick<react4.DetailedHTMLProps<react4.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react4.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+  } & {
+    asChild?: boolean;
+  }, "key" | "asChild" | keyof react4.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+  } & react4.RefAttributes<HTMLInputElement>>;
+  List: FC<{
+    children?: React.ReactNode;
+  } & Pick<Pick<react4.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  } & {
+    asChild?: boolean;
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+  } & react4.RefAttributes<HTMLDivElement>>;
+  Empty: FC<{
+    children?: React.ReactNode;
+  } & Pick<Pick<react4.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  } & {
+    asChild?: boolean;
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & react4.RefAttributes<HTMLDivElement>>;
+  Group: FC<{
+    children?: React.ReactNode;
+  } & Omit<Pick<Pick<react4.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  } & {
+    asChild?: boolean;
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+  } & react4.RefAttributes<HTMLDivElement>>;
+  Separator: FC<Pick<Pick<react4.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  } & {
+    asChild?: boolean;
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+  } & react4.RefAttributes<HTMLDivElement>>;
+  Item: FC<{
+    children?: React.ReactNode;
+  } & Omit<Pick<Pick<react4.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+  } & {
+    asChild?: boolean;
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+  } & react4.RefAttributes<HTMLDivElement>>;
+  Shortcut: ({
+    className,
+    ...props
+  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime11.JSX.Element;
+  propTypes?: any;
+  displayName?: string | undefined;
+};
+//#endregion
+export { Command, CommandRoot };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAaa,aAAa,GAAG,sBAAsB;;;;AAAnD;;;;;AA0HA;;;;;;;;;cAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BV,eAAe,qBAAgB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,118 @@
+import { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from "react";
+import * as class_variance_authority_types10 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/Container/index.d.ts
+
+/**
+ * Container component variants using class-variance-authority
+ * Provides flexible styling options for background, padding, borders, and layout
+ */
+declare const containerVariants: (props?: {
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
+  transparency?: "sm" | "md" | "lg" | "xl" | "none" | "full";
+  padding?: "sm" | "md" | "lg" | "xl" | "none";
+  separator?: "without" | "x" | "y" | "both";
+  border?: "with" | "none";
+  borderColor?: "text" | "primary" | "secondary" | "neutral" | "error" | "success" | "warning";
+  background?: "with" | "none" | "hoverable";
+  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+} & class_variance_authority_types10.ClassProp) => string;
+/** Available rounded corner sizes for the container */
+declare enum ContainerRoundedSize {
+  NONE = "none",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+  TWO_XL = "2xl",
+  THREE_XL = "3xl",
+  FULL = "full",
+}
+/** Background transparency levels for the container */
+declare enum ContainerTransparency {
+  NONE = "none",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+  FULL = "full",
+}
+/** Padding sizes for container content */
+declare enum ContainerPadding {
+  NONE = "none",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+}
+/** Separator options for dividing container children */
+declare enum ContainerSeparator {
+  WITHOUT = "without",
+  X = "x",
+  Y = "y",
+  BOTH = "both",
+}
+/** Border color options for the container */
+declare enum ContainerBorderColor {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  NEUTRAL = "neutral",
+  TEXT = "text",
+  ERROR = "error",
+  WARNING = "warning",
+  SUCCESS = "success",
+}
+/** Background interaction states for the container */
+declare enum ContainerBackground {
+  NONE = "none",
+  HOVERABLE = "hoverable",
+  WITH = "with",
+}
+/** Gap sizes between container children */
+declare enum ContainerGap {
+  NONE = "none",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+  TWO_XL = "2xl",
+}
+/** Container component props extending HTML div attributes */
+type ContainerProps = PropsWithChildren<Omit<VariantProps<typeof containerVariants>, 'border'>> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  /** Whether to show a border around the container */
+  border?: boolean;
+};
+/**
+ * Container Component
+ *
+ * A flexible container component for organizing content with customizable styling options.
+ * Supports various visual states, layouts, and accessibility features.
+ *
+ * ## Features
+ * - **Flexible Layout**: Supports different padding, gap, and separator options
+ * - **Visual Variants**: Multiple background transparency levels and border styles
+ * - **Responsive Design**: Configurable rounded corners and spacing
+ * - **Semantic HTML**: Proper div element with extensible attributes
+ *
+ * ## Accessibility
+ * - Inherits all standard div accessibility features
+ * - Supports ARIA attributes through spread props
+ * - Maintains proper semantic structure for screen readers
+ *
+ * @param children - The content to display inside the container
+ * @param roundedSize - Border radius size (default: 'md')
+ * @param transparency - Background transparency level (default: 'md')
+ * @param padding - Internal padding size (default: 'none')
+ * @param separator - Divider lines between children (default: 'without')
+ * @param border - Whether to show border (default: false)
+ * @param borderColor - Color of the border (default: 'text')
+ * @param background - Background interaction behavior (default: 'none')
+ * @param gap - Space between child elements (default: 'none')
+ * @param className - Additional CSS classes
+ * @param props - Additional HTML div attributes including ARIA attributes
+ */
+declare const Container: FC<ContainerProps>;
+//#endregion
+export { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerProps, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants };
+//# sourceMappingURL=index.d.ts.map