@me1a/ui 2.2.1 → 2.2.2

package/dist/atoms/accordion.d.mts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+
+/**
+ * Props for a single-item accordion
+ */
+type AccordionSingleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    /** The type of accordion - must be "single" for this variant */
+    type: "single";
+    /** The default value of the accordion item */
+    defaultValue?: string;
+    /** The controlled value of the accordion item */
+    value?: string;
+    /** Callback fired when the value changes */
+    onValueChange?: (_value: string) => void;
+    /** Whether the accordion item can be collapsed */
+    collapsible?: boolean;
+};
+/**
+ * Props for a multiple-item accordion
+ */
+type AccordionMultipleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    /** The type of accordion - must be "multiple" for this variant */
+    type: "multiple";
+    /** The default values of the accordion items */
+    defaultValue?: string[];
+    /** The controlled values of the accordion items */
+    value?: string[];
+    /** Callback fired when the values change */
+    onValueChange?: (_value: string[]) => void;
+};
+/**
+ * Props for the Accordion component
+ */
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+/**
+ * Props for an individual accordion item
+ */
+interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+    /** The value of the accordion item */
+    value: string;
+}
+/**
+ * Props for the accordion trigger button
+ */
+interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /** The content of the accordion trigger */
+    children: React.ReactNode;
+}
+/**
+ * Props for the accordion content panel
+ */
+interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    /** The content of the accordion panel */
+    children: React.ReactNode;
+}
+
+/**
+ * Accordion component that displays a list of expandable/collapsible sections.
+ * Built on top of Radix UI's Accordion primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-accordion--docs
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Section 2</AccordionTrigger>
+ *     <AccordionContent>Content 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "single";
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (_value: string) => void;
+    collapsible?: boolean;
+}) | (Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "multiple";
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (_value: string[]) => void;
+})) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/atoms/accordion.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+
+/**
+ * Props for a single-item accordion
+ */
+type AccordionSingleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    /** The type of accordion - must be "single" for this variant */
+    type: "single";
+    /** The default value of the accordion item */
+    defaultValue?: string;
+    /** The controlled value of the accordion item */
+    value?: string;
+    /** Callback fired when the value changes */
+    onValueChange?: (_value: string) => void;
+    /** Whether the accordion item can be collapsed */
+    collapsible?: boolean;
+};
+/**
+ * Props for a multiple-item accordion
+ */
+type AccordionMultipleProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    /** The type of accordion - must be "multiple" for this variant */
+    type: "multiple";
+    /** The default values of the accordion items */
+    defaultValue?: string[];
+    /** The controlled values of the accordion items */
+    value?: string[];
+    /** Callback fired when the values change */
+    onValueChange?: (_value: string[]) => void;
+};
+/**
+ * Props for the Accordion component
+ */
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+/**
+ * Props for an individual accordion item
+ */
+interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+    /** The value of the accordion item */
+    value: string;
+}
+/**
+ * Props for the accordion trigger button
+ */
+interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /** The content of the accordion trigger */
+    children: React.ReactNode;
+}
+/**
+ * Props for the accordion content panel
+ */
+interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    /** The content of the accordion panel */
+    children: React.ReactNode;
+}
+
+/**
+ * Accordion component that displays a list of expandable/collapsible sections.
+ * Built on top of Radix UI's Accordion primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-accordion--docs
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Section 2</AccordionTrigger>
+ *     <AccordionContent>Content 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "single";
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (_value: string) => void;
+    collapsible?: boolean;
+}) | (Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "multiple";
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (_value: string[]) => void;
+})) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/atoms/accordion.js

@@ -0,0 +1,2 @@
+'use strict';var n=require('react'),o=require('@radix-ui/react-accordion'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var n__namespace=/*#__PURE__*/_interopNamespace(n);var o__namespace=/*#__PURE__*/_interopNamespace(o);function t(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var f=n__namespace.forwardRef(({className:e,...r},i)=>jsxRuntime.jsx(o__namespace.Root,{ref:i,className:t("w-full",e),...r}));f.displayName="Accordion";var p=n__namespace.forwardRef(({className:e,...r},i)=>jsxRuntime.jsx(o__namespace.Item,{ref:i,className:t("border-b",e),...r}));p.displayName="AccordionItem";var l=n__namespace.forwardRef(({className:e,children:r,...i},a)=>jsxRuntime.jsx(o__namespace.Header,{className:"flex",children:jsxRuntime.jsxs(o__namespace.Trigger,{ref:a,className:t("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",e),...i,children:[r,jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"})]})}));l.displayName=o__namespace.Trigger.displayName;var A=n__namespace.forwardRef(({className:e,children:r,...i},a)=>jsxRuntime.jsx(o__namespace.Content,{ref:a,className:t("overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",e),...i,children:jsxRuntime.jsx("div",{className:t("pb-4 pt-0",e),children:r})}));A.displayName=o__namespace.Content.displayName;exports.Accordion=f;exports.AccordionContent=A;exports.AccordionItem=p;exports.AccordionTrigger=l;//# sourceMappingURL=accordion.js.map
+//# sourceMappingURL=accordion.js.map

package/dist/atoms/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/accordion/accordion.tsx"],"names":["cn","inputs","twMerge","clsx","Accordion","n","className","props","ref","jsx","o","AccordionItem","AccordionTrigger","children","jsxs","ChevronDown","AccordionContent"],"mappings":"6mBAGO,SAASA,CAAMC,CAAAA,GAAAA,CAAAA,CAAsB,CAC1C,OAAOC,sBAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,KC2BMG,CAAkB,CAAAC,YAAA,CAAA,UAAA,CAGtB,CAAC,CAAE,SAAA,CAAAC,EAAW,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC1BC,eAAoBC,YAAnB,CAAA,IAAA,CAAA,CAAwB,IAAKF,CAAK,CAAA,SAAA,CAAWR,EAAG,QAAUM,CAAAA,CAAS,CAAI,CAAA,GAAGC,EAAO,CACnF,EACDH,EAAU,WAAc,CAAA,WAAA,KAElBO,CAAsB,CAAAN,YAAA,CAAA,UAAA,CAG1B,CAAC,CAAE,UAAAC,CAAW,CAAA,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC1BC,eAAoBC,YAAnB,CAAA,IAAA,CAAA,CAAwB,IAAKF,CAAK,CAAA,SAAA,CAAWR,EAAG,UAAYM,CAAAA,CAAS,EAAI,GAAGC,CAAAA,CAAO,CACrF,EACDI,CAAAA,CAAc,WAAc,CAAA,eAAA,KAEtBC,CAAyB,CAAAP,YAAA,CAAA,UAAA,CAG7B,CAAC,CAAE,SAAA,CAAAC,EAAW,QAAAO,CAAAA,CAAAA,CAAU,GAAGN,CAAM,EAAGC,CACpCC,GAAAA,cAAAA,CAAoBC,oBAAnB,CAA0B,SAAA,CAAU,OACnC,QAAAI,CAAAA,eAAAA,CAAoBJ,YAAnB,CAAA,OAAA,CAAA,CACC,IAAKF,CACL,CAAA,SAAA,CAAWR,EACT,gJACAM,CAAAA,CACF,EACC,GAAGC,CAAAA,CAEH,UAAAM,CACDJ,CAAAA,cAAAA,CAACM,wBAAA,CAAY,SAAA,CAAU,2EAA2E,CACpG,CAAA,CAAA,CAAA,CACF,CACD,EACDH,CAAAA,CAAiB,WAAiC,CAAAF,YAAA,CAAA,OAAA,CAAQ,YAEpDM,IAAAA,CAAAA,CAAyBX,wBAG7B,CAAC,CAAE,UAAAC,CAAW,CAAA,QAAA,CAAAO,CAAU,CAAA,GAAGN,CAAM,CAAGC,CAAAA,CAAAA,GACpCC,eAAoBC,YAAnB,CAAA,OAAA,CAAA,CACC,IAAKF,CACL,CAAA,SAAA,CAAWR,CACT,CAAA,2GAAA,CACAM,CACF,CACC,CAAA,GAAGC,EAEJ,QAAAE,CAAAA,cAAAA,CAAC,OAAI,SAAWT,CAAAA,CAAAA,CAAG,YAAaM,CAAS,CAAA,CAAI,SAAAO,CAAS,CAAA,CAAA,CACxD,CACD,EACDG,CAAAA,CAAiB,YAAiCN,YAAQ,CAAA,OAAA,CAAA,WAAA","file":"accordion.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/utils/index\"\nimport type {\n  AccordionProps,\n  AccordionItemProps,\n  AccordionTriggerProps,\n  AccordionContentProps\n} from \"./accordion.types\"\n\n/**\n * Accordion component that displays a list of expandable/collapsible sections.\n * Built on top of Radix UI's Accordion primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-accordion--docs\n *\n * @example\n * ```tsx\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content 1</AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"item-2\">\n *     <AccordionTrigger>Section 2</AccordionTrigger>\n *     <AccordionContent>Content 2</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nconst Accordion = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Root>,\n  AccordionProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Root ref={ref} className={cn(\"w-full\", className)} {...props} />\n))\nAccordion.displayName = \"Accordion\"\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item ref={ref} className={cn(\"border-b\", className)} {...props} />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n      className\n    )}\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"]}

package/dist/atoms/accordion.mjs

@@ -0,0 +1,2 @@
+import*as n from'react';import*as o from'@radix-ui/react-accordion';import {ChevronDown}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';function t(...e){return twMerge(clsx(e))}var f=n.forwardRef(({className:e,...r},i)=>jsx(o.Root,{ref:i,className:t("w-full",e),...r}));f.displayName="Accordion";var p=n.forwardRef(({className:e,...r},i)=>jsx(o.Item,{ref:i,className:t("border-b",e),...r}));p.displayName="AccordionItem";var l=n.forwardRef(({className:e,children:r,...i},a)=>jsx(o.Header,{className:"flex",children:jsxs(o.Trigger,{ref:a,className:t("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",e),...i,children:[r,jsx(ChevronDown,{className:"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"})]})}));l.displayName=o.Trigger.displayName;var A=n.forwardRef(({className:e,children:r,...i},a)=>jsx(o.Content,{ref:a,className:t("overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",e),...i,children:jsx("div",{className:t("pb-4 pt-0",e),children:r})}));A.displayName=o.Content.displayName;export{f as Accordion,A as AccordionContent,p as AccordionItem,l as AccordionTrigger};//# sourceMappingURL=accordion.mjs.map
+//# sourceMappingURL=accordion.mjs.map

package/dist/atoms/accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/accordion/accordion.tsx"],"names":["cn","inputs","twMerge","clsx","Accordion","className","props","ref","jsx","AccordionItem","AccordionTrigger","children","jsxs","ChevronDown","AccordionContent"],"mappings":"iNAGO,SAASA,CAAMC,CAAAA,GAAAA,CAAAA,CAAsB,CAC1C,OAAOC,QAAQC,IAAKF,CAAAA,CAAM,CAAC,CAC7B,KC2BMG,CAAkB,CAAA,CAAA,CAAA,UAAA,CAGtB,CAAC,CAAE,SAAA,CAAAC,EAAW,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC1BC,IAAoB,CAAnB,CAAA,IAAA,CAAA,CAAwB,IAAKD,CAAK,CAAA,SAAA,CAAWP,EAAG,QAAUK,CAAAA,CAAS,CAAI,CAAA,GAAGC,EAAO,CACnF,EACDF,EAAU,WAAc,CAAA,WAAA,KAElBK,CAAsB,CAAA,CAAA,CAAA,UAAA,CAG1B,CAAC,CAAE,UAAAJ,CAAW,CAAA,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAC1BC,IAAoB,CAAnB,CAAA,IAAA,CAAA,CAAwB,IAAKD,CAAK,CAAA,SAAA,CAAWP,EAAG,UAAYK,CAAAA,CAAS,EAAI,GAAGC,CAAAA,CAAO,CACrF,EACDG,CAAAA,CAAc,WAAc,CAAA,eAAA,KAEtBC,CAAyB,CAAA,CAAA,CAAA,UAAA,CAG7B,CAAC,CAAE,SAAA,CAAAL,EAAW,QAAAM,CAAAA,CAAAA,CAAU,GAAGL,CAAM,EAAGC,CACpCC,GAAAA,GAAAA,CAAoB,SAAnB,CAA0B,SAAA,CAAU,OACnC,QAAAI,CAAAA,IAAAA,CAAoB,CAAnB,CAAA,OAAA,CAAA,CACC,IAAKL,CACL,CAAA,SAAA,CAAWP,EACT,gJACAK,CAAAA,CACF,EACC,GAAGC,CAAAA,CAEH,UAAAK,CACDH,CAAAA,GAAAA,CAACK,YAAA,CAAY,SAAA,CAAU,2EAA2E,CACpG,CAAA,CAAA,CAAA,CACF,CACD,EACDH,CAAAA,CAAiB,WAAiC,CAAA,CAAA,CAAA,OAAA,CAAQ,YAEpDI,IAAAA,CAAAA,CAAyB,aAG7B,CAAC,CAAE,UAAAT,CAAW,CAAA,QAAA,CAAAM,CAAU,CAAA,GAAGL,CAAM,CAAGC,CAAAA,CAAAA,GACpCC,IAAoB,CAAnB,CAAA,OAAA,CAAA,CACC,IAAKD,CACL,CAAA,SAAA,CAAWP,CACT,CAAA,2GAAA,CACAK,CACF,CACC,CAAA,GAAGC,EAEJ,QAAAE,CAAAA,GAAAA,CAAC,OAAI,SAAWR,CAAAA,CAAAA,CAAG,YAAaK,CAAS,CAAA,CAAI,SAAAM,CAAS,CAAA,CAAA,CACxD,CACD,EACDG,CAAAA,CAAiB,YAAiC,CAAQ,CAAA,OAAA,CAAA,WAAA","file":"accordion.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/utils/index\"\nimport type {\n  AccordionProps,\n  AccordionItemProps,\n  AccordionTriggerProps,\n  AccordionContentProps\n} from \"./accordion.types\"\n\n/**\n * Accordion component that displays a list of expandable/collapsible sections.\n * Built on top of Radix UI's Accordion primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-accordion--docs\n *\n * @example\n * ```tsx\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content 1</AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"item-2\">\n *     <AccordionTrigger>Section 2</AccordionTrigger>\n *     <AccordionContent>Content 2</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nconst Accordion = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Root>,\n  AccordionProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Root ref={ref} className={cn(\"w-full\", className)} {...props} />\n))\nAccordion.displayName = \"Accordion\"\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item ref={ref} className={cn(\"border-b\", className)} {...props} />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n      className\n    )}\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"]}

package/dist/atoms/avatar.d.mts

@@ -0,0 +1,34 @@
+import * as React$1 from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+/**
+ * Avatar component that displays a user's profile picture or fallback.
+ * Built on top of Radix UI's Avatar primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-avatar--docs
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/path/to/image.jpg" alt="User avatar" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * AvatarImage component that displays the user's profile picture.
+ * Falls back to AvatarFallback if the image fails to load.
+ */
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+/**
+ * AvatarFallback component that displays when the image fails to load.
+ * Typically shows the user's initials or a placeholder icon.
+ */
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
+type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
+type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
+
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };

package/dist/atoms/avatar.d.ts

@@ -0,0 +1,34 @@
+import * as React$1 from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+/**
+ * Avatar component that displays a user's profile picture or fallback.
+ * Built on top of Radix UI's Avatar primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-avatar--docs
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/path/to/image.jpg" alt="User avatar" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * AvatarImage component that displays the user's profile picture.
+ * Falls back to AvatarFallback if the image fails to load.
+ */
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+/**
+ * AvatarFallback component that displays when the image fails to load.
+ * Typically shows the user's initials or a placeholder icon.
+ */
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
+type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
+type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
+
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };

package/dist/atoms/avatar.js

@@ -0,0 +1,2 @@
+'use strict';var o=require('react'),a=require('@radix-ui/react-avatar'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var o__namespace=/*#__PURE__*/_interopNamespace(o);var a__namespace=/*#__PURE__*/_interopNamespace(a);function l(...r){return tailwindMerge.twMerge(clsx.clsx(r))}var m=o__namespace.forwardRef(({className:r,...e},t)=>jsxRuntime.jsx(a__namespace.Root,{ref:t,className:l("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",r),...e}));m.displayName=a__namespace.Root.displayName;var v=o__namespace.forwardRef(({className:r,...e},t)=>jsxRuntime.jsx(a__namespace.Image,{ref:t,className:l("aspect-square h-full w-full",r),...e}));v.displayName=a__namespace.Image.displayName;var s=o__namespace.forwardRef(({className:r,...e},t)=>jsxRuntime.jsx(a__namespace.Fallback,{ref:t,className:l("flex h-full w-full items-center justify-center rounded-full bg-muted",r),...e}));s.displayName=a__namespace.Fallback.displayName;exports.Avatar=m;exports.AvatarFallback=s;exports.AvatarImage=v;//# sourceMappingURL=avatar.js.map
+//# sourceMappingURL=avatar.js.map

package/dist/atoms/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/avatar/avatar.tsx"],"names":["cn","inputs","twMerge","clsx","Avatar","o","className","props","ref","jsx","a","AvatarImage","AvatarFallback"],"mappings":"skBAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAAA,CAAQC,SAAKF,CAAAA,CAAM,CAAC,CAC7B,KCcMG,CAAe,CAAAC,YAAA,CAAA,UAAA,CACnB,CAAC,CAAE,SAAAC,CAAAA,CAAAA,CAAW,GAAGC,CAAM,CAAA,CAAGC,CACxBC,GAAAA,cAAAA,CAAiBC,YAAhB,CAAA,IAAA,CAAA,CACC,IAAKF,CACL,CAAA,SAAA,CAAWR,CAAG,CAAA,+DAAA,CAAiEM,CAAS,CAAA,CACvF,GAAGC,CAAAA,CACN,CAEJ,EACAH,CAAO,CAAA,WAAA,CAA8BM,YAAK,CAAA,IAAA,CAAA,WAAA,KAMpCC,CAAoB,CAAAN,YAAA,CAAA,UAAA,CAGxB,CAAC,CAAE,SAAAC,CAAAA,CAAAA,CAAW,GAAGC,CAAM,CAAA,CAAGC,CAC1BC,GAAAA,cAAAA,CAAiBC,YAAhB,CAAA,KAAA,CAAA,CACC,IAAKF,CACL,CAAA,SAAA,CAAWR,CAAG,CAAA,6BAAA,CAA+BM,CAAS,CAAA,CACrD,GAAGC,CAAAA,CACN,CACD,EACDI,CAAY,CAAA,WAAA,CAA8BD,YAAM,CAAA,KAAA,CAAA,WAAA,KAM1CE,CAAuB,CAAAP,YAAA,CAAA,UAAA,CAG3B,CAAC,CAAE,SAAAC,CAAAA,CAAAA,CAAW,GAAGC,CAAM,CAAA,CAAGC,CAC1BC,GAAAA,cAAAA,CAAiBC,YAAhB,CAAA,QAAA,CAAA,CACC,IAAKF,CACL,CAAA,SAAA,CAAWR,CACT,CAAA,sEAAA,CACAM,CACF,CAAA,CACC,GAAGC,CAAAA,CACN,CACD,EACDK,CAAe,CAAA,WAAA,CAA8BF,YAAS,CAAA,QAAA,CAAA,WAAA","file":"avatar.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { cn } from \"@/utils/index\"\nimport type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from \"./avatar.types\"\n\n/**\n * Avatar component that displays a user's profile picture or fallback.\n * Built on top of Radix UI's Avatar primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-avatar--docs\n *\n * @example\n * ```tsx\n * <Avatar>\n *   <AvatarImage src=\"/path/to/image.jpg\" alt=\"User avatar\" />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n * ```\n */\nconst Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, ...props }, ref) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\", className)}\n      {...props}\n    />\n  )\n)\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\n/**\n * AvatarImage component that displays the user's profile picture.\n * Falls back to AvatarFallback if the image fails to load.\n */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\n/**\n * AvatarFallback component that displays when the image fails to load.\n * Typically shows the user's initials or a placeholder icon.\n */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"]}

package/dist/atoms/avatar.mjs

@@ -0,0 +1,2 @@
+import*as o from'react';import*as a from'@radix-ui/react-avatar';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function l(...r){return twMerge(clsx(r))}var m=o.forwardRef(({className:r,...e},t)=>jsx(a.Root,{ref:t,className:l("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",r),...e}));m.displayName=a.Root.displayName;var v=o.forwardRef(({className:r,...e},t)=>jsx(a.Image,{ref:t,className:l("aspect-square h-full w-full",r),...e}));v.displayName=a.Image.displayName;var s=o.forwardRef(({className:r,...e},t)=>jsx(a.Fallback,{ref:t,className:l("flex h-full w-full items-center justify-center rounded-full bg-muted",r),...e}));s.displayName=a.Fallback.displayName;export{m as Avatar,s as AvatarFallback,v as AvatarImage};//# sourceMappingURL=avatar.mjs.map
+//# sourceMappingURL=avatar.mjs.map

package/dist/atoms/avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/avatar/avatar.tsx"],"names":["cn","inputs","twMerge","clsx","Avatar","className","props","ref","jsx","AvatarImage","AvatarFallback"],"mappings":"kKAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAAA,CAAQC,IAAKF,CAAAA,CAAM,CAAC,CAC7B,KCcMG,CAAe,CAAA,CAAA,CAAA,UAAA,CACnB,CAAC,CAAE,SAAAC,CAAAA,CAAAA,CAAW,GAAGC,CAAM,CAAA,CAAGC,CACxBC,GAAAA,GAAAA,CAAiB,CAAhB,CAAA,IAAA,CAAA,CACC,IAAKD,CACL,CAAA,SAAA,CAAWP,CAAG,CAAA,+DAAA,CAAiEK,CAAS,CAAA,CACvF,GAAGC,CAAAA,CACN,CAEJ,EACAF,CAAO,CAAA,WAAA,CAA8B,CAAK,CAAA,IAAA,CAAA,WAAA,KAMpCK,CAAoB,CAAA,CAAA,CAAA,UAAA,CAGxB,CAAC,CAAE,SAAAJ,CAAAA,CAAAA,CAAW,GAAGC,CAAM,CAAA,CAAGC,CAC1BC,GAAAA,GAAAA,CAAiB,CAAhB,CAAA,KAAA,CAAA,CACC,IAAKD,CACL,CAAA,SAAA,CAAWP,CAAG,CAAA,6BAAA,CAA+BK,CAAS,CAAA,CACrD,GAAGC,CAAAA,CACN,CACD,EACDG,CAAY,CAAA,WAAA,CAA8B,CAAM,CAAA,KAAA,CAAA,WAAA,KAM1CC,CAAuB,CAAA,CAAA,CAAA,UAAA,CAG3B,CAAC,CAAE,SAAAL,CAAAA,CAAAA,CAAW,GAAGC,CAAM,CAAA,CAAGC,CAC1BC,GAAAA,GAAAA,CAAiB,CAAhB,CAAA,QAAA,CAAA,CACC,IAAKD,CACL,CAAA,SAAA,CAAWP,CACT,CAAA,sEAAA,CACAK,CACF,CAAA,CACC,GAAGC,CAAAA,CACN,CACD,EACDI,CAAe,CAAA,WAAA,CAA8B,CAAS,CAAA,QAAA,CAAA,WAAA","file":"avatar.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { cn } from \"@/utils/index\"\nimport type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from \"./avatar.types\"\n\n/**\n * Avatar component that displays a user's profile picture or fallback.\n * Built on top of Radix UI's Avatar primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-avatar--docs\n *\n * @example\n * ```tsx\n * <Avatar>\n *   <AvatarImage src=\"/path/to/image.jpg\" alt=\"User avatar\" />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n * ```\n */\nconst Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, ...props }, ref) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\", className)}\n      {...props}\n    />\n  )\n)\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\n/**\n * AvatarImage component that displays the user's profile picture.\n * Falls back to AvatarFallback if the image fails to load.\n */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\n/**\n * AvatarFallback component that displays when the image fails to load.\n * Typically shows the user's initials or a placeholder icon.\n */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"]}

package/dist/atoms/badge.d.mts

@@ -0,0 +1,40 @@
+import * as React$1 from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /**
+     * The content to display inside the badge
+     */
+    children: React.ReactNode;
+    /**
+     * Optional icon to display before the badge content
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional icon to display after the badge content
+     */
+    iconAfter?: React.ReactNode;
+}
+
+/**
+ * Badge component for displaying status, counts, or labels.
+ * Supports various variants, sizes, and optional icons.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-badge--docs
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="warning" icon={<AlertIcon />}>Warning</Badge>
+ * <Badge variant="info" size="lg" iconAfter={<ArrowIcon />}>New</Badge>
+ * ```
+ */
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/atoms/badge.d.ts

@@ -0,0 +1,40 @@
+import * as React$1 from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /**
+     * The content to display inside the badge
+     */
+    children: React.ReactNode;
+    /**
+     * Optional icon to display before the badge content
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional icon to display after the badge content
+     */
+    iconAfter?: React.ReactNode;
+}
+
+/**
+ * Badge component for displaying status, counts, or labels.
+ * Supports various variants, sizes, and optional icons.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-badge--docs
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="warning" icon={<AlertIcon />}>Warning</Badge>
+ * <Badge variant="info" size="lg" iconAfter={<ArrowIcon />}>New</Badge>
+ * ```
+ */
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/atoms/badge.js

@@ -0,0 +1,2 @@
+'use strict';var n=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var n__namespace=/*#__PURE__*/_interopNamespace(n);function r(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var t=classVarianceAuthority.cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",success:"border-transparent bg-green-500 text-white hover:bg-green-500/80",warning:"border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80",info:"border-transparent bg-blue-500 text-white hover:bg-blue-500/80"},size:{default:"h-5",sm:"h-4 text-[10px]",lg:"h-6 text-sm"}},defaultVariants:{variant:"default",size:"default"}});var d=n__namespace.forwardRef(({className:e,variant:i,size:p,icon:a,iconAfter:o,children:g,...f},l)=>jsxRuntime.jsxs("div",{ref:l,className:r(t({variant:i,size:p}),e),...f,children:[a&&jsxRuntime.jsx("span",{className:"mr-1",children:a}),g,o&&jsxRuntime.jsx("span",{className:"ml-1",children:o})]}));d.displayName="Badge";exports.Badge=d;exports.badgeVariants=t;//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/atoms/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/badge/badge.variants.ts","../../src/components/atoms/badge/badge.tsx"],"names":["cn","inputs","twMerge","clsx","badgeVariants","cva","Badge","n","className","variant","size","icon","iconAfter","children","props","ref","jsxs","jsx"],"mappings":"0iBAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,qBAAQC,CAAAA,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCHaG,IAAAA,CAAAA,CAAgBC,0BAC3B,CAAA,wKAAA,CACA,CACE,QAAU,CAAA,CACR,OAAS,CAAA,CACP,OAAS,CAAA,2EAAA,CACT,SACE,CAAA,iFAAA,CACF,WACE,CAAA,uFAAA,CACF,OAAS,CAAA,iBAAA,CACT,OAAS,CAAA,kEAAA,CACT,OAAS,CAAA,oEAAA,CACT,KAAM,gEACR,CAAA,CACA,IAAM,CAAA,CACJ,OAAS,CAAA,KAAA,CACT,EAAI,CAAA,iBAAA,CACJ,GAAI,aACN,CACF,CACA,CAAA,eAAA,CAAiB,CACf,OAAA,CAAS,SACT,CAAA,IAAA,CAAM,SACR,CACF,CACF,ECVA,IAAMC,CAAc,CAAAC,YAAA,CAAA,UAAA,CAClB,CAAC,CAAE,SAAAC,CAAAA,CAAAA,CAAW,QAAAC,CAAS,CAAA,IAAA,CAAAC,CAAM,CAAA,IAAA,CAAAC,CAAM,CAAA,SAAA,CAAAC,CAAW,CAAA,QAAA,CAAAC,CAAU,CAAA,GAAGC,CAAM,CAAA,CAAGC,CAEhEC,GAAAA,eAAAA,CAAC,KAAI,CAAA,CAAA,GAAA,CAAKD,EAAK,SAAWf,CAAAA,CAAAA,CAAGI,CAAc,CAAA,CAAE,OAAAK,CAAAA,CAAAA,CAAS,IAAAC,CAAAA,CAAK,CAAC,CAAA,CAAGF,CAAS,CAAA,CAAI,GAAGM,CAAAA,CAC5E,QAAAH,CAAAA,CAAAA,CAAAA,EAAQM,eAAC,MAAK,CAAA,CAAA,SAAA,CAAU,MAAQ,CAAA,QAAA,CAAAN,CAAK,CAAA,CAAA,CACrCE,CACAD,CAAAA,CAAAA,EAAaK,eAAC,MAAK,CAAA,CAAA,SAAA,CAAU,MAAQ,CAAA,QAAA,CAAAL,CAAU,CAAA,CAAA,CAAA,CAClD,CAGN,EAEAN,EAAM,WAAc,CAAA,OAAA","file":"badge.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cva } from \"class-variance-authority\"\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n        success: \"border-transparent bg-green-500 text-white hover:bg-green-500/80\",\n        warning: \"border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80\",\n        info: \"border-transparent bg-blue-500 text-white hover:bg-blue-500/80\"\n      },\n      size: {\n        default: \"h-5\",\n        sm: \"h-4 text-[10px]\",\n        lg: \"h-6 text-sm\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n)\n","import * as React from \"react\"\nimport { cn } from \"@/utils/index\"\nimport { badgeVariants } from \"./badge.variants\"\nimport type { BadgeProps } from \"./badge.types\"\n\n/**\n * Badge component for displaying status, counts, or labels.\n * Supports various variants, sizes, and optional icons.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-badge--docs\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"warning\" icon={<AlertIcon />}>Warning</Badge>\n * <Badge variant=\"info\" size=\"lg\" iconAfter={<ArrowIcon />}>New</Badge>\n * ```\n */\nconst Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  ({ className, variant, size, icon, iconAfter, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(badgeVariants({ variant, size }), className)} {...props}>\n        {icon && <span className=\"mr-1\">{icon}</span>}\n        {children}\n        {iconAfter && <span className=\"ml-1\">{iconAfter}</span>}\n      </div>\n    )\n  }\n)\n\nBadge.displayName = \"Badge\"\n\nexport { Badge, badgeVariants }\n"]}

package/dist/atoms/badge.mjs

@@ -0,0 +1,2 @@
+import*as n from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';function r(...e){return twMerge(clsx(e))}var t=cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",success:"border-transparent bg-green-500 text-white hover:bg-green-500/80",warning:"border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80",info:"border-transparent bg-blue-500 text-white hover:bg-blue-500/80"},size:{default:"h-5",sm:"h-4 text-[10px]",lg:"h-6 text-sm"}},defaultVariants:{variant:"default",size:"default"}});var d=n.forwardRef(({className:e,variant:i,size:p,icon:a,iconAfter:o,children:g,...f},l)=>jsxs("div",{ref:l,className:r(t({variant:i,size:p}),e),...f,children:[a&&jsx("span",{className:"mr-1",children:a}),g,o&&jsx("span",{className:"ml-1",children:o})]}));d.displayName="Badge";export{d as Badge,t as badgeVariants};//# sourceMappingURL=badge.mjs.map
+//# sourceMappingURL=badge.mjs.map

package/dist/atoms/badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/badge/badge.variants.ts","../../src/components/atoms/badge/badge.tsx"],"names":["cn","inputs","twMerge","clsx","badgeVariants","cva","Badge","className","variant","size","icon","iconAfter","children","props","ref","jsxs","jsx"],"mappings":"yKAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCHaG,IAAAA,CAAAA,CAAgBC,GAC3B,CAAA,wKAAA,CACA,CACE,QAAU,CAAA,CACR,OAAS,CAAA,CACP,OAAS,CAAA,2EAAA,CACT,SACE,CAAA,iFAAA,CACF,WACE,CAAA,uFAAA,CACF,OAAS,CAAA,iBAAA,CACT,OAAS,CAAA,kEAAA,CACT,OAAS,CAAA,oEAAA,CACT,KAAM,gEACR,CAAA,CACA,IAAM,CAAA,CACJ,OAAS,CAAA,KAAA,CACT,EAAI,CAAA,iBAAA,CACJ,GAAI,aACN,CACF,CACA,CAAA,eAAA,CAAiB,CACf,OAAA,CAAS,SACT,CAAA,IAAA,CAAM,SACR,CACF,CACF,ECVA,IAAMC,CAAc,CAAA,CAAA,CAAA,UAAA,CAClB,CAAC,CAAE,SAAAC,CAAAA,CAAAA,CAAW,QAAAC,CAAS,CAAA,IAAA,CAAAC,CAAM,CAAA,IAAA,CAAAC,CAAM,CAAA,SAAA,CAAAC,CAAW,CAAA,QAAA,CAAAC,CAAU,CAAA,GAAGC,CAAM,CAAA,CAAGC,CAEhEC,GAAAA,IAAAA,CAAC,KAAI,CAAA,CAAA,GAAA,CAAKD,EAAK,SAAWd,CAAAA,CAAAA,CAAGI,CAAc,CAAA,CAAE,OAAAI,CAAAA,CAAAA,CAAS,IAAAC,CAAAA,CAAK,CAAC,CAAA,CAAGF,CAAS,CAAA,CAAI,GAAGM,CAAAA,CAC5E,QAAAH,CAAAA,CAAAA,CAAAA,EAAQM,IAAC,MAAK,CAAA,CAAA,SAAA,CAAU,MAAQ,CAAA,QAAA,CAAAN,CAAK,CAAA,CAAA,CACrCE,CACAD,CAAAA,CAAAA,EAAaK,IAAC,MAAK,CAAA,CAAA,SAAA,CAAU,MAAQ,CAAA,QAAA,CAAAL,CAAU,CAAA,CAAA,CAAA,CAClD,CAGN,EAEAL,EAAM,WAAc,CAAA,OAAA","file":"badge.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cva } from \"class-variance-authority\"\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n        success: \"border-transparent bg-green-500 text-white hover:bg-green-500/80\",\n        warning: \"border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80\",\n        info: \"border-transparent bg-blue-500 text-white hover:bg-blue-500/80\"\n      },\n      size: {\n        default: \"h-5\",\n        sm: \"h-4 text-[10px]\",\n        lg: \"h-6 text-sm\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n)\n","import * as React from \"react\"\nimport { cn } from \"@/utils/index\"\nimport { badgeVariants } from \"./badge.variants\"\nimport type { BadgeProps } from \"./badge.types\"\n\n/**\n * Badge component for displaying status, counts, or labels.\n * Supports various variants, sizes, and optional icons.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-badge--docs\n *\n * @example\n * ```tsx\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"warning\" icon={<AlertIcon />}>Warning</Badge>\n * <Badge variant=\"info\" size=\"lg\" iconAfter={<ArrowIcon />}>New</Badge>\n * ```\n */\nconst Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  ({ className, variant, size, icon, iconAfter, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(badgeVariants({ variant, size }), className)} {...props}>\n        {icon && <span className=\"mr-1\">{icon}</span>}\n        {children}\n        {iconAfter && <span className=\"ml-1\">{iconAfter}</span>}\n      </div>\n    )\n  }\n)\n\nBadge.displayName = \"Badge\"\n\nexport { Badge, badgeVariants }\n"]}

package/dist/atoms/box.d.mts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+/**
+ * Box is a fundamental layout component that serves as a building block for other components.
+ * It's a polymorphic component that can render as different HTML elements while maintaining
+ * consistent styling and behavior.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-box--docs
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Box>Content</Box>
+ *
+ * // As a different element
+ * <Box as="section">Section content</Box>
+ *
+ * // With custom className
+ * <Box className="bg-primary text-white p-4">Styled content</Box>
+ *
+ * // With custom dimensions
+ * <Box width="100px" height="200px">Fixed size content</Box>
+ * <Box width="50%" height="auto">Responsive content</Box>
+ * ```
+ */
+
+type BoxComponent = "div" | "span" | "section" | "article" | "main" | "aside" | "header" | "footer" | "nav";
+type DimensionValue = string | number;
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The HTML element to render the Box as.
+     * This allows for semantic HTML while maintaining consistent styling.
+     *
+     * @default "div"
+     */
+    as?: BoxComponent;
+    /**
+     * The width of the Box component.
+     * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
+     */
+    width?: DimensionValue;
+    /**
+     * The height of the Box component.
+     * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
+     */
+    height?: DimensionValue;
+}
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Box, type BoxProps };

package/dist/atoms/box.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+/**
+ * Box is a fundamental layout component that serves as a building block for other components.
+ * It's a polymorphic component that can render as different HTML elements while maintaining
+ * consistent styling and behavior.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-box--docs
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Box>Content</Box>
+ *
+ * // As a different element
+ * <Box as="section">Section content</Box>
+ *
+ * // With custom className
+ * <Box className="bg-primary text-white p-4">Styled content</Box>
+ *
+ * // With custom dimensions
+ * <Box width="100px" height="200px">Fixed size content</Box>
+ * <Box width="50%" height="auto">Responsive content</Box>
+ * ```
+ */
+
+type BoxComponent = "div" | "span" | "section" | "article" | "main" | "aside" | "header" | "footer" | "nav";
+type DimensionValue = string | number;
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The HTML element to render the Box as.
+     * This allows for semantic HTML while maintaining consistent styling.
+     *
+     * @default "div"
+     */
+    as?: BoxComponent;
+    /**
+     * The width of the Box component.
+     * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
+     */
+    width?: DimensionValue;
+    /**
+     * The height of the Box component.
+     * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
+     */
+    height?: DimensionValue;
+}
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Box, type BoxProps };

package/dist/atoms/box.js

@@ -0,0 +1,2 @@
+'use strict';var r=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var r__namespace=/*#__PURE__*/_interopNamespace(r);function n(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var x=r__namespace.forwardRef(({as:e="div",className:s,width:o,height:t,style:a,...i},m)=>{let p={width:typeof o=="number"?`${o}px`:o,height:typeof t=="number"?`${t}px`:t,...a};return jsxRuntime.jsx(e,{ref:m,className:n(s),style:p,...i})});x.displayName="Box";exports.Box=x;//# sourceMappingURL=box.js.map
+//# sourceMappingURL=box.js.map

package/dist/atoms/box.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/box/box.tsx"],"names":["cn","inputs","twMerge","clsx","Box","r","Component","className","width","height","style","props","ref","dimensionStyles","jsx"],"mappings":"+eAGO,SAASA,KAAMC,CAAsB,CAAA,CAC1C,OAAOC,qBAAQC,CAAAA,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCwDA,IAAMG,EAAYC,YAChB,CAAA,UAAA,CAAA,CAAC,CAAE,EAAIC,CAAAA,CAAAA,CAAY,KAAO,CAAA,SAAA,CAAAC,EAAW,KAAAC,CAAAA,CAAAA,CAAO,OAAAC,CAAQ,CAAA,KAAA,CAAAC,EAAO,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAAQ,CAC7E,IAAMC,CAAAA,CAAkB,CACtB,KAAO,CAAA,OAAOL,GAAU,QAAW,CAAA,CAAA,EAAGA,CAAK,CAAA,EAAA,CAAA,CAAOA,EAClD,MAAQ,CAAA,OAAOC,GAAW,QAAW,CAAA,CAAA,EAAGA,CAAM,CAAOA,EAAAA,CAAAA,CAAAA,CAAAA,CACrD,GAAGC,CACL,EAEA,OAAOI,cAAAA,CAACR,EAAA,CAAU,GAAA,CAAKM,EAAK,SAAWZ,CAAAA,CAAAA,CAAGO,CAAS,CAAG,CAAA,KAAA,CAAOM,EAAkB,GAAGF,CAAAA,CAAO,CAC3F,CACF,EAEAP,EAAI,WAAc,CAAA,KAAA","file":"box.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","/**\n * Box is a fundamental layout component that serves as a building block for other components.\n * It's a polymorphic component that can render as different HTML elements while maintaining\n * consistent styling and behavior.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-box--docs\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Box>Content</Box>\n *\n * // As a different element\n * <Box as=\"section\">Section content</Box>\n *\n * // With custom className\n * <Box className=\"bg-primary text-white p-4\">Styled content</Box>\n *\n * // With custom dimensions\n * <Box width=\"100px\" height=\"200px\">Fixed size content</Box>\n * <Box width=\"50%\" height=\"auto\">Responsive content</Box>\n * ```\n */\nimport * as React from \"react\"\nimport { cn } from \"@/utils\"\n\ntype BoxComponent =\n  | \"div\"\n  | \"span\"\n  | \"section\"\n  | \"article\"\n  | \"main\"\n  | \"aside\"\n  | \"header\"\n  | \"footer\"\n  | \"nav\"\n\ntype DimensionValue = string | number\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The HTML element to render the Box as.\n   * This allows for semantic HTML while maintaining consistent styling.\n   *\n   * @default \"div\"\n   */\n  as?: BoxComponent\n\n  /**\n   * The width of the Box component.\n   * Can be a number (interpreted as pixels) or a string (e.g., \"100%\", \"50px\", \"10rem\").\n   */\n  width?: DimensionValue\n\n  /**\n   * The height of the Box component.\n   * Can be a number (interpreted as pixels) or a string (e.g., \"100%\", \"50px\", \"10rem\").\n   */\n  height?: DimensionValue\n}\n\nconst Box = React.forwardRef<HTMLDivElement, BoxProps>(\n  ({ as: Component = \"div\", className, width, height, style, ...props }, ref) => {\n    const dimensionStyles = {\n      width: typeof width === \"number\" ? `${width}px` : width,\n      height: typeof height === \"number\" ? `${height}px` : height,\n      ...style\n    }\n\n    return <Component ref={ref} className={cn(className)} style={dimensionStyles} {...props} />\n  }\n)\n\nBox.displayName = \"Box\"\n\nexport { Box }\n"]}

package/dist/atoms/box.mjs

@@ -0,0 +1,2 @@
+import*as r from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function n(...e){return twMerge(clsx(e))}var x=r.forwardRef(({as:e="div",className:s,width:o,height:t,style:a,...i},m)=>{let p={width:typeof o=="number"?`${o}px`:o,height:typeof t=="number"?`${t}px`:t,...a};return jsx(e,{ref:m,className:n(s),style:p,...i})});x.displayName="Box";export{x as Box};//# sourceMappingURL=box.mjs.map
+//# sourceMappingURL=box.mjs.map

package/dist/atoms/box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/box/box.tsx"],"names":["cn","inputs","twMerge","clsx","Box","Component","className","width","height","style","props","ref","dimensionStyles","jsx"],"mappings":"yHAGO,SAASA,KAAMC,CAAsB,CAAA,CAC1C,OAAOC,OAAQC,CAAAA,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCwDA,IAAMG,EAAY,CAChB,CAAA,UAAA,CAAA,CAAC,CAAE,EAAIC,CAAAA,CAAAA,CAAY,KAAO,CAAA,SAAA,CAAAC,EAAW,KAAAC,CAAAA,CAAAA,CAAO,OAAAC,CAAQ,CAAA,KAAA,CAAAC,EAAO,GAAGC,CAAM,CAAGC,CAAAA,CAAAA,GAAQ,CAC7E,IAAMC,CAAAA,CAAkB,CACtB,KAAO,CAAA,OAAOL,GAAU,QAAW,CAAA,CAAA,EAAGA,CAAK,CAAA,EAAA,CAAA,CAAOA,EAClD,MAAQ,CAAA,OAAOC,GAAW,QAAW,CAAA,CAAA,EAAGA,CAAM,CAAOA,EAAAA,CAAAA,CAAAA,CAAAA,CACrD,GAAGC,CACL,EAEA,OAAOI,GAAAA,CAACR,EAAA,CAAU,GAAA,CAAKM,EAAK,SAAWX,CAAAA,CAAAA,CAAGM,CAAS,CAAG,CAAA,KAAA,CAAOM,EAAkB,GAAGF,CAAAA,CAAO,CAC3F,CACF,EAEAN,EAAI,WAAc,CAAA,KAAA","file":"box.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","/**\n * Box is a fundamental layout component that serves as a building block for other components.\n * It's a polymorphic component that can render as different HTML elements while maintaining\n * consistent styling and behavior.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-box--docs\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Box>Content</Box>\n *\n * // As a different element\n * <Box as=\"section\">Section content</Box>\n *\n * // With custom className\n * <Box className=\"bg-primary text-white p-4\">Styled content</Box>\n *\n * // With custom dimensions\n * <Box width=\"100px\" height=\"200px\">Fixed size content</Box>\n * <Box width=\"50%\" height=\"auto\">Responsive content</Box>\n * ```\n */\nimport * as React from \"react\"\nimport { cn } from \"@/utils\"\n\ntype BoxComponent =\n  | \"div\"\n  | \"span\"\n  | \"section\"\n  | \"article\"\n  | \"main\"\n  | \"aside\"\n  | \"header\"\n  | \"footer\"\n  | \"nav\"\n\ntype DimensionValue = string | number\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The HTML element to render the Box as.\n   * This allows for semantic HTML while maintaining consistent styling.\n   *\n   * @default \"div\"\n   */\n  as?: BoxComponent\n\n  /**\n   * The width of the Box component.\n   * Can be a number (interpreted as pixels) or a string (e.g., \"100%\", \"50px\", \"10rem\").\n   */\n  width?: DimensionValue\n\n  /**\n   * The height of the Box component.\n   * Can be a number (interpreted as pixels) or a string (e.g., \"100%\", \"50px\", \"10rem\").\n   */\n  height?: DimensionValue\n}\n\nconst Box = React.forwardRef<HTMLDivElement, BoxProps>(\n  ({ as: Component = \"div\", className, width, height, style, ...props }, ref) => {\n    const dimensionStyles = {\n      width: typeof width === \"number\" ? `${width}px` : width,\n      height: typeof height === \"number\" ? `${height}px` : height,\n      ...style\n    }\n\n    return <Component ref={ref} className={cn(className)} style={dimensionStyles} {...props} />\n  }\n)\n\nBox.displayName = \"Box\"\n\nexport { Box }\n"]}