@flamingo-stack/openframe-frontend-core 0.0.659-2347.6820.1 → 0.0.659

package/dist/{chunk-JBL365GX.js → chunk-E7C3F2SK.js}

@@ -31,7 +31,7 @@ import {
   FieldWrapper,
   Input,
   RequiredMark
-} from "./chunk-IWISVG4P.js";
+} from "./chunk-BXWXBBAC.js";
 import {
   APPROVAL_STATUS,
   ActionsMenuDropdown,
@@ -1114,53 +1114,63 @@ function AutocompleteInner(props, ref) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx7(FieldWrapper, { label, labelVariant, error, className, children: /* @__PURE__ */ jsxs4("div", { className: "relative", ref: containerRef, children: [
-    popover,
-    multiple && showHiddenTags && hiddenTagsCount > 0 && /* @__PURE__ */ jsx7(
-      HiddenTagsPopup,
-      {
-        ref: hiddenTagsPopupRef,
-        items: hiddenTags,
-        disabled,
-        className: "left-auto right-0 max-w-full",
-        onRemove: (value) => {
-          const newValue = valueArray.filter((v) => v !== value);
-          props.onChange(newValue);
-          if (typeof limitTagsProp === "number" && newValue.length <= limitTagsProp) setShowHiddenTags(false);
-        }
-      }
-    ),
-    multiple && /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx7(
-        "span",
-        {
-          ref: textMeasureRef,
-          "aria-hidden": "true",
-          className: "pointer-events-none invisible absolute left-0 top-0 -z-10 whitespace-nowrap text-h4",
-          children: inputPlaceholder
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "div",
-        {
-          ref: measureRef,
-          "aria-hidden": "true",
-          className: "pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-2",
-          children: selectedOptions.map((option) => /* @__PURE__ */ jsx7(
-            Tag,
+  return /* @__PURE__ */ jsx7(
+    FieldWrapper,
+    {
+      label,
+      labelVariant,
+      error,
+      errorSlot: "error" in props,
+      className,
+      children: /* @__PURE__ */ jsxs4("div", { className: "relative", ref: containerRef, children: [
+        popover,
+        multiple && showHiddenTags && hiddenTagsCount > 0 && /* @__PURE__ */ jsx7(
+          HiddenTagsPopup,
+          {
+            ref: hiddenTagsPopupRef,
+            items: hiddenTags,
+            disabled,
+            className: "left-auto right-0 max-w-full",
+            onRemove: (value) => {
+              const newValue = valueArray.filter((v) => v !== value);
+              props.onChange(newValue);
+              if (typeof limitTagsProp === "number" && newValue.length <= limitTagsProp) setShowHiddenTags(false);
+            }
+          }
+        ),
+        multiple && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx7(
+            "span",
             {
-              variant: "outline",
-              labelClassName: "max-w-[90px] truncate",
-              label: renderTag ? renderTag(option) : option.label,
-              onClose: () => {
-              }
-            },
-            `m-${String(option.value)}`
-          ))
-        }
-      )
-    ] })
-  ] }) });
+              ref: textMeasureRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible absolute left-0 top-0 -z-10 whitespace-nowrap text-h4",
+              children: inputPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "div",
+            {
+              ref: measureRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-2",
+              children: selectedOptions.map((option) => /* @__PURE__ */ jsx7(
+                Tag,
+                {
+                  variant: "outline",
+                  labelClassName: "max-w-[90px] truncate",
+                  label: renderTag ? renderTag(option) : option.label,
+                  onClose: () => {
+                  }
+                },
+                `m-${String(option.value)}`
+              ))
+            }
+          )
+        ] })
+      ] })
+    }
+  );
 }
 var Autocomplete = forwardRef3(AutocompleteInner);
 
@@ -1336,7 +1346,9 @@ import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = forwardRef6(({ className, children, invalid, label, labelVariant, error, ...props }, ref) => {
+var SelectTrigger = forwardRef6((allProps, ref) => {
+  const { className, children, invalid, label, labelVariant, error, ...props } = allProps;
+  const errorSlot = "error" in allProps;
   const isInvalid = invalid || !!error;
   const trigger = /* @__PURE__ */ jsxs7(
     SelectPrimitive.Trigger,
@@ -1385,7 +1397,7 @@ var SelectTrigger = forwardRef6(({ className, children, invalid, label, labelVar
       ]
     }
   );
-  return /* @__PURE__ */ jsx10(FieldWrapper, { label, labelVariant, error, children: trigger });
+  return /* @__PURE__ */ jsx10(FieldWrapper, { label, labelVariant, error, errorSlot, children: trigger });
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 var SelectScrollUpButton = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
@@ -1950,7 +1962,7 @@ function DatePicker(props) {
       }
     ) })
   ] });
-  return /* @__PURE__ */ jsx11(FieldWrapper, { label, error, children: picker });
+  return /* @__PURE__ */ jsx11(FieldWrapper, { label, error, errorSlot: "error" in props, children: picker });
 }
 var generateHourOptions = (use24Hour) => {
   if (use24Hour) {
@@ -1961,23 +1973,24 @@ var generateHourOptions = (use24Hour) => {
 var generateMinuteOptions = () => {
   return Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, "0"));
 };
-function DatePickerInput({
-  placeholder = "Select date",
-  formatDate: formatDate2 = defaultFormatDate,
-  disabled = false,
-  className,
-  numberOfMonths = 1,
-  fromDate,
-  toDate,
-  locale,
-  value,
-  onChange,
-  showTime = false,
-  use24HourFormat = false,
-  label,
-  error,
-  invalid = false
-}) {
+function DatePickerInput(props) {
+  const {
+    placeholder = "Select date",
+    formatDate: formatDate2 = defaultFormatDate,
+    disabled = false,
+    className,
+    numberOfMonths = 1,
+    fromDate,
+    toDate,
+    locale,
+    value,
+    onChange,
+    showTime = false,
+    use24HourFormat = false,
+    label,
+    error,
+    invalid = false
+  } = props;
   const [open, setOpen] = useState4(false);
   const isInvalid = invalid || !!error;
   const displayValue = value ? formatDate2(value) : "";
@@ -2116,7 +2129,7 @@ function DatePickerInput({
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsx11(FieldWrapper, { label, error, className, children: content });
+  return /* @__PURE__ */ jsx11(FieldWrapper, { label, error, errorSlot: "error" in props, className, children: content });
 }
 var generateTimeOptions = (intervalMinutes, use24Hour) => {
   const options = [];
@@ -2137,24 +2150,25 @@ var generateTimeOptions = (intervalMinutes, use24Hour) => {
   }
   return options;
 };
-function DatePickerInputSimple({
-  placeholder = "Select date",
-  formatDate: formatDate2 = defaultFormatDate,
-  disabled = false,
-  className,
-  numberOfMonths = 1,
-  fromDate,
-  toDate,
-  locale,
-  value,
-  onChange,
-  showTime = false,
-  timeInterval = 30,
-  use24HourFormat = false,
-  label,
-  error,
-  invalid = false
-}) {
+function DatePickerInputSimple(props) {
+  const {
+    placeholder = "Select date",
+    formatDate: formatDate2 = defaultFormatDate,
+    disabled = false,
+    className,
+    numberOfMonths = 1,
+    fromDate,
+    toDate,
+    locale,
+    value,
+    onChange,
+    showTime = false,
+    timeInterval = 30,
+    use24HourFormat = false,
+    label,
+    error,
+    invalid = false
+  } = props;
   const [open, setOpen] = useState4(false);
   const isInvalid = invalid || !!error;
   const displayValue = value ? formatDate2(value) : "";
@@ -2257,7 +2271,7 @@ function DatePickerInputSimple({
       /* @__PURE__ */ jsx11(SelectContent, { children: timeOptions.map((option) => /* @__PURE__ */ jsx11(SelectItem, { value: option.value, children: option.label }, option.value)) })
     ] })
   ] });
-  return /* @__PURE__ */ jsx11(FieldWrapper, { label, error, className, children: content });
+  return /* @__PURE__ */ jsx11(FieldWrapper, { label, error, errorSlot: "error" in props, className, children: content });
 }
 function DateFilterPanel({
   mode = "range",
@@ -4378,8 +4392,8 @@ function TagsManager({
 // src/components/ui/textarea.tsx
 import { forwardRef as forwardRef11, useId as useId3 } from "react";
 import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
-var Textarea = forwardRef11(
-  ({
+var Textarea = forwardRef11((allProps, ref) => {
+  const {
     className,
     invalid = false,
     label,
@@ -4391,144 +4405,144 @@ var Textarea = forwardRef11(
     startIcon,
     hideBorder = false,
     ...props
-  }, ref) => {
-    const isInvalid = invalid || !!error;
-    const hasAdornment = !!endIcon || !!startIcon;
-    const reactId = useId3();
-    const fieldId = props.id ?? reactId;
-    if (!hasAdornment) {
-      return /* @__PURE__ */ jsx36(FieldWrapper, { label, labelVariant, error, children: /* @__PURE__ */ jsx36(
-        "textarea",
-        {
-          className: cn(
-            "flex min-h-[96px] w-full rounded-[6px] border p-3",
-            "text-h4",
-            "focus:border-ods-accent focus-visible:outline-none",
-            "touch-manipulation transition-colors duration-200",
-            "border-ods-border bg-ods-card text-ods-text-primary placeholder:text-ods-text-secondary",
-            !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
-            props.disabled && "!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border",
-            "relative z-10 cursor-text",
-            "resize-y",
-            isInvalid && "border-ods-error hover:border-ods-error focus:border-ods-error",
-            className
-          ),
-          ref,
-          ...props
-        }
-      ) });
-    }
-    const accentBorder = startIcon ? "has-[textarea:focus]:border-ods-accent" : "has-[:focus]:border-ods-accent";
-    const accentBorderError = startIcon ? "has-[textarea:focus]:border-ods-error" : "has-[:focus]:border-ods-error";
-    const adornmentAccent = startIcon ? "group-has-[textarea:focus]:text-ods-accent" : "group-has-[:focus]:text-ods-accent";
-    const content = /* @__PURE__ */ jsxs28(
-      "label",
+  } = allProps;
+  const errorSlot = "error" in allProps;
+  const isInvalid = invalid || !!error;
+  const hasAdornment = !!endIcon || !!startIcon;
+  const reactId = useId3();
+  const fieldId = props.id ?? reactId;
+  if (!hasAdornment) {
+    return /* @__PURE__ */ jsx36(FieldWrapper, { label, labelVariant, error, errorSlot, children: /* @__PURE__ */ jsx36(
+      "textarea",
       {
-        htmlFor: fieldId,
-        "data-invalid": isInvalid || void 0,
         className: cn(
-          // Wrapper mirrors `Input`, but uses `items-end` so the icon sticks
-          // to the bottom-right when the textarea grows multi-line. Vertical
-          // padding lives here (not on the textarea) so both children share
-          // the same bottom baseline at any height.
-          //
-          // Padding is sized so the single-line height matches `Input` exactly
-          // (44px mobile / 48px desktop): line `leading-6` (24px) + 2× padding
-          // + 1px border top/bottom. `min-h-11 md:min-h-12` is the matching
-          // floor; with symmetric padding the single line stays centered.
-          "flex min-h-11 w-full cursor-text items-end gap-2 px-3 py-[9px] md:min-h-12 md:py-[11px]",
-          "has-[:focus-visible]:outline-none",
-          "group",
-          "transition-colors duration-200",
-          // Card chrome (border / bg / radius / hover / focus). Suppressed when
-          // `hideBorder` — an outer container owns it instead.
-          !hideBorder && cn("rounded-[6px] border border-ods-border bg-ods-card", accentBorder),
-          !hideBorder && !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
-          !hideBorder && props.disabled && "!cursor-not-allowed bg-ods-bg",
-          // Start / end icons carry their own colour — grey them with the value
-          // so a disabled field reads as one flat colour. Scoped to the DIRECT
-          // span children (the two icon wrappers): the nodes inside them are
-          // rendered verbatim so callers can pass an interactive trigger and own
-          // its styling, and a descendant rule would overwrite exactly that.
-          "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
-          !hideBorder && isInvalid && cn("border-ods-error hover:border-ods-error", accentBorderError),
-          hideBorder && "bg-transparent"
+          "flex min-h-[96px] w-full rounded-[6px] border p-3",
+          "text-h4",
+          "focus:border-ods-accent focus-visible:outline-none",
+          "touch-manipulation transition-colors duration-200",
+          "border-ods-border bg-ods-card text-ods-text-primary placeholder:text-ods-text-secondary",
+          !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
+          props.disabled && "!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border",
+          "relative z-10 cursor-text",
+          "resize-y",
+          isInvalid && "border-ods-error hover:border-ods-error focus:border-ods-error",
+          className
         ),
-        children: [
-          startIcon && // Start adornment (e.g. the composer `+`). `items-end` + `h-6`
-          // co-centers it with the first text line, matching `endIcon`. The
-          // node is rendered verbatim so callers can pass an interactive
-          // button / menu trigger and own its styling + active color.
-          /* @__PURE__ */ jsx36("span", { className: "flex h-6 shrink-0 items-center", children: startIcon }),
-          /* @__PURE__ */ jsx36(
-            "textarea",
-            {
-              ref,
-              rows: 1,
-              id: fieldId,
-              className: cn(
-                "m-0 box-border min-w-0 flex-1 resize-none border-none bg-transparent p-0 outline-none",
-                // Native CSS auto-grow (Chrome 123+, FF 124+, Safari 16.4+) — no
-                // JS needed to size to content. Falls back to `rows={1}` natural
-                // height on older browsers.
-                "[field-sizing:content]",
-                // `!leading-6` (not plain `leading-6`): on mobile `text-h4` sets a
-                // 20px line-height of its own that otherwise overrides the leading,
-                // leaving the 20px text box short of the 24px icon box and dropping
-                // the text below center under `items-end`. Forcing 24px keeps text
-                // and icon co-centered and the single-line height at 44px.
-                "!leading-6 text-ods-text-primary text-h4 placeholder:text-ods-text-secondary",
-                // Hard cap on growth: beyond `max-h` the textarea scrolls
-                // internally instead of pushing the icon out of frame.
-                "max-h-[160px] overflow-y-auto",
-                "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
-                // Disabled - match Input exactly (value greys out, placeholder dims further)
-                "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
-                className
-              ),
-              ...props
-            }
-          ),
-          endIconAsButton ? /* @__PURE__ */ jsx36(
-            "button",
-            {
-              type: "button",
-              "aria-label": endIconButtonProps?.["aria-label"] ?? "Submit",
-              ...endIconButtonProps,
-              className: cn(
-                // `h-6` matches the textarea's `leading-6` line box so the icon's
-                // visual center lines up with the text on the first line. Without
-                // it, `items-end` bottom-aligns the smaller mobile icon (size-4)
-                // against the 24px text line and drops it below the text center.
-                "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
-                adornmentAccent,
-                "group-data-[invalid]:text-ods-error",
-                "[&_svg]:size-4 md:[&_svg]:size-6",
-                "cursor-pointer hover:text-ods-text-primary",
-                "focus-visible:text-ods-accent focus-visible:outline-none",
-                "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary",
-                endIconButtonProps?.className
-              ),
-              children: endIcon
-            }
-          ) : /* @__PURE__ */ jsx36(
-            "span",
-            {
-              className: cn(
-                "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
-                adornmentAccent,
-                "group-data-[invalid]:text-ods-error",
-                "[&_svg]:size-4 md:[&_svg]:size-6"
-              ),
-              children: endIcon
-            }
-          )
-        ]
+        ref,
+        ...props
       }
-    );
-    return /* @__PURE__ */ jsx36(FieldWrapper, { label, labelVariant, error, children: content });
+    ) });
   }
-);
+  const accentBorder = startIcon ? "has-[textarea:focus]:border-ods-accent" : "has-[:focus]:border-ods-accent";
+  const accentBorderError = startIcon ? "has-[textarea:focus]:border-ods-error" : "has-[:focus]:border-ods-error";
+  const adornmentAccent = startIcon ? "group-has-[textarea:focus]:text-ods-accent" : "group-has-[:focus]:text-ods-accent";
+  const content = /* @__PURE__ */ jsxs28(
+    "label",
+    {
+      htmlFor: fieldId,
+      "data-invalid": isInvalid || void 0,
+      className: cn(
+        // Wrapper mirrors `Input`, but uses `items-end` so the icon sticks
+        // to the bottom-right when the textarea grows multi-line. Vertical
+        // padding lives here (not on the textarea) so both children share
+        // the same bottom baseline at any height.
+        //
+        // Padding is sized so the single-line height matches `Input` exactly
+        // (44px mobile / 48px desktop): line `leading-6` (24px) + 2× padding
+        // + 1px border top/bottom. `min-h-11 md:min-h-12` is the matching
+        // floor; with symmetric padding the single line stays centered.
+        "flex min-h-11 w-full cursor-text items-end gap-2 px-3 py-[9px] md:min-h-12 md:py-[11px]",
+        "has-[:focus-visible]:outline-none",
+        "group",
+        "transition-colors duration-200",
+        // Card chrome (border / bg / radius / hover / focus). Suppressed when
+        // `hideBorder` — an outer container owns it instead.
+        !hideBorder && cn("rounded-[6px] border border-ods-border bg-ods-card", accentBorder),
+        !hideBorder && !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
+        !hideBorder && props.disabled && "!cursor-not-allowed bg-ods-bg",
+        // Start / end icons carry their own colour — grey them with the value
+        // so a disabled field reads as one flat colour. Scoped to the DIRECT
+        // span children (the two icon wrappers): the nodes inside them are
+        // rendered verbatim so callers can pass an interactive trigger and own
+        // its styling, and a descendant rule would overwrite exactly that.
+        "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
+        !hideBorder && isInvalid && cn("border-ods-error hover:border-ods-error", accentBorderError),
+        hideBorder && "bg-transparent"
+      ),
+      children: [
+        startIcon && // Start adornment (e.g. the composer `+`). `items-end` + `h-6`
+        // co-centers it with the first text line, matching `endIcon`. The
+        // node is rendered verbatim so callers can pass an interactive
+        // button / menu trigger and own its styling + active color.
+        /* @__PURE__ */ jsx36("span", { className: "flex h-6 shrink-0 items-center", children: startIcon }),
+        /* @__PURE__ */ jsx36(
+          "textarea",
+          {
+            ref,
+            rows: 1,
+            id: fieldId,
+            className: cn(
+              "m-0 box-border min-w-0 flex-1 resize-none border-none bg-transparent p-0 outline-none",
+              // Native CSS auto-grow (Chrome 123+, FF 124+, Safari 16.4+) — no
+              // JS needed to size to content. Falls back to `rows={1}` natural
+              // height on older browsers.
+              "[field-sizing:content]",
+              // `!leading-6` (not plain `leading-6`): on mobile `text-h4` sets a
+              // 20px line-height of its own that otherwise overrides the leading,
+              // leaving the 20px text box short of the 24px icon box and dropping
+              // the text below center under `items-end`. Forcing 24px keeps text
+              // and icon co-centered and the single-line height at 44px.
+              "!leading-6 text-ods-text-primary text-h4 placeholder:text-ods-text-secondary",
+              // Hard cap on growth: beyond `max-h` the textarea scrolls
+              // internally instead of pushing the icon out of frame.
+              "max-h-[160px] overflow-y-auto",
+              "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
+              // Disabled - match Input exactly (value greys out, placeholder dims further)
+              "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
+              className
+            ),
+            ...props
+          }
+        ),
+        endIconAsButton ? /* @__PURE__ */ jsx36(
+          "button",
+          {
+            type: "button",
+            "aria-label": endIconButtonProps?.["aria-label"] ?? "Submit",
+            ...endIconButtonProps,
+            className: cn(
+              // `h-6` matches the textarea's `leading-6` line box so the icon's
+              // visual center lines up with the text on the first line. Without
+              // it, `items-end` bottom-aligns the smaller mobile icon (size-4)
+              // against the 24px text line and drops it below the text center.
+              "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
+              adornmentAccent,
+              "group-data-[invalid]:text-ods-error",
+              "[&_svg]:size-4 md:[&_svg]:size-6",
+              "cursor-pointer hover:text-ods-text-primary",
+              "focus-visible:text-ods-accent focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary",
+              endIconButtonProps?.className
+            ),
+            children: endIcon
+          }
+        ) : /* @__PURE__ */ jsx36(
+          "span",
+          {
+            className: cn(
+              "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
+              adornmentAccent,
+              "group-data-[invalid]:text-ods-error",
+              "[&_svg]:size-4 md:[&_svg]:size-6"
+            ),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx36(FieldWrapper, { label, labelVariant, error, errorSlot, children: content });
+});
 Textarea.displayName = "Textarea";
 
 // src/components/ui/alert-dialog.tsx
@@ -31353,4 +31367,4 @@ export {
   LazyMount,
   IconTile
 };
-//# sourceMappingURL=chunk-JBL365GX.js.map
+//# sourceMappingURL=chunk-E7C3F2SK.js.map