@cocso-ui/react 0.0.1-beta.12 → 0.0.1-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Body/Body.d.ts +1 -3
- package/lib/components/Checkbox/Checkbox.d.ts +2 -2
- package/lib/components/Label/Label.d.ts +15 -0
- package/lib/components/Label/index.d.ts +1 -0
- package/lib/index.cjs +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/lib/utils/polymorphic.d.ts +0 -9
|
@@ -9,9 +9,7 @@ export type BodyProps<T extends Element = Default> = {
|
|
|
9
9
|
color?: string;
|
|
10
10
|
weight?: FontWeightToken;
|
|
11
11
|
} & React.ComponentPropsWithoutRef<T>;
|
|
12
|
-
export declare const Body:
|
|
13
|
-
ref?: React.ForwardedRef<React.ComponentRef<T>>;
|
|
14
|
-
}) => React.ReactElement) & {
|
|
12
|
+
export declare const Body: React.ForwardRefExoticComponent<BodyProps<"p" | "a" | "span" | "div" | "label" | "li" | "td" | "th" | "figcaption" | "blockquote" | "cite"> & React.RefAttributes<HTMLElement>> & {
|
|
15
13
|
displayName: string;
|
|
16
14
|
};
|
|
17
15
|
export {};
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
export type CheckboxStatus = 'on' | 'off' | 'intermediate';
|
|
3
3
|
export type CheckboxProps = {
|
|
4
4
|
id: string;
|
|
5
|
-
size?: 'md' | '
|
|
5
|
+
size?: 'lg' | 'md' | 'sm';
|
|
6
6
|
status: CheckboxStatus;
|
|
7
7
|
onChange: (next: CheckboxStatus) => void;
|
|
8
8
|
label?: string;
|
|
@@ -10,7 +10,7 @@ export type CheckboxProps = {
|
|
|
10
10
|
} & Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>;
|
|
11
11
|
export declare const Checkbox: React.ForwardRefExoticComponent<{
|
|
12
12
|
id: string;
|
|
13
|
-
size?: "md" | "
|
|
13
|
+
size?: "lg" | "md" | "sm";
|
|
14
14
|
status: CheckboxStatus;
|
|
15
15
|
onChange: (next: CheckboxStatus) => void;
|
|
16
16
|
label?: string;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type FontWeightToken } from '../../utils/token';
|
|
3
|
+
declare const tags: readonly ["label", "p", "a", "span", "div", "li", "td", "th", "figcaption", "blockquote", "cite"];
|
|
4
|
+
type Element = (typeof tags)[number];
|
|
5
|
+
type Default = (typeof tags)[0];
|
|
6
|
+
export type LabelProps<T extends Element = Default> = {
|
|
7
|
+
as?: T;
|
|
8
|
+
size?: 'lg' | 'md' | 'sm' | 'xs';
|
|
9
|
+
color?: string;
|
|
10
|
+
weight?: FontWeightToken;
|
|
11
|
+
} & React.ComponentPropsWithoutRef<T>;
|
|
12
|
+
export declare const Label: React.ForwardRefExoticComponent<LabelProps<"p" | "a" | "span" | "div" | "label" | "li" | "td" | "th" | "figcaption" | "blockquote" | "cite"> & React.RefAttributes<HTMLElement>> & {
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Label';
|
package/lib/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var A=Object.create;var k=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var o in t)k(e,o,{get:t[o],enumerable:!0})},P=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of J(t))!U.call(e,n)&&n!==o&&k(e,n,{get:()=>t[n],enumerable:!(a=G(t,n))||a.enumerable});return e};var y=(e,t,o)=>(o=e!=null?A(Q(e)):{},P(t||!e||!e.__esModule?k(o,"default",{value:e,enumerable:!0}):o,e)),Y=e=>P(k({},"__esModule",{value:!0}),e);var be={};X(be,{Body:()=>oe,Button:()=>ie,Checkbox:()=>xe,Display:()=>me,Heading:()=>ge,Label:()=>N,Spinner:()=>E});module.exports=Y(be);var D=y(require("react"),1);function m(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 g(e){if(e)return e in W?W[e]:e}var Z=(...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 Z(e,n,r,...a)};var S=require("react/jsx-runtime"),ee=["p","a","span","div","label","li","td","th","figcaption","blockquote","cite"],te=D.forwardRef(({as:e=ee[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,S.jsx)(i,{ref:c,className:p,style:{"--cocso-body-color":m(o),"--cocso-body-weight":g(a),...r},...s})}),oe=Object.assign(te,{displayName:"Body"});var T=y(require("react"),1);var F=y(require("react"),1);var b=require("react/jsx-runtime"),ne=["div"],se=F.forwardRef(({as:e=ne[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,b.jsx)(i,{ref:c,className:p,style:{"--cocso-spinner-bg":m(a),"--cocso-spinner-color":m(o),...r},...s,children:(0,b.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,b.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),(0,b.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(se,{displayName:"Spinner"});var w=require("react/jsx-runtime"),re=["button"],ae=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],ce=T.forwardRef(({as:e=re[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:R,...C},v)=>{let x=e,u=a||n,$=T.useCallback(h=>{if(u){h.preventDefault();return}p?.(h)},[u,p]),K=T.useCallback(h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),u||h.currentTarget.click()),R?.(h)},[u,R]),_={variant:t,size:o,loading:n,disabled:u},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":g(s),...i};return(0,w.jsx)(x,{ref:v,className:V,onClick:$,onKeyDown:K,role:"button",disabled:u,"aria-disabled":u,"aria-busy":n,style:q,...C,children:n?(0,w.jsx)(E,{className:"cocso-button-spinner",size:ae(o),color:"currentColor"}):d})}),ie=Object.assign(ce,{displayName:"Button"});var B=y(require("react"),1);var O=require("react/jsx-runtime"),le=["h1","h2","h3","h4","h5","h6"],pe=B.forwardRef(({as:e=le[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,O.jsx)(i,{ref:c,className:p,style:{"--cocso-display-color":m(o),"--cocso-display-weight":g(a),...r},...s})}),me=Object.assign(pe,{displayName:"Display"});var z=y(require("react"),1);var M=require("react/jsx-runtime"),fe=["h1","h2","h3","h4","h5","h6"],de=z.forwardRef(({as:e=fe[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,M.jsx)(i,{ref:c,className:p,style:{"--cocso-heading-color":m(o),"--cocso-heading-weight":g(a),...r},...s})}),ge=Object.assign(de,{displayName:"Heading"});var H=y(require("react"),1);var L=require("react/jsx-runtime"),he=["label","p","a","span","div","li","td","th","figcaption","blockquote","cite"],ue=H.forwardRef(({as:e=he[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,L.jsx)(i,{ref:c,className:p,style:{"--cocso-label-color":m(o),"--cocso-label-weight":g(a),...r},...s})}),N=Object.assign(ue,{displayName:"Label"});var j=y(require("react"),1);var f=require("react/jsx-runtime"),ye=j.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}]:[]],R=l("cocso-checkbox-inner",d,p,s),C=()=>{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:x=>{(x.key==="Enter"||x.key===" ")&&(x.preventDefault(),C())},...c,children:[(0,f.jsxs)("div",{className:R,onClick:C,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","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-check-icon lucide-check",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","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-minus-icon lucide-minus",children:(0,f.jsx)("path",{d:"M5 12h14"})})}),(0,f.jsx)("input",{type:"checkbox",id:e,checked:o==="on",onChange:C,disabled:r})]}),n&&(0,f.jsx)(N,{className:l("cocso-checkbox-label",d),htmlFor:e,size:t,children:n})]})}),xe=Object.assign(ye,{displayName:"Checkbox"});
|
package/lib/index.d.ts
CHANGED
|
@@ -2,5 +2,6 @@ export * from './components/Body';
|
|
|
2
2
|
export * from './components/Button';
|
|
3
3
|
export * from './components/Display';
|
|
4
4
|
export * from './components/Heading';
|
|
5
|
+
export * from './components/Label';
|
|
5
6
|
export * from './components/Checkbox';
|
|
6
7
|
export * from './components/Spinner';
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as E from"react";function m(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var k={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};function
|
|
1
|
+
import*as E from"react";function m(e){if(e)return e.includes(".")?`var(--color-${e.replace(/\./g,"-")})`:e}var k={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 k?k[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":d(c),...s},...o})}),me=Object.assign(_,{displayName:"Body"});import*as b from"react";import*as w from"react";import{jsx as T,jsxs as A}from"react/jsx-runtime";var V=["div"],q=w.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 T(i,{ref:a,className:p,style:{"--cocso-spinner-bg":m(c),"--cocso-spinner-color":m(t),...s},...o,children:A("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[T("circle",{className:"opacity-25",cx:"12",cy:"12",r:"9",stroke:"var(--cocso-spinner-bg, currentColor)",strokeWidth:"3"}),T("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"})]})})}),N=Object.assign(q,{displayName:"Spinner"});import{jsx as v}from"react/jsx-runtime";var G=["button"],J=e=>({"2xs":"xs",xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"})[e],Q=b.forwardRef(({as:e=G[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:C,...x},R)=>{let y=e,u=c||n,O=b.useCallback(g=>{if(u){g.preventDefault();return}p?.(g)},[u,p]),z=b.useCallback(g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),u||g.currentTarget.click()),C?.(g)},[u,C]),M={variant:r,size:t,loading:n,disabled:u},H=[...c?[{variant:r,disabled:c}]:[],...n?[{variant:r,loading:n}]:[]],L=l("cocso-button",M,H,a),j={"--cocso-button-color":m(s),"--cocso-button-weight":d(o),...i};return v(y,{ref:R,className:L,onClick:O,onKeyDown:z,role:"button",disabled:u,"aria-disabled":u,"aria-busy":n,style:j,...x,children:n?v(N,{className:"cocso-button-spinner",size:J(t),color:"currentColor"}):f})}),we=Object.assign(Q,{displayName:"Button"});import*as P from"react";import{jsx as Y}from"react/jsx-runtime";var U=["h1","h2","h3","h4","h5","h6"],X=P.forwardRef(({as:e=U[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 Y(i,{ref:a,className:p,style:{"--cocso-display-color":m(t),"--cocso-display-weight":d(c),...s},...o})}),Fe=Object.assign(X,{displayName:"Display"});import*as W from"react";import{jsx as te}from"react/jsx-runtime";var Z=["h1","h2","h3","h4","h5","h6"],ee=W.forwardRef(({as:e=Z[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 te(i,{ref:a,className:p,style:{"--cocso-heading-color":m(t),"--cocso-heading-weight":d(c),...s},...o})}),je=Object.assign(ee,{displayName:"Heading"});import*as D from"react";import{jsx as se}from"react/jsx-runtime";var oe=["label","p","a","span","div","li","td","th","figcaption","blockquote","cite"],ne=D.forwardRef(({as:e=oe[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 se(i,{ref:a,className:p,style:{"--cocso-label-color":m(t),"--cocso-label-weight":d(c),...s},...o})}),S=Object.assign(ne,{displayName:"Label"});import*as B from"react";import{jsx as h,jsxs as F}from"react/jsx-runtime";var re=B.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}]:[]],C=l("cocso-checkbox-inner",f,p,o),x=()=>{s||c(t==="on"?"off":"on")};return F("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:y=>{(y.key==="Enter"||y.key===" ")&&(y.preventDefault(),x())},...a,children:[F("div",{className:C,onClick:x,children:[h("div",{className:"cocso-checkbox-icon",style:{opacity:t==="on"?1:0},children:h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-check-icon lucide-check",children:h("path",{d:"M20 6 9 17l-5-5"})})}),h("div",{className:"cocso-checkbox-icon",style:{opacity:t==="intermediate"?1:0},children:h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round",className:"lucide lucide-minus-icon lucide-minus",children:h("path",{d:"M5 12h14"})})}),h("input",{type:"checkbox",id:e,checked:t==="on",onChange:x,disabled:s})]}),n&&h(S,{className:l("cocso-checkbox-label",f),htmlFor:e,size:r,children:n})]})}),Ye=Object.assign(re,{displayName:"Checkbox"});export{me as Body,we as Button,Ye as Checkbox,Fe as Display,je as Heading,S as Label,N as Spinner};
|
package/package.json
CHANGED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
type AsProp<T extends React.ElementType> = {
|
|
3
|
-
as?: T;
|
|
4
|
-
};
|
|
5
|
-
export type PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];
|
|
6
|
-
export type PolymorphicComponentProps<T extends React.ElementType, Props = {}> = AsProp<T> & React.ComponentPropsWithoutRef<T> & Props & {
|
|
7
|
-
ref?: PolymorphicRef<T>;
|
|
8
|
-
};
|
|
9
|
-
export {};
|