@cocso-ui/react 0.0.0-beta.1 → 0.0.1-beta.10

package/README.md

@@ -0,0 +1,23 @@
+## `@cocso-ui/react`
+
+이 Package는 리액트 기반 컴포넌트를 제공해요.
+
+`radix-ui`의 헤드리스 컴포넌트를 사용하여 접근성과 커스터마이징을 고려한 컴포넌트를 구현하고 있어요.
+
+### Installation
+
+```bash
+pnpm install @cocso-ui/react
+```
+
+### Usage
+
+컴포넌트를 아래와 같은 형태로 import 할 수 있어요.
+
+```javascript
+import {Button} from '@cocso-ui/react';
+```
+
+### Dependencies
+
+- [@cocso-ui/css](../css)

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

@@ -1,11 +1,17 @@
 import * as React from 'react';
-type BodyElement = 'p' | 'span' | 'div' | 'label' | 'li' | 'td' | 'th' | 'figcaption' | 'blockquote' | 'cite';
-export interface BodyProps<T extends React.ElementType = 'p'> {
-    as?: T & BodyElement;
-    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+import { type FontWeightToken } from '../../utils/tokens';
+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;
+    size?: 'lg' | 'md' | 'sm' | 'xs';
     color?: string;
-    fontWeight?: 'normal' | 'bold';
-}
-export type BodyPropsWithElement<T extends React.ElementType = 'p'> = BodyProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof BodyProps<T>>;
-export declare const Body: React.ForwardRefExoticComponent<BodyProps<BodyElement> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> | Omit<React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> | Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> | Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> | Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, keyof BodyProps<T>> & React.RefAttributes<HTMLElement>>;
+    fontWeight?: FontWeightToken;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
+export declare const Body: (<T extends Element = "p">(props: BodyProps<T> & {
+    ref?: React.ForwardedRef<React.ComponentRef<T>>;
+}) => React.ReactElement) & {
+    displayName: string;
+};
 export {};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type FontWeightToken } from '../../utils/tokens';
+declare const tags: readonly ["button"];
+type Element = (typeof tags)[number];
+type Default = (typeof tags)[0];
+export type ButtonProps<T extends Element = Default> = {
+    as?: T;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'success' | 'text';
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    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) & {
+    displayName: string;
+};
+export {};

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

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

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

@@ -1,11 +1,17 @@
 import * as React from 'react';
-export type DisplayProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+import { type FontWeightToken } from '../../utils/tokens';
+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;
     size?: 'lg' | 'md' | 'sm';
     color?: string;
-} & React.HTMLAttributes<HTMLHeadingElement>;
-export declare const Display: React.ForwardRefExoticComponent<{
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    size?: "lg" | "md" | "sm";
-    color?: string;
-} & React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+    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) & {
+    displayName: string;
+};
+export {};

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

@@ -1,11 +1,17 @@
 import * as React from 'react';
-export type HeadingProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+import { type FontWeightToken } from '../../utils/tokens';
+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;
     size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
     color?: string;
-} & React.HTMLAttributes<HTMLHeadingElement>;
-export declare const Heading: React.ForwardRefExoticComponent<{
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    size?: "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
-    color?: string;
-} & React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+    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) & {
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+declare const tags: readonly ["div"];
+type Element = (typeof tags)[number];
+type Default = (typeof tags)[0];
+export type SpinnerProps<T extends Element = Default> = {
+    as?: T;
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    color?: string;
+    bg?: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
+export declare const Spinner: (<T extends Element = "div">(props: SpinnerProps<T> & {
+    ref?: React.ForwardedRef<React.ComponentRef<T>>;
+}) => React.ReactElement) & {
+    displayName: string;
+};
+export {};

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

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

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";var v=Object.create;var d=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var L=(t,o)=>{for(var r in o)d(t,r,{get:o[r],enumerable:!0})},c=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of B(o))!W.call(t,a)&&a!==r&&d(t,a,{get:()=>o[a],enumerable:!(n=$(o,a))||n.enumerable});return t};var m=(t,o,r)=>(r=t!=null?v(N(t)):{},c(o||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),M=t=>c(d({},"__esModule",{value:!0}),t);var k={};L(k,{Body:()=>x,Display:()=>g,Heading:()=>C,Primitive:()=>S,createPrimitive:()=>e});module.exports=M(k);var f=require("@radix-ui/react-slot"),h=m(require("react"),1),y=require("react/jsx-runtime");function e(t){let o=h.forwardRef((r,n)=>{let{asChild:a,...i}=r;return(0,y.jsx)(a?f.Slot:t,{...i,ref:n})});return o.displayName=`Primitive.${t}`,o}var S={div:e("div"),span:e("span"),button:e("button"),input:e("input"),form:e("form"),label:e("label"),p:e("p"),h1:e("h1"),h2:e("h2"),h3:e("h3"),h4:e("h4"),h5:e("h5"),h6:e("h6"),section:e("section"),article:e("article"),header:e("header"),footer:e("footer"),main:e("main"),nav:e("nav"),aside:e("aside"),ul:e("ul"),ol:e("ol"),li:e("li"),img:e("img"),a:e("a"),strong:e("strong"),em:e("em"),small:e("small"),table:e("table"),thead:e("thead"),tbody:e("tbody"),tr:e("tr"),td:e("td"),th:e("th")};var R=m(require("react"),1),u=require("react/jsx-runtime");function w(t){if(t)return`var(--color-${t.replace(".","-")})`}var x=R.forwardRef(({as:t="p",size:o="md",color:r="",fontWeight:n="normal",style:a,className:i,...s},p)=>{let l=t,H=`text-body text-body-${o}${n==="bold"?"-bold":""} ${i}`;return(0,u.jsx)(l,{ref:p,className:H,style:{"--text-color":w(r),...a},...s})});x.displayName="Body";var P=m(require("react"),1),E=require("react/jsx-runtime");function D(t){if(t)return`var(--color-${t.replace(".","-")})`}var g=P.forwardRef(({as:t="h1",size:o="md",color:r="",style:n,className:a,...i},s)=>{let p=t,l=`text-display text-display-${o} ${a}`;return(0,E.jsx)(p,{ref:s,className:l,style:{"--text-color":D(r),...n},...i})});g.displayName="Display";var b=m(require("react"),1),T=require("react/jsx-runtime");function z(t){if(t)return`var(--color-${t.replace(".","-")})`}var C=b.forwardRef(({as:t="h2",size:o="md",color:r="",style:n,className:a,...i},s)=>{let p=t,l=`text-heading text-heading-${o} ${a}`;return(0,T.jsx)(p,{ref:s,className:l,style:{"--text-color":z(r),...n},...i})});C.displayName="Heading";
+"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"});

package/lib/index.d.ts

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

package/lib/index.js

@@ -1 +1 @@
-import{Slot as y}from"@radix-ui/react-slot";import*as d from"react";import{jsx as R}from"react/jsx-runtime";function e(t){let o=d.forwardRef((r,a)=>{let{asChild:n,...i}=r;return R(n?y:t,{...i,ref:a})});return o.displayName=`Primitive.${t}`,o}var $={div:e("div"),span:e("span"),button:e("button"),input:e("input"),form:e("form"),label:e("label"),p:e("p"),h1:e("h1"),h2:e("h2"),h3:e("h3"),h4:e("h4"),h5:e("h5"),h6:e("h6"),section:e("section"),article:e("article"),header:e("header"),footer:e("footer"),main:e("main"),nav:e("nav"),aside:e("aside"),ul:e("ul"),ol:e("ol"),li:e("li"),img:e("img"),a:e("a"),strong:e("strong"),em:e("em"),small:e("small"),table:e("table"),thead:e("thead"),tbody:e("tbody"),tr:e("tr"),td:e("td"),th:e("th")};import*as m from"react";import{jsx as P}from"react/jsx-runtime";function x(t){if(t)return`var(--color-${t.replace(".","-")})`}var u=m.forwardRef(({as:t="p",size:o="md",color:r="",fontWeight:a="normal",style:n,className:i,...s},p)=>{let l=t,h=`text-body text-body-${o}${a==="bold"?"-bold":""} ${i}`;return P(l,{ref:p,className:h,style:{"--text-color":x(r),...n},...s})});u.displayName="Body";import*as c from"react";import{jsx as b}from"react/jsx-runtime";function g(t){if(t)return`var(--color-${t.replace(".","-")})`}var E=c.forwardRef(({as:t="h1",size:o="md",color:r="",style:a,className:n,...i},s)=>{let p=t,l=`text-display text-display-${o} ${n}`;return b(p,{ref:s,className:l,style:{"--text-color":g(r),...a},...i})});E.displayName="Display";import*as f from"react";import{jsx as H}from"react/jsx-runtime";function C(t){if(t)return`var(--color-${t.replace(".","-")})`}var T=f.forwardRef(({as:t="h2",size:o="md",color:r="",style:a,className:n,...i},s)=>{let p=t,l=`text-heading text-heading-${o} ${n}`;return H(p,{ref:s,className:l,style:{"--text-color":C(r),...a},...i})});T.displayName="Heading";export{u as Body,E as Display,T as Heading,$ as Primitive,e as createPrimitive};
+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};

package/lib/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
+export declare const createClassName: (baseClass: string, variants: Record<string, any>, compoundVariants?: Record<string, any>[], ...additionalClasses: (string | undefined | null | false)[]) => string;

package/lib/utils/tokens.d.ts

@@ -0,0 +1,15 @@
+export declare function createColor(token: string | undefined): string | undefined;
+declare const FONT_WEIGHT_MAP: {
+    readonly thin: "100";
+    readonly extralight: "200";
+    readonly light: "300";
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+    readonly extrabold: "800";
+    readonly black: "900";
+};
+export type FontWeightToken = keyof typeof FONT_WEIGHT_MAP;
+export declare function createFontWeight(token: string | undefined): string | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocso-ui/react",
-  "version": "0.0.0-beta.1",
+  "version": "0.0.1-beta.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",
@@ -24,18 +24,16 @@
   "files": [
     "lib"
   ],
-  "dependencies": {
-    "@radix-ui/react-slot": "^1.2.3"
-  },
+  "dependencies": {},
   "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "esbuild": "^0.24.0",
-    "typescript": "^5.0.0"
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "esbuild": "^0.25.6",
+    "typescript": "^5.8.3"
   },
   "publishConfig": {
     "access": "public"

package/lib/primitive/index.d.ts

@@ -1,44 +0,0 @@
-import * as React from 'react';
-export interface PrimitiveProps {
-    asChild?: boolean;
-}
-type PropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & PrimitiveProps;
-declare function createPrimitive<E extends React.ElementType>(element: E): React.ForwardRefExoticComponent<PropsWithRef<E>>;
-declare const Primitive: {
-    div: React.ForwardRefExoticComponent<PropsWithRef<"div">>;
-    span: React.ForwardRefExoticComponent<PropsWithRef<"span">>;
-    button: React.ForwardRefExoticComponent<PropsWithRef<"button">>;
-    input: React.ForwardRefExoticComponent<PropsWithRef<"input">>;
-    form: React.ForwardRefExoticComponent<PropsWithRef<"form">>;
-    label: React.ForwardRefExoticComponent<PropsWithRef<"label">>;
-    p: React.ForwardRefExoticComponent<PropsWithRef<"p">>;
-    h1: React.ForwardRefExoticComponent<PropsWithRef<"h1">>;
-    h2: React.ForwardRefExoticComponent<PropsWithRef<"h2">>;
-    h3: React.ForwardRefExoticComponent<PropsWithRef<"h3">>;
-    h4: React.ForwardRefExoticComponent<PropsWithRef<"h4">>;
-    h5: React.ForwardRefExoticComponent<PropsWithRef<"h5">>;
-    h6: React.ForwardRefExoticComponent<PropsWithRef<"h6">>;
-    section: React.ForwardRefExoticComponent<PropsWithRef<"section">>;
-    article: React.ForwardRefExoticComponent<PropsWithRef<"article">>;
-    header: React.ForwardRefExoticComponent<PropsWithRef<"header">>;
-    footer: React.ForwardRefExoticComponent<PropsWithRef<"footer">>;
-    main: React.ForwardRefExoticComponent<PropsWithRef<"main">>;
-    nav: React.ForwardRefExoticComponent<PropsWithRef<"nav">>;
-    aside: React.ForwardRefExoticComponent<PropsWithRef<"aside">>;
-    ul: React.ForwardRefExoticComponent<PropsWithRef<"ul">>;
-    ol: React.ForwardRefExoticComponent<PropsWithRef<"ol">>;
-    li: React.ForwardRefExoticComponent<PropsWithRef<"li">>;
-    img: React.ForwardRefExoticComponent<PropsWithRef<"img">>;
-    a: React.ForwardRefExoticComponent<PropsWithRef<"a">>;
-    strong: React.ForwardRefExoticComponent<PropsWithRef<"strong">>;
-    em: React.ForwardRefExoticComponent<PropsWithRef<"em">>;
-    small: React.ForwardRefExoticComponent<PropsWithRef<"small">>;
-    table: React.ForwardRefExoticComponent<PropsWithRef<"table">>;
-    thead: React.ForwardRefExoticComponent<PropsWithRef<"thead">>;
-    tbody: React.ForwardRefExoticComponent<PropsWithRef<"tbody">>;
-    tr: React.ForwardRefExoticComponent<PropsWithRef<"tr">>;
-    td: React.ForwardRefExoticComponent<PropsWithRef<"td">>;
-    th: React.ForwardRefExoticComponent<PropsWithRef<"th">>;
-};
-export { createPrimitive, Primitive };
-export type { PropsWithRef };