@cocso-ui/react 0.0.1-beta.2 → 0.0.1-beta.20

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

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

@@ -1,11 +1,16 @@
 import * as React from 'react';
+import { type FontWeightToken } from '../../utils/token';
 export type HeadingProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    asChild?: boolean;
     size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
     color?: string;
-} & React.HTMLAttributes<HTMLHeadingElement>;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<'h2'>;
 export declare const Heading: React.ForwardRefExoticComponent<{
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    asChild?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
     color?: string;
-} & React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+    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/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 v=Object.create;var d=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var L=(t,o)=>{for(var r in o)d(t,r,{get:o[r],enumerable:!0})},c=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of N(o))!B.call(t,a)&&a!==r&&d(t,a,{get:()=>o[a],enumerable:!(n=$(o,a))||n.enumerable});return t};var m=(t,o,r)=>(r=t!=null?v(W(t)):{},c(o||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),M=t=>c(d({},"__esModule",{value:!0}),t);var A={};L(A,{Body:()=>x,Display:()=>P,Heading:()=>E,Primitive:()=>S,createPrimitive:()=>e});module.exports=M(A);var f=require("@radix-ui/react-slot"),h=m(require("react"),1),y=require("react/jsx-runtime");function e(t){let o=h.forwardRef((r,n)=>{let{asChild:a,...i}=r;return(0,y.jsx)(a?f.Slot:t,{...i,ref:n})});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 R=m(require("react"),1),u=require("react/jsx-runtime");function w(t){if(t)return`var(--color-${t.replace(".","-")})`}var x=R.forwardRef(({as:t="p",size:o="md",color:r="",fontWeight:n="normal",style:a,className:i,...s},p)=>{let l=t,T=`text-body text-body-${o}${n==="bold"?"-bold":""} ${i}`;return(0,u.jsx)(l,{ref:p,className:T,style:{"--text-color":w(r),...a},...s})});x.displayName="Body";var g=m(require("react"),1),b=require("react/jsx-runtime");function z(t){if(t)return`var(--color-${t.replace(".","-")})`}var P=g.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(0,b.jsx)(p,{ref:s,className:l,style:{"--text-color":z(r),...n},...i})});P.displayName="Display";var C=m(require("react"),1),H=require("react/jsx-runtime");function D(t){if(t)return`var(--color-${t.replace(".","-")})`}var E=C.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(0,H.jsx)(p,{ref:s,className:l,style:{"--text-color":D(r),...n},...i})});E.displayName="Heading";
+"use strict";var oe=Object.create;var k=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ie=(e,o)=>{for(var t in o)k(e,t,{get:o[t],enumerable:!0})},E=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of re(o))!se.call(e,r)&&r!==t&&k(e,r,{get:()=>o[r],enumerable:!(n=te(o,r))||n.enumerable});return e};var u=(e,o,t)=>(t=e!=null?oe(ne(e)):{},E(o||!e||!e.__esModule?k(t,"default",{value:e,enumerable:!0}):t,e)),ce=e=>E(k({},"__esModule",{value:!0}),e);var we={};ie(we,{Accordion:()=>le,Body:()=>fe,Button:()=>xe,Checkbox:()=>Ne,Display:()=>ye,Heading:()=>ve,Label:()=>L,Spinner:()=>S});module.exports=ce(we);var d=u(require("@radix-ui/react-accordion"),1),N=require("react");var ae=(...e)=>e.filter(Boolean).join(" ").trim(),a=(e,o,t=[],...n)=>{let r=Object.entries(o).filter(([,s])=>s!==!1&&s!==null&&s!==void 0).map(([s,c])=>`${e}--${s}_${c}`).join(" "),i=t.filter(s=>Object.entries(s).every(([c,p])=>o[c]===p)).map(s=>{let c=Object.entries(s).map(([p,m])=>`${p}_${m}`).join("-");return`${e}--${c}`}).join(" ");return ae(e,r,i,...n)};var F=require("@radix-ui/react-slot"),x=require("react/jsx-runtime"),Ae=(0,N.forwardRef)(({className:e,...o},t)=>{let n=a("cocso-accordion-item",{},[],e);return(0,x.jsx)(d.Item,{ref:t,className:n,...o})}),me=(0,N.forwardRef)(({className:e,children:o,chevron:t=!0,...n},r)=>{let i=a("cocso-accordion-trigger",{},[],e);return(0,x.jsxs)(d.Trigger,{ref:r,className:i,...n,children:[(0,x.jsx)(F.Slottable,{children:o}),t&&(0,x.jsx)("div",{className:"cocso-accordion-chevron",children:(0,x.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,x.jsx)("path",{d:"m6 9 6 6 6-6"})})})]})}),pe=(0,N.forwardRef)(({className:e,...o},t)=>{let n=a("cocso-accordion-content",{},[],e);return(0,x.jsx)(d.Content,{ref:t,className:n,...o})}),le=Object.assign(d.Root,{Item:d.Item,Header:d.Header,Trigger:me,Content:pe});var H=u(require("react"),1),O=require("@radix-ui/react-slot");function l(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var A={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 A?A[e]:e}var M=require("react/jsx-runtime"),de=H.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:n="normal",className:r,style:i,...s},c)=>{let m=a("cocso-body",{size:o},[],r);return(0,M.jsx)(e?O.Slot:"p",{ref:c,className:m,style:{"--cocso-body-color":l(t),"--cocso-body-weight":C(n),...i},...s})}),fe=Object.assign(de,{displayName:"Body"});var v=u(require("react"),1),D=require("@radix-ui/react-slot");var z=u(require("react"),1);var R=require("react/jsx-runtime"),ge=["div"],he=z.forwardRef(({as:e=ge[0],size:o="md",color:t="palette.primary-500",bg:n="palette.gray-200",className:r,style:i,...s},c)=>{let p=e,g=a("cocso-spinner",{size:o},[],r);return(0,R.jsx)(p,{ref:c,className:g,style:{"--cocso-spinner-bg":l(n),"--cocso-spinner-color":l(t),...i},...s,children:(0,R.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,R.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),(0,R.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"})]})})}),S=Object.assign(he,{displayName:"Spinner"});var W=require("react/jsx-runtime"),Ce=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],ue=v.forwardRef(({asChild:e=!1,variant:o="primary",size:t="md",disabled:n=!1,loading:r=!1,color:i,weight:s="normal",className:c,style:p,children:m,onClick:g,onKeyDown:P,...T},B)=>{let h=n||r,y=v.useCallback(b=>{if(h){b.preventDefault();return}g?.(b)},[h,g]),U=v.useCallback(b=>{(b.key==="Enter"||b.key===" ")&&(b.preventDefault(),h||b.currentTarget.click()),P?.(b)},[h,P]),X={variant:o,size:t,loading:r,disabled:h},Y=[...n?[{variant:o,disabled:n}]:[],...r?[{variant:o,loading:r}]:[]],Z=a("cocso-button",X,Y,c),ee={"--cocso-button-color":l(i),"--cocso-button-weight":C(s),...p};return(0,W.jsx)(e?D.Slot:"button",{ref:B,className:Z,onClick:y,onKeyDown:U,role:"button",disabled:h,"aria-disabled":h,"aria-busy":r,style:ee,...T,children:r?(0,W.jsx)(S,{className:"cocso-button-spinner",size:Ce(t),color:"currentColor"}):m})}),xe=Object.assign(ue,{displayName:"Button"});var j=u(require("react"),1),I=require("@radix-ui/react-slot");var $=require("react/jsx-runtime"),be=j.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:n="bold",className:r,style:i,...s},c)=>{let m=a("cocso-display",{size:o},[],r);return(0,$.jsx)(e?I.Slot:"h1",{ref:c,className:m,style:{"--cocso-display-color":l(t),"--cocso-display-weight":C(n),...i},...s})}),ye=Object.assign(be,{displayName:"Display"});var _=u(require("react"),1),V=require("@radix-ui/react-slot");var G=require("react/jsx-runtime"),Re=_.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:n="bold",className:r,style:i,...s},c)=>{let m=a("cocso-heading",{size:o},[],r);return(0,G.jsx)(e?V.Slot:"h2",{ref:c,className:m,style:{"--cocso-heading-color":l(t),"--cocso-heading-weight":C(n),...i},...s})}),ve=Object.assign(Re,{displayName:"Heading"});var K=u(require("react"),1),q=require("@radix-ui/react-slot");var J=require("react/jsx-runtime"),Pe=K.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:n="normal",className:r,style:i,...s},c)=>{let m=a("cocso-label",{size:o},[],r);return(0,J.jsx)(e?q.Slot:"label",{ref:c,className:m,style:{"--cocso-label-color":l(t),"--cocso-label-weight":C(n),...i},...s})}),L=Object.assign(Pe,{displayName:"Label"});var Q=u(require("react"),1),w=u(require("@radix-ui/react-checkbox"),1);var f=require("react/jsx-runtime"),ke=Q.forwardRef(({id:e,size:o="md",status:t,onChange:n,label:r,disabled:i=!1,className:s,...c},p)=>{let m={size:o,disabled:i,status:t},g=[...i?[{status:t,disabled:i}]:[]],P=a("cocso-checkbox",m,g,s),T=h=>{if(!i){let y;h===!0?y="on":h==="indeterminate"?y="intermediate":y="off",n(y)}};return(0,f.jsxs)("div",{className:"cocso-checkbox-wrapper",children:[(0,f.jsxs)(w.Root,{ref:p,id:e,className:P,checked:(()=>{switch(t){case"on":return!0;case"intermediate":return"indeterminate";case"off":default:return!1}})(),onCheckedChange:T,disabled:i,...c,children:[(0,f.jsx)(w.Indicator,{className:"cocso-checkbox-indicator",style:{opacity:t==="on"?1:0},children:(0,f.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,f.jsx)("path",{d:"M20 6 9 17l-5-5"})})}),(0,f.jsx)("div",{className:"cocso-checkbox-indicator",style:{opacity:t==="intermediate"?1:0},children:(0,f.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,f.jsx)("path",{d:"M5 12h14"})})})]}),r&&(0,f.jsx)(L,{className:a("cocso-checkbox-label",m),size:o,htmlFor:e,children:r})]})}),Ne=Object.assign(ke,{displayName:"Checkbox"});

package/lib/index.d.ts

@@ -1,4 +1,8 @@
-export * from './primitive';
+export * from './components/Accordion';
 export * from './components/Body';
+export * from './components/Button';
 export * from './components/Display';
 export * from './components/Heading';
+export * from './components/Label';
+export * from './components/Checkbox';
+export * from './components/Spinner';

package/lib/index.js

@@ -1 +1 @@
-import{Slot as y}from"@radix-ui/react-slot";import*as d from"react";import{jsx as R}from"react/jsx-runtime";function e(t){let o=d.forwardRef((r,a)=>{let{asChild:n,...i}=r;return R(n?y:t,{...i,ref:a})});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 m from"react";import{jsx as g}from"react/jsx-runtime";function x(t){if(t)return`var(--color-${t.replace(".","-")})`}var u=m.forwardRef(({as:t="p",size:o="md",color:r="",fontWeight:a="normal",style:n,className:i,...s},p)=>{let l=t,h=`text-body text-body-${o}${a==="bold"?"-bold":""} ${i}`;return g(l,{ref:p,className:h,style:{"--text-color":x(r),...n},...s})});u.displayName="Body";import*as c from"react";import{jsx as C}from"react/jsx-runtime";function P(t){if(t)return`var(--color-${t.replace(".","-")})`}var b=c.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 C(p,{ref:s,className:l,style:{"--text-color":P(r),...a},...i})});b.displayName="Display";import*as f from"react";import{jsx as T}from"react/jsx-runtime";function E(t){if(t)return`var(--color-${t.replace(".","-")})`}var H=f.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 T(p,{ref:s,className:l,style:{"--text-color":E(r),...a},...i})});H.displayName="Heading";export{u as Body,b as Display,H as Heading,$ as Primitive,e as createPrimitive};
+import*as d from"@radix-ui/react-accordion";import{forwardRef as k}from"react";var _=(...e)=>e.filter(Boolean).join(" ").trim(),a=(e,o,t=[],...r)=>{let n=Object.entries(o).filter(([,s])=>s!==!1&&s!==null&&s!==void 0).map(([s,c])=>`${e}--${s}_${c}`).join(" "),i=t.filter(s=>Object.entries(s).every(([c,p])=>o[c]===p)).map(s=>{let c=Object.entries(s).map(([p,m])=>`${p}_${m}`).join("-");return`${e}--${c}`}).join(" ");return _(e,n,i,...r)};import{Slottable as V}from"@radix-ui/react-slot";import{jsx as b,jsxs as q}from"react/jsx-runtime";var Re=k(({className:e,...o},t)=>{let r=a("cocso-accordion-item",{},[],e);return b(d.Item,{ref:t,className:r,...o})}),G=k(({className:e,children:o,chevron:t=!0,...r},n)=>{let i=a("cocso-accordion-trigger",{},[],e);return q(d.Trigger,{ref:n,className:i,...r,children:[b(V,{children:o}),t&&b("div",{className:"cocso-accordion-chevron",children:b("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:"m6 9 6 6 6-6"})})})]})}),K=k(({className:e,...o},t)=>{let r=a("cocso-accordion-content",{},[],e);return b(d.Content,{ref:t,className:r,...o})}),ve=Object.assign(d.Root,{Item:d.Item,Header:d.Header,Trigger:G,Content:K});import*as S from"react";import{Slot as J}from"@radix-ui/react-slot";function l(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var T={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function h(e){if(e)return e in T?T[e]:e}import{jsx as U}from"react/jsx-runtime";var Q=S.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="normal",className:n,style:i,...s},c)=>{let m=a("cocso-body",{size:o},[],n);return U(e?J:"p",{ref:c,className:m,style:{"--cocso-body-color":l(t),"--cocso-body-weight":h(r),...i},...s})}),Be=Object.assign(Q,{displayName:"Body"});import*as y from"react";import{Slot as ee}from"@radix-ui/react-slot";import*as W from"react";import{jsx as N,jsxs as Z}from"react/jsx-runtime";var X=["div"],Y=W.forwardRef(({as:e=X[0],size:o="md",color:t="palette.primary-500",bg:r="palette.gray-200",className:n,style:i,...s},c)=>{let p=e,f=a("cocso-spinner",{size:o},[],n);return N(p,{ref:c,className:f,style:{"--cocso-spinner-bg":l(r),"--cocso-spinner-color":l(t),...i},...s,children:Z("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[N("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),N("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"})]})})}),L=Object.assign(Y,{displayName:"Spinner"});import{jsx as B}from"react/jsx-runtime";var oe=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],te=y.forwardRef(({asChild:e=!1,variant:o="primary",size:t="md",disabled:r=!1,loading:n=!1,color:i,weight:s="normal",className:c,style:p,children:m,onClick:f,onKeyDown:R,...P},w)=>{let g=r||n,x=y.useCallback(C=>{if(g){C.preventDefault();return}f?.(C)},[g,f]),z=y.useCallback(C=>{(C.key==="Enter"||C.key===" ")&&(C.preventDefault(),g||C.currentTarget.click()),R?.(C)},[g,R]),D={variant:o,size:t,loading:n,disabled:g},j=[...r?[{variant:o,disabled:r}]:[],...n?[{variant:o,loading:n}]:[]],I=a("cocso-button",D,j,c),$={"--cocso-button-color":l(i),"--cocso-button-weight":h(s),...p};return B(e?ee:"button",{ref:w,className:I,onClick:x,onKeyDown:z,role:"button",disabled:g,"aria-disabled":g,"aria-busy":n,style:$,...P,children:n?B(L,{className:"cocso-button-spinner",size:oe(t),color:"currentColor"}):m})}),Ke=Object.assign(te,{displayName:"Button"});import*as E from"react";import{Slot as re}from"@radix-ui/react-slot";import{jsx as se}from"react/jsx-runtime";var ne=E.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:n,style:i,...s},c)=>{let m=a("cocso-display",{size:o},[],n);return se(e?re:"h1",{ref:c,className:m,style:{"--cocso-display-color":l(t),"--cocso-display-weight":h(r),...i},...s})}),eo=Object.assign(ne,{displayName:"Display"});import*as F from"react";import{Slot as ie}from"@radix-ui/react-slot";import{jsx as ae}from"react/jsx-runtime";var ce=F.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="bold",className:n,style:i,...s},c)=>{let m=a("cocso-heading",{size:o},[],n);return ae(e?ie:"h2",{ref:c,className:m,style:{"--cocso-heading-color":l(t),"--cocso-heading-weight":h(r),...i},...s})}),ao=Object.assign(ce,{displayName:"Heading"});import*as A from"react";import{Slot as me}from"@radix-ui/react-slot";import{jsx as le}from"react/jsx-runtime";var pe=A.forwardRef(({asChild:e=!1,size:o="md",color:t,weight:r="normal",className:n,style:i,...s},c)=>{let m=a("cocso-label",{size:o},[],n);return le(e?me:"label",{ref:c,className:m,style:{"--cocso-label-color":l(t),"--cocso-label-weight":h(r),...i},...s})}),H=Object.assign(pe,{displayName:"Label"});import*as M from"react";import*as v from"@radix-ui/react-checkbox";import{jsx as u,jsxs as O}from"react/jsx-runtime";var de=M.forwardRef(({id:e,size:o="md",status:t,onChange:r,label:n,disabled:i=!1,className:s,...c},p)=>{let m={size:o,disabled:i,status:t},f=[...i?[{status:t,disabled:i}]:[]],R=a("cocso-checkbox",m,f,s),P=g=>{if(!i){let x;g===!0?x="on":g==="indeterminate"?x="intermediate":x="off",r(x)}};return O("div",{className:"cocso-checkbox-wrapper",children:[O(v.Root,{ref:p,id:e,className:R,checked:(()=>{switch(t){case"on":return!0;case"intermediate":return"indeterminate";case"off":default:return!1}})(),onCheckedChange:P,disabled:i,...c,children:[u(v.Indicator,{className:"cocso-checkbox-indicator",style:{opacity:t==="on"?1:0},children:u("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:u("path",{d:"M20 6 9 17l-5-5"})})}),u("div",{className:"cocso-checkbox-indicator",style:{opacity:t==="intermediate"?1:0},children:u("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:u("path",{d:"M5 12h14"})})})]}),n&&u(H,{className:a("cocso-checkbox-label",m),size:o,htmlFor:e,children:n})]})}),Po=Object.assign(de,{displayName:"Checkbox"});export{ve as Accordion,Be as Body,Ke as Button,Po as Checkbox,eo as Display,ao as Heading,H as Label,L 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.2",
+  "version": "0.0.1-beta.20",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",
@@ -25,17 +25,19 @@
     "lib"
   ],
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-checkbox": "^1.3.2",
     "@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 };