@cocso-ui/react 0.0.1-beta.3 → 0.0.1-beta.30

package/README.md

@@ -0,0 +1,23 @@
+## `@cocso-ui/react`
+
+이 Package는 리액트 기반 컴포넌트를 제공해요.
+
+`radix-ui`의 헤드리스 컴포넌트를 사용하여 접근성과 커스터마이징을 고려한 컴포넌트를 구현하고 있어요.
+
+### Installation
+
+```bash
+pnpm install @cocso-ui/react
+```
+
+### Usage
+
+컴포넌트를 아래와 같은 형태로 import 할 수 있어요.
+
+```javascript
+import {Button} from '@cocso-ui/react';
+```
+
+### Dependencies
+
+- [@cocso-ui/css](../css)

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,9 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+export declare const Accordion: import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<{
+        chevron?: boolean;
+    } & Omit<AccordionPrimitive.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/lib/components/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/lib/components/Body/Body.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
-type BodyElement = 'p' | 'a' | 'span' | 'div' | 'label' | 'li' | 'td' | 'th' | 'figcaption' | 'blockquote' | 'cite';
-export type BodyProps<T extends BodyElement = 'p'> = {
-    as?: T;
+import { type FontWeightToken } from '../../utils/token';
+export type BodyProps = {
+    asChild?: boolean;
     size?: 'lg' | 'md' | 'sm' | 'xs';
     color?: string;
-    fontWeight?: 'normal' | 'bold';
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<'p'>;
 export declare const Body: React.ForwardRefExoticComponent<{
-    as?: BodyElement | undefined;
+    asChild?: boolean;
     size?: "lg" | "md" | "sm" | "xs";
     color?: string;
-    fontWeight?: "normal" | "bold";
-} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> | Omit<React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> | Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> | Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> | Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "size" | "color" | "fontWeight"> & React.RefAttributes<HTMLElement>>;
-export {};
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>> & {
+    displayName: string;
+};

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type FontWeightToken } from '../../utils/token';
+export type ButtonProps = {
+    asChild?: boolean;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'success' | 'text';
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    disabled?: boolean;
+    loading?: boolean;
+    color?: string;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<'button'>;
+export declare const Button: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+    variant?: "primary" | "secondary" | "tertiary" | "danger" | "success" | "text";
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
+    disabled?: boolean;
+    loading?: boolean;
+    color?: string;
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
+    displayName: string;
+};

package/lib/components/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export type CheckboxStatus = 'on' | 'off' | 'intermediate';
+export type CheckboxProps = {
+    id?: string;
+    size?: 'lg' | 'md' | 'sm';
+    status: CheckboxStatus;
+    onChange: (next: CheckboxStatus) => void;
+    label?: string;
+    disabled?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange'>;
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    id?: string;
+    size?: "lg" | "md" | "sm";
+    status: CheckboxStatus;
+    onChange: (next: CheckboxStatus) => void;
+    label?: string;
+    disabled?: boolean;
+} & Omit<Omit<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "checked" | "onCheckedChange"> & React.RefAttributes<never>> & {
+    displayName: string;
+};

package/lib/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/lib/components/Display/Display.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
-type DisplayElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type DisplayProps<T extends DisplayElement = 'h1'> = {
-    as?: T;
+import { type FontWeightToken } from '../../utils/token';
+export type DisplayProps = {
+    asChild?: boolean;
     size?: 'lg' | 'md' | 'sm';
     color?: string;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<'h1'>;
 export declare const Display: React.ForwardRefExoticComponent<{
-    as?: DisplayElement | undefined;
+    asChild?: boolean;
     size?: "lg" | "md" | "sm";
     color?: string;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "size" | "color"> & React.RefAttributes<HTMLHeadingElement>>;
-export {};
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>> & {
+    displayName: string;
+};

package/lib/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface FileItem {
+    file: File;
+    name: string;
+    size: number;
+}
+export declare const FileUpload: React.ForwardRefExoticComponent<{
+    maxFiles?: number;
+    files: FileItem[];
+    onFilesChange: (files: FileItem[]) => void;
+    onRemove?: (fileName: string) => void;
+} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>> & {
+    displayName: string;
+};

package/lib/components/FileUpload/index.d.ts

@@ -0,0 +1 @@
+export * from './FileUpload';

package/lib/components/Heading/Heading.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type HeadingProps<T extends HeadingElement = 'h2'> = {
-    as?: T;
+import { type FontWeightToken } from '../../utils/token';
+export type HeadingProps = {
+    asChild?: boolean;
     size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
     color?: string;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<'h2'>;
 export declare const Heading: React.ForwardRefExoticComponent<{
-    as?: HeadingElement | undefined;
+    asChild?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
     color?: string;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "size" | "color"> & React.RefAttributes<HTMLHeadingElement>>;
-export {};
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>> & {
+    displayName: string;
+};

package/lib/components/Label/Label.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type FontWeightToken } from '../../utils/token';
+export type LabelProps = {
+    asChild?: boolean;
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+    color?: string;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<'label'>;
+export declare const Label: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+    size?: "lg" | "md" | "sm" | "xs";
+    color?: string;
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>> & {
+    displayName: string;
+};

package/lib/components/Label/index.d.ts

@@ -0,0 +1 @@
+export * from './Label';

package/lib/components/Link/Link.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type FontWeightToken } from '../../utils/token';
+export type LinkProps = {
+    asChild?: boolean;
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+    weight?: FontWeightToken;
+    indicator?: boolean;
+} & React.ComponentPropsWithoutRef<'a'>;
+export declare const Link: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+    size?: "lg" | "md" | "sm" | "xs";
+    weight?: FontWeightToken;
+    indicator?: boolean;
+} & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>> & {
+    displayName: string;
+};

package/lib/components/Link/index.d.ts

@@ -0,0 +1 @@
+export * from './Link';

package/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,7 @@
+import * as ModalPrimitive from '@radix-ui/react-dialog';
+export declare const Modal: import("react").FC<ModalPrimitive.DialogProps> & {
+    Trigger: import("react").ForwardRefExoticComponent<ModalPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<ModalPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<never>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<ModalPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<never>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<ModalPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<never>>;
+};

package/lib/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export * from './Modal';

package/lib/components/OneTimePasswordField/OneTimePasswordField.d.ts

@@ -0,0 +1,4 @@
+import * as OneTimePasswordFieldPrimitive from '@radix-ui/react-one-time-password-field';
+export declare const OneTimePasswordField: import("react").ForwardRefExoticComponent<Omit<Omit<OneTimePasswordFieldPrimitive.OneTimePasswordFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<never>> & {
+    Input: import("react").ForwardRefExoticComponent<Omit<Omit<OneTimePasswordFieldPrimitive.OneTimePasswordFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<never>>;
+};

package/lib/components/OneTimePasswordField/index.d.ts

@@ -0,0 +1 @@
+export * from './OneTimePasswordField';

package/lib/components/Spinner/Spinner.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare const tags: readonly ["div"];
+type Element = (typeof tags)[number];
+type Default = (typeof tags)[0];
+export type SpinnerProps<T extends Element = Default> = {
+    as?: T;
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    color?: string;
+    bg?: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
+export declare const Spinner: React.ForwardRefExoticComponent<{
+    as?: "div" | undefined;
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
+    color?: string;
+    bg?: string;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "size"> & React.RefAttributes<HTMLDivElement>> & {
+    displayName: string;
+};
+export {};

package/lib/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";var W=Object.create;var m=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(t,o)=>{for(var r in o)m(t,r,{get:o[r],enumerable:!0})},c=(t,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of N(o))!D.call(t,n)&&n!==r&&m(t,n,{get:()=>o[n],enumerable:!(a=$(o,n))||a.enumerable});return t};var d=(t,o,r)=>(r=t!=null?W(B(t)):{},c(o||!t||!t.__esModule?m(r,"default",{value:t,enumerable:!0}):r,t)),S=t=>c(m({},"__esModule",{value:!0}),t);var k={};H(k,{Body:()=>x,Display:()=>C,Heading:()=>b,Primitive:()=>w,createPrimitive:()=>e});module.exports=S(k);var f=require("@radix-ui/react-slot"),h=d(require("react"),1),R=require("react/jsx-runtime");function e(t){let o=h.forwardRef((r,a)=>{let{asChild:n,...i}=r;return(0,R.jsx)(n?f.Slot:t,{...i,ref:a})});return o.displayName=`Primitive.${t}`,o}var w={div:e("div"),span:e("span"),button:e("button"),input:e("input"),form:e("form"),label:e("label"),p:e("p"),h1:e("h1"),h2:e("h2"),h3:e("h3"),h4:e("h4"),h5:e("h5"),h6:e("h6"),section:e("section"),article:e("article"),header:e("header"),footer:e("footer"),main:e("main"),nav:e("nav"),aside:e("aside"),ul:e("ul"),ol:e("ol"),li:e("li"),img:e("img"),a:e("a"),strong:e("strong"),em:e("em"),small:e("small"),table:e("table"),thead:e("thead"),tbody:e("tbody"),tr:e("tr"),td:e("td"),th:e("th")};var y=d(require("react"),1),u=require("react/jsx-runtime");function z(t){if(t)return`var(--color-${t.replace(".","-")})`}var x=y.forwardRef(({as:t="p",size:o="md",color:r="",fontWeight:a="normal",style:n,className:i,...s},p)=>{let l=t,v=`text-body text-body-${o}${a==="bold"?"-bold":""} ${i}`;return(0,u.jsx)(l,{ref:p,className:v,style:{"--text-color":z(r),...n},...s})});x.displayName="Body";var g=d(require("react"),1),E=require("react/jsx-runtime");function O(t){if(t)return`var(--color-${t.replace(".","-")})`}var C=g.forwardRef(({as:t="h1",size:o="md",color:r="",style:a,className:n,...i},s)=>{let p=t,l=`text-display text-display-${o} ${n}`;return(0,E.jsx)(p,{ref:s,className:l,style:{"--text-color":O(r),...a},...i})});C.displayName="Display";var P=d(require("react"),1),T=require("react/jsx-runtime");function F(t){if(t)return`var(--color-${t.replace(".","-")})`}var b=P.forwardRef(({as:t="h2",size:o="md",color:r="",style:a,className:n,...i},s)=>{let p=t,l=`text-heading text-heading-${o} ${n}`;return(0,T.jsx)(p,{ref:s,className:l,style:{"--text-color":F(r),...a},...i})});b.displayName="Heading";
+"use strict";var be=Object.create;var A=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var we=Object.getOwnPropertyNames;var Ne=Object.getPrototypeOf,Te=Object.prototype.hasOwnProperty;var We=(e,o)=>{for(var t in o)A(e,t,{get:o[t],enumerable:!0})},ee=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of we(o))!Te.call(e,n)&&n!==t&&A(e,n,{get:()=>o[n],enumerable:!(r=ke(o,n))||r.enumerable});return e};var v=(e,o,t)=>(t=e!=null?be(Ne(e)):{},ee(o||!e||!e.__esModule?A(t,"default",{value:e,enumerable:!0}):t,e)),Me=e=>ee(A({},"__esModule",{value:!0}),e);var no={};We(no,{Accordion:()=>Ee,Body:()=>D,Button:()=>ze,Checkbox:()=>ro,Display:()=>$e,FileUpload:()=>Ve,Heading:()=>q,Label:()=>O,Link:()=>Ze,Modal:()=>Xe,OneTimePasswordField:()=>oo,Spinner:()=>K});module.exports=Me(no);var w=v(require("@radix-ui/react-accordion"),1),H=require("react");var Fe=(...e)=>e.filter(Boolean).join(" ").trim(),a=(e,o,t=[],...r)=>{let n=Object.entries(o).filter(([,c])=>c!==!1&&c!==null&&c!==void 0).map(([c,l])=>`${e}--${c}_${l}`).join(" "),i=t.filter(c=>Object.entries(c).every(([l,p])=>o[l]===p)).map(c=>{let l=Object.entries(c).map(([p,m])=>`${p}_${m}`).join("-");return`${e}--${l}`}).join(" ");return Fe(e,n,i,...r)};var oe=require("@radix-ui/react-slot"),T=require("react/jsx-runtime"),Le=(0,H.forwardRef)(({className:e,...o},t)=>{let r=a("cocso-accordion-item",{},[],e);return(0,T.jsx)(w.Item,{ref:t,className:r,...o})}),Se=(0,H.forwardRef)(({className:e,children:o,chevron:t=!0,...r},n)=>{let i=a("cocso-accordion-trigger",{},[],e);return(0,T.jsx)(w.Trigger,{ref:n,className:i,...r,children:(0,T.jsxs)(oe.Slottable,{children:[o,t&&(0,T.jsx)("div",{className:"cocso-accordion-chevron",children:(0,T.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,T.jsx)("path",{d:"m6 9 6 6 6-6"})})})]})})}),De=(0,H.forwardRef)(({className:e,...o},t)=>{let r=a("cocso-accordion-content",{},[],e);return(0,T.jsx)(w.Content,{ref:t,className:r,...o})}),Ee=Object.assign(w.Root,{Item:Le,Header:w.Header,Trigger:Se,Content:De});var re=v(require("react"),1),ne=require("@radix-ui/react-slot");function P(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var te={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function y(e){if(e)return e in te?te[e]:e}var se=require("react/jsx-runtime"),Oe=re.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="normal",className:n,style:i,...c},l)=>{let m=a("cocso-body",{size:o},[],n);return(0,se.jsx)(e?ne.Slot:"p",{ref:l,className:m,style:{"--cocso-body-color":P(t),"--cocso-body-weight":y(r),...i},...c})}),D=Object.assign(Oe,{displayName:"Body"});var E=v(require("react"),1),ae=require("@radix-ui/react-slot");var ie=v(require("react"),1);var F=require("react/jsx-runtime"),Be=["div"],Ae=ie.forwardRef(({as:e=Be[0],size:o="md",color:t="palette.primary-500",bg:r="palette.gray-200",className:n,style:i,...c},l)=>{let p=e,h=a("cocso-spinner",{size:o},[],n);return(0,F.jsx)(p,{ref:l,className:h,style:{"--cocso-spinner-bg":P(r),"--cocso-spinner-color":P(t),...i},...c,children:(0,F.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,F.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),(0,F.jsx)("path",{className:"opacity-75",fill:"var(--cocso-spinner-color, currentColor)",d:"M12 2a10 10 0 0110 10 10 10 0 01-5 8.66l-1-1.73a8 8 0 004-6.93 8 8 0 00-8-8V2z"})]})})}),K=Object.assign(Ae,{displayName:"Spinner"});var Z=require("react/jsx-runtime"),He=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],Ie=E.forwardRef(({asChild:e=!1,variant:o="primary",size:t="md",disabled:r=!1,loading:n=!1,color:i,weight:c="normal",className:l,style:p,children:m,onClick:h,onKeyDown:W,...L},S)=>{let C=r||n,R=E.useCallback(k=>{if(C){k.preventDefault();return}h?.(k)},[C,h]),$=E.useCallback(k=>{(k.key==="Enter"||k.key===" ")&&(k.preventDefault(),C||k.currentTarget.click()),W?.(k)},[C,W]),_={variant:o,size:t,loading:n,disabled:C},U=[...r?[{variant:o,disabled:r}]:[],...n?[{variant:o,loading:n}]:[]],V=a("cocso-button",_,U,l),G={"--cocso-button-color":P(i),"--cocso-button-weight":y(c),...p};return(0,Z.jsx)(e?ae.Slot:"button",{ref:S,className:V,onClick:R,onKeyDown:$,role:"button",disabled:C,"aria-disabled":C,"aria-busy":n,style:G,...L,children:n?(0,Z.jsx)(K,{className:"cocso-button-spinner",size:He(t),color:"currentColor"}):m})}),ze=Object.assign(Ie,{displayName:"Button"});var ce=v(require("react"),1),le=require("@radix-ui/react-slot");var me=require("react/jsx-runtime"),je=ce.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:n,style:i,...c},l)=>{let m=a("cocso-display",{size:o},[],n);return(0,me.jsx)(e?le.Slot:"h1",{ref:l,className:m,style:{"--cocso-display-color":P(t),"--cocso-display-weight":y(r),...i},...c})}),$e=Object.assign(je,{displayName:"Display"});var ge=v(require("react"),1),d=require("react");var pe=v(require("react"),1),de=require("@radix-ui/react-slot");var fe=require("react/jsx-runtime"),_e=pe.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="normal",className:n,style:i,...c},l)=>{let m=a("cocso-label",{size:o},[],n);return(0,fe.jsx)(e?de.Slot:"label",{ref:l,className:m,style:{"--cocso-label-color":P(t),"--cocso-label-weight":y(r),...i},...c})}),O=Object.assign(_e,{displayName:"Label"});var f=require("react/jsx-runtime"),Ue=ge.forwardRef(({maxFiles:e=2,files:o,onFilesChange:t,onRemove:r,multiple:n=!0,accept:i,...c},l)=>{let[p,m]=(0,d.useState)(!1),h=(0,d.useRef)(null),W=(0,d.useRef)(null),L=3*1024*1024,S=(0,d.useCallback)(s=>i?i.split(",").map(x=>x.trim()).some(x=>{if(x.endsWith("/*")){let B=x.slice(0,-2);return s.type.startsWith(B)}return s.type===x||s.name.toLowerCase().endsWith(x)}):!0,[i]),C=(0,d.useCallback)(s=>s.size>L?(alert(`${s.name}\uC740(\uB294) 3MB\uB97C \uCD08\uACFC\uD569\uB2C8\uB2E4.`),!1):!0,[]),R=(0,d.useCallback)(s=>{let x=Array.from(s).filter(M=>S(M)?C(M):(alert(`${M.name}\uC740(\uB294) \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD0C0\uC785\uC785\uB2C8\uB2E4.`),!1));if(x.length===0)return;let B=e-o.length;if(B<=0){alert(`\uCD5C\uB300 ${e}\uAC1C\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);return}let xe=x.slice(0,B).map(M=>({file:M,name:M.name,size:M.size}));t([...o,...xe])},[o,e,t,S,C]),$=(0,d.useCallback)(s=>{s.preventDefault(),s.stopPropagation(),m(!0)},[]),_=(0,d.useCallback)(s=>{s.preventDefault(),s.stopPropagation(),W.current&&!W.current.contains(s.relatedTarget)&&m(!1)},[]),U=(0,d.useCallback)(s=>{s.preventDefault(),s.stopPropagation()},[]),V=(0,d.useCallback)(s=>{s.preventDefault(),s.stopPropagation(),m(!1);let{files:N}=s.dataTransfer;N&&R(N)},[R]),G=(0,d.useCallback)(s=>{let{files:N}=s.target;N&&R(N)},[R]),X=(0,d.useCallback)(s=>{let N=o.filter(x=>x.name!==s);t(N),r?.(s)},[o,t,r]),k=(0,d.useCallback)(()=>{h.current?.click()},[]),Y=o.length>=e||!n&&o.length>=1;return(0,f.jsxs)("div",{className:"cocso-file-upload-wrapper",children:[!Y&&(0,f.jsxs)("div",{ref:W,onDragEnter:$,onDragOver:U,onDragLeave:_,onDrop:V,onClick:k,className:"cocso-file-upload","data-drag-active":p,children:[(0,f.jsx)("input",{ref:s=>{h.current=s,typeof l=="function"?l(s):l&&(l.current=s)},type:"file",onChange:G,multiple:n,accept:i,style:{display:"none"},...c}),(0,f.jsx)(O,{size:"xs",color:"palette.gray-600",children:"\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098, \uD074\uB9AD\uD558\uC5EC \uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uC138\uC694 (\uCD5C\uB300 3MB)"}),(0,f.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,f.jsx)("path",{d:"M5 12h14"}),(0,f.jsx)("path",{d:"M12 5v14"})]})]}),o.length>0&&(0,f.jsx)("div",{className:"cocso-file-upload-list",children:o.map(s=>(0,f.jsxs)("div",{className:"cocso-file-upload-item",children:[(0,f.jsx)(D,{size:"xs",children:s.name}),(0,f.jsx)("button",{type:"button",onClick:()=>X(s.name),className:"cocso-file-upload-remove",children:(0,f.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,f.jsx)("path",{d:"M18 6 6 18"}),(0,f.jsx)("path",{d:"m6 6 12 12"})]})})]},s.name))})]})}),Ve=Object.assign(Ue,{displayName:"FileUpload"});var he=v(require("react"),1),ue=require("@radix-ui/react-slot");var Ce=require("react/jsx-runtime"),Ge=he.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:n,style:i,...c},l)=>{let m=a("cocso-heading",{size:o},[],n);return(0,Ce.jsx)(e?ue.Slot:"h2",{ref:l,className:m,style:{"--cocso-heading-color":P(t),"--cocso-heading-weight":y(r),...i},...c})}),q=Object.assign(Ge,{displayName:"Heading"});var ve=v(require("react"),1),Pe=require("@radix-ui/react-slot");var ye=require("react/jsx-runtime"),Ke=ve.forwardRef(({asChild:e=!1,size:o="md",weight:t="normal",indicator:r=!0,className:n,style:i,...c},l)=>{let m=a("cocso-link",{size:o,indicator:r},[],n);return(0,ye.jsx)(e?Pe.Slot:"a",{ref:l,className:m,style:{"--cocso-link-weight":y(t),...i},...c})}),Ze=Object.assign(Ke,{displayName:"Link"});var g=v(require("@radix-ui/react-dialog"),1),I=require("react");var u=require("react/jsx-runtime"),qe=(0,I.forwardRef)(({className:e,children:o,...t},r)=>{let n=a("cocso-modal-content",{},[],e);return(0,u.jsxs)(g.Portal,{children:[(0,u.jsx)(g.Overlay,{className:"cocso-modal-overlay"}),(0,u.jsxs)(g.Content,{ref:r,className:n,...t,children:[(0,u.jsx)("div",{className:"cocso-modal-close-wrapper",children:(0,u.jsx)(g.Close,{className:"cocso-modal-close",children:(0,u.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,u.jsx)("path",{d:"M18 6 6 18"}),(0,u.jsx)("path",{d:"m6 6 12 12"})]})})}),o]})]})}),Je=(0,I.forwardRef)(({className:e,children:o,...t},r)=>{let n=a("cocso-modal-title",{},[],e);return(0,u.jsx)(g.Title,{ref:r,className:n,asChild:!0,...t,children:(0,u.jsx)(q,{color:"text.basic",children:o})})}),Qe=(0,I.forwardRef)(({className:e,children:o,...t},r)=>{let n=a("cocso-modal-description",{},[],e);return(0,u.jsx)(g.Description,{ref:r,className:n,asChild:!0,...t,children:(0,u.jsx)(D,{size:"sm",color:"text.subtle",children:o})})}),Xe=Object.assign(g.Root,{Trigger:g.Trigger,Content:qe,Title:Je,Description:Qe});var z=v(require("@radix-ui/react-one-time-password-field"),1),J=require("react");var Q=require("react/jsx-runtime"),Ye=(0,J.forwardRef)(({className:e,...o},t)=>{let r=a("cocso-otp",{},[],e);return(0,Q.jsx)(z.Root,{ref:t,className:r,...o})}),eo=(0,J.forwardRef)(({className:e,...o},t)=>{let r=a("cocso-otp-input",{},[],e);return(0,Q.jsx)(z.Input,{ref:t,className:r,...o})}),oo=Object.assign(Ye,{Input:eo});var Re=v(require("react"),1),j=v(require("@radix-ui/react-checkbox"),1);var b=require("react/jsx-runtime"),to=Re.forwardRef(({id:e,size:o="md",status:t,onChange:r,label:n,disabled:i=!1,className:c,...l},p)=>{let m={size:o,disabled:i,status:t},h=[...i?[{status:t,disabled:i}]:[]],W=a("cocso-checkbox",m,h,c),L=C=>{if(!i){let R;C===!0?R="on":C==="indeterminate"?R="intermediate":R="off",r(R)}};return(0,b.jsxs)("div",{className:"cocso-checkbox-wrapper",children:[(0,b.jsxs)(j.Root,{ref:p,id:e,className:W,checked:(()=>{switch(t){case"on":return!0;case"intermediate":return"indeterminate";case"off":default:return!1}})(),onCheckedChange:L,disabled:i,...l,children:[(0,b.jsx)(j.Indicator,{className:"cocso-checkbox-indicator",style:{opacity:t==="on"?1:0},children:(0,b.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,b.jsx)("path",{d:"M20 6 9 17l-5-5"})})}),(0,b.jsx)("div",{className:"cocso-checkbox-indicator",style:{opacity:t==="intermediate"?1:0},children:(0,b.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,b.jsx)("path",{d:"M5 12h14"})})})]}),n&&(0,b.jsx)(O,{className:a("cocso-checkbox-label",{disabled:i}),size:o,htmlFor:e,children:n})]})}),ro=Object.assign(to,{displayName:"Checkbox"});

package/lib/index.d.ts

@@ -1,4 +1,12 @@
-export * from './primitive';
+export * from './components/Accordion';
 export * from './components/Body';
+export * from './components/Button';
 export * from './components/Display';
+export * from './components/FileUpload';
 export * from './components/Heading';
+export * from './components/Label';
+export * from './components/Link';
+export * from './components/Modal';
+export * from './components/OneTimePasswordField';
+export * from './components/Checkbox';
+export * from './components/Spinner';

package/lib/index.js

@@ -1 +1 @@
-import{Slot as R}from"@radix-ui/react-slot";import*as m from"react";import{jsx as y}from"react/jsx-runtime";function e(t){let o=m.forwardRef((r,n)=>{let{asChild:a,...i}=r;return y(a?R:t,{...i,ref:n})});return o.displayName=`Primitive.${t}`,o}var $={div:e("div"),span:e("span"),button:e("button"),input:e("input"),form:e("form"),label:e("label"),p:e("p"),h1:e("h1"),h2:e("h2"),h3:e("h3"),h4:e("h4"),h5:e("h5"),h6:e("h6"),section:e("section"),article:e("article"),header:e("header"),footer:e("footer"),main:e("main"),nav:e("nav"),aside:e("aside"),ul:e("ul"),ol:e("ol"),li:e("li"),img:e("img"),a:e("a"),strong:e("strong"),em:e("em"),small:e("small"),table:e("table"),thead:e("thead"),tbody:e("tbody"),tr:e("tr"),td:e("td"),th:e("th")};import*as d from"react";import{jsx as g}from"react/jsx-runtime";function x(t){if(t)return`var(--color-${t.replace(".","-")})`}var u=d.forwardRef(({as:t="p",size:o="md",color:r="",fontWeight:n="normal",style:a,className:i,...s},p)=>{let l=t,h=`text-body text-body-${o}${n==="bold"?"-bold":""} ${i}`;return g(l,{ref:p,className:h,style:{"--text-color":x(r),...a},...s})});u.displayName="Body";import*as c from"react";import{jsx as P}from"react/jsx-runtime";function C(t){if(t)return`var(--color-${t.replace(".","-")})`}var E=c.forwardRef(({as:t="h1",size:o="md",color:r="",style:n,className:a,...i},s)=>{let p=t,l=`text-display text-display-${o} ${a}`;return P(p,{ref:s,className:l,style:{"--text-color":C(r),...n},...i})});E.displayName="Display";import*as f from"react";import{jsx as v}from"react/jsx-runtime";function b(t){if(t)return`var(--color-${t.replace(".","-")})`}var T=f.forwardRef(({as:t="h2",size:o="md",color:r="",style:n,className:a,...i},s)=>{let p=t,l=`text-heading text-heading-${o} ${a}`;return v(p,{ref:s,className:l,style:{"--text-color":b(r),...n},...i})});T.displayName="Heading";export{u as Body,E as Display,T as Heading,$ as Primitive,e as createPrimitive};
+import*as y from"@radix-ui/react-accordion";import{forwardRef as _}from"react";var de=(...e)=>e.filter(Boolean).join(" ").trim(),a=(e,o,t=[],...r)=>{let s=Object.entries(o).filter(([,c])=>c!==!1&&c!==null&&c!==void 0).map(([c,l])=>`${e}--${c}_${l}`).join(" "),i=t.filter(c=>Object.entries(c).every(([l,p])=>o[l]===p)).map(c=>{let l=Object.entries(c).map(([p,m])=>`${p}_${m}`).join("-");return`${e}--${l}`}).join(" ");return de(e,s,i,...r)};import{Slottable as fe}from"@radix-ui/react-slot";import{jsx as W,jsxs as Ce}from"react/jsx-runtime";var ge=_(({className:e,...o},t)=>{let r=a("cocso-accordion-item",{},[],e);return W(y.Item,{ref:t,className:r,...o})}),he=_(({className:e,children:o,chevron:t=!0,...r},s)=>{let i=a("cocso-accordion-trigger",{},[],e);return W(y.Trigger,{ref:s,className:i,...r,children:Ce(fe,{children:[o,t&&W("div",{className:"cocso-accordion-chevron",children:W("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:W("path",{d:"m6 9 6 6 6-6"})})})]})})}),ue=_(({className:e,...o},t)=>{let r=a("cocso-accordion-content",{},[],e);return W(y.Content,{ref:t,className:r,...o})}),Ye=Object.assign(y.Root,{Item:ge,Header:y.Header,Trigger:he,Content:ue});import*as J from"react";import{Slot as ve}from"@radix-ui/react-slot";function h(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var q={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function u(e){if(e)return e in q?q[e]:e}import{jsx as ye}from"react/jsx-runtime";var Pe=J.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="normal",className:s,style:i,...c},l)=>{let m=a("cocso-body",{size:o},[],s);return ye(e?ve:"p",{ref:l,className:m,style:{"--cocso-body-color":h(t),"--cocso-body-weight":u(r),...i},...c})}),E=Object.assign(Pe,{displayName:"Body"});import*as L from"react";import{Slot as ke}from"@radix-ui/react-slot";import*as Q from"react";import{jsx as U,jsxs as be}from"react/jsx-runtime";var Re=["div"],xe=Q.forwardRef(({as:e=Re[0],size:o="md",color:t="palette.primary-500",bg:r="palette.gray-200",className:s,style:i,...c},l)=>{let p=e,f=a("cocso-spinner",{size:o},[],s);return U(p,{ref:l,className:f,style:{"--cocso-spinner-bg":h(r),"--cocso-spinner-color":h(t),...i},...c,children:be("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[U("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),U("path",{className:"opacity-75",fill:"var(--cocso-spinner-color, currentColor)",d:"M12 2a10 10 0 0110 10 10 10 0 01-5 8.66l-1-1.73a8 8 0 004-6.93 8 8 0 00-8-8V2z"})]})})}),X=Object.assign(xe,{displayName:"Spinner"});import{jsx as Y}from"react/jsx-runtime";var we=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],Ne=L.forwardRef(({asChild:e=!1,variant:o="primary",size:t="md",disabled:r=!1,loading:s=!1,color:i,weight:c="normal",className:l,style:p,children:m,onClick:f,onKeyDown:w,...M},F)=>{let g=r||s,C=L.useCallback(P=>{if(g){P.preventDefault();return}f?.(P)},[g,f]),H=L.useCallback(P=>{(P.key==="Enter"||P.key===" ")&&(P.preventDefault(),g||P.currentTarget.click()),w?.(P)},[g,w]),I={variant:o,size:t,loading:s,disabled:g},z=[...r?[{variant:o,disabled:r}]:[],...s?[{variant:o,loading:s}]:[]],j=a("cocso-button",I,z,l),$={"--cocso-button-color":h(i),"--cocso-button-weight":u(c),...p};return Y(e?ke:"button",{ref:F,className:j,onClick:C,onKeyDown:H,role:"button",disabled:g,"aria-disabled":g,"aria-busy":s,style:$,...M,children:s?Y(X,{className:"cocso-button-spinner",size:we(t),color:"currentColor"}):m})}),bo=Object.assign(Ne,{displayName:"Button"});import*as ee from"react";import{Slot as Te}from"@radix-ui/react-slot";import{jsx as Me}from"react/jsx-runtime";var We=ee.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:s,style:i,...c},l)=>{let m=a("cocso-display",{size:o},[],s);return Me(e?Te:"h1",{ref:l,className:m,style:{"--cocso-display-color":h(t),"--cocso-display-weight":u(r),...i},...c})}),Lo=Object.assign(We,{displayName:"Display"});import*as re from"react";import{useRef as te,useState as De,useCallback as R}from"react";import*as oe from"react";import{Slot as Fe}from"@radix-ui/react-slot";import{jsx as Se}from"react/jsx-runtime";var Le=oe.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="normal",className:s,style:i,...c},l)=>{let m=a("cocso-label",{size:o},[],s);return Se(e?Fe:"label",{ref:l,className:m,style:{"--cocso-label-color":h(t),"--cocso-label-weight":u(r),...i},...c})}),O=Object.assign(Le,{displayName:"Label"});import{jsx as b,jsxs as S}from"react/jsx-runtime";var Ee=re.forwardRef(({maxFiles:e=2,files:o,onFilesChange:t,onRemove:r,multiple:s=!0,accept:i,...c},l)=>{let[p,m]=De(!1),f=te(null),w=te(null),M=3*1024*1024,F=R(n=>i?i.split(",").map(v=>v.trim()).some(v=>{if(v.endsWith("/*")){let D=v.slice(0,-2);return n.type.startsWith(D)}return n.type===v||n.name.toLowerCase().endsWith(v)}):!0,[i]),g=R(n=>n.size>M?(alert(`${n.name}\uC740(\uB294) 3MB\uB97C \uCD08\uACFC\uD569\uB2C8\uB2E4.`),!1):!0,[]),C=R(n=>{let v=Array.from(n).filter(N=>F(N)?g(N):(alert(`${N.name}\uC740(\uB294) \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD0C0\uC785\uC785\uB2C8\uB2E4.`),!1));if(v.length===0)return;let D=e-o.length;if(D<=0){alert(`\uCD5C\uB300 ${e}\uAC1C\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);return}let pe=v.slice(0,D).map(N=>({file:N,name:N.name,size:N.size}));t([...o,...pe])},[o,e,t,F,g]),H=R(n=>{n.preventDefault(),n.stopPropagation(),m(!0)},[]),I=R(n=>{n.preventDefault(),n.stopPropagation(),w.current&&!w.current.contains(n.relatedTarget)&&m(!1)},[]),z=R(n=>{n.preventDefault(),n.stopPropagation()},[]),j=R(n=>{n.preventDefault(),n.stopPropagation(),m(!1);let{files:x}=n.dataTransfer;x&&C(x)},[C]),$=R(n=>{let{files:x}=n.target;x&&C(x)},[C]),K=R(n=>{let x=o.filter(v=>v.name!==n);t(x),r?.(n)},[o,t,r]),P=R(()=>{f.current?.click()},[]),Z=o.length>=e||!s&&o.length>=1;return S("div",{className:"cocso-file-upload-wrapper",children:[!Z&&S("div",{ref:w,onDragEnter:H,onDragOver:z,onDragLeave:I,onDrop:j,onClick:P,className:"cocso-file-upload","data-drag-active":p,children:[b("input",{ref:n=>{f.current=n,typeof l=="function"?l(n):l&&(l.current=n)},type:"file",onChange:$,multiple:s,accept:i,style:{display:"none"},...c}),b(O,{size:"xs",color:"palette.gray-600",children:"\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098, \uD074\uB9AD\uD558\uC5EC \uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uC138\uC694 (\uCD5C\uB300 3MB)"}),S("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[b("path",{d:"M5 12h14"}),b("path",{d:"M12 5v14"})]})]}),o.length>0&&b("div",{className:"cocso-file-upload-list",children:o.map(n=>S("div",{className:"cocso-file-upload-item",children:[b(E,{size:"xs",children:n.name}),b("button",{type:"button",onClick:()=>K(n.name),className:"cocso-file-upload-remove",children:S("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[b("path",{d:"M18 6 6 18"}),b("path",{d:"m6 6 12 12"})]})})]},n.name))})]})}),Go=Object.assign(Ee,{displayName:"FileUpload"});import*as ne from"react";import{Slot as Oe}from"@radix-ui/react-slot";import{jsx as Ae}from"react/jsx-runtime";var Be=ne.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:s,style:i,...c},l)=>{let m=a("cocso-heading",{size:o},[],s);return Ae(e?Oe:"h2",{ref:l,className:m,style:{"--cocso-heading-color":h(t),"--cocso-heading-weight":u(r),...i},...c})}),se=Object.assign(Be,{displayName:"Heading"});import*as ie from"react";import{Slot as He}from"@radix-ui/react-slot";import{jsx as ze}from"react/jsx-runtime";var Ie=ie.forwardRef(({asChild:e=!1,size:o="md",weight:t="normal",indicator:r=!0,className:s,style:i,...c},l)=>{let m=a("cocso-link",{size:o,indicator:r},[],s);return ze(e?He:"a",{ref:l,className:m,style:{"--cocso-link-weight":u(t),...i},...c})}),at=Object.assign(Ie,{displayName:"Link"});import*as d from"@radix-ui/react-dialog";import{forwardRef as G}from"react";import{jsx as k,jsxs as V}from"react/jsx-runtime";var je=G(({className:e,children:o,...t},r)=>{let s=a("cocso-modal-content",{},[],e);return V(d.Portal,{children:[k(d.Overlay,{className:"cocso-modal-overlay"}),V(d.Content,{ref:r,className:s,...t,children:[k("div",{className:"cocso-modal-close-wrapper",children:k(d.Close,{className:"cocso-modal-close",children:V("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[k("path",{d:"M18 6 6 18"}),k("path",{d:"m6 6 12 12"})]})})}),o]})]})}),$e=G(({className:e,children:o,...t},r)=>{let s=a("cocso-modal-title",{},[],e);return k(d.Title,{ref:r,className:s,asChild:!0,...t,children:k(se,{color:"text.basic",children:o})})}),_e=G(({className:e,children:o,...t},r)=>{let s=a("cocso-modal-description",{},[],e);return k(d.Description,{ref:r,className:s,asChild:!0,...t,children:k(E,{size:"sm",color:"text.subtle",children:o})})}),vt=Object.assign(d.Root,{Trigger:d.Trigger,Content:je,Title:$e,Description:_e});import*as B from"@radix-ui/react-one-time-password-field";import{forwardRef as ae}from"react";import{jsx as ce}from"react/jsx-runtime";var Ue=ae(({className:e,...o},t)=>{let r=a("cocso-otp",{},[],e);return ce(B.Root,{ref:t,className:r,...o})}),Ve=ae(({className:e,...o},t)=>{let r=a("cocso-otp-input",{},[],e);return ce(B.Input,{ref:t,className:r,...o})}),Tt=Object.assign(Ue,{Input:Ve});import*as me from"react";import*as A from"@radix-ui/react-checkbox";import{jsx as T,jsxs as le}from"react/jsx-runtime";var Ge=me.forwardRef(({id:e,size:o="md",status:t,onChange:r,label:s,disabled:i=!1,className:c,...l},p)=>{let m={size:o,disabled:i,status:t},f=[...i?[{status:t,disabled:i}]:[]],w=a("cocso-checkbox",m,f,c),M=g=>{if(!i){let C;g===!0?C="on":g==="indeterminate"?C="intermediate":C="off",r(C)}};return le("div",{className:"cocso-checkbox-wrapper",children:[le(A.Root,{ref:p,id:e,className:w,checked:(()=>{switch(t){case"on":return!0;case"intermediate":return"indeterminate";case"off":default:return!1}})(),onCheckedChange:M,disabled:i,...l,children:[T(A.Indicator,{className:"cocso-checkbox-indicator",style:{opacity:t==="on"?1:0},children:T("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:T("path",{d:"M20 6 9 17l-5-5"})})}),T("div",{className:"cocso-checkbox-indicator",style:{opacity:t==="intermediate"?1:0},children:T("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:T("path",{d:"M5 12h14"})})})]}),s&&T(O,{className:a("cocso-checkbox-label",{disabled:i}),size:o,htmlFor:e,children:s})]})}),Et=Object.assign(Ge,{displayName:"Checkbox"});export{Ye as Accordion,E as Body,bo as Button,Et as Checkbox,Lo as Display,Go as FileUpload,se as Heading,O as Label,at as Link,vt as Modal,Tt as OneTimePasswordField,X as Spinner};

package/lib/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
+export declare const createClassName: (baseClass: string, variants: Record<string, any>, compoundVariants?: Record<string, any>[], ...additionalClasses: (string | undefined | null | false)[]) => string;

package/lib/utils/token.d.ts

@@ -0,0 +1,15 @@
+export declare function createColor(token: string | undefined): string | undefined;
+declare const FONT_WEIGHT_MAP: {
+    readonly thin: "100";
+    readonly extralight: "200";
+    readonly light: "300";
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+    readonly extrabold: "800";
+    readonly black: "900";
+};
+export type FontWeightToken = keyof typeof FONT_WEIGHT_MAP;
+export declare function createFontWeight(token: string | undefined): string | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocso-ui/react",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.30",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",
@@ -25,17 +25,21 @@
     "lib"
   ],
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-one-time-password-field": "^0.1.7",
     "@radix-ui/react-slot": "^1.2.3"
   },
   "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "esbuild": "^0.24.0",
-    "typescript": "^5.0.0"
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "esbuild": "^0.25.6",
+    "typescript": "^5.8.3"
   },
   "publishConfig": {
     "access": "public"

package/lib/primitive/index.d.ts

@@ -1,44 +0,0 @@
-import * as React from 'react';
-export interface PrimitiveProps {
-    asChild?: boolean;
-}
-type PropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & PrimitiveProps;
-declare function createPrimitive<E extends React.ElementType>(element: E): React.ForwardRefExoticComponent<PropsWithRef<E>>;
-declare const Primitive: {
-    div: React.ForwardRefExoticComponent<PropsWithRef<"div">>;
-    span: React.ForwardRefExoticComponent<PropsWithRef<"span">>;
-    button: React.ForwardRefExoticComponent<PropsWithRef<"button">>;
-    input: React.ForwardRefExoticComponent<PropsWithRef<"input">>;
-    form: React.ForwardRefExoticComponent<PropsWithRef<"form">>;
-    label: React.ForwardRefExoticComponent<PropsWithRef<"label">>;
-    p: React.ForwardRefExoticComponent<PropsWithRef<"p">>;
-    h1: React.ForwardRefExoticComponent<PropsWithRef<"h1">>;
-    h2: React.ForwardRefExoticComponent<PropsWithRef<"h2">>;
-    h3: React.ForwardRefExoticComponent<PropsWithRef<"h3">>;
-    h4: React.ForwardRefExoticComponent<PropsWithRef<"h4">>;
-    h5: React.ForwardRefExoticComponent<PropsWithRef<"h5">>;
-    h6: React.ForwardRefExoticComponent<PropsWithRef<"h6">>;
-    section: React.ForwardRefExoticComponent<PropsWithRef<"section">>;
-    article: React.ForwardRefExoticComponent<PropsWithRef<"article">>;
-    header: React.ForwardRefExoticComponent<PropsWithRef<"header">>;
-    footer: React.ForwardRefExoticComponent<PropsWithRef<"footer">>;
-    main: React.ForwardRefExoticComponent<PropsWithRef<"main">>;
-    nav: React.ForwardRefExoticComponent<PropsWithRef<"nav">>;
-    aside: React.ForwardRefExoticComponent<PropsWithRef<"aside">>;
-    ul: React.ForwardRefExoticComponent<PropsWithRef<"ul">>;
-    ol: React.ForwardRefExoticComponent<PropsWithRef<"ol">>;
-    li: React.ForwardRefExoticComponent<PropsWithRef<"li">>;
-    img: React.ForwardRefExoticComponent<PropsWithRef<"img">>;
-    a: React.ForwardRefExoticComponent<PropsWithRef<"a">>;
-    strong: React.ForwardRefExoticComponent<PropsWithRef<"strong">>;
-    em: React.ForwardRefExoticComponent<PropsWithRef<"em">>;
-    small: React.ForwardRefExoticComponent<PropsWithRef<"small">>;
-    table: React.ForwardRefExoticComponent<PropsWithRef<"table">>;
-    thead: React.ForwardRefExoticComponent<PropsWithRef<"thead">>;
-    tbody: React.ForwardRefExoticComponent<PropsWithRef<"tbody">>;
-    tr: React.ForwardRefExoticComponent<PropsWithRef<"tr">>;
-    td: React.ForwardRefExoticComponent<PropsWithRef<"td">>;
-    th: React.ForwardRefExoticComponent<PropsWithRef<"th">>;
-};
-export { createPrimitive, Primitive };
-export type { PropsWithRef };