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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocso-ui/react",
-  "version": "0.0.1-beta.15",
+  "version": "0.0.1-beta.17",
   "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",