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

package/dist/esm/components/CollapsibleTable/CollapsibleTable.mjs

@@ -0,0 +1,248 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/CollapsibleTable/CollapsibleTable.tsx
+const collapsibleTableVariants = cva("w-full max-w-full overflow-hidden rounded-lg border bg-card", {
+	variants: {
+		size: {
+			sm: "max-w-lg",
+			md: "max-w-2xl",
+			lg: "max-w-4xl",
+			xl: "max-w-6xl",
+			full: "w-full max-w-none"
+		},
+		variant: {
+			default: "border-neutral/20 bg-card",
+			dark: "border-[#B5B5B5] bg-[#242424]",
+			ghost: "border-transparent bg-transparent",
+			outlined: "border-2 border-primary/20 bg-background"
+		},
+		spacing: {
+			none: "",
+			sm: "m-2",
+			md: "m-4",
+			lg: "m-6",
+			auto: "m-auto"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default",
+		spacing: "auto"
+	}
+});
+const headerVariants = cva("flex cursor-pointer items-center justify-between p-3 transition-colors duration-200", {
+	variants: {
+		variant: {
+			default: "hover:bg-neutral/5",
+			dark: "hover:bg-neutral/10",
+			ghost: "hover:bg-primary/5",
+			outlined: "hover:bg-primary/5"
+		},
+		borderStyle: {
+			none: "",
+			dashed: "border-neutral/20 border-b border-dashed",
+			solid: "border-neutral/20 border-b border-solid"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		borderStyle: "dashed"
+	}
+});
+const tableVariants = cva("w-full border-collapse", {
+	variants: {
+		spacing: {
+			none: "border-spacing-0",
+			sm: "border-spacing-1",
+			md: "border-spacing-2",
+			lg: "border-spacing-4"
+		},
+		layout: {
+			auto: "table-auto",
+			fixed: "table-fixed"
+		}
+	},
+	defaultVariants: {
+		spacing: "md",
+		layout: "auto"
+	}
+});
+/**
+* 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
+*/
+const CollapsibleTable = ({ title, data, className, headerClassName, contentClassName, tableClassName, thClassName, tdClassName, trClassName, defaultExpanded = false, isExpanded: controlledExpanded, onExpandToggle, toggleIcon, size, variant, spacing, borderStyle, tableSpacing, tableLayout, columnRenderers, disabled = false, "aria-label": ariaLabel, contentId,...props }) => {
+	const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+	const isExpanded = controlledExpanded ?? internalExpanded;
+	const toggleExpanded = () => {
+		if (disabled) return;
+		const newState = !isExpanded;
+		if (onExpandToggle) onExpandToggle(newState);
+		else setInternalExpanded(newState);
+	};
+	const getColumns = (data$1) => {
+		if (Array.isArray(data$1) && data$1.length > 0) {
+			const allKeys = /* @__PURE__ */ new Set();
+			data$1.forEach((item) => {
+				if (item && typeof item === "object") Object.keys(item).forEach((key) => allKeys.add(key));
+			});
+			return Array.from(allKeys);
+		}
+		return [];
+	};
+	const tableColumns = getColumns(data);
+	const generatedContentId = contentId || `collapsible-table-${Math.random().toString(36).substr(2, 9)}`;
+	const renderCellContent = (column, value, row) => {
+		if (columnRenderers?.[column]) return columnRenderers[column](value, row);
+		return String(value ?? "—");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(collapsibleTableVariants({
+			size,
+			variant,
+			spacing
+		}), className),
+		"aria-label": ariaLabel,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			onClick: toggleExpanded,
+			className: cn(headerVariants({
+				variant,
+				borderStyle: isExpanded ? borderStyle : "none"
+			}), headerClassName, disabled && "cursor-not-allowed opacity-50"),
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			"aria-expanded": isExpanded,
+			"aria-controls": generatedContentId,
+			"aria-disabled": disabled,
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "font-semibold",
+				children: title
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn("transition-transform duration-200", isExpanded && "rotate-90", disabled && "opacity-50"),
+				children: toggleIcon ?? /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+			})]
+		}), /* @__PURE__ */ jsx(MaxHeightSmoother, {
+			isHidden: !isExpanded,
+			children: /* @__PURE__ */ jsx("div", {
+				id: generatedContentId,
+				className: cn("overflow-x-auto p-3", contentClassName),
+				role: "region",
+				"aria-labelledby": `${generatedContentId}-header`,
+				children: /* @__PURE__ */ jsxs("table", {
+					className: cn(tableVariants({
+						spacing: tableSpacing,
+						layout: tableLayout
+					}), "border-separate", tableClassName),
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+						className: trClassName,
+						children: tableColumns.map((column) => /* @__PURE__ */ jsx("th", {
+							className: cn("pb-2 text-left font-medium text-sm text-text/70", thClassName),
+							children: column
+						}, column))
+					}) }), /* @__PURE__ */ jsx("tbody", { children: data.map((row, index) => /* @__PURE__ */ jsx("tr", {
+						className: cn("bg-neutral/5 transition-colors hover:bg-neutral/10", trClassName),
+						children: tableColumns.map((column) => /* @__PURE__ */ jsx("td", {
+							className: cn("rounded px-3 py-2 text-sm text-text", tdClassName),
+							children: renderCellContent(column, row[column], row)
+						}, column))
+					}, index)) })]
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { CollapsibleTable };
+//# sourceMappingURL=CollapsibleTable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTable.mjs","names":["CollapsibleTable: FC<CollapsibleTableProps>","data"],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n// Container variants using CVA\nconst collapsibleTableVariants = cva(\n  'w-full max-w-full overflow-hidden rounded-lg border bg-card',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-lg',\n        md: 'max-w-2xl',\n        lg: 'max-w-4xl',\n        xl: 'max-w-6xl',\n        full: 'w-full max-w-none',\n      },\n      variant: {\n        default: 'border-neutral/20 bg-card',\n        dark: 'border-[#B5B5B5] bg-[#242424]',\n        ghost: 'border-transparent bg-transparent',\n        outlined: 'border-2 border-primary/20 bg-background',\n      },\n      spacing: {\n        none: '',\n        sm: 'm-2',\n        md: 'm-4',\n        lg: 'm-6',\n        auto: 'm-auto',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n      spacing: 'auto',\n    },\n  }\n);\n\n// Header variants\nconst headerVariants = cva(\n  'flex cursor-pointer items-center justify-between p-3 transition-colors duration-200',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-neutral/5',\n        dark: 'hover:bg-neutral/10',\n        ghost: 'hover:bg-primary/5',\n        outlined: 'hover:bg-primary/5',\n      },\n      borderStyle: {\n        none: '',\n        dashed: 'border-neutral/20 border-b border-dashed',\n        solid: 'border-neutral/20 border-b border-solid',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      borderStyle: 'dashed',\n    },\n  }\n);\n\n// Table variants\nconst tableVariants = cva('w-full border-collapse', {\n  variants: {\n    spacing: {\n      none: 'border-spacing-0',\n      sm: 'border-spacing-1',\n      md: 'border-spacing-2',\n      lg: 'border-spacing-4',\n    },\n    layout: {\n      auto: 'table-auto',\n      fixed: 'table-fixed',\n    },\n  },\n  defaultVariants: {\n    spacing: 'md',\n    layout: 'auto',\n  },\n});\n\nexport interface CollapsibleTableProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof collapsibleTableVariants> {\n  /** Table title displayed in the header */\n  title: string;\n  /** Array of data objects to display in the table */\n  data: Record<string, unknown>[];\n  /** Custom class for the main container */\n  className?: string;\n  /** Custom class for the header section */\n  headerClassName?: string;\n  /** Custom class for the content wrapper */\n  contentClassName?: string;\n  /** Custom class for the table element */\n  tableClassName?: string;\n  /** Custom class for table header cells */\n  thClassName?: string;\n  /** Custom class for table body cells */\n  tdClassName?: string;\n  /** Custom class for table rows */\n  trClassName?: string;\n  /** Controls if the table is expanded by default */\n  defaultExpanded?: boolean;\n  /** Controlled expansion state */\n  isExpanded?: boolean;\n  /** Callback when expansion state changes */\n  onExpandToggle?: (expanded: boolean) => void;\n  /** Custom icon for the toggle (defaults to ChevronRight) */\n  toggleIcon?: ReactNode;\n  /** Header border style variant */\n  borderStyle?: 'none' | 'dashed' | 'solid';\n  /** Table spacing variant */\n  tableSpacing?: 'none' | 'sm' | 'md' | 'lg';\n  /** Table layout variant */\n  tableLayout?: 'auto' | 'fixed';\n  /** Custom column renderers */\n  columnRenderers?: Record<\n    string,\n    (value: unknown, row: Record<string, unknown>) => ReactNode\n  >;\n  /** Disable the collapse functionality */\n  disabled?: boolean;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the table content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * CollapsibleTable component that displays tabular data in an expandable/collapsible format.\n * It provides a clickable header that controls the visibility of the table content with smooth animations.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable styling with CVA variants (size, variant, spacing)\n * - Multiple className props for granular styling control\n * - Custom column rendering and ordering\n * - Accessible with proper ARIA attributes and keyboard navigation\n * - Responsive design with overflow handling\n * - Empty state customization\n * - Flexible data structure support\n *\n * @example\n * // Basic usage\n * const userData = [\n *   { name: 'John Doe', role: 'Developer', experience: '5 years' },\n *   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },\n * ];\n *\n * <CollapsibleTable\n *   title=\"Team Members\"\n *   data={userData}\n *   defaultExpanded={true}\n * />\n *\n * @example\n * // Advanced usage with custom styling and renderers\n * const projectData = [\n *   { name: 'Project A', status: 'active', priority: 'high' },\n *   { name: 'Project B', status: 'completed', priority: 'medium' },\n * ];\n *\n * const columnRenderers = {\n *   status: (value) => (\n *     <Badge variant={value === 'active' ? 'success' : 'default'}>\n *       {value}\n *     </Badge>\n *   ),\n *   priority: (value) => (\n *     <span className={`font-semibold ${\n *       value === 'high' ? 'text-red-600' :\n *       value === 'medium' ? 'text-yellow-600' : 'text-green-600'\n *     }`}>\n *       {value}\n *     </span>\n *   ),\n * };\n *\n * <CollapsibleTable\n *   title=\"Project Dashboard\"\n *   data={projectData}\n *   variant=\"dark\"\n *   size=\"lg\"\n *   borderStyle=\"solid\"\n *   columnRenderers={columnRenderers}\n *   headerClassName=\"bg-slate-800 text-white\"\n *   tableClassName=\"bg-slate-900\"\n *   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}\n * />\n *\n * @param title - The text or React node displayed in the table header\n * @param data - Array of objects representing table rows. Keys become column headers, values become cell content\n * @param className - Additional CSS classes for the main container element\n * @param headerClassName - Additional CSS classes for the clickable header section\n * @param contentClassName - Additional CSS classes for the table content wrapper\n * @param tableClassName - Additional CSS classes for the HTML table element\n * @param thClassName - Additional CSS classes for table header cells (th elements)\n * @param tdClassName - Additional CSS classes for table body cells (td elements)\n * @param trClassName - Additional CSS classes for table rows (tr elements)\n * @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)\n * @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled\n * @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter\n * @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react\n * @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'\n * @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'\n * @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'\n * @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'\n * @param tableLayout - CSS table-layout property: 'auto' | 'fixed'\n * @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode\n * @param disabled - When true, disables click interaction and shows disabled visual state\n * @param aria-label - Accessible label for screen readers describing the table purpose\n * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided\n */\nexport const CollapsibleTable: FC<CollapsibleTableProps> = ({\n  title,\n  data,\n  className,\n  headerClassName,\n  contentClassName,\n  tableClassName,\n  thClassName,\n  tdClassName,\n  trClassName,\n  defaultExpanded = false,\n  isExpanded: controlledExpanded,\n  onExpandToggle,\n  toggleIcon,\n  size,\n  variant,\n  spacing,\n  borderStyle,\n  tableSpacing,\n  tableLayout,\n  columnRenderers,\n  disabled = false,\n  'aria-label': ariaLabel,\n  contentId,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n  const isExpanded = controlledExpanded ?? internalExpanded;\n\n  const toggleExpanded = () => {\n    if (disabled) return;\n    const newState = !isExpanded;\n    if (onExpandToggle) onExpandToggle(newState);\n    else setInternalExpanded(newState);\n  };\n\n  const getColumns = (data: Record<string, unknown>[]) => {\n    if (Array.isArray(data) && data.length > 0) {\n      const allKeys = new Set<string>();\n      data.forEach((item) => {\n        if (item && typeof item === 'object') {\n          Object.keys(item).forEach((key) => allKeys.add(key));\n        }\n      });\n      return Array.from(allKeys);\n    }\n    return [];\n  };\n\n  const tableColumns = getColumns(data);\n  const generatedContentId =\n    contentId || `collapsible-table-${Math.random().toString(36).substr(2, 9)}`;\n\n  const renderCellContent = (\n    column: string,\n    value: unknown,\n    row: Record<string, unknown>\n  ) => {\n    if (columnRenderers?.[column]) {\n      return columnRenderers[column](value, row);\n    }\n    return String(value ?? '—');\n  };\n\n  return (\n    <div\n      className={cn(\n        collapsibleTableVariants({ size, variant, spacing }),\n        className\n      )}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      <div\n        onClick={toggleExpanded}\n        className={cn(\n          headerVariants({\n            variant,\n            borderStyle: isExpanded ? borderStyle : 'none',\n          }),\n          headerClassName,\n          disabled && 'cursor-not-allowed opacity-50'\n        )}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isExpanded}\n        aria-controls={generatedContentId}\n        aria-disabled={disabled}\n      >\n        <p className=\"font-semibold\">{title}</p>\n        <div\n          className={cn(\n            'transition-transform duration-200',\n            isExpanded && 'rotate-90',\n            disabled && 'opacity-50'\n          )}\n        >\n          {toggleIcon ?? <ChevronRight size={16} />}\n        </div>\n      </div>\n\n      <MaxHeightSmoother isHidden={!isExpanded}>\n        <div\n          id={generatedContentId}\n          className={cn('overflow-x-auto p-3', contentClassName)}\n          role=\"region\"\n          aria-labelledby={`${generatedContentId}-header`}\n        >\n          <table\n            className={cn(\n              tableVariants({ spacing: tableSpacing, layout: tableLayout }),\n              'border-separate',\n              tableClassName\n            )}\n          >\n            <thead>\n              <tr className={trClassName}>\n                {tableColumns.map((column) => (\n                  <th\n                    key={column}\n                    className={cn(\n                      'pb-2 text-left font-medium text-sm text-text/70',\n                      thClassName\n                    )}\n                  >\n                    {column}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((row, index) => (\n                <tr\n                  key={index}\n                  className={cn(\n                    'bg-neutral/5 transition-colors hover:bg-neutral/10',\n                    trClassName\n                  )}\n                >\n                  {tableColumns.map((column) => (\n                    <td\n                      key={column}\n                      className={cn(\n                        'rounded px-3 py-2 text-sm text-text',\n                        tdClassName\n                      )}\n                    >\n                      {renderCellContent(column, row[column], row)}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { CollapsibleTable } from "./CollapsibleTable.mjs";
+
+export { CollapsibleTable };

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

@@ -0,0 +1,90 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent } from "@radix-ui/react-dialog";
+import { Command as Command$1 } from "cmdk";
+
+//#region src/components/Command/index.tsx
+const CommandRoot = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1, {
+	className: cn("flex size-full flex-col overflow-hidden rounded-md", className),
+	...props
+});
+const CommandDialog = ({ children,...props }) => /* @__PURE__ */ jsx(Dialog, {
+	...props,
+	children: /* @__PURE__ */ jsx(DialogContent, {
+		className: "overflow-hidden p-0",
+		children: /* @__PURE__ */ jsx(CommandRoot, {
+			className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5",
+			children
+		})
+	})
+});
+const CommandInput = ({ className,...props }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex w-full items-center",
+	"cmdk-input-wrapper": "",
+	children: [/* @__PURE__ */ jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
+		className: cn("flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props
+	})]
+});
+const CommandList = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.List, {
+	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+	...props
+});
+const CommandEmpty = (props) => /* @__PURE__ */ jsx(Command$1.Empty, {
+	className: "py-6 text-center text-sm",
+	...props
+});
+const CommandGroup = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.Group, {
+	className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs", className),
+	...props
+});
+const CommandSeparator = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.Separator, {
+	className: cn("-mx-1 h-px bg-border", className),
+	...props
+});
+const CommandItem = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.Item, {
+	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
+	...props
+});
+const CommandShortcut = ({ className,...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto text-muted-foreground text-xs tracking-widest", className),
+		...props
+	});
+};
+/**
+* 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>
+* ```
+*/
+const Command = {
+	...CommandRoot,
+	Dialog: CommandDialog,
+	Input: CommandInput,
+	List: CommandList,
+	Empty: CommandEmpty,
+	Group: CommandGroup,
+	Separator: CommandSeparator,
+	Item: CommandItem,
+	Shortcut: CommandShortcut
+};
+
+//#endregion
+export { Command, CommandRoot };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Command/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CommandRoot: FC<ComponentProps<typeof CommandPrimitive>>","CommandPrimitive","CommandDialog: FC<CommandDialogProps>","CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>>","CommandList: FC<ComponentProps<typeof CommandPrimitive.List>>","CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>>","CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>>","CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n>","CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>>"],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-md',\n      className\n    )}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('-mx-1 h-px bg-border', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-muted-foreground text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"mappings":";;;;;;;;;;AAaA,MAAaA,eAA4D,EACvE,UACA,GAAG,YAEH,oBAACC;CACC,WAAW,GACT,sDACA,UACD;CACD,GAAI;EACJ;AAKJ,MAAMC,iBAAyC,EAAE,SAAU,GAAG,YAC5D,oBAAC;CAAO,GAAI;WACV,oBAAC;EAAc,WAAU;YACvB,oBAAC;GAAY,WAAU;GACpB;IACW;GACA;EACT;AAGX,MAAMC,gBAAmE,EACvE,UACA,GAAG,YAEH,qBAAC;CAAI,WAAU;CAA2B,sBAAmB;YAC3D,oBAAC,UAAO,WAAU,oCAAoC,EACtD,oBAACF,UAAiB;EAChB,WAAW,GACT,kJACA,UACD;EACD,GAAI;GACJ;EACE;AAGR,MAAMG,eAAiE,EACrE,UACA,GAAG,YAEH,oBAACH,UAAiB;CAChB,WAAW,GAAG,mDAAmD,UAAU;CAC3E,GAAI;EACJ;AAGJ,MAAMI,gBACJ,UACG,oBAACJ,UAAiB;CAAM,WAAU;CAA2B,GAAI;EAAS;AAE/E,MAAMK,gBAAmE,EACvE,UACA,GAAG,YAEH,oBAACL,UAAiB;CAChB,WAAW,GACT,0NACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMM,oBAED,EAAE,UAAW,GAAG,YACnB,oBAACN,UAAiB;CAChB,WAAW,GAAG,wBAAwB,UAAU;CAChD,GAAI;EACJ;AAGJ,MAAMO,eAAiE,EACrE,UACA,GAAG,YAEH,oBAACP,UAAiB;CAChB,WAAW,GACT,2PACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,mBAAmB,EACvB,UACA,GAAG,YACkC;AACrC,QACE,oBAAC;EACC,WAAW,GACT,yDACA,UACD;EACD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;AAqBN,MAAa,UAAU;CACrB,GAAG;CACH,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,MAAM;CACN,UAAU;CACX"}

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

@@ -0,0 +1,194 @@
+import { cn } from "../../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Container/index.tsx
+/**
+* Container component variants using class-variance-authority
+* Provides flexible styling options for background, padding, borders, and layout
+*/
+const containerVariants = cva("flex flex-col text-text backdrop-blur", {
+	variants: {
+		roundedSize: {
+			none: "rounded-none",
+			sm: "rounded-sm",
+			md: "rounded-md",
+			lg: "rounded-lg",
+			xl: "rounded-xl",
+			"2xl": "rounded-2xl",
+			"3xl": "rounded-3xl",
+			full: "rounded-full"
+		},
+		transparency: {
+			none: "bg-card",
+			sm: "bg-card/95",
+			md: "bg-card/70",
+			lg: "bg-card/40",
+			xl: "bg-card/20",
+			full: ""
+		},
+		padding: {
+			none: "p-0",
+			sm: "p-1",
+			md: "p-2",
+			lg: "p-3",
+			xl: "p-4"
+		},
+		separator: {
+			without: "",
+			x: "divide-x divide-dashed divide-text/20",
+			y: "divide-y divide-dashed divide-text/20",
+			both: "divide-x divide-y divide-dashed divide-text/20"
+		},
+		border: {
+			none: "",
+			with: "border-[1.5px]"
+		},
+		borderColor: {
+			primary: "border-primary",
+			secondary: "border-secondary",
+			neutral: "border-neutral",
+			text: "border-text",
+			error: "border-error",
+			warning: "border-warning",
+			success: "border-success"
+		},
+		background: {
+			none: "bg-inherit",
+			hoverable: "!bg-opacity-5 hover:!bg-opacity-10 focus:!bg-opacity-10 aria-selected:!bg-opacity-15 backdrop-blur-0 hover:backdrop-blur focus:backdrop-blur aria-selected:backdrop-blur",
+			with: ""
+		},
+		gap: {
+			none: "gap-0",
+			sm: "gap-1",
+			md: "gap-3",
+			lg: "gap-5",
+			xl: "gap-8",
+			"2xl": "gap-10"
+		}
+	},
+	defaultVariants: {
+		roundedSize: "md",
+		border: "none",
+		borderColor: "text",
+		transparency: "md",
+		padding: "none",
+		separator: "without",
+		gap: "none"
+	}
+});
+/** Available rounded corner sizes for the container */
+let ContainerRoundedSize = /* @__PURE__ */ function(ContainerRoundedSize$1) {
+	ContainerRoundedSize$1["NONE"] = "none";
+	ContainerRoundedSize$1["SM"] = "sm";
+	ContainerRoundedSize$1["MD"] = "md";
+	ContainerRoundedSize$1["LG"] = "lg";
+	ContainerRoundedSize$1["XL"] = "xl";
+	ContainerRoundedSize$1["TWO_XL"] = "2xl";
+	ContainerRoundedSize$1["THREE_XL"] = "3xl";
+	ContainerRoundedSize$1["FULL"] = "full";
+	return ContainerRoundedSize$1;
+}({});
+/** Background transparency levels for the container */
+let ContainerTransparency = /* @__PURE__ */ function(ContainerTransparency$1) {
+	ContainerTransparency$1["NONE"] = "none";
+	ContainerTransparency$1["SM"] = "sm";
+	ContainerTransparency$1["MD"] = "md";
+	ContainerTransparency$1["LG"] = "lg";
+	ContainerTransparency$1["XL"] = "xl";
+	ContainerTransparency$1["FULL"] = "full";
+	return ContainerTransparency$1;
+}({});
+/** Padding sizes for container content */
+let ContainerPadding = /* @__PURE__ */ function(ContainerPadding$1) {
+	ContainerPadding$1["NONE"] = "none";
+	ContainerPadding$1["SM"] = "sm";
+	ContainerPadding$1["MD"] = "md";
+	ContainerPadding$1["LG"] = "lg";
+	ContainerPadding$1["XL"] = "xl";
+	return ContainerPadding$1;
+}({});
+/** Separator options for dividing container children */
+let ContainerSeparator = /* @__PURE__ */ function(ContainerSeparator$1) {
+	ContainerSeparator$1["WITHOUT"] = "without";
+	ContainerSeparator$1["X"] = "x";
+	ContainerSeparator$1["Y"] = "y";
+	ContainerSeparator$1["BOTH"] = "both";
+	return ContainerSeparator$1;
+}({});
+/** Border color options for the container */
+let ContainerBorderColor = /* @__PURE__ */ function(ContainerBorderColor$1) {
+	ContainerBorderColor$1["PRIMARY"] = "primary";
+	ContainerBorderColor$1["SECONDARY"] = "secondary";
+	ContainerBorderColor$1["NEUTRAL"] = "neutral";
+	ContainerBorderColor$1["TEXT"] = "text";
+	ContainerBorderColor$1["ERROR"] = "error";
+	ContainerBorderColor$1["WARNING"] = "warning";
+	ContainerBorderColor$1["SUCCESS"] = "success";
+	return ContainerBorderColor$1;
+}({});
+/** Background interaction states for the container */
+let ContainerBackground = /* @__PURE__ */ function(ContainerBackground$1) {
+	ContainerBackground$1["NONE"] = "none";
+	ContainerBackground$1["HOVERABLE"] = "hoverable";
+	ContainerBackground$1["WITH"] = "with";
+	return ContainerBackground$1;
+}({});
+/** Gap sizes between container children */
+let ContainerGap = /* @__PURE__ */ function(ContainerGap$1) {
+	ContainerGap$1["NONE"] = "none";
+	ContainerGap$1["SM"] = "sm";
+	ContainerGap$1["MD"] = "md";
+	ContainerGap$1["LG"] = "lg";
+	ContainerGap$1["XL"] = "xl";
+	ContainerGap$1["TWO_XL"] = "2xl";
+	return ContainerGap$1;
+}({});
+/**
+* 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
+*/
+const Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap,...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn(containerVariants({
+		roundedSize,
+		transparency,
+		padding,
+		separator,
+		border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
+		background,
+		borderColor,
+		gap,
+		className
+	})),
+	...props,
+	children
+});
+
+//#endregion
+export { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Container/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Container: FC<ContainerProps>"],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/95',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'p-1',\n      md: 'p-2',\n      lg: 'p-3',\n      xl: 'p-4',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\n      hoverable:\n        '!bg-opacity-5 hover:!bg-opacity-10 focus:!bg-opacity-10 aria-selected:!bg-opacity-15 backdrop-blur-0 hover:backdrop-blur focus:backdrop-blur aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAAI,yCAAyC;CAC5E,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;GACP,MAAM;GACP;EACD,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;GACP;EACD,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACN;CACF,CAAC;;AAGF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,0EAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,oEAAL;AACL;AACA;AACA;AACA;;;;AAIF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,sEAAL;AACL;AACA;AACA;;;;AAIF,IAAY,wDAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,MAAaA,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,IACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACA;EACD,CAAC,CACH;CACD,GAAI;CAEH;EACG"}