@wildo-ai/presets-components 1.0.1

package/dist/esm/components/data-display/badge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { UIBehavior, IndicatorVariant } from "@wildo-ai/presets-components-models";
+import { cn, useUI } from "@wildo-ai/saas-frontend-lib";
+/** Map public variant names to IndicatorVariant enum values */
+const VARIANT_MAP = {
+    default: IndicatorVariant.NEUTRAL,
+    secondary: IndicatorVariant.NEUTRAL,
+    destructive: IndicatorVariant.ERROR,
+    outline: IndicatorVariant.NEUTRAL,
+    info: IndicatorVariant.INFO,
+    success: IndicatorVariant.SUCCESS,
+    warning: IndicatorVariant.WARNING,
+};
+/** Structure classes — layout, sizing. Theme-independent. */
+const STRUCTURE = "inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-item-xs [&>svg]:pointer-events-none overflow-hidden";
+function Badge({ className, variant = "default", asChild = false, ...props }) {
+    const { getRecipe } = useUI();
+    const Comp = asChild ? Slot : "span";
+    const recipe = getRecipe(UIBehavior.INDICATOR, VARIANT_MAP[variant]);
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(STRUCTURE, recipe.base, recipe.states.hover, recipe.states.focus, recipe.states.invalid, recipe.motion.transition, className), ...props }));
+}
+export { Badge };
+//# sourceMappingURL=badge.js.map

package/dist/esm/components/data-display/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/data-display/badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AAGlF,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAEvD,+DAA+D;AAC/D,MAAM,WAAW,GAAoD;IACnE,OAAO,EAAE,gBAAgB,CAAC,OAAO;IACjC,SAAS,EAAE,gBAAgB,CAAC,OAAO;IACnC,WAAW,EAAE,gBAAgB,CAAC,KAAK;IACnC,OAAO,EAAE,gBAAgB,CAAC,OAAO;IACjC,IAAI,EAAE,gBAAgB,CAAC,IAAI;IAC3B,OAAO,EAAE,gBAAgB,CAAC,OAAO;IACjC,OAAO,EAAE,gBAAgB,CAAC,OAAO;CAClC,CAAA;AAED,6DAA6D;AAC7D,MAAM,SAAS,GAAW,iJAAiJ,CAAA;AAE3K,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACG;IACX,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA;IACpC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;IAEpE,OAAO,CACL,KAAC,IAAI,iBACO,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,SAAS,EACT,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,MAAM,CAAC,OAAO,EACrB,MAAM,CAAC,MAAM,CAAC,UAAU,EACxB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/esm/components/data-display/description-list.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function DescriptionList({ className, ...props }: React.ComponentPropsWithoutRef<'dl'>): React.JSX.Element;
+export declare function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>): React.JSX.Element;
+export declare function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>): React.JSX.Element;
+//# sourceMappingURL=description-list.d.ts.map

package/dist/esm/components/data-display/description-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/description-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgBhH;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqBhH;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmBnH"}

package/dist/esm/components/data-display/description-list.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, useUI } from '@wildo-ai/saas-frontend-lib';
+import { UIBehavior, TypographyVariant } from '@wildo-ai/presets-components-models';
+export function DescriptionList({ className, ...props }) {
+    const { getRecipe } = useUI();
+    const recipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.BODY);
+    return (_jsx("dl", { ...props, className: cn(
+        // Structure
+        'grid grid-cols-1 sm:grid-cols-[min(50%,--spacing(80))_auto]', 
+        // Style from TYPOGRAPHY.BODY recipe
+        recipe.base, className) }));
+}
+export function DescriptionTerm({ className, ...props }) {
+    const { getRecipe } = useUI();
+    const descRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);
+    const dividerRecipe = getRecipe(UIBehavior.DIVIDER);
+    return (_jsx("dt", { ...props, className: cn(
+        // Structure
+        'col-start-1 pt-group first:border-none sm:py-group', 
+        // Style — term uses description color (muted)
+        descRecipe.base, 
+        // Divider between items
+        'border-t', dividerRecipe.base, 'sm:border-t', className) }));
+}
+export function DescriptionDetails({ className, ...props }) {
+    const { getRecipe } = useUI();
+    const dividerRecipe = getRecipe(UIBehavior.DIVIDER);
+    return (_jsx("dd", { ...props, className: cn(
+        // Structure
+        'pt-item pb-group sm:py-group sm:nth-2:border-none', 
+        // Style — value text
+        'text-foreground', 
+        // Divider between items
+        'sm:border-t', dividerRecipe.base, className) }));
+}
+//# sourceMappingURL=description-list.js.map

package/dist/esm/components/data-display/description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.js","sourceRoot":"","sources":["../../../../src/components/data-display/description-list.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAEnF,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC3F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAEvE,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,6DAA6D;QAC7D,oCAAoC;QACpC,MAAM,CAAC,IAAI,EACX,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC3F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAClF,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;IAEnD,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,oDAAoD;QACpD,8CAA8C;QAC9C,UAAU,CAAC,IAAI;QACf,wBAAwB;QACxB,UAAU,EACV,aAAa,CAAC,IAAI,EAClB,aAAa,EACb,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC9F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAC7B,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;IAEnD,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,EAAE;QACX,YAAY;QACZ,mDAAmD;QACnD,qBAAqB;QACrB,iBAAiB;QACjB,wBAAwB;QACxB,aAAa,EACb,aAAa,CAAC,IAAI,EAClB,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC"}

package/dist/esm/components/data-display/formatters/display-field-bigdecimal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * DisplayFieldBigDecimal Component
+ *
+ * Displays a bigdecimal value based on the bigdecimal UI decorator.
+ * Supports the same display modes as numbers: raw, formatted, percentage, compact, ordinal, bytes
+ * Uses big.js for precise arithmetic when needed.
+ */
+import * as React from "react";
+import type { DisplayFieldBigDecimalProps } from '@wildo-ai/saas-frontend-lib';
+/**
+ * DisplayFieldBigDecimal component
+ *
+ * Renders a bigdecimal value according to the bigdecimal UI decorator
+ */
+declare function DisplayFieldBigDecimal({ schema, value, className, locale, }: DisplayFieldBigDecimalProps): React.JSX.Element;
+export { DisplayFieldBigDecimal };
+//# sourceMappingURL=display-field-bigdecimal.d.ts.map

package/dist/esm/components/data-display/formatters/display-field-bigdecimal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-bigdecimal.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-bigdecimal.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAA;AAG9E;;;;GAIG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,MAAM,EACN,KAAK,EACL,SAAS,EACT,MAAM,GACP,EAAE,2BAA2B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2FjD;AAID,OAAO,EAAE,sBAAsB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-bigdecimal.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@wildo-ai/saas-frontend-lib";
+import { useI18n } from "@wildo-ai/saas-frontend-lib";
+import { FrontendComponentType } from "@wildo-ai/presets-components-models";
+import { getBigDecimalUI, getNumberUI, getBigDecimalMetadata, NumberDisplayMode, PercentageScale } from "@wildo-ai/zod-decorators";
+import { DisplayFieldFormatUtils } from "./display-field-format.utils.js";
+/**
+ * DisplayFieldBigDecimal component
+ *
+ * Renders a bigdecimal value according to the bigdecimal UI decorator
+ */
+function DisplayFieldBigDecimal({ schema, value, className, locale, }) {
+    const { regionalPreferences, tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FORM_FIELD });
+    const bdUI = getBigDecimalUI(schema);
+    const numUI = getNumberUI(schema);
+    const metadata = getBigDecimalMetadata(schema);
+    const displayMode = bdUI?.display?.displayMode ?? numUI?.display?.displayMode ?? NumberDisplayMode.RAW;
+    const decimalPlaces = bdUI?.decimalPlaces ?? numUI?.decimalPlaces ?? metadata?.precision;
+    const trailingZeros = bdUI?.trailingZeros ?? numUI?.trailingZeros ?? false;
+    const prefix = bdUI?.prefix ?? numUI?.prefix ?? '';
+    const suffix = bdUI?.suffix ?? numUI?.suffix ?? '';
+    const percentageScale = bdUI?.percentageScale ?? numUI?.percentageScale ?? PercentageScale.NORMALIZED;
+    // Locale priority: explicit prop > regional preferences > browser locale > fallback
+    const effectiveLocale = locale ?? regionalPreferences.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');
+    // Render the value content
+    const renderValue = () => {
+        // Handle null/undefined
+        if (value === null || value === undefined) {
+            return _jsxs(_Fragment, { children: [_jsx(Text, { className: "text-muted-foreground italic", "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue') })] });
+        }
+        // Convert string to number for formatting
+        // Note: For display purposes, we convert to number. For calculations, use big.js
+        const numericValue = parseFloat(value);
+        if (isNaN(numericValue)) {
+            return _jsx(Text, { className: "text-muted-foreground italic", children: "Invalid" });
+        }
+        // Format the number based on display mode
+        let formattedValue;
+        switch (displayMode) {
+            case NumberDisplayMode.RAW:
+                if (decimalPlaces !== undefined) {
+                    // Use string-based truncation to preserve BigDecimal precision
+                    // (parseFloat would lose precision beyond ~15-17 significant digits)
+                    formattedValue = DisplayFieldFormatUtils.truncateDecimalString(value, decimalPlaces, trailingZeros);
+                }
+                else {
+                    // For raw mode with bigdecimal, preserve original string representation
+                    formattedValue = value;
+                }
+                break;
+            case NumberDisplayMode.FORMATTED:
+                formattedValue = new Intl.NumberFormat(effectiveLocale, {
+                    minimumFractionDigits: trailingZeros ? decimalPlaces : undefined,
+                    maximumFractionDigits: decimalPlaces ?? 20, // Allow more decimals for precision
+                }).format(numericValue);
+                break;
+            case NumberDisplayMode.PERCENTAGE: {
+                const percentValue = percentageScale === PercentageScale.PERCENT ? numericValue / 100 : numericValue;
+                formattedValue = new Intl.NumberFormat(effectiveLocale, {
+                    style: 'percent',
+                    minimumFractionDigits: trailingZeros ? decimalPlaces : undefined,
+                    maximumFractionDigits: decimalPlaces ?? 0,
+                }).format(percentValue);
+                break;
+            }
+            case NumberDisplayMode.COMPACT:
+                formattedValue = new Intl.NumberFormat(effectiveLocale, {
+                    notation: 'compact',
+                    compactDisplay: 'short',
+                    maximumFractionDigits: decimalPlaces ?? 1,
+                }).format(numericValue);
+                break;
+            case NumberDisplayMode.ORDINAL:
+                formattedValue = DisplayFieldFormatUtils.formatOrdinal(Math.round(numericValue), effectiveLocale);
+                break;
+            case NumberDisplayMode.BYTES:
+                formattedValue = DisplayFieldFormatUtils.formatBytes(numericValue, decimalPlaces ?? 2);
+                break;
+            default:
+                formattedValue = value;
+        }
+        // Add prefix and suffix
+        const displayValue = `${prefix}${formattedValue}${suffix}`;
+        return _jsx(Text, { className: "tabular-nums", children: displayValue });
+    };
+    // Label/description rendering is handled by the parent DisplayField (FIELD-01)
+    return _jsx("div", { className: className, children: renderValue() });
+}
+;
+DisplayFieldBigDecimal.displayName = "DisplayFieldBigDecimal";
+export { DisplayFieldBigDecimal };
+//# sourceMappingURL=display-field-bigdecimal.js.map

package/dist/esm/components/data-display/formatters/display-field-bigdecimal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-bigdecimal.js","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-bigdecimal.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/data-display/formatters/display-field-boolean.d.ts

@@ -0,0 +1,19 @@
+/**
+ * DisplayFieldBoolean Component
+ *
+ * Displays a boolean value based on the boolean UI decorator.
+ * Supports different display modes: raw, checkmark, edit_like
+ */
+import * as React from "react";
+import type { DisplayFieldBooleanProps } from '@wildo-ai/saas-frontend-lib';
+/**
+ * DisplayFieldBoolean component
+ *
+ * Renders a boolean value according to the boolean UI decorator:
+ * - raw: Shows "Yes"/"No" or other labels based on labellingValue
+ * - checkmark: Shows a checkmark icon for true, nothing for false
+ * - edit_like: Shows the value in a form-like display (similar to edit mode)
+ */
+declare function DisplayFieldBoolean({ schema, value, className, }: DisplayFieldBooleanProps): React.JSX.Element;
+export { DisplayFieldBoolean };
+//# sourceMappingURL=display-field-boolean.d.ts.map

package/dist/esm/components/data-display/formatters/display-field-boolean.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-boolean.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-boolean.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AAE3E;;;;;;;GAOG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsE9C;AAID,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-boolean.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, useI18n, useIconRegistry, StandardIconReference, IconSize, Text } from "@wildo-ai/saas-frontend-lib";
+import { BooleanDisplayMode, getBooleanUI } from "@wildo-ai/zod-decorators";
+import { FrontendComponentType } from "@wildo-ai/presets-components-models";
+/**
+ * DisplayFieldBoolean component
+ *
+ * Renders a boolean value according to the boolean UI decorator:
+ * - raw: Shows "Yes"/"No" or other labels based on labellingValue
+ * - checkmark: Shows a checkmark icon for true, nothing for false
+ * - edit_like: Shows the value in a form-like display (similar to edit mode)
+ */
+function DisplayFieldBoolean({ schema, value, className, }) {
+    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FORM_FIELD_BOOLEAN });
+    const { renderIcon } = useIconRegistry();
+    const booleanUI = getBooleanUI(schema);
+    const displayMode = booleanUI?.display?.displayMode ?? BooleanDisplayMode.CHECKMARK;
+    const labellingValue = booleanUI?.labellingValue ?? 'yes/no';
+    const isCustomLabelling = labellingValue != null && typeof labellingValue === 'object' && labellingValue.mode === 'custom';
+    const [trueLabelKey, falseLabelKey] = isCustomLabelling ? [undefined, undefined] : labellingValue.split('/');
+    const getTrueLabel = () => isCustomLabelling ? labellingValue.trueValue : tComponent(FrontendComponentType.LOW_LEVEL_DISPLAY_FIELD_BOOLEAN, trueLabelKey);
+    const getFalseLabel = () => isCustomLabelling ? labellingValue.falseValue : tComponent(FrontendComponentType.LOW_LEVEL_DISPLAY_FIELD_BOOLEAN, falseLabelKey);
+    // Resolve the display label for current value (used for aria-label on visual-only modes)
+    const displayLabel = value !== null && value !== undefined
+        ? (value ? getTrueLabel() : getFalseLabel())
+        : undefined;
+    // Render the value content
+    const renderValue = () => {
+        // Handle null/undefined
+        if (value === null || value === undefined) {
+            return _jsxs(_Fragment, { children: [_jsx(Text, { className: cn("text-muted-foreground italic"), "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue') })] });
+        }
+        // Render based on display mode
+        switch (displayMode) {
+            case BooleanDisplayMode.RAW:
+                return (_jsx(Text, { children: displayLabel }));
+            case BooleanDisplayMode.CHECKMARK:
+                return (_jsxs("div", { className: "flex items-center gap-element", "aria-label": displayLabel, children: [value && (_jsx("span", { "aria-hidden": "true", children: renderIcon(StandardIconReference.CHECK, { size: IconSize.SM, className: "text-primary" }) })), !value && (_jsx("span", { "aria-hidden": "true", children: renderIcon(StandardIconReference.CLOSE, { size: IconSize.SM, className: "text-muted-foreground" }) })), _jsx("span", { className: "sr-only", children: displayLabel })] }));
+            case BooleanDisplayMode.EDIT_LIKE:
+                // Similar to edit mode but read-only
+                return (_jsx("div", { className: "inline-flex items-center gap-element px-card-sm py-1.5 rounded-md border border-border bg-muted/50", children: displayLabel }));
+            default:
+                return (_jsx(Text, { children: displayLabel }));
+        }
+    };
+    // Label/description rendering is handled by the parent DisplayField (FIELD-01)
+    return _jsx("div", { className: className, children: renderValue() });
+}
+;
+DisplayFieldBoolean.displayName = "DisplayFieldBoolean";
+export { DisplayFieldBoolean };
+//# sourceMappingURL=display-field-boolean.js.map

package/dist/esm/components/data-display/formatters/display-field-boolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-boolean.js","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-boolean.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/data-display/formatters/display-field-code.d.ts

@@ -0,0 +1,22 @@
+/**
+ * DisplayFieldCode Component
+ *
+ * Displays a code value with syntax highlighting (via shiki) and optional line numbers.
+ * Syntax highlighting is async — the component shows plain text immediately,
+ * then swaps in highlighted HTML once shiki completes.
+ */
+import * as React from "react";
+import type { DisplayFieldCodeProps } from '@wildo-ai/saas-frontend-lib';
+/**
+ * DisplayFieldCode component
+ *
+ * Renders a code value with:
+ * - Language label
+ * - Syntax highlighting via shiki (async, with plain-text fallback)
+ * - Optional line numbers
+ * - Scrollable container for long code
+ * - Dual theme support (light/dark via CSS variables)
+ */
+declare function DisplayFieldCode({ schema, value, className, showLineNumbers: showLineNumbersProp, maxHeight, wordWrap, lightTheme, darkTheme, }: DisplayFieldCodeProps): React.JSX.Element;
+export { DisplayFieldCode };
+//# sourceMappingURL=display-field-code.d.ts.map

package/dist/esm/components/data-display/formatters/display-field-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-code.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-code.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAExE;;;;;;;;;GASG;AACH,iBAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,KAAK,EACL,SAAS,EACT,eAAe,EAAE,mBAAmB,EACpC,SAAe,EACf,QAAgB,EAChB,UAA2B,EAC3B,SAAyB,GAC1B,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+H3C;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-code.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DisplayFieldCode Component
+ *
+ * Displays a code value with syntax highlighting (via shiki) and optional line numbers.
+ * Syntax highlighting is async — the component shows plain text immediately,
+ * then swaps in highlighted HTML once shiki completes.
+ */
+import * as React from "react";
+import { cn, useI18n, Text } from "@wildo-ai/saas-frontend-lib";
+import { FrontendComponentType } from "@wildo-ai/presets-components-models";
+import { getCodeUI, getLanguageDisplayName, } from "@wildo-ai/zod-decorators";
+/**
+ * DisplayFieldCode component
+ *
+ * Renders a code value with:
+ * - Language label
+ * - Syntax highlighting via shiki (async, with plain-text fallback)
+ * - Optional line numbers
+ * - Scrollable container for long code
+ * - Dual theme support (light/dark via CSS variables)
+ */
+function DisplayFieldCode({ schema, value, className, showLineNumbers: showLineNumbersProp, maxHeight = 400, wordWrap = false, lightTheme = 'github-light', darkTheme = 'github-dark', }) {
+    const { tComponent, isReady } = useI18n({ component: [FrontendComponentType.LOW_LEVEL_FORM_FIELD, FrontendComponentType.LOW_LEVEL_FORM_FIELD_CODE] });
+    const codeUI = getCodeUI(schema);
+    const showLineNumbers = showLineNumbersProp ?? codeUI?.display?.showLineNumbers ?? true;
+    const syntaxHighlighting = codeUI?.syntaxHighlighting ?? true;
+    // State for async shiki highlighting
+    const [highlightedHtml, setHighlightedHtml] = React.useState(null);
+    // Run shiki highlighting when value changes
+    React.useEffect(() => {
+        if (!syntaxHighlighting || !value || typeof value !== 'object' || !('content' in value) || !('language' in value)) {
+            setHighlightedHtml(null);
+            return;
+        }
+        let cancelled = false;
+        const highlight = async () => {
+            try {
+                const { codeToHtml } = await import('shiki');
+                const html = await codeToHtml(value.content, {
+                    lang: value.language || 'plaintext',
+                    themes: {
+                        light: lightTheme,
+                        dark: darkTheme,
+                    },
+                });
+                if (!cancelled) {
+                    setHighlightedHtml(html);
+                }
+            }
+            catch {
+                // Shiki failed (unsupported language, missing theme, etc.) — keep plain rendering
+                if (!cancelled) {
+                    setHighlightedHtml(null);
+                }
+            }
+        };
+        highlight();
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value?.content, value?.language, syntaxHighlighting, lightTheme, darkTheme]);
+    // Render the value content
+    const renderValue = () => {
+        // Handle null/undefined
+        if (value === null || value === undefined) {
+            return _jsxs(_Fragment, { children: [_jsx(Text, { className: "text-muted-foreground italic", "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue') })] });
+        }
+        // Handle invalid value
+        if (typeof value !== 'object' || !('content' in value) || !('language' in value)) {
+            return _jsx(Text, { className: "text-muted-foreground italic", children: "Invalid" });
+        }
+        const { content, language } = value;
+        const languageDisplayName = getLanguageDisplayName(language);
+        // Split content into lines for line numbers and plain fallback
+        const lines = content.split('\n');
+        const lineNumberWidth = String(lines.length).length;
+        return (_jsxs("div", { className: "rounded-md border bg-muted/50 overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-card-sm py-1.5 border-b bg-muted/30", children: [_jsx(Text, { className: "text-xs font-medium text-muted-foreground", children: languageDisplayName }), _jsx(Text, { className: "text-xs text-muted-foreground", children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD_CODE, 'lineCount', { count: lines.length }) })] }), _jsx("div", { className: "overflow-auto", style: { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }, children: highlightedHtml ? (
+                    /* Shiki highlighted output — rendered as HTML with inline styles */
+                    _jsx("div", { className: cn("text-sm [&>pre]:p-card-sm [&>pre]:!bg-transparent [&>pre]:font-mono", wordWrap && "[&>pre]:whitespace-pre-wrap [&>pre]:break-all"), dangerouslySetInnerHTML: { __html: highlightedHtml } })) : (
+                    /* Plain text fallback (shown before shiki loads or when highlighting is disabled) */
+                    _jsx("pre", { className: cn("p-card-sm text-sm font-mono", wordWrap && "whitespace-pre-wrap break-all"), children: showLineNumbers ? (_jsx("table", { className: "border-collapse", role: "presentation", children: _jsx("tbody", { children: lines.map((line, index) => (_jsxs("tr", { children: [_jsx("td", { className: "pe-card text-end text-muted-foreground select-none align-top", style: { minWidth: `${lineNumberWidth + 1}ch` }, children: index + 1 }), _jsx("td", { className: "whitespace-pre", children: line || '\u00A0' })] }, index))) }) })) : (_jsx("code", { children: content })) })) })] }));
+    };
+    // Label/description rendering is handled by the parent DisplayField (FIELD-01)
+    return _jsx("div", { className: className, children: renderValue() });
+}
+;
+DisplayFieldCode.displayName = "DisplayFieldCode";
+export { DisplayFieldCode };
+//# sourceMappingURL=display-field-code.js.map

package/dist/esm/components/data-display/formatters/display-field-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-code.js","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-code.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,EAEL,SAAS,EACT,sBAAsB,GACvB,MAAM,0BAA0B,CAAA;AAGjC;;;;;;;;;GASG;AACH,SAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,KAAK,EACL,SAAS,EACT,eAAe,EAAE,mBAAmB,EACpC,SAAS,GAAG,GAAG,EACf,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,cAAc,EAC3B,SAAS,GAAG,aAAa,GACH;IACtB,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC,qBAAqB,CAAC,oBAAoB,EAAE,qBAAqB,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAA;IACrJ,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAA;IAEhC,MAAM,eAAe,GAAG,mBAAmB,IAAI,MAAM,EAAE,OAAO,EAAE,eAAe,IAAI,IAAI,CAAA;IACvF,MAAM,kBAAkB,GAAG,MAAM,EAAE,kBAAkB,IAAI,IAAI,CAAA;IAE7D,qCAAqC;IACrC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAEjF,4CAA4C;IAC5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,kBAAkB,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,EAAE,CAAC;YAClH,kBAAkB,CAAC,IAAI,CAAC,CAAA;YACxB,OAAM;QACR,CAAC;QAED,IAAI,SAAS,GAAG,KAAK,CAAA;QAErB,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,IAAI,CAAC;gBACH,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,CAAA;gBAC5C,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,KAAK,CAAC,OAAO,EAAE;oBAC3C,IAAI,EAAE,KAAK,CAAC,QAAQ,IAAI,WAAW;oBACnC,MAAM,EAAE;wBACN,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,SAAS;qBAChB;iBACF,CAAC,CAAA;gBACF,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,kBAAkB,CAAC,IAAI,CAAC,CAAA;gBAC1B,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,kFAAkF;gBAClF,IAAI,CAAC,SAAS,EAAE,CAAC;oBACf,kBAAkB,CAAC,IAAI,CAAC,CAAA;gBAC1B,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QAED,SAAS,EAAE,CAAA;QAEX,OAAO,GAAG,EAAE,GAAG,SAAS,GAAG,IAAI,CAAA,CAAC,CAAC,CAAA;QACnC,uDAAuD;IACvD,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAA;IAEhF,2BAA2B;IAC3B,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,wBAAwB;QACxB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC1C,OAAO,8BAAE,KAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,iBAAa,MAAM,uBAAS,EAAA,eAAM,SAAS,EAAC,SAAS,YAAE,UAAU,CAAC,qBAAqB,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAQ,IAAG,CAAA;QAC5L,CAAC;QAED,uBAAuB;QACvB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,EAAE,CAAC;YACjF,OAAO,KAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,wBAAe,CAAA;QACtE,CAAC;QAED,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;QACnC,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAA;QAE5D,+DAA+D;QAC/D,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QACjC,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA;QAEnD,OAAO,CACL,eAAK,SAAS,EAAC,+CAA+C,aAE5D,eAAK,SAAS,EAAC,0EAA0E,aACvF,KAAC,IAAI,IAAC,SAAS,EAAC,2CAA2C,YACxD,mBAAmB,GACf,EACP,KAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,YAC5C,UAAU,CAAC,qBAAqB,CAAC,yBAAyB,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,GAC7F,IACH,EAGN,cACE,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,YAEjF,eAAe,CAAC,CAAC,CAAC;oBACjB,oEAAoE;oBACpE,cACE,SAAS,EAAE,EAAE,CACX,qEAAqE,EACrE,QAAQ,IAAI,+CAA+C,CAC5D,EACD,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,GACpD,CACH,CAAC,CAAC,CAAC;oBACF,qFAAqF;oBACrF,cAAK,SAAS,EAAE,EAAE,CAChB,6BAA6B,EAC7B,QAAQ,IAAI,+BAA+B,CAC5C,YACE,eAAe,CAAC,CAAC,CAAC,CACjB,gBAAO,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAC,cAAc,YACpD,0BACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,yBACE,aACE,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,eAAe,GAAG,CAAC,IAAI,EAAE,YAE9C,KAAK,GAAG,CAAC,GACP,EACL,aAAI,SAAS,EAAC,gBAAgB,YAC3B,IAAI,IAAI,QAAQ,GACd,KATE,KAAK,CAUT,CACN,CAAC,GACI,GACF,CACT,CAAC,CAAC,CAAC,CACF,yBAAO,OAAO,GAAQ,CACvB,GACG,CACP,GACG,IACF,CACP,CAAA;IACH,CAAC,CAAA;IAED,+EAA+E;IAC/E,OAAO,cAAK,SAAS,EAAE,SAAS,YAAG,WAAW,EAAE,GAAO,CAAA;AACzD,CAAC;AAED,CAAC;AAAC,gBAAsE,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEzG,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-date.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DisplayFieldDate Component
+ *
+ * Displays a date value formatted according to regional preferences.
+ * Uses the centralized formatting from ComponentsLabellingContext.
+ *
+ * Label/description rendering is handled by the parent DisplayField (FIELD-01).
+ */
+import * as React from "react";
+import type { DisplayFieldDateProps } from '@wildo-ai/saas-frontend-lib';
+declare function DisplayFieldDate({ value, className, }: DisplayFieldDateProps): React.JSX.Element;
+export { DisplayFieldDate };
+//# sourceMappingURL=display-field-date.d.ts.map

package/dist/esm/components/data-display/formatters/display-field-date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-date.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-date.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAIxE,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAQ3C;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-date.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@wildo-ai/saas-frontend-lib";
+import { useI18n } from "@wildo-ai/saas-frontend-lib";
+import { FrontendComponentType } from "@wildo-ai/presets-components-models";
+function DisplayFieldDate({ value, className, }) {
+    const { formatDate, tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FORM_FIELD });
+    if (value === null || value === undefined) {
+        return _jsxs(_Fragment, { children: [_jsx(Text, { className: "text-muted-foreground italic", "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue') })] });
+    }
+    return _jsx(Text, { className: className, children: formatDate(value) });
+}
+;
+DisplayFieldDate.displayName = "DisplayFieldDate";
+export { DisplayFieldDate };
+//# sourceMappingURL=display-field-date.js.map

package/dist/esm/components/data-display/formatters/display-field-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-date.js","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-date.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAaZ,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAE3E,SAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,GACa;IACtB,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,oBAAoB,EAAE,CAAC,CAAA;IAE9G,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1C,OAAO,8BAAE,KAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,iBAAa,MAAM,uBAAS,EAAA,eAAM,SAAS,EAAC,SAAS,YAAE,UAAU,CAAC,qBAAqB,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAQ,IAAG,CAAA;IAC5L,CAAC;IAED,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,UAAU,CAAC,KAAK,CAAC,GAAQ,CAAA;AAC/D,CAAC;AAED,CAAC;AAAC,gBAAsE,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEzG,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-datetime.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DisplayFieldDateTime Component
+ *
+ * Displays a datetime value formatted according to regional preferences.
+ * Uses the centralized formatting from ComponentsLabellingContext.
+ *
+ * Label/description rendering is handled by the parent DisplayField (FIELD-01).
+ */
+import * as React from "react";
+import type { DisplayFieldDateTimeProps } from '@wildo-ai/saas-frontend-lib';
+declare function DisplayFieldDateTime({ value, className, }: DisplayFieldDateTimeProps): React.JSX.Element;
+export { DisplayFieldDateTime };
+//# sourceMappingURL=display-field-datetime.d.ts.map

package/dist/esm/components/data-display/formatters/display-field-datetime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-datetime.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-datetime.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAI5E,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAQ/C;AAID,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-datetime.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@wildo-ai/saas-frontend-lib";
+import { useI18n } from "@wildo-ai/saas-frontend-lib";
+import { FrontendComponentType } from "@wildo-ai/presets-components-models";
+function DisplayFieldDateTime({ value, className, }) {
+    const { formatDateTime, tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FORM_FIELD });
+    if (value === null || value === undefined) {
+        return _jsxs(_Fragment, { children: [_jsx(Text, { className: "text-muted-foreground italic", "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue') })] });
+    }
+    return _jsx(Text, { className: className, children: formatDateTime(value) });
+}
+;
+DisplayFieldDateTime.displayName = "DisplayFieldDateTime";
+export { DisplayFieldDateTime };
+//# sourceMappingURL=display-field-datetime.js.map

package/dist/esm/components/data-display/formatters/display-field-datetime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-datetime.js","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-datetime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAaZ,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAE3E,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,SAAS,GACiB;IAC1B,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,oBAAoB,EAAE,CAAC,CAAA;IAElH,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1C,OAAO,8BAAE,KAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,iBAAa,MAAM,uBAAS,EAAA,eAAM,SAAS,EAAC,SAAS,YAAE,UAAU,CAAC,qBAAqB,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAQ,IAAG,CAAA;IAC5L,CAAC;IAED,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,cAAc,CAAC,KAAK,CAAC,GAAQ,CAAA;AACnE,CAAC;AAED,CAAC;AAAC,oBAA8E,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAErH,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/esm/components/data-display/formatters/display-field-duration.d.ts

@@ -0,0 +1,16 @@
+/**
+ * DisplayFieldDuration Component
+ *
+ * Displays a duration value with locale-aware formatting.
+ * Uses tSystemEnum for i18n-aware unit labels.
+ */
+import * as React from 'react';
+import type { DisplayFieldDurationProps } from '@wildo-ai/saas-frontend-lib';
+/**
+ * DisplayFieldDuration component
+ *
+ * Renders a duration value with i18n-aware unit labels (e.g., "5 Minutes", "1 Hour").
+ */
+declare function DisplayFieldDuration({ schema, value, className, }: DisplayFieldDurationProps): React.JSX.Element;
+export { DisplayFieldDuration };
+//# sourceMappingURL=display-field-duration.d.ts.map

package/dist/esm/components/data-display/formatters/display-field-duration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-duration.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-duration.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAE7E;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoC/C;AAKD,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/esm/components/data-display/formatters/display-field-duration.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '@wildo-ai/saas-frontend-lib';
+import { Text } from '@wildo-ai/saas-frontend-lib';
+import { FrontendComponentType, SystemEnumName } from '@wildo-ai/presets-components-models';
+/**
+ * DisplayFieldDuration component
+ *
+ * Renders a duration value with i18n-aware unit labels (e.g., "5 Minutes", "1 Hour").
+ */
+function DisplayFieldDuration({ schema, value, className, }) {
+    const { tComponent, tSystemEnum, isReady } = useI18n({
+        component: FrontendComponentType.LOW_LEVEL_FORM_FIELD,
+        keys: ['system_enums'],
+    });
+    const renderValue = () => {
+        if (value === null || value === undefined) {
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-muted-foreground italic", "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "sr-only", children: tComponent(FrontendComponentType.LOW_LEVEL_FORM_FIELD, 'noValue') })] }));
+        }
+        if (typeof value !== 'object' ||
+            !('value' in value) ||
+            !('unit' in value) ||
+            typeof value.value !== 'number' ||
+            typeof value.unit !== 'string') {
+            return _jsx(Text, { className: "text-muted-foreground italic", children: "Invalid" });
+        }
+        const unitLabel = tSystemEnum(SystemEnumName.DURATION_UNIT, value.unit);
+        const displayText = `${value.value} ${unitLabel}`;
+        return _jsx(Text, { className: "tabular-nums", children: displayText });
+    };
+    return _jsx("div", { className: className, children: renderValue() });
+}
+DisplayFieldDuration.displayName =
+    'DisplayFieldDuration';
+export { DisplayFieldDuration };
+//# sourceMappingURL=display-field-duration.js.map

package/dist/esm/components/data-display/formatters/display-field-duration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-duration.js","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-duration.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAWb,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG5F;;;;GAIG;AACH,SAAS,oBAAoB,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,SAAS,GACiB;IAC1B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;QACnD,SAAS,EAAE,qBAAqB,CAAC,oBAAoB;QACrD,IAAI,EAAE,CAAC,cAAc,CAAC;KACvB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC1C,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,iBAAa,MAAM,uBAE1D,EACP,eAAM,SAAS,EAAC,SAAS,YACtB,UAAU,CAAC,qBAAqB,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAC7D,IACN,CACJ,CAAC;QACJ,CAAC;QAED,IACE,OAAO,KAAK,KAAK,QAAQ;YACzB,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC;YACnB,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC;YAClB,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;YAC/B,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAC9B,CAAC;YACD,OAAO,KAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,wBAAe,CAAC;QACvE,CAAC;QAED,MAAM,SAAS,GAAG,WAAW,CAAC,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACxE,MAAM,WAAW,GAAG,GAAG,KAAK,CAAC,KAAK,IAAI,SAAS,EAAE,CAAC;QAClD,OAAO,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,YAAE,WAAW,GAAQ,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAO,cAAK,SAAS,EAAE,SAAS,YAAG,WAAW,EAAE,GAAO,CAAC;AAC1D,CAAC;AAEA,oBAA8E,CAAC,WAAW;IACzF,sBAAsB,CAAC;AAEzB,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/esm/components/data-display/formatters/display-field-enum.d.ts

@@ -0,0 +1,16 @@
+/**
+ * DisplayFieldEnum Component
+ *
+ * Displays an enum value based on the enum UI decorator.
+ * Supports different display modes: text, badge, icon, card
+ */
+import * as React from "react";
+import type { DisplayFieldEnumProps } from '@wildo-ai/saas-frontend-lib';
+/**
+ * DisplayFieldEnum component
+ *
+ * Renders an enum value according to the display policy
+ */
+declare function DisplayFieldEnum({ schema, value, className, labels, }: DisplayFieldEnumProps): React.JSX.Element;
+export { DisplayFieldEnum };
+//# sourceMappingURL=display-field-enum.d.ts.map

package/dist/esm/components/data-display/formatters/display-field-enum.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-field-enum.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/formatters/display-field-enum.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAGxE;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,KAAK,EACL,SAAS,EACT,MAAM,GACP,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+F3C;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}