@contractspec/lib.design-system 4.2.0 → 4.4.0

package/dist/browser/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 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})});
+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 O,TimePicker as Q}from"../../components/forms/controls/DateTimeControls";import{FieldContent as U,FieldGroup as V,FieldLegend as X,FieldSet as Y,Field as Z,InputGroup as _,InputGroupAddon as $}from"../../components/forms/controls/Field";import{Select as g}from"../../components/forms/controls/Select";import{AddressField as v,PhoneField as B}from"./rich-fields";import{Actions as E,FieldArray as N,FieldArrayItem as W,FormRoot as f,InputGroupIcon as w,TranslatedButton as L,TranslatedCurrencyField as b,TranslatedDurationField as y,TranslatedFieldDescription as C,TranslatedFieldError as R,TranslatedFieldLabel as k,TranslatedInput as x,TranslatedInputGroupInput as S,TranslatedInputGroupText as D,TranslatedInputGroupTextarea as h,TranslatedNumberField as A,TranslatedPasswordInput as P,TranslatedPercentField as G,TranslatedTextarea as m}from"./shell";export const formRenderer=q({submitMode:"button",driver:j({FormRoot:f,Field:Z,FieldLabel:k,FieldDescription:C,FieldError:R,FieldContent:U,FieldGroup:V,FieldSet:Y,FieldLegend:X,FieldArray:N,FieldArrayItem:W,Actions:E,Input:x,NumberField:A,PercentField:G,CurrencyField:b,DurationField:y,PasswordInput:P,Textarea:m,InputGroup:_,InputGroupAddon:$,InputGroupInput:S,InputGroupTextarea:h,InputGroupText:D,InputGroupIcon:w,Select:g,Checkbox:H,RadioGroup:J,Switch:K,Autocomplete:z,AddressField:v,PhoneField:B,DateField:M,TimeField:Q,DateTimeField:O,Button:L})});

package/dist/browser/renderers/form-contract/rich-fields.js

@@ -1 +1 @@
-import{jsx as q,jsxs as Z}from"react/jsx-runtime";import{Input as D}from"../../components/atoms/Input";import{Select as Q}from"../../components/forms/controls/Select";import{VStack as U}from"../../components/layout/Stack";import{inputValue as G,optionValue as W}from"../../components/primitives/control";import{useTranslatedText as Y}from"../../components/primitives/themed";import{FORM_FALLBACK_TEXT as H,updateAddress as J,updatePhone as N}from"./values";export const AddressField=(b)=>{const z=Y();return Z(U,{gap:"sm",children:[q(D,{value:b.value?.line1??"",onChange:(g)=>b.onChange?.(J(b.value,"line1",G(g))),placeholder:z(b.parts?.placeholdersI18n?.line1??H.addressLine1),readOnly:b.readOnly,disabled:b.disabled}),q(D,{value:b.value?.line2??"",onChange:(g)=>b.onChange?.(J(b.value,"line2",G(g))),placeholder:z(b.parts?.placeholdersI18n?.line2??H.addressLine2),readOnly:b.readOnly,disabled:b.disabled}),q(D,{value:b.value?.city??"",onChange:(g)=>b.onChange?.(J(b.value,"city",G(g))),placeholder:z(b.parts?.placeholdersI18n?.city??H.city),readOnly:b.readOnly,disabled:b.disabled}),q(D,{value:b.value?.region??"",onChange:(g)=>b.onChange?.(J(b.value,"region",G(g))),placeholder:z(b.parts?.placeholdersI18n?.region??H.region),readOnly:b.readOnly,disabled:b.disabled}),q(D,{value:b.value?.postalCode??"",onChange:(g)=>b.onChange?.(J(b.value,"postalCode",G(g))),placeholder:z(b.parts?.placeholdersI18n?.postalCode??H.postalCode),readOnly:b.readOnly,disabled:b.disabled}),b.countryOptions?.length?q(Q,{value:b.value?.countryCode??"",onChange:(g)=>b.onChange?.(J(b.value,"countryCode",W(g))),options:b.countryOptions,disabled:b.disabled||b.readOnly}):q(D,{value:b.value?.countryCode??"",onChange:(g)=>b.onChange?.(J(b.value,"countryCode",G(g))),placeholder:z(b.parts?.placeholdersI18n?.countryCode??H.countryCode),readOnly:b.readOnly,disabled:b.disabled})]})},PhoneField=(b)=>{const z=Y();return Z(U,{gap:"sm",children:[b.countryOptions?.length?q(Q,{value:b.value?.countryCode??"",onChange:(g)=>b.onChange?.(N(b.value,"countryCode",W(g))),options:b.countryOptions,disabled:b.disabled||b.readOnly}):q(D,{value:b.value?.countryCode??"",onChange:(g)=>b.onChange?.(N(b.value,"countryCode",G(g))),placeholder:z(b.parts?.placeholdersI18n?.countryCode??H.countryCode),readOnly:b.readOnly,disabled:b.disabled}),q(D,{value:b.value?.nationalNumber??"",onChange:(g)=>b.onChange?.(N(b.value,"nationalNumber",G(g))),placeholder:z(b.parts?.placeholdersI18n?.nationalNumber??H.phoneNumber),readOnly:b.readOnly,disabled:b.disabled}),q(D,{value:b.value?.extension??"",onChange:(g)=>b.onChange?.(N(b.value,"extension",G(g))),placeholder:z(b.parts?.placeholdersI18n?.extension??H.extension),readOnly:b.readOnly,disabled:b.disabled})]})};
+import{jsx as z,jsxs as W}from"react/jsx-runtime";import{Input as G}from"../../components/atoms/Input";import{Select as N}from"../../components/forms/controls/Select";import{VStack as P}from"../../components/layout/Stack";import{inputValue as H,optionValue as Q}from"../../components/primitives/control";import{useTranslatedText as U}from"../../components/primitives/themed";import{FORM_FALLBACK_TEXT as J,updateAddress as q}from"./values";export{PhoneField}from"./phone-field";export const AddressField=(b)=>{const D=U();return W(P,{gap:"sm",children:[z(G,{value:b.value?.line1??"",onChange:(g)=>b.onChange?.(q(b.value,"line1",H(g))),placeholder:D(b.parts?.placeholdersI18n?.line1??J.addressLine1),readOnly:b.readOnly,disabled:b.disabled}),z(G,{value:b.value?.line2??"",onChange:(g)=>b.onChange?.(q(b.value,"line2",H(g))),placeholder:D(b.parts?.placeholdersI18n?.line2??J.addressLine2),readOnly:b.readOnly,disabled:b.disabled}),z(G,{value:b.value?.city??"",onChange:(g)=>b.onChange?.(q(b.value,"city",H(g))),placeholder:D(b.parts?.placeholdersI18n?.city??J.city),readOnly:b.readOnly,disabled:b.disabled}),z(G,{value:b.value?.region??"",onChange:(g)=>b.onChange?.(q(b.value,"region",H(g))),placeholder:D(b.parts?.placeholdersI18n?.region??J.region),readOnly:b.readOnly,disabled:b.disabled}),z(G,{value:b.value?.postalCode??"",onChange:(g)=>b.onChange?.(q(b.value,"postalCode",H(g))),placeholder:D(b.parts?.placeholdersI18n?.postalCode??J.postalCode),readOnly:b.readOnly,disabled:b.disabled}),b.countryOptions?.length?z(N,{value:b.value?.countryCode??"",onChange:(g)=>b.onChange?.(q(b.value,"countryCode",Q(g))),options:b.countryOptions,disabled:b.disabled||b.readOnly}):z(G,{value:b.value?.countryCode??"",onChange:(g)=>b.onChange?.(q(b.value,"countryCode",H(g))),placeholder:D(b.parts?.placeholdersI18n?.countryCode??J.countryCode),readOnly:b.readOnly,disabled:b.disabled})]})};

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

@@ -1 +1 @@
-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)})},TranslatedFieldDescription=(g)=>{const q=J();return z(U,{...g,children:q(g.children)})},TranslatedFieldError=(g)=>{const q=J();return z(K,{...g,children:q(g.children)})},TranslatedInput=(g)=>{const q=O();return z(E,{...g,placeholder:q(g.placeholder)})},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)})},TranslatedTextarea=(g)=>{const q=O();return z(M,{...g,placeholder:q(g.placeholder)})},TranslatedInputGroupInput=(g)=>{const q=O();return z(L,{...g,placeholder:q(g.placeholder)})},TranslatedInputGroupTextarea=(g)=>{const q=O();return z(G,{...g,placeholder:q(g.placeholder)})},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"})},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)})},FormRoot=({children:g,className:q})=>z(W,{gap:"lg",className:q,children:g}),FieldArray=({children:g,className:q})=>z(W,{gap:"md",className:q,children:g}),FieldArrayItem=({children:g,className:q})=>z(W,{gap:"sm",className:q,children:g}),Actions=({children:g,className:q})=>z(P,{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 L,InputGroupInput as V,InputGroupText as G,InputGroupTextarea as P}from"../../components/forms/controls/Field";import{HStack as S,VStack as W}from"../../components/layout/Stack";import{useTranslatedNode as O,useTranslatedText as Q}from"../../components/primitives/themed";export const TranslatedFieldLabel=(g)=>{const q=O();return z(L,{...g,children:q(g.children)})},TranslatedFieldDescription=(g)=>{const q=O();return z(U,{...g,children:q(g.children)})},TranslatedFieldError=(g)=>{const q=O();return z(K,{...g,children:q(g.children)})},TranslatedInput=(g)=>{const q=Q();return z(E,{...g,placeholder:q(g.placeholder)})},TranslatedNumberField=({format:g,valueScale:q,valueUnit:A,...J})=>z(TranslatedInput,{...J}),TranslatedPercentField=TranslatedNumberField,TranslatedCurrencyField=TranslatedNumberField,TranslatedDurationField=TranslatedNumberField,TranslatedPasswordInput=(g)=>{const q=Q(),{showLabelI18n:A,hideLabelI18n:J,...R}=g;return z(H,{...R,placeholder:q(g.placeholder),showLabel:q(A??g.showLabel),hideLabel:q(J??g.hideLabel)})},TranslatedTextarea=(g)=>{const q=Q();return z(M,{...g,placeholder:q(g.placeholder)})},TranslatedInputGroupInput=(g)=>{const q=Q();return z(V,{...g,placeholder:q(g.placeholder)})},TranslatedInputGroupTextarea=(g)=>{const q=Q();return z(P,{...g,placeholder:q(g.placeholder)})},TranslatedInputGroupText=(g)=>{const q=O();return z(G,{...g,children:q(g.children)})};const F={calendar:Y,clock:Z,info:X,mail:$,search:v,user:B};export const InputGroupIcon=({iconKey:g,label:q})=>{const A=F[g]??X;return z(A,{"aria-hidden":q?void 0:!0,"aria-label":q,className:"size-4"})},TranslatedButton=({children:g,onClick:q,onPress:A,...J})=>{const R=O();return z(D,{...J,onClick:q?()=>q():void 0,onPress:A??q,children:R(g)})},FormRoot=({children:g,className:q})=>z(W,{gap:"lg",className:q,children:g}),FieldArray=({children:g,className:q})=>z(W,{gap:"md",className:q,children:g}),FieldArrayItem=({children:g,className:q})=>z(W,{gap:"sm",className:q,children:g}),Actions=({children:g,className:q})=>z(S,{gap:"sm",wrap:"wrap",className:q,children:g});

package/dist/browser/renderers/form-contract/values.js

@@ -1 +1 @@
-export const FORM_FALLBACK_TEXT={addressLine1:"Address line 1",addressLine2:"Address line 2",city:"City",countryCode:"Country code",extension:"Extension",phoneNumber:"Phone number",postalCode:"Postal code",region:"Region"};export function updateAddress(e,o,n){return{line1:e?.line1??"",line2:e?.line2,city:e?.city,region:e?.region,postalCode:e?.postalCode,countryCode:e?.countryCode,[o]:n}}export function updatePhone(e,o,n){return{countryCode:e?.countryCode??"",nationalNumber:e?.nationalNumber??"",extension:e?.extension,e164:e?.e164,[o]:n}}
+export const FORM_FALLBACK_TEXT={addressLine1:"Address line 1",addressLine2:"Address line 2",city:"City",countryCode:"Country code",extension:"Extension",phoneNumber:"Phone number",postalCode:"Postal code",region:"Region"};export function updateAddress(e,o,n){return{line1:e?.line1??"",line2:e?.line2,city:e?.city,region:e?.region,postalCode:e?.postalCode,countryCode:e?.countryCode,[o]:n}}export function updatePhone(e,o,n){return{countryCode:e?.countryCode??"",countryIso2:e?.countryIso2,nationalNumber:e?.nationalNumber??"",extension:e?.extension,e164:e?.e164,[o]:n}}

package/dist/browser/shell.js

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

package/dist/components/data-view/DataViewGrid.d.ts

@@ -0,0 +1,12 @@
+import type { DataViewDensity, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import * as React from 'react';
+export interface DataViewGridProps<TItem = Record<string, unknown>> {
+    spec: DataViewSpec;
+    items: readonly TItem[];
+    className?: string;
+    renderActions?: (item: TItem) => React.ReactNode;
+    onSelect?: (item: TItem) => void;
+    emptyState?: React.ReactNode;
+    density?: DataViewDensity;
+}
+export declare function DataViewGrid<TItem = Record<string, unknown>>({ spec, items, className, renderActions, onSelect, emptyState, density, }: DataViewGridProps<TItem>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-view/DataViewGrid.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{cn as m}from"../../lib/utils";import{DataViewList as p}from"./DataViewList";export function DataViewGrid({spec:e,items:o,className:a,renderActions:c,onSelect:n,emptyState:s,density:t="comfortable"}){if(e.view.kind!=="grid")throw Error(`DataViewGrid received view kind "${e.view.kind}", expected "grid".`);const i=e.view,d=i.columns??3,l={...e,view:{kind:"list",layout:"card",fields:i.fields,primaryField:i.primaryField,secondaryFields:i.secondaryFields,filters:i.filters,filterScope:i.filterScope,actions:i.actions,collection:i.collection}};return r("div",{className:m("grid w-full gap-4",t==="compact"&&"gap-3",w(d),a),children:r(p,{spec:l,items:o,className:"contents",renderActions:c,onSelect:n,emptyState:s,density:t})})}function w(e){if(e<=1)return"grid-cols-1";if(e===2)return"md:grid-cols-2";if(e===4)return"md:grid-cols-2 xl:grid-cols-4";return"md:grid-cols-2 lg:grid-cols-3"}

package/dist/components/data-view/DataViewGrid.native.d.ts

@@ -0,0 +1,12 @@
+import type { DataViewDensity, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import * as React from 'react';
+export interface DataViewGridProps<TItem = Record<string, unknown>> {
+    spec: DataViewSpec;
+    items: readonly TItem[];
+    className?: string;
+    renderActions?: (item: TItem) => React.ReactNode;
+    onSelect?: (item: TItem) => void;
+    emptyState?: React.ReactNode;
+    density?: DataViewDensity;
+}
+export declare function DataViewGrid<TItem = Record<string, unknown>>({ spec, items, className, renderActions, onSelect, emptyState, density, }: DataViewGridProps<TItem>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-view/DataViewList.d.ts

@@ -1,4 +1,4 @@
-import type { DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import type { DataViewDensity, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
 import * as React from 'react';
 export interface DataViewListProps<TItem = Record<string, unknown>> {
     spec: DataViewSpec;
@@ -7,5 +7,6 @@ export interface DataViewListProps<TItem = Record<string, unknown>> {
     renderActions?: (item: TItem) => React.ReactNode;
     onSelect?: (item: TItem) => void;
     emptyState?: React.ReactNode;
+    density?: DataViewDensity;
 }
-export declare function DataViewList<TItem = Record<string, unknown>>({ spec, items, className, renderActions, onSelect, emptyState, }: DataViewListProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function DataViewList<TItem = Record<string, unknown>>({ spec, items, className, renderActions, onSelect, emptyState, density, }: DataViewListProps<TItem>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-view/DataViewList.js

@@ -1 +1 @@
-import{jsx as t,jsxs as m}from"react/jsx-runtime";import{resolveTranslationString as w,useDesignSystemTranslation as k}from"../../i18n/translation";import{cn as c}from"../../lib/utils";import{DisplayValue as f}from"./DataViewTable";export function DataViewList({spec:e,items:r,className:i,renderActions:d,onSelect:u,emptyState:g}){const v=k();if(e.view.kind!=="list")throw Error(`DataViewList received view kind "${e.view.kind}", expected "list".`);const n=e.view,o=n.fields,l=n.primaryField??o.find((a)=>a.key===n.primaryField)?.key??o[0]?.key;if(!r.length)return t("div",{className:c("flex w-full flex-col gap-4",i),children:g??t("div",{className:"rounded-md border border-muted-foreground/40 border-dashed p-8 text-center text-muted-foreground text-sm",children:"No records available."})});return t("div",{className:c("flex w-full flex-col gap-4",i),children:r.map((a,b)=>{const p=y(a);return m("button",{type:"button",className:c("flex w-full flex-col gap-2 rounded-lg border border-muted bg-card p-4 text-left shadow-sm transition hover:border-primary/40 hover:shadow-md focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",n.layout==="compact"&&"md:flex-row md:items-center md:gap-4"),onClick:()=>u?.(a),children:[m("div",{className:"flex flex-1 flex-col gap-1",children:[l?t("span",{className:"font-medium text-base text-foreground",children:t(f,{item:p,fields:o,fieldKey:l})}):null,t("div",{className:"flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground text-sm",children:D(n,l).map((s)=>m("span",{className:"flex items-center gap-1.5",children:[t("span",{className:"font-medium text-foreground/80",children:x(o,s,v)}),t("span",{children:t(f,{item:p,fields:o,fieldKey:s})})]},s))})]}),d?t("div",{className:"flex shrink-0 items-center gap-2",children:d(a)}):null]},b)})})}function y(e){if(e&&typeof e==="object")return e;return{}}function x(e,r,i){return w(e.find((d)=>d.key===r)?.label??r,i)}function D(e,r){if(e.secondaryFields?.length)return e.secondaryFields;return e.fields.map((i)=>i.key).filter((i)=>i!==r)}
+import{jsx as t,jsxs as m}from"react/jsx-runtime";import{resolveTranslationString as y,useDesignSystemTranslation as D}from"../../i18n/translation";import{cn as c}from"../../lib/utils";import{DisplayValue as u}from"./DataViewTable";export function DataViewList({spec:e,items:r,className:i,renderActions:d,onSelect:g,emptyState:v,density:p="comfortable"}){const b=D();if(e.view.kind!=="list")throw Error(`DataViewList received view kind "${e.view.kind}", expected "list".`);const n=e.view,a=n.fields,l=n.primaryField??a.find((o)=>o.key===n.primaryField)?.key??a[0]?.key;if(!r.length)return t("div",{className:c("flex w-full flex-col gap-4",i),children:v??t("div",{className:"rounded-md border border-muted-foreground/40 border-dashed p-8 text-center text-muted-foreground text-sm",children:"No records available."})});return t("div",{className:c("flex w-full flex-col",p==="compact"?"gap-2":"gap-4",i),children:r.map((o,w)=>{const f=k(o);return m("button",{type:"button",className:c("flex w-full flex-col gap-2 rounded-lg border border-muted bg-card p-4 text-left shadow-sm transition hover:border-primary/40 hover:shadow-md focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",p==="compact"&&"p-3",n.layout==="compact"&&"md:flex-row md:items-center md:gap-4"),onClick:()=>g?.(o),children:[m("div",{className:"flex flex-1 flex-col gap-1",children:[l?t("span",{className:"font-medium text-base text-foreground",children:t(u,{item:f,fields:a,fieldKey:l})}):null,t("div",{className:"flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground text-sm",children:x(n,l).map((s)=>m("span",{className:"flex items-center gap-1.5",children:[t("span",{className:"font-medium text-foreground/80",children:V(a,s,b)}),t("span",{children:t(u,{item:f,fields:a,fieldKey:s})})]},s))})]}),d?t("div",{className:"flex shrink-0 items-center gap-2",children:d(o)}):null]},w)})})}function k(e){if(e&&typeof e==="object")return e;return{}}function V(e,r,i){return y(e.find((d)=>d.key===r)?.label??r,i)}function x(e,r){if(e.secondaryFields?.length)return e.secondaryFields;return e.fields.map((i)=>i.key).filter((i)=>i!==r)}

package/dist/components/data-view/DataViewList.native.d.ts

@@ -0,0 +1,12 @@
+import type { DataViewDensity, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import * as React from 'react';
+export interface DataViewListProps<TItem = Record<string, unknown>> {
+    spec: DataViewSpec;
+    items: readonly TItem[];
+    className?: string;
+    renderActions?: (item: TItem) => React.ReactNode;
+    onSelect?: (item: TItem) => void;
+    emptyState?: React.ReactNode;
+    density?: DataViewDensity;
+}
+export declare function DataViewList<TItem = Record<string, unknown>>({ spec, items, className, renderActions, onSelect, emptyState, density, }: DataViewListProps<TItem>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-view/DataViewRenderer.d.ts

@@ -1,4 +1,4 @@
-import type { DataViewFilterSet, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import type { DataViewCollectionMode, DataViewDataDepth, DataViewDensity, DataViewFilterSet, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
 import * as React from 'react';
 export interface DataViewRendererProps {
     spec: DataViewSpec;
@@ -13,6 +13,15 @@ export interface DataViewRendererProps {
     headerActions?: React.ReactNode;
     emptyState?: React.ReactNode;
     footer?: React.ReactNode;
+    viewMode?: DataViewCollectionMode;
+    defaultViewMode?: DataViewCollectionMode;
+    onViewModeChange?: (mode: DataViewCollectionMode) => void;
+    density?: DataViewDensity;
+    defaultDensity?: DataViewDensity;
+    onDensityChange?: (density: DataViewDensity) => void;
+    dataDepth?: DataViewDataDepth;
+    defaultDataDepth?: DataViewDataDepth;
+    onDataDepthChange?: (dataDepth: DataViewDataDepth) => void;
     search?: string;
     onSearchChange?: (value: string) => void;
     filters?: Record<string, unknown> | DataViewFilterSet;
@@ -24,4 +33,4 @@ export interface DataViewRendererProps {
     };
     onPageChange?: (page: number) => void;
 }
-export declare function DataViewRenderer({ spec, items, item, className, renderActions, onSelect, onRowClick, toolbar, loading, headerActions, emptyState, footer, search, onSearchChange, filters, onFilterChange, pagination, onPageChange, }: DataViewRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataViewRenderer({ spec, items, item, className, renderActions, onSelect, onRowClick, toolbar, loading, headerActions, emptyState, footer, viewMode, defaultViewMode, onViewModeChange, density, defaultDensity, onDensityChange, dataDepth, defaultDataDepth, onDataDepthChange, search, onSearchChange, filters, onFilterChange, pagination, onPageChange, }: DataViewRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-view/DataViewRenderer.js

@@ -1 +1 @@
-import{jsx as J,jsxs as c,Fragment as p}from"react/jsx-runtime";import{resolveDataViewFilters as S}from"@contractspec/lib.contracts-spec/data-views";import{Pagination as d}from"@contractspec/lib.ui-kit-web/ui/atoms/Pagination";import{VStack as h}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as f}from"@contractspec/lib.ui-kit-web/ui/text";import*as L from"react";import{resolveTranslationString as V,useDesignSystemTranslation as u}from"../../i18n/translation";import{FiltersToolbar as m}from"../molecules/FiltersToolbar";import{DataViewDetail as v}from"./DataViewDetail";import{DataViewList as b}from"./DataViewList";import{DataViewTable as y}from"./DataViewTable";export function DataViewRenderer({spec:B,items:G=[],item:X=null,className:M,renderActions:$,onSelect:q,onRowClick:P,toolbar:R,loading:T,headerActions:Y,emptyState:Q,footer:j,search:w,onSearchChange:_,filters:I,onFilterChange:Z,pagination:K,onPageChange:D}){const z=u(),O=L.useMemo(()=>S({filters:B.view.filters,scope:B.view.filterScope,user:g(I)}),[I,B.view.filterScope,B.view.filters]),N=L.useMemo(()=>{if(B.view.filterScope){const E=Object.entries(O.user).map(([H,W])=>({key:H,label:`${A(B,H)}: ${F(W)}`,onRemove:()=>{const{[H]:r,...C}=O.user;Z?.(C)}})),U=O.lockedChips==="hidden"?[]:Object.entries(O.locked).map(([H,W])=>({key:`locked-${H}`,label:`${A(B,H)}: ${F(W)}`,disabled:!0}));return[...E,...U]}return I?Object.entries(I).map(([E,U])=>({key:E,label:`${E}: ${String(U)}`,onRemove:()=>{const{[E]:H,...W}=I;Z?.(W)}})):[]},[I,Z,O,B]),k=B.view.filterScope?Object.keys(O.user).length>0:Boolean(I&&Object.keys(I).length>0),x=L.useMemo(()=>{switch(B.view.kind){case"list":return J(b,{spec:B,items:G,className:M,renderActions:$,onSelect:q,emptyState:Q});case"table":return J(y,{spec:B,items:G,className:M,onRowClick:P,toolbar:R,loading:T,emptyState:Q,headerActions:Y,footer:j});case"detail":return J(v,{spec:B,item:X,className:M,emptyState:Q,headerActions:Y});case"grid":{const E=B.view,U={kind:"list",layout:"card",fields:E.fields,filters:E.filters,actions:E.actions,primaryField:E.primaryField,secondaryFields:E.secondaryFields,filterScope:E.filterScope},H={...B,view:U};return J(b,{spec:H,items:G,className:M,renderActions:$,onSelect:q,emptyState:Q})}default:return J(f,{className:M,children:V("Unsupported data view kind",z)})}},[B,G,X,M,$,q,P,R,T,Y,Q,j,z]);if(!(B.view.kind==="list"||B.view.kind==="table"||B.view.kind==="grid"))return J(p,{children:x});return c(h,{gap:"lg",children:[(B.view.filters?.length||_||N.length)&&J(m,{searchValue:w,onSearchChange:_,searchPlaceholder:V("Search...",z)??"Search...",activeChips:N,onClearAll:k?()=>Z?.({}):void 0,right:B.view.kind==="table"?void 0:Y}),x,K&&K.total>0&&J(d,{currentPage:K.page,totalPages:Math.ceil(K.total/K.pageSize),totalItems:K.total,itemsPerPage:K.pageSize,onPageChange:(E)=>D?.(E),onItemsPerPageChange:(E)=>{D?.(1)},showItemsPerPage:!1})]})}function g(B){if(!B)return;return Object.fromEntries(Object.entries(B??{}).filter((G)=>Boolean(G[1]&&typeof G[1]==="object"&&"kind"in G[1]&&typeof G[1].kind==="string")))}function A(B,G){return B.view.filters?.find((X)=>X.key===G)?.label??G}function F(B){if(!B)return"";if(B.kind==="single")return String(B.value);if(B.kind==="multi")return B.values.map(String).join(", ");if(B.kind==="range")return[B.from==null?"":String(B.from),B.to==null?"":String(B.to)].filter(Boolean).join(" - ");return`${B.mode}(${B.clauses.length})`}
+import{jsx as Y,jsxs as A,Fragment as sB}from"react/jsx-runtime";import{resolveDataViewFilters as EB}from"@contractspec/lib.contracts-spec/data-views";import{Pagination as NB}from"@contractspec/lib.ui-kit-web/ui/atoms/Pagination";import{VStack as RB}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as TB}from"@contractspec/lib.ui-kit-web/ui/text";import{Grid3X3 as AB,List as MB,Table2 as jB}from"lucide-react";import*as q from"react";import{resolveTranslationString as a,useDesignSystemTranslation as kB}from"../../i18n/translation";import{Button as T}from"../atoms/Button";import{Input as F}from"../atoms/Input";import{FiltersToolbar as VB}from"../molecules/FiltersToolbar";import{DATA_VIEW_DATA_DEPTHS as _B,formatDataViewDataDepth as SB,getDataViewCollectionConfig as bB,getDataViewCollectionViewModesConfig as xB,isDataViewCollectionKind as t,projectCollectionDataDepth as FB,resolveAllowedCollectionModes as wB,resolveCollectionDataDepth as mB,resolveCollectionDensity as CB,resolveCollectionView as DB}from"./collection";import{DataViewDetail as yB}from"./DataViewDetail";import{DataViewGrid as gB}from"./DataViewGrid";import{DataViewList as hB}from"./DataViewList";import{DataViewTable as uB}from"./DataViewTable";export function DataViewRenderer({spec:B,items:J=[],item:Q=null,className:Z,renderActions:O,onSelect:$,onRowClick:H,toolbar:M,loading:K,headerActions:X,emptyState:E,footer:C,viewMode:D,defaultViewMode:y,onViewModeChange:UB,density:g,defaultDensity:h,onDensityChange:YB,dataDepth:u,defaultDataDepth:v,onDataDepthChange:ZB,search:$B,onSearchChange:d,filters:z,onFilterChange:N,pagination:L,onPageChange:p}){const S=kB(),b=q.useMemo(()=>wB(B.view),[B.view]),[HB,WB]=q.useState(y),f=D??HB??y,j=q.useMemo(()=>DB(B,f),[f,B]),[XB,zB]=q.useState(h),P=CB(B,{density:g??XB,defaultDensity:h}),[GB,qB]=q.useState(v),k=mB(B,{dataDepth:u??GB,defaultDataDepth:v}),KB=bB(B.view),LB=xB(B.view),W=KB?.toolbar,V=W?.enabled!==!1,c=W?.filters!==!1,_=W?.actions??"end",r=_==="start"||_==="both"?X:void 0,o=_==="end"||_==="both"?X:void 0,s=typeof W?.search==="object"?W.search:void 0,n=Boolean(V&&W?.search!==!1&&d),G=q.useMemo(()=>EB({filters:B.view.filters,scope:B.view.filterScope,user:vB(z)}),[z,B.view.filterScope,B.view.filters]),i=q.useMemo(()=>{if(B.view.filterScope){const U=Object.entries(G.user).map(([I,R])=>({key:I,label:`${e(B,I)}: ${BB(R)}`,onRemove:()=>{const{[I]:iB,...PB}=G.user;N?.(PB)}})),x=G.lockedChips==="hidden"?[]:Object.entries(G.locked).map(([I,R])=>({key:`locked-${I}`,label:`${e(B,I)}: ${BB(R)}`,disabled:!0}));return[...U,...x]}return z?Object.entries(z).map(([U,x])=>({key:U,label:`${U}: ${String(x)}`,onRemove:()=>{const{[U]:I,...R}=z;N?.(R)}})):[]},[z,N,G,B]),IB=B.view.filterScope?Object.keys(G.user).length>0:Boolean(z&&Object.keys(z).length>0),l=q.useMemo(()=>{const U=t(B.view.kind)?FB(j.spec,k):B;switch(U.view.kind){case"list":return Y(hB,{spec:U,items:J,className:Z,renderActions:O,onSelect:$,emptyState:E,density:P});case"table":return Y(uB,{spec:U,items:J,className:Z,onRowClick:H,toolbar:M,loading:K,emptyState:E,headerActions:V?void 0:X,footer:C,density:P});case"detail":return Y(yB,{spec:B,item:Q,className:Z,emptyState:E,headerActions:X});case"grid":return Y(gB,{spec:U,items:J,className:Z,renderActions:O,onSelect:$,emptyState:E,density:P});default:return Y(TB,{className:Z,children:a("Unsupported data view kind",S)})}},[B,j.spec,J,Q,Z,O,$,H,M,K,X,E,C,P,k,V,S]);if(!(B.view.kind==="list"||B.view.kind==="table"||B.view.kind==="grid"))return Y(sB,{children:l});return A(RB,{gap:"lg",children:[V&&(c&&B.view.filters?.length||n||i.length||b.length>1||W?.density||W?.dataDepth||r||o)?A(VB,{searchValue:$B,onSearchChange:n?d:void 0,searchPlaceholder:s?.placeholder??a("Search...",S)??"Search...",debounceMs:s?.debounceMs,activeChips:i,onClearAll:IB?()=>N?.({}):void 0,right:o,children:[r,b.length>1&&W?.viewMode!==!1?Y(fB,{mode:j.mode,allowedModes:b,labels:t(B.view.kind)?LB?.labels:void 0,onChange:(U)=>{if(U===j.mode)return;if(D===void 0)WB(U);UB?.(U)}}):null,W?.density?Y(cB,{density:P,onChange:(U)=>{if(U===P)return;if(g===void 0)zB(U);YB?.(U)}}):null,W?.dataDepth?Y(rB,{dataDepth:k,onChange:(U)=>{if(U===k)return;if(u===void 0)qB(U);ZB?.(U)}}):null,c?Y(dB,{filters:B.view.filters,values:G.user,lockedKeys:Object.keys(G.locked),onFilterChange:N}):null]}):null,l,L&&L.total>0&&Y(NB,{currentPage:L.page,totalPages:Math.ceil(L.total/L.pageSize),totalItems:L.total,itemsPerPage:L.pageSize,onPageChange:(U)=>p?.(U),onItemsPerPageChange:(U)=>{p?.(1)},showItemsPerPage:!1})]})}function vB(B){if(!B)return;return Object.fromEntries(Object.entries(B??{}).filter((J)=>Boolean(J[1]&&typeof J[1]==="object"&&"kind"in J[1]&&typeof J[1].kind==="string")))}function e(B,J){return B.view.filters?.find((Q)=>Q.key===J)?.label??J}function BB(B){if(!B)return"";if(B.kind==="single")return String(B.value);if(B.kind==="multi")return B.values.map(String).join(", ");if(B.kind==="range")return[B.from==null?"":String(B.from),B.to==null?"":String(B.to)].filter(Boolean).join(" - ");return`${B.mode}(${B.clauses.length})`}function dB({filters:B,values:J,lockedKeys:Q,onFilterChange:Z}){if(!B?.length||!Z)return null;const O=new Set(Q),$=B.filter((H)=>H.type!=="search"&&!O.has(H.key));if($.length===0)return null;return Y("div",{className:"flex flex-wrap items-center gap-2",children:$.map((H)=>Y(pB,{filter:H,value:J[H.key],values:J,onFilterChange:Z},H.key))})}function pB({filter:B,value:J,values:Q,onFilterChange:Z}){if(B.type==="boolean"){const O=J?.kind==="single"?J.value===!0:void 0;return A(T,{size:"sm",variant:"outline",onPress:()=>JB(Q,B.key,O===void 0?!0:!O,Z),children:[B.label,": ",O?"Oui":"Non"]})}if(B.valueMode==="range"){const O=J?.kind==="range"?J:void 0;return A("div",{className:"flex min-w-0 items-center gap-2",children:[Y(F,{type:w(B),inputMode:m(B),value:O?.from==null?"":String(O.from),onChange:($)=>OB(Q,B,"from",$.currentTarget.value,Z),placeholder:`${B.label} min`,className:"h-9 w-28"}),Y(F,{type:w(B),inputMode:m(B),value:O?.to==null?"":String(O.to),onChange:($)=>OB(Q,B,"to",$.currentTarget.value,Z),placeholder:`${B.label} max`,className:"h-9 w-28"})]})}return Y(F,{type:w(B),inputMode:m(B),value:J?.kind==="single"?String(J.value):"",onChange:(O)=>JB(Q,B.key,QB(B,O.currentTarget.value),Z),placeholder:B.label,className:"h-9 w-36"})}function JB(B,J,Q,Z){const O={...B};if(Q===void 0||Q==="")delete O[J];else O[J]={kind:"single",value:Q};Z(O)}function OB(B,J,Q,Z,O){const $=B[J.key],H=$?.kind==="range"?$:{},M=QB(J,Z),K={...H,[Q]:M};if(K.from==null&&K.to==null){const X={...B};delete X[J.key];O(X);return}O({...B,[J.key]:{kind:"range",from:K.from,to:K.to}})}function QB(B,J){if(J==="")return;switch(B.type){case"number":case"percent":case"currency":case"duration":{const Q=Number(J);return Number.isFinite(Q)?Q:void 0}default:return J}}function w(B){switch(B.type){case"number":case"percent":case"currency":case"duration":return"number";case"date":return"date";case"time":return"time";case"datetime":return"datetime-local";default:return"text"}}function m(B){switch(B.type){case"number":case"percent":case"currency":case"duration":return"decimal";default:return}}function fB({mode:B,allowedModes:J,labels:Q,onChange:Z}){return Y("div",{className:"flex items-center gap-1 rounded-md border bg-background p-1",children:J.map((O)=>{const $=oB(O);return Y(T,{size:"sm",variant:O===B?"default":"ghost",onPress:()=>Z(O),ariaLabelI18n:Q?.[O]??O,children:Y($,{className:"h-4 w-4"})},O)})})}function cB({density:B,onChange:J}){return A("div",{className:"flex items-center gap-1 rounded-md border bg-background p-1",children:[Y(T,{size:"sm",variant:B==="comfortable"?"default":"ghost",onPress:()=>J("comfortable"),children:"Comfort"}),Y(T,{size:"sm",variant:B==="compact"?"default":"ghost",onPress:()=>J("compact"),children:"Compact"})]})}function rB({dataDepth:B,onChange:J}){return Y("div",{className:"flex items-center gap-1 rounded-md border bg-background p-1",children:_B.map((Q)=>Y(T,{size:"sm",variant:B===Q?"default":"ghost",onPress:()=>J(Q),children:SB(Q)},Q))})}function oB(B){if(B==="grid")return AB;if(B==="table")return jB;return MB}

package/dist/components/data-view/DataViewRenderer.native.d.ts

@@ -1,4 +1,4 @@
-import type { DataViewFilterSet, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import type { DataViewCollectionMode, DataViewDataDepth, DataViewDensity, DataViewFilterSet, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
 import * as React from 'react';
 export interface DataViewRendererProps {
     spec: DataViewSpec;
@@ -13,6 +13,15 @@ export interface DataViewRendererProps {
     headerActions?: React.ReactNode;
     emptyState?: React.ReactNode;
     footer?: React.ReactNode;
+    viewMode?: DataViewCollectionMode;
+    defaultViewMode?: DataViewCollectionMode;
+    onViewModeChange?: (mode: DataViewCollectionMode) => void;
+    density?: DataViewDensity;
+    defaultDensity?: DataViewDensity;
+    onDensityChange?: (density: DataViewDensity) => void;
+    dataDepth?: DataViewDataDepth;
+    defaultDataDepth?: DataViewDataDepth;
+    onDataDepthChange?: (dataDepth: DataViewDataDepth) => void;
     search?: string;
     onSearchChange?: (value: string) => void;
     filters?: Record<string, unknown> | DataViewFilterSet;
@@ -24,4 +33,4 @@ export interface DataViewRendererProps {
     };
     onPageChange?: (page: number) => void;
 }
-export declare function DataViewRenderer({ spec, items, item, className, renderActions, onSelect, onRowClick, toolbar, loading, headerActions, emptyState, footer, search, onSearchChange, filters, onFilterChange, pagination, onPageChange, }: DataViewRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataViewRenderer({ spec, items, item, className, renderActions, onSelect, onRowClick, toolbar, loading, headerActions, emptyState, footer, viewMode, defaultViewMode, onViewModeChange, density, defaultDensity, onDensityChange, dataDepth, defaultDataDepth, onDataDepthChange, search, onSearchChange, filters, onFilterChange, pagination, onPageChange, }: DataViewRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-view/DataViewTable.d.ts

@@ -1,4 +1,4 @@
-import type { DataViewField, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import type { DataViewDensity, DataViewField, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
 import * as React from 'react';
 export interface DataViewTableProps {
     spec: DataViewSpec;
@@ -10,10 +10,11 @@ export interface DataViewTableProps {
     emptyState?: React.ReactNode;
     headerActions?: React.ReactNode;
     footer?: React.ReactNode;
+    density?: DataViewDensity;
 }
-export declare function DataViewTable({ spec, items, className, onRowClick, toolbar, loading, emptyState, headerActions, footer, }: DataViewTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataViewTable({ spec, items, className, onRowClick, toolbar, loading, emptyState, headerActions, footer, density, }: DataViewTableProps): import("react/jsx-runtime").JSX.Element;
 export declare function DisplayValue({ item, fields, fieldKey, }: {
     item: Record<string, unknown>;
     fields: DataViewField[];
     fieldKey: string;
-}): "" | import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | "";

package/dist/components/data-view/DataViewTable.js

@@ -1 +1 @@
-import{jsx as E,jsxs as V}from"react/jsx-runtime";import{useDataViewTable as A}from"@contractspec/lib.presentation-runtime-react";import{HStack as F,VStack as h}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as X}from"@contractspec/lib.ui-kit-web/ui/text";import*as C from"react";import{resolveTranslationString as W,useDesignSystemTranslation as K}from"../../i18n/translation";import{DataTable as R}from"../data-table/DataTable";import{DataViewFormattedValue as Y,getAtPath as g}from"./utils";export function DataViewTable({spec:q,items:J,className:L,onRowClick:G,toolbar:O,loading:Z,emptyState:$,headerActions:B,footer:H}){const Q=K();if(q.view.kind!=="table")throw Error(`DataViewTable received view kind "${q.view.kind}", expected "table".`);const M=q.view,P=C.useMemo(()=>(M.rowExpansion?.fields??[]).map((z)=>M.fields.find((I)=>I.key===z)).filter((z)=>Boolean(z)),[M.fields,M.rowExpansion?.fields]),N=A({spec:q,data:J,renderValue:({value:z,field:I})=>E(Y,{value:z,format:I.format}),renderExpandedContent:P.length>0?({item:z,fields:I})=>E(h,{gap:"sm",className:"py-2",children:I.map((U)=>V(F,{justify:"between",align:"start",children:[E(X,{className:"font-medium text-muted-foreground text-sm",children:W(U.label,Q)}),E(X,{className:"text-right text-sm",children:E(DisplayValue,{item:z,fields:I,fieldKey:U.key})})]},U.key))}):void 0});return E(R,{controller:N,className:L,title:W(q.meta.title,Q),description:W(q.meta.description,Q),toolbar:O,loading:Z,headerActions:B,emptyState:$,footer:H,onRowPress:G?(z)=>G(z.original):void 0})}function D(q,J){return q.find((L)=>L.key===J)}export function DisplayValue({item:q,fields:J,fieldKey:L}){const G=D(J,L);if(!G)return"";const O=g(q,G.dataPath);return E(Y,{value:O,format:G.format})}
+import{jsx as E,jsxs as _}from"react/jsx-runtime";import{useDataViewTable as C}from"@contractspec/lib.presentation-runtime-react";import{HStack as K,VStack as R}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as Z}from"@contractspec/lib.ui-kit-web/ui/text";import*as $ from"react";import{resolveTranslationString as X,useDesignSystemTranslation as g}from"../../i18n/translation";import{DataTable as D}from"../data-table/DataTable";import{DataViewFormattedValue as B,getAtPath as V}from"./utils";export function DataViewTable({spec:q,items:J,className:L,onRowClick:G,toolbar:O,loading:H,emptyState:P,headerActions:N,footer:A,density:Q}){const U=g();if(q.view.kind!=="table")throw Error(`DataViewTable received view kind "${q.view.kind}", expected "table".`);const Y=$.useMemo(()=>Q&&q.view.kind==="table"?{...q,view:{...q.view,density:Q}}:q,[Q,q]),M=Y.view,F=$.useMemo(()=>(M.rowExpansion?.fields??[]).map((z)=>M.fields.find((I)=>I.key===z)).filter((z)=>Boolean(z)),[M.fields,M.rowExpansion?.fields]),h=C({spec:Y,data:J,renderValue:({value:z,field:I})=>E(B,{value:z,format:I.format}),renderExpandedContent:F.length>0?({item:z,fields:I})=>E(R,{gap:"sm",className:"py-2",children:I.map((W)=>_(K,{justify:"between",align:"start",children:[E(Z,{className:"font-medium text-muted-foreground text-sm",children:X(W.label,U)}),E(Z,{className:"text-right text-sm",children:E(DisplayValue,{item:z,fields:I,fieldKey:W.key})})]},W.key))}):void 0});return E(D,{controller:h,className:L,title:X(q.meta.title,U),description:X(q.meta.description,U),toolbar:O,loading:H,headerActions:N,emptyState:P,footer:A,onRowPress:G?(z)=>G(z.original):void 0})}function b(q,J){return q.find((L)=>L.key===J)}export function DisplayValue({item:q,fields:J,fieldKey:L}){const G=b(J,L);if(!G)return"";const O=V(q,G.dataPath);return E(B,{value:O,format:G.format})}

package/dist/components/data-view/DataViewTable.native.d.ts

@@ -1,4 +1,4 @@
-import type { DataViewField, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+import type { DataViewDensity, DataViewField, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
 import * as React from 'react';
 export interface DataViewTableProps {
     spec: DataViewSpec;
@@ -10,10 +10,11 @@ export interface DataViewTableProps {
     emptyState?: React.ReactNode;
     headerActions?: React.ReactNode;
     footer?: React.ReactNode;
+    density?: DataViewDensity;
 }
-export declare function DataViewTable({ spec, items, className, onRowClick, toolbar, loading, emptyState, headerActions, footer, }: DataViewTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataViewTable({ spec, items, className, onRowClick, toolbar, loading, emptyState, headerActions, footer, density, }: DataViewTableProps): import("react/jsx-runtime").JSX.Element;
 export declare function DisplayValue({ item, fields, fieldKey, }: {
     item: Record<string, unknown>;
     fields: DataViewField[];
     fieldKey: string;
-}): "" | import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | "";

package/dist/components/data-view/collection.d.ts

@@ -0,0 +1,24 @@
+import type { DataViewCollectionConfig, DataViewCollectionMode, DataViewCollectionViewModesConfig, DataViewConfig, DataViewDataDepth, DataViewDensity, DataViewSpec } from '@contractspec/lib.contracts-spec/data-views';
+export declare const DATA_VIEW_DATA_DEPTHS: DataViewDataDepth[];
+export declare function formatDataViewDataDepth(dataDepth: DataViewDataDepth): string;
+export interface ResolvedCollectionView {
+    spec: DataViewSpec;
+    mode: DataViewCollectionMode;
+    allowedModes: DataViewCollectionMode[];
+}
+export interface ResolveCollectionDensityInput {
+    density?: DataViewDensity;
+    defaultDensity?: DataViewDensity;
+}
+export interface ResolveCollectionDataDepthInput {
+    dataDepth?: DataViewDataDepth;
+    defaultDataDepth?: DataViewDataDepth;
+}
+export declare function isDataViewCollectionKind(kind: DataViewConfig['kind']): kind is DataViewCollectionMode;
+export declare function resolveAllowedCollectionModes(view: DataViewConfig): DataViewCollectionMode[];
+export declare function getDataViewCollectionConfig(view: DataViewConfig): DataViewCollectionConfig | undefined;
+export declare function getDataViewCollectionViewModesConfig(view: DataViewConfig): DataViewCollectionViewModesConfig | undefined;
+export declare function resolveCollectionView(spec: DataViewSpec, requestedMode?: DataViewCollectionMode): ResolvedCollectionView;
+export declare function resolveCollectionDensity(spec: DataViewSpec, input?: ResolveCollectionDensityInput): DataViewDensity;
+export declare function resolveCollectionDataDepth(spec: DataViewSpec, input?: ResolveCollectionDataDepthInput): DataViewDataDepth;
+export declare function projectCollectionDataDepth(spec: DataViewSpec, dataDepth: DataViewDataDepth): DataViewSpec;

package/dist/components/data-view/collection.js

@@ -0,0 +1 @@
+const X=["list","grid","table"];export const DATA_VIEW_DATA_DEPTHS=["summary","standard","detailed","exhaustive"];const $=new Map(DATA_VIEW_DATA_DEPTHS.map((z,B)=>[z,B]));export function formatDataViewDataDepth(z){if(z==="summary")return"Summary";if(z==="detailed")return"Detailed";if(z==="exhaustive")return"Exhaustive";return"Standard"}export function isDataViewCollectionKind(z){return z==="list"||z==="grid"||z==="table"}export function resolveAllowedCollectionModes(z){const B=getDataViewCollectionConfig(z);if(!B||!isDataViewCollectionKind(z.kind))return isDataViewCollectionKind(z.kind)?[z.kind]:[];const G=getDataViewCollectionViewModesConfig(z),J=G?.allowedModes?.filter(x);if(J?.length)return H(J);if(B.toolbar?.viewMode===!0)return X;return G?X:[z.kind]}export function getDataViewCollectionConfig(z){if(!isDataViewCollectionKind(z.kind))return;return z.collection}export function getDataViewCollectionViewModesConfig(z){const B=getDataViewCollectionConfig(z),G=B?.toolbar?.viewMode;if(B?.viewModes)return B.viewModes;return typeof G==="object"?G:void 0}export function resolveCollectionView(z,B){const G=resolveAllowedCollectionModes(z.view),J=j(z.view,G),U=B&&G.includes(B)?B:J;return{spec:{...z,view:R(z.view,U)},mode:U,allowedModes:G}}export function resolveCollectionDensity(z,B={}){const G=z.view.kind==="table"?z.view.density:void 0;return B.density??B.defaultDensity??G??getDataViewCollectionConfig(z.view)?.density??"comfortable"}export function resolveCollectionDataDepth(z,B={}){return B.dataDepth??B.defaultDataDepth??getDataViewCollectionConfig(z.view)?.dataDepth??"standard"}export function projectCollectionDataDepth(z,B){if(!isDataViewCollectionKind(z.view.kind))return z;const G=z.view.fields.filter((Q)=>P(Q,B)),J=new Set(G.map((Q)=>Q.key)),U=J.has(z.view.primaryField??"")?z.view.primaryField:G[0]?.key,Y=z.view.secondaryFields?.filter((Q)=>J.has(Q));if(z.view.kind==="table")return{...z,view:{...z.view,fields:G,primaryField:U,secondaryFields:Y,columns:z.view.columns?.filter((Q)=>J.has(Q.field)),rowExpansion:z.view.rowExpansion?{...z.view.rowExpansion,fields:z.view.rowExpansion.fields.filter((Q)=>J.has(Q))}:void 0}};return{...z,view:{...z.view,fields:G,primaryField:U,secondaryFields:Y}}}function j(z,B){const G=isDataViewCollectionKind(z.kind)&&getDataViewCollectionViewModesConfig(z)?.defaultMode;if(G&&B.includes(G))return G;if(isDataViewCollectionKind(z.kind)&&B.includes(z.kind))return z.kind;return B[0]??"list"}function R(z,B){const G=getDataViewCollectionConfig(z),J={fields:z.fields,primaryField:z.primaryField,secondaryFields:z.secondaryFields,filters:z.filters,filterScope:z.filterScope,actions:z.actions,collection:G};if(B==="list")return{...J,kind:"list",layout:z.kind==="list"?z.layout:"compact"};if(B==="grid")return{...J,kind:"grid",columns:z.kind==="grid"?z.columns:void 0};if(z.kind==="table")return{...z,...J,kind:"table"};return{...J,kind:"table",density:G?.density}}function x(z){return z==="list"||z==="grid"||z==="table"}function H(z){return X.filter((B)=>z.includes(B))}function P(z,B){const G=z.visibility?.minDataDepth;if(!G)return!0;return Z(B)>=Z(G)}function Z(z){return $.get(z)??0}

package/dist/components/data-view/utils.js

@@ -1 +1 @@
-import{jsx as m}from"react/jsx-runtime";import{MarkdownRenderer as a}from"../molecules/MarkdownRenderer";export function getAtPath(t,e){if(!t)return;if(!e)return t;const r=e.replace(/\[(\d+)\]/g,".$1").split(".").filter(Boolean);let n=t;for(const o of r){if(n==null||typeof n!=="object"&&!Array.isArray(n))return;n=n[o]}return n}export function DataViewFormattedValue({value:t,format:e}){if(t==null)return"";switch(e){case"boolean":return t?"Yes":"No";case"currency":return typeof t==="number"?new Intl.NumberFormat(void 0,{style:"currency",currency:"USD"}).format(t):String(t);case"percentage":return typeof t==="number"?`${(t*100).toFixed(1)}%`:String(t);case"date":return i(t,{dateStyle:"medium"});case"dateTime":return i(t,{dateStyle:"medium",timeStyle:"short"});case"markdown":return m(a,{content:t});default:return String(t)}}function i(t,e){if(t instanceof Date)return new Intl.DateTimeFormat(void 0,e).format(t);if(typeof t==="string"||typeof t==="number"){const r=new Date(t);if(!Number.isNaN(r.getTime()))return new Intl.DateTimeFormat(void 0,e).format(r)}return String(t??"")}
+import{jsx as l}from"react/jsx-runtime";import{MarkdownRenderer as u}from"../molecules/MarkdownRenderer";export function getAtPath(n,t){if(!n)return;if(!t)return n;const e=t.replace(/\[(\d+)\]/g,".$1").split(".").filter(Boolean);let i=n;for(const r of e){if(i==null||typeof i!=="object"&&!Array.isArray(i))return;i=i[r]}return i}export function DataViewFormattedValue({value:n,format:t}){if(n==null)return"";switch(typeof t==="string"?t:t?.type){case"boolean":return n?"Yes":"No";case"number":return m(n,t);case"currency":return d(n,t);case"percent":case"percentage":return p(n,t);case"date":return o(n,typeof t==="object"&&t.type==="date"?t:{dateStyle:"medium"});case"time":return o(n,typeof t==="object"&&t.type==="time"?t:{timeStyle:"short"});case"datetime":case"dateTime":return o(n,typeof t==="object"&&t.type==="datetime"?t:{dateStyle:"medium",timeStyle:"short"});case"duration":return g(n,t);case"markdown":return l(u,{content:n});default:return String(n)}}function m(n,t){if(typeof n!=="number")return String(n);const e=typeof t==="object"&&t.type==="number"?t:void 0;return new Intl.NumberFormat(e?.locale,{minimumFractionDigits:e?.minimumFractionDigits,maximumFractionDigits:e?.maximumFractionDigits,useGrouping:e?.useGrouping,notation:e?.notation,signDisplay:e?.signDisplay}).format(n)}function d(n,t){if(typeof n!=="number")return String(n);const e=typeof t==="object"&&t.type==="currency"?t:void 0;return new Intl.NumberFormat(e?.locale,{style:"currency",currency:e?.currency??"USD",currencyDisplay:e?.currencyDisplay,minimumFractionDigits:e?.rounded?0:e?.minimumFractionDigits,maximumFractionDigits:e?.rounded?0:e?.maximumFractionDigits,useGrouping:e?.useGrouping,notation:e?.notation,signDisplay:e?.signDisplay}).format(n)}function p(n,t){if(typeof n!=="number")return String(n);const e=typeof t==="object"&&t.type==="percent"?t:void 0,i=e?.valueScale==="whole"?n/100:n;return new Intl.NumberFormat(e?.locale,{style:"percent",minimumFractionDigits:e?.minimumFractionDigits??1,maximumFractionDigits:e?.maximumFractionDigits??1,useGrouping:e?.useGrouping,notation:e?.notation,signDisplay:e?.signDisplay}).format(i)}function o(n,t){const{locale:e,...i}=t;if(n instanceof Date)return new Intl.DateTimeFormat(e,i).format(n);if(typeof n==="string"||typeof n==="number"){const r=new Date(n);if(!Number.isNaN(r.getTime()))return new Intl.DateTimeFormat(e,i).format(r)}return String(n??"")}function g(n,t){if(typeof n!=="number")return String(n);const e=typeof t==="object"&&t.type==="duration"?t:void 0,i=e?.unit??"second";if(e?.display==="digital")return y(f(n,i));return new Intl.NumberFormat(e?.locale,{style:"unit",unit:i,unitDisplay:e?.display==="narrow"?"narrow":e?.display,maximumFractionDigits:2}).format(n)}function y(n){const t=n<0?"-":"",e=Math.round(Math.abs(n)),i=Math.floor(e/3600),r=Math.floor(e%3600/60),c=e%60,s=[r,c].map((a)=>String(a).padStart(2,"0")).join(":");return i>0?`${t}${i}:${s}`:`${t}${s}`}function f(n,t){switch(t){case"millisecond":return n/1000;case"minute":return n*60;case"hour":return n*3600;case"day":return n*86400;case"week":return n*604800;case"month":return n*2629746;case"year":return n*31556952;case"second":default:return n}}

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

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

package/dist/components/legal/molecules/LegalTOC.d.ts

@@ -5,7 +5,7 @@ export interface TocItem {
     label: React.ReactNode;
 }
 declare const tocVariants: (props?: ({
-    variant?: "sidebar" | "inline" | null | undefined;
+    variant?: "inline" | "sidebar" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LegalTOCProps = {

package/dist/components/marketing/MarketingCardsSection.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { MarketingSection } from './MarketingSection';
 declare const gridVariants: (props?: ({
-    columns?: 2 | 3 | 4 | 1 | null | undefined;
+    columns?: 1 | 2 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type MarketingCardsSectionProps = React.PropsWithChildren<Omit<React.ComponentProps<typeof MarketingSection>, 'children'> & VariantProps<typeof gridVariants> & {
     gridClassName?: string;

package/dist/components/molecules/StatusChip.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const chipVariants: (props?: ({
-    tone?: "success" | "neutral" | "info" | "warning" | "danger" | null | undefined;
+    tone?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type StatusChipProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof chipVariants> & {

package/dist/components/molecules/Tabs.js

@@ -1 +1 @@
-import{jsx as H}from"react/jsx-runtime";import{Tabs as R,TabsContent as S,TabsList as U,TabsTrigger as X}from"@contractspec/lib.ui-kit-web/ui/tabs";import{useThemedPrimitive as G}from"../primitives/themed";export function Tabs({value:z,defaultValue:A,onValueChange:B,className:D,children:q,orientation:F,dir:E,activationMode:J,componentKey:O,themeVariant:Q}){console.log("tabs web");const I=G({defaultComponentKey:"Tabs",componentKey:O,themeVariant:Q,className:D});return H(R,{...I.props,value:z,defaultValue:A,onValueChange:B,className:I.className,orientation:F,dir:E,activationMode:J,children:q})}export function TabsList({className:z,children:A,componentKey:B,themeVariant:D}){const q=G({defaultComponentKey:"TabsList",componentKey:B,themeVariant:D,className:z});return H(U,{...q.props,className:q.className,children:A})}export function TabsTrigger({value:z,disabled:A,className:B,children:D,componentKey:q,themeVariant:F}){const E=G({defaultComponentKey:"TabsTrigger",componentKey:q,themeVariant:F,className:B});return H(X,{...E.props,value:z,disabled:A,className:E.className,children:D})}export function TabsContent({value:z,forceMount:A,className:B,children:D,componentKey:q,themeVariant:F}){const E=G({defaultComponentKey:"TabsContent",componentKey:q,themeVariant:F,className:B});return H(S,{...E.props,value:z,forceMount:A?!0:void 0,className:E.className,children:D})}
+import{jsx as H}from"react/jsx-runtime";import{Tabs as R,TabsContent as S,TabsList as U,TabsTrigger as X}from"@contractspec/lib.ui-kit-web/ui/tabs";import{useThemedPrimitive as G}from"../primitives/themed";export function Tabs({value:z,defaultValue:A,onValueChange:B,className:D,children:q,orientation:F,dir:E,activationMode:J,componentKey:O,themeVariant:Q}){const I=G({defaultComponentKey:"Tabs",componentKey:O,themeVariant:Q,className:D});return H(R,{...I.props,value:z,defaultValue:A,onValueChange:B,className:I.className,orientation:F,dir:E,activationMode:J,children:q})}export function TabsList({className:z,children:A,componentKey:B,themeVariant:D}){const q=G({defaultComponentKey:"TabsList",componentKey:B,themeVariant:D,className:z});return H(U,{...q.props,className:q.className,children:A})}export function TabsTrigger({value:z,disabled:A,className:B,children:D,componentKey:q,themeVariant:F}){const E=G({defaultComponentKey:"TabsTrigger",componentKey:q,themeVariant:F,className:B});return H(X,{...E.props,value:z,disabled:A,className:E.className,children:D})}export function TabsContent({value:z,forceMount:A,className:B,children:D,componentKey:q,themeVariant:F}){const E=G({defaultComponentKey:"TabsContent",componentKey:q,themeVariant:F,className:B});return H(S,{...E.props,value:z,forceMount:A?!0:void 0,className:E.className,children:D})}

package/dist/components/object-reference/DefaultObjectReferenceDetail.d.ts

@@ -0,0 +1,10 @@
+import type { ObjectReferenceActionDescriptor, ObjectReferenceDescriptor, ObjectReferenceHandlerProps, ObjectReferenceRenderContext } from './types';
+type IconRenderer = ObjectReferenceHandlerProps['iconRenderer'];
+export declare function DefaultReferenceDetail({ context, iconRenderer, renderProperty, renderSection, runReferenceAction, }: {
+    context: ObjectReferenceRenderContext;
+    iconRenderer?: IconRenderer;
+    renderProperty?: ObjectReferenceHandlerProps['renderProperty'];
+    renderSection?: ObjectReferenceHandlerProps['renderSection'];
+    runReferenceAction: (reference: ObjectReferenceDescriptor, action: ObjectReferenceActionDescriptor) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/object-reference/DefaultObjectReferenceDetail.js

@@ -0,0 +1 @@
+import{jsx as q,jsxs as I}from"react/jsx-runtime";import{Fragment as J}from"react";import{getObjectReferenceDisplayValue as Q}from"./actions";import{DefaultActionButton as T}from"./DefaultObjectReferenceParts";import{DefaultReferenceProperty as U,MetadataList as K}from"./DefaultObjectReferenceProperty";export function DefaultReferenceDetail({context:k,iconRenderer:E,renderProperty:G,renderSection:C,runReferenceAction:v}){const{reference:z}=k;return I("div",{className:"flex flex-col gap-3",children:[q(W,{reference:z}),z.sections?.map((H)=>C?q(J,{children:C({...k,section:H})},H.id):q(X,{context:k,iconRenderer:E,renderProperty:G,runReferenceAction:v,section:H},H.id)),z.properties&&z.properties.length>0?q("div",{className:"grid gap-2",children:z.properties.map((H)=>q(N,{context:k,iconRenderer:E,property:H,renderProperty:G,runReferenceAction:v},H.id))}):null]})}function W({reference:k}){return I("div",{className:"rounded-md border border-border bg-muted/30 p-3 text-sm",children:[q("div",{className:"font-medium text-foreground",children:Q(k)}),k.href?q("div",{className:"mt-1 break-all text-muted-foreground",children:k.href}):null,q(K,{entries:Object.entries(k.metadata??{})})]})}function X({context:k,iconRenderer:E,renderProperty:G,runReferenceAction:C,section:v}){return I("section",{className:"grid gap-2",children:[I("div",{children:[v.title?q("h3",{className:"font-medium text-foreground text-sm",children:v.title}):null,v.description?q("p",{className:"text-muted-foreground text-xs",children:v.description}):null]}),v.properties?.map((z)=>q(N,{context:k,iconRenderer:E,property:z,renderProperty:G,runReferenceAction:C},z.id)),v.actions&&v.actions.length>0?q("div",{className:"grid gap-2",children:v.actions.map((z)=>q(T,{action:z,reference:k.reference,iconRenderer:E,onClick:()=>C(k.reference,z)},z.id))}):null,q(K,{entries:Object.entries(v.metadata??{})})]})}function N({context:k,iconRenderer:E,property:G,renderProperty:C,runReferenceAction:v}){if(C)return q(J,{children:C({...k,property:G,depth:0,runPropertyAction:v})});return q(U,{context:k,depth:0,iconRenderer:E,property:G,runReferenceAction:v})}

package/dist/components/object-reference/DefaultObjectReferenceParts.d.ts

@@ -0,0 +1,15 @@
+import type { ObjectReferenceActionDescriptor, ObjectReferenceHandlerProps, ObjectReferenceRenderContext } from './types';
+export declare function DefaultObjectReferenceTrigger({ context, iconRenderer, interactivityVisibility, className, }: {
+    context: ObjectReferenceRenderContext;
+    iconRenderer?: IconRenderer;
+    interactivityVisibility: NonNullable<ObjectReferenceHandlerProps['interactivityVisibility']>;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultActionButton({ action, reference, iconRenderer, onClick, }: {
+    action: ObjectReferenceActionDescriptor;
+    reference: ObjectReferenceHandlerProps['reference'];
+    iconRenderer?: IconRenderer;
+    onClick: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+type IconRenderer = ObjectReferenceHandlerProps['iconRenderer'];
+export {};

package/dist/components/object-reference/DefaultObjectReferenceParts.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as i}from"react/jsx-runtime";import{cn as d}from"../../lib/utils";import{ReferenceIcon as l,ReferenceSearchIcon as a}from"./ReferenceIcon";export function DefaultObjectReferenceTrigger({context:e,iconRenderer:o,interactivityVisibility:n,className:c}){const{reference:t}=e;return i("span",{className:d("inline-flex min-w-0 items-center gap-1.5 text-foreground text-sm transition-colors hover:text-primary",n==="underline"&&"underline decoration-muted-foreground/50 underline-offset-4 hover:decoration-primary",c),children:[r(l,{context:{iconKey:t.iconKey??t.kind,reference:t},iconRenderer:o}),r("span",{className:"truncate",children:t.label}),n==="icon"?r(a,{className:"h-3.5 w-3.5 shrink-0 text-muted-foreground"}):null]})}export function DefaultActionButton({action:e,reference:o,iconRenderer:n,onClick:c}){return i("button",{type:"button",className:d("flex min-h-11 w-full items-center gap-3 rounded-md border border-border px-3 py-2 text-left text-sm transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring",e.variant==="primary"&&"border-primary/40 bg-primary/10",e.variant==="danger"&&"border-destructive/40 text-destructive",e.disabled&&"cursor-not-allowed opacity-50"),disabled:e.disabled,onClick:c,children:[r(l,{context:{iconKey:e.iconKey??e.id,reference:o,action:e},iconRenderer:n}),i("span",{className:"min-w-0 flex-1",children:[r("span",{className:"block font-medium",children:e.label}),e.description?r("span",{className:"block text-muted-foreground text-xs",children:e.description}):null]})]})}

package/dist/components/object-reference/DefaultObjectReferenceParts.native.d.ts

@@ -0,0 +1,16 @@
+import type { ObjectReferenceActionDescriptor, ObjectReferenceDescriptor, ObjectReferenceHandlerProps, ObjectReferenceRenderContext } from './types';
+export declare function NativeObjectReferenceTrigger({ context, iconRenderer, interactivityVisibility, }: {
+    context: ObjectReferenceRenderContext;
+    iconRenderer?: ObjectReferenceHandlerProps['iconRenderer'];
+    interactivityVisibility: NonNullable<ObjectReferenceHandlerProps['interactivityVisibility']>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NativeReferenceDetail({ context, renderProperty, renderSection, runReferenceAction, }: {
+    context: ObjectReferenceRenderContext;
+    renderProperty?: ObjectReferenceHandlerProps['renderProperty'];
+    renderSection?: ObjectReferenceHandlerProps['renderSection'];
+    runReferenceAction: (reference: ObjectReferenceDescriptor, action: ObjectReferenceActionDescriptor) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NativeActionButton({ action, onPress, }: {
+    action: ObjectReferenceActionDescriptor;
+    onPress: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/object-reference/DefaultObjectReferenceProperty.d.ts

@@ -0,0 +1,13 @@
+import type { ObjectReferenceActionDescriptor, ObjectReferenceDescriptor, ObjectReferenceHandlerProps, ObjectReferenceRenderContext } from './types';
+type IconRenderer = ObjectReferenceHandlerProps['iconRenderer'];
+export declare function DefaultReferenceProperty({ context, depth, iconRenderer, property, runReferenceAction, }: {
+    context: ObjectReferenceRenderContext;
+    depth: number;
+    iconRenderer?: IconRenderer;
+    property: ObjectReferenceDescriptor;
+    runReferenceAction: (reference: ObjectReferenceDescriptor, action: ObjectReferenceActionDescriptor) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataList({ entries, }: {
+    entries: Array<[string, unknown]>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/object-reference/DefaultObjectReferenceProperty.js

@@ -0,0 +1 @@
+import{jsx as q,jsxs as F}from"react/jsx-runtime";import{createDefaultObjectReferenceActions as J,getObjectReferenceDisplayValue as K}from"./actions";import{DefaultActionButton as L}from"./DefaultObjectReferenceParts";import{ReferenceIcon as N}from"./ReferenceIcon";export function DefaultReferenceProperty({context:z,depth:C,iconRenderer:E,property:g,runReferenceAction:H}){const I=g.actions??J(g),G=C<3?g.properties:void 0;return F("div",{className:"rounded-md border border-border p-3 text-sm",children:[F("div",{className:"flex items-start gap-2",children:[q(N,{context:{iconKey:g.iconKey??g.kind,reference:g},iconRenderer:E}),F("div",{className:"min-w-0 flex-1",children:[q("div",{className:"font-medium text-foreground",children:g.label}),q("div",{className:"break-words text-muted-foreground",children:K(g)}),g.description?q("div",{className:"mt-1 text-muted-foreground text-xs",children:g.description}):null]})]}),I.length>0?q("div",{className:"mt-3 grid gap-2",children:I.map((B)=>q(L,{action:B,reference:g,iconRenderer:E,onClick:()=>H(g,B)},B.id))}):null,G&&G.length>0?q("div",{className:"mt-3 grid gap-2",children:G.map((B)=>q(DefaultReferenceProperty,{context:z,depth:C+1,iconRenderer:E,property:B,runReferenceAction:H},B.id))}):null]})}export function MetadataList({entries:z}){if(z.length===0)return null;return q("dl",{className:"mt-3 grid gap-2",children:z.map(([C,E])=>F("div",{className:"grid gap-0.5",children:[q("dt",{className:"font-medium text-muted-foreground text-xs uppercase",children:C}),q("dd",{className:"break-words text-foreground",children:Q(E)})]},C))})}function Q(z){return typeof z==="object"&&z!==null?JSON.stringify(z):String(z)}

package/dist/components/object-reference/ObjectReferenceHandler.d.ts

@@ -0,0 +1,2 @@
+import type { ObjectReferenceHandlerProps } from './types';
+export declare function ObjectReferenceHandler({ reference, actions, interactivityVisibility, openTarget, panelMode, mobilePanelMode, desktopPanelMode, responsiveBreakpoint, defaultOpen, open, onOpenChange, actionHandlers, onAction, onActionError, copyText, copyHandler, openHref, renderTrigger, renderDetail, renderAction, renderProperty, renderSection, iconRenderer, className, panelClassName, }: ObjectReferenceHandlerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/object-reference/ObjectReferenceHandler.js

@@ -0,0 +1 @@
+import{jsx as F,jsxs as z}from"react/jsx-runtime";import{Tooltip as j,TooltipContent as y,TooltipTrigger as x}from"@contractspec/lib.ui-kit-web/ui/tooltip";import*as T from"react";import{DefaultReferenceDetail as g}from"./DefaultObjectReferenceDetail";import{DefaultActionButton as d,DefaultObjectReferenceTrigger as l}from"./DefaultObjectReferenceParts";import{ObjectReferencePanel as p}from"./ObjectReferencePanel";import{normalizeSafeObjectReferenceHref as s}from"./url-safety";import{useObjectReferenceController as f}from"./useObjectReferenceController";export function ObjectReferenceHandler({reference:q,actions:K,interactivityVisibility:U="underline",openTarget:G,panelMode:Q,mobilePanelMode:I,desktopPanelMode:E,responsiveBreakpoint:V,defaultOpen:B=!1,open:S,onOpenChange:k,actionHandlers:N,onAction:C,onActionError:M,copyText:h,copyHandler:m,openHref:b,renderTrigger:X,renderDetail:Y,renderAction:Z,renderProperty:v,renderSection:P,iconRenderer:W,className:D,panelClassName:w}){const{context:L,openDetail:u,resolvedActions:H,resolvedOpen:O,runAction:$,runReferenceAction:_,setOpen:A}=f({reference:q,actions:K,defaultOpen:B,open:S,onOpenChange:k,actionHandlers:N,copyText:h,copyHandler:m,openHref:b,openTarget:G,onAction:C,onActionError:M,defaultOpenTarget:G,defaultCopy:i,defaultOpenHref:a}),R=X?X(L):F(l,{context:L,iconRenderer:W,interactivityVisibility:U,className:D});return F(p,{open:O,onOpenChange:A,mode:Q,mobileMode:I,desktopMode:E,breakpoint:V,title:q.label,description:q.description,className:w,trigger:z(j,{children:[F(x,{asChild:!0,children:F("button",{type:"button",className:"contents","aria-label":q.ariaLabel??`Open ${q.label}`,onClick:(J)=>{if(c(G,q))J.preventDefault();u()},children:R})}),F(y,{children:q.ariaLabel??q.label})]}),children:z("div",{className:"flex flex-col gap-4 px-4 pb-4",children:[Y?Y(L):F(g,{context:L,iconRenderer:W,renderProperty:v,renderSection:P,runReferenceAction:_}),F("div",{className:"flex flex-col gap-2",children:H.map((J)=>Z?F(T.Fragment,{children:Z({...L,action:J,runAction:$})},J.id):F(d,{action:J,reference:q,iconRenderer:W,onClick:()=>$(J)},J.id))})]})})}async function i(q,K){if(typeof navigator<"u"&&navigator.clipboard){await navigator.clipboard.writeText(q);return}throw Error("Clipboard is not available.")}async function a(q,K,{target:U}){const G=s(q);if(!G||typeof window>"u")return;if(U==="new-page"){const Q=window.open(G,"_blank","noopener,noreferrer");if(Q)Q.opener=null;return}window.location.assign(G)}function c(q,K){return(q??K.openTarget)==="new-page"&&Boolean(K.href)}

package/dist/components/object-reference/ObjectReferenceHandler.native.d.ts

@@ -0,0 +1,2 @@
+import type { ObjectReferenceHandlerProps } from './types';
+export declare function ObjectReferenceHandler({ reference, actions, interactivityVisibility, openTarget, defaultOpen, open, onOpenChange, actionHandlers, onAction, onActionError, copyText, copyHandler, openHref, renderTrigger, renderDetail, renderAction, renderProperty, renderSection, iconRenderer, className, panelClassName, }: ObjectReferenceHandlerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/object-reference/ObjectReferencePanel.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import { type AdaptivePanelBreakpoint, type AdaptivePanelMode } from '../overlays/AdaptivePanel';
+export type ObjectReferencePanelMode = AdaptivePanelMode;
+export type ObjectReferencePanelBreakpoint = AdaptivePanelBreakpoint;
+export interface ObjectReferencePanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    mode?: ObjectReferencePanelMode;
+    mobileMode?: Exclude<ObjectReferencePanelMode, 'responsive'>;
+    desktopMode?: Exclude<ObjectReferencePanelMode, 'responsive'>;
+    breakpoint?: ObjectReferencePanelBreakpoint;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function ObjectReferencePanel(props: ObjectReferencePanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/object-reference/ObjectReferencePanel.js

@@ -0,0 +1 @@
+import{jsx as n}from"react/jsx-runtime";import{AdaptivePanel as t}from"../overlays/AdaptivePanel";export function ObjectReferencePanel(e){return n(t,{...e})}

package/dist/components/object-reference/ReferenceIcon.d.ts

@@ -0,0 +1,7 @@
+import { Search } from 'lucide-react';
+import type { ObjectReferenceHandlerProps, ObjectReferenceIconRenderContext } from './types';
+export declare function ReferenceIcon({ context, iconRenderer, }: {
+    context: ObjectReferenceIconRenderContext;
+    iconRenderer?: ObjectReferenceHandlerProps['iconRenderer'];
+}): import("react/jsx-runtime").JSX.Element;
+export { Search as ReferenceSearchIcon };

package/dist/components/object-reference/ReferenceIcon.js

@@ -0,0 +1 @@
+import{jsx as p,Fragment as R}from"react/jsx-runtime";import{Copy as s,ExternalLink as r,FileText as l,Mail as o,MapPin as t,Phone as c,Search,User as i}from"lucide-react";const m={address:t,email:o,phone:c,user:i,customer:i,file:l,url:r,custom:Search,copy:s,emailAction:o,map:t,phoneAction:c,"external-link":r};export function ReferenceIcon({context:e,iconRenderer:n}){if(n)return p(R,{children:n(e)});const a=m[e.iconKey]??Search;return p(a,{className:"h-4 w-4 shrink-0 text-muted-foreground"})}export{Search as ReferenceSearchIcon};

package/dist/components/object-reference/actions.d.ts

@@ -0,0 +1,12 @@
+import type { ObjectReferenceActionDescriptor, ObjectReferenceDescriptor, ObjectReferenceOpenTarget } from './types';
+export { createMapsProviderHref, createMapsReferenceActions, type ObjectReferenceMapsActionOptions, type ObjectReferenceMapsProvider, } from './maps';
+export interface ObjectReferenceOpenActionOptions {
+    label?: string;
+    openTarget?: ObjectReferenceOpenTarget;
+}
+export declare function getObjectReferenceDisplayValue(reference: ObjectReferenceDescriptor): string;
+export declare function createCopyReferenceAction(reference: ObjectReferenceDescriptor, label?: string): ObjectReferenceActionDescriptor;
+export declare function createOpenReferenceAction(reference: ObjectReferenceDescriptor, options?: string | ObjectReferenceOpenActionOptions): ObjectReferenceActionDescriptor | null;
+export declare function createEmailReferenceAction(reference: ObjectReferenceDescriptor, label?: string): ObjectReferenceActionDescriptor | null;
+export declare function createPhoneReferenceAction(reference: ObjectReferenceDescriptor, label?: string): ObjectReferenceActionDescriptor | null;
+export declare function createDefaultObjectReferenceActions(reference: ObjectReferenceDescriptor): ObjectReferenceActionDescriptor[];

package/dist/components/object-reference/actions.js

@@ -0,0 +1 @@
+export{createMapsProviderHref,createMapsReferenceActions}from"./maps";import{createMapsReferenceActions as c}from"./maps";function n(e){return e.trim().replace(/\s+/g," ")}export function getObjectReferenceDisplayValue(e){return e.value??e.href??e.label}export function createCopyReferenceAction(e,t="Copy"){return{id:"copy",label:t,description:"Copy this reference",iconKey:"copy",metadata:{copyText:getObjectReferenceDisplayValue(e)}}}export function createOpenReferenceAction(e,t={}){if(!e.href)return null;const r=typeof t==="string"?{label:t}:t;return{id:"open",label:r.label??"Open details",description:"Open the related page or resource",href:e.href,openTarget:r.openTarget??e.openTarget,iconKey:"external-link"}}export function createEmailReferenceAction(e,t="Email"){if(e.kind!=="email")return null;const r=n(e.value??e.label);if(!r)return null;return{id:"email",label:t,description:"Send an email",href:`mailto:${r}`,iconKey:"email"}}export function createPhoneReferenceAction(e,t="Call"){if(e.kind!=="phone")return null;const r=n(e.value??e.label);if(!r)return null;return{id:"call",label:t,description:"Call this phone number",href:`tel:${r.replace(/[^\d+]/g,"")}`,iconKey:"phone"}}export function createDefaultObjectReferenceActions(e){return[createCopyReferenceAction(e),createOpenReferenceAction(e),createEmailReferenceAction(e),createPhoneReferenceAction(e),...c(e)].filter((t)=>Boolean(t))}

package/dist/components/object-reference/index.d.ts

@@ -0,0 +1,6 @@
+export { createCopyReferenceAction, createDefaultObjectReferenceActions, createEmailReferenceAction, createMapsProviderHref, createMapsReferenceActions, createOpenReferenceAction, createPhoneReferenceAction, getObjectReferenceDisplayValue, type ObjectReferenceMapsActionOptions, type ObjectReferenceMapsProvider, } from './actions';
+export { ObjectReferenceHandler } from './ObjectReferenceHandler';
+export { ObjectReferencePanel, type ObjectReferencePanelProps, } from './ObjectReferencePanel';
+export { type ExecuteObjectReferenceActionOptions, executeObjectReferenceAction, } from './runtime';
+export type { JsonPrimitive, JsonValue, ObjectReferenceActionDescriptor, ObjectReferenceActionEvent, ObjectReferenceActionHandler, ObjectReferenceActionRenderContext, ObjectReferenceActionVariant, ObjectReferenceCopyHandler, ObjectReferenceDescriptor, ObjectReferenceHandlerProps, ObjectReferenceIconRenderContext, ObjectReferenceInteractivityVisibility, ObjectReferenceKind, ObjectReferenceMetadata, ObjectReferenceOpenHrefHandler, ObjectReferenceOpenTarget, ObjectReferencePanelBreakpoint, ObjectReferencePanelMode, ObjectReferencePropertyRenderContext, ObjectReferenceRenderContext, ObjectReferenceSectionDescriptor, ObjectReferenceSectionRenderContext, } from './types';
+export { normalizeSafeObjectReferenceHref, SAFE_OBJECT_REFERENCE_PROTOCOLS, } from './url-safety';

package/dist/components/object-reference/index.js

@@ -0,0 +1 @@
+export{createCopyReferenceAction,createDefaultObjectReferenceActions,createEmailReferenceAction,createMapsProviderHref,createMapsReferenceActions,createOpenReferenceAction,createPhoneReferenceAction,getObjectReferenceDisplayValue}from"./actions";export{ObjectReferenceHandler}from"./ObjectReferenceHandler";export{ObjectReferencePanel}from"./ObjectReferencePanel";export{executeObjectReferenceAction}from"./runtime";export{normalizeSafeObjectReferenceHref,SAFE_OBJECT_REFERENCE_PROTOCOLS}from"./url-safety";