@floegence/floe-webapp-core 0.86.76 → 0.87.1

package/dist/components/ui/Slider.js

@@ -0,0 +1,28 @@
+import { spread as u, mergeProps as i, memo as m, template as s } from "solid-js/web";
+import { splitProps as c } from "solid-js";
+import { useFormControl as p } from "./formFieldContext.js";
+import { useFloeLocale as v } from "../../context/LocaleContext.js";
+import { cn as f } from "../../utils/cn.js";
+var d = /* @__PURE__ */ s("<input>");
+function h(r) {
+  const [e, a] = c(r, ["onValueChange", "valueText", "class"]), o = p(), l = v();
+  return (() => {
+    var t = d();
+    return u(t, i(o, a, {
+      type: "range",
+      get dir() {
+        return l.direction;
+      },
+      get "aria-valuetext"() {
+        return m(() => !!(e.valueText && r.value !== void 0))() ? e.valueText(Number(r.value)) : void 0;
+      },
+      get class() {
+        return f("w-full accent-primary cursor-pointer disabled:opacity-50", e.class);
+      },
+      onChange: (n) => e.onValueChange?.(n.currentTarget.valueAsNumber)
+    }), !1, !1), t;
+  })();
+}
+export {
+  h as Slider
+};

package/dist/components/ui/Switch.js

@@ -1,8 +1,9 @@
-import { insert as l, createComponent as a, effect as d, className as s, template as u, spread as z, mergeProps as T, setAttribute as H } from "solid-js/web";
-import { splitProps as I, createUniqueId as L, Show as o } from "solid-js";
+import { insert as l, createComponent as n, effect as u, className as s, template as h, spread as T, mergeProps as H, setAttribute as I } from "solid-js/web";
+import { splitProps as O, createUniqueId as j, Show as o } from "solid-js";
+import { useFormControl as q } from "./formFieldContext.js";
 import { cn as c } from "../../utils/cn.js";
-var j = /* @__PURE__ */ u('<div class="relative inline-flex items-center shrink-0"><input data-floe-choice-input type=checkbox role=switch class="sr-only peer"><div data-floe-surface=inset data-floe-surface-part=switch-track><div data-floe-surface=raised data-floe-surface-part=switch-thumb>'), v = /* @__PURE__ */ u("<span>"), q = /* @__PURE__ */ u('<div class="flex flex-col justify-center min-h-0">'), A = /* @__PURE__ */ u("<label>");
-const E = {
+var A = /* @__PURE__ */ h('<div class="relative inline-flex items-center shrink-0"><input><div data-floe-surface=inset data-floe-surface-part=switch-track><div data-floe-surface=raised data-floe-surface-part=switch-thumb>'), x = /* @__PURE__ */ h("<span>"), D = /* @__PURE__ */ h('<div class="flex flex-col justify-center min-h-0">'), F = /* @__PURE__ */ h("<label>");
+const L = {
   sm: {
     track: "w-7 h-4",
     thumb: "w-3 h-3",
@@ -28,77 +29,85 @@ const E = {
     trackHeight: 24
   }
 };
-function D(x) {
-  const [e, k] = I(x, ["checked", "onChange", "size", "label", "description", "labelPosition", "class", "disabled", "id"]), w = L(), C = () => e.id ?? w, _ = () => e.size ?? "md", i = () => E[_()], f = () => e.labelPosition ?? "right", $ = (t) => {
+function G(g) {
+  const d = q(), [e, w] = O(g, ["checked", "onChange", "size", "label", "description", "labelPosition", "class", "disabled", "id"]), C = j(), y = () => e.id ?? d.id ?? C, _ = () => e.size ?? "md", i = () => L[_()], b = () => e.labelPosition ?? "right", $ = (t) => {
     const r = t.target;
     e.onChange?.(r.checked);
-  }, y = () => (() => {
-    var t = j(), r = t.firstChild, h = r.nextSibling, S = h.firstChild;
-    return r.addEventListener("change", $), z(r, T({
+  }, P = () => (() => {
+    var t = A(), r = t.firstChild, f = r.nextSibling, z = f.firstChild;
+    return T(r, H(d, {
+      "data-floe-choice-input": "",
+      type: "checkbox",
+      role: "switch",
       get id() {
-        return C();
+        return y();
       },
       get checked() {
         return e.checked;
       },
       get disabled() {
-        return e.disabled;
+        return e.disabled ?? d.disabled;
       },
+      onClick: (a) => {
+        (g.readOnly ?? d.readOnly) && a.preventDefault();
+      },
+      onChange: $,
+      class: "sr-only peer",
       get "aria-checked"() {
         return e.checked;
       }
-    }, k), !1, !1), d((n) => {
-      var b = e.checked ? "true" : void 0, p = c("rounded-full cursor-pointer", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", i().track, e.checked ? "bg-primary" : "bg-input", e.disabled && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), m = c("rounded-full bg-background", "shadow-[var(--floe-elevation-raised)]", "transition-transform duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", i().thumb, "absolute top-0.5 left-0.5", e.checked ? i().thumbTranslate : "translate-x-0");
-      return b !== n.e && H(h, "data-floe-selected", n.e = b), p !== n.t && s(h, n.t = p), m !== n.a && s(S, n.a = m), n;
+    }, w), !1, !1), u((a) => {
+      var m = e.checked ? "true" : void 0, v = c("rounded-full cursor-pointer", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", i().track, e.checked ? "bg-primary" : "bg-input", e.disabled && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), k = c("rounded-full bg-background", "shadow-[var(--floe-elevation-raised)]", "transition-transform duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", i().thumb, "absolute top-0.5 left-0.5", e.checked ? i().thumbTranslate : "translate-x-0");
+      return m !== a.e && I(f, "data-floe-selected", a.e = m), v !== a.t && s(f, a.t = v), k !== a.a && s(z, a.a = k), a;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     }), t;
-  })(), g = () => a(o, {
+  })(), p = () => n(o, {
     get when() {
       return e.label || e.description;
     },
     get children() {
-      var t = q();
-      return l(t, a(o, {
+      var t = D();
+      return l(t, n(o, {
         get when() {
           return e.label;
         },
         get children() {
-          var r = v();
-          return l(r, () => e.label), d(() => s(r, c("text-foreground", i().label))), r;
+          var r = x();
+          return l(r, () => e.label), u(() => s(r, c("text-foreground", i().label))), r;
         }
-      }), null), l(t, a(o, {
+      }), null), l(t, n(o, {
         get when() {
           return e.description;
         },
         get children() {
-          var r = v();
-          return l(r, () => e.description), d(() => s(r, c("text-[var(--floe-ink-soft)]", i().description))), r;
+          var r = x();
+          return l(r, () => e.description), u(() => s(r, c("text-[var(--floe-ink-soft)]", i().description))), r;
         }
       }), null), t;
     }
-  }), P = () => e.description ? "items-start" : "items-center";
+  }), S = () => e.description ? "items-start" : "items-center";
   return (() => {
-    var t = A();
-    return l(t, a(o, {
+    var t = F();
+    return l(t, n(o, {
       get when() {
-        return f() === "left";
+        return b() === "left";
       },
       get children() {
-        return a(g, {});
+        return n(p, {});
       }
-    }), null), l(t, a(y, {}), null), l(t, a(o, {
+    }), null), l(t, n(P, {}), null), l(t, n(o, {
       get when() {
-        return f() === "right";
+        return b() === "right";
       },
       get children() {
-        return a(g, {});
+        return n(p, {});
       }
-    }), null), d(() => s(t, c("inline-flex gap-2 cursor-pointer select-none", P(), e.disabled && "opacity-50 cursor-not-allowed", e.class))), t;
+    }), null), u(() => s(t, c("inline-flex gap-2 cursor-pointer select-none", S(), e.disabled && "opacity-50 cursor-not-allowed", e.class))), t;
   })();
 }
 export {
-  D as Switch
+  G as Switch
 };

package/dist/components/ui/Table.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from 'solid-js';
+export declare function Table(props: JSX.HTMLAttributes<HTMLTableElement>): JSX.Element;
+export declare function TableHeader(props: JSX.HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
+export declare function TableBody(props: JSX.HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
+export declare function TableFooter(props: JSX.HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
+export declare function TableRow(props: JSX.HTMLAttributes<HTMLTableRowElement>): JSX.Element;
+export declare function TableHead(props: JSX.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element;
+export declare function TableCell(props: JSX.TdHTMLAttributes<HTMLTableCellElement>): JSX.Element;
+export declare function TableCaption(props: JSX.HTMLAttributes<HTMLTableCaptionElement>): JSX.Element;

package/dist/components/ui/Table.js

@@ -0,0 +1,97 @@
+import { spread as s, mergeProps as o, template as a } from "solid-js/web";
+import { splitProps as n } from "solid-js";
+import { cn as c } from "../../utils/cn.js";
+var u = /* @__PURE__ */ a("<table>"), f = /* @__PURE__ */ a("<thead>"), d = /* @__PURE__ */ a("<tbody>"), p = /* @__PURE__ */ a("<tfoot>"), b = /* @__PURE__ */ a("<tr>"), m = /* @__PURE__ */ a("<th scope=col>"), i = /* @__PURE__ */ a("<td>"), _ = /* @__PURE__ */ a("<caption>");
+function x(r) {
+  const [t, l] = n(r, ["class"]);
+  return (() => {
+    var e = u();
+    return s(e, o({
+      get class() {
+        return c("w-full caption-bottom border-collapse text-[length:var(--floe-type-body)]", t.class);
+      }
+    }, l), !1, !1), e;
+  })();
+}
+function T(r) {
+  const [t, l] = n(r, ["class"]);
+  return (() => {
+    var e = f();
+    return s(e, o({
+      get class() {
+        return c("border-b border-border text-muted-foreground", t.class);
+      }
+    }, l), !1, !1), e;
+  })();
+}
+function y(r) {
+  return (() => {
+    var t = d();
+    return s(t, r, !1, !1), t;
+  })();
+}
+function h(r) {
+  const [t, l] = n(r, ["class"]);
+  return (() => {
+    var e = p();
+    return s(e, o({
+      get class() {
+        return c("border-t border-border font-medium", t.class);
+      }
+    }, l), !1, !1), e;
+  })();
+}
+function w(r) {
+  const [t, l] = n(r, ["class"]);
+  return (() => {
+    var e = b();
+    return s(e, o({
+      get class() {
+        return c("border-b border-border last:border-0 hover:bg-muted/50 data-[selected=true]:bg-accent", t.class);
+      }
+    }, l), !1, !1), e;
+  })();
+}
+function C(r) {
+  const [t, l] = n(r, ["class"]);
+  return (() => {
+    var e = m();
+    return s(e, o({
+      get class() {
+        return c("px-3 py-2 text-start font-medium whitespace-nowrap", t.class);
+      }
+    }, l), !1, !1), e;
+  })();
+}
+function H(r) {
+  const [t, l] = n(r, ["class"]);
+  return (() => {
+    var e = i();
+    return s(e, o({
+      get class() {
+        return c("px-3 py-2 align-middle", t.class);
+      }
+    }, l), !1, !1), e;
+  })();
+}
+function P(r) {
+  const [t, l] = n(r, ["class"]);
+  return (() => {
+    var e = _();
+    return s(e, o({
+      get class() {
+        return c("mt-3 text-caption text-muted-foreground", t.class);
+      }
+    }, l), !1, !1), e;
+  })();
+}
+export {
+  x as Table,
+  y as TableBody,
+  P as TableCaption,
+  H as TableCell,
+  h as TableFooter,
+  C as TableHead,
+  T as TableHeader,
+  w as TableRow
+};

package/dist/components/ui/calendarModel.d.ts

@@ -0,0 +1,6 @@
+/** Calendar dates are Gregorian civil dates, never instants or implicit UTC. */
+export declare function parseCalendarDate(value: string): Date;
+export declare function formatCalendarDate(date: Date): string;
+export declare function addCalendarDays(value: string, days: number): string;
+export declare function addCalendarMonths(value: string, months: number): string;
+export declare function calendarDays(month: string, weekStartsOn?: number): string[];

package/dist/components/ui/calendarModel.js

@@ -0,0 +1,37 @@
+function o(e) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(e))
+    throw new Error("Expected a calendar date in YYYY-MM-DD format");
+  const [n, t, r] = e.split("-").map(Number), a = /* @__PURE__ */ new Date(0);
+  if (a.setUTCHours(12, 0, 0, 0), a.setUTCFullYear(n, t - 1, r), a.getUTCFullYear() !== n || a.getUTCMonth() !== t - 1 || a.getUTCDate() !== r)
+    throw new Error("Invalid calendar date");
+  return a;
+}
+function s(e) {
+  return String(e.getUTCFullYear()).padStart(4, "0") + "-" + String(e.getUTCMonth() + 1).padStart(2, "0") + "-" + String(e.getUTCDate()).padStart(2, "0");
+}
+function C(e, n) {
+  const t = o(e);
+  return t.setUTCDate(t.getUTCDate() + n), s(t);
+}
+function T(e, n) {
+  const t = o(e), r = t.getUTCDate();
+  t.setUTCDate(1), t.setUTCMonth(t.getUTCMonth() + n);
+  const a = new Date(t.getTime());
+  return a.setUTCMonth(a.getUTCMonth() + 1), a.setUTCDate(0), t.setUTCDate(Math.min(r, a.getUTCDate())), s(t);
+}
+function U(e, n = 0) {
+  if (!Number.isInteger(n) || n < 0 || n > 6)
+    throw new Error("weekStartsOn must be between 0 and 6");
+  const t = o(e.slice(0, 7) + "-01"), r = (t.getUTCDay() - n + 7) % 7;
+  return Array.from(
+    { length: 42 },
+    (a, d) => C(s(t), d - r)
+  );
+}
+export {
+  C as addCalendarDays,
+  T as addCalendarMonths,
+  U as calendarDays,
+  s as formatCalendarDate,
+  o as parseCalendarDate
+};

package/dist/components/ui/controllable.d.ts

@@ -0,0 +1,7 @@
+import { type Accessor } from 'solid-js';
+/** Controlled callers remain authoritative; omitted values use local state. */
+export declare function createControllableValue<T>(options: {
+    value: Accessor<T | undefined>;
+    defaultValue: T;
+    onChange: (value: T) => void;
+}): readonly [() => T, (next: T) => void];

package/dist/components/ui/controllable.js

@@ -0,0 +1,10 @@
+import { createSignal as n } from "solid-js";
+function f(e) {
+  const [l, r] = n(e.defaultValue), t = () => e.value() ?? l();
+  return [t, (a) => {
+    Object.is(a, t()) || (e.value() === void 0 && r(() => a), e.onChange(a));
+  }];
+}
+export {
+  f as createControllableValue
+};

package/dist/components/ui/dataTableModel.d.ts

@@ -0,0 +1,18 @@
+export interface TableSort {
+    column: string;
+    direction: 'asc' | 'desc';
+}
+export interface TableModelOptions<T> {
+    rows: readonly T[];
+    filter?: (row: T) => boolean;
+    compare?: (left: T, right: T) => number;
+    page?: number;
+    pageSize?: number;
+}
+/** Pure local projection. Remote pagination and authorization remain host owned. */
+export declare function createTableModel<T>(options: TableModelOptions<T>): {
+    rows: T[];
+    totalRows: number;
+    totalPages: number;
+    page: number;
+};

package/dist/components/ui/dataTableModel.js

@@ -0,0 +1,18 @@
+function s(e) {
+  const l = e.filter ? e.rows.filter(e.filter) : [...e.rows], r = e.compare ? l.sort(e.compare) : l, t = e.pageSize ?? Math.max(1, r.length);
+  if (!Number.isInteger(t) || t < 1)
+    throw new Error("Table pageSize must be a positive integer");
+  const i = Math.max(1, Math.ceil(r.length / t)), a = e.page ?? 1;
+  if (!Number.isInteger(a) || a < 1)
+    throw new Error("Table page must be a positive integer");
+  const g = Math.min(a, i);
+  return {
+    rows: r.slice((g - 1) * t, g * t),
+    totalRows: r.length,
+    totalPages: i,
+    page: g
+  };
+}
+export {
+  s as createTableModel
+};

package/dist/components/ui/formFieldContext.d.ts

@@ -0,0 +1,26 @@
+import { type Accessor } from 'solid-js';
+export interface FormFieldBinding {
+    id: Accessor<string>;
+    name: Accessor<string | undefined>;
+    error: Accessor<string | undefined>;
+    required: Accessor<boolean | undefined>;
+    disabled: Accessor<boolean | undefined>;
+    readOnly: Accessor<boolean | undefined>;
+    descriptionIds: Accessor<string[]>;
+    messageIds: Accessor<string[]>;
+    registerDescription: (id: string) => () => void;
+    registerMessage: (id: string, error: Accessor<string | undefined>) => () => void;
+}
+export declare const FormFieldContext: import("solid-js").Context<FormFieldBinding | undefined>;
+export declare function useFormField(): FormFieldBinding | undefined;
+export declare function joinAriaIds(...values: (string | undefined)[]): string | undefined;
+/** Spread these reactive properties on a native or third-party field control. */
+export declare function useFormControl(): {
+    readonly id: string | undefined;
+    readonly name: string | undefined;
+    readonly required: boolean | undefined;
+    readonly disabled: boolean | undefined;
+    readonly readOnly: boolean | undefined;
+    readonly 'aria-invalid': true | undefined;
+    readonly 'aria-describedby': string | undefined;
+};

package/dist/components/ui/formFieldContext.js

@@ -0,0 +1,40 @@
+import { useContext as t, createContext as n } from "solid-js";
+const i = n();
+function o() {
+  return t(i);
+}
+function d(...e) {
+  return [...new Set(e.flatMap((r) => r?.split(/\s+/).filter(Boolean) ?? []))].join(" ") || void 0;
+}
+function a() {
+  const e = o();
+  return {
+    get id() {
+      return e?.id();
+    },
+    get name() {
+      return e?.name();
+    },
+    get required() {
+      return e?.required();
+    },
+    get disabled() {
+      return e?.disabled();
+    },
+    get readOnly() {
+      return e?.readOnly();
+    },
+    get "aria-invalid"() {
+      return e?.error() ? !0 : void 0;
+    },
+    get "aria-describedby"() {
+      return d(...e?.descriptionIds() ?? [], ...e?.messageIds() ?? []);
+    }
+  };
+}
+export {
+  i as FormFieldContext,
+  d as joinAriaIds,
+  a as useFormControl,
+  o as useFormField
+};

package/dist/components/ui/index.d.ts

@@ -17,7 +17,7 @@ export { resolveFloatingWindowViewport, type FloatingWindowRect, type FloatingWi
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';
 export { SurfaceFloatingLayer, type SurfaceFloatingLayerPosition, type SurfaceFloatingLayerProps, type SurfaceFloatingLayerSize, } from './SurfaceFloatingLayer';
 export { Tooltip, type TooltipProps } from './Tooltip';
-export { Popover, type PopoverProps, type PopoverPlacement, } from './Popover';
+export { Popover, type PopoverProps, type PopoverTriggerProps, type PopoverPlacement, } from './Popover';
 export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
 export { startPointerSession, type PointerSessionController, type PointerSessionEndEvent, type PointerSessionEndReason, type PointerSessionSnapshot, type StartPointerSessionOptions, } from './pointerSession';
@@ -51,3 +51,15 @@ export { SettingsLayout, SettingsNavigation, SettingsSection, SettingsList, Sett
 export { KeyedFor, type KeyedForProps } from './KeyedFor';
 export { DirectoryFavoriteButton } from './picker/DirectoryFavorites';
 export type { DirectoryFavorites } from './picker/DirectoryFavorites';
+export { useFormControl, useFormField, joinAriaIds, type FormFieldBinding } from './formFieldContext';
+export { createControllableValue } from './controllable';
+export { Combobox, MultiSelect, type SelectOption, type SelectBaseProps, type MultiSelectProps } from './Select';
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from './Table';
+export { DataTable, type DataTableProps, type DataTableColumn } from './DataTable';
+export { createTableModel, type TableSort, type TableModelOptions } from './dataTableModel';
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './Breadcrumb';
+export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';
+export { Slider, type SliderProps } from './Slider';
+export { Calendar, type CalendarProps } from './Calendar';
+export { DatePicker, DateRangePicker, type DatePickerProps, type DateRangePickerProps, type DateRange } from './DatePicker';
+export { parseCalendarDate, formatCalendarDate, addCalendarDays, addCalendarMonths, calendarDays } from './calendarModel';