@floegence/floe-webapp-core 0.86.75 → 0.87.0

package/dist/components/index.d.ts

@@ -6,3 +6,5 @@ export * from './launchpad';
 export * from './file-browser';
 export * from './chat';
 export { Tag, type TagProps, type TagVariant, type TagSize } from './ui';
+export { Calendar } from './icons';
+export { Breadcrumb, type BreadcrumbProps } from './file-browser';

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

@@ -0,0 +1,16 @@
+import { type JSX } from 'solid-js';
+export interface AccordionItem {
+    id: string;
+    title: JSX.Element;
+    content: JSX.Element;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: readonly AccordionItem[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    multiple?: boolean;
+    class?: string;
+}
+export declare function Accordion(props: AccordionProps): JSX.Element;

package/dist/components/ui/Accordion.js

@@ -0,0 +1,59 @@
+import { insert as u, createComponent as S, effect as V, setAttribute as d, className as U, template as $, use as j, delegateEvents as I } from "solid-js/web";
+import { createUniqueId as L, For as N } from "solid-js";
+import { createControllableValue as O } from "./controllable.js";
+import { useFloeLocale as _ } from "../../context/LocaleContext.js";
+var z = /* @__PURE__ */ $("<div>"), B = /* @__PURE__ */ $('<section class="border-b border-border"><h3><button type=button data-accordion-trigger class="flex w-full items-center justify-between gap-3 py-3 text-start font-medium focus-visible:outline focus-visible:outline-2 disabled:opacity-50"><span aria-hidden=true></span></button></h3><div><div class=pb-3>');
+function P(l) {
+  const D = _(), E = L(), [v, q] = O({
+    value: () => l.value,
+    defaultValue: l.defaultValue ?? [],
+    onChange: (t) => l.onValueChange?.(t)
+  });
+  let f;
+  const F = (t) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(t.key)) return;
+    const i = Array.from(f?.querySelectorAll("[data-accordion-trigger]:not(:disabled)") ?? []), r = i.indexOf(t.target);
+    if (r < 0) return;
+    t.preventDefault();
+    const a = t.key === "Home" ? 0 : t.key === "End" ? i.length - 1 : (r + (t.key === "ArrowDown" ? 1 : -1) + i.length) % i.length;
+    i[a]?.focus();
+  };
+  return (() => {
+    var t = z();
+    t.$$keydown = F;
+    var i = f;
+    return typeof i == "function" ? j(i, t) : f = t, u(t, S(N, {
+      get each() {
+        return l.items;
+      },
+      children: (r, a) => {
+        const o = () => E + "-" + a(), s = () => v().includes(r.id);
+        return (() => {
+          var b = B(), g = b.firstChild, n = g.firstChild, h = n.firstChild, c = g.nextSibling, H = c.firstChild;
+          return n.$$click = () => q(s() ? v().filter((e) => e !== r.id) : l.multiple ? [...v(), r.id] : [r.id]), u(n, () => r.title, h), u(h, () => s() ? "−" : "+"), u(H, () => r.content), V((e) => {
+            var m = o() + "-trigger", y = r.disabled, w = s(), x = o() + "-panel", k = o() + "-panel", C = o() + "-trigger", A = !s();
+            return m !== e.e && d(n, "id", e.e = m), y !== e.t && (n.disabled = e.t = y), w !== e.a && d(n, "aria-expanded", e.a = w), x !== e.o && d(n, "aria-controls", e.o = x), k !== e.i && d(c, "id", e.i = k), C !== e.n && d(c, "aria-labelledby", e.n = C), A !== e.s && (c.hidden = e.s = A), e;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+          }), b;
+        })();
+      }
+    })), V((r) => {
+      var a = D.direction, o = l.class;
+      return a !== r.e && d(t, "dir", r.e = a), o !== r.t && U(t, r.t = o), r;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
+  })();
+}
+I(["keydown", "click"]);
+export {
+  P as Accordion
+};

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

@@ -0,0 +1,14 @@
+import { type JSX } from 'solid-js';
+export interface BreadcrumbItem {
+    id: string;
+    label: string;
+    href?: string;
+    onSelect?: () => void;
+}
+export interface BreadcrumbProps {
+    items: readonly BreadcrumbItem[];
+    ariaLabel?: string;
+    class?: string;
+    separator?: JSX.Element;
+}
+export declare function Breadcrumb(props: BreadcrumbProps): JSX.Element;

package/dist/components/ui/Breadcrumb.js

@@ -0,0 +1,72 @@
+import { insert as t, createComponent as c, effect as g, setAttribute as s, className as b, template as n, delegateEvents as x } from "solid-js/web";
+import { For as $, Show as d } from "solid-js";
+import { useFloeLocale as _ } from "../../context/LocaleContext.js";
+import { cn as w } from "../../utils/cn.js";
+var p = /* @__PURE__ */ n('<nav><ol class="flex flex-wrap items-center gap-1 text-[length:var(--floe-type-control)]">'), k = /* @__PURE__ */ n("<span aria-hidden=true class=text-muted-foreground>"), y = /* @__PURE__ */ n("<a>"), C = /* @__PURE__ */ n('<li class="flex min-w-0 items-center gap-1">'), F = /* @__PURE__ */ n("<span aria-current=page class=break-words>"), L = /* @__PURE__ */ n('<button type=button class="rounded-sm px-1 text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2">');
+function N(a) {
+  const v = _();
+  return (() => {
+    var o = p(), h = o.firstChild;
+    return t(h, c($, {
+      get each() {
+        return a.items;
+      },
+      children: (r, u) => (() => {
+        var l = C();
+        return t(l, c(d, {
+          get when() {
+            return u() > 0;
+          },
+          get children() {
+            var e = k();
+            return t(e, () => a.separator ?? "/"), e;
+          }
+        }), null), t(l, c(d, {
+          get when() {
+            return u() < a.items.length - 1;
+          },
+          get fallback() {
+            return (() => {
+              var e = F();
+              return t(e, () => r.label), e;
+            })();
+          },
+          get children() {
+            return c(d, {
+              get when() {
+                return r.href;
+              },
+              get fallback() {
+                return (() => {
+                  var e = L();
+                  return e.$$click = () => r.onSelect?.(), t(e, () => r.label), e;
+                })();
+              },
+              get children() {
+                var e = y();
+                return t(e, () => r.label), g((i) => {
+                  var f = r.href, m = w("rounded-sm px-1 text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2");
+                  return f !== i.e && s(e, "href", i.e = f), m !== i.t && b(e, i.t = m), i;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), e;
+              }
+            });
+          }
+        }), null), l;
+      })()
+    })), g((r) => {
+      var u = a.ariaLabel ?? v.t("breadcrumb"), l = v.direction, e = a.class;
+      return u !== r.e && s(o, "aria-label", r.e = u), l !== r.t && s(o, "dir", r.t = l), e !== r.a && b(o, r.a = e), r;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), o;
+  })();
+}
+x(["click"]);
+export {
+  N as Breadcrumb
+};

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

@@ -0,0 +1,17 @@
+export interface CalendarProps {
+    autoFocus?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (date: string) => void;
+    month?: string;
+    defaultMonth?: string;
+    onMonthChange?: (month: string) => void;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    isDateDisabled?: (date: string) => boolean;
+    weekStartsOn?: number;
+    ariaLabel?: string;
+    class?: string;
+}
+export declare function Calendar(props: CalendarProps): import("solid-js").JSX.Element;

package/dist/components/ui/Calendar.js

@@ -0,0 +1,151 @@
+import { insert as u, createComponent as g, setAttribute as d, effect as $, className as B, template as y, use as J, delegateEvents as Q } from "solid-js/web";
+import { createUniqueId as X, untrack as K, createSignal as p, createMemo as ee, onMount as te, For as D } from "solid-js";
+import { useFloeLocale as ae } from "../../context/LocaleContext.js";
+import { cn as P } from "../../utils/cn.js";
+import { createControllableValue as W } from "./controllable.js";
+import { Button as j } from "./Button.js";
+import { calendarDays as ie, parseCalendarDate as f, addCalendarMonths as M, addCalendarDays as b } from "./calendarModel.js";
+var H = /* @__PURE__ */ y("<span aria-hidden=true>"), le = /* @__PURE__ */ y('<div><div class="mb-2 flex items-center justify-between gap-2"><span aria-live=polite class="text-sm font-medium"></span></div><table role=grid class="w-full table-fixed border-collapse"><thead><tr></tr></thead><tbody>'), ne = /* @__PURE__ */ y('<th scope=col class="pb-1 text-caption font-normal text-muted-foreground"><abbr class=no-underline>'), re = /* @__PURE__ */ y("<tr>"), oe = /* @__PURE__ */ y('<td class="p-0.5 text-center"><button type=button>');
+function ce() {
+  const e = /* @__PURE__ */ new Date();
+  return String(e.getFullYear()).padStart(4, "0") + "-" + String(e.getMonth() + 1).padStart(2, "0") + "-" + String(e.getDate()).padStart(2, "0");
+}
+function he(e) {
+  const o = ae(), _ = X(), U = K(() => e.defaultMonth || e.value || e.defaultValue || ce()), [m, k] = W({
+    value: () => e.month,
+    defaultValue: U,
+    onChange: (t) => e.onMonthChange?.(t)
+  }), [T, I] = W({
+    value: () => e.value,
+    defaultValue: e.defaultValue ?? "",
+    onChange: (t) => e.onChange?.(t)
+  }), [w, V] = p(K(() => e.value || e.defaultValue || U)), x = ee(() => ie(m(), e.weekStartsOn ?? 0)), h = (t) => !!(e.disabled || e.min && t < e.min || e.max && t > e.max || e.isDateDisabled?.(t)), N = () => x().includes(w()) && !h(w()) ? w() : x().find((t) => t.startsWith(m().slice(0, 7)) && !h(t));
+  let C;
+  te(() => {
+    e.autoFocus && C?.querySelector('[tabindex="0"]')?.focus();
+  });
+  const A = (t) => k(M(m().slice(0, 7) + "-01", t)), R = (t, n) => {
+    let l;
+    switch (t.key) {
+      case "ArrowLeft":
+        l = b(n, o.direction === "rtl" ? 1 : -1);
+        break;
+      case "ArrowRight":
+        l = b(n, o.direction === "rtl" ? -1 : 1);
+        break;
+      case "ArrowUp":
+        l = b(n, -7);
+        break;
+      case "ArrowDown":
+        l = b(n, 7);
+        break;
+      case "PageUp":
+        l = M(n, t.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        l = M(n, t.shiftKey ? 12 : 1);
+        break;
+      case "Home":
+        l = b(n, -((f(n).getUTCDay() - (e.weekStartsOn ?? 0) + 7) % 7));
+        break;
+      case "End":
+        l = b(n, 6 - (f(n).getUTCDay() - (e.weekStartsOn ?? 0) + 7) % 7);
+        break;
+      default:
+        return;
+    }
+    t.preventDefault(), e.min && l < e.min && (l = e.min), e.max && l > e.max && (l = e.max), V(l), k(l.slice(0, 7) + "-01"), queueMicrotask(() => C?.querySelector('[data-date="' + l + '"]')?.focus());
+  };
+  return (() => {
+    var t = le(), n = t.firstChild, l = n.firstChild, S = n.nextSibling, F = S.firstChild, Y = F.firstChild, G = F.nextSibling, L = C;
+    return typeof L == "function" ? J(L, t) : C = t, u(n, g(j, {
+      size: "icon",
+      variant: "ghost",
+      get "aria-label"() {
+        return o.t("previousMonth");
+      },
+      get disabled() {
+        return e.disabled || !!e.min && m().slice(0, 7) <= e.min.slice(0, 7);
+      },
+      onClick: () => A(-1),
+      get children() {
+        var a = H();
+        return u(a, () => o.direction === "rtl" ? "›" : "‹"), a;
+      }
+    }), l), d(l, "id", _ + "-month"), u(l, () => o.date(f(m().slice(0, 7) + "-01"), {
+      month: "long",
+      year: "numeric",
+      timeZone: "UTC",
+      calendar: "gregory"
+    })), u(n, g(j, {
+      size: "icon",
+      variant: "ghost",
+      get "aria-label"() {
+        return o.t("nextMonth");
+      },
+      get disabled() {
+        return e.disabled || !!e.max && m().slice(0, 7) >= e.max.slice(0, 7);
+      },
+      onClick: () => A(1),
+      get children() {
+        var a = H();
+        return u(a, () => o.direction === "rtl" ? "‹" : "›"), a;
+      }
+    }), null), u(Y, g(D, {
+      get each() {
+        return x().slice(0, 7);
+      },
+      children: (a) => (() => {
+        var s = ne(), i = s.firstChild;
+        return u(i, () => o.date(f(a), {
+          weekday: "short",
+          timeZone: "UTC"
+        })), $(() => d(i, "title", o.date(f(a), {
+          weekday: "long",
+          timeZone: "UTC"
+        }))), s;
+      })()
+    })), u(G, g(D, {
+      each: [0, 1, 2, 3, 4, 5],
+      children: (a) => (() => {
+        var s = re();
+        return u(s, g(D, {
+          get each() {
+            return x().slice(a * 7, a * 7 + 7);
+          },
+          children: (i) => (() => {
+            var v = oe(), c = v.firstChild;
+            return c.$$click = () => {
+              h(i) || (I(i), k(i.slice(0, 7) + "-01"));
+            }, c.$$keydown = (r) => R(r, i), c.addEventListener("focus", () => V(i)), d(c, "data-date", i), u(c, () => o.number(f(i).getUTCDate())), $((r) => {
+              var q = T() === i, Z = N() === i ? 0 : -1, E = h(i) || void 0, O = o.date(f(i), {
+                dateStyle: "full",
+                timeZone: "UTC",
+                calendar: "gregory"
+              }), z = P("h-8 w-full rounded-control text-xs focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1", T() === i ? "bg-primary text-primary-foreground" : "hover:bg-accent", !i.startsWith(m().slice(0, 7)) && "text-muted-foreground", h(i) && "opacity-40");
+              return q !== r.e && d(v, "aria-selected", r.e = q), Z !== r.t && d(c, "tabindex", r.t = Z), E !== r.a && d(c, "aria-disabled", r.a = E), O !== r.o && d(c, "aria-label", r.o = O), z !== r.i && B(c, r.i = z), r;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
+            }), v;
+          })()
+        })), s;
+      })()
+    })), $((a) => {
+      var s = o.direction, i = P("w-64 max-w-full p-2", e.class), v = e.ariaLabel, c = e.ariaLabel ? void 0 : _ + "-month";
+      return s !== a.e && d(t, "dir", a.e = s), i !== a.t && B(t, a.t = i), v !== a.a && d(S, "aria-label", a.a = v), c !== a.o && d(S, "aria-labelledby", a.o = c), a;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), t;
+  })();
+}
+Q(["keydown", "click"]);
+export {
+  he as Calendar
+};