@intlayer/design-system 8.4.3 → 8.4.5

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

@@ -1,2 +1,43 @@
-"use client";import{useCallback as e,useEffect as t,useRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=({children:i,onClickOutSide:a,listenForEscape:o=!1,disabled:s=!1,...c})=>{let l=n(null),u=e(e=>{s||l.current&&!l.current.contains(e.target)&&a()},[a,s]),d=e(e=>{s||!o||e.key===`Escape`&&a()},[a,s,o]);return t(()=>(document.addEventListener(`mousedown`,u,{passive:!0}),o&&document.addEventListener(`keydown`,d),()=>{document.removeEventListener(`mousedown`,u),o&&document.removeEventListener(`keydown`,d)}),[u,d,o]),r(`div`,{ref:l,...c,role:c.role||`region`,children:i})};export{i as ClickOutsideDiv};
+'use client';
+
+import { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ClickOutsideDiv/index.tsx
+const ClickOutsideDiv = ({ children, onClickOutSide, listenForEscape = false, disabled = false, ...props }) => {
+	const divRef = useRef(null);
+	const handleClickOutside = useCallback((event) => {
+		if (disabled) return;
+		if (divRef.current && !divRef.current.contains(event.target)) onClickOutSide();
+	}, [onClickOutSide, disabled]);
+	const handleKeyDown = useCallback((event) => {
+		if (disabled || !listenForEscape) return;
+		if (event.key === "Escape") onClickOutSide();
+	}, [
+		onClickOutSide,
+		disabled,
+		listenForEscape
+	]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside, { passive: true });
+		if (listenForEscape) document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			if (listenForEscape) document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		handleClickOutside,
+		handleKeyDown,
+		listenForEscape
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: divRef,
+		...props,
+		role: props.role || "region",
+		children
+	});
+};
+
+//#endregion
+export { ClickOutsideDiv };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  /**\n   * Callback function called when a click occurs outside the component\n   */\n  onClickOutSide: () => void;\n  /**\n   * Whether to listen for Escape key presses\n   * @default false\n   */\n  listenForEscape?: boolean;\n  /**\n   * Whether the component is disabled (won't trigger onClickOutSide)\n   * @default false\n   */\n  disabled?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  listenForEscape = false,\n  disabled = false,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (disabled) return;\n\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled || !listenForEscape) return;\n\n      if (event.key === 'Escape') {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled, listenForEscape]\n  );\n\n  useEffect(() => {\n    // Attach the event listeners\n    document.addEventListener('mousedown', handleClickOutside, {\n      passive: true,\n    });\n\n    if (listenForEscape) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      if (listenForEscape) {\n        document.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n  return (\n    <div\n      ref={divRef}\n      {...props}\n      // Add role for better accessibility when used as a container\n      role={props.role || 'region'}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":"oHA6BA,MAAa,GAA6C,CACxD,WACA,iBACA,kBAAkB,GAClB,WAAW,GACX,GAAG,KACC,CACJ,IAAM,EAAS,EAAuB,KAAK,CAErC,EAAqB,EACxB,GAAsB,CACjB,GAGA,EAAO,SAAW,CAAC,EAAO,QAAQ,SAAS,EAAM,OAAe,EAClE,GAAgB,EAGpB,CAAC,EAAgB,EAAS,CAC3B,CAEK,EAAgB,EACnB,GAAyB,CACpB,GAAY,CAAC,GAEb,EAAM,MAAQ,UAChB,GAAgB,EAGpB,CAAC,EAAgB,EAAU,EAAgB,CAC5C,CAqBD,OAnBA,OAEE,SAAS,iBAAiB,YAAa,EAAoB,CACzD,QAAS,GACV,CAAC,CAEE,GACF,SAAS,iBAAiB,UAAW,EAAc,KAIxC,CACX,SAAS,oBAAoB,YAAa,EAAmB,CACzD,GACF,SAAS,oBAAoB,UAAW,EAAc,GAGzD,CAAC,EAAoB,EAAe,EAAgB,CAAC,CAGtD,EAAC,MAAD,CACE,IAAK,EACL,GAAI,EAEJ,KAAM,EAAM,MAAQ,SAEnB,WACG,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  /**\n   * Callback function called when a click occurs outside the component\n   */\n  onClickOutSide: () => void;\n  /**\n   * Whether to listen for Escape key presses\n   * @default false\n   */\n  listenForEscape?: boolean;\n  /**\n   * Whether the component is disabled (won't trigger onClickOutSide)\n   * @default false\n   */\n  disabled?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  listenForEscape = false,\n  disabled = false,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (disabled) return;\n\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled || !listenForEscape) return;\n\n      if (event.key === 'Escape') {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled, listenForEscape]\n  );\n\n  useEffect(() => {\n    // Attach the event listeners\n    document.addEventListener('mousedown', handleClickOutside, {\n      passive: true,\n    });\n\n    if (listenForEscape) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      if (listenForEscape) {\n        document.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n  return (\n    <div\n      ref={divRef}\n      {...props}\n      // Add role for better accessibility when used as a container\n      role={props.role || 'region'}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AA6BA,MAAa,mBAA6C,EACxD,UACA,gBACA,kBAAkB,OAClB,WAAW,OACX,GAAG,YACC;CACJ,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MAAI,SAAU;AAGd,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,OAAe,CAClE,iBAAgB;IAGpB,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,gBAAgB,aACnB,UAAyB;AACxB,MAAI,YAAY,CAAC,gBAAiB;AAElC,MAAI,MAAM,QAAQ,SAChB,iBAAgB;IAGpB;EAAC;EAAgB;EAAU;EAAgB,CAC5C;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,oBAAoB,EACzD,SAAS,MACV,CAAC;AAEF,MAAI,gBACF,UAAS,iBAAiB,WAAW,cAAc;AAIrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,OAAI,gBACF,UAAS,oBAAoB,WAAW,cAAc;;IAGzD;EAAC;EAAoB;EAAe;EAAgB,CAAC;AAExD,QACE,oBAAC,OAAD;EACE,KAAK;EACL,GAAI;EAEJ,MAAM,MAAM,QAAQ;EAEnB;EACG"}

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

@@ -1,2 +1,166 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{MaxHeightSmoother as t}from"../MaxHeightSmoother/index.mjs";import{useState as n}from"react";import{cva as r}from"class-variance-authority";import{ChevronRight as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=r(`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`}}),c=r(`flex w-full 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`}}),l=r(`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`}}),u=({title:r,data:u,className:d,headerClassName:f,contentClassName:p,tableClassName:m,thClassName:h,tdClassName:g,trClassName:_,defaultExpanded:v=!1,isExpanded:y,onExpandToggle:b,toggleIcon:x,size:S,variant:C,spacing:w,borderStyle:T,tableSpacing:E,tableLayout:D,columnRenderers:O,disabled:k=!1,"aria-label":A,contentId:j,...M})=>{let[N,P]=n(v),F=y??N,I=()=>{if(k)return;let e=!F;b?b(e):P(e)},L=(e=>{if(Array.isArray(e)&&e.length>0){let t=new Set;return e.forEach(e=>{e&&typeof e==`object`&&Object.keys(e).forEach(e=>{t.add(e)})}),Array.from(t)}return[]})(u),R=j||`collapsible-table-${Math.random().toString(36).substr(2,9)}`,z=(e,t,n)=>O?.[e]?O[e](t,n):String(t??`—`);return o(`section`,{className:e(s({size:S,variant:C,spacing:w}),d),"aria-label":A,...M,children:[o(`button`,{id:`${R}-header`,type:`button`,onClick:I,disabled:k,className:e(c({variant:C,borderStyle:F?T:`none`}),f,k&&`cursor-not-allowed opacity-50`),"aria-expanded":F,"aria-controls":R,children:[a(`p`,{className:`font-semibold`,children:r}),a(`div`,{className:e(`transition-transform duration-200`,F&&`rotate-90`,k&&`opacity-50`),children:x??a(i,{size:16})})]}),a(t,{isHidden:!F,children:a(`section`,{id:R,className:e(`overflow-x-auto p-3`,p),"aria-labelledby":`${R}-header`,children:o(`table`,{className:e(l({spacing:E,layout:D}),`border-separate`,m),children:[a(`thead`,{children:a(`tr`,{className:_,children:L.map(t=>a(`th`,{className:e(`pb-2 text-left font-medium text-sm text-text/70`,h),children:t},t))})}),a(`tbody`,{children:u.map((t,n)=>a(`tr`,{className:e(`bg-neutral/5 transition-colors hover:bg-neutral/10`,_),children:L.map(n=>a(`td`,{className:e(`rounded px-3 py-2 text-sm text-text`,g),children:z(n,t[n],t)},n))},n))})]})})})]})};export{u as CollapsibleTable};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { useState } from "react";
+import { cva } from "class-variance-authority";
+import { ChevronRight } from "lucide-react";
+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 w-full 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.
+*/
+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) => {
+		if (Array.isArray(data) && data.length > 0) {
+			const allKeys = /* @__PURE__ */ new Set();
+			data.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("section", {
+		className: cn(collapsibleTableVariants({
+			size,
+			variant,
+			spacing
+		}), className),
+		"aria-label": ariaLabel,
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			id: `${generatedContentId}-header`,
+			type: "button",
+			onClick: toggleExpanded,
+			disabled,
+			className: cn(headerVariants({
+				variant,
+				borderStyle: isExpanded ? borderStyle : "none"
+			}), headerClassName, disabled && "cursor-not-allowed opacity-50"),
+			"aria-expanded": isExpanded,
+			"aria-controls": generatedContentId,
+			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("section", {
+				id: generatedContentId,
+				className: cn("overflow-x-auto p-3", contentClassName),
+				"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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTable.mjs","names":[],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, type HTMLAttributes, type ReactNode, useState } from 'react';\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 w-full 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<HTMLElement>, '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 */\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) => {\n            allKeys.add(key);\n          });\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    <section\n      className={cn(\n        collapsibleTableVariants({ size, variant, spacing }),\n        className\n      )}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      <button\n        id={`${generatedContentId}-header`}\n        type=\"button\"\n        onClick={toggleExpanded}\n        disabled={disabled}\n        className={cn(\n          headerVariants({\n            variant,\n            borderStyle: isExpanded ? borderStyle : 'none',\n          }),\n          headerClassName,\n          disabled && 'cursor-not-allowed opacity-50'\n        )}\n        aria-expanded={isExpanded}\n        aria-controls={generatedContentId}\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      </button>\n\n      <MaxHeightSmoother isHidden={!isExpanded}>\n        <section\n          id={generatedContentId}\n          className={cn('overflow-x-auto p-3', contentClassName)}\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        </section>\n      </MaxHeightSmoother>\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CollapsibleTable.mjs","names":[],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, type HTMLAttributes, type ReactNode, useState } from 'react';\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 w-full 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<HTMLElement>, '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 */\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) => {\n            allKeys.add(key);\n          });\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    <section\n      className={cn(\n        collapsibleTableVariants({ size, variant, spacing }),\n        className\n      )}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      <button\n        id={`${generatedContentId}-header`}\n        type=\"button\"\n        onClick={toggleExpanded}\n        disabled={disabled}\n        className={cn(\n          headerVariants({\n            variant,\n            borderStyle: isExpanded ? borderStyle : 'none',\n          }),\n          headerClassName,\n          disabled && 'cursor-not-allowed opacity-50'\n        )}\n        aria-expanded={isExpanded}\n        aria-controls={generatedContentId}\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      </button>\n\n      <MaxHeightSmoother isHidden={!isExpanded}>\n        <section\n          id={generatedContentId}\n          className={cn('overflow-x-auto p-3', contentClassName)}\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        </section>\n      </MaxHeightSmoother>\n    </section>\n  );\n};\n"],"mappings":"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"}

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

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

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

@@ -1,2 +1,89 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Search as t}from"lucide-react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{Dialog as i,DialogContent as a}from"@radix-ui/react-dialog";import{Command as o}from"cmdk";const s=({className:t,...r})=>n(o,{className:e(`flex flex-col overflow-hidden rounded-md`,t),...r}),c=({children:e,...t})=>n(i,{...t,children:n(a,{className:`overflow-hidden p-0`,children:n(s,{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:e})})}),l=({className:i,...a})=>r(`div`,{className:`flex w-full items-center`,"cmdk-input-wrapper":``,children:[n(t,{className:`mr-2 size-4 shrink-0 opacity-50`}),n(o.Input,{className:e(`flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50`,i),...a})]}),u=({className:t,...r})=>n(o.List,{className:e(`max-h-[300px] overflow-y-auto overflow-x-hidden`,t),...r}),d=e=>n(o.Empty,{className:`py-6 text-center text-sm`,...e}),f=({className:t,...r})=>n(o.Group,{className:e(`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`,t),...r}),p=({className:t,...r})=>n(o.Separator,{className:e(`-mx-1 h-px bg-border`,t),...r}),m=({className:t,...r})=>n(o.Item,{className:e(`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`,t),...r}),h=({className:t,...r})=>n(`span`,{className:e(`ml-auto text-muted-foreground text-xs tracking-widest`,t),...r}),g={...s,Dialog:c,Input:l,List:u,Empty:d,Group:f,Separator:p,Item:m,Shortcut:h};export{g as Command,s as CommandRoot};
+'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 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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["CommandPrimitive"],"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 { cn } from '@utils/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn('flex flex-col overflow-hidden rounded-md', className)}\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":"+OAaA,MAAa,GAA4D,CACvE,YACA,GAAG,KAEH,EAACA,EAAD,CACE,UAAW,EAAG,2CAA4C,EAAU,CACpE,GAAI,EACJ,CAAA,CAKE,GAAyC,CAAE,WAAU,GAAG,KAC5D,EAAC,EAAD,CAAQ,GAAI,WACV,EAAC,EAAD,CAAe,UAAU,+BACvB,EAAC,EAAD,CAAa,UAAU,sSACpB,WACW,CAAA,CACA,CAAA,CACT,CAAA,CAGL,GAAmE,CACvE,YACA,GAAG,KAEH,EAAC,MAAD,CAAK,UAAU,2BAA2B,qBAAmB,YAA7D,CACE,EAAC,EAAD,CAAQ,UAAU,kCAAoC,CAAA,CACtD,EAACA,EAAiB,MAAlB,CACE,UAAW,EACT,iJACA,EACD,CACD,GAAI,EACJ,CAAA,CACE,GAGF,GAAiE,CACrE,YACA,GAAG,KAEH,EAACA,EAAiB,KAAlB,CACE,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EACJ,CAAA,CAGE,EACJ,GACG,EAACA,EAAiB,MAAlB,CAAwB,UAAU,2BAA2B,GAAI,EAAS,CAAA,CAEzE,GAAmE,CACvE,YACA,GAAG,KAEH,EAACA,EAAiB,MAAlB,CACE,UAAW,EACT,yNACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAED,CAAE,YAAW,GAAG,KACnB,EAACA,EAAiB,UAAlB,CACE,UAAW,EAAG,uBAAwB,EAAU,CAChD,GAAI,EACJ,CAAA,CAGE,GAAiE,CACrE,YACA,GAAG,KAEH,EAACA,EAAiB,KAAlB,CACE,UAAW,EACT,0PACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAmB,CACvB,YACA,GAAG,KAGD,EAAC,OAAD,CACE,UAAW,EACT,wDACA,EACD,CACD,GAAI,EACJ,CAAA,CAqBO,EAAU,CACrB,GAAG,EACH,OAAQ,EACR,MAAO,EACP,KAAM,EACN,MAAO,EACP,MAAO,EACP,UAAW,EACX,KAAM,EACN,SAAU,EACX"}
+{"version":3,"file":"index.mjs","names":["CommandPrimitive"],"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 { cn } from '@utils/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn('flex flex-col overflow-hidden rounded-md', className)}\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,MAAa,eAA4D,EACvE,WACA,GAAG,YAEH,oBAACA,WAAD;CACE,WAAW,GAAG,4CAA4C,UAAU;CACpE,GAAI;CACJ;AAKJ,MAAM,iBAAyC,EAAE,UAAU,GAAG,YAC5D,oBAAC,QAAD;CAAQ,GAAI;WACV,oBAAC,eAAD;EAAe,WAAU;YACvB,oBAAC,aAAD;GAAa,WAAU;GACpB;GACW;EACA;CACT;AAGX,MAAM,gBAAmE,EACvE,WACA,GAAG,YAEH,qBAAC,OAAD;CAAK,WAAU;CAA2B,sBAAmB;WAA7D,CACE,oBAAC,QAAD,EAAQ,WAAU,mCAAoC,GACtD,oBAACA,UAAiB,OAAlB;EACE,WAAW,GACT,kJACA,UACD;EACD,GAAI;EACJ,EACE;;AAGR,MAAM,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACA,UAAiB,MAAlB;CACE,WAAW,GAAG,mDAAmD,UAAU;CAC3E,GAAI;CACJ;AAGJ,MAAM,gBACJ,UACG,oBAACA,UAAiB,OAAlB;CAAwB,WAAU;CAA2B,GAAI;CAAS;AAE/E,MAAM,gBAAmE,EACvE,WACA,GAAG,YAEH,oBAACA,UAAiB,OAAlB;CACE,WAAW,GACT,0NACA,UACD;CACD,GAAI;CACJ;AAGJ,MAAM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAACA,UAAiB,WAAlB;CACE,WAAW,GAAG,wBAAwB,UAAU;CAChD,GAAI;CACJ;AAGJ,MAAM,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACA,UAAiB,MAAlB;CACE,WAAW,GACT,2PACA,UACD;CACD,GAAI;CACJ;AAGJ,MAAM,mBAAmB,EACvB,WACA,GAAG,YACkC;AACrC,QACE,oBAAC,QAAD;EACE,WAAW,GACT,yDACA,UACD;EACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;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

@@ -1,2 +1,204 @@
-import{cn as e}from"../../utils/cn.mjs";import{cva as t}from"class-variance-authority";import{jsx as n}from"react/jsx-runtime";const r=t(`flex flex-col text-text backdrop-blur`,{variants:{roundedSize:{none:`rounded-none`,sm:`rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md`,md:`rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg`,lg:`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,xl:`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,"2xl":`rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl`,"3xl":`rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl`,"4xl":`rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]`,full:`rounded-full`},transparency:{none:`bg-card`,xs:`bg-card/95`,sm:`bg-card/90`,md:`bg-card/70`,lg:`bg-card/40`,xl:`bg-card/20`,full:``},padding:{none:`p-0`,sm:`px-3 py-2`,md:`px-4 py-3`,lg:`px-6 py-4`,xl:`px-8 py-6`,"2xl":`px-10 py-8`},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.3px]`},borderColor:{primary:`border-primary`,secondary:`border-secondary`,neutral:`border-neutral`,card:`border-card`,text:`border-text`,error:`border-error`,warning:`border-warning`,success:`border-success`},background:{none:``,hoverable:`bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! 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:`lg`,border:`none`,borderColor:`text`,transparency:`md`,padding:`none`,separator:`without`,gap:`none`},compoundVariants:[{background:`none`,class:`bg-transparent`}]});let i=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e[`3xl`]=`3xl`,e[`4xl`]=`4xl`,e[`5xl`]=`5xl`,e.FULL=`full`,e}({}),a=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.FULL=`full`,e}({}),o=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e}({}),s=function(e){return e.WITHOUT=`without`,e.X=`x`,e.Y=`y`,e.BOTH=`both`,e}({}),c=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.NEUTRAL=`neutral`,e.CARD=`card`,e.TEXT=`text`,e.ERROR=`error`,e.WARNING=`warning`,e.SUCCESS=`success`,e}({}),l=function(e){return e.NONE=`none`,e.HOVERABLE=`hoverable`,e.WITH=`with`,e}({}),u=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e[`2xl`]=`2xl`,e}({});const d=({children:t,roundedSize:i,padding:a,transparency:o,separator:s,className:c,border:l,borderColor:u,background:d,gap:f,...p})=>n(`div`,{className:e(r({roundedSize:i,transparency:o,padding:a,separator:s,border:typeof l==`boolean`?l?`with`:`none`:void 0,background:d,borderColor:u,gap:f}),c),...p,children:t});export{d as Container,l as ContainerBackground,c as ContainerBorderColor,u as ContainerGap,o as ContainerPadding,i as ContainerRoundedSize,s as ContainerSeparator,a as ContainerTransparency,r as containerVariants};
+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 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md",
+			md: "rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg",
+			lg: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+			xl: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
+			"2xl": "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+			"3xl": "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
+			"4xl": "rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]",
+			full: "rounded-full"
+		},
+		transparency: {
+			none: "bg-card",
+			xs: "bg-card/95",
+			sm: "bg-card/90",
+			md: "bg-card/70",
+			lg: "bg-card/40",
+			xl: "bg-card/20",
+			full: ""
+		},
+		padding: {
+			none: "p-0",
+			sm: "px-3 py-2",
+			md: "px-4 py-3",
+			lg: "px-6 py-4",
+			xl: "px-8 py-6",
+			"2xl": "px-10 py-8"
+		},
+		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.3px]"
+		},
+		borderColor: {
+			primary: "border-primary",
+			secondary: "border-secondary",
+			neutral: "border-neutral",
+			card: "border-card",
+			text: "border-text",
+			error: "border-error",
+			warning: "border-warning",
+			success: "border-success"
+		},
+		background: {
+			none: "",
+			hoverable: "bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! 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: "lg",
+		border: "none",
+		borderColor: "text",
+		transparency: "md",
+		padding: "none",
+		separator: "without",
+		gap: "none"
+	},
+	compoundVariants: [{
+		background: "none",
+		class: "bg-transparent"
+	}]
+});
+/** Available rounded corner sizes for the container */
+let ContainerRoundedSize = /* @__PURE__ */ function(ContainerRoundedSize) {
+	ContainerRoundedSize["NONE"] = "none";
+	ContainerRoundedSize["SM"] = "sm";
+	ContainerRoundedSize["MD"] = "md";
+	ContainerRoundedSize["LG"] = "lg";
+	ContainerRoundedSize["XL"] = "xl";
+	ContainerRoundedSize["2xl"] = "2xl";
+	ContainerRoundedSize["3xl"] = "3xl";
+	ContainerRoundedSize["4xl"] = "4xl";
+	ContainerRoundedSize["5xl"] = "5xl";
+	ContainerRoundedSize["FULL"] = "full";
+	return ContainerRoundedSize;
+}({});
+/** Background transparency levels for the container */
+let ContainerTransparency = /* @__PURE__ */ function(ContainerTransparency) {
+	ContainerTransparency["NONE"] = "none";
+	ContainerTransparency["SM"] = "sm";
+	ContainerTransparency["MD"] = "md";
+	ContainerTransparency["LG"] = "lg";
+	ContainerTransparency["XL"] = "xl";
+	ContainerTransparency["FULL"] = "full";
+	return ContainerTransparency;
+}({});
+/** Padding sizes for container content */
+let ContainerPadding = /* @__PURE__ */ function(ContainerPadding) {
+	ContainerPadding["NONE"] = "none";
+	ContainerPadding["SM"] = "sm";
+	ContainerPadding["MD"] = "md";
+	ContainerPadding["LG"] = "lg";
+	ContainerPadding["XL"] = "xl";
+	return ContainerPadding;
+}({});
+/** Separator options for dividing container children */
+let ContainerSeparator = /* @__PURE__ */ function(ContainerSeparator) {
+	ContainerSeparator["WITHOUT"] = "without";
+	ContainerSeparator["X"] = "x";
+	ContainerSeparator["Y"] = "y";
+	ContainerSeparator["BOTH"] = "both";
+	return ContainerSeparator;
+}({});
+/** Border color options for the container */
+let ContainerBorderColor = /* @__PURE__ */ function(ContainerBorderColor) {
+	ContainerBorderColor["PRIMARY"] = "primary";
+	ContainerBorderColor["SECONDARY"] = "secondary";
+	ContainerBorderColor["NEUTRAL"] = "neutral";
+	ContainerBorderColor["CARD"] = "card";
+	ContainerBorderColor["TEXT"] = "text";
+	ContainerBorderColor["ERROR"] = "error";
+	ContainerBorderColor["WARNING"] = "warning";
+	ContainerBorderColor["SUCCESS"] = "success";
+	return ContainerBorderColor;
+}({});
+/** Background interaction states for the container */
+let ContainerBackground = /* @__PURE__ */ function(ContainerBackground) {
+	ContainerBackground["NONE"] = "none";
+	ContainerBackground["HOVERABLE"] = "hoverable";
+	ContainerBackground["WITH"] = "with";
+	return ContainerBackground;
+}({});
+/** Gap sizes between container children */
+let ContainerGap = /* @__PURE__ */ function(ContainerGap) {
+	ContainerGap["NONE"] = "none";
+	ContainerGap["SM"] = "sm";
+	ContainerGap["MD"] = "md";
+	ContainerGap["LG"] = "lg";
+	ContainerGap["XL"] = "xl";
+	ContainerGap["2xl"] = "2xl";
+	return ContainerGap;
+}({});
+/**
+* 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