@arkcit/react-ui 0.3.0

package/dist/form-fields.js

@@ -0,0 +1,2113 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/shared/patterns/forms/engine/syntheticEvents.ts
+var createFormFieldChangeEvent = (name, value) => ({
+  target: {
+    name,
+    value
+  }
+});
+
+// src/components/shared/primitives/data-entry/Checkbox/Checkbox.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Checkbox = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      "input",
+      __spreadValues({
+        ref,
+        type: "checkbox",
+        className: `h-4 w-4 rounded border border-border-strong text-primary focus-visible:ring-2 focus-visible:ring-primary/30 disabled:opacity-50 disabled:cursor-not-allowed ${className != null ? className : ""}`
+      }, props)
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+
+// src/components/shared/patterns/forms/FormField/fields/CheckboxField/CheckboxField.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CheckboxField = ({
+  field,
+  value,
+  error,
+  errorId,
+  onChange
+}) => {
+  const checked = Boolean(value);
+  const emit = (next) => {
+    onChange(createFormFieldChangeEvent(field.name, next));
+  };
+  return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none py-1", children: [
+    /* @__PURE__ */ jsx2(
+      Checkbox_default,
+      {
+        id: field.name,
+        name: field.name,
+        checked,
+        onChange: (e) => emit(e.target.checked),
+        "aria-invalid": Boolean(error),
+        "aria-describedby": errorId,
+        className: `cursor-pointer ${error ? "border-danger" : "border-border-strong"}`
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+      field.label,
+      " ",
+      field.required && "*"
+    ] }),
+    error && !errorId && /* @__PURE__ */ jsx2("p", { className: "text-sm text-danger", children: error })
+  ] });
+};
+var CheckboxField_default = CheckboxField;
+
+// src/components/shared/patterns/forms/FormField/fields/CheckboxField/index.tsx
+var CheckboxField_default2 = CheckboxField_default;
+
+// src/components/shared/patterns/forms/FormField/fields/CheckboxSearchField/CheckboxSearchField.tsx
+import React4 from "react";
+import { ChevronDown } from "lucide-react";
+
+// src/components/shared/primitives/data-entry/Input/Input.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/components/shared/utils/cx.ts
+var cx = (...classes) => classes.filter(Boolean).join(" ");
+
+// src/components/shared/primitives/data-entry/Input/Input.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  xs: "h-7 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-11 px-4 text-base"
+};
+var INTENT_CLASSES = {
+  primary: "focus-visible:border-primary",
+  secondary: "focus-visible:border-secondary",
+  success: "focus-visible:border-success",
+  warning: "focus-visible:border-warning",
+  danger: "focus-visible:border-danger",
+  info: "focus-visible:border-info",
+  neutral: "focus-visible:border-primary"
+};
+var Input = forwardRef2(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      type = "text",
+      intent = "neutral",
+      size = "md",
+      rightIcon: RightIcon,
+      rightIconClassName
+    } = _b, props = __objRest(_b, [
+      "className",
+      "type",
+      "intent",
+      "size",
+      "rightIcon",
+      "rightIconClassName"
+    ]);
+    const isInvalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    return /* @__PURE__ */ jsxs2("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        __spreadValues({
+          ref,
+          type,
+          className: cx(
+            "w-full rounded-md border bg-background text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed",
+            SIZE_CLASSES[size],
+            isInvalid ? "border-danger focus-visible:border-danger" : "border-border-strong",
+            !isInvalid && INTENT_CLASSES[intent],
+            RightIcon && "pr-10",
+            className
+          )
+        }, props)
+      ),
+      RightIcon ? /* @__PURE__ */ jsx3("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-muted-foreground", children: /* @__PURE__ */ jsx3(
+        RightIcon,
+        {
+          "aria-hidden": "true",
+          className: cx("h-4 w-4", rightIconClassName)
+        }
+      ) }) : null
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Input_default = Input;
+
+// src/components/shared/primitives/misc/Tag/Tag.tsx
+import { X } from "lucide-react";
+
+// src/components/shared/utils/renderBindableNode.tsx
+import React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MISSING_TRANSLATION_FALLBACK = "Lorem ipsum dolor sit amet. (fallback)";
+var MISSING_REF_FALLBACK = "Lorem ipsum dolor sit amet. (fallback)";
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype;
+var renderBindableNode = (value) => {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value == null) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item, index) => /* @__PURE__ */ jsx4(React3.Fragment, { children: renderBindableNode(item) }, `bindable-node-${index}`));
+  }
+  if (React3.isValidElement(value)) return value;
+  if (isPlainObject(value)) {
+    if (typeof value.$t === "string") return MISSING_TRANSLATION_FALLBACK;
+    if (typeof value.$ref === "string") return MISSING_REF_FALLBACK;
+    if ("children" in value) {
+      return renderBindableNode(value.children);
+    }
+    try {
+      return JSON.stringify(value);
+    } catch (e) {
+      return String(value);
+    }
+  }
+  return String(value);
+};
+
+// src/components/shared/primitives/misc/Tag/Tag.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var SIZE_CLASSES2 = {
+  sm: "h-6 px-2 text-xs",
+  md: "h-7 px-2.5 text-sm"
+};
+var VARIANT_CLASSES = {
+  solid: {
+    primary: "bg-primary text-primary-foreground border border-primary",
+    secondary: "bg-secondary text-secondary-foreground border border-secondary",
+    success: "bg-success text-success-foreground border border-success",
+    warning: "bg-warning text-warning-foreground border border-warning",
+    danger: "bg-danger text-danger-foreground border border-danger",
+    info: "bg-info text-info-foreground border border-info",
+    neutral: "bg-foreground text-background border border-foreground"
+  },
+  soft: {
+    primary: "bg-primary-soft text-primary-soft-foreground border border-transparent",
+    secondary: "bg-secondary-soft text-secondary-soft-foreground border border-transparent",
+    success: "bg-success-soft text-success-soft-foreground border border-transparent",
+    warning: "bg-warning-soft text-warning-soft-foreground border border-transparent",
+    danger: "bg-danger-soft text-danger-soft-foreground border border-transparent",
+    info: "bg-info-soft text-info-soft-foreground border border-transparent",
+    neutral: "bg-surface text-foreground border border-transparent"
+  },
+  outline: {
+    primary: "bg-background text-primary border border-primary",
+    secondary: "bg-background text-secondary border border-secondary",
+    success: "bg-background text-success border border-success",
+    warning: "bg-background text-warning border border-warning",
+    danger: "bg-background text-danger border border-danger",
+    info: "bg-background text-info border border-info",
+    neutral: "bg-background text-foreground border border-border-strong"
+  },
+  ghost: {
+    primary: "bg-transparent text-ghost-primary-foreground border border-transparent hover:bg-ghost-primary-hover",
+    secondary: "bg-transparent text-ghost-secondary-foreground border border-transparent hover:bg-ghost-secondary-hover",
+    success: "bg-transparent text-ghost-success-foreground border border-transparent hover:bg-ghost-success-hover",
+    warning: "bg-transparent text-ghost-warning-foreground border border-transparent hover:bg-ghost-warning-hover",
+    danger: "bg-transparent text-ghost-danger-foreground border border-transparent hover:bg-ghost-danger-hover",
+    info: "bg-transparent text-ghost-info-foreground border border-transparent hover:bg-ghost-info-hover",
+    neutral: "bg-transparent text-ghost-foreground border border-transparent hover:bg-ghost-hover"
+  },
+  glass: {
+    primary: "bg-primary/20 text-primary-soft-foreground border border-glass-border shadow-glass",
+    secondary: "bg-secondary/20 text-secondary-soft-foreground border border-glass-border shadow-glass",
+    success: "bg-success/20 text-success-soft-foreground border border-glass-border shadow-glass",
+    warning: "bg-warning/20 text-warning-soft-foreground border border-glass-border shadow-glass",
+    danger: "bg-danger/20 text-danger-soft-foreground border border-glass-border shadow-glass",
+    info: "bg-info/20 text-info-soft-foreground border border-glass-border shadow-glass",
+    neutral: "bg-glass-bg text-foreground border border-glass-border shadow-glass"
+  }
+};
+var Tag = (_a) => {
+  var _b = _a, {
+    children,
+    onRemove,
+    intent = "neutral",
+    variant = "soft",
+    size = "sm",
+    disabled = false,
+    className
+  } = _b, props = __objRest(_b, [
+    "children",
+    "onRemove",
+    "intent",
+    "variant",
+    "size",
+    "disabled",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    __spreadProps(__spreadValues({
+      className: cx(
+        "inline-flex items-center gap-1 rounded-md font-medium transition-colors",
+        SIZE_CLASSES2[size],
+        VARIANT_CLASSES[variant][intent],
+        disabled && "opacity-50",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx5("span", { className: "truncate", children: renderBindableNode(children) }),
+        onRemove ? /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            disabled,
+            "aria-label": "Remove tag",
+            className: "inline-flex h-4 w-4 items-center justify-center rounded-sm hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed",
+            children: /* @__PURE__ */ jsx5(X, { className: "h-3 w-3", "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    })
+  );
+};
+var Tag_default = Tag;
+
+// src/components/shared/hooks/events/useEventListener.ts
+import { useEffect, useRef } from "react";
+function useEventListener(event, handler, options) {
+  const handlerRef = useRef(handler);
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const listener = (e) => handlerRef.current(e);
+    window.addEventListener(event, listener, options);
+    return () => {
+      window.removeEventListener(event, listener, options);
+    };
+  }, [event, options]);
+}
+var useEventListener_default = useEventListener;
+
+// src/components/shared/hooks/events/useOnClickOutside.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function useOnClickOutside(ref, handler) {
+  const handlerRef = useRef2(handler);
+  useEffect2(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    const listener = (event) => {
+      const el = ref.current;
+      if (!el || el.contains(event.target)) return;
+      handlerRef.current(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref]);
+}
+var useOnClickOutside_default = useOnClickOutside;
+
+// src/components/shared/patterns/forms/FormField/fields/CheckboxSearchField/CheckboxSearchField.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var CheckboxSearchField = ({
+  field,
+  value,
+  error,
+  errorId,
+  onChange,
+  dict
+}) => {
+  var _a, _b;
+  const selected = Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+  const [search, setSearch] = React4.useState("");
+  const [open, setOpen] = React4.useState(false);
+  const containerRef = React4.useRef(null);
+  const filtered = (_b = (_a = field.options) == null ? void 0 : _a.filter(
+    (opt) => opt.label.toLowerCase().includes(search.toLowerCase())
+  )) != null ? _b : [];
+  const emit = (next) => {
+    onChange(createFormFieldChangeEvent(field.name, next));
+  };
+  const toggle = (val) => {
+    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+    emit(next);
+  };
+  const removeTag = (tag) => {
+    const next = selected.filter((t) => t !== tag);
+    emit(next);
+  };
+  useOnClickOutside_default(containerRef, () => {
+    setOpen(false);
+  });
+  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "flex flex-col gap-2 relative", children: [
+    /* @__PURE__ */ jsx6(
+      Input_default,
+      {
+        id: field.name,
+        type: "text",
+        className: "cursor-pointer placeholder:text-muted-foreground",
+        rightIcon: ChevronDown,
+        rightIconClassName: cx(
+          "h-5 w-5 [stroke-width:2.5] transition-transform duration-200 ease-out",
+          open && "rotate-180"
+        ),
+        placeholder: dict.search,
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        onFocus: () => setOpen(true),
+        onClick: () => setOpen(true),
+        "aria-invalid": Boolean(error),
+        "aria-describedby": errorId,
+        "aria-expanded": open
+      }
+    ),
+    open && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": field.label,
+        className: "absolute left-0 right-0 top-full z-10 mt-1 max-h-60 overflow-y-auto rounded-lg border border-border bg-background p-2 shadow-lg",
+        children: [
+          filtered.length === 0 && /* @__PURE__ */ jsx6("div", { className: "px-2 py-1 text-sm text-muted-foreground", children: dict.noResultToShow }),
+          filtered.map((opt) => {
+            const val = opt.value.toString();
+            const checked = selected.includes(val);
+            return /* @__PURE__ */ jsxs4(
+              "label",
+              {
+                className: "flex cursor-pointer select-none items-center gap-2 rounded px-2 py-1 hover:bg-surface-hover",
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    Checkbox_default,
+                    {
+                      checked,
+                      onChange: () => toggle(val),
+                      className: "cursor-pointer"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6("span", { children: opt.label })
+                ]
+              },
+              val
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-2 mt-1", children: selected.map((tag) => {
+      var _a2, _b2;
+      const opt = (_a2 = field.options) == null ? void 0 : _a2.find((o) => o.value.toString() === tag);
+      return /* @__PURE__ */ jsx6(
+        Tag_default,
+        {
+          intent: "primary",
+          variant: "soft",
+          onRemove: () => removeTag(tag),
+          children: (_b2 = opt == null ? void 0 : opt.label) != null ? _b2 : tag
+        },
+        tag
+      );
+    }) })
+  ] });
+};
+var CheckboxSearchField_default = CheckboxSearchField;
+
+// src/components/shared/patterns/forms/FormField/fields/CheckboxSearchField/index.tsx
+var CheckboxSearchField_default2 = CheckboxSearchField_default;
+
+// src/helpers/forms/index.ts
+var getSafeValue = (value) => {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (Array.isArray(value)) {
+    return value.every((item) => typeof item === "string") ? value : void 0;
+  }
+  return value;
+};
+
+// src/components/shared/patterns/forms/FormField/fields/ColorField/ColorField.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ColorField = ({
+  field,
+  value,
+  error,
+  errorId,
+  onChange
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        id: field.name,
+        type: "color",
+        name: field.name,
+        value: getSafeValue(value) || "#000000",
+        onChange,
+        "aria-invalid": Boolean(error),
+        "aria-describedby": errorId,
+        className: `h-10 w-12 cursor-pointer rounded-md border p-1 ${error ? "border-danger" : "border-border-strong"}`
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "text",
+        name: field.name,
+        value: getSafeValue(value),
+        onChange,
+        placeholder: (_a = field.placeholder) != null ? _a : "#rrggbb",
+        "aria-invalid": Boolean(error),
+        "aria-describedby": errorId,
+        className: `w-full flex-1 rounded-lg border px-3 py-2 focus:outline-none focus:ring-2 ${error ? "border-danger focus:ring-danger/40" : "border-border-strong focus:ring-ring"}`
+      }
+    )
+  ] });
+};
+var ColorField_default = ColorField;
+
+// src/components/shared/patterns/forms/FormField/fields/ColorField/index.tsx
+var ColorField_default2 = ColorField_default;
+
+// src/components/shared/patterns/forms/selection/Combobox/Combobox.tsx
+import { useEffect as useEffect3, useId, useMemo, useRef as useRef3, useState } from "react";
+import { Check, ChevronDown as ChevronDown2, Loader2 } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "min-h-9 px-3 text-sm",
+  md: "min-h-10 px-3 text-sm",
+  lg: "min-h-11 px-4 text-base"
+};
+var variantClasses = {
+  solid: "bg-surface border-border text-foreground",
+  outline: "bg-background border-border-strong text-foreground",
+  ghost: "bg-transparent border-transparent text-foreground hover:bg-surface",
+  soft: "bg-surface border-transparent text-foreground",
+  glass: "bg-glass-bg border-glass-border text-foreground shadow-glass backdrop-blur-md"
+};
+var intentClasses = {
+  primary: "focus-within:border-primary",
+  secondary: "focus-within:border-secondary",
+  success: "focus-within:border-success",
+  warning: "focus-within:border-warning",
+  danger: "focus-within:border-danger",
+  info: "focus-within:border-info"
+};
+var defaultFilter = (option, query) => option.label.toLowerCase().includes(query.toLowerCase());
+var valuesEqual = (a, b) => Object.is(a, b);
+var Combobox = ({
+  options,
+  value = null,
+  onChange,
+  values = [],
+  onChangeMany,
+  multiple = false,
+  placeholder = "Select...",
+  disabled = false,
+  loading = false,
+  search = true,
+  query,
+  onQueryChange,
+  filterFn = defaultFilter,
+  closeOnSelect,
+  maxSelected,
+  size = "md",
+  intent = "primary",
+  variant = "outline",
+  label,
+  hint,
+  error,
+  className,
+  inputClassName,
+  menuClassName,
+  renderOption,
+  renderValue,
+  "aria-label": ariaLabel,
+  id,
+  name
+}) => {
+  const internalId = useId();
+  const inputId = id != null ? id : `combobox-${internalId}`;
+  const listboxId = `${inputId}-listbox`;
+  const wrapperRef = useRef3(null);
+  const inputRef = useRef3(null);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [internalQuery, setInternalQuery] = useState("");
+  const isControlledQuery = typeof query === "string";
+  const currentQuery = isControlledQuery ? query : internalQuery;
+  const isInvalid = Boolean(error);
+  const shouldCloseOnSelect = closeOnSelect != null ? closeOnSelect : multiple ? false : true;
+  const selectedValues = multiple ? values : value == null ? [] : [value];
+  const filteredOptions = useMemo(
+    () => options.filter(
+      (option) => currentQuery.trim() ? filterFn(option, currentQuery) : true
+    ),
+    [currentQuery, filterFn, options]
+  );
+  const currentSingleLabel = useMemo(() => {
+    if (multiple || value == null) return "";
+    const option = options.find((item) => valuesEqual(item.value, value));
+    if (!option) return "";
+    return renderValue ? renderValue(option.value) : option.label;
+  }, [multiple, options, renderValue, value]);
+  const inputValue = useMemo(() => {
+    if (multiple) return currentQuery;
+    if (!search) return currentSingleLabel;
+    return open ? currentQuery : currentQuery || currentSingleLabel;
+  }, [currentQuery, currentSingleLabel, multiple, open, search]);
+  useEffect3(() => {
+    if (!open) return;
+    const onClickOutside = (event) => {
+      var _a;
+      if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(event.target))) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, [open]);
+  const updateQuery = (nextQuery) => {
+    if (!isControlledQuery) setInternalQuery(nextQuery);
+    onQueryChange == null ? void 0 : onQueryChange(nextQuery);
+  };
+  const isSelected = (option) => selectedValues.some((item) => valuesEqual(item, option.value));
+  const commitSingle = (next) => {
+    onChange == null ? void 0 : onChange(next);
+  };
+  const commitMany = (next) => {
+    onChangeMany == null ? void 0 : onChangeMany(next);
+  };
+  const selectOption = (option) => {
+    if (option.disabled) return;
+    if (multiple) {
+      const exists = isSelected(option);
+      if (exists) {
+        commitMany(values.filter((item) => !valuesEqual(item, option.value)));
+      } else {
+        if (typeof maxSelected === "number" && values.length >= maxSelected)
+          return;
+        commitMany([...values, option.value]);
+      }
+    } else {
+      commitSingle(option.value);
+      if (search) updateQuery("");
+    }
+    if (shouldCloseOnSelect) {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: cx("relative w-full", className), ref: wrapperRef, children: [
+    label ? /* @__PURE__ */ jsx8(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "mb-1 block text-sm font-medium text-foreground",
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: cx(
+          "rounded-md border transition-colors focus-within:ring-2 focus-within:ring-ring",
+          sizeClasses[size],
+          variantClasses[variant],
+          intentClasses[intent],
+          isInvalid && "border-danger focus-within:border-danger",
+          disabled && "cursor-not-allowed opacity-60"
+        ),
+        children: [
+          multiple && values.length > 0 ? /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-1 px-2 pb-1 pt-2", children: values.map((selected, index) => {
+            var _a;
+            const option = options.find(
+              (item) => valuesEqual(item.value, selected)
+            );
+            return /* @__PURE__ */ jsx8(
+              Tag_default,
+              {
+                size: "sm",
+                onRemove: () => commitMany(
+                  values.filter((item) => !valuesEqual(item, selected))
+                ),
+                children: (_a = option == null ? void 0 : option.label) != null ? _a : String(selected)
+              },
+              `${String(selected)}-${index}`
+            );
+          }) }) : null,
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 py-0.5", children: [
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                name,
+                value: inputValue,
+                onFocus: () => {
+                  if (!disabled) setOpen(true);
+                },
+                onClick: () => {
+                  if (!disabled) setOpen(true);
+                },
+                onChange: (event) => {
+                  if (!search && !multiple) return;
+                  updateQuery(event.target.value);
+                  setOpen(true);
+                  setActiveIndex(0);
+                },
+                onKeyDown: (event) => {
+                  if (disabled) return;
+                  if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    setOpen(true);
+                    setActiveIndex(
+                      (prev) => Math.min(filteredOptions.length - 1, prev + 1)
+                    );
+                  } else if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    setOpen(true);
+                    setActiveIndex((prev) => Math.max(0, prev - 1));
+                  } else if (event.key === "Enter") {
+                    event.preventDefault();
+                    if (!open) {
+                      setOpen(true);
+                      return;
+                    }
+                    const option = filteredOptions[activeIndex];
+                    if (option) selectOption(option);
+                  } else if (event.key === "Escape") {
+                    setOpen(false);
+                  } else if (event.key === "Backspace" && multiple && !currentQuery && values.length > 0) {
+                    commitMany(values.slice(0, -1));
+                  } else if (event.key === "Tab") {
+                    setOpen(false);
+                  }
+                },
+                placeholder: multiple && values.length > 0 ? "" : placeholder,
+                role: "combobox",
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-label": ariaLabel,
+                "aria-invalid": isInvalid,
+                disabled,
+                className: cx(
+                  "h-8 w-full bg-transparent py-0 text-foreground outline-none placeholder:text-muted-foreground",
+                  inputClassName
+                )
+              }
+            ),
+            loading ? /* @__PURE__ */ jsx8(
+              Loader2,
+              {
+                className: "h-4 w-4 animate-spin text-muted-foreground",
+                "aria-hidden": "true"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx8("span", { className: "inline-flex h-8 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx8(
+              ChevronDown2,
+              {
+                strokeWidth: 2.5,
+                className: cx(
+                  "h-5 w-5 text-muted-foreground transition-transform duration-200 ease-out",
+                  open && "rotate-180"
+                ),
+                "aria-hidden": "true"
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx8(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
+        className: cx(
+          "absolute left-0 right-0 top-full z-20 mt-1 max-h-60 overflow-y-auto rounded-md border border-border bg-background p-1 shadow-md",
+          menuClassName
+        ),
+        children: loading ? /* @__PURE__ */ jsx8("li", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading..." }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx8("li", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No results" }) : filteredOptions.map((option, index) => {
+          const selected = isSelected(option);
+          const active = index === activeIndex;
+          return /* @__PURE__ */ jsx8(
+            "li",
+            {
+              role: "option",
+              "aria-selected": selected,
+              children: /* @__PURE__ */ jsxs6(
+                "button",
+                {
+                  type: "button",
+                  disabled: option.disabled,
+                  onMouseEnter: () => setActiveIndex(index),
+                  onClick: () => selectOption(option),
+                  className: cx(
+                    "flex w-full items-center justify-between rounded px-3 py-2 text-sm",
+                    active ? "bg-surface" : "hover:bg-surface",
+                    option.disabled && "cursor-not-allowed opacity-50"
+                  ),
+                  children: [
+                    renderOption ? renderOption(option, { selected, active }) : /* @__PURE__ */ jsx8("span", { className: "text-foreground", children: option.label }),
+                    selected ? /* @__PURE__ */ jsx8(
+                      Check,
+                      {
+                        className: "h-4 w-4 text-primary",
+                        "aria-hidden": "true"
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            },
+            `${String(option.value)}-${index}`
+          );
+        })
+      }
+    ) : null,
+    hint && !error ? /* @__PURE__ */ jsx8("p", { className: "mt-1 text-xs text-muted-foreground", children: hint }) : null,
+    error ? /* @__PURE__ */ jsx8("p", { className: "mt-1 text-xs text-danger", children: error }) : null
+  ] });
+};
+var Combobox_default = Combobox;
+
+// src/components/shared/patterns/forms/FormField/fields/ComboboxField/ComboboxField.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ComboboxField = ({
+  field,
+  value,
+  error,
+  onChange
+}) => {
+  var _a, _b;
+  const isMultiple = Boolean(field.multiple);
+  const options = ((_a = field.options) != null ? _a : []).map((option) => ({
+    value: String(option.value),
+    label: option.label
+  }));
+  const emitChange = (nextValue) => {
+    const normalizedValue = nextValue == null ? "" : Array.isArray(nextValue) ? nextValue : String(nextValue);
+    onChange(createFormFieldChangeEvent(field.name, normalizedValue));
+  };
+  return /* @__PURE__ */ jsx9(
+    Combobox_default,
+    {
+      id: field.name,
+      name: field.name,
+      options,
+      multiple: isMultiple,
+      values: isMultiple ? value != null ? value : [] : [],
+      value: !isMultiple ? value != null ? value : null : null,
+      onChange: (next) => emitChange(next),
+      onChangeMany: (next) => emitChange(next),
+      placeholder: (_b = field.placeholder) != null ? _b : "Select...",
+      intent: error ? "danger" : "primary",
+      error,
+      inputClassName: "cursor-pointer",
+      "aria-label": field.label
+    }
+  );
+};
+var ComboboxField_default = ComboboxField;
+
+// src/components/shared/patterns/forms/FormField/fields/DatePickerField/DatePickerField.tsx
+import React7, { useEffect as useEffect5, useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/components/shared/primitives/actions/Button/Button.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var BASE_CLASSES = "relative inline-flex items-center justify-center overflow-hidden rounded-lg font-semibold cursor-pointer transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+var SIZE_CLASSES3 = {
+  xs: "h-7 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-11 px-5 text-base"
+};
+var SOLID_INTENT_CLASSES = {
+  primary: "bg-primary text-primary-foreground border border-primary hover:bg-primary-hover hover:border-primary-hover",
+  secondary: "bg-secondary text-secondary-foreground border border-secondary hover:bg-secondary-hover hover:border-secondary-hover",
+  success: "bg-success text-success-foreground border border-success hover:bg-success-hover hover:border-success-hover",
+  warning: "bg-warning text-warning-foreground border border-warning hover:bg-warning-hover hover:border-warning-hover",
+  danger: "bg-danger text-danger-foreground border border-danger hover:bg-danger-hover hover:border-danger-hover",
+  info: "bg-info text-info-foreground border border-info hover:bg-info-hover hover:border-info-hover",
+  neutral: "bg-foreground text-background border border-foreground hover:opacity-90"
+};
+var OUTLINE_INTENT_CLASSES = {
+  primary: "bg-background text-primary border border-primary hover:bg-primary hover:text-primary-foreground",
+  secondary: "bg-background text-secondary border border-secondary hover:bg-secondary hover:text-secondary-foreground",
+  success: "bg-background text-success border border-success hover:bg-success hover:text-success-foreground",
+  warning: "bg-background text-warning border border-warning hover:bg-warning hover:text-warning-foreground",
+  danger: "bg-background text-danger border border-danger hover:bg-danger hover:text-danger-foreground",
+  info: "bg-background text-info border border-info hover:bg-info hover:text-info-foreground",
+  neutral: "bg-background text-foreground border border-border-strong hover:bg-surface"
+};
+var SOFT_INTENT_CLASSES = {
+  primary: "bg-primary-soft text-primary-soft-foreground border border-transparent hover:bg-primary-soft",
+  secondary: "bg-secondary-soft text-secondary-soft-foreground border border-transparent hover:bg-secondary-soft",
+  success: "bg-success-soft text-success-soft-foreground border border-transparent hover:bg-success-soft",
+  warning: "bg-warning-soft text-warning-soft-foreground border border-transparent hover:bg-warning-soft",
+  danger: "bg-danger-soft text-danger-soft-foreground border border-transparent hover:bg-danger-soft",
+  info: "bg-info-soft text-info-soft-foreground border border-transparent hover:bg-info-soft",
+  neutral: "bg-surface text-foreground border border-transparent hover:bg-surface-hover"
+};
+var GHOST_INTENT_CLASSES = {
+  primary: "bg-transparent text-ghost-primary-foreground border border-transparent hover:bg-ghost-primary-hover",
+  secondary: "bg-transparent text-ghost-secondary-foreground border border-transparent hover:bg-ghost-secondary-hover",
+  success: "bg-transparent text-ghost-success-foreground border border-transparent hover:bg-ghost-success-hover",
+  warning: "bg-transparent text-ghost-warning-foreground border border-transparent hover:bg-ghost-warning-hover",
+  danger: "bg-transparent text-ghost-danger-foreground border border-transparent hover:bg-ghost-danger-hover",
+  info: "bg-transparent text-ghost-info-foreground border border-transparent hover:bg-ghost-info-hover",
+  neutral: "bg-ghost text-ghost-foreground border border-ghost hover:bg-ghost-hover"
+};
+var GLASS_INTENT_CLASSES = {
+  primary: "bg-primary/20 text-primary-soft-foreground border border-glass-border hover:bg-primary/30",
+  secondary: "bg-secondary/20 text-secondary-soft-foreground border border-glass-border hover:bg-secondary/30",
+  success: "bg-success/20 text-success-soft-foreground border border-glass-border hover:bg-success/30",
+  warning: "bg-warning/20 text-warning-soft-foreground border border-glass-border hover:bg-warning/30",
+  danger: "bg-danger/20 text-danger-soft-foreground border border-glass-border hover:bg-danger/30",
+  info: "bg-info/20 text-info-soft-foreground border border-glass-border hover:bg-info/30",
+  neutral: "bg-glass-bg text-foreground border border-glass-border hover:border-glass-highlight"
+};
+var GLASS_LAYER_CLASSES = "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-glass-highlight before:opacity-25";
+var VARIANT_BY_KIND = {
+  solid: SOLID_INTENT_CLASSES,
+  outline: OUTLINE_INTENT_CLASSES,
+  ghost: GHOST_INTENT_CLASSES,
+  soft: SOFT_INTENT_CLASSES,
+  glass: GLASS_INTENT_CLASSES,
+  "reverse-primary": OUTLINE_INTENT_CLASSES,
+  "reverse-secondary": OUTLINE_INTENT_CLASSES
+};
+var resolveVariant = (intent, variant) => {
+  const safeVariant = variant != null ? variant : "solid";
+  if (safeVariant === "reverse-primary") {
+    return { intent: "primary", variant: "outline" };
+  }
+  if (safeVariant === "reverse-secondary") {
+    return { intent: "secondary", variant: "outline" };
+  }
+  return { intent, variant: safeVariant };
+};
+var Button = forwardRef3(
+  (_a, ref) => {
+    var _b = _a, {
+      type = "button",
+      intent = "primary",
+      variant = "solid",
+      size = "md",
+      loading = false,
+      disabled,
+      className,
+      children
+    } = _b, props = __objRest(_b, [
+      "type",
+      "intent",
+      "variant",
+      "size",
+      "loading",
+      "disabled",
+      "className",
+      "children"
+    ]);
+    const resolved = resolveVariant(intent, variant);
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsx10(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type,
+        className: cx(
+          BASE_CLASSES,
+          SIZE_CLASSES3[size],
+          VARIANT_BY_KIND[resolved.variant][resolved.intent],
+          resolved.variant === "glass" && GLASS_LAYER_CLASSES,
+          className
+        ),
+        disabled: isDisabled,
+        "aria-busy": loading || void 0
+      }, props), {
+        children: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex items-center gap-2 leading-none", children: [
+          loading && /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-r-transparent",
+              "aria-hidden": "true"
+            }
+          ),
+          renderBindableNode(children)
+        ] })
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+
+// src/components/shared/primitives/actions/Button/index.tsx
+var Button_default2 = Button_default;
+
+// src/components/shared/overlays/modals/Popin/Popin.tsx
+import { X as X2 } from "lucide-react";
+import {
+  useEffect as useEffect4,
+  useId as useId2,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var MAX_SIZE_MAP = {
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  full: "100vw"
+};
+var Popin = ({
+  displayedPopin,
+  children,
+  setDisplayedPopin,
+  title,
+  closeText,
+  hasCloseAvailability = true,
+  closeOnOutsideClick = true,
+  maxSize = "2xl",
+  actionText,
+  onAction,
+  requireScrollToEnableAction = false
+}) => {
+  const rawCloseOnOutsideClick = closeOnOutsideClick;
+  const normalizedCloseOnOutsideClick = typeof rawCloseOnOutsideClick === "string" ? rawCloseOnOutsideClick.toLowerCase() !== "false" : Boolean(rawCloseOnOutsideClick);
+  const titleId = useId2();
+  const scrollRef = useRef4(null);
+  const [hasScrolledToBottom, setHasScrolledToBottom] = useState2(
+    !requireScrollToEnableAction
+  );
+  useEventListener_default("keydown", (event) => {
+    if (!displayedPopin || !hasCloseAvailability) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setDisplayedPopin(false);
+    }
+  });
+  useEffect4(() => {
+    var _a;
+    if (!displayedPopin) return;
+    setHasScrolledToBottom(!requireScrollToEnableAction);
+    (_a = scrollRef.current) == null ? void 0 : _a.scrollTo({ top: 0 });
+    if (requireScrollToEnableAction) {
+      queueMicrotask(() => {
+        const el = scrollRef.current;
+        if (!el) return;
+        const noScrollNeeded = el.scrollHeight <= el.clientHeight + 1;
+        if (noScrollNeeded) {
+          setHasScrolledToBottom(true);
+        }
+      });
+    }
+  }, [displayedPopin, requireScrollToEnableAction]);
+  const handleScroll = () => {
+    if (!requireScrollToEnableAction) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const isBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 4;
+    if (isBottom) setHasScrolledToBottom(true);
+  };
+  if (!displayedPopin) return null;
+  const dialogStyle = {
+    maxWidth: maxSize === "full" ? "calc(100vw - 2rem)" : `min(${MAX_SIZE_MAP[maxSize]}, calc(100vw - 2rem))`
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center px-4", children: [
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "absolute inset-0 bg-foreground/40 opacity-50",
+        onMouseDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (hasCloseAvailability && normalizedCloseOnOutsideClick) {
+            setDisplayedPopin(false);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        className: "relative z-10 flex w-fit max-h-[72vh] max-w-full min-w-0 flex-col rounded border-2 border-border bg-surface-hover sm:max-h-[85vh]",
+        style: dialogStyle,
+        onClick: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3 border-b border-border px-6 py-4", children: [
+            /* @__PURE__ */ jsx11(
+              "h3",
+              {
+                id: titleId,
+                className: "min-w-0 flex-1 break-words text-lg font-semibold text-primary",
+                children: title
+              }
+            ),
+            hasCloseAvailability && /* @__PURE__ */ jsx11(
+              Button_default2,
+              {
+                type: "button",
+                variant: "reverse-primary",
+                onClick: () => setDisplayedPopin(false),
+                "aria-label": typeof closeText === "string" ? closeText : "Close",
+                className: "bg-transparent border-0 p-0 focus-visible:ring-offset-0",
+                children: /* @__PURE__ */ jsx11(X2, { size: 20, "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              ref: scrollRef,
+              onScroll: handleScroll,
+              className: "min-h-0 overflow-x-auto overflow-y-auto break-words px-6 py-4",
+              children
+            }
+          ),
+          actionText && /* @__PURE__ */ jsx11("div", { className: "flex justify-end px-6 py-4 border-t border-border bg-surface-hover", children: /* @__PURE__ */ jsx11(
+            Button_default2,
+            {
+              onClick: onAction,
+              disabled: requireScrollToEnableAction && !hasScrolledToBottom || !onAction,
+              children: actionText
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+var Popin_default = Popin;
+
+// src/components/shared/overlays/modals/Popin/index.ts
+var Popin_default2 = Popin_default;
+
+// src/components/shared/patterns/forms/FormField/fields/DatePickerField/DatePickerField.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var ITEM_HEIGHT = 42;
+var WheelPickerColumn = ({
+  label,
+  items,
+  selectedValue,
+  onChange
+}) => {
+  const wheelRef = React7.useRef(null);
+  useEffect5(() => {
+    const index = items.findIndex((item) => item.value === selectedValue);
+    if (index < 0 || !wheelRef.current) return;
+    wheelRef.current.scrollTo({
+      top: index * ITEM_HEIGHT,
+      behavior: "smooth"
+    });
+  }, [items, selectedValue]);
+  return /* @__PURE__ */ jsxs9("div", { className: "min-w-20 flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx12("p", { className: "text-xs font-semibold text-foreground", children: label }),
+    /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx12("div", { className: "pointer-events-none absolute left-0 right-0 top-1/2 z-10 h-10 -translate-y-1/2 rounded border border-primary/30 bg-primary/5" }),
+      /* @__PURE__ */ jsx12(
+        "div",
+        {
+          ref: wheelRef,
+          role: "listbox",
+          "aria-label": `${label} wheel picker`,
+          className: "h-52 overflow-y-auto rounded border border-border bg-background snap-y snap-mandatory",
+          onScroll: (event) => {
+            const target = event.currentTarget;
+            const index = Math.round(target.scrollTop / ITEM_HEIGHT);
+            const clampedIndex = Math.max(0, Math.min(items.length - 1, index));
+            const next = items[clampedIndex];
+            if (next && next.value !== selectedValue) {
+              onChange(next.value);
+            }
+          },
+          children: items.map((item) => /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": item.value === selectedValue,
+              className: `flex h-10 w-full snap-start items-center justify-center text-sm ${item.value === selectedValue ? "font-semibold text-primary" : "text-muted-foreground"}`,
+              onClick: () => onChange(item.value),
+              children: item.label
+            },
+            `${label}-${item.value}`
+          ))
+        }
+      )
+    ] })
+  ] });
+};
+var DatePickerField = ({
+  field,
+  value,
+  error,
+  errorId,
+  onChange
+}) => {
+  var _a;
+  const safeValue = String((_a = getSafeValue(value)) != null ? _a : "");
+  const [isMobilePicker, setIsMobilePicker] = useState3(false);
+  const [isPopinOpen, setIsPopinOpen] = useState3(false);
+  const today = useMemo2(() => /* @__PURE__ */ new Date(), []);
+  const defaultYear = today.getFullYear();
+  const [selectedYear, setSelectedYear] = useState3(defaultYear);
+  const [selectedMonth, setSelectedMonth] = useState3(today.getMonth() + 1);
+  const [selectedDay, setSelectedDay] = useState3(today.getDate());
+  useEffect5(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const media = window.matchMedia("(max-width: 768px), (pointer: coarse)");
+    const update = () => setIsMobilePicker(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  const parseDate = (dateString) => {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateString);
+    if (!match) return null;
+    return {
+      year: Number(match[1]),
+      month: Number(match[2]),
+      day: Number(match[3])
+    };
+  };
+  const daysInSelectedMonth = new Date(
+    selectedYear,
+    selectedMonth,
+    0
+  ).getDate();
+  const years = useMemo2(() => {
+    const start = defaultYear - 100;
+    const end = defaultYear + 20;
+    return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+  }, [defaultYear]);
+  const days = useMemo2(
+    () => Array.from({ length: daysInSelectedMonth }, (_, index) => index + 1),
+    [daysInSelectedMonth]
+  );
+  const formattedValue = useMemo2(() => {
+    const parsed = parseDate(safeValue);
+    if (!parsed) return safeValue;
+    return `${String(parsed.day).padStart(2, "0")}/${String(parsed.month).padStart(2, "0")}/${parsed.year}`;
+  }, [safeValue]);
+  const openMobilePicker = () => {
+    const parsed = parseDate(safeValue);
+    if (parsed) {
+      setSelectedYear(parsed.year);
+      setSelectedMonth(parsed.month);
+      setSelectedDay(parsed.day);
+    }
+    setIsPopinOpen(true);
+  };
+  const emitDate = (nextValue) => {
+    onChange(createFormFieldChangeEvent(field.name, nextValue));
+  };
+  const applyMobilePicker = () => {
+    const safeDay = Math.min(selectedDay, daysInSelectedMonth);
+    const isoDate = `${selectedYear}-${String(selectedMonth).padStart(2, "0")}-${String(safeDay).padStart(2, "0")}`;
+    emitDate(isoDate);
+    setIsPopinOpen(false);
+  };
+  if (isMobilePicker) {
+    return /* @__PURE__ */ jsxs9(Fragment, { children: [
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          onClick: openMobilePicker,
+          className: `mt-1 w-full rounded-md border bg-background px-3 py-2 text-left text-sm outline-none focus-visible:ring-2 ${error ? "border-danger focus-visible:ring-danger/40" : "border-border-strong focus-visible:ring-ring"}`,
+          "aria-invalid": Boolean(error),
+          "aria-describedby": errorId,
+          children: formattedValue || field.placeholder || "Select a date"
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        Popin_default2,
+        {
+          displayedPopin: isPopinOpen,
+          setDisplayedPopin: setIsPopinOpen,
+          title: field.label,
+          closeText: "Close date picker",
+          actionText: "Apply",
+          onAction: applyMobilePicker,
+          maxSize: "full",
+          children: /* @__PURE__ */ jsxs9("div", { className: "flex gap-3 overflow-x-auto", children: [
+            /* @__PURE__ */ jsx12(
+              WheelPickerColumn,
+              {
+                label: "Day",
+                items: days.map((day) => ({
+                  value: day,
+                  label: String(day).padStart(2, "0")
+                })),
+                selectedValue: selectedDay,
+                onChange: setSelectedDay
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              WheelPickerColumn,
+              {
+                label: "Month",
+                items: Array.from({ length: 12 }, (_, index) => ({
+                  value: index + 1,
+                  label: String(index + 1).padStart(2, "0")
+                })),
+                selectedValue: selectedMonth,
+                onChange: setSelectedMonth
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              WheelPickerColumn,
+              {
+                label: "Year",
+                items: years.map((year) => ({
+                  value: year,
+                  label: String(year)
+                })),
+                selectedValue: selectedYear,
+                onChange: setSelectedYear
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx12(
+    Input_default,
+    {
+      id: field.name,
+      type: "date",
+      name: field.name,
+      value: safeValue,
+      onChange,
+      "aria-invalid": Boolean(error),
+      "aria-describedby": errorId,
+      intent: error ? "danger" : "neutral",
+      className: "mt-1"
+    }
+  );
+};
+var DatePickerField_default = DatePickerField;
+
+// src/components/shared/patterns/forms/FormField/fields/DatePickerField/index.tsx
+var DatePickerField_default2 = DatePickerField_default;
+
+// src/components/shared/media/upload/fields/FileUpload/FileUpload.tsx
+import { useEffect as useEffect6, useId as useId3, useMemo as useMemo3, useState as useState4 } from "react";
+import { Upload, X as X3 } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var VARIANT_CLASSES2 = {
+  solid: {
+    primary: "bg-primary-soft border-primary text-primary-soft-foreground",
+    secondary: "bg-secondary-soft border-secondary text-secondary-soft-foreground",
+    success: "bg-success-soft border-success text-success-soft-foreground",
+    warning: "bg-warning-soft border-warning text-warning-soft-foreground",
+    danger: "bg-danger-soft border-danger text-danger-soft-foreground",
+    info: "bg-info-soft border-info text-info-soft-foreground",
+    neutral: "bg-surface border-border text-foreground"
+  },
+  outline: {
+    primary: "bg-background border-primary text-primary",
+    secondary: "bg-background border-secondary text-secondary",
+    success: "bg-background border-success text-success",
+    warning: "bg-background border-warning text-warning",
+    danger: "bg-background border-danger text-danger",
+    info: "bg-background border-info text-info",
+    neutral: "bg-background border-border text-foreground"
+  },
+  ghost: {
+    primary: "bg-transparent border-transparent text-ghost-primary-foreground hover:bg-ghost-primary-hover",
+    secondary: "bg-transparent border-transparent text-ghost-secondary-foreground hover:bg-ghost-secondary-hover",
+    success: "bg-transparent border-transparent text-ghost-success-foreground hover:bg-ghost-success-hover",
+    warning: "bg-transparent border-transparent text-ghost-warning-foreground hover:bg-ghost-warning-hover",
+    danger: "bg-transparent border-transparent text-ghost-danger-foreground hover:bg-ghost-danger-hover",
+    info: "bg-transparent border-transparent text-ghost-info-foreground hover:bg-ghost-info-hover",
+    neutral: "bg-transparent border-transparent text-ghost-foreground hover:bg-ghost-hover"
+  },
+  soft: {
+    primary: "bg-primary-soft border-transparent text-primary-soft-foreground",
+    secondary: "bg-secondary-soft border-transparent text-secondary-soft-foreground",
+    success: "bg-success-soft border-transparent text-success-soft-foreground",
+    warning: "bg-warning-soft border-transparent text-warning-soft-foreground",
+    danger: "bg-danger-soft border-transparent text-danger-soft-foreground",
+    info: "bg-info-soft border-transparent text-info-soft-foreground",
+    neutral: "bg-surface border-transparent text-foreground"
+  },
+  glass: {
+    primary: "bg-primary/20 border-glass-border text-primary-soft-foreground shadow-glass",
+    secondary: "bg-secondary/20 border-glass-border text-secondary-soft-foreground shadow-glass",
+    success: "bg-success/20 border-glass-border text-success-soft-foreground shadow-glass",
+    warning: "bg-warning/20 border-glass-border text-warning-soft-foreground shadow-glass",
+    danger: "bg-danger/20 border-glass-border text-danger-soft-foreground shadow-glass",
+    info: "bg-info/20 border-glass-border text-info-soft-foreground shadow-glass",
+    neutral: "bg-glass-bg border-glass-border text-foreground shadow-glass"
+  }
+};
+var matchesAccept = (file, accept) => {
+  if (!accept) return true;
+  const accepted = accept.split(",").map((item) => item.trim().toLowerCase());
+  const fileType = file.type.toLowerCase();
+  const fileName = file.name.toLowerCase();
+  return accepted.some((rule) => {
+    if (rule.startsWith(".")) return fileName.endsWith(rule);
+    if (rule.endsWith("/*")) return fileType.startsWith(rule.slice(0, -1));
+    return fileType === rule;
+  });
+};
+var getPreviewKind = (file) => {
+  if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("video/")) return "video";
+  return null;
+};
+var createPreviewUrl = (file) => {
+  if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return null;
+  return URL.createObjectURL(file);
+};
+var revokePreviewUrl = (url) => {
+  if (!url) return;
+  if (typeof URL === "undefined" || typeof URL.revokeObjectURL !== "function") return;
+  URL.revokeObjectURL(url);
+};
+var FileUpload = ({
+  value,
+  onChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxSizeBytes,
+  disabled = false,
+  renderFile,
+  onReject,
+  intent = "neutral",
+  variant = "outline",
+  className
+}) => {
+  var _a;
+  const inputId = useId3();
+  const files = useMemo3(() => value != null ? value : [], [value]);
+  const [dragActive, setDragActive] = useState4(false);
+  const [previewOpen, setPreviewOpen] = useState4(false);
+  const [activePreview, setActivePreview] = useState4(null);
+  const previews = useMemo3(
+    () => files.map((file) => {
+      const kind = getPreviewKind(file);
+      return {
+        file,
+        kind,
+        url: kind ? createPreviewUrl(file) : null
+      };
+    }),
+    [files]
+  );
+  useEffect6(
+    () => () => {
+      previews.forEach((preview) => {
+        revokePreviewUrl(preview.url);
+      });
+    },
+    [previews]
+  );
+  const normalizeFiles = (incomingFiles) => {
+    const next = [];
+    for (const file of incomingFiles) {
+      if (!matchesAccept(file, accept)) {
+        onReject == null ? void 0 : onReject({ type: "accept", file });
+        continue;
+      }
+      if (typeof maxSizeBytes === "number" && file.size > maxSizeBytes) {
+        onReject == null ? void 0 : onReject({ type: "maxSize", file });
+        continue;
+      }
+      next.push(file);
+    }
+    const merged = multiple ? [...files, ...next] : next.slice(0, 1);
+    if (typeof maxFiles === "number" && merged.length > maxFiles) {
+      onReject == null ? void 0 : onReject({ type: "maxFiles" });
+      return merged.slice(0, maxFiles);
+    }
+    return merged;
+  };
+  const commitFiles = (incomingFiles) => {
+    const normalized = normalizeFiles(incomingFiles);
+    onChange(normalized);
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: cx("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs10(
+      "label",
+      {
+        htmlFor: inputId,
+        onDragOver: (event) => {
+          event.preventDefault();
+          if (!disabled) setDragActive(true);
+        },
+        onDragLeave: () => setDragActive(false),
+        onDrop: (event) => {
+          event.preventDefault();
+          setDragActive(false);
+          if (disabled) return;
+          const dropped = Array.from(event.dataTransfer.files);
+          if (dropped.length) commitFiles(dropped);
+        },
+        className: cx(
+          "flex min-h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-4 text-center transition-colors",
+          VARIANT_CLASSES2[variant][intent],
+          dragActive && "border-primary bg-primary-soft",
+          disabled && "cursor-not-allowed opacity-60"
+        ),
+        children: [
+          /* @__PURE__ */ jsx13(Upload, { className: "h-5 w-5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium text-foreground", children: "Drop files here or click to upload" }),
+          /* @__PURE__ */ jsxs10("span", { className: "text-xs text-muted-foreground", children: [
+            accept ? `Accepted: ${accept}` : "All file types",
+            "."
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      "input",
+      {
+        id: inputId,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        className: "sr-only",
+        onChange: (event) => {
+          var _a2;
+          const selected = Array.from((_a2 = event.target.files) != null ? _a2 : []);
+          if (selected.length) commitFiles(selected);
+          event.currentTarget.value = "";
+        }
+      }
+    ),
+    files.length > 0 ? /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap justify-center gap-3", children: previews.map(({ file, kind, url }, index) => /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: "w-full max-w-64 rounded-lg border border-border bg-surface p-3",
+        children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex justify-center", children: [
+            kind === "image" && url ? /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                className: "w-full cursor-pointer rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "aria-label": `Open preview ${file.name}`,
+                onClick: () => {
+                  setActivePreview({ name: file.name, kind: "image", url });
+                  setPreviewOpen(true);
+                },
+                children: /* @__PURE__ */ jsx13(
+                  "img",
+                  {
+                    src: url,
+                    alt: file.name,
+                    className: "h-28 w-full rounded object-cover"
+                  }
+                )
+              }
+            ) : null,
+            kind === "video" && url ? /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                className: "w-full cursor-pointer rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "aria-label": `Open preview ${file.name}`,
+                onClick: () => {
+                  setActivePreview({ name: file.name, kind: "video", url });
+                  setPreviewOpen(true);
+                },
+                children: /* @__PURE__ */ jsx13(
+                  "video",
+                  {
+                    src: url,
+                    className: "h-28 w-full rounded object-cover",
+                    muted: true,
+                    preload: "metadata",
+                    "aria-label": `Preview ${file.name}`
+                  }
+                )
+              }
+            ) : null,
+            !kind ? /* @__PURE__ */ jsx13("div", { className: "flex h-28 w-full items-center justify-center rounded bg-muted text-xs text-muted-foreground", children: "No preview" }) : null
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { className: "mt-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1 rounded-md border border-border bg-background px-2 py-1 text-center text-sm", children: /* @__PURE__ */ jsx13("span", { className: "block truncate", children: renderFile ? renderFile(file) : file.name }) }),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${file.name}`,
+                onClick: () => onChange(files.filter((_, fileIndex) => fileIndex !== index)),
+                className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx13(X3, { className: "h-4 w-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ]
+      },
+      `${file.name}-${file.size}-${index}`
+    )) }) : null,
+    /* @__PURE__ */ jsx13(
+      Popin_default2,
+      {
+        displayedPopin: previewOpen,
+        setDisplayedPopin: setPreviewOpen,
+        title: (_a = activePreview == null ? void 0 : activePreview.name) != null ? _a : "Media preview",
+        closeText: "Close preview",
+        maxSize: "xl",
+        children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-center", children: [
+          (activePreview == null ? void 0 : activePreview.kind) === "image" ? /* @__PURE__ */ jsx13(
+            "img",
+            {
+              src: activePreview.url,
+              alt: activePreview.name,
+              className: "max-h-[70vh] w-auto max-w-full rounded object-contain"
+            }
+          ) : null,
+          (activePreview == null ? void 0 : activePreview.kind) === "video" ? /* @__PURE__ */ jsx13(
+            "video",
+            {
+              src: activePreview.url,
+              className: "max-h-[70vh] w-auto max-w-full rounded",
+              controls: true,
+              autoPlay: true,
+              muted: true
+            }
+          ) : null
+        ] })
+      }
+    )
+  ] });
+};
+var FileUpload_default = FileUpload;
+
+// src/components/shared/patterns/forms/FormField/fields/FileUploadField/FileUploadField.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var FileUploadField = ({
+  field,
+  value,
+  onChange
+}) => {
+  var _a;
+  const safeField = field != null ? field : {};
+  const fieldName = typeof safeField.name === "string" && safeField.name.trim() ? safeField.name : "fileUpload";
+  const files = Array.isArray(value) ? value : [];
+  return /* @__PURE__ */ jsx14(
+    FileUpload_default,
+    {
+      value: files,
+      onChange: (nextFiles) => onChange(createFormFieldChangeEvent(fieldName, nextFiles)),
+      multiple: (_a = safeField.multiple) != null ? _a : true,
+      accept: safeField.accept,
+      maxFiles: safeField.maxFiles,
+      maxSizeBytes: safeField.maxSizeBytes
+    }
+  );
+};
+var FileUploadField_default = FileUploadField;
+
+// src/components/shared/primitives/data-entry/Select/Select.tsx
+import { forwardRef as forwardRef4, useState as useState5 } from "react";
+import { ChevronDown as ChevronDown3 } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var SIZE_CLASSES4 = {
+  xs: "h-7 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-11 px-4 text-base"
+};
+var INTENT_CLASSES2 = {
+  primary: "focus-visible:border-primary",
+  secondary: "focus-visible:border-secondary",
+  success: "focus-visible:border-success",
+  warning: "focus-visible:border-warning",
+  danger: "focus-visible:border-danger",
+  info: "focus-visible:border-info",
+  neutral: "focus-visible:border-primary"
+};
+var Select = forwardRef4(
+  (_a, ref) => {
+    var _b = _a, { className, children, intent = "neutral", size = "md" } = _b, props = __objRest(_b, ["className", "children", "intent", "size"]);
+    const isInvalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    const [isFocused, setIsFocused] = useState5(false);
+    return /* @__PURE__ */ jsxs11("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx15(
+        "select",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cx(
+            "w-full appearance-none rounded-md border bg-background pr-10 text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            SIZE_CLASSES4[size],
+            isInvalid ? "border-danger focus-visible:border-danger" : "border-border-strong",
+            !isInvalid && INTENT_CLASSES2[intent],
+            className
+          ),
+          onFocus: (event) => {
+            var _a2;
+            setIsFocused(true);
+            (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, event);
+          },
+          onBlur: (event) => {
+            var _a2;
+            setIsFocused(false);
+            (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, event);
+          }
+        }, props), {
+          children
+        })
+      ),
+      /* @__PURE__ */ jsx15("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-muted-foreground", children: /* @__PURE__ */ jsx15(
+        ChevronDown3,
+        {
+          "aria-hidden": "true",
+          strokeWidth: 2.5,
+          className: cx(
+            "h-5 w-5 transition-transform duration-200 ease-out",
+            isFocused && "rotate-180"
+          )
+        }
+      ) })
+    ] });
+  }
+);
+Select.displayName = "Select";
+var Select_default = Select;
+
+// src/components/shared/patterns/forms/FormField/fields/SelectField/SelectField.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var SelectField = ({ field, value, error, errorId, onChange }) => {
+  var _a;
+  return /* @__PURE__ */ jsx16(
+    Select_default,
+    {
+      id: field.name,
+      name: field.name,
+      value,
+      onChange,
+      "aria-invalid": Boolean(error),
+      "aria-describedby": errorId,
+      intent: error ? "danger" : "neutral",
+      className: "mt-1 cursor-pointer",
+      children: (_a = field.options) == null ? void 0 : _a.map((opt) => /* @__PURE__ */ jsx16("option", { value: opt.value, children: opt.label }, opt.value))
+    }
+  );
+};
+var SelectField_default = SelectField;
+
+// src/components/shared/patterns/forms/FormField/fields/SelectField/index.tsx
+var SelectField_default2 = SelectField_default;
+
+// src/components/shared/primitives/data-entry/Slider/Slider.tsx
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var SIZE_CLASSES5 = {
+  sm: "h-1.5",
+  md: "h-2",
+  lg: "h-2.5"
+};
+var INTENT_CLASSES3 = {
+  primary: "accent-primary",
+  secondary: "accent-secondary",
+  success: "accent-success",
+  warning: "accent-warning",
+  danger: "accent-danger",
+  info: "accent-info",
+  neutral: "accent-primary"
+};
+var Slider = (_a) => {
+  var _b = _a, {
+    value,
+    onChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    showValue = false,
+    formatValue,
+    intent = "primary",
+    size = "md",
+    className
+  } = _b, props = __objRest(_b, [
+    "value",
+    "onChange",
+    "min",
+    "max",
+    "step",
+    "disabled",
+    "showValue",
+    "formatValue",
+    "intent",
+    "size",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs12("div", { className: cx("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ jsx17(
+      "input",
+      __spreadValues({
+        type: "range",
+        value,
+        min,
+        max,
+        step,
+        disabled,
+        onChange: (event) => onChange(Number(event.target.value)),
+        className: cx(
+          "w-full cursor-pointer rounded-lg bg-surface shadow-none disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          SIZE_CLASSES5[size],
+          INTENT_CLASSES3[intent]
+        )
+      }, props)
+    ),
+    showValue ? /* @__PURE__ */ jsx17("span", { className: "min-w-10 text-right text-xs font-medium text-muted-foreground", children: formatValue ? formatValue(value) : value }) : null
+  ] });
+};
+var Slider_default = Slider;
+
+// src/components/shared/patterns/forms/FormField/fields/SliderField/SliderField.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SliderField = ({ field, value, onChange }) => {
+  var _a, _b, _c, _d, _e;
+  const numericValue = typeof value === "number" ? value : typeof value === "string" && value !== "" ? Number(value) : (_a = field.min) != null ? _a : 0;
+  return /* @__PURE__ */ jsx18(
+    Slider_default,
+    {
+      id: field.name,
+      name: field.name,
+      value: Number.isFinite(numericValue) ? numericValue : (_b = field.min) != null ? _b : 0,
+      min: (_c = field.min) != null ? _c : 0,
+      max: (_d = field.max) != null ? _d : 100,
+      step: (_e = field.step) != null ? _e : 1,
+      showValue: true,
+      onChange: (next) => onChange(createFormFieldChangeEvent(field.name, next)),
+      "aria-label": field.label
+    }
+  );
+};
+var SliderField_default = SliderField;
+
+// src/components/shared/primitives/data-entry/Switch/Switch.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Switch = (_a) => {
+  var _b = _a, {
+    checked,
+    onChange,
+    disabled = false,
+    label,
+    className,
+    onKeyDown,
+    "aria-label": ariaLabel
+  } = _b, props = __objRest(_b, [
+    "checked",
+    "onChange",
+    "disabled",
+    "label",
+    "className",
+    "onKeyDown",
+    "aria-label"
+  ]);
+  const handleToggle = () => {
+    if (disabled) return;
+    onChange(!checked);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented || disabled) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      onChange(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsx19(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": ariaLabel != null ? ariaLabel : label,
+      disabled,
+      onClick: handleToggle,
+      onKeyDown: handleKeyDown,
+      className: `relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full border transition-colors shadow-sm disabled:opacity-50 disabled:cursor-not-allowed ${checked ? "border-primary-foreground/40 bg-primary-hover" : "border-border-strong bg-border-strong"} ${className != null ? className : ""}`
+    }, props), {
+      children: /* @__PURE__ */ jsx19(
+        "span",
+        {
+          className: `inline-block h-4 w-4 transform rounded-full transition-transform ${checked ? "translate-x-6 bg-primary-foreground" : "translate-x-1 bg-background"}`
+        }
+      )
+    })
+  );
+};
+var Switch_default = Switch;
+
+// src/components/shared/patterns/forms/FormField/fields/SwitchField/SwitchField.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var SwitchField = ({
+  field,
+  value,
+  error,
+  errorId,
+  onChange
+}) => {
+  const checked = Boolean(value);
+  const emit = (next) => {
+    onChange(createFormFieldChangeEvent(field.name, next));
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 py-1", children: [
+    /* @__PURE__ */ jsx20(
+      Switch_default,
+      {
+        checked,
+        onChange: emit,
+        label: field.label,
+        "aria-describedby": errorId,
+        "aria-invalid": Boolean(error)
+      }
+    ),
+    /* @__PURE__ */ jsxs13("span", { className: "text-foreground", children: [
+      field.label,
+      " ",
+      field.required && "*"
+    ] }),
+    error && !errorId && /* @__PURE__ */ jsx20("p", { className: "text-sm text-danger", children: error })
+  ] });
+};
+var SwitchField_default = SwitchField;
+
+// src/components/shared/patterns/forms/FormField/fields/SwitchField/index.tsx
+var SwitchField_default2 = SwitchField_default;
+
+// src/components/shared/patterns/forms/FormField/fields/TagsField/TagsField.tsx
+import React10 from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var TagsField = ({ field, value, error, errorId, onChange }) => {
+  var _a;
+  const [tagToAdd, setTagToAdd] = React10.useState("");
+  const tags = Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+  const addTag = () => {
+    if (!tagToAdd || tags.includes(tagToAdd)) return;
+    onChange(createFormFieldChangeEvent(field.name, [...tags, tagToAdd]));
+    setTagToAdd("");
+  };
+  const removeTag = (tag) => {
+    onChange(createFormFieldChangeEvent(field.name, tags.filter((t) => t !== tag)));
+  };
+  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs14(
+        Select_default,
+        {
+          id: field.name,
+          className: "flex-1 cursor-pointer placeholder:text-muted-foreground",
+          value: tagToAdd,
+          onChange: (e) => setTagToAdd(e.target.value),
+          "aria-invalid": Boolean(error),
+          "aria-describedby": errorId,
+          intent: error ? "danger" : "neutral",
+          children: [
+            /* @__PURE__ */ jsx21("option", { value: "", children: "\u2014" }),
+            (_a = field.options) == null ? void 0 : _a.map((opt) => /* @__PURE__ */ jsx21("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        Button_default2,
+        {
+          intent: "primary",
+          variant: "solid",
+          type: "button",
+          onClick: addTag,
+          className: "px-3 py-2",
+          children: "+"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx21("div", { className: "flex flex-wrap gap-2 mt-1", children: tags.map((tag) => {
+      var _a2, _b, _c;
+      return /* @__PURE__ */ jsx21(
+        Tag_default,
+        {
+          intent: "primary",
+          variant: "soft",
+          onRemove: () => removeTag(tag),
+          children: (_c = (_b = (_a2 = field.options) == null ? void 0 : _a2.find((option) => String(option.value) === tag)) == null ? void 0 : _b.label) != null ? _c : tag
+        },
+        tag
+      );
+    }) })
+  ] });
+};
+var TagsField_default = TagsField;
+
+// src/components/shared/patterns/forms/FormField/fields/TagsField/index.tsx
+var TagsField_default2 = TagsField_default;
+
+// src/components/shared/primitives/data-entry/Textarea/Textarea.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var SIZE_CLASSES6 = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base"
+};
+var INTENT_CLASSES4 = {
+  primary: "focus-visible:border-primary",
+  secondary: "focus-visible:border-secondary",
+  success: "focus-visible:border-success",
+  warning: "focus-visible:border-warning",
+  danger: "focus-visible:border-danger",
+  info: "focus-visible:border-info",
+  neutral: "focus-visible:border-primary"
+};
+var Textarea = forwardRef5(
+  (_a, ref) => {
+    var _b = _a, { className, intent = "neutral", size = "md" } = _b, props = __objRest(_b, ["className", "intent", "size"]);
+    const isInvalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    return /* @__PURE__ */ jsx22(
+      "textarea",
+      __spreadValues({
+        ref,
+        className: cx(
+          "w-full rounded-md border bg-background text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed",
+          SIZE_CLASSES6[size],
+          isInvalid ? "border-danger focus-visible:border-danger" : "border-border-strong",
+          !isInvalid && INTENT_CLASSES4[intent],
+          className
+        )
+      }, props)
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Textarea_default = Textarea;
+
+// src/components/shared/patterns/forms/FormField/fields/TextAreaField/TextAreaField.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var TextareaField = ({
+  field,
+  value,
+  error,
+  errorId,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx23(
+    Textarea_default,
+    {
+      id: field.name,
+      name: field.name,
+      value: getSafeValue(value),
+      placeholder: field.placeholder,
+      rows: 3,
+      onChange,
+      "aria-invalid": Boolean(error),
+      "aria-describedby": errorId,
+      intent: error ? "danger" : "neutral",
+      className: "mt-1"
+    }
+  );
+};
+var TextAreaField_default = TextareaField;
+
+// src/components/shared/patterns/forms/FormField/fields/TextAreaField/index.tsx
+var TextAreaField_default2 = TextAreaField_default;
+
+// src/components/shared/patterns/forms/FormField/fields/TextField/TextField.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var TextField = ({
+  field,
+  value,
+  error,
+  errorId,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx24(
+    Input_default,
+    {
+      id: field.name,
+      type: field.type === "number" /* NUMBER */ ? "number" : "text",
+      name: field.name,
+      value: getSafeValue(value),
+      placeholder: field.placeholder,
+      required: field.required,
+      pattern: field.pattern,
+      onChange,
+      "aria-invalid": Boolean(error),
+      "aria-describedby": errorId,
+      intent: error ? "danger" : "neutral",
+      className: "mt-1"
+    }
+  );
+};
+var TextField_default = TextField;
+
+// src/components/shared/patterns/forms/FormField/fields/TextField/index.tsx
+var TextField_default2 = TextField_default;
+export {
+  CheckboxField_default2 as CheckboxField,
+  CheckboxSearchField_default2 as CheckboxSearchField,
+  ColorField_default2 as ColorField,
+  ComboboxField_default as ComboboxField,
+  DatePickerField_default2 as DatePickerField,
+  FileUploadField_default as FileUploadField,
+  SelectField_default2 as SelectField,
+  SliderField_default as SliderField,
+  SwitchField_default2 as SwitchField,
+  TagsField_default2 as TagField,
+  TagsField_default2 as TagsField,
+  TextAreaField_default2 as TextAreaField,
+  TextField_default2 as TextField
+};