@ponti-studios/ui 1.5.0 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.5.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/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