@cocso-ui/react 0.0.1-beta.15 → 0.0.1-beta.16

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

@@ -1,15 +1,16 @@
 import * as React from 'react';
 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];
-export type BodyProps<T extends Element = Default> = {
-    as?: T;
+export type BodyProps = {
+    asChild?: boolean;
     size?: 'lg' | 'md' | 'sm' | 'xs';
     color?: string;
     weight?: FontWeightToken;
-} & React.ComponentPropsWithoutRef<T>;
-export declare const Body: React.ForwardRefExoticComponent<BodyProps<"p" | "a" | "span" | "div" | "label" | "li" | "td" | "th" | "figcaption" | "blockquote" | "cite"> & React.RefAttributes<HTMLElement>> & {
+} & 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

@@ -1,19 +1,16 @@
 import * as React from 'react';
 import { type FontWeightToken } from '../../utils/token';
-declare const tags: readonly ["button"];
-type Element = (typeof tags)[number];
-type Default = (typeof tags)[0];
-export type ButtonProps<T extends Element = Default> = {
-    as?: T;
+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<T>;
+} & React.ComponentPropsWithoutRef<'button'>;
 export declare const Button: React.ForwardRefExoticComponent<{
-    as?: "button" | undefined;
+    asChild?: boolean;
     variant?: "primary" | "secondary" | "tertiary" | "danger" | "success" | "text";
     size?: "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
     disabled?: boolean;
@@ -23,4 +20,3 @@ export declare const Button: React.ForwardRefExoticComponent<{
 } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
     displayName: string;
 };
-export {};

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

@@ -1,20 +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;
+    id?: string;
     size?: 'lg' | 'md' | 'sm';
     status: CheckboxStatus;
     onChange: (next: CheckboxStatus) => void;
     label?: string;
     disabled?: boolean;
-} & Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>;
+} & Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange'>;
 export declare const Checkbox: React.ForwardRefExoticComponent<{
-    id: string;
+    id?: string;
     size?: "lg" | "md" | "sm";
     status: CheckboxStatus;
     onChange: (next: CheckboxStatus) => void;
     label?: string;
     disabled?: boolean;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "id"> & React.RefAttributes<HTMLDivElement>> & {
+} & Omit<Omit<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "checked" | "onCheckedChange"> & React.RefAttributes<never>> & {
     displayName: string;
 };

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

@@ -1,20 +1,16 @@
 import * as React from 'react';
 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];
-export type DisplayProps<T extends Element = Default> = {
-    as?: T;
+export type DisplayProps = {
+    asChild?: boolean;
     size?: 'lg' | 'md' | 'sm';
     color?: string;
     weight?: FontWeightToken;
-} & React.ComponentPropsWithoutRef<T>;
+} & React.ComponentPropsWithoutRef<'h1'>;
 export declare const Display: React.ForwardRefExoticComponent<{
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    asChild?: boolean;
     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,20 +1,16 @@
 import * as React from 'react';
 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];
-export type HeadingProps<T extends Element = Default> = {
-    as?: T;
+export type HeadingProps = {
+    asChild?: boolean;
     size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
     color?: string;
     weight?: FontWeightToken;
-} & React.ComponentPropsWithoutRef<T>;
+} & React.ComponentPropsWithoutRef<'h2'>;
 export declare const Heading: React.ForwardRefExoticComponent<{
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    asChild?: boolean;
     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/Label/Label.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { type FontWeightToken } from '../../utils/token';
-declare const tags: readonly ["label", "p", "a", "span", "div", "li", "td", "th", "figcaption", "blockquote", "cite"];
-type Element = (typeof tags)[number];
-type Default = (typeof tags)[0];
-export type LabelProps<T extends Element = Default> = {
-    as?: T;
+export type LabelProps = {
+    asChild?: boolean;
     size?: 'lg' | 'md' | 'sm' | 'xs';
     color?: string;
     weight?: FontWeightToken;
-} & React.ComponentPropsWithoutRef<T>;
-export declare const Label: React.ForwardRefExoticComponent<LabelProps<"p" | "a" | "span" | "div" | "label" | "li" | "td" | "th" | "figcaption" | "blockquote" | "cite"> & React.RefAttributes<HTMLElement>> & {
+} & 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;
 };
-export {};

package/lib/index.cjs

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

package/lib/index.js

@@ -1 +1 @@
-import*as d from"@radix-ui/react-accordion";var ie=Object.assign(d.Root,{Item:d.Item,Header:d.Header,Trigger:d.Trigger,Content:d.Content});import*as E from"react";function m(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var v={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 v?v[e]:e}var $=(...e)=>e.filter(Boolean).join(" ").trim(),l=(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,f])=>`${i}_${f}`).join("-");return`${e}--${a}`}).join(" ");return $(e,n,s,...c)};import{jsx as I}from"react/jsx-runtime";var K=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],_=E.forwardRef(({as:e=K[0],size:r="md",color:t,weight:c="normal",className:n,style:s,...o},a)=>{let i=e,p=l("cocso-body",{size:r},[],n);return I(i,{ref:a,className:p,style:{"--cocso-body-color":m(t),"--cocso-body-weight":g(c),...s},...o})}),ye=Object.assign(_,{displayName:"Body"});import*as C from"react";import*as P from"react";import{jsx as R,jsxs as G}from"react/jsx-runtime";var V=["div"],q=P.forwardRef(({as:e=V[0],size:r="md",color:t="palette.primary-500",bg:c="palette.gray-200",className:n,style:s,...o},a)=>{let i=e,p=l("cocso-spinner",{size:r},[],n);return R(i,{ref:a,className:p,style:{"--cocso-spinner-bg":m(c),"--cocso-spinner-color":m(t),...s},...o,children:G("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[R("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),R("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"})]})})}),w=Object.assign(q,{displayName:"Spinner"});import{jsx as N}from"react/jsx-runtime";var J=["button"],Q=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],U=C.forwardRef(({as:e=J[0],variant:r="primary",size:t="md",disabled:c=!1,loading:n=!1,color:s,weight:o="normal",className:a,style:i,children:f,onClick:p,onKeyDown:T,...b},k)=>{let x=e,u=c||n,L=C.useCallback(h=>{if(u){h.preventDefault();return}p?.(h)},[u,p]),z=C.useCallback(h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),u||h.currentTarget.click()),T?.(h)},[u,T]),H={variant:r,size:t,loading:n,disabled:u},M=[...c?[{variant:r,disabled:c}]:[],...n?[{variant:r,loading:n}]:[]],j=l("cocso-button",H,M,a),A={"--cocso-button-color":m(s),"--cocso-button-weight":g(o),...i};return N(x,{ref:k,className:j,onClick:L,onKeyDown:z,role:"button",disabled:u,"aria-disabled":u,"aria-busy":n,style:A,...b,children:n?N(w,{className:"cocso-button-spinner",size:Q(t),color:"currentColor"}):f})}),De=Object.assign(U,{displayName:"Button"});import*as W from"react";import{jsx as Z}from"react/jsx-runtime";var X=["h1","h2","h3","h4","h5","h6"],Y=W.forwardRef(({as:e=X[0],size:r="md",color:t,weight:c="bold",className:n,style:s,...o},a)=>{let i=e,p=l("cocso-display",{size:r},[],n);return Z(i,{ref:a,className:p,style:{"--cocso-display-color":m(t),"--cocso-display-weight":g(c),...s},...o})}),He=Object.assign(Y,{displayName:"Display"});import*as D from"react";import{jsx as oe}from"react/jsx-runtime";var ee=["h1","h2","h3","h4","h5","h6"],te=D.forwardRef(({as:e=ee[1],size:r="md",color:t,weight:c="bold",className:n,style:s,...o},a)=>{let i=e,p=l("cocso-heading",{size:r},[],n);return oe(i,{ref:a,className:p,style:{"--cocso-heading-color":m(t),"--cocso-heading-weight":g(c),...s},...o})}),Ie=Object.assign(te,{displayName:"Heading"});import*as S from"react";import{jsx as re}from"react/jsx-runtime";var ne=["label","p","a","span","div","li","td","th","figcaption","blockquote","cite"],se=S.forwardRef(({as:e=ne[0],size:r="md",color:t,weight:c="normal",className:n,style:s,...o},a)=>{let i=e,p=l("cocso-label",{size:r},[],n);return re(i,{ref:a,className:p,style:{"--cocso-label-color":m(t),"--cocso-label-weight":g(c),...s},...o})}),F=Object.assign(se,{displayName:"Label"});import*as O from"react";import{jsx as y,jsxs as B}from"react/jsx-runtime";var ae=O.forwardRef(({id:e,size:r="md",status:t,onChange:c,label:n,disabled:s=!1,className:o,...a},i)=>{let f={size:r,disabled:s,status:t},p=[...s?[{status:t,disabled:s}]:[]],T=l("cocso-checkbox-inner",f,p,o),b=()=>{s||c(t==="on"?"off":"on")};return B("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:x=>{(x.key==="Enter"||x.key===" ")&&(x.preventDefault(),b())},...a,children:[B("div",{className:T,onClick:b,children:[y("div",{className:"cocso-checkbox-icon",style:{opacity:t==="on"?1:0},children:y("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:y("path",{d:"M20 6 9 17l-5-5"})})}),y("div",{className:"cocso-checkbox-icon",style:{opacity:t==="intermediate"?1:0},children:y("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:y("path",{d:"M5 12h14"})})}),y("input",{type:"checkbox",id:e,checked:t==="on",onChange:b,disabled:s})]}),n&&y(F,{className:l("cocso-checkbox-label",f),htmlFor:e,size:r,children:n})]})}),nt=Object.assign(ae,{displayName:"Checkbox"});export{ie as Accordion,ye as Body,De as Button,nt as Checkbox,He as Display,Ie as Heading,F as Label,w as Spinner};
+import*as g from"@radix-ui/react-accordion";var me=Object.assign(g.Root,{Item:g.Item,Header:g.Header,Trigger:g.Trigger,Content:g.Content});import*as N from"react";import{Slot as I}from"@radix-ui/react-slot";function p(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 h(e){if(e)return e in w?w[e]:e}var $=(...e)=>e.filter(Boolean).join(" ").trim(),m=(e,r,s=[],...i)=>{let t=Object.entries(r).filter(([,o])=>o!==!1&&o!==null&&o!==void 0).map(([o,a])=>`${e}--${o}_${a}`).join(" "),n=s.filter(o=>Object.entries(o).every(([a,l])=>r[a]===l)).map(o=>{let a=Object.entries(o).map(([l,c])=>`${l}_${c}`).join("-");return`${e}--${a}`}).join(" ");return $(e,t,n,...i)};import{jsx as V}from"react/jsx-runtime";var _=N.forwardRef(({asChild:e=!1,size:r="md",color:s,weight:i="normal",className:t,style:n,...o},a)=>{let c=m("cocso-body",{size:r},[],t);return V(e?I:"p",{ref:a,className:c,style:{"--cocso-body-color":p(s),"--cocso-body-weight":h(i),...n},...o})}),ue=Object.assign(_,{displayName:"Body"});import*as b from"react";import{Slot as J}from"@radix-ui/react-slot";import*as S from"react";import{jsx as P,jsxs as q}from"react/jsx-runtime";var G=["div"],K=S.forwardRef(({as:e=G[0],size:r="md",color:s="palette.primary-500",bg:i="palette.gray-200",className:t,style:n,...o},a)=>{let l=e,d=m("cocso-spinner",{size:r},[],t);return P(l,{ref:a,className:d,style:{"--cocso-spinner-bg":p(i),"--cocso-spinner-color":p(s),...n},...o,children:q("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[P("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),P("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"})]})})}),T=Object.assign(K,{displayName:"Spinner"});import{jsx as W}from"react/jsx-runtime";var Q=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],U=b.forwardRef(({asChild:e=!1,variant:r="primary",size:s="md",disabled:i=!1,loading:t=!1,color:n,weight:o="normal",className:a,style:l,children:c,onClick:d,onKeyDown:y,...k},v)=>{let f=i||t,u=b.useCallback(C=>{if(f){C.preventDefault();return}d?.(C)},[f,d]),M=b.useCallback(C=>{(C.key==="Enter"||C.key===" ")&&(C.preventDefault(),f||C.currentTarget.click()),y?.(C)},[f,y]),z={variant:r,size:s,loading:t,disabled:f},D=[...i?[{variant:r,disabled:i}]:[],...t?[{variant:r,loading:t}]:[]],j=m("cocso-button",z,D,a),A={"--cocso-button-color":p(n),"--cocso-button-weight":h(o),...l};return W(e?J:"button",{ref:v,className:j,onClick:u,onKeyDown:M,role:"button",disabled:f,"aria-disabled":f,"aria-busy":t,style:A,...k,children:t?W(T,{className:"cocso-button-spinner",size:Q(s),color:"currentColor"}):c})}),Le=Object.assign(U,{displayName:"Button"});import*as E from"react";import{Slot as X}from"@radix-ui/react-slot";import{jsx as Z}from"react/jsx-runtime";var Y=E.forwardRef(({asChild:e=!1,size:r="md",color:s,weight:i="bold",className:t,style:n,...o},a)=>{let c=m("cocso-display",{size:r},[],t);return Z(e?X:"h1",{ref:a,className:c,style:{"--cocso-display-color":p(s),"--cocso-display-weight":h(i),...n},...o})}),$e=Object.assign(Y,{displayName:"Display"});import*as F from"react";import{Slot as ee}from"@radix-ui/react-slot";import{jsx as te}from"react/jsx-runtime";var oe=F.forwardRef(({asChild:e=!1,size:r="md",color:s,weight:i="bold",className:t,style:n,...o},a)=>{let c=m("cocso-heading",{size:r},[],t);return te(e?ee:"h2",{ref:a,className:c,style:{"--cocso-heading-color":p(s),"--cocso-heading-weight":h(i),...n},...o})}),Qe=Object.assign(oe,{displayName:"Heading"});import*as B from"react";import{Slot as re}from"@radix-ui/react-slot";import{jsx as ne}from"react/jsx-runtime";var se=B.forwardRef(({asChild:e=!1,size:r="md",color:s,weight:i="normal",className:t,style:n,...o},a)=>{let c=m("cocso-label",{size:r},[],t);return ne(e?re:"label",{ref:a,className:c,style:{"--cocso-label-color":p(s),"--cocso-label-weight":h(i),...n},...o})}),L=Object.assign(se,{displayName:"Label"});import*as O from"react";import*as R from"@radix-ui/react-checkbox";import{jsx as x,jsxs as H}from"react/jsx-runtime";var ae=O.forwardRef(({id:e,size:r="md",status:s,onChange:i,label:t,disabled:n=!1,className:o,...a},l)=>{let c={size:r,disabled:n,status:s},d=[...n?[{status:s,disabled:n}]:[]],y=m("cocso-checkbox",c,d,o),k=f=>{if(!n){let u;f===!0?u="on":f==="indeterminate"?u="intermediate":u="off",i(u)}};return H("div",{className:"cocso-checkbox-wrapper",children:[H(R.Root,{ref:l,id:e,className:y,checked:(()=>{switch(s){case"on":return!0;case"intermediate":return"indeterminate";case"off":default:return!1}})(),onCheckedChange:k,disabled:n,...a,children:[x(R.Indicator,{className:"cocso-checkbox-indicator",style:{opacity:s==="on"?1:0},children:x("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:x("path",{d:"M20 6 9 17l-5-5"})})}),x("div",{className:"cocso-checkbox-indicator",style:{opacity:s==="intermediate"?1:0},children:x("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:x("path",{d:"M5 12h14"})})})]}),t&&x(L,{className:m("cocso-checkbox-label",c),size:r,htmlFor:e,children:t})]})}),mo=Object.assign(ae,{displayName:"Checkbox"});export{me as Accordion,ue as Body,Le as Button,mo as Checkbox,$e as Display,Qe as Heading,L as Label,T as Spinner};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocso-ui/react",
-  "version": "0.0.1-beta.15",
+  "version": "0.0.1-beta.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",
@@ -25,7 +25,9 @@
     "lib"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.11"
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.3"
   },
   "peerDependencies": {
     "react": "^19.1.0",