@geomak/ui 5.6.0 → 5.7.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef, useId, useLayoutEffect } from 'react';
+import React8, { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef, useId, useLayoutEffect, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -40,7 +40,7 @@ var FleetIcon = ({ color = "#fff", size = 30 }) => /* @__PURE__ */ jsxs("svg", {
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_327_836", children: /* @__PURE__ */ jsx("rect", { width: "30", height: "30", fill: color }) }) })
 ] });
 var Performance = ({ color = "#fff", size = 30 }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5.64 25.515H24.36C26.0709 23.3842 27.0024 20.7327 27 18C27 11.385 21.63 6 15 6C8.37 6 3 11.385 3 18C3 20.85 3.99 23.445 5.64 25.515ZM13.5 9C13.5 8.175 14.175 7.5 15 7.5C15.825 7.5 16.5 8.175 16.5 9C16.5 9.84 15.825 10.5 15 10.5C14.175 10.5 13.5 9.84 13.5 9ZM6 12C6 11.175 6.675 10.5 7.5 10.5C8.325 10.5 9 11.175 9 12C9 12.84 8.325 13.5 7.5 13.5C6.675 13.5 6 12.84 6 12ZM12.78 17.1C14.04 15.855 22.545 11.85 22.545 11.85C22.545 11.85 18.555 20.37 17.31 21.615C16.05 22.875 14.04 22.875 12.78 21.615C12.1819 21.016 11.8459 20.204 11.8459 19.3575C11.8459 18.511 12.1819 17.699 12.78 17.1ZM4.5 19.5C4.5 18.675 5.175 18 6 18C6.825 18 7.5 18.675 7.5 19.5C7.5 20.34 6.825 21 6 21C5.175 21 4.5 20.34 4.5 19.5ZM13.5 19.5C13.5 18.675 14.175 18 15 18C15.825 18 16.5 18.675 16.5 19.5C16.5 20.34 15.825 21 15 21C14.175 21 13.5 20.34 13.5 19.5ZM22.5 19.5C22.5 18.675 23.175 18 24 18C24.825 18 25.5 18.675 25.5 19.5C25.5 20.34 24.825 21 24 21C23.175 21 22.5 20.34 22.5 19.5Z", fill: color }) });
-var Map = ({ color = "#fff", size = 30 }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 34 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+var Map2 = ({ color = "#fff", size = 30 }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 34 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_327_830)", children: /* @__PURE__ */ jsx("path", { d: "M16.875 0C12.7975 0 9.49219 3.30527 9.49219 7.38281C9.49219 10.6793 14.3174 16.6875 16.166 18.8684C16.5404 19.3102 17.2102 19.3102 17.584 18.8684C19.4326 16.6875 24.2578 10.6793 24.2578 7.38281C24.2578 3.30527 20.9525 0 16.875 0ZM16.875 9.84375C15.5156 9.84375 14.4141 8.74219 14.4141 7.38281C14.4141 6.02344 15.5156 4.92188 16.875 4.92188C18.2344 4.92188 19.3359 6.02344 19.3359 7.38281C19.3359 8.74219 18.2344 9.84375 16.875 9.84375ZM1.17891 12.6533C0.830964 12.7925 0.532694 13.0327 0.322564 13.343C0.112435 13.6533 8.33325e-05 14.0194 0 14.3941L0 29.0613C0 29.7246 0.669727 30.1781 1.28555 29.932L9.375 26.25V12.593C8.85703 11.6566 8.4334 10.7449 8.12988 9.87305L1.17891 12.6533ZM16.875 21.0744C16.0506 21.0744 15.2707 20.7123 14.7357 20.0807C13.5838 18.7213 12.3586 17.1732 11.25 15.5854V26.2494L22.5 29.9994V15.5859C21.3914 17.1732 20.1668 18.7219 19.0143 20.0812C18.4793 20.7123 17.6994 21.0744 16.875 21.0744ZM32.4645 9.44297L24.375 13.125V30L32.5711 26.7217C32.9191 26.5826 33.2174 26.3424 33.4275 26.0321C33.6377 25.7218 33.75 25.3556 33.75 24.9809V10.3137C33.75 9.65039 33.0803 9.19688 32.4645 9.44297Z", fill: color }) }),
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_327_830", children: /* @__PURE__ */ jsx("rect", { width: "33.75", height: "30", fill: color }) }) })
 ] });
@@ -127,7 +127,7 @@ Icon.Minus = Minus;
 Icon.Dashboard = Dashboard;
 Icon.FleetIcon = FleetIcon;
 Icon.Performance = Performance;
-Icon.Map = Map;
+Icon.Map = Map2;
 Icon.CharterParty = CharterParty;
 Icon.Compliance = Compliance;
 Icon.Applications = Applications;
@@ -5885,6 +5885,438 @@ function ColorPicker({
   ] });
 }
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
+// src/form/path.ts
+function deepClone(v) {
+  if (v === null || typeof v !== "object") return v;
+  if (v instanceof Date) return new Date(v.getTime());
+  if (Array.isArray(v)) return v.map(deepClone);
+  const out = {};
+  for (const k in v) out[k] = deepClone(v[k]);
+  return out;
+}
+function getPath(obj, path) {
+  if (!path) return obj;
+  const parts = path.split(".");
+  let cur = obj;
+  for (const p of parts) {
+    if (cur == null || typeof cur !== "object") return void 0;
+    cur = cur[p];
+  }
+  return cur;
+}
+function setPath(obj, path, value) {
+  const parts = path.split(".");
+  const root = Array.isArray(obj) ? [...obj] : { ...obj ?? {} };
+  let cur = root;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const p = parts[i];
+    const nextIsIndex = /^\d+$/.test(parts[i + 1]);
+    const child = cur[p];
+    const next = Array.isArray(child) ? [...child] : child && typeof child === "object" ? { ...child } : nextIsIndex ? [] : {};
+    cur[p] = next;
+    cur = next;
+  }
+  cur[parts[parts.length - 1]] = value;
+  return root;
+}
+
+// src/form/validate.ts
+function isEmpty(v) {
+  return v == null || v === "" || v === false || Array.isArray(v) && v.length === 0;
+}
+var boundValue = (b) => typeof b === "number" ? b : b.value;
+var boundMessage = (b, fallback) => typeof b === "number" ? fallback : b.message ?? fallback;
+function isRequired(rules) {
+  if (!rules) return false;
+  const list = Array.isArray(rules) ? rules : [rules];
+  return list.some((r) => !!r.required);
+}
+async function runFieldRules(value, rules, values) {
+  if (!rules) return void 0;
+  const list = Array.isArray(rules) ? rules : [rules];
+  for (const rule of list) {
+    if (rule.required && isEmpty(value)) {
+      return typeof rule.required === "string" ? rule.required : rule.message ?? "This field is required";
+    }
+    if (isEmpty(value)) {
+      if (rule.validate) {
+        const res = await rule.validate(value, values);
+        if (res) return typeof res === "string" ? res : rule.message ?? "Invalid value";
+      }
+      continue;
+    }
+    if (rule.pattern) {
+      const re = rule.pattern instanceof RegExp ? rule.pattern : rule.pattern.value;
+      const msg = rule.pattern instanceof RegExp ? rule.message ?? "Invalid format" : rule.pattern.message ?? rule.message ?? "Invalid format";
+      if (typeof value === "string" && !re.test(value)) return msg;
+    }
+    if (rule.min != null && typeof value === "number") {
+      const m = boundValue(rule.min);
+      if (value < m) return boundMessage(rule.min, rule.message ?? `Must be at least ${m}`);
+    }
+    if (rule.max != null && typeof value === "number") {
+      const m = boundValue(rule.max);
+      if (value > m) return boundMessage(rule.max, rule.message ?? `Must be at most ${m}`);
+    }
+    if (rule.minLength != null) {
+      const len = value?.length;
+      const m = boundValue(rule.minLength);
+      if (typeof len === "number" && len < m)
+        return boundMessage(rule.minLength, rule.message ?? `Must be at least ${m} characters`);
+    }
+    if (rule.maxLength != null) {
+      const len = value?.length;
+      const m = boundValue(rule.maxLength);
+      if (typeof len === "number" && len > m)
+        return boundMessage(rule.maxLength, rule.message ?? `Must be at most ${m} characters`);
+    }
+    if (rule.validate) {
+      const res = await rule.validate(value, values);
+      if (res) return typeof res === "string" ? res : rule.message ?? "Invalid value";
+    }
+  }
+  return void 0;
+}
+var patterns = {
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  url: /^https?:\/\/[^\s/$.?#].[^\s]*$/i,
+  // Loose international phone: + and 7-15 digits, spaces/dashes allowed.
+  phone: /^\+?[\d\s-]{7,15}$/,
+  // Digits only.
+  digits: /^\d+$/
+};
+
+// src/form/store.ts
+var FormStore = class {
+  listeners = /* @__PURE__ */ new Set();
+  fieldCache = /* @__PURE__ */ new Map();
+  values;
+  errors = {};
+  touched = {};
+  submitted = false;
+  validating = false;
+  initialValues;
+  rules;
+  validateOn;
+  // Field-array key bookkeeping (stable React keys across reorder/removal).
+  keys = {};
+  keySeq = 1;
+  // Root snapshot — a new ref on every change, for form-level subscribers.
+  rootSnap = { v: 0 };
+  constructor(opts = {}) {
+    this.initialValues = deepClone(opts.initialValues ?? {});
+    this.values = deepClone(opts.initialValues ?? {});
+    this.rules = { ...opts.rules ?? {} };
+    this.validateOn = opts.validateOn ?? ["onChange", "onBlur", "onSubmit"];
+  }
+  // ── subscription ────────────────────────────────────────────────────────
+  subscribe = (l) => {
+    this.listeners.add(l);
+    return () => {
+      this.listeners.delete(l);
+    };
+  };
+  emit() {
+    this.rootSnap = { v: this.rootSnap.v + 1 };
+    this.listeners.forEach((l) => l());
+  }
+  getRootSnapshot = () => this.rootSnap;
+  getFieldSnapshot = (name) => {
+    const value = getPath(this.values, name);
+    const error = this.errors[name];
+    const showError = (!!this.touched[name] || this.submitted) && error != null;
+    const prev = this.fieldCache.get(name);
+    if (prev && Object.is(prev.value, value) && prev.error === error && prev.showError === showError) {
+      return prev.snap;
+    }
+    const snap = { value, error, showError };
+    this.fieldCache.set(name, { value, error, showError, snap });
+    return snap;
+  };
+  // ── rule registry (for dynamic / array fields) ──────────────────────────
+  setRule(name, rules) {
+    if (rules == null) delete this.rules[name];
+    else this.rules[name] = rules;
+  }
+  removeRule(name) {
+    delete this.rules[name];
+  }
+  getRule(name) {
+    return this.rules[name];
+  }
+  // ── reads ────────────────────────────────────────────────────────────────
+  getValues = () => this.values;
+  getValue = (name) => getPath(this.values, name);
+  get isValid() {
+    return Object.values(this.errors).every((e) => !e);
+  }
+  // ── writes ────────────────────────────────────────────────────────────────
+  setValue = (name, value, opts = {}) => {
+    this.values = setPath(this.values, name, value);
+    if (opts.touch) this.touched = { ...this.touched, [name]: true };
+    this.emit();
+    const shouldValidate = opts.validate ?? this.validateOn.includes("onChange");
+    if (shouldValidate) void this.validateField(name);
+  };
+  setValues = (patch, opts = {}) => {
+    for (const k of Object.keys(patch)) this.values = setPath(this.values, k, patch[k]);
+    this.emit();
+    if (opts.validate) void this.validateAll();
+  };
+  setError = (name, error) => {
+    if (this.errors[name] === error) return;
+    this.errors = { ...this.errors, [name]: error || void 0 };
+    this.emit();
+  };
+  touch = (name, opts = {}) => {
+    if (!this.touched[name]) {
+      this.touched = { ...this.touched, [name]: true };
+      this.emit();
+    }
+    if (opts.validate ?? this.validateOn.includes("onBlur")) void this.validateField(name);
+  };
+  setSubmitted = (v) => {
+    this.submitted = v;
+    this.emit();
+  };
+  // ── validation ─────────────────────────────────────────────────────────────
+  async validateField(name) {
+    const err = await runFieldRules(getPath(this.values, name), this.rules[name], this.values);
+    this.setError(name, err);
+    return err;
+  }
+  async validateAll() {
+    this.validating = true;
+    this.emit();
+    const names = Object.keys(this.rules);
+    const entries = await Promise.all(
+      names.map(async (n) => [n, await runFieldRules(getPath(this.values, n), this.rules[n], this.values)])
+    );
+    const errors = {};
+    for (const [n, e] of entries) errors[n] = e;
+    this.errors = errors;
+    this.validating = false;
+    this.emit();
+    return errors;
+  }
+  reset = (values) => {
+    this.values = deepClone(values ?? this.initialValues);
+    this.errors = {};
+    this.touched = {};
+    this.submitted = false;
+    this.keys = {};
+    this.fieldCache.clear();
+    this.emit();
+  };
+  // ── field arrays ───────────────────────────────────────────────────────────
+  getKeys(name) {
+    const arr = getPath(this.values, name) ?? [];
+    let keys = this.keys[name];
+    if (!keys || keys.length !== arr.length) {
+      keys = arr.map((_, i) => keys && keys[i] != null ? keys[i] : this.keySeq++);
+      this.keys[name] = keys;
+    }
+    return keys;
+  }
+  arrayAppend = (name, item = {}) => {
+    const arr = [...getPath(this.values, name) ?? []];
+    arr.push(item);
+    this.keys[name] = [...this.getKeys(name), this.keySeq++];
+    this.setValue(name, arr, { validate: false });
+  };
+  arrayRemove = (name, index) => {
+    const arr = [...getPath(this.values, name) ?? []];
+    arr.splice(index, 1);
+    const k = [...this.getKeys(name)];
+    k.splice(index, 1);
+    this.keys[name] = k;
+    this.clearBranch(name);
+    this.setValue(name, arr, { validate: false });
+  };
+  arrayMove = (name, from, to) => {
+    const arr = [...getPath(this.values, name) ?? []];
+    if (from < 0 || to < 0 || from >= arr.length || to >= arr.length) return;
+    const [moved] = arr.splice(from, 1);
+    arr.splice(to, 0, moved);
+    const k = [...this.getKeys(name)];
+    const [mk] = k.splice(from, 1);
+    k.splice(to, 0, mk);
+    this.keys[name] = k;
+    this.clearBranch(name);
+    this.setValue(name, arr, { validate: false });
+  };
+  /** Drop any errors/touched flags under `name.` — used when an array shifts. */
+  clearBranch(name) {
+    const prefix = name + ".";
+    const errors = {};
+    for (const k of Object.keys(this.errors)) if (!k.startsWith(prefix)) errors[k] = this.errors[k];
+    const touched = {};
+    for (const k of Object.keys(this.touched)) if (!k.startsWith(prefix)) touched[k] = this.touched[k];
+    this.errors = errors;
+    this.touched = touched;
+  }
+};
+
+// src/form/bindings.ts
+var getTarget = (arg) => {
+  const t = arg?.target;
+  return t && typeof t === "object" ? t : void 0;
+};
+var ADAPTERS = {
+  value: { prop: "value", toValue: (v) => v, applyEmpty: false, empty: void 0 },
+  native: { prop: "value", toValue: (e) => getTarget(e)?.value, applyEmpty: true, empty: "" },
+  checked: { prop: "checked", toValue: (e) => getTarget(e)?.checked, applyEmpty: true, empty: false },
+  target: { prop: "value", toValue: (e) => getTarget(e)?.value, applyEmpty: false, empty: void 0 }
+};
+function buildBindings(store, name, kind, snap) {
+  const a = ADAPTERS[kind];
+  const raw = snap.value;
+  const value = a.applyEmpty ? raw ?? a.empty : raw;
+  return {
+    name,
+    id: name,
+    htmlFor: name,
+    required: isRequired(store.getRule(name)) || void 0,
+    errorMessage: snap.showError ? snap.error : void 0,
+    [a.prop]: value,
+    onChange: (arg) => store.setValue(name, a.toValue(arg), { touch: true }),
+    onBlur: () => store.touch(name)
+  };
+}
+
+// src/form/useForm.ts
+function useForm(options = {}) {
+  const ref = useRef(null);
+  if (ref.current === null) ref.current = new FormStore(options);
+  const store = ref.current;
+  useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
+  const make = useCallback(
+    (kind) => (name, rules) => {
+      if (rules !== void 0) store.setRule(name, rules);
+      return buildBindings(store, name, kind, store.getFieldSnapshot(name));
+    },
+    [store]
+  );
+  return {
+    store,
+    values: store.values,
+    errors: store.errors,
+    touched: store.touched,
+    submitted: store.submitted,
+    isSubmitting: store.validating,
+    isValid: store.isValid,
+    getValue: store.getValue,
+    getValues: store.getValues,
+    setValue: (name, value) => store.setValue(name, value),
+    setValues: (patch) => store.setValues(patch),
+    setError: store.setError,
+    validateField: (name) => store.validateField(name),
+    validateAll: () => store.validateAll(),
+    reset: store.reset,
+    field: make("value"),
+    fieldNative: make("native"),
+    fieldChecked: make("checked"),
+    fieldTarget: make("target")
+  };
+}
+var FormContext = createContext(null);
+function useFormStore() {
+  const store = useContext(FormContext);
+  if (!store) {
+    throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
+  }
+  return store;
+}
+function Form({
+  form,
+  onFinish,
+  onFinishFailed,
+  action,
+  children,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const bypass = useRef(false);
+  const handleSubmit = async (e) => {
+    if (bypass.current) {
+      bypass.current = false;
+      return;
+    }
+    e.preventDefault();
+    const store = form.store;
+    store.setSubmitted(true);
+    const errors = await store.validateAll();
+    const hasError = Object.values(errors).some(Boolean);
+    if (hasError) {
+      onFinishFailed?.(errors, store.getValues());
+      focusFirstError(ref.current, errors);
+      return;
+    }
+    if (onFinish) {
+      await onFinish(store.getValues());
+      return;
+    }
+    if (typeof action === "function") {
+      action(new FormData(ref.current));
+      return;
+    }
+    if (typeof action === "string") {
+      bypass.current = true;
+      ref.current.requestSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: form.store, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      ref,
+      noValidate: true,
+      action: typeof action === "string" ? action : void 0,
+      onSubmit: handleSubmit,
+      ...rest,
+      children
+    }
+  ) });
+}
+function focusFirstError(formEl, errors) {
+  if (!formEl) return;
+  const firstName = Object.keys(errors).find((k) => errors[k]);
+  if (!firstName) return;
+  const el = formEl.querySelector(`[name="${CSS.escape(firstName)}"], #${CSS.escape(firstName)}`);
+  el?.focus();
+}
+function useFormField(name, options = {}) {
+  const store = useFormStore();
+  const { kind = "value", rules } = options;
+  if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
+  useEffect(() => {
+    return () => {
+      if (rules !== void 0) store.removeRule(name);
+    };
+  }, [store, name]);
+  const snap = useSyncExternalStore(
+    store.subscribe,
+    () => store.getFieldSnapshot(name)
+  );
+  return buildBindings(store, name, kind, snap);
+}
+function FormField({ name, kind, rules, children }) {
+  const field = useFormField(name, { kind, rules });
+  return /* @__PURE__ */ jsx(Fragment, { children: children(field) });
+}
+function useFieldArray(name) {
+  const store = useFormStore();
+  useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
+  const arr = store.getValue(name) ?? [];
+  const keys = store.getKeys(name);
+  return {
+    fields: arr.map((_, i) => ({ key: keys[i], name: `${name}.${i}`, index: i })),
+    append: (item = {}) => store.arrayAppend(name, item),
+    remove: (index) => store.arrayRemove(name, index),
+    move: (from, to) => store.arrayMove(name, from, to),
+    replace: (items) => store.setValue(name, items, { validate: false })
+  };
+}
+
+export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, isRequired, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map