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

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

@@ -1,10 +1,11 @@
 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'> = {
     as?: T;
     size?: 'lg' | 'md' | 'sm' | 'xs';
     color?: string;
-    fontWeight?: 'normal' | 'bold';
+    fontWeight?: FontWeightToken;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'size' | 'color' | 'fontWeight'>;
 export declare const Body: (<T extends BodyElement = "p">(props: BodyProps<T> & {
     ref?: React.ForwardedRef<React.ComponentRef<T>>;

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

@@ -1,9 +1,11 @@
 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'> = {
     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> & {
     ref?: React.ForwardedRef<React.ComponentRef<T>>;

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

@@ -1,9 +1,11 @@
 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'> = {
     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> & {
     ref?: React.ForwardedRef<React.ComponentRef<T>>;

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";var E=Object.create;var c=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!B.call(e,r)&&r!==o&&c(e,r,{get:()=>t[r],enumerable:!(n=P(t,r))||n.enumerable});return e};var d=(e,t,o)=>(o=e!=null?E(u(e)):{},f(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>f(c({},"__esModule",{value:!0}),e);var W={};D(W,{Body:()=>N,Display:()=>F,Heading:()=>S});module.exports=H(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"),w=R.forwardRef(({as:e="p",size:t="md",color:o,fontWeight:n="normal",className:r,style:p,...m},l)=>{let i=e,C=s("text-body",`text-body-${t}${n==="bold"?"-bold":""}`,r);return(0,y.jsx)(i,{ref:l,className:C,style:{"--text-color":a(o),...p},...m})}),N=Object.assign(w,{displayName:"Body"});var x=d(require("react"),1);var T=require("react/jsx-runtime"),z=x.forwardRef(({as:e="h1",size:t="md",color:o,className:n,style:r,...p},m)=>{let l=e,i=s("text-display",`text-display-${t}`,n);return(0,T.jsx)(l,{ref:m,className:i,style:{"--text-color":a(o),...r},...p})}),F=Object.assign(z,{displayName:"Display"});var g=d(require("react"),1);var h=require("react/jsx-runtime"),O=g.forwardRef(({as:e="h2",size:t="md",color:o,className:n,style:r,...p},m)=>{let l=e,i=s("text-heading",`text-heading-${t}`,n);return(0,h.jsx)(l,{ref:m,className:i,style:{"--text-color":a(o),...r},...p})}),S=Object.assign(O,{displayName:"Heading"});
+"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"});

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 x}from"react/jsx-runtime";var y=c.forwardRef(({as:e="p",size:r="md",color:n,fontWeight:a="normal",className:s,style:p,...m},l)=>{let i=e,R=o("text-body",`text-body-${r}${a==="bold"?"-bold":""}`,s);return x(i,{ref:l,className:R,style:{"--text-color":t(n),...p},...m})}),B=Object.assign(y,{displayName:"Body"});import*as d from"react";import{jsx as g}from"react/jsx-runtime";var T=d.forwardRef(({as:e="h1",size:r="md",color:n,className:a,style:s,...p},m)=>{let l=e,i=o("text-display",`text-display-${r}`,a);return g(l,{ref:m,className:i,style:{"--text-color":t(n),...s},...p})}),O=Object.assign(T,{displayName:"Display"});import*as f from"react";import{jsx as C}from"react/jsx-runtime";var h=f.forwardRef(({as:e="h2",size:r="md",color:n,className:a,style:s,...p},m)=>{let l=e,i=o("text-heading",`text-heading-${r}`,a);return C(l,{ref:m,className:i,style:{"--text-color":t(n),...s},...p})}),k=Object.assign(h,{displayName:"Heading"});export{B as Body,O as Display,k as Heading};
+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};

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.6",
+  "version": "0.0.1-beta.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",