@cocso-ui/react 0.0.1-beta.4 → 0.0.1-beta.41

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,13 +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'>;
-type BodyComponent = <T extends BodyElement = 'p'>(props: BodyProps<T> & React.RefAttributes<React.ComponentRef<T>>) => React.ReactElement;
-export declare const Body: BodyComponent & {
-    displayName?: string;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<'p'>;
+export declare const Body: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+    size?: "lg" | "md" | "sm" | "xs";
+    color?: string;
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>> & {
+    displayName: string;
 };
-export {};

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 & React.RefAttributes<HTMLButtonElement>, "ref">, "checked" | "onCheckedChange"> & React.RefAttributes<HTMLButtonElement>> & {
+    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<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<ModalPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<ModalPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+};

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<HTMLDivElement>> & {
+    Input: import("react").ForwardRefExoticComponent<Omit<Omit<OneTimePasswordFieldPrimitive.OneTimePasswordFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};

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

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

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type PaginationProps = {
+    asChild?: boolean;
+    page: number;
+    totalPages: number;
+    maxVisible?: number;
+    onChange: (pageNumber: number) => void;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'>;
+export declare const Pagination: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+    page: number;
+    totalPages: number;
+    maxVisible?: number;
+    onChange: (pageNumber: number) => void;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    displayName: string;
+};

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

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

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/components/Switch/Switch.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+export type SwitchProps = {
+    asChild?: boolean;
+    id: string;
+    size?: 'lg' | 'md';
+    disabled?: boolean;
+    label?: string;
+    position?: 'left' | 'right';
+} & React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
+export declare const Switch: React.ForwardRefExoticComponent<{
+    asChild?: boolean;
+    id: string;
+    size?: "lg" | "md";
+    disabled?: boolean;
+    label?: string;
+    position?: "left" | "right";
+} & Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
+    displayName: string;
+};

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

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

package/lib/components/Toast/Toast.d.ts

@@ -0,0 +1,5 @@
+import { toast } from 'sonner';
+export declare const Toaster: import("react").ForwardRefExoticComponent<import("sonner").ToasterProps & import("react").RefAttributes<HTMLElement>> & {
+    displayName: string;
+};
+export { toast };

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

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

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";var B=Object.create;var m=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var $=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 W(o))!D.call(t,n)&&n!==r&&m(t,n,{get:()=>o[n],enumerable:!(a=N(o,n))||a.enumerable});return t};var d=(t,o,r)=>(r=t!=null?B($(t)):{},c(o||!t||!t.__esModule?m(r,"default",{value:t,enumerable:!0}):r,t)),w=t=>c(m({},"__esModule",{value:!0}),t);var q={};H(q,{Body:()=>x,Display:()=>g,Heading:()=>T,Primitive:()=>S,createPrimitive:()=>e});module.exports=w(q);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,...s}=r;return(0,R.jsx)(n?f.Slot:t,{...s,ref:a})});return o.displayName=`Primitive.${t}`,o}var S={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),C=require("react/jsx-runtime");function z(t){if(t)return`var(--color-${t.replace(".","-")})`}var F=({as:t="p",size:o="md",color:r="",fontWeight:a="normal",style:n,className:s,...i},p)=>{let l=t,v=`text-body text-body-${o}${a==="bold"?"-bold":""} ${s}`;return(0,C.jsx)(l,{ref:p,className:v,style:{"--text-color":z(r),...n},...i})},x=y.forwardRef(F);x.displayName="Body";var u=d(require("react"),1),E=require("react/jsx-runtime");function O(t){if(t)return`var(--color-${t.replace(".","-")})`}var g=u.forwardRef(({as:t="h1",size:o="md",color:r="",style:a,className:n,...s},i)=>{let p=t,l=`text-display text-display-${o} ${n}`;return(0,E.jsx)(p,{ref:i,className:l,style:{"--text-color":O(r),...a},...s})});g.displayName="Display";var P=d(require("react"),1),b=require("react/jsx-runtime");function k(t){if(t)return`var(--color-${t.replace(".","-")})`}var T=P.forwardRef(({as:t="h2",size:o="md",color:r="",style:a,className:n,...s},i)=>{let p=t,l=`text-heading text-heading-${o} ${n}`;return(0,b.jsx)(p,{ref:i,className:l,style:{"--text-color":k(r),...a},...s})});T.displayName="Heading";
+"use strict";var Fo=Object.create;var I=Object.defineProperty;var Do=Object.getOwnPropertyDescriptor;var Oo=Object.getOwnPropertyNames;var Eo=Object.getPrototypeOf,Bo=Object.prototype.hasOwnProperty;var Ao=(o,e)=>{for(var t in e)I(o,t,{get:e[t],enumerable:!0})},no=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Oo(e))!Bo.call(o,n)&&n!==t&&I(o,n,{get:()=>e[n],enumerable:!(r=Do(e,n))||r.enumerable});return o};var g=(o,e,t)=>(t=o!=null?Fo(Eo(o)):{},no(e||!o||!o.__esModule?I(t,"default",{value:o,enumerable:!0}):t,o)),Ho=o=>no(I({},"__esModule",{value:!0}),o);var ve={};Ao(ve,{Accordion:()=>_o,Body:()=>B,Button:()=>qo,Checkbox:()=>he,Display:()=>Qo,FileUpload:()=>oe,Heading:()=>Y,Label:()=>F,Link:()=>re,Modal:()=>ae,OneTimePasswordField:()=>le,Pagination:()=>de,Spinner:()=>Q,Switch:()=>ue,Toaster:()=>Ce,toast:()=>V.toast});module.exports=Ho(ve);var S=g(require("@radix-ui/react-accordion"),1),z=require("react");var Io=(...o)=>o.filter(Boolean).join(" ").trim(),c=(o,e,t=[],...r)=>{let n=Object.entries(e).filter(([,a])=>a!==!1&&a!==null&&a!==void 0).map(([a,m])=>`${o}--${a}_${m}`).join(" "),s=t.filter(a=>Object.entries(a).every(([m,p])=>e[m]===p)).map(a=>{let m=Object.entries(a).map(([p,l])=>`${p}_${l}`).join("-");return`${o}--${m}`}).join(" ");return Io(o,n,s,...r)};var io=require("@radix-ui/react-slot"),M=require("react/jsx-runtime"),zo=(0,z.forwardRef)(({className:o,...e},t)=>{let r=c("cocso-accordion-item",{},[],o);return(0,M.jsx)(S.Item,{ref:t,className:r,...e})}),jo=(0,z.forwardRef)(({className:o,children:e,chevron:t=!0,...r},n)=>{let s=c("cocso-accordion-trigger",{},[],o);return(0,M.jsx)(S.Trigger,{ref:n,className:s,...r,children:(0,M.jsxs)(io.Slottable,{children:[e,t&&(0,M.jsx)("div",{className:"cocso-accordion-chevron",children:(0,M.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,M.jsx)("path",{d:"m6 9 6 6 6-6"})})})]})})}),$o=(0,z.forwardRef)(({className:o,...e},t)=>{let r=c("cocso-accordion-content",{},[],o);return(0,M.jsx)(S.Content,{ref:t,className:r,...e})}),_o=Object.assign(S.Root,{Item:zo,Header:S.Header,Trigger:jo,Content:$o});var ao=g(require("react"),1),co=require("@radix-ui/react-slot");function y(o){if(o)return o.includes(".")?`var(--color-${o.replace(/\./g,"-")})`:o}var so={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function R(o){if(o)return o in so?so[o]:o}var mo=require("react/jsx-runtime"),Uo=ao.forwardRef(({asChild:o=!1,size:e="md",color:t,weight:r="normal",className:n,style:s,...a},m)=>{let l=c("cocso-body",{size:e},[],n);return(0,mo.jsx)(o?co.Slot:"p",{ref:m,className:l,style:{"--cocso-body-color":y(t),"--cocso-body-weight":R(r),...s},...a})}),B=Object.assign(Uo,{displayName:"Body"});var A=g(require("react"),1),po=require("@radix-ui/react-slot");var lo=g(require("react"),1);var E=require("react/jsx-runtime"),Vo=["div"],Go=lo.forwardRef(({as:o=Vo[0],size:e="md",color:t="palette.primary-500",bg:r="palette.gray-200",className:n,style:s,...a},m)=>{let p=o,d=c("cocso-spinner",{size:e},[],n);return(0,E.jsx)(p,{ref:m,className:d,style:{"--cocso-spinner-bg":y(r),"--cocso-spinner-color":y(t),...s},...a,children:(0,E.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,E.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),(0,E.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"})]})})}),Q=Object.assign(Go,{displayName:"Spinner"});var X=require("react/jsx-runtime"),Ko=o=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[o],Zo=A.forwardRef(({asChild:o=!1,variant:e="primary",size:t="md",disabled:r=!1,loading:n=!1,color:s,weight:a="normal",className:m,style:p,children:l,onClick:d,onKeyDown:f,...N},W)=>{let P=r||n,x=A.useCallback(T=>{if(P){T.preventDefault();return}d?.(T)},[P,d]),G=A.useCallback(T=>{(T.key==="Enter"||T.key===" ")&&(T.preventDefault(),P||T.currentTarget.click()),f?.(T)},[P,f]),K={variant:e,size:t,loading:n,disabled:P},Z=[...r?[{variant:e,disabled:r}]:[],...n?[{variant:e,loading:n}]:[]],q=c("cocso-button",K,Z,m),J={"--cocso-button-color":y(s),"--cocso-button-weight":R(a),...p};return(0,X.jsx)(o?po.Slot:"button",{ref:W,className:q,onClick:x,onKeyDown:G,role:"button",disabled:P,"aria-disabled":P,"aria-busy":n,style:J,...N,children:n?(0,X.jsx)(Q,{className:"cocso-button-spinner",size:Ko(t),color:"currentColor"}):l})}),qo=Object.assign(Zo,{displayName:"Button"});var fo=g(require("react"),1),ho=require("@radix-ui/react-slot");var go=require("react/jsx-runtime"),Jo=fo.forwardRef(({asChild:o=!1,size:e="md",color:t,weight:r="bold",className:n,style:s,...a},m)=>{let l=c("cocso-display",{size:e},[],n);return(0,go.jsx)(o?ho.Slot:"h1",{ref:m,className:l,style:{"--cocso-display-color":y(t),"--cocso-display-weight":R(r),...s},...a})}),Qo=Object.assign(Jo,{displayName:"Display"});var bo=g(require("react"),1),u=require("react");var uo=g(require("react"),1),Co=require("@radix-ui/react-slot");var vo=require("react/jsx-runtime"),Xo=uo.forwardRef(({asChild:o=!1,size:e="md",color:t="text.basic",weight:r="normal",className:n,style:s,...a},m)=>{let l=c("cocso-label",{size:e},[],n);return(0,vo.jsx)(o?Co.Slot:"label",{ref:m,className:l,style:{"--cocso-label-color":y(t),"--cocso-label-weight":R(r),...s},...a})}),F=Object.assign(Xo,{displayName:"Label"});var h=require("react/jsx-runtime"),Yo=bo.forwardRef(({maxFiles:o=2,files:e,onFilesChange:t,onRemove:r,multiple:n=!0,accept:s,...a},m)=>{let[p,l]=(0,u.useState)(!1),d=(0,u.useRef)(null),f=(0,u.useRef)(null),N=3*1024*1024,W=(0,u.useCallback)(i=>s?s.split(",").map(w=>w.trim()).some(w=>{if(w.endsWith("/*")){let H=w.slice(0,-2);return i.type.startsWith(H)}return i.type===w||i.name.toLowerCase().endsWith(w)}):!0,[s]),P=(0,u.useCallback)(i=>i.size>N?(alert(`${i.name}\uC740(\uB294) 3MB\uB97C \uCD08\uACFC\uD569\uB2C8\uB2E4.`),!1):!0,[]),x=(0,u.useCallback)(i=>{let w=Array.from(i).filter(D=>W(D)?P(D):(alert(`${D.name}\uC740(\uB294) \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD0C0\uC785\uC785\uB2C8\uB2E4.`),!1));if(w.length===0)return;let H=o-e.length;if(H<=0){alert(`\uCD5C\uB300 ${o}\uAC1C\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);return}let Mo=w.slice(0,H).map(D=>({file:D,name:D.name,size:D.size}));t([...e,...Mo])},[e,o,t,W,P]),G=(0,u.useCallback)(i=>{i.preventDefault(),i.stopPropagation(),l(!0)},[]),K=(0,u.useCallback)(i=>{i.preventDefault(),i.stopPropagation(),f.current&&!f.current.contains(i.relatedTarget)&&l(!1)},[]),Z=(0,u.useCallback)(i=>{i.preventDefault(),i.stopPropagation()},[]),q=(0,u.useCallback)(i=>{i.preventDefault(),i.stopPropagation(),l(!1);let{files:L}=i.dataTransfer;L&&x(L)},[x]),J=(0,u.useCallback)(i=>{let{files:L}=i.target;L&&x(L)},[x]),to=(0,u.useCallback)(i=>{let L=e.filter(w=>w.name!==i);t(L),r?.(i)},[e,t,r]),T=(0,u.useCallback)(()=>{d.current?.click()},[]),ro=e.length>=o||!n&&e.length>=1;return(0,h.jsxs)("div",{className:"cocso-file-upload-wrapper",children:[!ro&&(0,h.jsxs)("div",{ref:f,onDragEnter:G,onDragOver:Z,onDragLeave:K,onDrop:q,onClick:T,className:"cocso-file-upload","data-drag-active":p,children:[(0,h.jsx)("input",{ref:i=>{d.current=i,typeof m=="function"?m(i):m&&(m.current=i)},type:"file",onChange:J,multiple:n,accept:s,style:{display:"none"},...a}),(0,h.jsxs)(F,{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",(0,h.jsx)("br",{}),"(\uCD5C\uB300 3MB)"]}),(0,h.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,h.jsx)("path",{d:"M5 12h14"}),(0,h.jsx)("path",{d:"M12 5v14"})]})]}),e.length>0&&(0,h.jsx)("div",{className:"cocso-file-upload-list",children:e.map(i=>(0,h.jsxs)("div",{className:"cocso-file-upload-item",children:[(0,h.jsx)(B,{size:"xs",children:i.name}),(0,h.jsx)("button",{type:"button",onClick:()=>to(i.name),className:"cocso-file-upload-remove",children:(0,h.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,h.jsx)("path",{d:"M18 6 6 18"}),(0,h.jsx)("path",{d:"m6 6 12 12"})]})})]},i.name))})]})}),oe=Object.assign(Yo,{displayName:"FileUpload"});var Po=g(require("react"),1),yo=require("@radix-ui/react-slot");var Ro=require("react/jsx-runtime"),ee=Po.forwardRef(({asChild:o=!1,size:e="md",color:t,weight:r="bold",className:n,style:s,...a},m)=>{let l=c("cocso-heading",{size:e},[],n);return(0,Ro.jsx)(o?yo.Slot:"h2",{ref:m,className:l,style:{"--cocso-heading-color":y(t),"--cocso-heading-weight":R(r),...s},...a})}),Y=Object.assign(ee,{displayName:"Heading"});var xo=g(require("react"),1),wo=require("@radix-ui/react-slot");var ko=require("react/jsx-runtime"),te=xo.forwardRef(({asChild:o=!1,size:e="md",weight:t="normal",indicator:r=!0,className:n,style:s,...a},m)=>{let l=c("cocso-link",{size:e,indicator:r},[],n);return(0,ko.jsx)(o?wo.Slot:"a",{ref:m,className:l,style:{"--cocso-link-weight":R(t),...s},...a})}),re=Object.assign(te,{displayName:"Link"});var C=g(require("@radix-ui/react-dialog"),1),j=require("react");var b=require("react/jsx-runtime"),ne=(0,j.forwardRef)(({className:o,children:e,...t},r)=>{let n=c("cocso-modal-content",{},[],o);return(0,b.jsxs)(C.Portal,{children:[(0,b.jsx)(C.Overlay,{className:"cocso-modal-overlay"}),(0,b.jsxs)(C.Content,{ref:r,className:n,...t,children:[(0,b.jsx)("div",{className:"cocso-modal-close-wrapper",children:(0,b.jsx)(C.Close,{className:"cocso-modal-close",children:(0,b.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,b.jsx)("path",{d:"M18 6 6 18"}),(0,b.jsx)("path",{d:"m6 6 12 12"})]})})}),e]})]})}),ie=(0,j.forwardRef)(({className:o,children:e,...t},r)=>{let n=c("cocso-modal-title",{},[],o);return(0,b.jsx)(C.Title,{ref:r,className:n,asChild:!0,...t,children:(0,b.jsx)(Y,{color:"text.basic",children:e})})}),se=(0,j.forwardRef)(({className:o,children:e,...t},r)=>{let n=c("cocso-modal-description",{},[],o);return(0,b.jsx)(C.Description,{ref:r,className:n,asChild:!0,...t,children:(0,b.jsx)(B,{size:"sm",color:"text.subtle",children:e})})}),ae=Object.assign(C.Root,{Trigger:C.Trigger,Content:ne,Title:ie,Description:se});var $=g(require("@radix-ui/react-one-time-password-field"),1),oo=require("react");var eo=require("react/jsx-runtime"),ce=(0,oo.forwardRef)(({className:o,...e},t)=>{let r=c("cocso-otp",{},[],o);return(0,eo.jsx)($.Root,{ref:t,className:r,...e})}),me=(0,oo.forwardRef)(({className:o,...e},t)=>{let r=c("cocso-otp-input",{},[],o);return(0,eo.jsx)($.Input,{ref:t,className:r,...e})}),le=Object.assign(ce,{Input:me});var No=g(require("react"),1),To=require("@radix-ui/react-slot"),v=require("react/jsx-runtime"),pe=No.forwardRef(({asChild:o=!1,page:e,totalPages:t,maxVisible:r=5,onChange:n,className:s,...a},m)=>{let p=Math.ceil(r/2),l=f=>(0,v.jsx)("button",{className:"cocso-pagination-item",onClick:()=>n(f),"data-active":e===f,children:f},f);return(0,v.jsxs)(o?To.Slot:"div",{ref:m,className:`cocso-pagination ${s||""}`,...a,children:[t>1&&(0,v.jsx)("button",{className:"cocso-pagination-arrow",disabled:e===1,onClick:()=>e>1&&n(e-1),children:(0,v.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,v.jsx)("path",{d:"m15 18-6-6 6-6"})})}),t<=r+2?Array(t).fill(0).map((f,N)=>l(N+1)):(0,v.jsxs)(v.Fragment,{children:[l(1),e>1+p&&(0,v.jsx)("span",{className:"cocso-pagination-trunc",children:"..."}),Array(r).fill(0).map((f,N)=>{let W=e-p+N+1;return W>1&&W<t?l(W):""}),e<t-p&&(0,v.jsx)("span",{className:"cocso-pagination-trunc",children:"..."}),l(t)]}),t>1&&(0,v.jsx)("button",{className:"cocso-pagination-arrow",disabled:e===t,onClick:()=>e<t&&n(e+1),children:(0,v.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,v.jsx)("path",{d:"m9 18 6-6-6-6"})})})]})}),de=Object.assign(pe,{displayName:"Pagination"});var So=g(require("react"),1),_=g(require("@radix-ui/react-checkbox"),1);var k=require("react/jsx-runtime"),fe=So.forwardRef(({id:o,size:e="md",status:t,onChange:r,label:n,disabled:s=!1,className:a,...m},p)=>{let l={size:e,disabled:s,status:t},d=[...s?[{status:t,disabled:s}]:[]],f=c("cocso-checkbox",l,d,a),N=P=>{if(!s){let x;P===!0?x="on":P==="indeterminate"?x="intermediate":x="off",r(x)}};return(0,k.jsxs)("div",{className:"cocso-checkbox-wrapper",children:[(0,k.jsxs)(_.Root,{ref:p,id:o,className:f,checked:(()=>{switch(t){case"on":return!0;case"intermediate":return"indeterminate";case"off":default:return!1}})(),onCheckedChange:N,disabled:s,...m,children:[(0,k.jsx)(_.Indicator,{className:"cocso-checkbox-indicator",style:{opacity:t==="on"?1:0},children:(0,k.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,k.jsx)("path",{d:"M20 6 9 17l-5-5"})})}),(0,k.jsx)("div",{className:"cocso-checkbox-indicator",style:{opacity:t==="intermediate"?1:0},children:(0,k.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,k.jsx)("path",{d:"M5 12h14"})})})]}),n&&(0,k.jsx)(F,{className:c("cocso-checkbox-label",{disabled:s}),size:e,htmlFor:o,children:n})]})}),he=Object.assign(fe,{displayName:"Checkbox"});var Wo=g(require("react"),1),Lo=require("@radix-ui/react-slot"),U=g(require("@radix-ui/react-switch"),1);var O=require("react/jsx-runtime"),ge=Wo.forwardRef(({asChild:o=!1,id:e,size:t="md",disabled:r=!1,label:n,position:s="right",className:a,children:m,...p},l)=>{let d=c("cocso-switch",{size:t,disabled:r},[],a),f=c("cocso-switch-thumb",{size:t});return(0,O.jsxs)(o?Lo.Slot:"div",{className:"cocso-switch-wrapper",children:[s==="left"&&(0,O.jsx)(F,{size:t,htmlFor:e,children:n}),(0,O.jsx)(U.Root,{ref:l,className:d,...p,children:(0,O.jsx)(U.Thumb,{className:f})}),s==="right"&&(0,O.jsx)(F,{size:t,htmlFor:e,children:n})]})}),ue=Object.assign(ge,{displayName:"Switch"});var V=require("sonner"),Ce=Object.assign(V.Toaster,{displayName:"Toast"});

package/lib/index.d.ts

@@ -1,4 +1,15 @@
-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/Pagination';
+export * from './components/Checkbox';
+export * from './components/Spinner';
+export * from './components/Switch';
+export * from './components/Toast';

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,...s}=r;return y(a?R:t,{...s,ref:n})});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")};import*as d from"react";import{jsx as g}from"react/jsx-runtime";function x(t){if(t)return`var(--color-${t.replace(".","-")})`}var C=({as:t="p",size:o="md",color:r="",fontWeight:n="normal",style:a,className:s,...i},p)=>{let l=t,h=`text-body text-body-${o}${n==="bold"?"-bold":""} ${s}`;return g(l,{ref:p,className:h,style:{"--text-color":x(r),...a},...i})},u=d.forwardRef(C);u.displayName="Body";import*as c from"react";import{jsx as T}from"react/jsx-runtime";function E(t){if(t)return`var(--color-${t.replace(".","-")})`}var P=c.forwardRef(({as:t="h1",size:o="md",color:r="",style:n,className:a,...s},i)=>{let p=t,l=`text-display text-display-${o} ${a}`;return T(p,{ref:i,className:l,style:{"--text-color":E(r),...n},...s})});P.displayName="Display";import*as f from"react";import{jsx as B}from"react/jsx-runtime";function b(t){if(t)return`var(--color-${t.replace(".","-")})`}var v=f.forwardRef(({as:t="h2",size:o="md",color:r="",style:n,className:a,...s},i)=>{let p=t,l=`text-heading text-heading-${o} ${a}`;return B(p,{ref:i,className:l,style:{"--text-color":b(r),...n},...s})});v.displayName="Heading";export{u as Body,P as Display,v as Heading,W as Primitive,e as createPrimitive};
+import*as R from"@radix-ui/react-accordion";import{forwardRef as G}from"react";var bo=(...e)=>e.filter(Boolean).join(" ").trim(),c=(e,o,t=[],...r)=>{let n=Object.entries(o).filter(([,a])=>a!==!1&&a!==null&&a!==void 0).map(([a,m])=>`${e}--${a}_${m}`).join(" "),s=t.filter(a=>Object.entries(a).every(([m,p])=>o[m]===p)).map(a=>{let m=Object.entries(a).map(([p,l])=>`${p}_${l}`).join("-");return`${e}--${m}`}).join(" ");return bo(e,n,s,...r)};import{Slottable as Po}from"@radix-ui/react-slot";import{jsx as F,jsxs as wo}from"react/jsx-runtime";var yo=G(({className:e,...o},t)=>{let r=c("cocso-accordion-item",{},[],e);return F(R.Item,{ref:t,className:r,...o})}),Ro=G(({className:e,children:o,chevron:t=!0,...r},n)=>{let s=c("cocso-accordion-trigger",{},[],e);return F(R.Trigger,{ref:n,className:s,...r,children:wo(Po,{children:[o,t&&F("div",{className:"cocso-accordion-chevron",children:F("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:F("path",{d:"m6 9 6 6 6-6"})})})]})})}),xo=G(({className:e,...o},t)=>{let r=c("cocso-accordion-content",{},[],e);return F(R.Content,{ref:t,className:r,...o})}),fe=Object.assign(R.Root,{Item:yo,Header:R.Header,Trigger:Ro,Content:xo});import*as Y from"react";import{Slot as ko}from"@radix-ui/react-slot";function u(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var X={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function C(e){if(e)return e in X?X[e]:e}import{jsx as To}from"react/jsx-runtime";var No=Y.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="normal",className:n,style:s,...a},m)=>{let l=c("cocso-body",{size:o},[],n);return To(e?ko:"p",{ref:m,className:l,style:{"--cocso-body-color":u(t),"--cocso-body-weight":C(r),...s},...a})}),B=Object.assign(No,{displayName:"Body"});import*as O from"react";import{Slot as Mo}from"@radix-ui/react-slot";import*as oo from"react";import{jsx as K,jsxs as Lo}from"react/jsx-runtime";var So=["div"],Wo=oo.forwardRef(({as:e=So[0],size:o="md",color:t="palette.primary-500",bg:r="palette.gray-200",className:n,style:s,...a},m)=>{let p=e,d=c("cocso-spinner",{size:o},[],n);return K(p,{ref:m,className:d,style:{"--cocso-spinner-bg":u(r),"--cocso-spinner-color":u(t),...s},...a,children:Lo("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[K("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),K("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"})]})})}),eo=Object.assign(Wo,{displayName:"Spinner"});import{jsx as to}from"react/jsx-runtime";var Fo=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],Do=O.forwardRef(({asChild:e=!1,variant:o="primary",size:t="md",disabled:r=!1,loading:n=!1,color:s,weight:a="normal",className:m,style:p,children:l,onClick:d,onKeyDown:f,...P},w)=>{let g=r||n,v=O.useCallback(y=>{if(g){y.preventDefault();return}d?.(y)},[g,d]),j=O.useCallback(y=>{(y.key==="Enter"||y.key===" ")&&(y.preventDefault(),g||y.currentTarget.click()),f?.(y)},[g,f]),$={variant:o,size:t,loading:n,disabled:g},_=[...r?[{variant:o,disabled:r}]:[],...n?[{variant:o,loading:n}]:[]],U=c("cocso-button",$,_,m),V={"--cocso-button-color":u(s),"--cocso-button-weight":C(a),...p};return to(e?Mo:"button",{ref:w,className:U,onClick:v,onKeyDown:j,role:"button",disabled:g,"aria-disabled":g,"aria-busy":n,style:V,...P,children:n?to(eo,{className:"cocso-button-spinner",size:Fo(t),color:"currentColor"}):l})}),Be=Object.assign(Do,{displayName:"Button"});import*as ro from"react";import{Slot as Oo}from"@radix-ui/react-slot";import{jsx as Bo}from"react/jsx-runtime";var Eo=ro.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:n,style:s,...a},m)=>{let l=c("cocso-display",{size:o},[],n);return Bo(e?Oo:"h1",{ref:m,className:l,style:{"--cocso-display-color":u(t),"--cocso-display-weight":C(r),...s},...a})}),Ue=Object.assign(Eo,{displayName:"Display"});import*as so from"react";import{useRef as io,useState as zo,useCallback as x}from"react";import*as no from"react";import{Slot as Ao}from"@radix-ui/react-slot";import{jsx as Io}from"react/jsx-runtime";var Ho=no.forwardRef(({asChild:e=!1,size:o="md",color:t="text.basic",weight:r="normal",className:n,style:s,...a},m)=>{let l=c("cocso-label",{size:o},[],n);return Io(e?Ao:"label",{ref:m,className:l,style:{"--cocso-label-color":u(t),"--cocso-label-weight":C(r),...s},...a})}),L=Object.assign(Ho,{displayName:"Label"});import{jsx as N,jsxs as D}from"react/jsx-runtime";var jo=so.forwardRef(({maxFiles:e=2,files:o,onFilesChange:t,onRemove:r,multiple:n=!0,accept:s,...a},m)=>{let[p,l]=zo(!1),d=io(null),f=io(null),P=3*1024*1024,w=x(i=>s?s.split(",").map(b=>b.trim()).some(b=>{if(b.endsWith("/*")){let E=b.slice(0,-2);return i.type.startsWith(E)}return i.type===b||i.name.toLowerCase().endsWith(b)}):!0,[s]),g=x(i=>i.size>P?(alert(`${i.name}\uC740(\uB294) 3MB\uB97C \uCD08\uACFC\uD569\uB2C8\uB2E4.`),!1):!0,[]),v=x(i=>{let b=Array.from(i).filter(W=>w(W)?g(W):(alert(`${W.name}\uC740(\uB294) \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD0C0\uC785\uC785\uB2C8\uB2E4.`),!1));if(b.length===0)return;let E=e-o.length;if(E<=0){alert(`\uCD5C\uB300 ${e}\uAC1C\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);return}let vo=b.slice(0,E).map(W=>({file:W,name:W.name,size:W.size}));t([...o,...vo])},[o,e,t,w,g]),j=x(i=>{i.preventDefault(),i.stopPropagation(),l(!0)},[]),$=x(i=>{i.preventDefault(),i.stopPropagation(),f.current&&!f.current.contains(i.relatedTarget)&&l(!1)},[]),_=x(i=>{i.preventDefault(),i.stopPropagation()},[]),U=x(i=>{i.preventDefault(),i.stopPropagation(),l(!1);let{files:k}=i.dataTransfer;k&&v(k)},[v]),V=x(i=>{let{files:k}=i.target;k&&v(k)},[v]),J=x(i=>{let k=o.filter(b=>b.name!==i);t(k),r?.(i)},[o,t,r]),y=x(()=>{d.current?.click()},[]),Q=o.length>=e||!n&&o.length>=1;return D("div",{className:"cocso-file-upload-wrapper",children:[!Q&&D("div",{ref:f,onDragEnter:j,onDragOver:_,onDragLeave:$,onDrop:U,onClick:y,className:"cocso-file-upload","data-drag-active":p,children:[N("input",{ref:i=>{d.current=i,typeof m=="function"?m(i):m&&(m.current=i)},type:"file",onChange:V,multiple:n,accept:s,style:{display:"none"},...a}),D(L,{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",N("br",{}),"(\uCD5C\uB300 3MB)"]}),D("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:[N("path",{d:"M5 12h14"}),N("path",{d:"M12 5v14"})]})]}),o.length>0&&N("div",{className:"cocso-file-upload-list",children:o.map(i=>D("div",{className:"cocso-file-upload-item",children:[N(B,{size:"xs",children:i.name}),N("button",{type:"button",onClick:()=>J(i.name),className:"cocso-file-upload-remove",children:D("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:[N("path",{d:"M18 6 6 18"}),N("path",{d:"m6 6 12 12"})]})})]},i.name))})]})}),it=Object.assign(jo,{displayName:"FileUpload"});import*as ao from"react";import{Slot as $o}from"@radix-ui/react-slot";import{jsx as Uo}from"react/jsx-runtime";var _o=ao.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:n,style:s,...a},m)=>{let l=c("cocso-heading",{size:o},[],n);return Uo(e?$o:"h2",{ref:m,className:l,style:{"--cocso-heading-color":u(t),"--cocso-heading-weight":C(r),...s},...a})}),co=Object.assign(_o,{displayName:"Heading"});import*as mo from"react";import{Slot as Vo}from"@radix-ui/react-slot";import{jsx as Ko}from"react/jsx-runtime";var Go=mo.forwardRef(({asChild:e=!1,size:o="md",weight:t="normal",indicator:r=!0,className:n,style:s,...a},m)=>{let l=c("cocso-link",{size:o,indicator:r},[],n);return Ko(e?Vo:"a",{ref:m,className:l,style:{"--cocso-link-weight":C(t),...s},...a})}),Pt=Object.assign(Go,{displayName:"Link"});import*as h from"@radix-ui/react-dialog";import{forwardRef as q}from"react";import{jsx as T,jsxs as Z}from"react/jsx-runtime";var Zo=q(({className:e,children:o,...t},r)=>{let n=c("cocso-modal-content",{},[],e);return Z(h.Portal,{children:[T(h.Overlay,{className:"cocso-modal-overlay"}),Z(h.Content,{ref:r,className:n,...t,children:[T("div",{className:"cocso-modal-close-wrapper",children:T(h.Close,{className:"cocso-modal-close",children:Z("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:"M18 6 6 18"}),T("path",{d:"m6 6 12 12"})]})})}),o]})]})}),qo=q(({className:e,children:o,...t},r)=>{let n=c("cocso-modal-title",{},[],e);return T(h.Title,{ref:r,className:n,asChild:!0,...t,children:T(co,{color:"text.basic",children:o})})}),Jo=q(({className:e,children:o,...t},r)=>{let n=c("cocso-modal-description",{},[],e);return T(h.Description,{ref:r,className:n,asChild:!0,...t,children:T(B,{size:"sm",color:"text.subtle",children:o})})}),Mt=Object.assign(h.Root,{Trigger:h.Trigger,Content:Zo,Title:qo,Description:Jo});import*as A from"@radix-ui/react-one-time-password-field";import{forwardRef as lo}from"react";import{jsx as po}from"react/jsx-runtime";var Qo=lo(({className:e,...o},t)=>{let r=c("cocso-otp",{},[],e);return po(A.Root,{ref:t,className:r,...o})}),Xo=lo(({className:e,...o},t)=>{let r=c("cocso-otp-input",{},[],e);return po(A.Input,{ref:t,className:r,...o})}),zt=Object.assign(Qo,{Input:Xo});import*as ho from"react";import{Slot as Yo}from"@radix-ui/react-slot";import{Fragment as ee,jsx as S,jsxs as fo}from"react/jsx-runtime";var oe=ho.forwardRef(({asChild:e=!1,page:o,totalPages:t,maxVisible:r=5,onChange:n,className:s,...a},m)=>{let p=Math.ceil(r/2),l=f=>S("button",{className:"cocso-pagination-item",onClick:()=>n(f),"data-active":o===f,children:f},f);return fo(e?Yo:"div",{ref:m,className:`cocso-pagination ${s||""}`,...a,children:[t>1&&S("button",{className:"cocso-pagination-arrow",disabled:o===1,onClick:()=>o>1&&n(o-1),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:S("path",{d:"m15 18-6-6 6-6"})})}),t<=r+2?Array(t).fill(0).map((f,P)=>l(P+1)):fo(ee,{children:[l(1),o>1+p&&S("span",{className:"cocso-pagination-trunc",children:"..."}),Array(r).fill(0).map((f,P)=>{let w=o-p+P+1;return w>1&&w<t?l(w):""}),o<t-p&&S("span",{className:"cocso-pagination-trunc",children:"..."}),l(t)]}),t>1&&S("button",{className:"cocso-pagination-arrow",disabled:o===t,onClick:()=>o<t&&n(o+1),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:S("path",{d:"m9 18 6-6-6-6"})})})]})}),Gt=Object.assign(oe,{displayName:"Pagination"});import*as uo from"react";import*as H from"@radix-ui/react-checkbox";import{jsx as M,jsxs as go}from"react/jsx-runtime";var te=uo.forwardRef(({id:e,size:o="md",status:t,onChange:r,label:n,disabled:s=!1,className:a,...m},p)=>{let l={size:o,disabled:s,status:t},d=[...s?[{status:t,disabled:s}]:[]],f=c("cocso-checkbox",l,d,a),P=g=>{if(!s){let v;g===!0?v="on":g==="indeterminate"?v="intermediate":v="off",r(v)}};return go("div",{className:"cocso-checkbox-wrapper",children:[go(H.Root,{ref:p,id:e,className:f,checked:(()=>{switch(t){case"on":return!0;case"intermediate":return"indeterminate";case"off":default:return!1}})(),onCheckedChange:P,disabled:s,...m,children:[M(H.Indicator,{className:"cocso-checkbox-indicator",style:{opacity:t==="on"?1:0},children:M("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:M("path",{d:"M20 6 9 17l-5-5"})})}),M("div",{className:"cocso-checkbox-indicator",style:{opacity:t==="intermediate"?1:0},children:M("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:M("path",{d:"M5 12h14"})})})]}),n&&M(L,{className:c("cocso-checkbox-label",{disabled:s}),size:o,htmlFor:e,children:n})]})}),Yt=Object.assign(te,{displayName:"Checkbox"});import*as Co from"react";import{Slot as re}from"@radix-ui/react-slot";import*as z from"@radix-ui/react-switch";import{jsx as I,jsxs as ie}from"react/jsx-runtime";var ne=Co.forwardRef(({asChild:e=!1,id:o,size:t="md",disabled:r=!1,label:n,position:s="right",className:a,children:m,...p},l)=>{let d=c("cocso-switch",{size:t,disabled:r},[],a),f=c("cocso-switch-thumb",{size:t});return ie(e?re:"div",{className:"cocso-switch-wrapper",children:[s==="left"&&I(L,{size:t,htmlFor:o,children:n}),I(z.Root,{ref:l,className:d,...p,children:I(z.Thumb,{className:f})}),s==="right"&&I(L,{size:t,htmlFor:o,children:n})]})}),ar=Object.assign(ne,{displayName:"Switch"});import{Toaster as se,toast as fr}from"sonner";var hr=Object.assign(se,{displayName:"Toast"});export{fe as Accordion,B as Body,Be as Button,Yt as Checkbox,Ue as Display,it as FileUpload,co as Heading,L as Label,Pt as Link,Mt as Modal,zt as OneTimePasswordField,Gt as Pagination,eo as Spinner,ar as Switch,hr as Toaster,fr as toast};

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.4",
+  "version": "0.0.1-beta.41",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",
@@ -25,17 +25,23 @@
     "lib"
   ],
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.3"
+    "@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",
+    "@radix-ui/react-switch": "^1.2.5",
+    "sonner": "^2.0.6"
   },
   "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 };