@forwardreach/saas-ui 0.10.4 → 0.12.0

package/dist/components/select.js

@@ -3,10 +3,23 @@ import { ChevronDown } from "lucide-react";
 import * as React from "react";
 import { cn } from "../utils/cn.js";
 import { useFormFieldProps } from "./form-field.js";
+// Height, text, padding and chevron inset are held together per size rather
+// than split across rules, because the chevron's `right` has to track the
+// select's right padding — separate them and they drift.
+const SIZE_CLASSES = {
+    md: { select: "h-10 py-2 pl-3 pr-9 text-sm", chevron: "right-3 size-4" },
+    sm: { select: "h-8 py-1 pl-2.5 pr-7 text-xs", chevron: "right-2 size-3.5" },
+};
 /**
  * Styled native `<select>` matching the shared `Input` look, with a trailing
  * chevron. Native on purpose: correct mobile behavior and form participation
  * with zero positioning code. Participates in `FormField` wiring.
+ *
+ * The default for a bounded field in an ordinary form. Its popup belongs to the
+ * platform and cannot be themed past its background colour; where that popup is
+ * the whole of what the reader sees — a choice presented as inline text — reach
+ * for `SelectMenu` instead. The four single-choice controls and which case each
+ * answers are tabled once, in `docs/packages/saas-ui.md`.
  */
-export const Select = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs("div", { className: cn("relative", className), children: [_jsx("select", { ref: ref, className: "flex h-10 w-full cursor-pointer appearance-none rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] py-2 pl-3 pr-9 text-sm text-[color:var(--ssui-text)] shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ssui-bg)] disabled:cursor-not-allowed disabled:bg-[color:var(--ssui-surface-muted)] disabled:opacity-70", ...useFormFieldProps(props), children: children }), _jsx(ChevronDown, { "aria-hidden": "true", className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[color:var(--ssui-text-subtle)]" })] })));
+export const Select = React.forwardRef(({ className, children, size = "md", ...props }, ref) => (_jsxs("div", { className: cn("relative", className), children: [_jsx("select", { ref: ref, className: cn("flex w-full cursor-pointer appearance-none rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border-control,var(--ssui-border))] bg-[color:var(--ssui-surface)] text-[color:var(--ssui-text)] shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ssui-bg)] disabled:cursor-not-allowed disabled:bg-[color:var(--ssui-surface-muted)] disabled:opacity-70", SIZE_CLASSES[size].select), ...useFormFieldProps(props), children: children }), _jsx(ChevronDown, { "aria-hidden": "true", className: cn("pointer-events-none absolute top-1/2 -translate-y-1/2 text-[color:var(--ssui-text-subtle)]", SIZE_CLASSES[size].chevron) })] })));
 Select.displayName = "Select";

package/dist/components/textarea.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../utils/cn.js";
 import { useFormFieldProps } from "./form-field.js";
-export const Textarea = React.forwardRef(({ className, rows = 4, ...props }, ref) => (_jsx("textarea", { ref: ref, rows: rows, className: cn("flex min-h-24 w-full resize-y rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border)] bg-[color:var(--ssui-surface)] px-3 py-2 text-sm text-[color:var(--ssui-text)] shadow-sm transition-colors placeholder:text-[color:var(--ssui-text-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ssui-bg)] disabled:cursor-not-allowed disabled:bg-[color:var(--ssui-surface-muted)] disabled:opacity-70", className), ...useFormFieldProps(props) })));
+export const Textarea = React.forwardRef(({ className, rows = 4, ...props }, ref) => (_jsx("textarea", { ref: ref, rows: rows, className: cn("flex min-h-24 w-full resize-y rounded-[var(--ssui-radius)] border border-[color:var(--ssui-border-control,var(--ssui-border))] bg-[color:var(--ssui-surface)] px-3 py-2 text-sm text-[color:var(--ssui-text)] shadow-sm transition-colors placeholder:text-[color:var(--ssui-text-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ssui-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--ssui-bg)] disabled:cursor-not-allowed disabled:bg-[color:var(--ssui-surface-muted)] disabled:opacity-70", className), ...useFormFieldProps(props) })));
 Textarea.displayName = "Textarea";

package/dist/components/time-zone-field.d.ts

@@ -1,4 +1,5 @@
 import type { TimeZoneOption } from "../utils/time-zones.js";
+import type { ChoiceGroupVariant } from "./choice-card.js";
 export type TimeZoneMode = "auto" | "fixed";
 export interface TimeZoneFieldProps {
     /** Initial mode. Defaults to "auto". */
@@ -17,14 +18,22 @@ export interface TimeZoneFieldProps {
     options?: TimeZoneOption[];
     /** Accessible label for the mode choice. Defaults to "Time zone mode". */
     "aria-label"?: string;
+    /**
+     * How the mode choice is drawn — passed straight to `ChoiceCardGroup`.
+     * Defaults to `"card"`. Use `"list"` where the surrounding form treats a
+     * choice group as one bordered container of rows; see `ChoiceCardGroupProps`
+     * for why the two are not interchangeable.
+     */
+    variant?: ChoiceGroupVariant;
     className?: string;
 }
 /**
  * Composite time-zone preference control: an auto/fixed mode choice rendered
- * as `ChoiceCard`s (auto shows the detected browser zone inline) plus a
+ * as a `ChoiceCardGroup` in either variant (auto shows the detected browser
+ * zone inline) plus a
  * filterable zone `Combobox` shown only in fixed mode. Search matches zone
  * names with spaces or underscores and offset text ("GMT+09"). Submits
  * through hidden inputs — `timeZoneMode`, `timeZone`, `browserTimeZone` —
  * for server-action form handling.
  */
-export declare function TimeZoneField({ defaultMode, defaultTimeZone, onChange, options, className, "aria-label": ariaLabel, }: TimeZoneFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeZoneField({ defaultMode, defaultTimeZone, onChange, options, variant, className, "aria-label": ariaLabel, }: TimeZoneFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/time-zone-field.js

@@ -5,6 +5,24 @@ import { cn } from "../utils/cn.js";
 import { detectBrowserTimeZone, formatTimeZoneOffset, timeZoneOptions, } from "../utils/time-zones.js";
 import { ChoiceCard, ChoiceCardGroup } from "./choice-card.js";
 import { Combobox } from "./combobox.js";
+/**
+ * One shape for both zone sources — the consumer's `options` and the built IANA
+ * list — so a field added to it is added once.
+ *
+ * `inputLabel` is the reason this is worth a function: the offset is part of
+ * which zone this is rather than decoration on the row, so it has to survive
+ * into the collapsed field. Without it a chosen zone shows as a bare IANA name
+ * and the reader has to reopen the list to check they picked the offset they
+ * meant.
+ */
+function toComboboxOption(zone) {
+    return {
+        value: zone.value,
+        label: zone.label,
+        trailing: zone.offset,
+        inputLabel: `${zone.label} (${zone.offset})`,
+    };
+}
 function matchesZoneQuery(option, query) {
     const normalized = query.trim().toLowerCase();
     if (!normalized)
@@ -19,13 +37,14 @@ function matchesZoneQuery(option, query) {
 }
 /**
  * Composite time-zone preference control: an auto/fixed mode choice rendered
- * as `ChoiceCard`s (auto shows the detected browser zone inline) plus a
+ * as a `ChoiceCardGroup` in either variant (auto shows the detected browser
+ * zone inline) plus a
  * filterable zone `Combobox` shown only in fixed mode. Search matches zone
  * names with spaces or underscores and offset text ("GMT+09"). Submits
  * through hidden inputs — `timeZoneMode`, `timeZone`, `browserTimeZone` —
  * for server-action form handling.
  */
-export function TimeZoneField({ defaultMode = "auto", defaultTimeZone, onChange, options, className, "aria-label": ariaLabel = "Time zone mode", }) {
+export function TimeZoneField({ defaultMode = "auto", defaultTimeZone, onChange, options, variant = "card", className, "aria-label": ariaLabel = "Time zone mode", }) {
     const [mode, setMode] = React.useState(defaultMode);
     const [browserTimeZone, setBrowserTimeZone] = React.useState("UTC");
     const [fixedTimeZone, setFixedTimeZone] = React.useState(defaultTimeZone ?? "");
@@ -41,21 +60,12 @@ export function TimeZoneField({ defaultMode = "auto", defaultTimeZone, onChange,
     // component's lifetime. Consumer-provided `options` skip the build entirely.
     const builtOptionsRef = React.useRef(null);
     const comboboxOptions = React.useMemo(() => {
-        if (options) {
-            return options.map((zone) => ({
-                value: zone.value,
-                label: zone.label,
-                trailing: zone.offset,
-            }));
-        }
+        if (options)
+            return options.map(toComboboxOption);
         if (mode !== "fixed")
             return [];
         if (!builtOptionsRef.current) {
-            builtOptionsRef.current = timeZoneOptions().map((zone) => ({
-                value: zone.value,
-                label: zone.label,
-                trailing: zone.offset,
-            }));
+            builtOptionsRef.current = timeZoneOptions().map(toComboboxOption);
         }
         return builtOptionsRef.current;
     }, [options, mode]);
@@ -68,5 +78,5 @@ export function TimeZoneField({ defaultMode = "auto", defaultTimeZone, onChange,
             setFixedTimeZone(next.timeZone);
         onChange?.({ mode: nextMode, timeZone: nextZone });
     }
-    return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsx("input", { name: "timeZoneMode", type: "hidden", value: mode }), _jsx("input", { name: "timeZone", type: "hidden", value: fixedTimeZone }), _jsx("input", { name: "browserTimeZone", type: "hidden", value: browserTimeZone }), _jsxs(ChoiceCardGroup, { "aria-label": ariaLabel, onValueChange: (value) => update({ mode: value }), value: mode, children: [_jsx(ChoiceCard, { description: _jsxs(_Fragment, { children: ["Use the browser time zone", _jsxs("span", { className: "mt-0.5 block font-mono text-[color:var(--ssui-text-muted)]", children: [browserTimeZone, " (", formatTimeZoneOffset(browserTimeZone), ")"] })] }), title: "Auto", value: "auto" }), _jsx(ChoiceCard, { description: "Always use one time zone", title: "Fixed", value: "fixed" })] }), mode === "fixed" ? (_jsx(Combobox, { "aria-label": "Fixed time zone", emptyMessage: "No matching time zones", filter: matchesZoneQuery, onValueChange: (value) => update({ timeZone: value }), options: comboboxOptions, placeholder: "America/New_York", value: fixedTimeZone })) : null] }));
+    return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsx("input", { name: "timeZoneMode", type: "hidden", value: mode }), _jsx("input", { name: "timeZone", type: "hidden", value: fixedTimeZone }), _jsx("input", { name: "browserTimeZone", type: "hidden", value: browserTimeZone }), _jsxs(ChoiceCardGroup, { "aria-label": ariaLabel, onValueChange: (value) => update({ mode: value }), value: mode, variant: variant, children: [_jsx(ChoiceCard, { description: _jsxs(_Fragment, { children: ["Use the browser time zone", _jsxs("span", { className: "mt-0.5 block font-mono text-[color:var(--ssui-text-muted)]", children: [browserTimeZone, " (", formatTimeZoneOffset(browserTimeZone), ")"] })] }), title: "Auto", value: "auto" }), _jsx(ChoiceCard, { description: "Always use one time zone", title: "Fixed", value: "fixed" })] }), mode === "fixed" ? (_jsx(Combobox, { "aria-label": "Fixed time zone", emptyMessage: "No matching time zones", filter: matchesZoneQuery, onValueChange: (value) => update({ timeZone: value }), options: comboboxOptions, placeholder: "America/New_York", value: fixedTimeZone })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forwardreach/saas-ui",
-  "version": "0.10.4",
+  "version": "0.12.0",
   "description": "Brand-neutral React UI primitives and SaaS app patterns for ForwardReach-owned business applications.",
   "type": "module",
   "private": false,
@@ -51,6 +51,7 @@
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.4",
@@ -72,12 +73,13 @@
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
   },
+  "gitHead": "7517a542f48380e40fb8d7632f12ce352151487d",
   "scripts": {
     "build": "pnpm clean && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs",
     "dev": "node scripts/copy-styles.mjs && tsc -p tsconfig.build.json --watch",
     "check:brand": "node scripts/check-brand-neutrality.mjs",
     "clean": "rimraf dist coverage dist-pack *.tgz",
-    "pack:local": "pnpm build && mkdir -p dist-pack && pnpm pack --pack-destination dist-pack",
+    "pack:local": "pnpm build && mkdir -p dist-pack && pnpm pack --out dist-pack/forwardreach-saas-ui-local.tgz",
     "test": "vitest run && pnpm check:brand",
     "typecheck": "tsc --noEmit"
   }