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

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { type FontWeightToken } from '../../utils/tokens';
-type BodyElement = 'p' | 'a' | 'span' | 'div' | 'label' | 'li' | 'td' | 'th' | 'figcaption' | 'blockquote' | 'cite';
-export type BodyProps<T extends BodyElement = 'p'> = {
+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?: 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,13 +1,15 @@
 import * as React from 'react';
 import { type FontWeightToken } from '../../utils/tokens';
-type DisplayElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type DisplayProps<T extends DisplayElement = 'h1'> = {
+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;
     fontWeight?: FontWeightToken;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
-export declare const Display: (<T extends DisplayElement = "h1">(props: DisplayProps<T> & {
+} & 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,13 +1,15 @@
 import * as React from 'react';
 import { type FontWeightToken } from '../../utils/tokens';
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type HeadingProps<T extends HeadingElement = 'h2'> = {
+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;
     fontWeight?: FontWeightToken;
-} & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color'>;
-export declare const Heading: (<T extends HeadingElement = "h2">(props: HeadingProps<T> & {
+} & 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 W=Object.create;var f=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(e,t)=>{for(var o in t)f(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of F(t))!b.call(e,n)&&n!==o&&f(e,n,{get:()=>t[n],enumerable:!(r=u(t,n))||r.enumerable});return e};var R=(e,t,o)=>(o=e!=null?W(P(e)):{},g(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>g(f({},"__esModule",{value:!0}),e);var _={};w(_,{Body:()=>D,Display:()=>O,Heading:()=>S});module.exports=H(_);var h=R(require("react"),1);function a(e){if(e)return`var(--color-${e.replace(/\./g,"-")})`}var B={thin:"100","extra-light":"200",light:"300",normal:"400",medium:"500","semi-bold":"600",bold:"700","extra-bold":"800",black:"900"};function s(e){if(e)return B[e]??e}var i=(...e)=>e.filter(Boolean).join(" ").trim();var y=require("react/jsx-runtime"),N=h.forwardRef(({as:e="p",size:t="md",color:o,fontWeight:r="normal",className:n,style:p,...d},m)=>{let c=e,l=i("text-body",`text-body-${t}`,n);return(0,y.jsx)(c,{ref:m,className:l,style:{"--font-color":a(o),"--font-weight":s(r),...p},...d})}),D=Object.assign(N,{displayName:"Body"});var T=R(require("react"),1);var x=require("react/jsx-runtime"),k=T.forwardRef(({as:e="h1",size:t="md",color:o,fontWeight:r="bold",className:n,style:p,...d},m)=>{let c=e,l=i("text-display",`text-display-${t}`,n);return(0,x.jsx)(c,{ref:m,className:l,style:{"--font-color":a(o),"--font-weight":s(r),...p},...d})}),O=Object.assign(k,{displayName:"Display"});var E=R(require("react"),1);var C=require("react/jsx-runtime"),z=E.forwardRef(({as:e="h2",size:t="md",color:o,fontWeight:r="bold",className:n,style:p,...d},m)=>{let c=e,l=i("text-heading",`text-heading-${t}`,n);return(0,C.jsx)(c,{ref:m,className:l,style:{"--font-color":a(o),"--font-weight":s(r),...p},...d})}),S=Object.assign(z,{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 f from"react";function t(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 o(e){if(e)return h[e]??e}var n=(...e)=>e.filter(Boolean).join(" ").trim();import{jsx as T}from"react/jsx-runtime";var y=f.forwardRef(({as:e="p",size:r="md",color:a,fontWeight:s="normal",className:i,style:p,...d},m)=>{let c=e,l=n("text-body",`text-body-${r}`,i);return T(c,{ref:m,className:l,style:{"--font-color":t(a),"--font-weight":o(s),...p},...d})}),w=Object.assign(y,{displayName:"Body"});import*as R from"react";import{jsx as E}from"react/jsx-runtime";var x=R.forwardRef(({as:e="h1",size:r="md",color:a,fontWeight:s="bold",className:i,style:p,...d},m)=>{let c=e,l=n("text-display",`text-display-${r}`,i);return E(c,{ref:m,className:l,style:{"--font-color":t(a),"--font-weight":o(s),...p},...d})}),z=Object.assign(x,{displayName:"Display"});import*as g from"react";import{jsx as W}from"react/jsx-runtime";var C=g.forwardRef(({as:e="h2",size:r="md",color:a,fontWeight:s="bold",className:i,style:p,...d},m)=>{let c=e,l=n("text-heading",`text-heading-${r}`,i);return W(c,{ref:m,className:l,style:{"--font-color":t(a),"--font-weight":o(s),...p},...d})}),I=Object.assign(C,{displayName:"Heading"});export{w as Body,z as Display,I 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/package.json

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