automoby-kit 1.0.12 → 1.0.13

package/dist/cjs/Input.js

@@ -1 +1,84 @@
-"use client";"use strict";var t=require("react/jsx-runtime"),e=require("react"),r=require("./utils.js");const l=e.forwardRef(({state:l="default",label:a,value:n,onChange:i,helperText:s,startIcon:o,endIcon:u,type:d="text",isMobile:x,...p},h)=>{const[m,c]=e.useState(!1),f=e.useId(),g=m||""!==n&&null!=n,b="disabled"===l,j=r("relative flex items-center border rounded-lg transition-all duration-300 w-[360px]",{"h-[54px]":!x,"h-12":x,"border-neutral-light":"default"===l&&!m,"border-primary":"default"===l&&m,"border-error":"error"===l,"bg-white border-neutral-light cursor-not-allowed":b}),w=r("absolute pointer-events-none transition-all duration-300",{"top-[-10px] bg-white px-1 mx-3 font-medium":g,"text-s":!x&&g||x&&!g,"text-xs":x&&g,"text-m":!x&&!g,"right-1":o,"right-3":!o,"top-1/2 -translate-y-1/2 text-m font-medium":!g,"right-11":!g&&o,"right-4":!g&&!o,"text-neutral-main":!m&&"default"===l,"text-neutral-light":b,"text-primary":m&&"default"===l,"text-error":g&&"error"===l}),y=r("peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light",{"pr-12":o,"pl-12":u,"px-4":!o&&!u,"pr-4 pl-12":!o&&u,"pl-4 pr-12":o&&!u,"cursor-not-allowed text-red-500":b,"text-neutral-dark":!m,"text-neutral-darker":m}),v=r("absolute h-5 w-5 transition-colors duration-300",{"text-neutral-main":"error"!==l&&!m,"text-primary":"default"===l&&m,"text-error":"error"===l,"text-neutral-light":b}),N=r("font-light mt-1 px-2 h-4",{"text-s":!x,"text-xs":x,"text-neutral-main":"default"===l,"text-primary":"default"===l&&m,"text-error":"error"===l,"text-neutral-light":b});return t.jsxs("div",{children:[t.jsxs("div",{className:j,children:[u&&t.jsx("span",{className:r(v,"left-4"),children:u}),t.jsx("label",{htmlFor:f,className:w,children:a}),t.jsx("input",{ref:h,id:f,type:d,value:n,onChange:i,onFocus:t=>{b||(c(!0),p.onFocus?.(t))},onBlur:t=>{b||(c(!1),p.onBlur?.(t))},disabled:b,className:y,...p}),o&&t.jsx("span",{className:r(v,"right-4"),children:o})]}),s&&t.jsx("p",{className:N,children:s})]})});l.displayName="Input",exports.Input=l;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+
+const Input = React.forwardRef(({ state = 'default', label, value, onChange, helperText, startIcon, endIcon, type = 'text', isMobile, ...props }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const id = React.useId();
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const hasContent = value !== '' && value !== null && value !== undefined;
+    const isLabelFloated = isFocused || hasContent;
+    const isDisabled = state === 'disabled';
+    const handleFocus = (e) => {
+        if (!isDisabled) {
+            setIsFocused(true);
+            props.onFocus?.(e);
+        }
+    };
+    const handleBlur = (e) => {
+        if (!isDisabled) {
+            setIsFocused(false);
+            props.onBlur?.(e);
+        }
+    };
+    const baseContainerClasses = 'relative flex items-center border rounded-lg transition-all duration-300 w-[360px]';
+    const baseLabelClasses = 'absolute pointer-events-none transition-all duration-300';
+    const baseInputClasses = 'peer w-full h-full bg-transparent outline-none text-m font-medium disabled:text-neutral-light';
+    const baseIconClasses = 'absolute h-5 w-5 transition-colors duration-300';
+    const containerClasses = utils(baseContainerClasses, {
+        'h-[54px]': !actualIsMobile,
+        'h-12': actualIsMobile,
+        'border-neutral-light': state === 'default' && !isFocused,
+        'border-primary': state === 'default' && isFocused,
+        'border-error': state === 'error',
+        'bg-white border-neutral-light cursor-not-allowed': isDisabled,
+    });
+    const labelClasses = utils(baseLabelClasses, {
+        'top-[-10px] bg-white px-1 mx-3 font-medium': isLabelFloated,
+        'text-s': (!actualIsMobile && isLabelFloated) ||
+            (actualIsMobile && !isLabelFloated),
+        'text-xs': actualIsMobile && isLabelFloated,
+        'text-m': !actualIsMobile && !isLabelFloated,
+        'right-1': startIcon,
+        'right-3': !startIcon,
+        'top-1/2 -translate-y-1/2 text-m font-medium': !isLabelFloated,
+        'right-11': !isLabelFloated && startIcon,
+        'right-4': !isLabelFloated && !startIcon,
+        'text-neutral-main': !isFocused && state === 'default',
+        'text-neutral-light': isDisabled,
+        'text-primary': isFocused && state === 'default',
+        'text-error': isLabelFloated && state === 'error',
+    });
+    const inputClasses = utils(baseInputClasses, {
+        'pr-12': startIcon,
+        'pl-12': endIcon,
+        'px-4': !startIcon && !endIcon,
+        'pr-4 pl-12': !startIcon && endIcon,
+        'pl-4 pr-12': startIcon && !endIcon,
+        'cursor-not-allowed text-red-500': isDisabled,
+        'text-neutral-dark': !isFocused,
+        'text-neutral-darker': isFocused,
+    });
+    const iconClasses = utils(baseIconClasses, {
+        'text-neutral-main': state !== 'error' && !isFocused,
+        'text-primary': state === 'default' && isFocused,
+        'text-error': state === 'error',
+        'text-neutral-light': isDisabled,
+    });
+    const helperTextClasses = utils('font-light mt-1 px-2 h-4', {
+        'text-s': !actualIsMobile,
+        'text-xs': actualIsMobile,
+        'text-neutral-main': state === 'default',
+        'text-primary': state === 'default' && isFocused,
+        'text-error': state === 'error',
+        'text-neutral-light': isDisabled,
+    });
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: containerClasses, children: [endIcon && (jsxRuntime.jsx("span", { className: utils(iconClasses, 'left-4'), children: endIcon })), jsxRuntime.jsx("label", { htmlFor: id, className: labelClasses, children: label }), jsxRuntime.jsx("input", { ref: ref, id: id, type: type, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, className: inputClasses, ...props }), startIcon && (jsxRuntime.jsx("span", { className: utils(iconClasses, 'right-4'), children: startIcon }))] }), helperText && jsxRuntime.jsx("p", { className: helperTextClasses, children: helperText })] }));
+});
+Input.displayName = 'Input';
+
+exports.Input = Input;

package/dist/cjs/Menu.js

@@ -1 +1,122 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),a=require("./Typography.js");const o=r.forwardRef(({buttonText:o,items:n,disabled:i=!1,className:l,onOpenChange:s,isOpen:c,"aria-label":d,...u},p)=>{const[b,x]=r.useState(!1),f=r.useRef(null),h=r.useRef(null),v=void 0!==c?c:b,handleToggle=()=>{if(i)return;const e=!v;void 0===c&&x(e),s?.(e)};r.useEffect(()=>{const handleClickOutside=e=>{f.current&&!f.current.contains(e.target)&&(void 0===c&&x(!1),s?.(!1))};if(v)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[v,c,s]);const m=t("inline-flex items-center justify-center","bg-white border border-[var(--color-neutral-light)]","rounded-[6px] px-[16px] py-[13px]","transition-colors duration-200","hover:bg-[var(--color-neutral-lighter)]","focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2",{"opacity-50 cursor-not-allowed":i,"cursor-pointer":!i}),y=t("absolute top-full left-0 right-0 z-10 mt-[4px]","bg-white border border-[var(--color-neutral-light)]","rounded-[6px] py-[13px] px-[16px]","shadow-lg","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":v,"opacity-0 -translate-y-2 pointer-events-none":!v}),g=t("block w-full text-right","transition-colors duration-200","hover:bg-[var(--color-neutral-lighter)] rounded-[4px] px-[8px] py-[4px] -mx-[8px]","focus:outline-none focus:bg-[var(--color-neutral-lighter)]");return e.jsx("div",{ref:p,className:t("relative inline-block",l),...u,children:e.jsxs("div",{ref:f,children:[e.jsx("button",{ref:h,type:"button",className:m,onClick:handleToggle,onKeyDown:e=>{if(!i)switch(e.key){case"Escape":v&&(e.preventDefault(),void 0===c&&x(!1),s?.(!1),h.current?.focus());break;case"ArrowDown":v||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:i,"aria-expanded":v,"aria-haspopup":"true","aria-label":d||`منوی ${o}`,children:e.jsx(a.Typography,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:o})}),e.jsx("div",{className:y,children:e.jsx("div",{className:"flex flex-col gap-[16px]",children:n.map(r=>{const o=e.jsx(a.Typography,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),n={className:t(g,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===c&&x(!1),s?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e.jsx("a",{...n,href:r.href,role:"menuitem",tabIndex:v?0:-1,children:o},r.id):e.jsx("button",{...n,type:"button",role:"menuitem",tabIndex:v?0:-1,disabled:r.disabled,children:o},r.id)})})})]})})});o.displayName="Menu",exports.Menu=o;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var Typography = require('./Typography.js');
+
+const Menu = React.forwardRef(({ buttonText, items, disabled = false, className, onOpenChange, isOpen: controlledIsOpen, 'aria-label': ariaLabel, ...props }, ref) => {
+    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
+    const menuRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    // Use controlled or uncontrolled state
+    const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const newIsOpen = !isOpen;
+        if (controlledIsOpen === undefined) {
+            setInternalIsOpen(newIsOpen);
+        }
+        onOpenChange?.(newIsOpen);
+    };
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        // Close menu after item click
+        if (controlledIsOpen === undefined) {
+            setInternalIsOpen(false);
+        }
+        onOpenChange?.(false);
+        // Execute item's onClick if provided
+        item.onClick?.();
+    };
+    // Close menu when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target)) {
+                if (controlledIsOpen === undefined) {
+                    setInternalIsOpen(false);
+                }
+                onOpenChange?.(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }
+        return undefined;
+    }, [isOpen, controlledIsOpen, onOpenChange]);
+    // Handle keyboard navigation
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'Escape':
+                if (isOpen) {
+                    event.preventDefault();
+                    if (controlledIsOpen === undefined) {
+                        setInternalIsOpen(false);
+                    }
+                    onOpenChange?.(false);
+                    buttonRef.current?.focus();
+                }
+                break;
+            case 'ArrowDown':
+                if (!isOpen) {
+                    event.preventDefault();
+                    handleToggle();
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                handleToggle();
+                break;
+        }
+    };
+    const buttonClasses = utils(
+    // Base button styles matching Figma design
+    'inline-flex items-center justify-center', 'bg-white border border-[var(--color-neutral-light)]', 'rounded-[6px] px-[16px] py-[13px]', 'transition-colors duration-200', 
+    // Interactive states
+    'hover:bg-[var(--color-neutral-lighter)]', 'focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2', 
+    // Disabled state
+    {
+        'opacity-50 cursor-not-allowed': disabled,
+        'cursor-pointer': !disabled,
+    });
+    const dropdownClasses = utils(
+    // Base dropdown styles
+    'absolute top-full left-0 right-0 z-10 mt-[4px]', 'bg-white border border-[var(--color-neutral-light)]', 'rounded-[6px] py-[13px] px-[16px]', 'shadow-lg', 
+    // Animation
+    'transition-all duration-200', {
+        'opacity-100 translate-y-0 pointer-events-auto': isOpen,
+        'opacity-0 -translate-y-2 pointer-events-none': !isOpen,
+    });
+    const itemClasses = utils('block w-full text-right', 'transition-colors duration-200', 'hover:bg-[var(--color-neutral-lighter)] rounded-[4px] px-[8px] py-[4px] -mx-[8px]', 'focus:outline-none focus:bg-[var(--color-neutral-lighter)]');
+    return (jsxRuntime.jsx("div", { ref: ref, className: utils('relative inline-block', className), ...props, children: jsxRuntime.jsxs("div", { ref: menuRef, children: [jsxRuntime.jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsxRuntime.jsx(Typography.Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsxRuntime.jsx("div", { className: dropdownClasses, children: jsxRuntime.jsx("div", { className: "flex flex-col gap-[16px]", children: items.map((item) => {
+                            const content = (jsxRuntime.jsx(Typography.Typography, { variant: "body-s-heavy", color: item.disabled ? 'neutral-main' : 'neutral-darker', className: "text-right", children: item.label }));
+                            const commonProps = {
+                                className: utils(itemClasses, {
+                                    'opacity-50 cursor-not-allowed': item.disabled,
+                                    'cursor-pointer': !item.disabled,
+                                }),
+                                onClick: item.disabled
+                                    ? undefined
+                                    : () => handleItemClick(item),
+                                'aria-label': `منوی ${item.label}`,
+                            };
+                            // Render as link if href is provided
+                            if (item.href && !item.disabled) {
+                                return (jsxRuntime.jsx("a", { ...commonProps, href: item.href, role: "menuitem", tabIndex: isOpen ? 0 : -1, children: content }, item.id));
+                            }
+                            // Render as button
+                            return (jsxRuntime.jsx("button", { ...commonProps, type: "button", role: "menuitem", tabIndex: isOpen ? 0 : -1, disabled: item.disabled, children: content }, item.id));
+                        }) }) })] }) }));
+});
+Menu.displayName = 'Menu';
+
+exports.Menu = Menu;

package/dist/cjs/Pagination.js

@@ -1 +1,188 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),i=require("react"),a=require("./utils.js"),n=require("./chunks/createLucideIcon-BqJVOzoK.js"),t=require("./chunks/chevron-left-Do__K6cA.js");const r=n.createLucideIcon("chevron-right",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]),s=n.createLucideIcon("chevrons-left",[["path",{d:"m11 17-5-5 5-5",key:"13zhaf"}],["path",{d:"m18 17-5-5 5-5",key:"h8a8et"}]]),c=n.createLucideIcon("chevrons-right",[["path",{d:"m6 17 5-5-5-5",key:"xnjwq"}],["path",{d:"m13 17 5-5-5-5",key:"17xmmf"}]]),l=n.createLucideIcon("ellipsis",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]]);function PaginationRoot({className:i,...n}){return e.jsx("nav",{role:"navigation","aria-label":"pagination","data-slot":"pagination",className:a("mx-auto flex w-full justify-center",i),...n})}function PaginationContent({className:i,device:n,...t}){return e.jsx("ul",{"data-slot":"pagination-content",className:a("flex flex-row items-center","mobile"===n?"gap-[6px]":"gap-2",i),...t})}function PaginationItem({...i}){return e.jsx("li",{"data-slot":"pagination-item",...i})}function PaginationLink({className:i,device:n,variant:t,isActive:r,...s}){return e.jsx("a",{"aria-current":r?"page":void 0,"data-slot":"pagination-link","data-active":r,className:a(buttonVariants({variant:"nextPrev"===t?t:r?"active":"outline",device:n}),i),tabIndex:s["aria-disabled"]?-1:0,...s})}function PaginationPrevious({className:i,device:a,variant:n,...t}){const s="mobile"===a,l={mobile:e.jsx(r,{size:18}),desktop:e.jsxs(e.Fragment,{children:[e.jsx(c,{size:20})," ",e.jsx("span",{children:"قبلی"})]})};return e.jsx(PaginationLink,{"aria-label":"Go to previous page",className:s?"ml-2.5":"flex justify-center items-center gap-2 w-[89px] h-[48px] ml-4",device:a,variant:"nextPrev",...t,children:"mobile"===a?l.mobile:l.desktop})}function PaginationNext({className:i,device:a,variant:n,...r}){const c="mobile"===a,l={mobile:e.jsx(t.ChevronLeft,{size:18}),desktop:e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"بعدی"}),e.jsx(s,{size:20})]})};return e.jsx(PaginationLink,{"aria-label":"Go to next page",className:c?"mr-2.5":"flex justify-center items-center gap-2 w-[89px] h-[48px] mr-4",device:a,variant:"nextPrev",...r,children:"mobile"===a?l.mobile:l.desktop})}function PaginationEllipsis({className:i,...n}){return e.jsx("span",{"aria-hidden":!0,"data-slot":"pagination-ellipsis",className:a("flex size-9 items-center justify-center",i),...n,children:e.jsx(l,{className:"size-4"})})}function buttonVariants({variant:e,device:i}){const n="mobile"===i;return[a({"flex items-center justify-center rounded-[6px]":!0,"w-[40px] h-[40px] text-s font-heavy":n,"w-[48px] h-[48px] text-l font-heavy":!n}),{outline:"border border-neutral-light bg-white text-neutral-darker",active:"bg-primary text-white",nextPrev:"border border-neutral-light bg-white text-neutral-darker"}[e]].join(" ")}exports.Pagination=({pageCount:a,page:n,defaultPage:t=1,onPageChange:r,className:s,isMobile:c,...l})=>{const o=void 0!==n,[d,x]=i.useState(t),u=o?n:d,h=c?"mobile":"desktop";i.useEffect(()=>{o||x(t)},[t,o]);const changePage=e=>{o||x(e),r?.(e)};return e.jsx(PaginationRoot,{className:s,...l,children:e.jsxs(PaginationContent,{device:"mobile",children:[e.jsx(PaginationItem,{children:e.jsx(PaginationPrevious,{href:"#",onClick:e=>{e.preventDefault(),u>1&&changePage(u-1)},variant:"nextPrev",device:h,"aria-disabled":1===u,tabIndex:1===u?-1:0})}),function(){const i=[];if(a<=5)for(let n=1;n<=a;n++)i.push(e.jsx(PaginationItem,{children:e.jsx(PaginationLink,{href:"#",isActive:u===n,variant:"main",device:h,onClick:e=>{e.preventDefault(),u!==n&&changePage(n)},"aria-disabled":u===n,tabIndex:u===n?-1:0,children:n})},n));else{i.push(e.jsx(PaginationItem,{children:e.jsx(PaginationLink,{href:"#",isActive:1===u,device:h,variant:"main",onClick:e=>{e.preventDefault(),1!==u&&changePage(1)},"aria-disabled":1===u,tabIndex:1===u?-1:0,children:"1"})},1)),u>3&&i.push(e.jsx(PaginationItem,{children:e.jsx(PaginationEllipsis,{})},"start-ellipsis"));const n=Math.max(2,u-1),t=Math.min(a-1,u+1);for(let a=n;a<=t;a++)i.push(e.jsx(PaginationItem,{children:e.jsx(PaginationLink,{href:"#",isActive:u===a,device:h,variant:"main",onClick:e=>{e.preventDefault(),u!==a&&changePage(a)},"aria-disabled":u===a,tabIndex:u===a?-1:0,children:a})},a));u<a-2&&i.push(e.jsx(PaginationItem,{children:e.jsx(PaginationEllipsis,{})},"end-ellipsis")),i.push(e.jsx(PaginationItem,{children:e.jsx(PaginationLink,{href:"#",isActive:u===a,device:h,variant:"main",onClick:e=>{e.preventDefault(),u!==a&&changePage(a)},"aria-disabled":u===a,tabIndex:u===a?-1:0,children:a})},a))}return i}(),e.jsx(PaginationItem,{children:e.jsx(PaginationNext,{href:"#",onClick:e=>{e.preventDefault(),u<a&&changePage(u+1)},variant:"nextPrev",device:h,"aria-disabled":u===a,tabIndex:u===a?-1:0})})]})})};
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+var createLucideIcon = require('./createLucideIcon-BTjFFtDc.js');
+var chevronLeft = require('./chevron-left-COj1qGVo.js');
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$3 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon.createLucideIcon("chevron-right", __iconNode$3);
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$2 = [
+  ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
+  ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
+];
+const ChevronsLeft = createLucideIcon.createLucideIcon("chevrons-left", __iconNode$2);
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [
+  ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
+  ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
+];
+const ChevronsRight = createLucideIcon.createLucideIcon("chevrons-right", __iconNode$1);
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+const Ellipsis = createLucideIcon.createLucideIcon("ellipsis", __iconNode);
+
+function PaginationRoot({ className, ...props }) {
+    return (jsxRuntime.jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: utils('mx-auto flex w-full justify-center', className), ...props }));
+}
+function PaginationContent({ className, device, ...props }) {
+    return (jsxRuntime.jsx("ul", { "data-slot": "pagination-content", className: utils('flex flex-row items-center', device === 'mobile' ? 'gap-[6px]' : 'gap-2', className), ...props }));
+}
+function PaginationItem({ ...props }) {
+    return jsxRuntime.jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, device, variant, isActive, ...props }) {
+    return (jsxRuntime.jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive, className: utils(buttonVariants({
+            variant: variant === 'nextPrev' ? variant : isActive ? 'active' : 'outline',
+            device,
+        }), className), tabIndex: props['aria-disabled'] ? -1 : 0, ...props }));
+}
+function PaginationPrevious({ className, device, variant, ...props }) {
+    const isMobile = device === 'mobile';
+    const content = {
+        mobile: jsxRuntime.jsx(ChevronRight, { size: 18 }),
+        desktop: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChevronsRight, { size: 20 }), " ", jsxRuntime.jsx("span", { children: "\u0642\u0628\u0644\u06CC" })] })),
+    };
+    return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to previous page", className: !isMobile
+            ? 'flex justify-center items-center gap-2 w-[89px] h-[48px] ml-4'
+            : 'ml-2.5', device: device, variant: "nextPrev", ...props, children: device === 'mobile' ? content.mobile : content.desktop }));
+}
+function PaginationNext({ className, device, variant, ...props }) {
+    const isMobile = device === 'mobile';
+    const content = {
+        mobile: jsxRuntime.jsx(chevronLeft.ChevronLeft, { size: 18 }),
+        desktop: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: "\u0628\u0639\u062F\u06CC" }), jsxRuntime.jsx(ChevronsLeft, { size: 20 })] })),
+    };
+    return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to next page", className: !isMobile
+            ? 'flex justify-center items-center gap-2 w-[89px] h-[48px] mr-4'
+            : 'mr-2.5', device: device, variant: "nextPrev", ...props, children: device === 'mobile' ? content.mobile : content.desktop }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: utils('flex size-9 items-center justify-center', className), ...props, children: jsxRuntime.jsx(Ellipsis, { className: "size-4" }) }));
+}
+function buttonVariants({ variant, device, }) {
+    const isMobile = device === 'mobile';
+    const base = utils({
+        'flex items-center justify-center rounded-[6px]': true,
+        'w-[40px] h-[40px] text-s font-heavy': isMobile,
+        'w-[48px] h-[48px] text-l font-heavy': !isMobile,
+    });
+    const variants = {
+        outline: 'border border-neutral-light bg-white text-neutral-darker',
+        active: 'bg-primary text-white',
+        nextPrev: 'border border-neutral-light bg-white text-neutral-darker',
+    };
+    return [base, variants[variant]].join(' ');
+}
+const Pagination = ({ pageCount, page: controlledPage, defaultPage = 1, onPageChange, className, isMobile, ...navProps }) => {
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const isControlled = controlledPage !== undefined;
+    const [internalPage, setInternalPage] = React.useState(defaultPage);
+    const page = isControlled ? controlledPage : internalPage;
+    const device = actualIsMobile ? 'mobile' : 'desktop';
+    React.useEffect(() => {
+        if (!isControlled)
+            setInternalPage(defaultPage);
+    }, [defaultPage, isControlled]);
+    const changePage = (newPage) => {
+        if (!isControlled)
+            setInternalPage(newPage);
+        onPageChange?.(newPage);
+    };
+    function renderPages() {
+        const items = [];
+        if (pageCount <= 5) {
+            for (let i = 1; i <= pageCount; i++) {
+                items.push(jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationLink, { href: "#", isActive: page === i, variant: "main", device: device, onClick: (e) => {
+                            e.preventDefault();
+                            if (page !== i)
+                                changePage(i);
+                        }, "aria-disabled": page === i, tabIndex: page === i ? -1 : 0, children: i }) }, i));
+            }
+        }
+        else {
+            // First page
+            items.push(jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationLink, { href: "#", isActive: page === 1, device: device, variant: "main", onClick: (e) => {
+                        e.preventDefault();
+                        if (page !== 1)
+                            changePage(1);
+                    }, "aria-disabled": page === 1, tabIndex: page === 1 ? -1 : 0, children: "1" }) }, 1));
+            // Ellipsis start
+            if (page > 3) {
+                items.push(jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationEllipsis, {}) }, "start-ellipsis"));
+            }
+            // Middle pages
+            const start = Math.max(2, page - 1);
+            const end = Math.min(pageCount - 1, page + 1);
+            for (let i = start; i <= end; i++) {
+                items.push(jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationLink, { href: "#", isActive: page === i, device: device, variant: "main", onClick: (e) => {
+                            e.preventDefault();
+                            if (page !== i)
+                                changePage(i);
+                        }, "aria-disabled": page === i, tabIndex: page === i ? -1 : 0, children: i }) }, i));
+            }
+            // Ellipsis end
+            if (page < pageCount - 2) {
+                items.push(jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationEllipsis, {}) }, "end-ellipsis"));
+            }
+            // Last page
+            items.push(jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationLink, { href: "#", isActive: page === pageCount, device: device, variant: "main", onClick: (e) => {
+                        e.preventDefault();
+                        if (page !== pageCount)
+                            changePage(pageCount);
+                    }, "aria-disabled": page === pageCount, tabIndex: page === pageCount ? -1 : 0, children: pageCount }) }, pageCount));
+        }
+        return items;
+    }
+    return (jsxRuntime.jsx(PaginationRoot, { className: className, ...navProps, children: jsxRuntime.jsxs(PaginationContent, { device: "mobile", children: [jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationPrevious, { href: "#", onClick: (e) => {
+                            e.preventDefault();
+                            if (page > 1)
+                                changePage(page - 1);
+                        }, variant: "nextPrev", device: device, "aria-disabled": page === 1, tabIndex: page === 1 ? -1 : 0 }) }), renderPages(), jsxRuntime.jsx(PaginationItem, { children: jsxRuntime.jsx(PaginationNext, { href: "#", onClick: (e) => {
+                            e.preventDefault();
+                            if (page < pageCount)
+                                changePage(page + 1);
+                        }, variant: "nextPrev", device: device, "aria-disabled": page === pageCount, tabIndex: page === pageCount ? -1 : 0 }) })] }) }));
+};
+
+exports.Pagination = Pagination;

package/dist/cjs/RadioGroup.js

@@ -1 +1,73 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("./utils.js");const RadioButton=({selected:r,disabled:s,isMobile:a})=>{const l=a?"size-5":"size-6";return r?e.jsxs("div",{className:i("relative flex items-center justify-center",l),children:[e.jsx("div",{className:i("absolute inset-0 rounded-full border-2",s?"bg-neutral-light border-neutral-light":"bg-primary border-primary")}),e.jsx("div",{className:i("absolute rounded-full bg-white",a?"inset-[5px]":"inset-1.5")})]}):e.jsx("div",{className:i("relative flex items-center justify-center",l),children:e.jsx("div",{className:i("absolute inset-0 rounded-full border",a?"border":"border-[1.5px]",s?"border-neutral-light":"border-midnight")})})},RadioOptionComponent=({option:s,selected:a,disabled:l,onClick:t,name:n,isMobile:d})=>{const[o,c]=r.useState(!1),getTextColor=()=>l?"text-midnight":a?"text-primary":"text-neutral-dark";return e.jsx("div",{className:i("relative rounded-lg border-[1.5px] cursor-pointer transition-all duration-200",l?"bg-neutral-lighter":a?"bg-primary-lightest":o?"bg-primary-lightest/20":"bg-white",a?"border-primary":"border-transparent",l?"":"shadow-[0px_2px_4px_0px_rgba(0,0,0,0.08)]",l&&"cursor-not-allowed"),onClick:l?void 0:t,onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||l||(e.preventDefault(),t())},tabIndex:l?-1:0,role:"radio","aria-checked":a,"aria-disabled":l,children:e.jsx("div",{className:"flex flex-row items-center justify-end relative w-full",children:e.jsx("div",{className:i("box-border flex flex-row items-center justify-end relative w-full",d?"gap-2 px-4 py-3":"gap-4 px-6 py-4"),children:e.jsxs("div",{className:i("flex flex-row items-center justify-end p-0 relative shrink-0",d?"gap-2":"gap-3"),children:[e.jsx("input",{type:"radio",name:n,value:s.id,checked:a,disabled:l,onChange:t,className:"sr-only","aria-label":s.label}),e.jsx("div",{className:"flex flex-col gap-0.5 items-end justify-start p-0 relative shrink-0",children:e.jsx("div",{className:i("font-sans font-bold text-nowrap text-right transition-colors duration-200",d?"text-[14px] leading-[24px]":"text-[16px] leading-normal",getTextColor()),children:e.jsx("p",{className:"whitespace-pre",dir:"auto",children:s.label})})}),s.icon&&e.jsx("div",{className:i("flex items-center justify-center shrink-0 transition-colors duration-200",d?"size-6":"size-7",getTextColor()),children:s.icon}),e.jsx("div",{className:"flex flex-col items-start justify-start p-0 relative shrink-0",children:e.jsx(RadioButton,{selected:a,disabled:l,isMobile:d})})]})})})})},s=r.forwardRef(({options:r,value:s,onChange:a,name:l,disabled:t=!1,className:n,isMobile:d,direction:o="vertical",...c},x)=>e.jsx("div",{ref:x,className:"horizontal"===o?i("flex flex-row gap-2",d?"flex-wrap":"flex-nowrap",n):i("flex flex-col gap-2",n),role:"radiogroup",...c,children:r.map(r=>e.jsx(RadioOptionComponent,{option:r,selected:s===r.id,disabled:t||r.disabled,onClick:()=>{return e=r.id,void(!t&&a&&a(e));var e},name:l,isMobile:d},r.id))}));s.displayName="RadioGroup",exports.RadioGroup=s;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+
+const RadioButton = ({ selected, disabled, isMobile, }) => {
+    const size = isMobile ? 'size-5' : 'size-6';
+    if (selected) {
+        return (jsxRuntime.jsxs("div", { className: utils('relative flex items-center justify-center', size), children: [jsxRuntime.jsx("div", { className: utils('absolute inset-0 rounded-full border-2', disabled
+                        ? 'bg-neutral-light border-neutral-light'
+                        : 'bg-primary border-primary') }), jsxRuntime.jsx("div", { className: utils('absolute rounded-full bg-white', isMobile ? 'inset-[5px]' : 'inset-1.5') })] }));
+    }
+    return (jsxRuntime.jsx("div", { className: utils('relative flex items-center justify-center', size), children: jsxRuntime.jsx("div", { className: utils('absolute inset-0 rounded-full border', isMobile ? 'border' : 'border-[1.5px]', disabled ? 'border-neutral-light' : 'border-midnight') }) }));
+};
+const RadioOptionComponent = ({ option, selected, disabled, onClick, name, isMobile = false, }) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const handleKeyDown = (e) => {
+        if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    const getBackgroundColor = () => {
+        if (disabled)
+            return 'bg-neutral-lighter';
+        if (selected)
+            return 'bg-primary-lightest';
+        if (isHovered)
+            return 'bg-primary-lightest/20';
+        return 'bg-white';
+    };
+    const getBorderColor = () => {
+        if (selected)
+            return 'border-primary';
+        return 'border-transparent';
+    };
+    const getTextColor = () => {
+        if (disabled)
+            return 'text-midnight';
+        if (selected)
+            return 'text-primary';
+        return 'text-neutral-dark';
+    };
+    const getShadow = () => {
+        if (disabled)
+            return '';
+        return 'shadow-[0px_2px_4px_0px_rgba(0,0,0,0.08)]';
+    };
+    return (jsxRuntime.jsx("div", { className: utils('relative rounded-lg border-[1.5px] cursor-pointer transition-all duration-200', getBackgroundColor(), getBorderColor(), getShadow(), disabled && 'cursor-not-allowed'), onClick: disabled ? undefined : onClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": disabled, children: jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-end relative w-full", children: jsxRuntime.jsx("div", { className: utils('box-border flex flex-row items-center justify-end relative w-full', isMobile ? 'gap-2 px-4 py-3' : 'gap-4 px-6 py-4'), children: jsxRuntime.jsxs("div", { className: utils('flex flex-row items-center justify-end p-0 relative shrink-0', isMobile ? 'gap-2' : 'gap-3'), children: [jsxRuntime.jsx("input", { type: "radio", name: name, value: option.id, checked: selected, disabled: disabled, onChange: onClick, className: "sr-only", "aria-label": option.label }), jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5 items-end justify-start p-0 relative shrink-0", children: jsxRuntime.jsx("div", { className: utils('font-sans font-bold text-nowrap text-right transition-colors duration-200', isMobile
+                                    ? 'text-[14px] leading-[24px]'
+                                    : 'text-[16px] leading-normal', getTextColor()), children: jsxRuntime.jsx("p", { className: "whitespace-pre", dir: "auto", children: option.label }) }) }), option.icon && (jsxRuntime.jsx("div", { className: utils('flex items-center justify-center shrink-0 transition-colors duration-200', isMobile ? 'size-6' : 'size-7', getTextColor()), children: option.icon })), jsxRuntime.jsx("div", { className: "flex flex-col items-start justify-start p-0 relative shrink-0", children: jsxRuntime.jsx(RadioButton, { selected: selected, disabled: disabled, isMobile: isMobile }) })] }) }) }) }));
+};
+const RadioGroup = React.forwardRef(({ options, value, onChange, name, disabled = false, className, isMobile, direction = 'vertical', ...props }, ref) => {
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const handleOptionClick = (optionId) => {
+        if (!disabled && onChange) {
+            onChange(optionId);
+        }
+    };
+    const getContainerClasses = () => {
+        if (direction === 'horizontal') {
+            return utils('flex flex-row gap-2', actualIsMobile ? 'flex-wrap' : 'flex-nowrap', className);
+        }
+        return utils('flex flex-col gap-2', className);
+    };
+    return (jsxRuntime.jsx("div", { ref: ref, className: getContainerClasses(), role: "radiogroup", ...props, children: options.map((option) => (jsxRuntime.jsx(RadioOptionComponent, { option: option, selected: value === option.id, disabled: disabled || option.disabled, onClick: () => handleOptionClick(option.id), name: name, isMobile: actualIsMobile }, option.id))) }));
+});
+RadioGroup.displayName = 'RadioGroup';
+
+exports.RadioGroup = RadioGroup;

package/dist/cjs/Tabs.js

@@ -1 +1,54 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("./utils.js");const renderBadge=(t,r,a,s)=>void 0===t?null:e.jsx("div",{className:i("flex items-center justify-center rounded-[5px] font-sans font-bold text-white","transition-colors duration-200",s?"size-6 text-[14px] pt-0.5":"size-[25px] text-[14px] pt-[3px]",a?"bg-midnight":r?"bg-primary":"bg-neutral-main"),children:e.jsx("p",{className:"leading-[24px] whitespace-pre",dir:"auto",children:t})}),renderTabContent=(t,r,a)=>{const s=void 0!==t.count;return e.jsxs("div",{className:i("flex flex-row items-center justify-start transition-colors duration-200","gap-1.5"),children:[s&&renderBadge(t.count,r,t.disabled,a),e.jsx("div",{className:i("font-sans text-nowrap text-right transition-colors duration-200",a?"text-[14px]":r?"text-[16px]":"text-[18px]",t.disabled?"font-normal text-midnight":r?"font-bold text-primary":"font-normal text-neutral-main",a?"leading-[24px]":r?"leading-normal":"leading-[1.9]"),children:e.jsx("p",{className:"whitespace-pre",dir:"auto",children:t.label})})]})},r=t.forwardRef(({items:t,activeTab:r,onTabChange:a,className:s,isMobile:l,...n},d)=>e.jsxs("div",{ref:d,className:i("relative w-full",s),...n,children:[e.jsx("div",{className:"box-border flex flex-row items-center justify-end p-0 relative w-full",children:t.map(t=>((t,r,a,s)=>{const l=t.id===r;return e.jsxs("div",{className:i("box-border flex flex-col items-center justify-between relative shrink-0","cursor-pointer transition-all duration-200",a?"h-12 px-3":"h-14 px-4",l?a?"pt-[11px] pb-0":"pt-3.5 pb-0":"py-0 justify-center",t.disabled&&"cursor-not-allowed opacity-50",!t.disabled&&"hover:opacity-80"),onClick:()=>((e,t,i)=>{t||i(e)})(t.id,t.disabled,s),onKeyDown:e=>((e,t,i,r)=>{"Enter"!==e.key&&" "!==e.key||i||(e.preventDefault(),r(t))})(e,t.id,t.disabled,s),tabIndex:t.disabled?-1:0,role:"tab","aria-selected":l,"aria-disabled":t.disabled,children:[renderTabContent(t,l,a),l&&e.jsx("div",{className:"bg-primary h-1 rounded-tl-[8px] rounded-tr-[8px] shrink-0 w-full"})]},t.id)})(t,r,l,a))}),e.jsx("div",{className:"absolute border-midnight-light border-[0px_0px_1px] border-solid bottom-[-0.5px] left-0 right-0 top-0 pointer-events-none"})]}));r.displayName="Tabs",exports.Tabs=r;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+
+// Helper functions moved outside component
+const handleTabClick = (tabId, disabled, onTabChange) => {
+    if (!disabled) {
+        onTabChange(tabId);
+    }
+};
+const handleKeyDown = (e, tabId, disabled, onTabChange) => {
+    if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+        e.preventDefault();
+        onTabChange(tabId);
+    }
+};
+const renderBadge = (count, isActive, disabled, isMobile) => {
+    if (count === undefined)
+        return null;
+    return (jsxRuntime.jsx("div", { className: utils('flex items-center justify-center rounded-[5px] font-sans font-bold text-white', 'transition-colors duration-200', isMobile
+            ? 'size-6 text-[14px] pt-0.5'
+            : 'size-[25px] text-[14px] pt-[3px]', disabled ? 'bg-midnight' : isActive ? 'bg-primary' : 'bg-neutral-main'), children: jsxRuntime.jsx("p", { className: "leading-[24px] whitespace-pre", dir: "auto", children: count }) }));
+};
+const renderTabContent = (item, isActive, isMobile) => {
+    const hasCount = item.count !== undefined;
+    return (jsxRuntime.jsxs("div", { className: utils('flex flex-row items-center justify-start transition-colors duration-200', isMobile ? 'gap-1.5' : 'gap-1.5'), children: [hasCount && renderBadge(item.count, isActive, item.disabled, isMobile), jsxRuntime.jsx("div", { className: utils('font-sans text-nowrap text-right transition-colors duration-200', isMobile ? 'text-[14px]' : isActive ? 'text-[16px]' : 'text-[18px]', item.disabled
+                    ? 'font-normal text-midnight'
+                    : isActive
+                        ? 'font-bold text-primary'
+                        : 'font-normal text-neutral-main', isMobile
+                    ? 'leading-[24px]'
+                    : isActive
+                        ? 'leading-normal'
+                        : 'leading-[1.9]'), children: jsxRuntime.jsx("p", { className: "whitespace-pre", dir: "auto", children: item.label }) })] }));
+};
+const renderTab = (item, activeTab, isMobile, onTabChange) => {
+    const isActive = item.id === activeTab;
+    return (jsxRuntime.jsxs("div", { className: utils('box-border flex flex-col items-center justify-between relative shrink-0', 'cursor-pointer transition-all duration-200', isMobile ? 'h-12 px-3' : 'h-14 px-4', isActive
+            ? isMobile
+                ? 'pt-[11px] pb-0'
+                : 'pt-3.5 pb-0'
+            : 'py-0 justify-center', item.disabled && 'cursor-not-allowed opacity-50', !item.disabled && 'hover:opacity-80'), onClick: () => handleTabClick(item.id, item.disabled, onTabChange), onKeyDown: (e) => handleKeyDown(e, item.id, item.disabled, onTabChange), tabIndex: item.disabled ? -1 : 0, role: "tab", "aria-selected": isActive, "aria-disabled": item.disabled, children: [renderTabContent(item, isActive, isMobile), isActive && (jsxRuntime.jsx("div", { className: "bg-primary h-1 rounded-tl-[8px] rounded-tr-[8px] shrink-0 w-full" }))] }, item.id));
+};
+const Tabs = React.forwardRef(({ items, activeTab, onTabChange, className, isMobile, ...props }, ref) => {
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    return (jsxRuntime.jsxs("div", { ref: ref, className: utils('relative w-full', className), ...props, children: [jsxRuntime.jsx("div", { className: "box-border flex flex-row items-center justify-end p-0 relative w-full", children: items.map((item) => renderTab(item, activeTab, actualIsMobile, onTabChange)) }), jsxRuntime.jsx("div", { className: "absolute border-midnight-light border-[0px_0px_1px] border-solid bottom-[-0.5px] left-0 right-0 top-0 pointer-events-none" })] }));
+});
+Tabs.displayName = 'Tabs';
+
+exports.Tabs = Tabs;

package/dist/cjs/Typography.js

@@ -1 +1,63 @@
-"use strict";var t=require("react"),e=require("./utils.js");const o={h1:"text-[36px] font-[var(--font-weight-fat)]",h2:"text-[32px] font-[var(--font-weight-fat)]",h3:"text-[28px] font-[var(--font-weight-fat)]",h4:"text-[24px] font-[var(--font-weight-heavy)]",h5:"text-[22px] font-[var(--font-weight-heavy)]",h6:"text-[20px] font-[var(--font-weight-heavy)]","body-xl-heavy":"text-[20px] font-[var(--font-weight-heavy)]","body-l-heavy":"text-[18px] font-[var(--font-weight-heavy)]","body-l-bold":"text-[18px] font-[var(--font-weight-bold)]","body-l-medium":"text-[18px] font-[var(--font-weight-medium)]","body-m-heavy":"text-[16px] font-[var(--font-weight-heavy)]","body-m-bold":"text-[16px] font-[var(--font-weight-bold)]","body-m-medium":"text-[16px] font-[var(--font-weight-medium)]","body-s-heavy":"text-[14px] font-[var(--font-weight-heavy)]","body-s-bold":"text-[14px] font-[var(--font-weight-bold)]","body-s-medium":"text-[14px] font-[var(--font-weight-medium)]","body-ms-bold":"text-[13px] font-[var(--font-weight-bold)]","body-ms-medium":"text-[13px] font-[var(--font-weight-medium)]","body-xs-bold":"text-[12px] font-[var(--font-weight-bold)]","body-xs-medium":"text-[12px] font-[var(--font-weight-medium)]","body-t-bold":"text-[10px] font-[var(--font-weight-bold)]","body-t-medium":"text-[10px] font-[var(--font-weight-medium)]","body-ss-medium":"text-[9px] font-[var(--font-weight-medium)]"},a={primary:"text-[var(--color-primary)]",secondary:"text-[var(--color-secondary)]","neutral-darker":"text-[var(--color-neutral-darker)]","neutral-dark":"text-[var(--color-neutral-dark)]","neutral-main":"text-[var(--color-neutral-main)]",white:"text-[var(--color-white)]",inherit:"text-inherit"},r=t.forwardRef(({variant:r="body-m-medium",color:n="inherit",as:i,className:x,children:d,...f},h)=>{const m=i||(t=>t.startsWith("h")?t.split("-")[0]:"p")(r);return t.createElement(m,{ref:h,className:e(o[r],a[n],"leading-[var(--leading-default)]",x),...f},d)});r.displayName="Typography",exports.Typography=r,exports.getTypographyClasses=t=>o[t];
+'use strict';
+
+var React = require('react');
+var utils = require('./utils.js');
+
+const variantClasses = {
+    // Headings with Fat weight (900)
+    h1: 'text-[36px] font-[var(--font-weight-fat)]',
+    h2: 'text-[32px] font-[var(--font-weight-fat)]',
+    h3: 'text-[28px] font-[var(--font-weight-fat)]',
+    h4: 'text-[24px] font-[var(--font-weight-heavy)]',
+    h5: 'text-[22px] font-[var(--font-weight-heavy)]',
+    h6: 'text-[20px] font-[var(--font-weight-heavy)]',
+    // Body Copy with specific weight variants
+    'body-xl-heavy': 'text-[20px] font-[var(--font-weight-heavy)]',
+    'body-l-heavy': 'text-[18px] font-[var(--font-weight-heavy)]',
+    'body-l-bold': 'text-[18px] font-[var(--font-weight-bold)]',
+    'body-l-medium': 'text-[18px] font-[var(--font-weight-medium)]',
+    'body-m-heavy': 'text-[16px] font-[var(--font-weight-heavy)]',
+    'body-m-bold': 'text-[16px] font-[var(--font-weight-bold)]',
+    'body-m-medium': 'text-[16px] font-[var(--font-weight-medium)]',
+    'body-s-heavy': 'text-[14px] font-[var(--font-weight-heavy)]',
+    'body-s-bold': 'text-[14px] font-[var(--font-weight-bold)]',
+    'body-s-medium': 'text-[14px] font-[var(--font-weight-medium)]',
+    'body-ms-bold': 'text-[13px] font-[var(--font-weight-bold)]',
+    'body-ms-medium': 'text-[13px] font-[var(--font-weight-medium)]',
+    'body-xs-bold': 'text-[12px] font-[var(--font-weight-bold)]',
+    'body-xs-medium': 'text-[12px] font-[var(--font-weight-medium)]',
+    'body-t-bold': 'text-[10px] font-[var(--font-weight-bold)]',
+    'body-t-medium': 'text-[10px] font-[var(--font-weight-medium)]',
+    'body-ss-medium': 'text-[9px] font-[var(--font-weight-medium)]',
+};
+// Export for reuse in other components
+const getTypographyClasses = (variant) => {
+    return variantClasses[variant];
+};
+const colorClasses = {
+    primary: 'text-[var(--color-primary)]',
+    secondary: 'text-[var(--color-secondary)]',
+    'neutral-darker': 'text-[var(--color-neutral-darker)]',
+    'neutral-dark': 'text-[var(--color-neutral-dark)]',
+    'neutral-main': 'text-[var(--color-neutral-main)]',
+    white: 'text-[var(--color-white)]',
+    inherit: 'text-inherit',
+};
+const getDefaultElement = (variant) => {
+    if (variant.startsWith('h'))
+        return variant.split('-')[0]; // h1, h2, etc.
+    return 'p';
+};
+const Typography = React.forwardRef(({ variant = 'body-m-medium', color = 'inherit', as, className, children, ...props }, ref) => {
+    const Element = as || getDefaultElement(variant);
+    return React.createElement(Element, {
+        ref,
+        className: utils(variantClasses[variant], colorClasses[color], 'leading-[var(--leading-default)]', // 180% line height
+        className),
+        ...props,
+    }, children);
+});
+Typography.displayName = 'Typography';
+
+exports.Typography = Typography;
+exports.getTypographyClasses = getTypographyClasses;