@cocso-ui/react 0.0.1-beta.7 → 0.0.1-beta.9

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
-type BodyElement = 'p' | 'a' | 'span' | 'div' | 'label' | 'li' | 'td' | 'th' | 'figcaption' | 'blockquote' | 'cite';
-export type BodyProps<T extends BodyElement = 'p'> = {
+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' | 'medium' | 'semi-bold' | 'bold';
+    fontWeight?: FontWeightToken;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
-export declare const Body: (<T extends BodyElement = "p">(props: BodyProps<T> & {
+export declare const Body: (<T extends Element = "p">(props: BodyProps<T> & {
     ref?: React.ForwardedRef<React.ComponentRef<T>>;
 }) => React.ReactElement) & {
     displayName: string;

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' | 'text';
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    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,15 @@
 import * as React from 'react';
-type DisplayElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type DisplayProps<T extends DisplayElement = 'h1'> = {
+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;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
-export declare const Display: (<T extends DisplayElement = "h1">(props: DisplayProps<T> & {
+    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;

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

@@ -1,11 +1,15 @@
 import * as React from 'react';
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type HeadingProps<T extends HeadingElement = 'h2'> = {
+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;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
-export declare const Heading: (<T extends HeadingElement = "h2">(props: HeadingProps<T> & {
+    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;

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";var E=Object.create;var c=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var w=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of u(t))!B.call(e,n)&&n!==o&&c(e,n,{get:()=>t[n],enumerable:!(r=P(t,n))||r.enumerable});return e};var d=(e,t,o)=>(o=e!=null?E(b(e)):{},f(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>f(c({},"__esModule",{value:!0}),e);var W={};w(W,{Body:()=>N,Display:()=>F,Heading:()=>S});module.exports=D(W);var R=d(require("react"),1);function a(e){if(e)return`var(--color-${e.replace(/\./g,"-")})`}var s=(...e)=>e.filter(Boolean).join(" ").trim();var y=require("react/jsx-runtime"),H=R.forwardRef(({as:e="p",size:t="md",color:o,fontWeight:r="normal",className:n,style:p,...m},i)=>{let l=e,C=s("text-body",`text-body-${t}`,n);return(0,y.jsx)(l,{ref:i,className:C,style:{"--font-color":a(o),"--font-weight":r,...p},...m})}),N=Object.assign(H,{displayName:"Body"});var T=d(require("react"),1);var g=require("react/jsx-runtime"),z=T.forwardRef(({as:e="h1",size:t="md",color:o,className:r,style:n,...p},m)=>{let i=e,l=s("text-display",`text-display-${t}`,r);return(0,g.jsx)(i,{ref:m,className:l,style:{"--font-color":a(o),...n},...p})}),F=Object.assign(z,{displayName:"Display"});var x=d(require("react"),1);var h=require("react/jsx-runtime"),O=x.forwardRef(({as:e="h2",size:t="md",color:o,className:r,style:n,...p},m)=>{let i=e,l=s("text-heading",`text-heading-${t}`,r);return(0,h.jsx)(i,{ref:m,className:l,style:{"--font-color":a(o),...n},...p})}),S=Object.assign(O,{displayName:"Heading"});
+"use strict";var N=Object.create;var g=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},y=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of B(t))!v.call(e,s)&&s!==o&&g(e,s,{get:()=>t[s],enumerable:!(n=w(t,s))||n.enumerable});return e};var R=(e,t,o)=>(o=e!=null?N(O(e)):{},y(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),z=e=>y(g({},"__esModule",{value:!0}),e);var ee={};k(ee,{Body:()=>M,Button:()=>K,Display:()=>U,Heading:()=>Z});module.exports=z(ee);var u=R(require("react"),1);function c(e){if(e)return`var(--color-${e.replace(/\./g,"-")})`}var H={thin:"100","extra-light":"200",light:"300",normal:"400",medium:"500","semi-bold":"600",bold:"700","extra-bold":"800",black:"900"};function i(e){if(e)return H[e]??e}var S=(...e)=>e.filter(Boolean).join(" ").trim(),$=(e,t,o)=>`${e}--${t}_${o}`,j=(e,t)=>Object.entries(t).map(([o,n])=>$(e,o,n)).join(" "),_=(e,t)=>Object.entries(e).every(([o,n])=>t[o]===n),V=(e,t)=>{let o=Object.entries(t).map(([n,s])=>`${n}_${s}`).join("-");return`${e}--${o}`},A=(e,t,o)=>o.filter(n=>_(n,t)).map(n=>V(e,n)).join(" "),l=(e,t,o=[],...n)=>{let s=e,a=j(e,t),r=A(e,t,o);return S(s,a,r,...n)};var T=require("react/jsx-runtime"),G=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],I=u.forwardRef(({as:e=G[0],size:t="md",color:o,fontWeight:n="normal",className:s,style:a,...r},p)=>{let m=e,d=l("cocso-body",{size:t},[],s);return(0,T.jsx)(m,{ref:p,className:d,style:{"--cocso-body-color":c(o),"--cocso-body-weight":i(n),...a},...r})}),M=Object.assign(I,{displayName:"Body"});var h=R(require("react"),1);var C=require("react/jsx-runtime"),q=["button"],J=h.forwardRef(({as:e=q[0],variant:t="primary",size:o="md",disabled:n=!1,loading:s=!1,color:a,fontWeight:r="bold",className:p,style:m,...f},d)=>{let F=e,D={variant:t,size:o,...n&&{disabled:"true"},...s&&{loading:"true"}},P=l("cocso-button",D,[],p);return(0,C.jsx)(F,{ref:d,className:P,style:{"--cocso-button-color":c(a),"--cocso-button-weight":i(r),...m},...f})}),K=Object.assign(J,{displayName:"Button"});var x=R(require("react"),1);var b=require("react/jsx-runtime"),L=["h1","h2","h3","h4","h5","h6"],Q=x.forwardRef(({as:e=L[0],size:t="md",color:o,fontWeight:n="bold",className:s,style:a,...r},p)=>{let m=e,d=l("cocso-display",{size:t},[],s);return(0,b.jsx)(m,{ref:p,className:d,style:{"--cocso-display-color":c(o),"--cocso-display-weight":i(n),...a},...r})}),U=Object.assign(Q,{displayName:"Display"});var E=R(require("react"),1);var W=require("react/jsx-runtime"),X=["h1","h2","h3","h4","h5","h6"],Y=E.forwardRef(({as:e=X[1],size:t="md",color:o,fontWeight:n="bold",className:s,style:a,...r},p)=>{let m=e,d=l("cocso-heading",{size:t},[],s);return(0,W.jsx)(m,{ref:p,className:d,style:{"--cocso-heading-color":c(o),"--cocso-heading-weight":i(n),...a},...r})}),Z=Object.assign(Y,{displayName:"Heading"});

package/lib/index.d.ts

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

package/lib/index.js

@@ -1 +1 @@
-import*as c from"react";function t(e){if(e)return`var(--color-${e.replace(/\./g,"-")})`}var o=(...e)=>e.filter(Boolean).join(" ").trim();import{jsx as T}from"react/jsx-runtime";var y=c.forwardRef(({as:e="p",size:n="md",color:r,fontWeight:a="normal",className:s,style:p,...m},i)=>{let l=e,R=o("text-body",`text-body-${n}`,s);return T(l,{ref:i,className:R,style:{"--font-color":t(r),"--font-weight":a,...p},...m})}),B=Object.assign(y,{displayName:"Body"});import*as d from"react";import{jsx as x}from"react/jsx-runtime";var g=d.forwardRef(({as:e="h1",size:n="md",color:r,className:a,style:s,...p},m)=>{let i=e,l=o("text-display",`text-display-${n}`,a);return x(i,{ref:m,className:l,style:{"--font-color":t(r),...s},...p})}),O=Object.assign(g,{displayName:"Display"});import*as f from"react";import{jsx as C}from"react/jsx-runtime";var h=f.forwardRef(({as:e="h2",size:n="md",color:r,className:a,style:s,...p},m)=>{let i=e,l=o("text-heading",`text-heading-${n}`,a);return C(i,{ref:m,className:l,style:{"--font-color":t(r),...s},...p})}),k=Object.assign(h,{displayName:"Heading"});export{B as Body,O as Display,k as Heading};
+import*as g from"react";function c(e){if(e)return`var(--color-${e.replace(/\./g,"-")})`}var x={thin:"100","extra-light":"200",light:"300",normal:"400",medium:"500","semi-bold":"600",bold:"700","extra-bold":"800",black:"900"};function i(e){if(e)return x[e]??e}var b=(...e)=>e.filter(Boolean).join(" ").trim(),E=(e,t,o)=>`${e}--${t}_${o}`,W=(e,t)=>Object.entries(t).map(([o,n])=>E(e,o,n)).join(" "),F=(e,t)=>Object.entries(e).every(([o,n])=>t[o]===n),D=(e,t)=>{let o=Object.entries(t).map(([n,s])=>`${n}_${s}`).join("-");return`${e}--${o}`},P=(e,t,o)=>o.filter(n=>F(n,t)).map(n=>D(e,n)).join(" "),l=(e,t,o=[],...n)=>{let s=e,a=W(e,t),r=P(e,t,o);return b(s,a,r,...n)};import{jsx as B}from"react/jsx-runtime";var N=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],w=g.forwardRef(({as:e=N[0],size:t="md",color:o,fontWeight:n="normal",className:s,style:a,...r},p)=>{let m=e,d=l("cocso-body",{size:t},[],s);return B(m,{ref:p,className:d,style:{"--cocso-body-color":c(o),"--cocso-body-weight":i(n),...a},...r})}),M=Object.assign(w,{displayName:"Body"});import*as R from"react";import{jsx as k}from"react/jsx-runtime";var O=["button"],v=R.forwardRef(({as:e=O[0],variant:t="primary",size:o="md",disabled:n=!1,loading:s=!1,color:a,fontWeight:r="bold",className:p,style:m,...f},d)=>{let T=e,h={variant:t,size:o,...n&&{disabled:"true"},...s&&{loading:"true"}},C=l("cocso-button",h,[],p);return k(T,{ref:d,className:C,style:{"--cocso-button-color":c(a),"--cocso-button-weight":i(r),...m},...f})}),X=Object.assign(v,{displayName:"Button"});import*as y from"react";import{jsx as S}from"react/jsx-runtime";var z=["h1","h2","h3","h4","h5","h6"],H=y.forwardRef(({as:e=z[0],size:t="md",color:o,fontWeight:n="bold",className:s,style:a,...r},p)=>{let m=e,d=l("cocso-display",{size:t},[],s);return S(m,{ref:p,className:d,style:{"--cocso-display-color":c(o),"--cocso-display-weight":i(n),...a},...r})}),se=Object.assign(H,{displayName:"Display"});import*as u from"react";import{jsx as _}from"react/jsx-runtime";var $=["h1","h2","h3","h4","h5","h6"],j=u.forwardRef(({as:e=$[1],size:t="md",color:o,fontWeight:n="bold",className:s,style:a,...r},p)=>{let m=e,d=l("cocso-heading",{size:t},[],s);return _(m,{ref:p,className:d,style:{"--cocso-heading-color":c(o),"--cocso-heading-weight":i(n),...a},...r})}),me=Object.assign(j,{displayName:"Heading"});export{M as Body,X as Button,se as Display,me as Heading};

package/lib/utils/cn.d.ts

@@ -1 +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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocso-ui/react",
-  "version": "0.0.1-beta.7",
+  "version": "0.0.1-beta.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",