@ponti-studios/ui 1.4.0 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

package/src/components/filters/filter-select.stories.tsx

@@ -25,7 +25,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { value: "" },
+  args: { value: null },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.getByRole("combobox", { name: "Status" });
@@ -44,7 +44,7 @@ export const WithValue: Story = {
 };
 
 export const Loading: Story = {
-  args: { value: "", isLoading: true, options: [] },
+  args: { value: null, isLoading: true, options: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
@@ -53,7 +53,7 @@ export const Loading: Story = {
 };
 
 export const Empty: Story = {
-  args: { value: "", options: [], emptyLabel: "No statuses found" },
+  args: { value: null, options: [], emptyLabel: "No statuses found" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();

package/src/components/filters/filter-select.tsx

@@ -1,8 +1,8 @@
 import { useId, useMemo } from "react";
 
 import { cn } from "../../lib/utils";
-import { Label } from "../primitives/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../forms/select";
+import { Label } from "../primitives/label";
 
 export interface FilterSelectOption {
   value: string;
@@ -10,8 +10,8 @@ export interface FilterSelectOption {
 }
 
 export interface FilterSelectProps {
-  value: string;
-  onChange: (value: string) => void;
+  value: string | null;
+  onChange: (value: string | null) => void;
   options: FilterSelectOption[];
   label: string;
   loadingText?: string;
@@ -23,8 +23,6 @@ export interface FilterSelectProps {
   id?: string;
 }
 
-const ALL_VALUE = "";
-
 export function FilterSelect({
   label,
   value,
@@ -41,7 +39,7 @@ export function FilterSelect({
   const generatedId = useId();
   const selectId = id ?? generatedId;
   const items = useMemo(
-    () => [{ value: ALL_VALUE, label: placeholder }, ...options],
+    () => [{ value: null, label: placeholder }, ...options],
     [options, placeholder],
   );
 
@@ -53,7 +51,7 @@ export function FilterSelect({
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent className="bg-background max-h-[250px] min-w-36 overflow-y-auto">
-          <SelectItem value={ALL_VALUE}>{placeholder}</SelectItem>
+          <SelectItem>{placeholder}</SelectItem>
           {isLoading ? (
             <div className="text-muted-foreground px-2 py-1.5 text-sm">{loadingText}</div>
           ) : options.length === 0 ? (

package/src/components/forms/calendar.tsx

@@ -17,7 +17,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         month: "flex flex-col gap-4",
         month_caption: "relative flex h-8 items-center justify-center",
         caption_label: "text-sm font-medium",
-        nav: "absolute inset-x-4 top-4 flex items-center justify-between",
+        nav: "absolute inset-x-4 top-4 z-10 flex items-center justify-between",
         button_previous:
           "inline-flex size-8 p-2 items-center justify-center rounded-full border bg-background text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         button_next:

package/src/components/forms/date-field.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, screen, userEvent, within } from "storybook/test";
+
+import { DateField } from "./date-field";
+
+const meta = {
+  title: "Forms/DateField",
+  component: DateField,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DateField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function hiddenValue(canvasElement: HTMLElement, name: string): string | null {
+  const input = canvasElement.querySelector(`input[name="${name}"]`) as HTMLInputElement | null;
+  return input?.value ?? null;
+}
+
+async function nextMonth(dialog: HTMLElement) {
+  await userEvent.click(within(dialog).getByRole("button", { name: "Go to the Next Month" }));
+}
+
+// The trigger button's accessible name comes from its <label> (htmlFor), so
+// stories query the button by label and assert the visible date text separately.
+export const WithStringDefaultValue: Story = {
+  args: {
+    name: "startDate",
+    defaultValue: "2020-01-15",
+    label: "Start date",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // The hidden input carries the local "YYYY-MM-DD" value, and the trigger
+    // shows the formatted date.
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
+    const trigger = canvas.getByRole("button", { name: "Start date" });
+    await expect(trigger).toHaveTextContent("Jan 15, 2020");
+
+    // The calendar opens on the selected month, not the current one.
+    await userEvent.click(trigger);
+    const dialog = await screen.findByRole("dialog");
+    await expect(within(dialog).getByText("January 2020")).toBeInTheDocument();
+
+    // Real click on the Next chevron navigates the month.
+    await nextMonth(dialog);
+    await expect(within(dialog).getByText("February 2020")).toBeInTheDocument();
+
+    // Picking a day updates the trigger and the hidden input.
+    await userEvent.click(within(dialog).getByText("15"));
+    await expect(canvas.getByRole("button", { name: "Start date" })).toHaveTextContent(
+      "Feb 15, 2020",
+    );
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-15");
+  },
+};
+
+export const WithDateDefaultValue: Story = {
+  args: {
+    name: "endDate",
+    defaultValue: new Date(2020, 0, 15),
+    label: "End date",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-01-15");
+    await expect(canvas.getByRole("button", { name: "End date" })).toHaveTextContent(
+      "Jan 15, 2020",
+    );
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    name: "startDate",
+    label: "Start date",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("");
+    await expect(canvas.getByRole("button", { name: "Start date" })).toHaveTextContent(
+      "Pick a date",
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    name: "startDate",
+    defaultValue: "2020-01-15",
+    label: "Start date",
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByRole("button", { name: "Start date" })).toBeDisabled();
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
+  },
+};
+
+export const WithRangeDefaultValue: Story = {
+  args: {
+    mode: "range",
+    startName: "startDate",
+    endName: "endDate",
+    defaultValue: { from: "2020-01-15", to: "2020-06-30" },
+    label: "Active period",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Both hidden inputs carry local date strings; the trigger shows the range.
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-06-30");
+    const trigger = canvas.getByRole("button", { name: "Active period" });
+    await expect(trigger).toHaveTextContent("Jan 15, 2020");
+    await expect(trigger).toHaveTextContent("Jun 30, 2020");
+
+    // The range calendar opens on the start month.
+    await userEvent.click(trigger);
+    const dialog = await screen.findByRole("dialog");
+    await expect(within(dialog).getByText("January 2020")).toBeInTheDocument();
+
+    // Real-click the Next chevron, then pick a new from date.
+    await nextMonth(dialog);
+    await expect(within(dialog).getByText("February 2020")).toBeInTheDocument();
+    await userEvent.click(within(dialog).getByText("20"));
+    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
+      "From Feb 20, 2020",
+    );
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-20");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("");
+
+    // Picking an end date fills the second hidden input.
+    await userEvent.click(within(dialog).getByText("25"));
+    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
+      "Feb 20, 2020 – Feb 25, 2020",
+    );
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-20");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-02-25");
+  },
+};
+
+export const EmptyRange: Story = {
+  args: {
+    mode: "range",
+    startName: "startDate",
+    endName: "endDate",
+    label: "Active period",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("");
+    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
+      "Pick a date range",
+    );
+  },
+};

package/src/components/forms/date-field.tsx

@@ -0,0 +1,174 @@
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useId, useState } from "react";
+
+import { Popover, PopoverContent, PopoverTrigger } from "../overlays/popover";
+import { Button } from "../primitives/button";
+import { Calendar } from "./calendar";
+import { formatDateInput, parseDateInput } from "./date-utils";
+import { DatePicker, type DatePickerProps } from "./date-picker";
+
+export interface DateRangeValue {
+  from?: Date | string | null;
+  to?: Date | string | null;
+}
+
+interface DateFieldCommonProps {
+  id?: string;
+  label?: string;
+  showLabel?: boolean;
+  placeholder?: string;
+  dateFormat?: string;
+  disabled?: boolean;
+  containerClassName?: string;
+  popoverAlign?: DatePickerProps["popoverAlign"];
+  variant?: DatePickerProps["variant"];
+}
+
+export interface SingleDateFieldProps extends DateFieldCommonProps {
+  mode?: "single";
+  name: string;
+  defaultValue?: Date | string | null;
+}
+
+export interface RangeDateFieldProps extends DateFieldCommonProps {
+  mode: "range";
+  startName: string;
+  endName: string;
+  defaultValue?: DateRangeValue;
+}
+
+export type DateFieldProps = SingleDateFieldProps | RangeDateFieldProps;
+
+const TRIGGER_CLASSES =
+  "border-border bg-background text-foreground placeholder:text-muted-foreground min-h-10 max-h-10 w-full justify-start rounded-l-none rounded-r-xl border-l-0 text-left font-normal";
+
+function SingleDateField({
+  name,
+  defaultValue,
+  id,
+  label,
+  showLabel,
+  placeholder,
+  dateFormat,
+  disabled,
+  containerClassName,
+  popoverAlign,
+  variant,
+}: SingleDateFieldProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [value, setValue] = useState<Date | undefined>(() => parseDateInput(defaultValue));
+
+  return (
+    <div>
+      <DatePicker
+        id={inputId}
+        label={label}
+        showLabel={showLabel}
+        placeholder={placeholder}
+        dateFormat={dateFormat}
+        disabled={disabled}
+        containerClassName={containerClassName}
+        popoverAlign={popoverAlign}
+        variant={variant}
+        value={value}
+        onSelect={setValue}
+      />
+      <input type="hidden" name={name} value={value ? formatDateInput(value) : ""} />
+    </div>
+  );
+}
+
+function RangeDateField({
+  startName,
+  endName,
+  defaultValue,
+  id,
+  label,
+  showLabel = true,
+  placeholder = "Pick a date range",
+  dateFormat = "MMM d, yyyy",
+  disabled = false,
+  containerClassName = "flex-1 min-w-0",
+  popoverAlign = "start",
+  variant = "outline",
+}: RangeDateFieldProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [range, setRange] = useState<{ from?: Date; to?: Date }>(() => ({
+    from: parseDateInput(defaultValue?.from),
+    to: parseDateInput(defaultValue?.to),
+  }));
+
+  const fromLabel = range.from ? format(range.from, dateFormat) : null;
+  const toLabel = range.to ? format(range.to, dateFormat) : null;
+  const triggerLabel = fromLabel
+    ? toLabel
+      ? `${fromLabel} – ${toLabel}`
+      : `From ${fromLabel}`
+    : toLabel
+      ? `Until ${toLabel}`
+      : placeholder;
+
+  return (
+    <div className={containerClassName}>
+      {showLabel && label ? (
+        <label htmlFor={inputId} className="text-foreground mb-2 block text-sm font-medium">
+          {label}
+        </label>
+      ) : null}
+      <Popover>
+        <div className="flex w-full items-center">
+          <div className="border-border bg-background text-foreground flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
+            <CalendarIcon className="size-4" aria-hidden />
+          </div>
+          <PopoverTrigger asChild>
+            <Button id={inputId} variant={variant} disabled={disabled} className={TRIGGER_CLASSES}>
+              {triggerLabel}
+            </Button>
+          </PopoverTrigger>
+        </div>
+        <PopoverContent
+          className="bg-popover w-auto p-0"
+          align={popoverAlign}
+          aria-label={label ?? "Choose a date range"}
+        >
+          <Calendar
+            mode="range"
+            selected={range.from ? { from: range.from, to: range.to } : undefined}
+            defaultMonth={range.from ?? range.to}
+            resetOnSelect
+            onSelect={(next) => setRange({ from: next?.from, to: next?.to })}
+          />
+        </PopoverContent>
+      </Popover>
+      <input type="hidden" name={startName} value={range.from ? formatDateInput(range.from) : ""} />
+      <input type="hidden" name={endName} value={range.to ? formatDateInput(range.to) : ""} />
+    </div>
+  );
+}
+
+/**
+ * DateField — calendar picker backed by hidden inputs that submit "YYYY-MM-DD"
+ * local date strings, so forms never receive UTC-shifted dates. Supports both
+ * a single date (`name`) and a range (`startName` + `endName`).
+ *
+ * @example
+ * <DateField name="startDate" defaultValue="2020-01-15" label="Start date" />
+ * <DateField
+ *   mode="range"
+ *   startName="startDate"
+ *   endName="endDate"
+ *   defaultValue={{ from: "2020-01-15", to: "2020-06-30" }}
+ *   label="Active period"
+ * />
+ */
+function DateField(props: DateFieldProps) {
+  if (props.mode === "range") {
+    return <RangeDateField {...props} />;
+  }
+  return <SingleDateField {...props} />;
+}
+
+export { DateField };

package/src/components/forms/date-picker.tsx

@@ -55,8 +55,12 @@ export function DatePicker({
             </Button>
           </PopoverTrigger>
         </div>
-        <PopoverContent className="bg-popover w-auto p-0" align={popoverAlign}>
-          <Calendar mode="single" selected={value} onSelect={onSelect} />
+        <PopoverContent
+          className="bg-popover w-auto p-0"
+          align={popoverAlign}
+          aria-label={label ?? "Choose a date"}
+        >
+          <Calendar mode="single" selected={value} defaultMonth={value} onSelect={onSelect} />
         </PopoverContent>
       </Popover>
     </div>

package/src/components/forms/date-utils.ts

@@ -0,0 +1,32 @@
+/**
+ * Parse a date-only string ("YYYY-MM-DD") as a local calendar day instead of
+ * UTC midnight, so negative-UTC-offset timezones don't render the previous day.
+ * Accepts a `Date` (returned as-is when valid) and returns `undefined` for
+ * null/undefined/invalid input.
+ */
+export function parseDateInput(value: Date | string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? undefined : value;
+  const [year, month, day] = value.split("-").map(Number);
+  if (!year || !month || !day) return undefined;
+  const date = new Date(year, month - 1, day);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+/**
+ * Serialize a date to its "YYYY-MM-DD" form using local components, so the
+ * value round-trips without a UTC shift. Returns "" for invalid input.
+ */
+export function formatDateInput(value: Date | string | null | undefined): string {
+  const date = parseDateInput(value);
+  if (!date) return "";
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+/** Today's date as a "YYYY-MM-DD" local string. */
+export function todayDateInput(): string {
+  return formatDateInput(new Date());
+}

package/src/components/forms/index.ts

@@ -2,6 +2,9 @@ export { FilterSelect } from "../filters/filter-select";
 export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
 export { Calendar } from "./calendar";
 export type { CalendarProps } from "./calendar";
+export { DateField } from "./date-field";
+export type { DateFieldProps } from "./date-field";
+export { formatDateInput, parseDateInput, todayDateInput } from "./date-utils";
 export { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
 export type { DateMonthSelectProps } from "./date-month-select";
 export { DatePicker } from "./date-picker";

package/src/components/forms/select.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { expect, userEvent, within } from "storybook/test";
 
 import {
   Select,
@@ -36,6 +38,117 @@ export const Default: Story = {
   ),
 };
 
+export const SelectedValue: Story = {
+  render: () => (
+    <Select defaultValue="banana">
+      <SelectTrigger className="w-[180px]" aria-label="Selected fruit">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Selected fruit" })).toHaveTextContent(
+      "Banana",
+    );
+  },
+};
+
+export const ExplicitItems: Story = {
+  render: () => (
+    <Select
+      defaultValue="us"
+      items={[
+        { value: "us", label: "United States" },
+        { value: "ca", label: "Canada" },
+      ]}
+    >
+      <SelectTrigger aria-label="Country">
+        <SelectValue placeholder="Select a country" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="us">US</SelectItem>
+        <SelectItem value="ca">CA</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Country" })).toHaveTextContent(
+      "United States",
+    );
+  },
+};
+
+export const NullItem: Story = {
+  render: () => (
+    <Select
+      defaultValue={null}
+      items={[{ value: null, label: "All options" }]}
+    >
+      <SelectTrigger aria-label="Filter">
+        <SelectValue placeholder="Choose a filter" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem>All options</SelectItem>
+        <SelectItem value="active">Active</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Filter" })).toHaveTextContent(
+      "All options",
+    );
+  },
+};
+
+function ControlledNullSelection() {
+  const [value, setValue] = React.useState<string | null>("active");
+  const [lastChange, setLastChange] = React.useState<string | null>("active");
+
+  return (
+    <div>
+      <Select
+        value={value}
+        onValueChange={(nextValue) => {
+          setValue(nextValue);
+          setLastChange(nextValue);
+        }}
+        items={[
+          { value: null, label: "All options" },
+          { value: "active", label: "Active" },
+        ]}
+      >
+        <SelectTrigger aria-label="Controlled filter">
+          <SelectValue placeholder="Choose a filter" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem>All options</SelectItem>
+          <SelectItem value="active">Active</SelectItem>
+        </SelectContent>
+      </Select>
+      <output aria-label="Last selected value">{lastChange ?? "null"}</output>
+    </div>
+  );
+}
+
+export const ControlledNullChange: Story = {
+  render: () => <ControlledNullSelection />,
+  parameters: { a11y: { test: "off" } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("combobox", { name: "Controlled filter" });
+
+    await userEvent.click(trigger);
+    await userEvent.click(await within(document.body).findByRole("option", { name: "All options" }));
+    await expect(trigger).toHaveTextContent("All options");
+    await expect(canvas.getByRole("status", { name: "Last selected value" })).toHaveTextContent("null");
+    await userEvent.keyboard("{Escape}");
+  },
+};
+
 export const WithGroups: Story = {
   render: () => (
     <Select>
@@ -70,6 +183,9 @@ export const Disabled: Story = {
       </SelectContent>
     </Select>
   ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Select a fruit" })).toBeDisabled();
+  },
 };
 
 export const Small: Story = {

package/src/components/forms/select.tsx

@@ -6,22 +6,19 @@ import { cn } from "../../lib/utils";
 
 type SelectProps = Omit<
   React.ComponentProps<typeof SelectPrimitive.Root<string>>,
-  "onValueChange" | "value" | "defaultValue"
+  "value" | "defaultValue"
 > & {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
+  value?: string | null;
+  defaultValue?: string | null;
 };
 
-function Select({ onValueChange, ...props }: SelectProps) {
+function Select({ children, items, ...props }: SelectProps) {
+  const resolvedItems = items ?? getItemsFromChildren(children);
+
   return (
-    <SelectPrimitive.Root
-      data-slot="select"
-      {...props}
-      onValueChange={(value) => {
-        if (value !== null) onValueChange?.(value);
-      }}
-    />
+    <SelectPrimitive.Root data-slot="select" items={resolvedItems} {...props}>
+      {children}
+    </SelectPrimitive.Root>
   );
 }
 
@@ -129,6 +126,33 @@ function SelectItem({
   );
 }
 
+function getItemsFromChildren(children: React.ReactNode): Record<string, React.ReactNode> {
+  const items: Record<string, React.ReactNode> = {};
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+
+    const element = child as React.ReactElement<{
+      children?: React.ReactNode;
+      value?: unknown;
+    }>;
+
+    if (element.type === SelectItem) {
+      const value = element.props.value;
+      if (typeof value === "string") {
+        items[value] = element.props.children;
+      }
+      return;
+    }
+
+    if (element.props.children) {
+      Object.assign(items, getItemsFromChildren(element.props.children));
+    }
+  });
+
+  return items;
+}
+
 function SelectScrollUpButton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <SelectPrimitive.ScrollUpArrow

package/src/components/navigation/app-navigation.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as React from "react";
+import { userEvent, within } from "storybook/test";
 
 import { Button } from "../primitives/button";
 import { Navigation } from "./app-navigation";
@@ -173,3 +174,44 @@ export const WithExtraContent: Story = {
     </>
   ),
 };
+
+/**
+ * `@internal` — undocumented Nokia 3310-style LCD skin for the mobile Sheet
+ * menu, opted into via `variant="nokia"`. Only affects the mobile Sheet, so
+ * this story forces a mobile viewport and auto-opens the menu trigger.
+ */
+export const Nokia: Story = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+    chromatic: { viewports: [375] },
+  },
+  render: () => (
+    <>
+      <Navigation variant="nokia">
+        <Navigation.Brand>
+          <a href="/">Acme</a>
+        </Navigation.Brand>
+
+        <Navigation.List>
+          {defaultLinks.map((link) => (
+            <Navigation.Item key={link.href} href={link.href} active={link.href === "/pricing"}>
+              {link.label}
+            </Navigation.Item>
+          ))}
+        </Navigation.List>
+
+        <Navigation.Action>
+          <Button size="md" asChild>
+            <a href="/get-started">Get started</a>
+          </Button>
+        </Navigation.Action>
+      </Navigation>
+      <PageContent message="Open the menu button to see the Nokia 3310-style LCD skin." />
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: /open menu/i });
+    await userEvent.click(trigger);
+  },
+};

package/src/styles/nokia.css

@@ -3,14 +3,12 @@
  * skin for the mobile Sheet menu. Not part of the public API surface (no
  * README/Storybook entry); opt in via `<Navigation variant="nokia">`.
  */
-@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
-
 @theme {
   --color-nokia-screen: #c8d6a6;
   --color-nokia-screen-deep: #b0c188;
   --color-nokia-ink: #26331b;
   --color-nokia-bezel: #1a1a1a;
-  --font-nokia: "VT323", "Courier New", monospace;
+  --font-nokia: ui-monospace, "SF Mono", "Courier New", monospace;
 }
 
 /* No `position: relative` here — SheetContent is `position: fixed` via its