@tradalab/lyra 2.1.0 → 2.3.0

package/README.md

@@ -1,99 +1,99 @@
-# @tradalab/lyra
-
-> Tradalab's UI kit — shadcn (`radix-lyra` style) primitives, composed
-> components, and an app shell for **React 19 / Next 16 / Tailwind v4**.
-
-ESM-only. Extracted from Tradalab's foundation kit so every company app shares
-the same component surface.
-
-## Install
-
-```bash
-pnpm add @tradalab/lyra
-# peers: react ^19, react-dom ^19  (next ^16 only if you use /shell)
-```
-
-The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
-
-```css
-/* app/globals.css */
-@import "@tradalab/lyra/styles.css";
-```
-
-## Subpaths
-
-| Subpath | Exports | Boundary |
-|---|---|---|
-| `@tradalab/lyra/utils` | `cn` | server-safe |
-| `@tradalab/lyra/hooks` | `useMobile` | client |
-| `@tradalab/lyra/ui` | 60 shadcn primitives + `AccountMenu`, `Container` | client |
-| `@tradalab/lyra/shell` | `AppShell`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
-| `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
-
-Client subpaths carry a build-injected `"use client"`; import them inside a
-client tree or pass via `children` — don't import them into a Server Component's
-own module.
-
-```tsx
-import { Button, Card, CardHeader } from "@tradalab/lyra/ui"
-import { AppShell, NavItem } from "@tradalab/lyra/shell"
-```
-
-## Toast
-
-`2.0.0` replaced the sonner-based toast with shadcn's Base UI Toast. `sonner` is
-gone — it is no longer a peer dependency, and apps should drop it.
-
-`toast` is a **manager object, not a callable**:
-
-```tsx
-import { Toaster, toast } from "@tradalab/lyra/ui"
-
-toast.add({ title: "Saved" })
-toast.add({ title: "Upload failed", description: err.message, type: "error" })
-const id = toast.add({ title: "Uploading…", type: "loading", timeout: 0 })
-toast.close(id)
-```
-
-`type` is `"success" | "error" | "info" | "warning" | "loading"` — there is no
-`toast.success("x")`. `timeout: 0` never auto-dismisses (sonner's `duration:
-Infinity`). Position belongs to the viewport this package styles, so sonner's
-`position` and `richColors` props have no equivalent. Mount `<Toaster/>` once —
-apps on `@tradalab/nekit` already get it from `NekitProvider`.
-
-## Develop
-
-```bash
-make install            # pnpm install
-make build              # tsup + inject-use-client + verify-build-output
-make verify             # typecheck + lint + test
-make ui-add <name>      # scaffold a shadcn primitive, adapt, rebuild barrel
-make ui-update <name>   # overwrite a primitive with the latest upstream version
-make ui-sync            # re-adapt every primitive + rebuild barrel
-make ui-diff            # report which primitives changed upstream (exit 1 if any)
-```
-
-**Staying current with shadcn** — `make ui-diff` compares every primitive
-against the live `radix-lyra` registry and exits non-zero when one has moved.
-It normalises away everything the CLI would rewrite anyway (icon-library
-placeholders, `cn-*` template classes, import aliases, prettier line-wrapping),
-so what it prints is real change. Prefer it over `shadcn add --diff`, which
-caps its output at five files per run.
-
-A primitive lyra deliberately diverges from carries a `customised` note in
-`primitives.lock.json`; `ui-diff` lists those separately instead of failing on
-them forever. Document the divergence in a JSDoc block in the file too —
-`make ui-update` will overwrite it, and that note is what tells the next person
-to put it back.
-
-**Layout** — `src/<layer>/` with a barrel `index.ts`; one tsup entry per
-subpath; ESM-only to `dist/`. **Layers** (enforced by `eslint-plugin-boundaries`):
-`utils`/`hooks` (foundation) → `ui` → `shell`. No upward imports.
-
-**`"use client"` is not in source** — it is injected onto the client entry
-artifacts post-build by `scripts/inject-use-client.mjs`, then asserted by
-`scripts/verify-build-output.mjs`. `scripts/sync-ui.mjs` adapts shadcn-CLI
-output to repo conventions.
-
-**Release** — `pnpm publish --no-git-checks` (the `prepublishOnly` hook builds
-first). Published to the npm public registry.
+# @tradalab/lyra
+
+> Tradalab's UI kit — shadcn (`radix-lyra` style) primitives, composed
+> components, and an app shell for **React 19 / Next 16 / Tailwind v4**.
+
+ESM-only. Extracted from Tradalab's foundation kit so every company app shares
+the same component surface.
+
+## Install
+
+```bash
+pnpm add @tradalab/lyra
+# peers: react ^19, react-dom ^19  (next ^16 only if you use /shell)
+```
+
+The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
+
+```css
+/* app/globals.css */
+@import "@tradalab/lyra/styles.css";
+```
+
+## Subpaths
+
+| Subpath | Exports | Boundary |
+|---|---|---|
+| `@tradalab/lyra/utils` | `cn` | server-safe |
+| `@tradalab/lyra/hooks` | `useMobile` | client |
+| `@tradalab/lyra/ui` | 60 shadcn primitives + `AccountMenu`, `ActionButton`, `Container` | client |
+| `@tradalab/lyra/shell` | `AppShell`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
+| `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
+
+Client subpaths carry a build-injected `"use client"`; import them inside a
+client tree or pass via `children` — don't import them into a Server Component's
+own module.
+
+```tsx
+import { Button, Card, CardHeader } from "@tradalab/lyra/ui"
+import { AppShell, NavItem } from "@tradalab/lyra/shell"
+```
+
+## Toast
+
+`2.0.0` replaced the sonner-based toast with shadcn's Base UI Toast. `sonner` is
+gone — it is no longer a peer dependency, and apps should drop it.
+
+`toast` is a **manager object, not a callable**:
+
+```tsx
+import { Toaster, toast } from "@tradalab/lyra/ui"
+
+toast.add({ title: "Saved" })
+toast.add({ title: "Upload failed", description: err.message, type: "error" })
+const id = toast.add({ title: "Uploading…", type: "loading", timeout: 0 })
+toast.close(id)
+```
+
+`type` is `"success" | "error" | "info" | "warning" | "loading"` — there is no
+`toast.success("x")`. `timeout: 0` never auto-dismisses (sonner's `duration:
+Infinity`). Position belongs to the viewport this package styles, so sonner's
+`position` and `richColors` props have no equivalent. Mount `<Toaster/>` once —
+apps on `@tradalab/nekit` already get it from `NekitProvider`.
+
+## Develop
+
+```bash
+make install            # pnpm install
+make build              # tsup + inject-use-client + verify-build-output
+make verify             # typecheck + lint + test
+make ui-add <name>      # scaffold a shadcn primitive, adapt, rebuild barrel
+make ui-update <name>   # overwrite a primitive with the latest upstream version
+make ui-sync            # re-adapt every primitive + rebuild barrel
+make ui-diff            # report which primitives changed upstream (exit 1 if any)
+```
+
+**Staying current with shadcn** — `make ui-diff` compares every primitive
+against the live `radix-lyra` registry and exits non-zero when one has moved.
+It normalises away everything the CLI would rewrite anyway (icon-library
+placeholders, `cn-*` template classes, import aliases, prettier line-wrapping),
+so what it prints is real change. Prefer it over `shadcn add --diff`, which
+caps its output at five files per run.
+
+A primitive lyra deliberately diverges from carries a `customised` note in
+`primitives.lock.json`; `ui-diff` lists those separately instead of failing on
+them forever. Document the divergence in a JSDoc block in the file too —
+`make ui-update` will overwrite it, and that note is what tells the next person
+to put it back.
+
+**Layout** — `src/<layer>/` with a barrel `index.ts`; one tsup entry per
+subpath; ESM-only to `dist/`. **Layers** (enforced by `eslint-plugin-boundaries`):
+`utils`/`hooks` (foundation) → `ui` → `shell`. No upward imports.
+
+**`"use client"` is not in source** — it is injected onto the client entry
+artifacts post-build by `scripts/inject-use-client.mjs`, then asserted by
+`scripts/verify-build-output.mjs`. `scripts/sync-ui.mjs` adapts shadcn-CLI
+output to repo conventions.
+
+**Release** — `pnpm publish --no-git-checks` (the `prepublishOnly` hook builds
+first). Published to the npm public registry.

package/dist/blocks/index.d.ts

@@ -125,4 +125,72 @@ declare const TreeIcon: ({ icon, hasChildren, className, ...props }: TreeIconPro
 type TreeLabelProps = HTMLAttributes<HTMLSpanElement>;
 declare const TreeLabel: ({ className, ...props }: TreeLabelProps) => React.JSX.Element;
 
-export { ConfirmContext, ConfirmDialog, type ConfirmFn, type ConfirmOptions, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Panel, PanelCard, type PanelCardProps, type PanelItemProps, TreeExpander, type TreeExpanderProps, TreeIcon, type TreeIconProps, TreeLabel, type TreeLabelProps, TreeLines, TreeNode, TreeNodeContent, type TreeNodeContentProps, type TreeNodeProps, TreeNodeTrigger, type TreeNodeTriggerProps, TreeProvider, type TreeProviderProps, TreeView, type TreeViewProps, useConfirm, useFormField };
+interface TzPickerLabels {
+    /** Shown when the value is empty and `allowInherit`. Default: "Inherit". */
+    inherit?: string;
+    /** Placeholder for the search input. Default: "Search timezone". */
+    search?: string;
+    /** Shown when the filter matches nothing. Default: "No match". */
+    noMatch?: string;
+}
+interface TzPickerProps {
+    /** IANA zone name, or "" for inherit. */
+    value: string;
+    onChange: (tz: string) => void;
+    /**
+     * Whether an empty value is meaningful here. It usually is: a device inherits from its site,
+     * a site from its unit, a unit from its parent. Set false where a zone must be chosen.
+     */
+    allowInherit?: boolean;
+    labels?: TzPickerLabels;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+declare function TzPicker({ value, onChange, allowInherit, labels, disabled, id, className, }: TzPickerProps): React.JSX.Element;
+
+/**
+ * Pick one id from a known set.
+ *
+ * The set is INJECTED. That is what lets this live in lyra: it never learns where the
+ * options came from, so it works the same for org members, groups, or anything else the app
+ * has already loaded - which is exactly how the three copies it replaces differed.
+ *
+ * Why it exists at all: the screens that use it used to ask for raw uuids typed into a text
+ * box. Nobody knows a uuid, so the only way anyone filled those fields was by copying from
+ * somewhere else, and a copy can be off by one row. In `people` that attached a personnel
+ * record to the wrong account - a wrong-but-valid uid passes every server check and is found
+ * by whoever opens someone else's file under their own name.
+ *
+ * Filtering is client-side, deliberately: every set here is org-scoped and already loaded for
+ * the surrounding screen, so matching locally is instant and costs no round trip. A picker
+ * paging over every account that exists (admin's platform-wide search) is a different
+ * component with a different failure mode - see `PeoplePicker` in `@tradalab/lyra/people`,
+ * which takes an async `search` and does not hold a controlled value.
+ */
+/** One choosable thing: an id plus what a person actually recognises it by. */
+interface PickOption {
+    id: string;
+    label: string;
+    /** Secondary line - an email, a status. Searchable along with the label. */
+    hint?: string;
+}
+interface OptionPickerLabels {
+    /** Shown when nothing is selected. */
+    placeholder?: string;
+    /** Placeholder inside the search box. */
+    search?: string;
+    /** Shown when the filter matches nothing. */
+    empty?: string;
+}
+declare function OptionPicker({ value, onChange, options, labels, disabled, id, className, }: {
+    value: string;
+    onChange: (id: string) => void;
+    options: PickOption[];
+    labels?: OptionPickerLabels;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}): React.JSX.Element;
+
+export { ConfirmContext, ConfirmDialog, type ConfirmFn, type ConfirmOptions, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, OptionPicker, type OptionPickerLabels, Panel, PanelCard, type PanelCardProps, type PanelItemProps, type PickOption, TreeExpander, type TreeExpanderProps, TreeIcon, type TreeIconProps, TreeLabel, type TreeLabelProps, TreeLines, TreeNode, TreeNodeContent, type TreeNodeContentProps, type TreeNodeProps, TreeNodeTrigger, type TreeNodeTriggerProps, TreeProvider, type TreeProviderProps, TreeView, type TreeViewProps, TzPicker, type TzPickerLabels, type TzPickerProps, useConfirm, useFormField };

package/dist/blocks/index.js

@@ -1,8 +1,9 @@
 "use client";
-import { Label } from '../chunk-QGUKTRBR.js';
+import { Label, Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem } from '../chunk-VA6K3TP3.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../chunk-LZZ3UOPT.js';
-import { Dialog, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from '../chunk-APYQOJAJ.js';
-import { Button } from '../chunk-5Q4UTRYU.js';
+import { Dialog, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from '../chunk-XWGYXLIA.js';
+import '../chunk-2HDU26FC.js';
+import { Button } from '../chunk-VGOGWZCF.js';
 import { cn } from '../chunk-XH55BHUU.js';
 import * as React from 'react';
 import { createContext, useMemo, useState, useEffect, useContext, useCallback, useId } from 'react';
@@ -417,7 +418,160 @@ var TreeIcon = ({ icon, hasChildren = false, className, ...props }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center text-muted-foreground transition-transform", className), ...props, children: icon || getDefaultIcon() });
 };
 var TreeLabel = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("font flex-1 truncate text-sm", className), ...props });
+var FALLBACK_ZONES = [
+  "UTC",
+  "Asia/Ho_Chi_Minh",
+  "Asia/Bangkok",
+  "Asia/Singapore",
+  "Asia/Tokyo",
+  "Asia/Seoul",
+  "Asia/Shanghai",
+  "Asia/Kolkata",
+  "Europe/London",
+  "Europe/Berlin",
+  "America/New_York",
+  "America/Los_Angeles"
+];
+var cachedZones = null;
+function allZones() {
+  if (cachedZones) return cachedZones;
+  let names;
+  try {
+    const supported = Intl.supportedValuesOf;
+    names = supported ? supported("timeZone") : FALLBACK_ZONES;
+  } catch {
+    names = FALLBACK_ZONES;
+  }
+  cachedZones = names.map((name) => ({ name, offset: offsetOf(name) }));
+  return cachedZones;
+}
+function offsetOf(tz) {
+  try {
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone: tz,
+      timeZoneName: "shortOffset"
+    }).formatToParts(/* @__PURE__ */ new Date());
+    return parts.find((p) => p.type === "timeZoneName")?.value ?? "";
+  } catch {
+    return "";
+  }
+}
+function browserTz() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+function TzPicker({
+  value,
+  onChange,
+  allowInherit = true,
+  labels,
+  disabled,
+  id,
+  className
+}) {
+  const l = {
+    inherit: labels?.inherit ?? "Inherit",
+    search: labels?.search ?? "Search timezone",
+    noMatch: labels?.noMatch ?? "No match"
+  };
+  const own = React.useMemo(() => browserTz(), []);
+  const entries = React.useMemo(() => {
+    const zones = allZones();
+    const out = [];
+    if (allowInherit) out.push({ tz: "", name: l.inherit, offset: "" });
+    const ownZone = zones.find((z) => z.name === own);
+    if (ownZone) out.push({ tz: own, name: own, offset: ownZone.offset });
+    for (const z of zones) {
+      if (z.name === own) continue;
+      out.push({ tz: z.name, name: z.name, offset: z.offset });
+    }
+    if (value !== "" && !zones.some((z) => z.name === value)) {
+      out.push({ tz: value, name: value, offset: offsetOf(value) });
+    }
+    return out;
+  }, [allowInherit, l.inherit, own, value]);
+  const selected = entries.find((e) => e.tz === value) ?? entries[0];
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      items: entries,
+      value: selected,
+      onValueChange: (item) => onChange(item?.tz ?? ""),
+      itemToStringLabel: (e) => e.offset ? `${e.name} \xB7 ${e.offset}` : e.name,
+      itemToStringValue: (e) => e.tz,
+      isItemEqualToValue: (a, b) => a.tz === b.tz,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          ComboboxInput,
+          {
+            id,
+            placeholder: l.search,
+            className: className ?? "w-full",
+            showClear: allowInherit
+          }
+        ),
+        /* @__PURE__ */ jsxs(ComboboxContent, { children: [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: l.noMatch }),
+          /* @__PURE__ */ jsx(ComboboxList, { children: (entry) => /* @__PURE__ */ jsxs(ComboboxItem, { value: entry, children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: entry.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: entry.offset })
+          ] }, entry.tz || "__inherit") })
+        ] })
+      ]
+    }
+  );
+}
+var FALLBACK = {
+  placeholder: "Select\u2026",
+  search: "Search",
+  empty: "No match"
+};
+function OptionPicker({
+  value,
+  onChange,
+  options,
+  labels,
+  disabled,
+  id,
+  className
+}) {
+  const t = (k) => labels?.[k] ?? FALLBACK[k];
+  const placeholder = labels?.placeholder ?? FALLBACK.placeholder;
+  const entries = React.useMemo(() => {
+    const out = [{ id: "", label: placeholder, none: true }, ...options];
+    if (value !== "" && !options.some((o) => o.id === value)) {
+      out.push({ id: value, label: value });
+    }
+    return out;
+  }, [options, value, placeholder]);
+  const selected = entries.find((e) => e.id === value) ?? entries[0];
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      items: entries,
+      value: selected,
+      onValueChange: (e) => onChange(e?.id ?? ""),
+      itemToStringLabel: (e) => e.none ? e.label : `${e.label} ${e.hint ?? ""} ${e.id}`,
+      isItemEqualToValue: (a, b) => a.id === b.id,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(ComboboxInput, { id, placeholder: t("search"), className: className ?? "w-full" }),
+        /* @__PURE__ */ jsxs(ComboboxContent, { children: [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: t("empty") }),
+          /* @__PURE__ */ jsx(ComboboxList, { children: (entry) => /* @__PURE__ */ jsx(ComboboxItem, { value: entry, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: entry.label }),
+            entry.hint ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: entry.hint }) : null
+          ] }) }, entry.id || "__none") })
+        ] })
+      ]
+    }
+  );
+}
 
-export { ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, useConfirm, useFormField };
+export { ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, OptionPicker, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, TzPicker, useConfirm, useFormField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map