@intlayer/design-system 5.0.5 → 5.1.0

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

@@ -1,22 +1,7 @@
 import { DialogProps } from '@radix-ui/react-dialog';
-import { FC, HTMLAttributes } from 'react';
-export declare const CommandRoot: import('react').ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string, keywords?: string[]) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    disablePointerSelection?: boolean;
-    vimBindings?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentProps, FC, HTMLAttributes } from 'react';
+export declare const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>>;
 /**
  * Usage example:
  * ```jsx
@@ -36,100 +21,63 @@ export declare const CommandRoot: import('react').ForwardRefExoticComponent<Omit
  */
 export declare const Command: {
     Dialog: FC<DialogProps>;
-    Input: import('react').ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement>> & {
+    Input: FC<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement>> & {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
     }, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
-    } & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
-    List: import('react').ForwardRefExoticComponent<Omit<{
+    } & import('react').RefAttributes<HTMLInputElement>>;
+    List: FC<{
         children?: React.ReactNode;
     } & Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    }, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>> & {
         label?: string;
-    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Empty: import('react').ForwardRefExoticComponent<Omit<{
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Empty: FC<{
         children?: React.ReactNode;
     } & Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Group: import('react').ForwardRefExoticComponent<Omit<{
+    }, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>> & import('react').RefAttributes<HTMLDivElement>>;
+    Group: FC<{
         children?: React.ReactNode;
     } & Omit<Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    }, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
         heading?: React.ReactNode;
         value?: string;
         forceMount?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Separator: import('react').ForwardRefExoticComponent<Omit<Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Separator: FC<Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    }, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>> & {
         alwaysRender?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Item: import('react').ForwardRefExoticComponent<Omit<{
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Item: FC<{
         children?: React.ReactNode;
     } & Omit<Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    }, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;
         keywords?: string[];
         forceMount?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Shortcut: {
-        ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    defaultProps?: Partial<Omit<{
-        children?: React.ReactNode;
-    } & Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement>;
-    } & {
-        asChild?: boolean;
-    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
-        label?: string;
-        shouldFilter?: boolean;
-        filter?: (value: string, search: string, keywords?: string[]) => number;
-        defaultValue?: string;
-        value?: string;
-        onValueChange?: (value: string) => void;
-        loop?: boolean;
-        disablePointerSelection?: boolean;
-        vimBindings?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>> | undefined;
-    propTypes?: import('react').WeakValidationMap<Omit<{
-        children?: React.ReactNode;
-    } & Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement>;
-    } & {
-        asChild?: boolean;
-    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
-        label?: string;
-        shouldFilter?: boolean;
-        filter?: (value: string, search: string, keywords?: string[]) => number;
-        defaultValue?: string;
-        value?: string;
-        onValueChange?: (value: string) => void;
-        loop?: boolean;
-        disablePointerSelection?: boolean;
-        vimBindings?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>> | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Shortcut: ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+    propTypes?: any;
     displayName?: string | undefined;
-    $$typeof: symbol;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Command/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAGL,KAAK,EAAE,EAEP,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAGf,eAAO,MAAM,WAAW;eAVG,MAAO,SAC9B;;UA0K0nM,MAAO,GAAG;;;;;;qDAAwwB,CAAC;;;;;;;0GArJ/4N,CAAC;AAyHH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;cAWu/S,MAAO,GAAG;;;;;;;;mBA3K1/S,MAAO,SAC9B;;cA0K+2P,MAAO,GAAG;;;;;;;mBA3Kl2P,MAAO,SAC9B;;cA0Kwqb,MAAO,GAAG;;;;;mBA3K3pb,MAAO,SAC9B;;cA0KssU,MAAO,GAAG;;;;kBAAmO,MAAO,SAAS;;;;;cAAqe,MAAO,GAAG;;;;;;;mBA3K35V,MAAO,SAC9B;;cA0K83Q,MAAO,GAAG;;;;;;;;;;;kCAzCz4Q,cAAc,CAAC,eAAe,CAAC;;;;mBAlIP,MAAO,SAC9B;;cA0K0nM,MAAO,GAAG;;;;;;yDAAwwB,CAAC;;;;;;;;;mBA3Kt3N,MAAO,SAC9B;;cA0K0nM,MAAO,GAAG;;;;;;yDAAwwB,CAAC;;;;;;;;;;CADh5N,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Command/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAEnD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG1E,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAWnE,CAAC;AA8FF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,OAAO;;;cAWuoV,MAAO,GAAG;;;;;;;;mBA1IroV,MAAO,SAAS;;cA0Im9R,MAAO,GAAG;;;;;;;mBA1I7+R,MAAO,SAAS;;cA0I4wd,MAAO,GAAG;;;;;mBA1Ityd,MAAO,SAAS;;cA0I0yW,MAAO,GAAG;;;;kBAAmO,MAAO,SAAS;;;;;cAAqe,MAAO,GAAG;;;;;;;mBA1ItiY,MAAO,SAAS;;cA0Ik+S,MAAO,GAAG;;;;;;;;;;wCAxCzhT,cAAc,CAAC,eAAe,CAAC;;;CAuCjC,CAAC"}

package/dist/components/Command/index.mjs

@@ -1,97 +1,88 @@
 "use client";
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, DialogContent } from "@radix-ui/react-dialog";
 import { Command as Command$1 } from "cmdk";
 import { Search } from "lucide-react";
-import { forwardRef } from "react";
 import { cn } from "../../utils/cn.mjs";
-const CommandRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+const CommandRoot = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
   Command$1,
   {
-    ref,
     className: cn(
       "flex size-full flex-col overflow-hidden rounded-md",
       className
     ),
     ...props
   }
-));
-CommandRoot.displayName = Command$1.displayName;
-const CommandDialog = ({ children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CommandRoot, { className: "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[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 = forwardRef(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property, sonarjs/no-unknown-property
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Command$1.Input,
-      {
-        ref,
-        className: cn(
-          "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ...props
-      }
-    )
-  ] })
-));
-CommandInput.displayName = Command$1.Input.displayName;
-const CommandList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+);
+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]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[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(
+        "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] });
+const CommandList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
   Command$1.List,
   {
-    ref,
     className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
     ...props
   }
-));
-CommandList.displayName = Command$1.List.displayName;
-const CommandEmpty = forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Command$1.Empty,
-  {
-    ref,
-    className: "py-6 text-center text-sm",
-    ...props
-  }
-));
-CommandEmpty.displayName = Command$1.Empty.displayName;
-const CommandGroup = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+);
+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,
   {
-    ref,
     className: cn(
       "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
       className
     ),
     ...props
   }
-));
-CommandGroup.displayName = Command$1.Group.displayName;
-const CommandSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+);
+const CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
   Command$1.Separator,
   {
-    ref,
     className: cn("bg-border -mx-1 h-px", className),
     ...props
   }
-));
-CommandSeparator.displayName = Command$1.Separator.displayName;
-const CommandItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+);
+const CommandItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
   Command$1.Item,
   {
-    ref,
     className: cn(
       "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className
     ),
     ...props
   }
-));
-CommandItem.displayName = Command$1.Item.displayName;
+);
 const CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
@@ -102,7 +93,6 @@ const CommandShortcut = ({
     }
   );
 };
-CommandShortcut.displayName = "CommandShortcut";
 const Command = {
   ...CommandRoot,
   Dialog: CommandDialog,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Command/index.tsx"],"sourcesContent":["'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 {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type FC,\n  forwardRef,\n  type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot = forwardRef<\n  ElementRef<typeof CommandPrimitive>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex size-full flex-col overflow-hidden rounded-md',\n      className\n    )}\n    {...props}\n  />\n));\nCommandRoot.displayName = CommandPrimitive.displayName;\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]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[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 = forwardRef<\n  ElementRef<typeof CommandPrimitive.Input>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  // eslint-disable-next-line react/no-unknown-property, sonarjs/no-unknown-property\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      ref={ref}\n      className={cn(\n        'placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = forwardRef<\n  ElementRef<typeof CommandPrimitive.List>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = forwardRef<\n  ElementRef<typeof CommandPrimitive.Empty>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = forwardRef<\n  ElementRef<typeof CommandPrimitive.Group>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = forwardRef<\n  ElementRef<typeof CommandPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('bg-border -mx-1 h-px', className)}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = forwardRef<\n  ElementRef<typeof CommandPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = 'CommandShortcut';\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"],"names":["jsx","CommandPrimitive","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.mjs","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, type FC, type 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]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[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        'placeholder:text-muted-foreground flex w-full rounded-md bg-transparent text-sm outline-none 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      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\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('bg-border -mx-1 h-px', 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      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none 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        'text-muted-foreground ml-auto 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"],"names":["CommandPrimitive"],"mappings":";;;;;;AAaO,MAAM,cAA2D,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA;AAAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAKF,MAAM,gBAAwC,CAAC,EAAE,UAAU,GAAG,MAAM,0BACjE,QAAQ,EAAA,GAAG,OACV,UAAC,oBAAA,eAAA,EAAc,WAAU,uBACvB,UAAA,oBAAC,eAAY,WAAU,uSACpB,UACH,EAAA,CACF,EACF,CAAA;AAGF,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACG,qBAAA,OAAA,EAAI,WAAU,4BAA2B,sBAAmB,IAC3D,UAAA;AAAA,EAAC,oBAAA,QAAA,EAAO,WAAU,kCAAkC,CAAA;AAAA,EACpD;AAAA,IAACA,UAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AACN,GACF;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,IACzE,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,eAAkE,CACtE,UACI,oBAAAA,UAAiB,OAAjB,EAAuB,WAAU,4BAA4B,GAAG,OAAO;AAE7E,MAAM,eAAkE,CAAC;AAAA,EACvE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,mBAEF,CAAC,EAAE,WAAW,GAAG,MACnB,MAAA;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW,GAAG,wBAAwB,SAAS;AAAA,IAC9C,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,cAAgE,CAAC;AAAA,EACrE;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAACA,UAAiB;AAAA,EAAjB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,GAAG;AACL,MAAuC;AAEnC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAmBO,MAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,UAAU;AACZ;"}

package/dist/components/Container/index.cjs

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const classVarianceAuthority = require("class-variance-authority");
-const require$$0 = require("react");
 const utils_cn = require("../../utils/cn.cjs");
 const containerVariants = classVarianceAuthority.cva(
   "flex flex-col p-10 text-text backdrop-blur dark:text-text-dark",
@@ -19,12 +18,21 @@ const containerVariants = classVarianceAuthority.cva(
         full: "rounded-full"
       },
       transparency: {
+        none: "",
+        full: "bg-none",
+        sm: "dark:bg-opacity-90",
+        md: "dark:bg-opacity-70",
+        lg: "dark:bg-opacity-40",
+        xl: "dark:bg-opacity-20"
+      },
+      backgroundColor: {
         none: "bg-card dark:bg-card-dark",
-        full: "",
-        sm: "bg-card/90 dark:bg-card-dark/90",
-        md: "bg-card/70 dark:bg-card-dark/70",
-        lg: "bg-card/40 dark:bg-card-dark/40",
-        xl: "bg-card/20 dark:bg-card-dark/20"
+        primary: "bg-primary dark:bg-primary-dark",
+        secondary: "bg-secondary dark:bg-secondary-dark",
+        neutral: "bg-neutral dark:bg-neutral-dark",
+        text: "bg-text dark:bg-text-dark",
+        card: "bg-card dark:bg-card-dark",
+        contrast: "bg-background-dark dark:bg-background"
       },
       padding: {
         none: "p-0",
@@ -50,7 +58,8 @@ const containerVariants = classVarianceAuthority.cva(
         text: "border-text dark:border-text-dark"
       },
       background: {
-        none: "bg-inherit	",
+        none: "bg-inherit",
+        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: {
@@ -66,6 +75,7 @@ const containerVariants = classVarianceAuthority.cva(
       roundedSize: "md",
       border: "none",
       borderColor: "text",
+      backgroundColor: "card",
       transparency: "md",
       padding: "none",
       separator: "without",
@@ -73,38 +83,37 @@ const containerVariants = classVarianceAuthority.cva(
     }
   }
 );
-const Container = require$$0.forwardRef(
-  ({
-    children,
-    roundedSize,
-    padding,
-    transparency,
-    separator,
-    className,
-    border,
-    borderColor,
-    background,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    "div",
-    {
-      ref,
-      className: utils_cn.cn(
-        containerVariants({
-          roundedSize,
-          transparency,
-          padding,
-          separator,
-          border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
-          background: typeof background === "boolean" ? background ? "with" : "none" : void 0,
-          borderColor,
-          className
-        })
-      ),
-      ...props,
-      children
-    }
-  )
+const Container = ({
+  children,
+  roundedSize,
+  padding,
+  transparency,
+  separator,
+  className,
+  border,
+  borderColor,
+  backgroundColor,
+  background,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: utils_cn.cn(
+      containerVariants({
+        roundedSize,
+        transparency,
+        padding,
+        separator,
+        border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
+        background,
+        backgroundColor,
+        borderColor,
+        className
+      })
+    ),
+    ...props,
+    children
+  }
 );
 Container.displayName = "Container";
 exports.Container = Container;

package/dist/components/Container/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type PropsWithChildren, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\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 dark:bg-card-dark',\n        full: '',\n        sm: 'bg-card/90 dark:bg-card-dark/90',\n        md: 'bg-card/70 dark:bg-card-dark/70',\n        lg: 'bg-card/40 dark:bg-card-dark/40',\n        xl: 'bg-card/20 dark:bg-card-dark/20',\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 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n      },\n      background: {\n        none: 'bg-inherit\t',\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\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\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>\n> &\n  HTMLAttributes<HTMLDivElement> & {\n    border?: boolean;\n    background?: boolean;\n  };\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      children,\n      roundedSize,\n      padding,\n      transparency,\n      separator,\n      className,\n      border,\n      borderColor,\n      background,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        containerVariants({\n          roundedSize,\n          transparency,\n          padding,\n          separator,\n          border:\n            typeof border === 'boolean'\n              ? border\n                ? 'with'\n                : 'none'\n              : undefined,\n          background:\n            typeof background === 'boolean'\n              ? background\n                ? 'with'\n                : 'none'\n              : undefined,\n          borderColor,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAUO,MAAM,YAAYC,WAAA;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,SAAA;AAAA,QACT,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE,OAAO,WAAW,YACd,SACE,SACA,SACF;AAAA,UACN,YACE,OAAO,eAAe,YAClB,aACE,SACA,SACF;AAAA,UACN;AAAA,UACA;AAAA,QACD,CAAA;AAAA,MACH;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type HTMLAttributes,\n  type FC,\n  type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\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: '',\n        full: 'bg-none',\n        sm: 'dark:bg-opacity-90',\n        md: 'dark:bg-opacity-70',\n        lg: 'dark:bg-opacity-40',\n        xl: 'dark:bg-opacity-20',\n      },\n      backgroundColor: {\n        none: 'bg-card dark:bg-card-dark',\n        primary: 'bg-primary dark:bg-primary-dark',\n        secondary: 'bg-secondary dark:bg-secondary-dark',\n        neutral: 'bg-neutral dark:bg-neutral-dark',\n        text: 'bg-text dark:bg-text-dark',\n        card: 'bg-card dark:bg-card-dark',\n        contrast: 'bg-background-dark dark:bg-background',\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 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n      },\n      background: {\n        none: 'bg-inherit',\n        hoverable:\n          '!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',\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\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      backgroundColor: 'card',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  backgroundColor,\n  background,\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        backgroundColor,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AASA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;;"}

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

@@ -1,33 +1,19 @@
 import { VariantProps } from 'class-variance-authority';
-import { PropsWithChildren, HTMLAttributes } from 'react';
+import { PropsWithChildren, HTMLAttributes, FC, DetailedHTMLProps } from 'react';
 declare const containerVariants: (props?: ({
     roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | null | undefined;
     transparency?: "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
+    backgroundColor?: "contrast" | "none" | "text" | "card" | "primary" | "secondary" | "neutral" | null | undefined;
     padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
-    separator?: "x" | "y" | "both" | "without" | null | undefined;
+    separator?: "x" | "y" | "without" | "both" | null | undefined;
     border?: "none" | "with" | null | undefined;
     borderColor?: "text" | "primary" | "secondary" | "neutral" | null | undefined;
-    background?: "none" | "with" | null | undefined;
+    background?: "none" | "hoverable" | "with" | null | undefined;
     gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type ContainerProps = PropsWithChildren<Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>> & HTMLAttributes<HTMLDivElement> & {
+export type ContainerProps = PropsWithChildren<Omit<VariantProps<typeof containerVariants>, 'border'>> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     border?: boolean;
-    background?: boolean;
 };
-export declare const Container: import('react').ForwardRefExoticComponent<Omit<VariantProps<(props?: ({
-    roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | null | undefined;
-    transparency?: "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
-    padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
-    separator?: "x" | "y" | "both" | "without" | null | undefined;
-    border?: "none" | "with" | null | undefined;
-    borderColor?: "text" | "primary" | "secondary" | "neutral" | null | undefined;
-    background?: "none" | "with" | null | undefined;
-    gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "background" | "border"> & {
-    children?: import('react').ReactNode | undefined;
-} & HTMLAttributes<HTMLDivElement> & {
-    border?: boolean;
-    background?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Container: FC<ContainerProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,iBAAiB,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGhF,QAAA,MAAM,iBAAiB;;;;;;;;;8EAqEtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC,CACtE,GACC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,SAAS;;;;;;;;;;;;aAJT,OAAO;iBACH,OAAO;kDAgDvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,QAAA,MAAM,iBAAiB;;;;;;;;;;8EAiFtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CACvD,GACC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgCxC,CAAC"}