@lssm/lib.design-system 1.2.0

package/dist/components/atoms/LoaderCircular.js

@@ -0,0 +1,46 @@
+import { cn, init_utils } from "../../ui-kit-web/dist/ui/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+
+//#region src/components/atoms/LoaderCircular.tsx
+init_utils();
+const spinnerVariants = cva("animate-spin", {
+	variants: {
+		size: {
+			sm: "h-4 w-4",
+			md: "h-5 w-5",
+			lg: "h-6 w-6"
+		},
+		tone: {
+			default: "text-foreground",
+			muted: "text-muted-foreground"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "muted"
+	}
+});
+function LoaderCircular({ size, tone, label, className,...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-2", className),
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": true,
+		...props,
+		children: [/* @__PURE__ */ jsx(Loader2, { className: cn(spinnerVariants({
+			size,
+			tone
+		})) }), label ? /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-base",
+			children: label
+		}) : null]
+	});
+}
+var LoaderCircular_default = LoaderCircular;
+
+//#endregion
+export { LoaderCircular, LoaderCircular_default as default };
+//# sourceMappingURL=LoaderCircular.js.map

package/dist/components/atoms/LoaderCircular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderCircular.js","names":[],"sources":["../../../src/components/atoms/LoaderCircular.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Loader2 } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@lssm/lib.ui-kit-web/ui/utils';\n\nconst spinnerVariants = cva('animate-spin', {\n  variants: {\n    size: {\n      sm: 'h-4 w-4',\n      md: 'h-5 w-5',\n      lg: 'h-6 w-6',\n    },\n    tone: {\n      default: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: { size: 'md', tone: 'muted' },\n});\n\nexport type LoaderCircularProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof spinnerVariants> & {\n    label?: React.ReactNode;\n  };\n\nexport function LoaderCircular({\n  size,\n  tone,\n  label,\n  className,\n  ...props\n}: LoaderCircularProps) {\n  return (\n    <div\n      className={cn('inline-flex items-center gap-2', className)}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy\n      {...props}\n    >\n      <Loader2 className={cn(spinnerVariants({ size, tone }))} />\n      {label ? (\n        <span className=\"text-muted-foreground text-base\">{label}</span>\n      ) : null}\n    </div>\n  );\n}\n\nexport default LoaderCircular;\n"],"mappings":";;;;;;;YAGmD;AAEnD,MAAM,kBAAkB,IAAI,gBAAgB;CAC1C,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EAAE,MAAM;EAAM,MAAM;EAAS;CAC/C,CAAC;AAOF,SAAgB,eAAe,EAC7B,MACA,MACA,OACA,UACA,GAAG,SACmB;AACtB,QACE,qBAAC;EACC,WAAW,GAAG,kCAAkC,UAAU;EAC1D,MAAK;EACL,aAAU;EACV;EACA,GAAI;aAEJ,oBAAC,WAAQ,WAAW,GAAG,gBAAgB;GAAE;GAAM;GAAM,CAAC,CAAC,GAAI,EAC1D,QACC,oBAAC;GAAK,WAAU;aAAmC;IAAa,GAC9D;GACA;;AAIV,6BAAe"}

package/dist/components/atoms/LoaderCircular.mobile.d.ts

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+
+//#region src/components/atoms/LoaderCircular.mobile.d.ts
+interface LoaderCircularProps {
+  size?: 'sm' | 'md' | 'lg';
+  tone?: 'default' | 'muted';
+  label?: React$1.ReactNode;
+  className?: string;
+}
+declare function LoaderCircular({
+  size,
+  label,
+  className
+}: LoaderCircularProps): react_jsx_runtime16.JSX.Element;
+//#endregion
+export { LoaderCircular, LoaderCircular as default, LoaderCircularProps };
+//# sourceMappingURL=LoaderCircular.mobile.d.ts.map

package/dist/components/atoms/LoaderCircular.mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderCircular.mobile.d.ts","names":[],"sources":["../../../src/components/atoms/LoaderCircular.mobile.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,mBAAA;;;EAAA,KAAA,CAAA,EAGP,OAAA,CAAM,SAHoB;EAmBpB,SAAA,CAAA,EAAA,MAAc;;AAE5B,iBAFc,cAAA,CAEd;EAAA,IAAA;EAAA,KAAA;EAAA;AAAA,CAAA,EAEC,mBAFD,CAAA,EAEoB,mBAAA,CAAA,GAAA,CAAA,OAFpB"}

package/dist/components/atoms/LoaderCircular.mobile.js

@@ -0,0 +1,27 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ActivityIndicator, Text, View } from "react-native";
+
+//#region src/components/atoms/LoaderCircular.mobile.tsx
+function toNativeSize(size) {
+	switch (size) {
+		case "sm": return "small";
+		case "lg": return "large";
+		case "md":
+		default: return "small";
+	}
+}
+function LoaderCircular({ size = "md", label, className }) {
+	return /* @__PURE__ */ jsxs(View, {
+		className: ["inline-flex flex-row items-center gap-2", className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(ActivityIndicator, { size: toNativeSize(size) }), label ? /* @__PURE__ */ jsx(Text, {
+			className: "text-muted-foreground text-base",
+			children: label
+		}) : null]
+	});
+}
+var LoaderCircular_mobile_default = LoaderCircular;
+
+//#endregion
+export { LoaderCircular, LoaderCircular_mobile_default as default };
+//# sourceMappingURL=LoaderCircular.mobile.js.map

package/dist/components/atoms/LoaderCircular.mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderCircular.mobile.js","names":[],"sources":["../../../src/components/atoms/LoaderCircular.mobile.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActivityIndicator, View, Text } from 'react-native';\n\nexport interface LoaderCircularProps {\n  size?: 'sm' | 'md' | 'lg';\n  tone?: 'default' | 'muted';\n  label?: React.ReactNode;\n  className?: string;\n}\n\nfunction toNativeSize(size?: 'sm' | 'md' | 'lg'): number | 'small' | 'large' {\n  switch (size) {\n    case 'sm':\n      return 'small';\n    case 'lg':\n      return 'large';\n    case 'md':\n    default:\n      return 'small';\n  }\n}\n\nexport function LoaderCircular({\n  size = 'md',\n  label,\n  className,\n}: LoaderCircularProps) {\n  return (\n    <View\n      className={['inline-flex flex-row items-center gap-2', className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <ActivityIndicator size={toNativeSize(size)} />\n      {label ? (\n        <Text className=\"text-muted-foreground text-base\">{label as any}</Text>\n      ) : null}\n    </View>\n  );\n}\n\nexport default LoaderCircular;\n"],"mappings":";;;;;AAUA,SAAS,aAAa,MAAuD;AAC3E,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK;EACL,QACE,QAAO;;;AAIb,SAAgB,eAAe,EAC7B,OAAO,MACP,OACA,aACsB;AACtB,QACE,qBAAC;EACC,WAAW,CAAC,2CAA2C,UAAU,CAC9D,OAAO,QAAQ,CACf,KAAK,IAAI;aAEZ,oBAAC,qBAAkB,MAAM,aAAa,KAAK,GAAI,EAC9C,QACC,oBAAC;GAAK,WAAU;aAAmC;IAAoB,GACrE;GACC;;AAIX,oCAAe"}

package/dist/components/atoms/NavBrand.d.ts

@@ -0,0 +1,19 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/components/atoms/NavBrand.d.ts
+interface NavBrandProps {
+  href?: string;
+  logo?: React$1.ReactNode;
+  title?: React$1.ReactNode;
+  className?: string;
+}
+declare function NavBrand({
+  href,
+  logo,
+  title,
+  className
+}: NavBrandProps): react_jsx_runtime6.JSX.Element;
+//#endregion
+export { NavBrand, NavBrandProps };
+//# sourceMappingURL=NavBrand.d.ts.map

package/dist/components/atoms/NavBrand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBrand.d.ts","names":[],"sources":["../../../src/components/atoms/NavBrand.tsx"],"sourcesContent":[],"mappings":";;;;UAKiB,aAAA;;SAER,OAAA,CAAM;EAFE,KAAA,CAAA,EAGP,OAAA,CAAM,SAHc;EAOd,SAAA,CAAA,EAAQ,MAAA;;AAEtB,iBAFc,QAAA,CAEd;EAAA,IAAA;EAAA,IAAA;EAAA,KAAA;EAAA;AAAA,CAAA,EAGC,aAHD,CAAA,EAGc,kBAAA,CAAA,GAAA,CAAA,OAHd"}

package/dist/components/atoms/NavBrand.js

@@ -0,0 +1,28 @@
+'use client';
+
+
+import { cn, init_utils } from "../../ui-kit-web/dist/ui/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/atoms/NavBrand.tsx
+init_utils();
+function NavBrand({ href = "/", logo, title, className }) {
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 truncate font-semibold", className),
+		children: [logo, title && /* @__PURE__ */ jsx("span", {
+			className: "truncate text-xl font-bold",
+			children: title
+		})]
+	});
+	return href ? /* @__PURE__ */ jsx("a", {
+		href,
+		className: "flex items-center",
+		"aria-label": "Home",
+		children: content
+	}) : content;
+}
+
+//#endregion
+export { NavBrand };
+//# sourceMappingURL=NavBrand.js.map

package/dist/components/atoms/NavBrand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBrand.js","names":[],"sources":["../../../src/components/atoms/NavBrand.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@lssm/lib.ui-kit-web/ui/utils';\n\nexport interface NavBrandProps {\n  href?: string;\n  logo?: React.ReactNode;\n  title?: React.ReactNode;\n  className?: string;\n}\n\nexport function NavBrand({\n  href = '/',\n  logo,\n  title,\n  className,\n}: NavBrandProps) {\n  const content = (\n    <div\n      className={cn(\n        'flex items-center gap-2 truncate font-semibold',\n        className\n      )}\n    >\n      {logo}\n      {title && <span className=\"truncate text-xl font-bold\">{title}</span>}\n    </div>\n  );\n  return href ? (\n    <a href={href} className=\"flex items-center\" aria-label=\"Home\">\n      {content}\n    </a>\n  ) : (\n    content\n  );\n}\n"],"mappings":";;;;;;;;YAGmD;AASnD,SAAgB,SAAS,EACvB,OAAO,KACP,MACA,OACA,aACgB;CAChB,MAAM,UACJ,qBAAC;EACC,WAAW,GACT,kDACA,UACD;aAEA,MACA,SAAS,oBAAC;GAAK,WAAU;aAA8B;IAAa;GACjE;AAER,QAAO,OACL,oBAAC;EAAQ;EAAM,WAAU;EAAoB,cAAW;YACrD;GACC,GAEJ"}

package/dist/components/atoms/Stepper.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime7 from "react/jsx-runtime";
+import { StepperProps } from "@lssm/lib.ui-kit-web/ui/stepper";
+
+//#region src/components/atoms/Stepper.d.ts
+declare function Stepper(props: StepperProps): react_jsx_runtime7.JSX.Element;
+//#endregion
+export { Stepper };
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/components/atoms/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","names":[],"sources":["../../../src/components/atoms/Stepper.tsx"],"sourcesContent":[],"mappings":";;;;iBAQgB,OAAA,QAAe,eAAY,kBAAA,CAAA,GAAA,CAAA"}

package/dist/components/atoms/Stepper.js

@@ -0,0 +1,15 @@
+'use client';
+
+
+import { Stepper as Stepper$1 } from "../../ui-kit-web/dist/ui/stepper.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/atoms/Stepper.tsx
+function Stepper(props) {
+	return /* @__PURE__ */ jsx(Stepper$1, { ...props });
+}
+
+//#endregion
+export { Stepper };
+//# sourceMappingURL=Stepper.js.map

package/dist/components/atoms/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","names":["WebStepper"],"sources":["../../../src/components/atoms/Stepper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Stepper as WebStepper,\n  type StepperProps,\n} from '@lssm/lib.ui-kit-web/ui/stepper';\n\nexport function Stepper(props: StepperProps) {\n  return <WebStepper {...props} />;\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,QAAQ,OAAqB;AAC3C,QAAO,oBAACA,aAAW,GAAI,QAAS"}

package/dist/components/atoms/Textarea.d.ts

@@ -0,0 +1,42 @@
+import { KeyboardOptions } from "../../lib/keyboard.js";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+import { TextareaProps as TextareaProps$1 } from "@lssm/lib.ui-kit-web/ui/textarea";
+
+//#region src/components/atoms/Textarea.d.ts
+interface BaseFieldProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (text: string) => void;
+  onSubmit?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  maxLength?: number;
+  name?: string;
+  className?: string;
+  rows?: number;
+  keyboard?: KeyboardOptions;
+}
+type TextareaProps = Omit<TextareaProps$1, 'onChange' | 'value' | 'defaultValue'> & BaseFieldProps;
+declare function Textarea({
+  value,
+  defaultValue,
+  onChange,
+  onSubmit,
+  onFocus,
+  onBlur,
+  placeholder,
+  disabled,
+  readOnly,
+  maxLength,
+  name,
+  className,
+  rows,
+  keyboard,
+  ...rest
+}: TextareaProps): react_jsx_runtime9.JSX.Element;
+//#endregion
+export { Textarea, Textarea as default, TextareaProps };
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/atoms/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","names":[],"sources":["../../../src/components/atoms/Textarea.tsx"],"sourcesContent":[],"mappings":";;;;;UAOU,cAAA;;;EAAA,QAAA,CAAA,EAAA,CAAA,IAAA,EAAc,MAAA,EAAA,GAcX,IAAA;EAGD,QAAA,CAAA,EAAA,GAAA,GAAa,IAAA;EACvB,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAD0B,MAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAI1B,WAAA,CAAA,EAAA,MAAA;EAAc,QAAA,CAAA,EAAA,OAAA;EAEA,QAAA,CAAA,EAAQ,OAAA;EACtB,SAAA,CAAA,EAAA,MAAA;EACA,IAAA,CAAA,EAAA,MAAA;EACA,SAAA,CAAA,EAAA,MAAA;EACA,IAAA,CAAA,EAAA,MAAA;EACA,QAAA,CAAA,EAdW,eAcX;;AAEA,KAbU,aAAA,GAAgB,IAa1B,CAZA,eAYA,EAAA,UAAA,GAAA,OAAA,GAAA,cAAA,CAAA,GATA,cASA;AACA,iBARc,QAAA,CAQd;EAAA,KAAA;EAAA,YAAA;EAAA,QAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,WAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,IAAA;EAAA,SAAA;EAAA,IAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAQC,aARD,CAAA,EAQc,kBAAA,CAAA,GAAA,CAAA,OARd"}

package/dist/components/atoms/Textarea.js

@@ -0,0 +1,37 @@
+import { mapKeyboardToWeb } from "../../lib/keyboard.js";
+import { Textarea as Textarea$1 } from "../../ui-kit-web/dist/ui/textarea.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/atoms/Textarea.tsx
+function Textarea({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, disabled, readOnly, maxLength, name, className, rows, keyboard,...rest }) {
+	const webKeyboard = mapKeyboardToWeb(keyboard);
+	const handleChange = React$1.useCallback((e) => onChange?.(e.target.value), [onChange]);
+	const handleKeyDown = React$1.useCallback((e) => {
+		if (e.key === "Enter" && webKeyboard.type !== "search") {
+			if (e.metaKey || e.ctrlKey) onSubmit?.();
+		}
+	}, [onSubmit, webKeyboard.type]);
+	return /* @__PURE__ */ jsx(Textarea$1, {
+		...rest,
+		className,
+		value,
+		defaultValue,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		onFocus,
+		onBlur,
+		placeholder,
+		disabled,
+		readOnly,
+		maxLength,
+		name,
+		rows,
+		...webKeyboard
+	});
+}
+var Textarea_default = Textarea;
+
+//#endregion
+export { Textarea, Textarea_default as default };
+//# sourceMappingURL=Textarea.js.map

package/dist/components/atoms/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":["React","WebTextarea"],"sources":["../../../src/components/atoms/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Textarea as WebTextarea,\n  type TextareaProps as WebTextareaProps,\n} from '@lssm/lib.ui-kit-web/ui/textarea';\nimport { type KeyboardOptions, mapKeyboardToWeb } from '../../lib/keyboard';\n\ninterface BaseFieldProps {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (text: string) => void;\n  onSubmit?: () => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  placeholder?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  maxLength?: number;\n  name?: string;\n  className?: string;\n  rows?: number;\n  keyboard?: KeyboardOptions;\n}\n\nexport type TextareaProps = Omit<\n  WebTextareaProps,\n  'onChange' | 'value' | 'defaultValue'\n> &\n  BaseFieldProps;\n\nexport function Textarea({\n  value,\n  defaultValue,\n  onChange,\n  onSubmit,\n  onFocus,\n  onBlur,\n  placeholder,\n  disabled,\n  readOnly,\n  maxLength,\n  name,\n  className,\n  rows,\n  keyboard,\n  ...rest\n}: TextareaProps) {\n  const webKeyboard = mapKeyboardToWeb(keyboard);\n\n  const handleChange = React.useCallback<\n    React.ChangeEventHandler<HTMLTextAreaElement>\n  >((e) => onChange?.(e.target.value), [onChange]);\n\n  const handleKeyDown = React.useCallback<\n    React.KeyboardEventHandler<HTMLTextAreaElement>\n  >(\n    (e) => {\n      if (e.key === 'Enter' && webKeyboard.type !== 'search') {\n        // For textarea, Enter inserts newline; onSubmit could be used with modifier\n        if (e.metaKey || e.ctrlKey) onSubmit?.();\n      }\n    },\n    [onSubmit, webKeyboard.type]\n  );\n\n  return (\n    <WebTextarea\n      {...(rest as any)}\n      className={className}\n      value={value as any}\n      defaultValue={defaultValue as any}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onFocus={onFocus as any}\n      onBlur={onBlur as any}\n      placeholder={placeholder}\n      disabled={disabled}\n      readOnly={readOnly}\n      maxLength={maxLength}\n      name={name}\n      rows={rows}\n      {...webKeyboard}\n    />\n  );\n}\n\nexport default Textarea;\n"],"mappings":";;;;;;AA8BA,SAAgB,SAAS,EACvB,OACA,cACA,UACA,UACA,SACA,QACA,aACA,UACA,UACA,WACA,MACA,WACA,MACA,SACA,GAAG,QACa;CAChB,MAAM,cAAc,iBAAiB,SAAS;CAE9C,MAAM,eAAeA,QAAM,aAExB,MAAM,WAAW,EAAE,OAAO,MAAM,EAAE,CAAC,SAAS,CAAC;CAEhD,MAAM,gBAAgBA,QAAM,aAGzB,MAAM;AACL,MAAI,EAAE,QAAQ,WAAW,YAAY,SAAS,UAE5C;OAAI,EAAE,WAAW,EAAE,QAAS,aAAY;;IAG5C,CAAC,UAAU,YAAY,KAAK,CAC7B;AAED,QACE,oBAACC;EACC,GAAK;EACM;EACJ;EACO;EACd,UAAU;EACV,WAAW;EACF;EACD;EACK;EACH;EACA;EACC;EACL;EACA;EACN,GAAI;GACJ;;AAIN,uBAAe"}

package/dist/components/atoms/Textarea.mobile.d.ts

@@ -0,0 +1,38 @@
+import { KeyboardOptions } from "../../lib/keyboard.js";
+import * as React$1 from "react";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+import { Textarea as Textarea$1 } from "@lssm/lib.ui-kit/ui/textarea";
+
+//#region src/components/atoms/Textarea.mobile.d.ts
+interface BaseFieldProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (text: string) => void;
+  onSubmit?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  maxLength?: number;
+  className?: string;
+  keyboard?: KeyboardOptions;
+}
+type NativeTextareaComponentProps = React$1.ComponentProps<typeof Textarea$1>;
+type TextareaProps = Omit<NativeTextareaComponentProps, 'onChangeText' | 'value' | 'defaultValue'> & BaseFieldProps;
+declare function Textarea({
+  value,
+  defaultValue,
+  onChange,
+  onSubmit,
+  onFocus,
+  onBlur,
+  placeholder,
+  disabled,
+  maxLength,
+  className,
+  keyboard,
+  ...rest
+}: TextareaProps): react_jsx_runtime8.JSX.Element;
+//#endregion
+export { Textarea, Textarea as default, TextareaProps };
+//# sourceMappingURL=Textarea.mobile.d.ts.map

package/dist/components/atoms/Textarea.mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.mobile.d.ts","names":[],"sources":["../../../src/components/atoms/Textarea.mobile.tsx"],"sourcesContent":[],"mappings":";;;;;;UAIU,cAAA;;;EAAA,QAAA,CAAA,EAAA,CAAA,IAAA,EAAc,MAAA,EAAA,GAWX,IAAA;EAGR,QAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACO,OAAA,CAAA,EAAA,GAAA,GAAa,IAAA;EACvB,MAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAD0B,WAAA,CAAA,EAAA,MAAA;EAI1B,QAAA,CAAA,EAAA,OAAA;EAAc,SAAA,CAAA,EAAA,MAAA;EAEA,SAAA,CAAA,EAAQ,MAAA;EACtB,QAAA,CAAA,EAXW,eAWX;;KARG,4BAAA,GAA+B,OAAA,CAAM,cAUxC,CAAA,OAV8D,UAU9D,CAAA;AACA,KAVU,aAAA,GAAgB,IAU1B,CATA,4BASA,EAAA,cAAA,GAAA,OAAA,GAAA,cAAA,CAAA,GANA,cAMA;AACA,iBALc,QAAA,CAKd;EAAA,KAAA;EAAA,YAAA;EAAA,QAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,WAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAQC,aARD,CAAA,EAQc,kBAAA,CAAA,GAAA,CAAA,OARd"}

package/dist/components/atoms/Textarea.mobile.js

@@ -0,0 +1,28 @@
+import { mapKeyboardToNative } from "../../lib/keyboard.js";
+import { Textarea as Textarea$1 } from "../../ui-kit/dist/ui/textarea.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/atoms/Textarea.mobile.tsx
+function Textarea({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, disabled, maxLength, className, keyboard,...rest }) {
+	const nativeKeyboard = mapKeyboardToNative(keyboard);
+	return /* @__PURE__ */ jsx(Textarea$1, {
+		...rest,
+		className,
+		value,
+		defaultValue,
+		onChangeText: onChange,
+		onSubmitEditing: onSubmit,
+		onFocus,
+		onBlur,
+		placeholder,
+		editable: !disabled,
+		maxLength,
+		...nativeKeyboard
+	});
+}
+var Textarea_mobile_default = Textarea;
+
+//#endregion
+export { Textarea, Textarea_mobile_default as default };
+//# sourceMappingURL=Textarea.mobile.js.map

package/dist/components/atoms/Textarea.mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.mobile.js","names":["NativeTextarea"],"sources":["../../../src/components/atoms/Textarea.mobile.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Textarea as NativeTextarea } from '@lssm/lib.ui-kit/ui/textarea';\nimport { mapKeyboardToNative, type KeyboardOptions } from '../../lib/keyboard';\n\ninterface BaseFieldProps {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (text: string) => void;\n  onSubmit?: () => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  placeholder?: string;\n  disabled?: boolean;\n  maxLength?: number;\n  className?: string;\n  keyboard?: KeyboardOptions;\n}\n\ntype NativeTextareaComponentProps = React.ComponentProps<typeof NativeTextarea>;\nexport type TextareaProps = Omit<\n  NativeTextareaComponentProps,\n  'onChangeText' | 'value' | 'defaultValue'\n> &\n  BaseFieldProps;\n\nexport function Textarea({\n  value,\n  defaultValue,\n  onChange,\n  onSubmit,\n  onFocus,\n  onBlur,\n  placeholder,\n  disabled,\n  maxLength,\n  className,\n  keyboard,\n  ...rest\n}: TextareaProps) {\n  const nativeKeyboard = mapKeyboardToNative(keyboard);\n\n  return (\n    <NativeTextarea\n      {...(rest as any)}\n      className={className as any}\n      value={value as any}\n      defaultValue={defaultValue as any}\n      onChangeText={onChange as any}\n      onSubmitEditing={onSubmit as any}\n      onFocus={onFocus as any}\n      onBlur={onBlur as any}\n      placeholder={placeholder}\n      editable={!disabled}\n      maxLength={maxLength}\n      {...(nativeKeyboard as any)}\n    />\n  );\n}\n\nexport default Textarea;\n"],"mappings":";;;;;;AAyBA,SAAgB,SAAS,EACvB,OACA,cACA,UACA,UACA,SACA,QACA,aACA,UACA,WACA,WACA,SACA,GAAG,QACa;CAChB,MAAM,iBAAiB,oBAAoB,SAAS;AAEpD,QACE,oBAACA;EACC,GAAK;EACM;EACJ;EACO;EACd,cAAc;EACd,iBAAiB;EACR;EACD;EACK;EACb,UAAU,CAAC;EACA;EACX,GAAK;GACL;;AAIN,8BAAe"}

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

@@ -0,0 +1,21 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
+
+//#region src/components/data-view/DataViewDetail.d.ts
+interface DataViewDetailProps {
+  spec: DataViewSpec;
+  item: Record<string, unknown> | null;
+  className?: string;
+  emptyState?: React$1.ReactNode;
+  headerActions?: React$1.ReactNode;
+}
+declare function DataViewDetail({
+  spec,
+  item,
+  className,
+  emptyState,
+  headerActions
+}: DataViewDetailProps): react_jsx_runtime22.JSX.Element;
+//#endregion
+export { DataViewDetail, DataViewDetailProps };
+//# sourceMappingURL=DataViewDetail.d.ts.map

package/dist/components/data-view/DataViewDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewDetail.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewDetail.tsx"],"sourcesContent":[],"mappings":";;;;UAWiB,mBAAA;QACT;EADS,IAAA,EAET,MAFS,CAAA,MAAA,EAAA,OAAmB,CAAA,GAAA,IAAA;EAC5B,SAAA,CAAA,EAAA,MAAA;EACA,UAAA,CAAA,EAEO,OAAA,CAAM,SAFb;EAEO,aAAM,CAAA,EACH,OAAA,CAAM,SADH;;AACY,iBAGjB,cAAA,CAHiB;EAAA,IAAA;EAAA,IAAA;EAAA,SAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EAS9B,mBAT8B,CAAA,EASX,mBAAA,CAAA,GAAA,CAAA,OATW"}

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

@@ -0,0 +1,81 @@
+'use client';
+
+
+import { cn } from "../../lib/utils.js";
+import { formatValue, getAtPath } from "./utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data-view/DataViewDetail.tsx
+function DataViewDetail({ spec, item, className, emptyState, headerActions }) {
+	if (spec.view.kind !== "detail") throw new Error(`DataViewDetail received view kind "${spec.view.kind}", expected "detail".`);
+	const view = spec.view;
+	const fields = view.fields;
+	if (!item) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-base font-semibold text-foreground",
+				children: spec.meta.title
+			}), headerActions]
+		}), emptyState ?? /* @__PURE__ */ jsx("div", {
+			className: "rounded-md border border-dashed border-muted-foreground/40 p-8 text-center text-sm text-muted-foreground",
+			children: "Select a record to view details."
+		})]
+	});
+	const sections = view.sections && view.sections.length > 0 ? view.sections : [{ fields: fields.map((field) => field.key) }];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-6", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-xl font-semibold text-foreground",
+				children: spec.meta.title
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: spec.meta.description
+			})] }), headerActions]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-6",
+			children: sections.map((section, idx) => /* @__PURE__ */ jsxs("div", {
+				className: "rounded-lg border border-border bg-card p-4 shadow-sm",
+				children: [
+					section.title ? /* @__PURE__ */ jsx("h4", {
+						className: "mb-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground",
+						children: section.title
+					}) : null,
+					section.description ? /* @__PURE__ */ jsx("p", {
+						className: "mb-4 text-sm text-muted-foreground",
+						children: section.description
+					}) : null,
+					/* @__PURE__ */ jsx("dl", {
+						className: "grid gap-4 md:grid-cols-2",
+						children: section.fields.map((fieldKey) => {
+							const field = fieldByKey(fields, fieldKey);
+							if (!field) return null;
+							const value = getAtPath(item, field.dataPath);
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ jsx("dt", {
+									className: "text-xs font-semibold uppercase text-muted-foreground/80",
+									children: field.label
+								}), /* @__PURE__ */ jsx("dd", {
+									className: "text-sm text-foreground",
+									children: formatValue(value, field.format)
+								})]
+							}, field.key);
+						})
+					})
+				]
+			}, idx))
+		})]
+	});
+}
+function fieldByKey(fields, key) {
+	return fields.find((field) => field.key === key);
+}
+
+//#endregion
+export { DataViewDetail };
+//# sourceMappingURL=DataViewDetail.js.map

package/dist/components/data-view/DataViewDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewDetail.js","names":[],"sources":["../../../src/components/data-view/DataViewDetail.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewSpec,\n  DataViewDetailConfig,\n  DataViewField,\n} from '@lssm/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { getAtPath, formatValue } from './utils';\n\nexport interface DataViewDetailProps {\n  spec: DataViewSpec;\n  item: Record<string, unknown> | null;\n  className?: string;\n  emptyState?: React.ReactNode;\n  headerActions?: React.ReactNode;\n}\n\nexport function DataViewDetail({\n  spec,\n  item,\n  className,\n  emptyState,\n  headerActions,\n}: DataViewDetailProps) {\n  if (spec.view.kind !== 'detail') {\n    throw new Error(\n      `DataViewDetail received view kind \"${spec.view.kind}\", expected \"detail\".`\n    );\n  }\n\n  const view = spec.view as DataViewDetailConfig;\n  const fields = view.fields;\n\n  if (!item) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-base font-semibold text-foreground\">\n            {spec.meta.title}\n          </h3>\n          {headerActions}\n        </div>\n        {emptyState ?? (\n          <div className=\"rounded-md border border-dashed border-muted-foreground/40 p-8 text-center text-sm text-muted-foreground\">\n            Select a record to view details.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  const sections =\n    view.sections && view.sections.length > 0\n      ? view.sections\n      : [{ fields: fields.map((field) => field.key) }];\n\n  return (\n    <div className={cn('flex w-full flex-col gap-6', className)}>\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-xl font-semibold text-foreground\">\n            {spec.meta.title}\n          </h3>\n          <p className=\"text-sm text-muted-foreground\">{spec.meta.description}</p>\n        </div>\n        {headerActions}\n      </div>\n      <div className=\"flex flex-col gap-6\">\n        {sections.map((section, idx) => (\n          <div\n            key={idx}\n            className=\"rounded-lg border border-border bg-card p-4 shadow-sm\"\n          >\n            {section.title ? (\n              <h4 className=\"mb-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground\">\n                {section.title}\n              </h4>\n            ) : null}\n            {section.description ? (\n              <p className=\"mb-4 text-sm text-muted-foreground\">\n                {section.description}\n              </p>\n            ) : null}\n            <dl className=\"grid gap-4 md:grid-cols-2\">\n              {section.fields.map((fieldKey) => {\n                const field = fieldByKey(fields, fieldKey);\n                if (!field) return null;\n                const value = getAtPath(item, field.dataPath);\n                return (\n                  <div key={field.key} className=\"flex flex-col gap-1\">\n                    <dt className=\"text-xs font-semibold uppercase text-muted-foreground/80\">\n                      {field.label}\n                    </dt>\n                    <dd className=\"text-sm text-foreground\">\n                      {formatValue(value, field.format)}\n                    </dd>\n                  </div>\n                );\n              })}\n            </dl>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction fieldByKey(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key);\n}\n\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,eAAe,EAC7B,MACA,MACA,WACA,YACA,iBACsB;AACtB,KAAI,KAAK,KAAK,SAAS,SACrB,OAAM,IAAI,MACR,sCAAsC,KAAK,KAAK,KAAK,uBACtD;CAGH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;AAEpB,KAAI,CAAC,KACH,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACJ;IACG,EACL,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;CAIV,MAAM,WACJ,KAAK,YAAY,KAAK,SAAS,SAAS,IACpC,KAAK,WACL,CAAC,EAAE,QAAQ,OAAO,KAAK,UAAU,MAAM,IAAI,EAAE,CAAC;AAEpD,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,qBAAC,oBACC,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACL,oBAAC;IAAE,WAAU;cAAiC,KAAK,KAAK;KAAgB,IACpE,EACL;IACG,EACN,oBAAC;GAAI,WAAU;aACZ,SAAS,KAAK,SAAS,QACtB,qBAAC;IAEC,WAAU;;KAET,QAAQ,QACP,oBAAC;MAAG,WAAU;gBACX,QAAQ;OACN,GACH;KACH,QAAQ,cACP,oBAAC;MAAE,WAAU;gBACV,QAAQ;OACP,GACF;KACJ,oBAAC;MAAG,WAAU;gBACX,QAAQ,OAAO,KAAK,aAAa;OAChC,MAAM,QAAQ,WAAW,QAAQ,SAAS;AAC1C,WAAI,CAAC,MAAO,QAAO;OACnB,MAAM,QAAQ,UAAU,MAAM,MAAM,SAAS;AAC7C,cACE,qBAAC;QAAoB,WAAU;mBAC7B,oBAAC;SAAG,WAAU;mBACX,MAAM;UACJ,EACL,oBAAC;SAAG,WAAU;mBACX,YAAY,OAAO,MAAM,OAAO;UAC9B;UANG,MAAM,IAOV;QAER;OACC;;MA7BA,IA8BD,CACN;IACE;GACF;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI"}

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

@@ -0,0 +1,23 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
+
+//#region src/components/data-view/DataViewList.d.ts
+interface DataViewListProps {
+  spec: DataViewSpec;
+  items: Record<string, unknown>[];
+  className?: string;
+  renderActions?: (item: Record<string, unknown>) => React$1.ReactNode;
+  onSelect?: (item: Record<string, unknown>) => void;
+  emptyState?: React$1.ReactNode;
+}
+declare function DataViewList({
+  spec,
+  items,
+  className,
+  renderActions,
+  onSelect,
+  emptyState
+}: DataViewListProps): react_jsx_runtime27.JSX.Element;
+//#endregion
+export { DataViewList, DataViewListProps };
+//# sourceMappingURL=DataViewList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewList.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":[],"mappings":";;;;UAWiB,iBAAA;QACT;EADS,KAAA,EAER,MAFQ,CAAA,MAAiB,EAAA,OAAA,CAAA,EAAA;EAC1B,SAAA,CAAA,EAAA,MAAA;EACC,aAAA,CAAA,EAAA,CAAA,IAAA,EAEgB,MAFhB,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAE4C,OAAA,CAAM,SAFlD;EAEgB,QAAA,CAAA,EAAA,CAAA,IAAA,EACL,MADK,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAA4B,UAAM,CAAA,EAE5C,OAAA,CAAM,SAFsC;;AAE5C,iBAGC,YAAA,CAHK;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAUlB,iBAVkB,CAAA,EAUD,mBAAA,CAAA,GAAA,CAAA,OAVC"}

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

@@ -0,0 +1,68 @@
+'use client';
+
+
+import { cn } from "../../lib/utils.js";
+import { formatValue, getAtPath } from "./utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data-view/DataViewList.tsx
+function DataViewList({ spec, items, className, renderActions, onSelect, emptyState }) {
+	if (spec.view.kind !== "list") throw new Error(`DataViewList received view kind "${spec.view.kind}", expected "list".`);
+	const view = spec.view;
+	const fields = view.fields;
+	const primaryField = view.primaryField ?? fields.find((field) => field.key === view.primaryField)?.key ?? fields[0]?.key;
+	if (!items.length) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: emptyState ?? /* @__PURE__ */ jsx("div", {
+			className: "rounded-md border border-dashed border-muted-foreground/40 p-8 text-center text-sm text-muted-foreground",
+			children: "No records available."
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: items.map((item, idx) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn("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", view.layout === "compact" && "md:flex-row md:items-center md:gap-4"),
+			onClick: () => onSelect?.(item),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col gap-1",
+				children: [primaryField ? /* @__PURE__ */ jsx("span", {
+					className: "text-base font-medium text-foreground",
+					children: displayValue(item, fields, primaryField)
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground",
+					children: secondaryFieldKeys(view, primaryField).map((fieldKey) => /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium text-foreground/80",
+							children: fieldLabel(fields, fieldKey)
+						}), /* @__PURE__ */ jsx("span", { children: displayValue(item, fields, fieldKey) })]
+					}, fieldKey))
+				})]
+			}), renderActions ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: renderActions(item)
+			}) : null]
+		}, idx))
+	});
+}
+function fieldLabel(fields, key) {
+	return fields.find((field) => field.key === key)?.label ?? key;
+}
+function fieldByKey(fields, key) {
+	return fields.find((field) => field.key === key);
+}
+function displayValue(item, fields, key) {
+	const field = fieldByKey(fields, key);
+	if (!field) return "";
+	return formatValue(getAtPath(item, field.dataPath), field.format);
+}
+function secondaryFieldKeys(view, primaryField) {
+	if (view.secondaryFields?.length) return view.secondaryFields;
+	return view.fields.map((field) => field.key).filter((key) => key !== primaryField);
+}
+
+//#endregion
+export { DataViewList };
+//# sourceMappingURL=DataViewList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewList.js","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewSpec,\n  DataViewListConfig,\n  DataViewField,\n} from '@lssm/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { getAtPath, formatValue } from './utils';\n\nexport interface DataViewListProps {\n  spec: DataViewSpec;\n  items: Record<string, unknown>[];\n  className?: string;\n  renderActions?: (item: Record<string, unknown>) => React.ReactNode;\n  onSelect?: (item: Record<string, unknown>) => void;\n  emptyState?: React.ReactNode;\n}\n\nexport function DataViewList({\n  spec,\n  items,\n  className,\n  renderActions,\n  onSelect,\n  emptyState,\n}: DataViewListProps) {\n  if (spec.view.kind !== 'list') {\n    throw new Error(\n      `DataViewList received view kind \"${spec.view.kind}\", expected \"list\".`\n    );\n  }\n  const view = spec.view as DataViewListConfig;\n  const fields = view.fields;\n  const primaryField =\n    view.primaryField ??\n    fields.find((field) => field.key === view.primaryField)?.key ??\n    fields[0]?.key;\n\n  if (!items.length) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        {emptyState ?? (\n          <div className=\"rounded-md border border-dashed border-muted-foreground/40 p-8 text-center text-sm text-muted-foreground\">\n            No records available.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-4', className)}>\n      {items.map((item, idx) => (\n        <button\n          type=\"button\"\n          key={idx}\n          className={cn(\n            '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            view.layout === 'compact' && 'md:flex-row md:items-center md:gap-4'\n          )}\n          onClick={() => onSelect?.(item)}\n        >\n          <div className=\"flex flex-1 flex-col gap-1\">\n            {primaryField ? (\n              <span className=\"text-base font-medium text-foreground\">\n                {displayValue(item, fields, primaryField)}\n              </span>\n            ) : null}\n            <div className=\"flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground\">\n              {secondaryFieldKeys(view, primaryField).map((fieldKey) => (\n                <span key={fieldKey} className=\"flex items-center gap-1.5\">\n                  <span className=\"font-medium text-foreground/80\">\n                    {fieldLabel(fields, fieldKey)}\n                  </span>\n                  <span>{displayValue(item, fields, fieldKey)}</span>\n                </span>\n              ))}\n            </div>\n          </div>\n          {renderActions ? (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              {renderActions(item)}\n            </div>\n          ) : null}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nfunction fieldLabel(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key)?.label ?? key;\n}\n\nfunction fieldByKey(fields: DataViewField[], key?: string) {\n  return fields.find((field) => field.key === key);\n}\n\nfunction displayValue(\n  item: Record<string, unknown>,\n  fields: DataViewField[],\n  key: string\n) {\n  const field = fieldByKey(fields, key);\n  if (!field) return '';\n  const value = getAtPath(item, field.dataPath);\n  return formatValue(value, field.format);\n}\n\nfunction secondaryFieldKeys(view: DataViewListConfig, primaryField?: string) {\n  if (view.secondaryFields?.length) return view.secondaryFields;\n  return view.fields\n    .map((field) => field.key)\n    .filter((key) => key !== primaryField);\n}\n\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,aAAa,EAC3B,MACA,OACA,WACA,eACA,UACA,cACoB;AACpB,KAAI,KAAK,KAAK,SAAS,OACrB,OAAM,IAAI,MACR,oCAAoC,KAAK,KAAK,KAAK,qBACpD;CAEH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;CACpB,MAAM,eACJ,KAAK,gBACL,OAAO,MAAM,UAAU,MAAM,QAAQ,KAAK,aAAa,EAAE,OACzD,OAAO,IAAI;AAEb,KAAI,CAAC,MAAM,OACT,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;AAIV,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,MAAM,KAAK,MAAM,QAChB,qBAAC;GACC,MAAK;GAEL,WAAW,GACT,2PACA,KAAK,WAAW,aAAa,uCAC9B;GACD,eAAe,WAAW,KAAK;cAE/B,qBAAC;IAAI,WAAU;eACZ,eACC,oBAAC;KAAK,WAAU;eACb,aAAa,MAAM,QAAQ,aAAa;MACpC,GACL,MACJ,oBAAC;KAAI,WAAU;eACZ,mBAAmB,MAAM,aAAa,CAAC,KAAK,aAC3C,qBAAC;MAAoB,WAAU;iBAC7B,oBAAC;OAAK,WAAU;iBACb,WAAW,QAAQ,SAAS;QACxB,EACP,oBAAC,oBAAM,aAAa,MAAM,QAAQ,SAAS,GAAQ;QAJ1C,SAKJ,CACP;MACE;KACF,EACL,gBACC,oBAAC;IAAI,WAAU;cACZ,cAAc,KAAK;KAChB,GACJ;KA5BC,IA6BE,CACT;GACE;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI,EAAE,SAAS;;AAG7D,SAAS,WAAW,QAAyB,KAAc;AACzD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI;;AAGlD,SAAS,aACP,MACA,QACA,KACA;CACA,MAAM,QAAQ,WAAW,QAAQ,IAAI;AACrC,KAAI,CAAC,MAAO,QAAO;AAEnB,QAAO,YADO,UAAU,MAAM,MAAM,SAAS,EACnB,MAAM,OAAO;;AAGzC,SAAS,mBAAmB,MAA0B,cAAuB;AAC3E,KAAI,KAAK,iBAAiB,OAAQ,QAAO,KAAK;AAC9C,QAAO,KAAK,OACT,KAAK,UAAU,MAAM,IAAI,CACzB,QAAQ,QAAQ,QAAQ,aAAa"}

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

@@ -0,0 +1,31 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
+
+//#region src/components/data-view/DataViewRenderer.d.ts
+interface DataViewRendererProps {
+  spec: DataViewSpec;
+  items?: Record<string, unknown>[];
+  item?: Record<string, unknown> | null;
+  className?: string;
+  renderActions?: (item: Record<string, unknown>) => React$1.ReactNode;
+  onSelect?: (item: Record<string, unknown>) => void;
+  onRowClick?: (item: Record<string, unknown>) => void;
+  headerActions?: React$1.ReactNode;
+  emptyState?: React$1.ReactNode;
+  footer?: React$1.ReactNode;
+}
+declare function DataViewRenderer({
+  spec,
+  items,
+  item,
+  className,
+  renderActions,
+  onSelect,
+  onRowClick,
+  headerActions,
+  emptyState,
+  footer
+}: DataViewRendererProps): react_jsx_runtime24.JSX.Element;
+//#endregion
+export { DataViewRenderer, DataViewRendererProps };
+//# sourceMappingURL=DataViewRenderer.d.ts.map