@contractspec/lib.design-system 3.11.1 → 4.0.0

package/dist/native/theme/tailwind-variables.js

@@ -0,0 +1 @@
+import{resolveThemeModeTokens as T}from"./contracts";const p=["light","dark"];function l(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase()}function d(e,t){return{...e?.context,targets:e?.targets??e?.context?.targets,mode:t}}function f(e){return typeof e==="number"?`${e}px`:e}function a(e,t){return Object.fromEntries(Object.entries(t).map(([n,i])=>[`--ds-${e}-${l(n)}`,f(i)]))}function u(e){return{...a("color",e.colors),...a("radius",e.radii),...a("space",e.space),...a("typography",e.typography),...a("icon",e.icons)}}function g(e){return Object.keys(e?.modes??{})}function h(e,t,n=new Set){const i=`${t.key}@${t.version}`;if(n.has(i))return[];n.add(i);const s=e.get(t.key,t.version);return[...b(e,s,n),...g(s)]}function b(e,t,n){if(!t?.meta.extends)return[];return h(e,t.meta.extends,n)}function y(e,t,n){const i="tokens"in e?g(e):h(e,t);return Array.from(new Set([...p,...i,...n?.modes??[],...!("tokens"in e)?[]:t?.modes??[]]))}function c(e,t,n,i){if("tokens"in e){const o=t;return T(e,o,d(n,o))}const s=t,r=n;return T(e,s,r,d(i,r))}export function themeSpecToCssVariables(e,t,n){const i="tokens"in e?t:n,s=y(e,t,i),r=Object.fromEntries(s.map((o)=>{const m="tokens"in e?c(e,o,i):c(e,t,o,i);return[o,u(m)]}));return{light:r.light??{},dark:r.dark??{},modes:r}}

package/dist/native/theme/tailwind.js

@@ -0,0 +1 @@
+export*from"./tailwind-config";export{themeSpecToTailwindCss}from"./tailwind-css";export*from"./tailwind-variables";

package/dist/native/theme/tokenBridge.js

@@ -0,0 +1 @@
+import{defaultTokens as y}from"./tokens";export function mapTokensForPlatform(j,b=y){if(j==="web")return b;const{space:q,radii:w,icons:x}=b;return{colors:b.colors,spacing:q,typography:{h1:b.typography.h1,body:b.typography.body},radii:w,icons:x}}

package/dist/native/theme/tokens.js

@@ -0,0 +1 @@
+export const defaultTokens={colors:{background:"#ffffff",foreground:"#0a0a0a",muted:"#f4f4f5",mutedForeground:"#71717a",primary:"#0f49a0",primaryForeground:"#ffffff",accent:"#16a34a",accentForeground:"#ffffff",destructive:"#ef4444",destructiveForeground:"#ffffff",border:"#e4e4e7",ring:"#2563eb"},radii:{sm:4,md:8,lg:12,xl:16,full:9999},space:{xs:4,sm:8,md:12,lg:16,xl:24},typography:{h1:30,h2:24,h3:20,body:16,small:14},icons:{sm:16,md:20,lg:24}};

package/dist/native/theme/variants.js

@@ -0,0 +1 @@
+import{cva as b}from"class-variance-authority";export const dsBaseVariants=b("",{variants:{size:{sm:"",md:"",lg:""},density:{compact:"",comfortable:""},tone:{neutral:"",info:"",success:"",warning:"",danger:""},emphasis:{default:"",subtle:"",strong:""}},defaultVariants:{size:"md",density:"comfortable",tone:"neutral",emphasis:"default"}});

package/dist/native/typography.js

@@ -0,0 +1 @@
+export*from"./components/typography";

package/dist/renderers/form-contract/renderer.js

@@ -1 +1 @@
-import{shadcnDriver as j}from"@contractspec/lib.contracts-runtime-client-react/drivers/shadcn";import{createFormRenderer as q}from"@contractspec/lib.contracts-runtime-client-react/form-render";import{Autocomplete as z}from"../../components/forms/controls/Autocomplete";import{Checkbox as H,RadioGroup as J,Switch as K}from"../../components/forms/controls/ChoiceControls";import{DatePicker as M,DateTimePicker as N,TimePicker as O}from"../../components/forms/controls/DateTimeControls";import{FieldContent as Q,FieldGroup as U,FieldLegend as V,FieldSet as X,Field as Y,InputGroup as Z,InputGroupAddon as _}from"../../components/forms/controls/Field";import{Select as $}from"../../components/forms/controls/Select";import{AddressField as g,PhoneField as v}from"./rich-fields";import{Actions as w,FieldArray as B,FieldArrayItem as E,FormRoot as W,InputGroupIcon as b,TranslatedButton as f,TranslatedFieldDescription as y,TranslatedFieldError as C,TranslatedFieldLabel as L,TranslatedInput as R,TranslatedInputGroupInput as k,TranslatedInputGroupText as x,TranslatedInputGroupTextarea as D,TranslatedTextarea as P}from"./shell";export const formRenderer=q({submitMode:"button",driver:j({FormRoot:W,Field:Y,FieldLabel:L,FieldDescription:y,FieldError:C,FieldContent:Q,FieldGroup:U,FieldSet:X,FieldLegend:V,FieldArray:B,FieldArrayItem:E,Actions:w,Input:R,Textarea:P,InputGroup:Z,InputGroupAddon:_,InputGroupInput:k,InputGroupTextarea:D,InputGroupText:x,InputGroupIcon:b,Select:$,Checkbox:H,RadioGroup:J,Switch:K,Autocomplete:z,AddressField:g,PhoneField:v,DateField:M,TimeField:O,DateTimeField:N,Button:f})});
+import{shadcnDriver as j}from"@contractspec/lib.contracts-runtime-client-react/drivers/shadcn";import{createFormRenderer as q}from"@contractspec/lib.contracts-runtime-client-react/form-render";import{Autocomplete as z}from"../../components/forms/controls/Autocomplete";import{Checkbox as H,RadioGroup as J,Switch as K}from"../../components/forms/controls/ChoiceControls";import{DatePicker as M,DateTimePicker as N,TimePicker as O}from"../../components/forms/controls/DateTimeControls";import{FieldContent as Q,FieldGroup as U,FieldLegend as V,FieldSet as X,Field as Y,InputGroup as Z,InputGroupAddon as _}from"../../components/forms/controls/Field";import{Select as $}from"../../components/forms/controls/Select";import{AddressField as g,PhoneField as v}from"./rich-fields";import{Actions as B,FieldArray as E,FieldArrayItem as W,FormRoot as b,InputGroupIcon as f,TranslatedButton as w,TranslatedFieldDescription as y,TranslatedFieldError as C,TranslatedFieldLabel as L,TranslatedInput as R,TranslatedInputGroupInput as k,TranslatedInputGroupText as x,TranslatedInputGroupTextarea as D,TranslatedPasswordInput as S,TranslatedTextarea as P}from"./shell";export const formRenderer=q({submitMode:"button",driver:j({FormRoot:b,Field:Y,FieldLabel:L,FieldDescription:y,FieldError:C,FieldContent:Q,FieldGroup:U,FieldSet:X,FieldLegend:V,FieldArray:E,FieldArrayItem:W,Actions:B,Input:R,PasswordInput:S,Textarea:P,InputGroup:Z,InputGroupAddon:_,InputGroupInput:k,InputGroupTextarea:D,InputGroupText:x,InputGroupIcon:f,Select:$,Checkbox:H,RadioGroup:J,Switch:K,Autocomplete:z,AddressField:g,PhoneField:v,DateField:M,TimeField:O,DateTimeField:N,Button:w})});

package/dist/renderers/form-contract/shell.d.ts

@@ -1,12 +1,17 @@
 import type * as React from 'react';
 import { Button } from '../../components/atoms/Button';
 import { Input } from '../../components/atoms/Input';
+import { InputPassword } from '../../components/atoms/InputPassword';
 import { Textarea } from '../../components/atoms/Textarea';
 import { FieldDescription, FieldError, FieldLabel, InputGroupInput, InputGroupText, InputGroupTextarea } from '../../components/forms/controls/Field';
 export declare const TranslatedFieldLabel: (props: React.ComponentProps<typeof FieldLabel>) => import("react/jsx-runtime").JSX.Element;
 export declare const TranslatedFieldDescription: (props: React.ComponentProps<typeof FieldDescription>) => import("react/jsx-runtime").JSX.Element;
 export declare const TranslatedFieldError: (props: React.ComponentProps<typeof FieldError>) => import("react/jsx-runtime").JSX.Element;
 export declare const TranslatedInput: (props: React.ComponentProps<typeof Input>) => import("react/jsx-runtime").JSX.Element;
+export declare const TranslatedPasswordInput: (props: React.ComponentProps<typeof InputPassword> & {
+    showLabelI18n?: string;
+    hideLabelI18n?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const TranslatedTextarea: (props: React.ComponentProps<typeof Textarea>) => import("react/jsx-runtime").JSX.Element;
 export declare const TranslatedInputGroupInput: (props: React.ComponentProps<typeof InputGroupInput>) => import("react/jsx-runtime").JSX.Element;
 export declare const TranslatedInputGroupTextarea: (props: React.ComponentProps<typeof InputGroupTextarea>) => import("react/jsx-runtime").JSX.Element;

package/dist/renderers/form-contract/shell.js

@@ -1 +1 @@
-import{jsx as z}from"react/jsx-runtime";import{CalendarIcon as Y,ClockIcon as Z,InfoIcon as R,MailIcon as $,SearchIcon as v,UserIcon as B}from"lucide-react";import{Button as D}from"../../components/atoms/Button";import{Input as E}from"../../components/atoms/Input";import{Textarea as H}from"../../components/atoms/Textarea";import{FieldDescription as L,FieldError as M,FieldLabel as U,InputGroupInput as K,InputGroupText as P,InputGroupTextarea as F}from"../../components/forms/controls/Field";import{HStack as V,VStack as Q}from"../../components/layout/Stack";import{useTranslatedNode as A,useTranslatedText as J}from"../../components/primitives/themed";export const TranslatedFieldLabel=(g)=>{const q=A();return z(U,{...g,children:q(g.children)})};export const TranslatedFieldDescription=(g)=>{const q=A();return z(L,{...g,children:q(g.children)})};export const TranslatedFieldError=(g)=>{const q=A();return z(M,{...g,children:q(g.children)})};export const TranslatedInput=(g)=>{const q=J();return z(E,{...g,placeholder:q(g.placeholder)})};export const TranslatedTextarea=(g)=>{const q=J();return z(H,{...g,placeholder:q(g.placeholder)})};export const TranslatedInputGroupInput=(g)=>{const q=J();return z(K,{...g,placeholder:q(g.placeholder)})};export const TranslatedInputGroupTextarea=(g)=>{const q=J();return z(F,{...g,placeholder:q(g.placeholder)})};export const TranslatedInputGroupText=(g)=>{const q=A();return z(P,{...g,children:q(g.children)})};const G={calendar:Y,clock:Z,info:R,mail:$,search:v,user:B};export const InputGroupIcon=({iconKey:g,label:q})=>{const O=G[g]??R;return z(O,{"aria-hidden":q?void 0:!0,"aria-label":q,className:"size-4"})};export const TranslatedButton=({children:g,onClick:q,onPress:O,...W})=>{const X=A();return z(D,{...W,onClick:q?()=>q():void 0,onPress:O??q,children:X(g)})};export const FormRoot=({children:g,className:q})=>z(Q,{gap:"lg",className:q,children:g});export const FieldArray=({children:g,className:q})=>z(Q,{gap:"md",className:q,children:g});export const FieldArrayItem=({children:g,className:q})=>z(Q,{gap:"sm",className:q,children:g});export const Actions=({children:g,className:q})=>z(V,{gap:"sm",wrap:"wrap",className:q,children:g});
+import{jsx as z}from"react/jsx-runtime";import{CalendarIcon as Y,ClockIcon as Z,InfoIcon as X,MailIcon as $,SearchIcon as v,UserIcon as B}from"lucide-react";import{Button as D}from"../../components/atoms/Button";import{Input as E}from"../../components/atoms/Input";import{InputPassword as H}from"../../components/atoms/InputPassword";import{Textarea as M}from"../../components/atoms/Textarea";import{FieldDescription as U,FieldError as K,FieldLabel as F,InputGroupInput as L,InputGroupText as V,InputGroupTextarea as G}from"../../components/forms/controls/Field";import{HStack as P,VStack as W}from"../../components/layout/Stack";import{useTranslatedNode as J,useTranslatedText as O}from"../../components/primitives/themed";export const TranslatedFieldLabel=(g)=>{const q=J();return z(F,{...g,children:q(g.children)})};export const TranslatedFieldDescription=(g)=>{const q=J();return z(U,{...g,children:q(g.children)})};export const TranslatedFieldError=(g)=>{const q=J();return z(K,{...g,children:q(g.children)})};export const TranslatedInput=(g)=>{const q=O();return z(E,{...g,placeholder:q(g.placeholder)})};export const TranslatedPasswordInput=(g)=>{const q=O(),{showLabelI18n:A,hideLabelI18n:Q,...R}=g;return z(H,{...R,placeholder:q(g.placeholder),showLabel:q(A??g.showLabel),hideLabel:q(Q??g.hideLabel)})};export const TranslatedTextarea=(g)=>{const q=O();return z(M,{...g,placeholder:q(g.placeholder)})};export const TranslatedInputGroupInput=(g)=>{const q=O();return z(L,{...g,placeholder:q(g.placeholder)})};export const TranslatedInputGroupTextarea=(g)=>{const q=O();return z(G,{...g,placeholder:q(g.placeholder)})};export const TranslatedInputGroupText=(g)=>{const q=J();return z(V,{...g,children:q(g.children)})};const S={calendar:Y,clock:Z,info:X,mail:$,search:v,user:B};export const InputGroupIcon=({iconKey:g,label:q})=>{const A=S[g]??X;return z(A,{"aria-hidden":q?void 0:!0,"aria-label":q,className:"size-4"})};export const TranslatedButton=({children:g,onClick:q,onPress:A,...Q})=>{const R=J();return z(D,{...Q,onClick:q?()=>q():void 0,onPress:A??q,children:R(g)})};export const FormRoot=({children:g,className:q})=>z(W,{gap:"lg",className:q,children:g});export const FieldArray=({children:g,className:q})=>z(W,{gap:"md",className:q,children:g});export const FieldArrayItem=({children:g,className:q})=>z(W,{gap:"sm",className:q,children:g});export const Actions=({children:g,className:q})=>z(P,{gap:"sm",wrap:"wrap",className:q,children:g});

package/dist/typography.d.ts

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

package/dist/typography.js

@@ -0,0 +1 @@
+export*from"./components/typography";