@cocso-ui/react 0.0.1-beta.10 → 0.0.1-beta.12

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type FontWeightToken } from '../../utils/tokens';
+import { type FontWeightToken } from '../../utils/token';
 declare const tags: readonly ["p", "a", "span", "div", "label", "li", "td", "th", "figcaption", "blockquote", "cite"];
 type Element = (typeof tags)[number];
 type Default = (typeof tags)[0];
@@ -7,8 +7,8 @@ export type BodyProps<T extends Element = Default> = {
     as?: T;
     size?: 'lg' | 'md' | 'sm' | 'xs';
     color?: string;
-    fontWeight?: FontWeightToken;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<T>;
 export declare const Body: (<T extends Element = "p">(props: BodyProps<T> & {
     ref?: React.ForwardedRef<React.ComponentRef<T>>;
 }) => React.ReactElement) & {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type FontWeightToken } from '../../utils/tokens';
+import { type FontWeightToken } from '../../utils/token';
 declare const tags: readonly ["button"];
 type Element = (typeof tags)[number];
 type Default = (typeof tags)[0];
@@ -10,11 +10,17 @@ export type ButtonProps<T extends Element = Default> = {
     disabled?: boolean;
     loading?: boolean;
     color?: string;
-    fontWeight?: FontWeightToken;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
-export declare const Button: (<T extends Element = "button">(props: ButtonProps<T> & {
-    ref?: React.ForwardedRef<React.ComponentRef<T>>;
-}) => React.ReactElement) & {
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<T>;
+export declare const Button: React.ForwardRefExoticComponent<{
+    as?: "button" | undefined;
+    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;
 };
 export {};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export type CheckboxStatus = 'on' | 'off' | 'intermediate';
+export type CheckboxProps = {
+    id: string;
+    size?: 'md' | 'lg';
+    status: CheckboxStatus;
+    onChange: (next: CheckboxStatus) => void;
+    label?: string;
+    disabled?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>;
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    id: string;
+    size?: "md" | "lg";
+    status: CheckboxStatus;
+    onChange: (next: CheckboxStatus) => void;
+    label?: string;
+    disabled?: boolean;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "id"> & React.RefAttributes<HTMLDivElement>> & {
+    displayName: string;
+};

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type FontWeightToken } from '../../utils/tokens';
+import { type FontWeightToken } from '../../utils/token';
 declare const tags: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 type Element = (typeof tags)[number];
 type Default = (typeof tags)[0];
@@ -7,11 +7,14 @@ export type DisplayProps<T extends Element = Default> = {
     as?: T;
     size?: 'lg' | 'md' | 'sm';
     color?: string;
-    fontWeight?: FontWeightToken;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
-export declare const Display: (<T extends Element = "h1">(props: DisplayProps<T> & {
-    ref?: React.ForwardedRef<React.ComponentRef<T>>;
-}) => React.ReactElement) & {
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<T>;
+export declare const Display: React.ForwardRefExoticComponent<{
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    size?: "lg" | "md" | "sm";
+    color?: string;
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>> & {
     displayName: string;
 };
 export {};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type FontWeightToken } from '../../utils/tokens';
+import { type FontWeightToken } from '../../utils/token';
 declare const tags: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 type Element = (typeof tags)[number];
 type Default = (typeof tags)[1];
@@ -7,11 +7,14 @@ export type HeadingProps<T extends Element = Default> = {
     as?: T;
     size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
     color?: string;
-    fontWeight?: FontWeightToken;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
-export declare const Heading: (<T extends Element = "h2">(props: HeadingProps<T> & {
-    ref?: React.ForwardedRef<React.ComponentRef<T>>;
-}) => React.ReactElement) & {
+    weight?: FontWeightToken;
+} & React.ComponentPropsWithoutRef<T>;
+export declare const Heading: React.ForwardRefExoticComponent<{
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    size?: "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
+    color?: string;
+    weight?: FontWeightToken;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>> & {
     displayName: string;
 };
 export {};

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

@@ -8,9 +8,12 @@ export type SpinnerProps<T extends Element = Default> = {
     color?: string;
     bg?: string;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
-export declare const Spinner: (<T extends Element = "div">(props: SpinnerProps<T> & {
-    ref?: React.ForwardedRef<React.ComponentRef<T>>;
-}) => React.ReactElement) & {
+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/index.cjs

@@ -1 +1 @@
-"use strict";var L=Object.create;var h=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var n in t)h(e,n,{get:t[n],enumerable:!0})},E=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of G(t))!K.call(e,o)&&o!==n&&h(e,o,{get:()=>t[o],enumerable:!(r=A(t,o))||r.enumerable});return e};var y=(e,t,n)=>(n=e!=null?L(I(e)):{},E(t||!e||!e.__esModule?h(n,"default",{value:e,enumerable:!0}):n,e)),q=e=>E(h({},"__esModule",{value:!0}),e);var le={};V(le,{Body:()=>X,Button:()=>oe,Display:()=>re,Heading:()=>ie,Spinner:()=>x});module.exports=q(le);var D=y(require("react"),1);function l(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var W={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function d(e){if(e)return e in W?W[e]:e}var J=(...e)=>e.filter(Boolean).join(" ").trim(),m=(e,t,n=[],...r)=>{let o=Object.entries(t).filter(([,s])=>s!==!1&&s!==null&&s!==void 0).map(([s,a])=>`${e}--${s}_${a}`).join(" "),i=n.filter(s=>Object.entries(s).every(([a,c])=>t[a]===c)).map(s=>{let a=Object.entries(s).map(([c,R])=>`${c}_${R}`).join("-");return`${e}--${a}`}).join(" ");return J(e,o,i,...r)};var F=require("react/jsx-runtime"),Q=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],U=D.forwardRef(({as:e=Q[0],size:t="md",color:n,fontWeight:r="normal",className:o,style:i,...s},a)=>{let c=e,p=m("cocso-body",{size:t},[],o);return(0,F.jsx)(c,{ref:a,className:p,style:{"--cocso-body-color":l(n),"--cocso-body-weight":d(r),...i},...s})}),X=Object.assign(U,{displayName:"Body"});var T=y(require("react"),1);var P=y(require("react"),1);var u=require("react/jsx-runtime"),Y=["div"],Z=P.forwardRef(({as:e=Y[0],size:t="md",color:n="palette.primary-500",bg:r="palette.gray-200",className:o,style:i,...s},a)=>{let c=e,p=m("cocso-spinner",{size:t},[],o);return(0,u.jsx)(c,{ref:a,className:p,style:{"--cocso-spinner-bg":l(r),"--cocso-spinner-color":l(n),...i},...s,children:(0,u.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,u.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),(0,u.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"})]})})}),x=Object.assign(Z,{displayName:"Spinner"});var C=require("react/jsx-runtime"),ee=["button"],te=T.forwardRef(({as:e=ee[0],variant:t="primary",size:n="md",disabled:r=!1,loading:o=!1,color:i,fontWeight:s="normal",className:a,style:c,children:R,onClick:p,onKeyDown:b,...k},v)=>{let O=e,g=r||o,z={"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"},H=T.useCallback(f=>{if(g){f.preventDefault();return}p?.(f)},[g,p]),$=T.useCallback(f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),g||f.currentTarget.click()),b?.(f)},[g,b]),j={variant:t,size:n,loading:o,disabled:g},M=[...r?[{variant:t,disabled:r}]:[],...o?[{variant:t,loading:o}]:[]],_=m("cocso-button",j,M,a);return(0,C.jsx)(O,{ref:v,className:_,onClick:H,onKeyDown:$,role:"button",disabled:g,"aria-disabled":g,"aria-busy":o,style:{"--cocso-button-color":l(i),"--cocso-button-weight":d(s),...c},...k,children:o?(0,C.jsx)(x,{className:"cocso-button-spinner",size:z[n],color:"currentColor"}):R})}),oe=Object.assign(te,{displayName:"Button"});var N=y(require("react"),1);var w=require("react/jsx-runtime"),ne=["h1","h2","h3","h4","h5","h6"],se=N.forwardRef(({as:e=ne[0],size:t="md",color:n,fontWeight:r="bold",className:o,style:i,...s},a)=>{let c=e,p=m("cocso-display",{size:t},[],o);return(0,w.jsx)(c,{ref:a,className:p,style:{"--cocso-display-color":l(n),"--cocso-display-weight":d(r),...i},...s})}),re=Object.assign(se,{displayName:"Display"});var S=y(require("react"),1);var B=require("react/jsx-runtime"),ae=["h1","h2","h3","h4","h5","h6"],ce=S.forwardRef(({as:e=ae[1],size:t="md",color:n,fontWeight:r="bold",className:o,style:i,...s},a)=>{let c=e,p=m("cocso-heading",{size:t},[],o);return(0,B.jsx)(c,{ref:a,className:p,style:{"--cocso-heading-color":l(n),"--cocso-heading-weight":d(r),...i},...s})}),ie=Object.assign(ce,{displayName:"Heading"});
+"use strict";var I=Object.create;var k=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var t in o)k(e,t,{get:o[t],enumerable:!0})},N=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of A(o))!q.call(e,n)&&n!==t&&k(e,n,{get:()=>o[n],enumerable:!(a=V(o,n))||a.enumerable});return e};var x=(e,o,t)=>(t=e!=null?I(G(e)):{},N(o||!e||!e.__esModule?k(t,"default",{value:e,enumerable:!0}):t,e)),Q=e=>N(k({},"__esModule",{value:!0}),e);var ge={};J(ge,{Body:()=>Z,Button:()=>re,Checkbox:()=>fe,Display:()=>ie,Heading:()=>me,Spinner:()=>E});module.exports=Q(ge);var D=x(require("react"),1);function d(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var P={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 P?P[e]:e}var U=(...e)=>e.filter(Boolean).join(" ").trim(),p=(e,o,t=[],...a)=>{let n=Object.entries(o).filter(([,s])=>s!==!1&&s!==null&&s!==void 0).map(([s,c])=>`${e}--${s}_${c}`).join(" "),r=t.filter(s=>Object.entries(s).every(([c,i])=>o[c]===i)).map(s=>{let c=Object.entries(s).map(([i,f])=>`${i}_${f}`).join("-");return`${e}--${c}`}).join(" ");return U(e,n,r,...a)};var W=require("react/jsx-runtime"),X=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],Y=D.forwardRef(({as:e=X[0],size:o="md",color:t,weight:a="normal",className:n,style:r,...s},c)=>{let i=e,l=p("cocso-body",{size:o},[],n);return(0,W.jsx)(i,{ref:c,className:l,style:{"--cocso-body-color":d(t),"--cocso-body-weight":u(a),...r},...s})}),Z=Object.assign(Y,{displayName:"Body"});var C=x(require("react"),1);var S=x(require("react"),1);var R=require("react/jsx-runtime"),ee=["div"],te=S.forwardRef(({as:e=ee[0],size:o="md",color:t="palette.primary-500",bg:a="palette.gray-200",className:n,style:r,...s},c)=>{let i=e,l=p("cocso-spinner",{size:o},[],n);return(0,R.jsx)(i,{ref:c,className:l,style:{"--cocso-spinner-bg":d(a),"--cocso-spinner-color":d(t),...r},...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"})]})})}),E=Object.assign(te,{displayName:"Spinner"});var w=require("react/jsx-runtime"),oe=["button"],ne=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],se=C.forwardRef(({as:e=oe[0],variant:o="primary",size:t="md",disabled:a=!1,loading:n=!1,color:r,weight:s="normal",className:c,style:i,children:f,onClick:l,onKeyDown:T,...b},v)=>{let y=e,h=a||n,H=C.useCallback(g=>{if(h){g.preventDefault();return}l?.(g)},[h,l]),j=C.useCallback(g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),h||g.currentTarget.click()),T?.(g)},[h,T]),$={variant:o,size:t,loading:n,disabled:h},K=[...a?[{variant:o,disabled:a}]:[],...n?[{variant:o,loading:n}]:[]],_=p("cocso-button",$,K,c),L={"--cocso-button-color":d(r),"--cocso-button-weight":u(s),...i};return(0,w.jsx)(y,{ref:v,className:_,onClick:H,onKeyDown:j,role:"button",disabled:h,"aria-disabled":h,"aria-busy":n,style:L,...b,children:n?(0,w.jsx)(E,{className:"cocso-button-spinner",size:ne(t),color:"currentColor"}):f})}),re=Object.assign(se,{displayName:"Button"});var B=x(require("react"),1);var F=require("react/jsx-runtime"),ae=["h1","h2","h3","h4","h5","h6"],ce=B.forwardRef(({as:e=ae[0],size:o="md",color:t,weight:a="bold",className:n,style:r,...s},c)=>{let i=e,l=p("cocso-display",{size:o},[],n);return(0,F.jsx)(i,{ref:c,className:l,style:{"--cocso-display-color":d(t),"--cocso-display-weight":u(a),...r},...s})}),ie=Object.assign(ce,{displayName:"Display"});var O=x(require("react"),1);var z=require("react/jsx-runtime"),le=["h1","h2","h3","h4","h5","h6"],pe=O.forwardRef(({as:e=le[1],size:o="md",color:t,weight:a="bold",className:n,style:r,...s},c)=>{let i=e,l=p("cocso-heading",{size:o},[],n);return(0,z.jsx)(i,{ref:c,className:l,style:{"--cocso-heading-color":d(t),"--cocso-heading-weight":u(a),...r},...s})}),me=Object.assign(pe,{displayName:"Heading"});var M=x(require("react"),1);var m=require("react/jsx-runtime"),de=M.forwardRef(({id:e,size:o="md",status:t,onChange:a,label:n,disabled:r=!1,className:s,...c},i)=>{let f={size:o,disabled:r,status:t},l=[...r?[{status:t,disabled:r}]:[]],T=p("cocso-checkbox-inner",f,l,s),b=()=>{r||a(t==="on"?"off":"on")};return(0,m.jsxs)("div",{ref:i,className:"cocso-checkbox",tabIndex:r?-1:0,role:"checkbox","aria-checked":t==="on"?"true":t==="intermediate"?"mixed":"false","aria-disabled":r,onKeyDown:y=>{(y.key==="Enter"||y.key===" ")&&(y.preventDefault(),b())},...c,children:[(0,m.jsxs)("div",{className:T,onClick:b,children:[(0,m.jsx)("div",{className:"cocso-checkbox-icon",style:{opacity:t==="on"?1:0},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","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-check-icon lucide-check",children:(0,m.jsx)("path",{d:"M20 6 9 17l-5-5"})})}),(0,m.jsx)("div",{className:"cocso-checkbox-icon",style:{opacity:t==="intermediate"?1:0},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","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-minus-icon lucide-minus",children:(0,m.jsx)("path",{d:"M5 12h14"})})}),(0,m.jsx)("input",{type:"checkbox",id:e,checked:t==="on",onChange:b,disabled:r})]}),n&&(0,m.jsx)("label",{htmlFor:e,children:n})]})}),fe=Object.assign(de,{displayName:"Checkbox"});

package/lib/index.d.ts

@@ -2,4 +2,5 @@ export * from './components/Body';
 export * from './components/Button';
 export * from './components/Display';
 export * from './components/Heading';
+export * from './components/Checkbox';
 export * from './components/Spinner';

package/lib/index.js

@@ -1 +1 @@
-import*as x from"react";function l(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var h={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function d(e){if(e)return e in h?h[e]:e}var z=(...e)=>e.filter(Boolean).join(" ").trim(),m=(e,s,c=[],...r)=>{let o=Object.entries(s).filter(([,t])=>t!==!1&&t!==null&&t!==void 0).map(([t,n])=>`${e}--${t}_${n}`).join(" "),i=c.filter(t=>Object.entries(t).every(([n,a])=>s[n]===a)).map(t=>{let n=Object.entries(t).map(([a,R])=>`${a}_${R}`).join("-");return`${e}--${n}`}).join(" ");return z(e,o,i,...r)};import{jsx as j}from"react/jsx-runtime";var H=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],$=x.forwardRef(({as:e=H[0],size:s="md",color:c,fontWeight:r="normal",className:o,style:i,...t},n)=>{let a=e,p=m("cocso-body",{size:s},[],o);return j(a,{ref:n,className:p,style:{"--cocso-body-color":l(c),"--cocso-body-weight":d(r),...i},...t})}),ee=Object.assign($,{displayName:"Body"});import*as u from"react";import*as C from"react";import{jsx as y,jsxs as L}from"react/jsx-runtime";var M=["div"],_=C.forwardRef(({as:e=M[0],size:s="md",color:c="palette.primary-500",bg:r="palette.gray-200",className:o,style:i,...t},n)=>{let a=e,p=m("cocso-spinner",{size:s},[],o);return y(a,{ref:n,className:p,style:{"--cocso-spinner-bg":l(r),"--cocso-spinner-color":l(c),...i},...t,children:L("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[y("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),y("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"})]})})}),b=Object.assign(_,{displayName:"Spinner"});import{jsx as E}from"react/jsx-runtime";var A=["button"],G=u.forwardRef(({as:e=A[0],variant:s="primary",size:c="md",disabled:r=!1,loading:o=!1,color:i,fontWeight:t="normal",className:n,style:a,children:R,onClick:p,onKeyDown:T,...F},P)=>{let N=e,g=r||o,w={"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"},S=u.useCallback(f=>{if(g){f.preventDefault();return}p?.(f)},[g,p]),B=u.useCallback(f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),g||f.currentTarget.click()),T?.(f)},[g,T]),k={variant:s,size:c,loading:o,disabled:g},v=[...r?[{variant:s,disabled:r}]:[],...o?[{variant:s,loading:o}]:[]],O=m("cocso-button",k,v,n);return E(N,{ref:P,className:O,onClick:S,onKeyDown:B,role:"button",disabled:g,"aria-disabled":g,"aria-busy":o,style:{"--cocso-button-color":l(i),"--cocso-button-weight":d(t),...a},...F,children:o?E(b,{className:"cocso-button-spinner",size:w[c],color:"currentColor"}):R})}),Re=Object.assign(G,{displayName:"Button"});import*as W from"react";import{jsx as V}from"react/jsx-runtime";var I=["h1","h2","h3","h4","h5","h6"],K=W.forwardRef(({as:e=I[0],size:s="md",color:c,fontWeight:r="bold",className:o,style:i,...t},n)=>{let a=e,p=m("cocso-display",{size:s},[],o);return V(a,{ref:n,className:p,style:{"--cocso-display-color":l(c),"--cocso-display-weight":d(r),...i},...t})}),Ce=Object.assign(K,{displayName:"Display"});import*as D from"react";import{jsx as Q}from"react/jsx-runtime";var q=["h1","h2","h3","h4","h5","h6"],J=D.forwardRef(({as:e=q[1],size:s="md",color:c,fontWeight:r="bold",className:o,style:i,...t},n)=>{let a=e,p=m("cocso-heading",{size:s},[],o);return Q(a,{ref:n,className:p,style:{"--cocso-heading-color":l(c),"--cocso-heading-weight":d(r),...i},...t})}),Ne=Object.assign(J,{displayName:"Heading"});export{ee as Body,Re as Button,Ce as Display,Ne as Heading,b as Spinner};
+import*as E from"react";function m(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var k={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function g(e){if(e)return e in k?k[e]:e}var j=(...e)=>e.filter(Boolean).join(" ").trim(),p=(e,r,t=[],...c)=>{let n=Object.entries(r).filter(([,o])=>o!==!1&&o!==null&&o!==void 0).map(([o,a])=>`${e}--${o}_${a}`).join(" "),s=t.filter(o=>Object.entries(o).every(([a,i])=>r[a]===i)).map(o=>{let a=Object.entries(o).map(([i,d])=>`${i}_${d}`).join("-");return`${e}--${a}`}).join(" ");return j(e,n,s,...c)};import{jsx as _}from"react/jsx-runtime";var $=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],K=E.forwardRef(({as:e=$[0],size:r="md",color:t,weight:c="normal",className:n,style:s,...o},a)=>{let i=e,l=p("cocso-body",{size:r},[],n);return _(i,{ref:a,className:l,style:{"--cocso-body-color":m(t),"--cocso-body-weight":g(c),...s},...o})}),ae=Object.assign(K,{displayName:"Body"});import*as R from"react";import*as w from"react";import{jsx as C,jsxs as V}from"react/jsx-runtime";var L=["div"],I=w.forwardRef(({as:e=L[0],size:r="md",color:t="palette.primary-500",bg:c="palette.gray-200",className:n,style:s,...o},a)=>{let i=e,l=p("cocso-spinner",{size:r},[],n);return C(i,{ref:a,className:l,style:{"--cocso-spinner-bg":m(c),"--cocso-spinner-color":m(t),...s},...o,children:V("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[C("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),C("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"})]})})}),v=Object.assign(I,{displayName:"Spinner"});import{jsx as N}from"react/jsx-runtime";var A=["button"],G=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],q=R.forwardRef(({as:e=A[0],variant:r="primary",size:t="md",disabled:c=!1,loading:n=!1,color:s,weight:o="normal",className:a,style:i,children:d,onClick:l,onKeyDown:b,...x},T)=>{let y=e,h=c||n,B=R.useCallback(f=>{if(h){f.preventDefault();return}l?.(f)},[h,l]),F=R.useCallback(f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),h||f.currentTarget.click()),b?.(f)},[h,b]),O={variant:r,size:t,loading:n,disabled:h},z=[...c?[{variant:r,disabled:c}]:[],...n?[{variant:r,loading:n}]:[]],M=p("cocso-button",O,z,a),H={"--cocso-button-color":m(s),"--cocso-button-weight":g(o),...i};return N(y,{ref:T,className:M,onClick:B,onKeyDown:F,role:"button",disabled:h,"aria-disabled":h,"aria-busy":n,style:H,...x,children:n?N(v,{className:"cocso-button-spinner",size:G(t),color:"currentColor"}):d})}),be=Object.assign(q,{displayName:"Button"});import*as P from"react";import{jsx as U}from"react/jsx-runtime";var J=["h1","h2","h3","h4","h5","h6"],Q=P.forwardRef(({as:e=J[0],size:r="md",color:t,weight:c="bold",className:n,style:s,...o},a)=>{let i=e,l=p("cocso-display",{size:r},[],n);return U(i,{ref:a,className:l,style:{"--cocso-display-color":m(t),"--cocso-display-weight":g(c),...s},...o})}),Ne=Object.assign(Q,{displayName:"Display"});import*as D from"react";import{jsx as Z}from"react/jsx-runtime";var X=["h1","h2","h3","h4","h5","h6"],Y=D.forwardRef(({as:e=X[1],size:r="md",color:t,weight:c="bold",className:n,style:s,...o},a)=>{let i=e,l=p("cocso-heading",{size:r},[],n);return Z(i,{ref:a,className:l,style:{"--cocso-heading-color":m(t),"--cocso-heading-weight":g(c),...s},...o})}),Oe=Object.assign(Y,{displayName:"Heading"});import*as S from"react";import{jsx as u,jsxs as W}from"react/jsx-runtime";var ee=S.forwardRef(({id:e,size:r="md",status:t,onChange:c,label:n,disabled:s=!1,className:o,...a},i)=>{let d={size:r,disabled:s,status:t},l=[...s?[{status:t,disabled:s}]:[]],b=p("cocso-checkbox-inner",d,l,o),x=()=>{s||c(t==="on"?"off":"on")};return W("div",{ref:i,className:"cocso-checkbox",tabIndex:s?-1:0,role:"checkbox","aria-checked":t==="on"?"true":t==="intermediate"?"mixed":"false","aria-disabled":s,onKeyDown:y=>{(y.key==="Enter"||y.key===" ")&&(y.preventDefault(),x())},...a,children:[W("div",{className:b,onClick:x,children:[u("div",{className:"cocso-checkbox-icon",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","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-check-icon lucide-check",children:u("path",{d:"M20 6 9 17l-5-5"})})}),u("div",{className:"cocso-checkbox-icon",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","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-minus-icon lucide-minus",children:u("path",{d:"M5 12h14"})})}),u("input",{type:"checkbox",id:e,checked:t==="on",onChange:x,disabled:s})]}),n&&u("label",{htmlFor:e,children:n})]})}),Ke=Object.assign(ee,{displayName:"Checkbox"});export{ae as Body,be as Button,Ke as Checkbox,Ne as Display,Oe as Heading,v as Spinner};

package/lib/utils/polymorphic.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type AsProp<T extends React.ElementType> = {
+    as?: T;
+};
+export type PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];
+export type PolymorphicComponentProps<T extends React.ElementType, Props = {}> = AsProp<T> & React.ComponentPropsWithoutRef<T> & Props & {
+    ref?: PolymorphicRef<T>;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocso-ui/react",
-  "version": "0.0.1-beta.10",
+  "version": "0.0.1-beta.12",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",
@@ -24,7 +24,9 @@
   "files": [
     "lib"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.2"
+  },
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"