@contractspec/lib.design-system 4.1.0 → 4.2.0

package/README.md

@@ -154,9 +154,25 @@ import {
     componentKey="Select"
     options={[{ labelI18n: "status.draft", value: "draft" }]}
   />
+  <Select
+    componentKey="Select"
+    groups={[
+      {
+        labelI18n: "status.lifecycle",
+        options: [{ labelI18n: "status.draft", value: "draft" }],
+      },
+      {
+        labelI18n: "status.release",
+        options: [{ labelI18n: "status.published", value: "published" }],
+      },
+    ]}
+  />
 </DesignSystemThemeProvider>;
 ```
 
+When both `options` and `groups` are provided to `Select`, grouped options are
+used and the flat `options` list is ignored.
+
 ### Use form controls from the design-system boundary
 
 The root barrel exposes themed and translation-aware controls for product
@@ -170,6 +186,11 @@ surfaces: `Button`, `Input`, `Textarea`, `Select`, `NativeSelect`,
 `FieldSeparator` wrappers so contract-driven forms can preserve accessible
 legend, description, invalid, and grouped-control structure.
 
+The `Autocomplete` control renders through the shared combobox primitive on web
+and keeps native rendering aligned for query, selected options, loading, error,
+and empty states. FormSpec renderers pass resolver-backed async state through
+these props without requiring product surfaces to know the underlying transport.
+
 ### Render forms on mobile through the shared renderer
 
 Use the focused shared renderer subpath when rendering `FormSpec` contracts in
@@ -285,7 +306,7 @@ hidden-column recovery without widening the primitive table API.
 ### Renderers and hooks
 
 - renderer exports from `./renderers`
-- form-contract renderer support, including readonly, password, autocomplete, address, phone, date, time, datetime, semantic FormSpec groups, grid layout hints, mobile-safe FormSpec column helper output, and text/textarea input groups
+- form-contract renderer support, including readonly, email, password, autocomplete, address, phone, date, time, datetime, semantic FormSpec groups, grid layout hints, progressive FormSpec sections/steps, mobile-safe FormSpec column helper output, and text/textarea/email input groups
 - translation-aware rendering through `DesignSystemTranslationProvider` and `createTranslationResolver`
 - theme-aware form controls and stack primitives that consume ThemeSpec component variant props
 - hooks such as `useListUrlState`, including scoped list filters where locked constraints are excluded from user-editable URL state

package/dist/browser/components/atoms/Input.js

@@ -1 +1 @@
-import{jsx as N}from"react/jsx-runtime";import{Input as j}from"@contractspec/lib.ui-kit-web/ui/input";import{mapKeyboardToWeb as B}from"../../lib/keyboard";import{useThemedTextField as C}from"../primitives/control";export function Input({value:A,defaultValue:D,onChange:E,onSubmit:O,onFocus:G,onBlur:H,placeholder:J,disabled:M,readOnly:P,maxLength:Q,name:R,className:S,keyboard:U,componentKey:X,themeVariant:Y,placeholderI18n:Z,ariaLabelI18n:$,...z}){const _=B(U),q=C({defaultComponentKey:"Input",componentKey:X,themeVariant:Y,className:S,style:z.style,placeholder:J,placeholderI18n:Z,ariaLabelI18n:$});return N(j,{...q.themed.props,...z,className:q.themed.className,style:q.themed.style,value:A,defaultValue:D,onChange:E,onFocus:G,onBlur:H,placeholder:q.placeholder,"aria-label":q.ariaLabel,disabled:M,readOnly:P,maxLength:Q,name:R,..._})}
+import{jsx as N}from"react/jsx-runtime";import{Input as j}from"@contractspec/lib.ui-kit-web/ui/input";import{mapKeyboardToWeb as B}from"../../lib/keyboard";import{useThemedTextField as C}from"../primitives/control";export function Input({value:D,defaultValue:E,onChange:G,onSubmit:O,onFocus:H,onBlur:J,placeholder:M,disabled:P,readOnly:Q,maxLength:R,name:S,className:U,keyboard:z,componentKey:X,themeVariant:Y,placeholderI18n:Z,ariaLabelI18n:$,...A}){const _=z?B(z):{},q=C({defaultComponentKey:"Input",componentKey:X,themeVariant:Y,className:U,style:A.style,placeholder:M,placeholderI18n:Z,ariaLabelI18n:$});return N(j,{...q.themed.props,..._,...A,className:q.themed.className,style:q.themed.style,value:D,defaultValue:E,onChange:G,onFocus:H,onBlur:J,placeholder:q.placeholder,"aria-label":q.ariaLabel,disabled:P,readOnly:Q,maxLength:R,name:S})}

package/dist/browser/components/forms/controls/Autocomplete.js

@@ -1 +1 @@
-import{jsx as A,jsxs as J}from"react/jsx-runtime";import{Command as k,CommandEmpty as S,CommandGroup as b,CommandInput as f,CommandItem as C,CommandList as T}from"@contractspec/lib.ui-kit-web/ui/command";import{Text as Y}from"@contractspec/lib.ui-kit-web/ui/text";import{Button as V}from"../../atoms/Button";import{HStack as w,VStack as Z}from"../../layout/Stack";import{useThemedPrimitive as v,useTranslatedText as _}from"../../primitives/themed";function M(F){return typeof F==="string"?F:String(F??"")}export function Autocomplete({query:F,options:$,selectedOptions:U,onQueryChange:E,onSelectOption:G,onRemoveOption:H,multiple:L,placeholder:P,placeholderI18n:g,readOnly:W,disabled:X,className:q,componentKey:B,themeVariant:K,emptyText:N="No results found."}){const D=_(),Q=v({defaultComponentKey:"Autocomplete",componentKey:B,themeVariant:K,className:q});return J(Z,{gap:"sm",className:Q.className,children:[J(k,{shouldFilter:!1,className:"rounded-md border border-input",children:[A(f,{value:F,onValueChange:E,placeholder:D(g??P),disabled:X||W}),J(T,{children:[A(S,{children:D(N)}),A(b,{children:$.map((z)=>{const R=U.some((I)=>M(I.value)===M(z.value));return J(C,{value:D(z.labelI18n)??z.labelI18n,onSelect:()=>G?.(z),disabled:X||z.disabled||W,children:[J(Z,{gap:"xs",children:[A(Y,{children:D(z.labelI18n)}),z.descriptionI18n?A(Y,{className:"text-muted-foreground text-xs",children:D(z.descriptionI18n)}):null]}),R?A(Y,{className:"ml-auto text-muted-foreground text-xs",children:D("Selected")}):null]},M(z.value))})})]})]}),U.length?A(w,{gap:"sm",wrap:"wrap",children:U.map((z)=>A(V,{type:"button",variant:"outline",size:"sm",onClick:()=>H?.(z),disabled:!L||W||X,children:D(z.labelI18n)},`selected-${M(z.value)}`))}):null]})}
+import{jsx as v}from"react/jsx-runtime";import{Combobox as I}from"@contractspec/lib.ui-kit-web/ui/combobox";import{useThemedPrimitive as T,useTranslatedText as b}from"../../primitives/themed";function H(E){return typeof E==="string"?E:String(E??"")}function g(E,U){const F=new Set,J=[];for(const L of[...U,...E]){const M=H(L.value);if(F.has(M))continue;F.add(M);J.push(L)}return J}export function Autocomplete({query:E,options:U,selectedOptions:F,onQueryChange:J,onSelectOption:L,onRemoveOption:M,multiple:W,placeholder:X,placeholderI18n:Y,readOnly:_,disabled:j,className:q,componentKey:w,themeVariant:D,emptyText:K="No results found.",loadingText:N="Loading options...",errorText:Q="Unable to load options.",loading:R,error:Z,id:S,name:k,"aria-invalid":C,"aria-describedby":B}){const A=b(),$=T({defaultComponentKey:"Autocomplete",componentKey:w,themeVariant:D,className:q}),f=g(U,F),P=new Map(f.map((z)=>[H(z.value),z]));return v(I,{...$.props,id:S,name:k,className:$.className,options:f.map((z)=>({value:H(z.value),label:A(z.labelI18n)??z.labelI18n,description:z.descriptionI18n?A(z.descriptionI18n)??z.descriptionI18n:void 0,disabled:z.disabled})),value:W?void 0:H(F[0]?.value??""),selectedValues:W?F.map((z)=>H(z.value)):void 0,query:E,onQueryChange:J,onValueChange:(z)=>{const G=P.get(z);if(G)L?.(G)},onRemoveValue:(z)=>{const G=P.get(z);if(G)M?.(G)},multiple:W,placeholder:A(Y??X),searchPlaceholder:A(Y??X),emptyText:A(K),loadingText:A(N),errorText:A(Q),loading:R,error:Z?A(Z):null,readOnly:_,disabled:j,"aria-invalid":C,"aria-describedby":B})}

package/dist/browser/components/forms/controls/Select.js

@@ -1 +1 @@
-import{jsx as A,jsxs as k}from"react/jsx-runtime";import{SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue,Select as Y}from"@contractspec/lib.ui-kit-web/ui/select";import{useThemedPrimitive as Z,useTranslatedText as $}from"../../primitives/themed";function B(z){return typeof z==="string"?z:String(z??"")}export function Select({options:z,value:D,onChange:F,placeholder:H,disabled:J,className:L,componentKey:M,themeVariant:O,placeholderI18n:Q,...R}){const E=$(),U=Z({defaultComponentKey:"Select",componentKey:M,themeVariant:O,className:L});return k(Y,{value:D==null?"":B(D),onValueChange:(q)=>F?.(q),disabled:J,...R,children:[A(SelectTrigger,{className:U.className,children:A(SelectValue,{placeholder:E(Q??H)})}),A(SelectContent,{children:A(SelectGroup,{children:z?.map((q,X)=>A(SelectItem,{value:B(q.value),disabled:q.disabled,children:E(q.labelI18n)??B(q.labelI18n)},`${B(q.value)}-${X}`))})})]})}export{SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue};
+import{jsx as z,jsxs as M}from"react/jsx-runtime";import{SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue,Select as K}from"@contractspec/lib.ui-kit-web/ui/select";import{useThemedPrimitive as O,useTranslatedText as T}from"../../primitives/themed";import{selectGroupKey as v,selectGroupLabel as w,selectOptionGroups as G,selectOptionLabel as L,selectOptionValue as D}from"./select-options";export function Select({options:Q,groups:R,value:E,onChange:U,placeholder:X,disabled:Y,className:Z,componentKey:$,themeVariant:k,placeholderI18n:P,...W}){const B=T(),N=O({defaultComponentKey:"Select",componentKey:$,themeVariant:k,className:Z}),C=G({options:Q,groups:R});return M(K,{value:E==null?"":D(E),onValueChange:(q)=>U?.(q),disabled:Y,...W,children:[z(SelectTrigger,{className:N.className,children:z(SelectValue,{placeholder:B(P??X)})}),z(SelectContent,{children:C.map((q,F)=>{const H=v(q,F),J=w(q,B);return M(SelectGroup,{children:[J?z(SelectLabel,{children:J}):null,q.options.map((A,f)=>z(SelectItem,{value:D(A.value),disabled:A.disabled,children:L(A,B)},`${H}-${D(A.value)}-${f}`))]},`${H}-${F}`)})})]})}export{SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue};

package/dist/browser/components/forms/controls/select-options.js

@@ -0,0 +1 @@
+export function selectOptionValue(e){return typeof e==="string"?e:String(e??"")}export function selectOptionLabel(e,t){return t(e.labelI18n)??selectOptionValue(e.labelI18n)}export function selectGroupLabel(e,t){return t(e.labelI18n??e.label)}export function selectGroupKey(e,t){return e.key??e.labelI18n??e.label??`group-${t}`}export function selectOptionGroups({options:e,groups:t}){return t?.length?t:[{options:e??[]}]}

package/dist/browser/theme/tailwind-css.js

@@ -1,9 +1,9 @@
-const a=["light","dark"];function n(e,s){const r=Object.entries(s).sort(([t],[i])=>t.localeCompare(i)).map(([t,i])=>`	${t}: ${i};`).join(`
+const o=["light","dark"],l={background:["card","popover"],foreground:["card-foreground","popover-foreground"],border:["input"]};function n(e,s){const t=Object.entries(s).sort(([r],[i])=>r.localeCompare(i)).map(([r,i])=>`	${r}: ${i};`).join(`
 `);return`${e} {
-${r}
-}`}function l(e){return Object.assign({},...Object.values(e.modes))}function d(e){if(e.startsWith("--ds-color-"))return`--color-${e.slice(11)}`;if(e.startsWith("--ds-radius-"))return`--radius-${e.slice(12)}`;if(e.startsWith("--ds-space-"))return`--spacing-${e.slice(11)}`;if(e.startsWith("--ds-typography-"))return`--text-${e.slice(16)}`;return}function o(e){return`@theme inline {
-${Object.keys(l(e)).sort().flatMap((r)=>{const t=d(r);return t?[`	${t}: var(${r});`]:[]}).join(`
+${t}
+}`}function c(e){return Object.assign({},...Object.values(e.modes))}function d(e){if(e.startsWith("--ds-color-"))return`--color-${e.slice(11)}`;if(e.startsWith("--ds-radius-"))return`--radius-${e.slice(12)}`;if(e.startsWith("--ds-space-"))return`--spacing-${e.slice(11)}`;if(e.startsWith("--ds-typography-"))return`--text-${e.slice(16)}`;return}function u(e){if(!e.startsWith("--ds-color-"))return[];const s=e.slice(11);return(l[s]??[]).map((r)=>`--color-${r}`)}function h(e){return`@theme inline {
+${Object.keys(c(e)).sort().flatMap((t)=>{const r=d(t),i=u(t);return[...r?[`	${r}: var(${t});`]:[],...i.map((a)=>`	${a}: var(${t});`)]}).join(`
 `)}
-}`}export function themeSpecToTailwindCss(e,s={}){return[s.includeCustomVariant?"@custom-variant dark (&:where(.dark, .dark *));":void 0,n(s.rootSelector??":root",e.light),n(s.darkSelector??".dark",e.dark),...Object.entries(e.modes).filter(([t])=>!a.includes(t)).map(([t,i])=>n(`[data-theme="${t}"]`,i)),s.includeTheme===!1?void 0:o(e)].filter(Boolean).join(`
+}`}export function themeSpecToTailwindCss(e,s={}){return[s.includeCustomVariant?"@custom-variant dark (&:where(.dark, .dark *));":void 0,n(s.rootSelector??":root",e.light),n(s.darkSelector??".dark",e.dark),...Object.entries(e.modes).filter(([r])=>!o.includes(r)).map(([r,i])=>n(`[data-theme="${r}"]`,i)),s.includeTheme===!1?void 0:h(e)].filter(Boolean).join(`
 
 `)}

package/dist/components/atoms/Input.js

@@ -1 +1 @@
-import{jsx as N}from"react/jsx-runtime";import{Input as j}from"@contractspec/lib.ui-kit-web/ui/input";import{mapKeyboardToWeb as B}from"../../lib/keyboard";import{useThemedTextField as C}from"../primitives/control";export function Input({value:A,defaultValue:D,onChange:E,onSubmit:O,onFocus:G,onBlur:H,placeholder:J,disabled:M,readOnly:P,maxLength:Q,name:R,className:S,keyboard:U,componentKey:X,themeVariant:Y,placeholderI18n:Z,ariaLabelI18n:$,...z}){const _=B(U),q=C({defaultComponentKey:"Input",componentKey:X,themeVariant:Y,className:S,style:z.style,placeholder:J,placeholderI18n:Z,ariaLabelI18n:$});return N(j,{...q.themed.props,...z,className:q.themed.className,style:q.themed.style,value:A,defaultValue:D,onChange:E,onFocus:G,onBlur:H,placeholder:q.placeholder,"aria-label":q.ariaLabel,disabled:M,readOnly:P,maxLength:Q,name:R,..._})}
+import{jsx as N}from"react/jsx-runtime";import{Input as j}from"@contractspec/lib.ui-kit-web/ui/input";import{mapKeyboardToWeb as B}from"../../lib/keyboard";import{useThemedTextField as C}from"../primitives/control";export function Input({value:D,defaultValue:E,onChange:G,onSubmit:O,onFocus:H,onBlur:J,placeholder:M,disabled:P,readOnly:Q,maxLength:R,name:S,className:U,keyboard:z,componentKey:X,themeVariant:Y,placeholderI18n:Z,ariaLabelI18n:$,...A}){const _=z?B(z):{},q=C({defaultComponentKey:"Input",componentKey:X,themeVariant:Y,className:U,style:A.style,placeholder:M,placeholderI18n:Z,ariaLabelI18n:$});return N(j,{...q.themed.props,..._,...A,className:q.themed.className,style:q.themed.style,value:D,defaultValue:E,onChange:G,onFocus:H,onBlur:J,placeholder:q.placeholder,"aria-label":q.ariaLabel,disabled:P,readOnly:Q,maxLength:R,name:S})}

package/dist/components/forms/controls/Autocomplete.d.ts

@@ -13,5 +13,13 @@ export interface AutocompleteProps extends ThemedPrimitiveProps {
     disabled?: boolean;
     className?: string;
     emptyText?: string;
+    loadingText?: string;
+    errorText?: string;
+    loading?: boolean;
+    error?: string | null;
+    id?: string;
+    name?: string;
+    'aria-invalid'?: boolean;
+    'aria-describedby'?: string;
 }
-export declare function Autocomplete({ query, options, selectedOptions, onQueryChange, onSelectOption, onRemoveOption, multiple, placeholder, placeholderI18n, readOnly, disabled, className, componentKey, themeVariant, emptyText, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete({ query, options, selectedOptions, onQueryChange, onSelectOption, onRemoveOption, multiple, placeholder, placeholderI18n, readOnly, disabled, className, componentKey, themeVariant, emptyText, loadingText, errorText, loading, error, id, name, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/controls/Autocomplete.js

@@ -1 +1 @@
-import{jsx as A,jsxs as J}from"react/jsx-runtime";import{Command as k,CommandEmpty as S,CommandGroup as b,CommandInput as f,CommandItem as C,CommandList as T}from"@contractspec/lib.ui-kit-web/ui/command";import{Text as Y}from"@contractspec/lib.ui-kit-web/ui/text";import{Button as V}from"../../atoms/Button";import{HStack as w,VStack as Z}from"../../layout/Stack";import{useThemedPrimitive as v,useTranslatedText as _}from"../../primitives/themed";function M(F){return typeof F==="string"?F:String(F??"")}export function Autocomplete({query:F,options:$,selectedOptions:U,onQueryChange:E,onSelectOption:G,onRemoveOption:H,multiple:L,placeholder:P,placeholderI18n:g,readOnly:W,disabled:X,className:q,componentKey:B,themeVariant:K,emptyText:N="No results found."}){const D=_(),Q=v({defaultComponentKey:"Autocomplete",componentKey:B,themeVariant:K,className:q});return J(Z,{gap:"sm",className:Q.className,children:[J(k,{shouldFilter:!1,className:"rounded-md border border-input",children:[A(f,{value:F,onValueChange:E,placeholder:D(g??P),disabled:X||W}),J(T,{children:[A(S,{children:D(N)}),A(b,{children:$.map((z)=>{const R=U.some((I)=>M(I.value)===M(z.value));return J(C,{value:D(z.labelI18n)??z.labelI18n,onSelect:()=>G?.(z),disabled:X||z.disabled||W,children:[J(Z,{gap:"xs",children:[A(Y,{children:D(z.labelI18n)}),z.descriptionI18n?A(Y,{className:"text-muted-foreground text-xs",children:D(z.descriptionI18n)}):null]}),R?A(Y,{className:"ml-auto text-muted-foreground text-xs",children:D("Selected")}):null]},M(z.value))})})]})]}),U.length?A(w,{gap:"sm",wrap:"wrap",children:U.map((z)=>A(V,{type:"button",variant:"outline",size:"sm",onClick:()=>H?.(z),disabled:!L||W||X,children:D(z.labelI18n)},`selected-${M(z.value)}`))}):null]})}
+import{jsx as v}from"react/jsx-runtime";import{Combobox as I}from"@contractspec/lib.ui-kit-web/ui/combobox";import{useThemedPrimitive as T,useTranslatedText as b}from"../../primitives/themed";function H(E){return typeof E==="string"?E:String(E??"")}function g(E,U){const F=new Set,J=[];for(const L of[...U,...E]){const M=H(L.value);if(F.has(M))continue;F.add(M);J.push(L)}return J}export function Autocomplete({query:E,options:U,selectedOptions:F,onQueryChange:J,onSelectOption:L,onRemoveOption:M,multiple:W,placeholder:X,placeholderI18n:Y,readOnly:_,disabled:j,className:q,componentKey:w,themeVariant:D,emptyText:K="No results found.",loadingText:N="Loading options...",errorText:Q="Unable to load options.",loading:R,error:Z,id:S,name:k,"aria-invalid":C,"aria-describedby":B}){const A=b(),$=T({defaultComponentKey:"Autocomplete",componentKey:w,themeVariant:D,className:q}),f=g(U,F),P=new Map(f.map((z)=>[H(z.value),z]));return v(I,{...$.props,id:S,name:k,className:$.className,options:f.map((z)=>({value:H(z.value),label:A(z.labelI18n)??z.labelI18n,description:z.descriptionI18n?A(z.descriptionI18n)??z.descriptionI18n:void 0,disabled:z.disabled})),value:W?void 0:H(F[0]?.value??""),selectedValues:W?F.map((z)=>H(z.value)):void 0,query:E,onQueryChange:J,onValueChange:(z)=>{const G=P.get(z);if(G)L?.(G)},onRemoveValue:(z)=>{const G=P.get(z);if(G)M?.(G)},multiple:W,placeholder:A(Y??X),searchPlaceholder:A(Y??X),emptyText:A(K),loadingText:A(N),errorText:A(Q),loading:R,error:Z?A(Z):null,readOnly:_,disabled:j,"aria-invalid":C,"aria-describedby":B})}

package/dist/components/forms/controls/Autocomplete.native.d.ts

@@ -13,5 +13,9 @@ export interface AutocompleteProps extends ThemedPrimitiveProps {
     disabled?: boolean;
     className?: string;
     emptyText?: string;
+    loadingText?: string;
+    errorText?: string;
+    loading?: boolean;
+    error?: string | null;
 }
-export declare function Autocomplete({ query, options, selectedOptions, onQueryChange, onSelectOption, onRemoveOption, multiple, placeholder, placeholderI18n, readOnly, disabled, className, componentKey, themeVariant, emptyText, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete({ query, options, selectedOptions, onQueryChange, onSelectOption, onRemoveOption, multiple, placeholder, placeholderI18n, readOnly, disabled, className, componentKey, themeVariant, emptyText, loadingText, errorText, loading, error, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/controls/Select.d.ts

@@ -1,8 +1,9 @@
-import type { FormOption } from '@contractspec/lib.contracts-spec/forms';
-import { SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@contractspec/lib.ui-kit-web/ui/select';
+import { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@contractspec/lib.ui-kit-web/ui/select';
 import { type ThemedPrimitiveProps } from '../../primitives/themed';
+import { type FormOption, type SelectOptionGroup } from './select-options';
 export interface SelectProps extends ThemedPrimitiveProps {
-    options?: FormOption[];
+    options?: readonly FormOption[];
+    groups?: readonly SelectOptionGroup[];
     value?: unknown;
     onChange?: (value: unknown) => void;
     placeholder?: string;
@@ -11,5 +12,6 @@ export interface SelectProps extends ThemedPrimitiveProps {
     name?: string;
     className?: string;
 }
-export declare function Select({ options, value, onChange, placeholder, disabled, className, componentKey, themeVariant, placeholderI18n, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
-export { SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue };
+export declare function Select({ options, groups, value, onChange, placeholder, disabled, className, componentKey, themeVariant, placeholderI18n, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export type { SelectOptionGroup };
+export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, };

package/dist/components/forms/controls/Select.js

@@ -1 +1 @@
-import{jsx as A,jsxs as k}from"react/jsx-runtime";import{SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue,Select as Y}from"@contractspec/lib.ui-kit-web/ui/select";import{useThemedPrimitive as Z,useTranslatedText as $}from"../../primitives/themed";function B(z){return typeof z==="string"?z:String(z??"")}export function Select({options:z,value:D,onChange:F,placeholder:H,disabled:J,className:L,componentKey:M,themeVariant:O,placeholderI18n:Q,...R}){const E=$(),U=Z({defaultComponentKey:"Select",componentKey:M,themeVariant:O,className:L});return k(Y,{value:D==null?"":B(D),onValueChange:(q)=>F?.(q),disabled:J,...R,children:[A(SelectTrigger,{className:U.className,children:A(SelectValue,{placeholder:E(Q??H)})}),A(SelectContent,{children:A(SelectGroup,{children:z?.map((q,X)=>A(SelectItem,{value:B(q.value),disabled:q.disabled,children:E(q.labelI18n)??B(q.labelI18n)},`${B(q.value)}-${X}`))})})]})}export{SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue};
+import{jsx as z,jsxs as M}from"react/jsx-runtime";import{SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue,Select as K}from"@contractspec/lib.ui-kit-web/ui/select";import{useThemedPrimitive as O,useTranslatedText as T}from"../../primitives/themed";import{selectGroupKey as v,selectGroupLabel as w,selectOptionGroups as G,selectOptionLabel as L,selectOptionValue as D}from"./select-options";export function Select({options:Q,groups:R,value:E,onChange:U,placeholder:X,disabled:Y,className:Z,componentKey:$,themeVariant:k,placeholderI18n:P,...W}){const B=T(),N=O({defaultComponentKey:"Select",componentKey:$,themeVariant:k,className:Z}),C=G({options:Q,groups:R});return M(K,{value:E==null?"":D(E),onValueChange:(q)=>U?.(q),disabled:Y,...W,children:[z(SelectTrigger,{className:N.className,children:z(SelectValue,{placeholder:B(P??X)})}),z(SelectContent,{children:C.map((q,F)=>{const H=v(q,F),J=w(q,B);return M(SelectGroup,{children:[J?z(SelectLabel,{children:J}):null,q.options.map((A,f)=>z(SelectItem,{value:D(A.value),disabled:A.disabled,children:L(A,B)},`${H}-${D(A.value)}-${f}`))]},`${H}-${F}`)})})]})}export{SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue};

package/dist/components/forms/controls/Select.native.d.ts

@@ -1,13 +1,15 @@
-import type { FormOption } from '@contractspec/lib.contracts-spec/forms';
-import { SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@contractspec/lib.ui-kit/ui/select';
+import { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@contractspec/lib.ui-kit/ui/select';
 import { type ThemedPrimitiveProps } from '../../primitives/themed';
+import { type FormOption, type SelectOptionGroup } from './select-options';
 export interface SelectProps extends ThemedPrimitiveProps {
-    options?: FormOption[];
+    options?: readonly FormOption[];
+    groups?: readonly SelectOptionGroup[];
     value?: unknown;
     onChange?: (value: unknown) => void;
     placeholder?: string;
     disabled?: boolean;
     className?: string;
 }
-export declare function Select({ options, value, onChange, placeholder, disabled, className, componentKey, themeVariant, placeholderI18n, }: SelectProps): import("react/jsx-runtime").JSX.Element;
-export { SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue };
+export declare function Select({ options, groups, value, onChange, placeholder, disabled, className, componentKey, themeVariant, placeholderI18n, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export type { SelectOptionGroup };
+export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, };

package/dist/components/forms/controls/index.d.ts

@@ -9,4 +9,4 @@ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGr
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from './InputOTP';
 export { LoadingButton, type LoadingButtonProps } from './LoadingButton';
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, type NativeSelectProps, } from './NativeSelect';
-export { Select, type SelectProps } from './Select';
+export { Select, type SelectOptionGroup, type SelectProps } from './Select';

package/dist/components/forms/controls/select-options.d.ts

@@ -0,0 +1,17 @@
+import type { FormOption } from '@contractspec/lib.contracts-spec/forms';
+export type { FormOption };
+export interface SelectOptionGroup {
+    key?: string;
+    label?: string;
+    labelI18n?: string;
+    options: readonly FormOption[];
+}
+export type SelectTextTranslator = (value: string | undefined) => string | undefined;
+export declare function selectOptionValue(value: unknown): string;
+export declare function selectOptionLabel(option: FormOption, translate: SelectTextTranslator): string;
+export declare function selectGroupLabel(group: SelectOptionGroup, translate: SelectTextTranslator): string | undefined;
+export declare function selectGroupKey(group: SelectOptionGroup, index: number): string;
+export declare function selectOptionGroups({ options, groups, }: {
+    options?: readonly FormOption[];
+    groups?: readonly SelectOptionGroup[];
+}): readonly SelectOptionGroup[];

package/dist/components/forms/controls/select-options.js

@@ -0,0 +1 @@
+export function selectOptionValue(e){return typeof e==="string"?e:String(e??"")}export function selectOptionLabel(e,t){return t(e.labelI18n)??selectOptionValue(e.labelI18n)}export function selectGroupLabel(e,t){return t(e.labelI18n??e.label)}export function selectGroupKey(e,t){return e.key??e.labelI18n??e.label??`group-${t}`}export function selectOptionGroups({options:e,groups:t}){return t?.length?t:[{options:e??[]}]}

package/dist/native/components/atoms/Input.js

@@ -1 +1 @@
-import{jsx as N}from"react/jsx-runtime";import{Input as j}from"@contractspec/lib.ui-kit-web/ui/input";import{mapKeyboardToWeb as B}from"../../lib/keyboard";import{useThemedTextField as C}from"../primitives/control";export function Input({value:A,defaultValue:D,onChange:E,onSubmit:O,onFocus:G,onBlur:H,placeholder:J,disabled:M,readOnly:P,maxLength:Q,name:R,className:S,keyboard:U,componentKey:X,themeVariant:Y,placeholderI18n:Z,ariaLabelI18n:$,...z}){const _=B(U),q=C({defaultComponentKey:"Input",componentKey:X,themeVariant:Y,className:S,style:z.style,placeholder:J,placeholderI18n:Z,ariaLabelI18n:$});return N(j,{...q.themed.props,...z,className:q.themed.className,style:q.themed.style,value:A,defaultValue:D,onChange:E,onFocus:G,onBlur:H,placeholder:q.placeholder,"aria-label":q.ariaLabel,disabled:M,readOnly:P,maxLength:Q,name:R,..._})}
+import{jsx as N}from"react/jsx-runtime";import{Input as j}from"@contractspec/lib.ui-kit-web/ui/input";import{mapKeyboardToWeb as B}from"../../lib/keyboard";import{useThemedTextField as C}from"../primitives/control";export function Input({value:D,defaultValue:E,onChange:G,onSubmit:O,onFocus:H,onBlur:J,placeholder:M,disabled:P,readOnly:Q,maxLength:R,name:S,className:U,keyboard:z,componentKey:X,themeVariant:Y,placeholderI18n:Z,ariaLabelI18n:$,...A}){const _=z?B(z):{},q=C({defaultComponentKey:"Input",componentKey:X,themeVariant:Y,className:U,style:A.style,placeholder:M,placeholderI18n:Z,ariaLabelI18n:$});return N(j,{...q.themed.props,..._,...A,className:q.themed.className,style:q.themed.style,value:D,defaultValue:E,onChange:G,onFocus:H,onBlur:J,placeholder:q.placeholder,"aria-label":q.ariaLabel,disabled:P,readOnly:Q,maxLength:R,name:S})}

package/dist/native/components/atoms/Input.native.js

@@ -1 +1 @@
-import{jsx as C}from"react/jsx-runtime";import{Input as _}from"@contractspec/lib.ui-kit/ui/input";import{mapKeyboardToNative as j}from"../../lib/keyboard";import{useThemedTextField as B}from"../primitives/control";export function Input({value:z,defaultValue:A,onChange:D,onSubmit:E,onFocus:G,onBlur:H,placeholder:J,disabled:M,readOnly:P,maxLength:Q,className:R,keyboard:U,componentKey:W,themeVariant:X,placeholderI18n:Y,ariaLabelI18n:Z,...$}){const w=j(U),q=B({defaultComponentKey:"Input",componentKey:W,themeVariant:X,className:R,placeholder:J,placeholderI18n:Y,ariaLabelI18n:Z});return C(_,{...q.themed.props,...$,className:q.themed.className,value:z,defaultValue:A,onChangeText:D,onSubmitEditing:E,onFocus:G,onBlur:H,placeholder:q.placeholder,accessibilityLabel:q.ariaLabel,editable:!M&&!P,maxLength:Q,...w})}export default Input;
+import{jsx as C}from"react/jsx-runtime";import{Input as _}from"@contractspec/lib.ui-kit/ui/input";import{mapKeyboardToNative as j}from"../../lib/keyboard";import{useThemedTextField as B}from"../primitives/control";export function Input({value:A,defaultValue:D,onChange:E,onSubmit:G,onFocus:H,onBlur:J,placeholder:M,disabled:P,readOnly:Q,maxLength:R,className:U,keyboard:z,componentKey:W,themeVariant:X,placeholderI18n:Y,ariaLabelI18n:Z,...$}){const w=z?j(z):{},q=B({defaultComponentKey:"Input",componentKey:W,themeVariant:X,className:U,placeholder:M,placeholderI18n:Y,ariaLabelI18n:Z});return C(_,{...q.themed.props,...$,className:q.themed.className,value:A,defaultValue:D,onChangeText:E,onSubmitEditing:G,onFocus:H,onBlur:J,placeholder:q.placeholder,accessibilityLabel:q.ariaLabel,editable:!P&&!Q,maxLength:R,...w})}export default Input;

package/dist/native/components/forms/controls/Autocomplete.js

@@ -1 +1 @@
-import{jsx as A,jsxs as J}from"react/jsx-runtime";import{Command as k,CommandEmpty as S,CommandGroup as b,CommandInput as f,CommandItem as C,CommandList as T}from"@contractspec/lib.ui-kit-web/ui/command";import{Text as Y}from"@contractspec/lib.ui-kit-web/ui/text";import{Button as V}from"../../atoms/Button";import{HStack as w,VStack as Z}from"../../layout/Stack";import{useThemedPrimitive as v,useTranslatedText as _}from"../../primitives/themed";function M(F){return typeof F==="string"?F:String(F??"")}export function Autocomplete({query:F,options:$,selectedOptions:U,onQueryChange:E,onSelectOption:G,onRemoveOption:H,multiple:L,placeholder:P,placeholderI18n:g,readOnly:W,disabled:X,className:q,componentKey:B,themeVariant:K,emptyText:N="No results found."}){const D=_(),Q=v({defaultComponentKey:"Autocomplete",componentKey:B,themeVariant:K,className:q});return J(Z,{gap:"sm",className:Q.className,children:[J(k,{shouldFilter:!1,className:"rounded-md border border-input",children:[A(f,{value:F,onValueChange:E,placeholder:D(g??P),disabled:X||W}),J(T,{children:[A(S,{children:D(N)}),A(b,{children:$.map((z)=>{const R=U.some((I)=>M(I.value)===M(z.value));return J(C,{value:D(z.labelI18n)??z.labelI18n,onSelect:()=>G?.(z),disabled:X||z.disabled||W,children:[J(Z,{gap:"xs",children:[A(Y,{children:D(z.labelI18n)}),z.descriptionI18n?A(Y,{className:"text-muted-foreground text-xs",children:D(z.descriptionI18n)}):null]}),R?A(Y,{className:"ml-auto text-muted-foreground text-xs",children:D("Selected")}):null]},M(z.value))})})]})]}),U.length?A(w,{gap:"sm",wrap:"wrap",children:U.map((z)=>A(V,{type:"button",variant:"outline",size:"sm",onClick:()=>H?.(z),disabled:!L||W||X,children:D(z.labelI18n)},`selected-${M(z.value)}`))}):null]})}
+import{jsx as v}from"react/jsx-runtime";import{Combobox as I}from"@contractspec/lib.ui-kit-web/ui/combobox";import{useThemedPrimitive as T,useTranslatedText as b}from"../../primitives/themed";function H(E){return typeof E==="string"?E:String(E??"")}function g(E,U){const F=new Set,J=[];for(const L of[...U,...E]){const M=H(L.value);if(F.has(M))continue;F.add(M);J.push(L)}return J}export function Autocomplete({query:E,options:U,selectedOptions:F,onQueryChange:J,onSelectOption:L,onRemoveOption:M,multiple:W,placeholder:X,placeholderI18n:Y,readOnly:_,disabled:j,className:q,componentKey:w,themeVariant:D,emptyText:K="No results found.",loadingText:N="Loading options...",errorText:Q="Unable to load options.",loading:R,error:Z,id:S,name:k,"aria-invalid":C,"aria-describedby":B}){const A=b(),$=T({defaultComponentKey:"Autocomplete",componentKey:w,themeVariant:D,className:q}),f=g(U,F),P=new Map(f.map((z)=>[H(z.value),z]));return v(I,{...$.props,id:S,name:k,className:$.className,options:f.map((z)=>({value:H(z.value),label:A(z.labelI18n)??z.labelI18n,description:z.descriptionI18n?A(z.descriptionI18n)??z.descriptionI18n:void 0,disabled:z.disabled})),value:W?void 0:H(F[0]?.value??""),selectedValues:W?F.map((z)=>H(z.value)):void 0,query:E,onQueryChange:J,onValueChange:(z)=>{const G=P.get(z);if(G)L?.(G)},onRemoveValue:(z)=>{const G=P.get(z);if(G)M?.(G)},multiple:W,placeholder:A(Y??X),searchPlaceholder:A(Y??X),emptyText:A(K),loadingText:A(N),errorText:A(Q),loading:R,error:Z?A(Z):null,readOnly:_,disabled:j,"aria-invalid":C,"aria-describedby":B})}

package/dist/native/components/forms/controls/Autocomplete.native.js

@@ -1 +1 @@
-import{jsx as A,jsxs as S}from"react/jsx-runtime";import{Text as J}from"@contractspec/lib.ui-kit/ui/text";import{Button as U}from"../../atoms/Button";import{Input as R}from"../../atoms/Input";import{HStack as B,VStack as W}from"../../layout/Stack";import{useThemedPrimitive as I,useTranslatedText as k}from"../../primitives/themed";function X(D){return typeof D==="string"?D:String(D??"")}export function Autocomplete({query:D,options:L,selectedOptions:M,onQueryChange:Y,onSelectOption:Z,onRemoveOption:$,multiple:H,placeholder:P,placeholderI18n:g,readOnly:F,disabled:G,className:q,componentKey:C,themeVariant:K,emptyText:N="No results found."}){const E=k(),Q=I({defaultComponentKey:"Autocomplete",componentKey:C,themeVariant:K,className:q});return S(W,{gap:"sm",className:Q.className,children:[A(R,{value:D,onChange:(z)=>{if(typeof z==="string")Y?.(z)},placeholder:E(g??P),disabled:G||F}),A(W,{gap:"xs",children:L.length?L.map((z)=>A(U,{variant:"ghost",onPress:()=>Z?.(z),disabled:G||z.disabled||F,children:A(J,{children:E(z.labelI18n)})},X(z.value))):A(J,{children:E(N)})}),M.length?A(B,{gap:"sm",wrap:"wrap",children:M.map((z)=>A(U,{variant:"outline",size:"sm",onPress:()=>$?.(z),disabled:!H||F||G,children:A(J,{children:E(z.labelI18n)})},`selected-${X(z.value)}`))}):null]})}
+import{jsx as A,jsxs as w}from"react/jsx-runtime";import{Text as F}from"@contractspec/lib.ui-kit/ui/text";import{Button as W}from"../../atoms/Button";import{Input as S}from"../../atoms/Input";import{HStack as V,VStack as X}from"../../layout/Stack";import{useThemedPrimitive as b,useTranslatedText as f}from"../../primitives/themed";function Y(E){return typeof E==="string"?E:String(E??"")}export function Autocomplete({query:E,options:L,selectedOptions:M,onQueryChange:Z,onSelectOption:$,onRemoveOption:H,multiple:P,placeholder:q,placeholderI18n:C,readOnly:G,disabled:J,className:K,componentKey:N,themeVariant:Q,emptyText:R="No results found.",loadingText:B="Loading options...",errorText:I="Unable to load options.",loading:k,error:U}){const D=f(),g=b({defaultComponentKey:"Autocomplete",componentKey:N,themeVariant:Q,className:K});return w(X,{gap:"sm",className:g.className,children:[A(S,{value:E,onChange:(z)=>{if(typeof z==="string")Z?.(z)},placeholder:D(C??q),disabled:J||G}),A(X,{gap:"xs",children:k?A(F,{children:D(B)}):U?A(F,{children:D(U)??D(I)}):L.length?L.map((z)=>A(W,{variant:"ghost",onPress:()=>$?.(z),disabled:J||z.disabled||G,children:A(F,{children:D(z.labelI18n)})},Y(z.value))):A(F,{children:D(R)})}),M.length?A(V,{gap:"sm",wrap:"wrap",children:M.map((z)=>A(W,{variant:"outline",size:"sm",onPress:()=>H?.(z),disabled:!P||G||J,children:A(F,{children:D(z.labelI18n)})},`selected-${Y(z.value)}`))}):null]})}

package/dist/native/components/forms/controls/Select.js

@@ -1 +1 @@
-import{jsx as A,jsxs as k}from"react/jsx-runtime";import{SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue,Select as Y}from"@contractspec/lib.ui-kit-web/ui/select";import{useThemedPrimitive as Z,useTranslatedText as $}from"../../primitives/themed";function B(z){return typeof z==="string"?z:String(z??"")}export function Select({options:z,value:D,onChange:F,placeholder:H,disabled:J,className:L,componentKey:M,themeVariant:O,placeholderI18n:Q,...R}){const E=$(),U=Z({defaultComponentKey:"Select",componentKey:M,themeVariant:O,className:L});return k(Y,{value:D==null?"":B(D),onValueChange:(q)=>F?.(q),disabled:J,...R,children:[A(SelectTrigger,{className:U.className,children:A(SelectValue,{placeholder:E(Q??H)})}),A(SelectContent,{children:A(SelectGroup,{children:z?.map((q,X)=>A(SelectItem,{value:B(q.value),disabled:q.disabled,children:E(q.labelI18n)??B(q.labelI18n)},`${B(q.value)}-${X}`))})})]})}export{SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue};
+import{jsx as z,jsxs as M}from"react/jsx-runtime";import{SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue,Select as K}from"@contractspec/lib.ui-kit-web/ui/select";import{useThemedPrimitive as O,useTranslatedText as T}from"../../primitives/themed";import{selectGroupKey as v,selectGroupLabel as w,selectOptionGroups as G,selectOptionLabel as L,selectOptionValue as D}from"./select-options";export function Select({options:Q,groups:R,value:E,onChange:U,placeholder:X,disabled:Y,className:Z,componentKey:$,themeVariant:k,placeholderI18n:P,...W}){const B=T(),N=O({defaultComponentKey:"Select",componentKey:$,themeVariant:k,className:Z}),C=G({options:Q,groups:R});return M(K,{value:E==null?"":D(E),onValueChange:(q)=>U?.(q),disabled:Y,...W,children:[z(SelectTrigger,{className:N.className,children:z(SelectValue,{placeholder:B(P??X)})}),z(SelectContent,{children:C.map((q,F)=>{const H=v(q,F),J=w(q,B);return M(SelectGroup,{children:[J?z(SelectLabel,{children:J}):null,q.options.map((A,f)=>z(SelectItem,{value:D(A.value),disabled:A.disabled,children:L(A,B)},`${H}-${D(A.value)}-${f}`))]},`${H}-${F}`)})})]})}export{SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue};

package/dist/native/components/forms/controls/Select.native.js

@@ -1 +1 @@
-import{jsx as B,jsxs as $}from"react/jsx-runtime";import{Select as X,SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue}from"@contractspec/lib.ui-kit/ui/select";import{useThemedPrimitive as Y,useTranslatedText as Z}from"../../primitives/themed";function A(z){return typeof z==="string"?z:String(z??"")}export function Select({options:z,value:D,onChange:F,placeholder:H,disabled:J,className:L,componentKey:M,themeVariant:O,placeholderI18n:Q}){const E=Z(),U=Y({defaultComponentKey:"Select",componentKey:M,themeVariant:O,className:L});return $(X,{value:D==null?void 0:{value:A(D),label:A(D)},onValueChange:(q)=>F?.(q?.value),children:[B(SelectTrigger,{disabled:J,className:U.className,children:B(SelectValue,{placeholder:E(Q??H)??""})}),B(SelectContent,{children:B(SelectGroup,{children:z?.map((q,W)=>B(SelectItem,{value:A(q.value),label:E(q.labelI18n)??A(q.labelI18n),disabled:q.disabled},`${A(q.value)}-${W}`))})})]})}export{SelectContent,SelectGroup,SelectItem,SelectTrigger,SelectValue};
+import{jsx as B,jsxs as X}from"react/jsx-runtime";import{Select as v,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue}from"@contractspec/lib.ui-kit/ui/select";import{useThemedPrimitive as G,useTranslatedText as _}from"../../primitives/themed";import{selectGroupKey as L,selectGroupLabel as j,selectOptionGroups as y,selectOptionLabel as W,selectOptionValue as A}from"./select-options";export function Select({options:Y,groups:Z,value:H,onChange:$,placeholder:k,disabled:P,className:R,componentKey:N,themeVariant:C,placeholderI18n:f}){const D=_(),w=G({defaultComponentKey:"Select",componentKey:N,themeVariant:C,className:R}),J=y({options:Y,groups:Z}),z=H==null?void 0:A(H),F=J.flatMap((q)=>q.options).find((q)=>A(q.value)===z),K=F?W(F,D)??A(F.value):z;return X(v,{value:z==null?void 0:{value:z,label:K??z},onValueChange:(q)=>$?.(q?.value),children:[B(SelectTrigger,{disabled:P,className:w.className,children:B(SelectValue,{placeholder:D(f??k)??""})}),B(SelectContent,{children:J.map((q,M)=>{const Q=L(q,M),U=j(q,D);return X(SelectGroup,{children:[U?B(SelectLabel,{children:U}):null,q.options.map((E,T)=>B(SelectItem,{value:A(E.value),label:W(E,D),disabled:E.disabled},`${Q}-${A(E.value)}-${T}`))]},`${Q}-${M}`)})})]})}export{SelectContent,SelectGroup,SelectItem,SelectLabel,SelectTrigger,SelectValue};

package/dist/native/components/forms/controls/select-options.js

@@ -0,0 +1 @@
+export function selectOptionValue(e){return typeof e==="string"?e:String(e??"")}export function selectOptionLabel(e,t){return t(e.labelI18n)??selectOptionValue(e.labelI18n)}export function selectGroupLabel(e,t){return t(e.labelI18n??e.label)}export function selectGroupKey(e,t){return e.key??e.labelI18n??e.label??`group-${t}`}export function selectOptionGroups({options:e,groups:t}){return t?.length?t:[{options:e??[]}]}

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

@@ -1,9 +1,9 @@
-const a=["light","dark"];function n(e,s){const r=Object.entries(s).sort(([t],[i])=>t.localeCompare(i)).map(([t,i])=>`	${t}: ${i};`).join(`
+const o=["light","dark"],l={background:["card","popover"],foreground:["card-foreground","popover-foreground"],border:["input"]};function n(e,s){const t=Object.entries(s).sort(([r],[i])=>r.localeCompare(i)).map(([r,i])=>`	${r}: ${i};`).join(`
 `);return`${e} {
-${r}
-}`}function l(e){return Object.assign({},...Object.values(e.modes))}function d(e){if(e.startsWith("--ds-color-"))return`--color-${e.slice(11)}`;if(e.startsWith("--ds-radius-"))return`--radius-${e.slice(12)}`;if(e.startsWith("--ds-space-"))return`--spacing-${e.slice(11)}`;if(e.startsWith("--ds-typography-"))return`--text-${e.slice(16)}`;return}function o(e){return`@theme inline {
-${Object.keys(l(e)).sort().flatMap((r)=>{const t=d(r);return t?[`	${t}: var(${r});`]:[]}).join(`
+${t}
+}`}function c(e){return Object.assign({},...Object.values(e.modes))}function d(e){if(e.startsWith("--ds-color-"))return`--color-${e.slice(11)}`;if(e.startsWith("--ds-radius-"))return`--radius-${e.slice(12)}`;if(e.startsWith("--ds-space-"))return`--spacing-${e.slice(11)}`;if(e.startsWith("--ds-typography-"))return`--text-${e.slice(16)}`;return}function u(e){if(!e.startsWith("--ds-color-"))return[];const s=e.slice(11);return(l[s]??[]).map((r)=>`--color-${r}`)}function h(e){return`@theme inline {
+${Object.keys(c(e)).sort().flatMap((t)=>{const r=d(t),i=u(t);return[...r?[`	${r}: var(${t});`]:[],...i.map((a)=>`	${a}: var(${t});`)]}).join(`
 `)}
-}`}export function themeSpecToTailwindCss(e,s={}){return[s.includeCustomVariant?"@custom-variant dark (&:where(.dark, .dark *));":void 0,n(s.rootSelector??":root",e.light),n(s.darkSelector??".dark",e.dark),...Object.entries(e.modes).filter(([t])=>!a.includes(t)).map(([t,i])=>n(`[data-theme="${t}"]`,i)),s.includeTheme===!1?void 0:o(e)].filter(Boolean).join(`
+}`}export function themeSpecToTailwindCss(e,s={}){return[s.includeCustomVariant?"@custom-variant dark (&:where(.dark, .dark *));":void 0,n(s.rootSelector??":root",e.light),n(s.darkSelector??".dark",e.dark),...Object.entries(e.modes).filter(([r])=>!o.includes(r)).map(([r,i])=>n(`[data-theme="${r}"]`,i)),s.includeTheme===!1?void 0:h(e)].filter(Boolean).join(`
 
 `)}

package/dist/theme/tailwind-css.js

@@ -1,9 +1,9 @@
-const a=["light","dark"];function n(e,s){const r=Object.entries(s).sort(([t],[i])=>t.localeCompare(i)).map(([t,i])=>`	${t}: ${i};`).join(`
+const o=["light","dark"];const l={background:["card","popover"],foreground:["card-foreground","popover-foreground"],border:["input"]};function n(e,s){const t=Object.entries(s).sort(([r],[i])=>r.localeCompare(i)).map(([r,i])=>`	${r}: ${i};`).join(`
 `);return`${e} {
-${r}
-}`}function l(e){return Object.assign({},...Object.values(e.modes))}function d(e){if(e.startsWith("--ds-color-"))return`--color-${e.slice(11)}`;if(e.startsWith("--ds-radius-"))return`--radius-${e.slice(12)}`;if(e.startsWith("--ds-space-"))return`--spacing-${e.slice(11)}`;if(e.startsWith("--ds-typography-"))return`--text-${e.slice(16)}`;return}function o(e){return`@theme inline {
-${Object.keys(l(e)).sort().flatMap((r)=>{const t=d(r);return t?[`	${t}: var(${r});`]:[]}).join(`
+${t}
+}`}function c(e){return Object.assign({},...Object.values(e.modes))}function d(e){if(e.startsWith("--ds-color-"))return`--color-${e.slice(11)}`;if(e.startsWith("--ds-radius-"))return`--radius-${e.slice(12)}`;if(e.startsWith("--ds-space-"))return`--spacing-${e.slice(11)}`;if(e.startsWith("--ds-typography-"))return`--text-${e.slice(16)}`;return}function u(e){if(!e.startsWith("--ds-color-"))return[];const s=e.slice(11);return(l[s]??[]).map((r)=>`--color-${r}`)}function h(e){return`@theme inline {
+${Object.keys(c(e)).sort().flatMap((t)=>{const r=d(t),i=u(t);return[...r?[`	${r}: var(${t});`]:[],...i.map((a)=>`	${a}: var(${t});`)]}).join(`
 `)}
-}`}export function themeSpecToTailwindCss(e,s={}){return[s.includeCustomVariant?"@custom-variant dark (&:where(.dark, .dark *));":void 0,n(s.rootSelector??":root",e.light),n(s.darkSelector??".dark",e.dark),...Object.entries(e.modes).filter(([t])=>!a.includes(t)).map(([t,i])=>n(`[data-theme="${t}"]`,i)),s.includeTheme===!1?void 0:o(e)].filter(Boolean).join(`
+}`}export function themeSpecToTailwindCss(e,s={}){return[s.includeCustomVariant?"@custom-variant dark (&:where(.dark, .dark *));":void 0,n(s.rootSelector??":root",e.light),n(s.darkSelector??".dark",e.dark),...Object.entries(e.modes).filter(([r])=>!o.includes(r)).map(([r,i])=>n(`[data-theme="${r}"]`,i)),s.includeTheme===!1?void 0:h(e)].filter(Boolean).join(`
 
 `)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/lib.design-system",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Design tokens and theming primitives",
   "keywords": [
     "contractspec",
@@ -31,12 +31,12 @@
   "sideEffects": false,
   "tree-shake": true,
   "dependencies": {
-    "@contractspec/lib.ai-agent": "8.0.12",
-    "@contractspec/lib.contracts-spec": "5.7.0",
-    "@contractspec/lib.contracts-runtime-client-react": "3.11.1",
-    "@contractspec/lib.presentation-runtime-react": "39.0.0",
-    "@contractspec/lib.ui-kit": "4.1.1",
-    "@contractspec/lib.ui-kit-web": "3.12.1",
+    "@contractspec/lib.ai-agent": "8.0.13",
+    "@contractspec/lib.contracts-spec": "6.0.0",
+    "@contractspec/lib.contracts-runtime-client-react": "3.12.0",
+    "@contractspec/lib.presentation-runtime-react": "39.0.1",
+    "@contractspec/lib.ui-kit": "4.1.2",
+    "@contractspec/lib.ui-kit-web": "3.13.0",
     "@hookform/resolvers": "5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -464,6 +464,12 @@
       "bun": "./dist/components/forms/controls/Select.js",
       "default": "./dist/components/forms/controls/Select.js"
     },
+    "./components/forms/controls/select-options": {
+      "types": "./dist/components/forms/controls/select-options.d.ts",
+      "browser": "./dist/browser/components/forms/controls/select-options.js",
+      "bun": "./dist/components/forms/controls/select-options.js",
+      "default": "./dist/components/forms/controls/select-options.js"
+    },
     "./components/forms/controls/Select.native": {
       "types": "./dist/components/forms/controls/Select.native.d.ts",
       "react-native": "./dist/native/components/forms/controls/Select.native.js",
@@ -2019,6 +2025,12 @@
         "bun": "./dist/components/forms/controls/Select.js",
         "default": "./dist/components/forms/controls/Select.js"
       },
+      "./components/forms/controls/select-options": {
+        "types": "./dist/components/forms/controls/select-options.d.ts",
+        "browser": "./dist/browser/components/forms/controls/select-options.js",
+        "bun": "./dist/components/forms/controls/select-options.js",
+        "default": "./dist/components/forms/controls/select-options.js"
+      },
       "./components/forms/controls/Select.native": {
         "types": "./dist/components/forms/controls/Select.native.d.ts",
         "react-native": "./dist/native/components/forms/controls/Select.native.js",