@ponti-studios/ui 1.3.0 → 1.5.0

package/package.json

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

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/navigation/app-navigation.tsx

@@ -7,13 +7,36 @@ import { Slot } from "../../lib/slot";
 import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from "../overlays/sheet";
 import { Button } from "../primitives/button";
 
-/** True while rendering inside the mobile Sheet copy of the nav content. */
-const MobileMenuContext = React.createContext(false);
+type MobileMenuState = {
+  /** True while rendering inside the mobile Sheet copy of the nav content. */
+  isMobile: boolean;
+  variant?: NavigationVariant;
+};
+
+const MobileMenuContext = React.createContext<MobileMenuState>({ isMobile: false });
+
+/** @internal Undocumented — not part of the public API surface. */
+type NavigationVariant = "nokia";
+
+// Nokia 3310-style monochrome LCD skin for the mobile Sheet. See
+// src/styles/nokia.css for the palette/font tokens and scanline texture.
+const NOKIA_SHEET_CLASSNAME =
+  "nokia-screen rounded-none border-[6px] border-nokia-bezel bg-nokia-screen p-4 font-nokia text-nokia-ink shadow-[0_0_0_3px_var(--color-nokia-screen-deep),0_10px_30px_-6px_rgba(0,0,0,0.65)]";
+const NOKIA_SHEET_CLOSE_CLASSNAME =
+  "text-nokia-ink hover:bg-nokia-ink hover:text-nokia-screen rounded-none border-2 border-nokia-ink";
+const NOKIA_LIST_CLASSNAME = "!grid grid-cols-3 gap-3";
+const NOKIA_ITEM_CLASSNAME =
+  "!h-auto !max-h-none w-full flex-col justify-center gap-1 rounded-none border-2 border-nokia-ink/40 px-2 py-3 text-center font-nokia text-base tracking-widest uppercase hover:bg-transparent active:bg-nokia-ink active:text-nokia-screen data-[active]:border-nokia-ink data-[active]:bg-nokia-ink data-[active]:text-nokia-screen";
 
 export interface NavigationRootProps {
   children: ReactNode;
   ariaLabel?: string;
   className?: string;
+  /**
+   * @internal Undocumented mobile-Sheet skin, not part of the public API
+   * (no README/Storybook entry). Opt in at your own risk.
+   */
+  variant?: NavigationVariant;
 }
 
 /**
@@ -30,8 +53,10 @@ function NavigationRoot({
   children,
   ariaLabel = "Primary navigation",
   className,
+  variant,
 }: NavigationRootProps) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const isNokia = variant === "nokia";
 
   const items = React.Children.toArray(children);
   const brand = items.find(
@@ -63,10 +88,15 @@ function NavigationRoot({
                 <Menu className="size-4" aria-hidden="true" />
               </Button>
             </SheetTrigger>
-            <SheetContent>
+            <SheetContent
+              className={isNokia ? NOKIA_SHEET_CLASSNAME : undefined}
+              closeClassName={isNokia ? NOKIA_SHEET_CLOSE_CLASSNAME : undefined}
+            >
               <SheetTitle className="sr-only">Navigation menu</SheetTitle>
               <div className="mt-8 flex flex-1 flex-col gap-4">
-                <MobileMenuContext.Provider value={true}>{rest}</MobileMenuContext.Provider>
+                <MobileMenuContext.Provider value={{ isMobile: true, variant }}>
+                  {rest}
+                </MobileMenuContext.Provider>
               </div>
             </SheetContent>
           </Sheet>
@@ -93,12 +123,14 @@ export interface NavigationListProps {
 
 /** Semantic `<ul>` of `Navigation.Item`s. Lays out horizontally on desktop, stacks inside the mobile Sheet. */
 function NavigationList({ children, className }: NavigationListProps) {
-  const isMobile = React.useContext(MobileMenuContext);
+  const { isMobile, variant } = React.useContext(MobileMenuContext);
+  const isNokia = isMobile && variant === "nokia";
   return (
     <ul
       className={cn(
         "flex items-center gap-1",
         isMobile && "flex-col items-stretch gap-1",
+        isNokia && NOKIA_LIST_CLASSNAME,
         className,
       )}
     >
@@ -124,9 +156,11 @@ function NavigationItem({
   children,
   ...props
 }: NavigationItemProps) {
-  const isMobile = React.useContext(MobileMenuContext);
+  const { isMobile, variant } = React.useContext(MobileMenuContext);
+  const isNokia = isMobile && variant === "nokia";
   const itemClassName = cn(
     "inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground data-[active]:font-semibold data-[active]:text-foreground",
+    isNokia && NOKIA_ITEM_CLASSNAME,
     className,
   );
 
@@ -166,12 +200,14 @@ export interface NavigationActionProps {
  * for a link that should close the menu when tapped.
  */
 function NavigationAction({ children, className }: NavigationActionProps) {
-  const isMobile = React.useContext(MobileMenuContext);
+  const { isMobile, variant } = React.useContext(MobileMenuContext);
+  const isNokia = isMobile && variant === "nokia";
   return (
     <div
       className={cn(
         "flex items-center gap-3",
         isMobile && "mt-2 flex-col items-stretch gap-3 border-t pt-4",
+        isNokia && "border-nokia-ink/40",
         className,
       )}
     >

package/src/components/overlays/sheet.tsx

@@ -72,12 +72,15 @@ const sheetClassName = [
   "md:w-3/4 md:max-w-sm md:min-h-0",
 ];
 
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Popup> {}
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Popup> {
+  /** Applied to the built-in close button, alongside its default styling. */
+  closeClassName?: string;
+}
 
 const SheetContent = React.forwardRef<
   React.ComponentRef<typeof SheetPrimitive.Popup>,
   SheetContentProps
->(({ className, children, ...props }, ref) => (
+>(({ className, closeClassName, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Popup
@@ -86,7 +89,12 @@ const SheetContent = React.forwardRef<
       className={cn(sheetClassName, className)}
       {...props}
     >
-      <SheetPrimitive.Close className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4">
+      <SheetPrimitive.Close
+        className={cn(
+          "text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none md:top-4 md:right-4",
+          closeClassName,
+        )}
+      >
         <X className="size-4.5" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

package/src/styles/index.css

@@ -18,6 +18,7 @@
 @import "./tokens/generated/light.css";
 @import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
 @import "./animations.css";
+@import "./nokia.css";
 
 @theme {
   --animate-accordion-down: accordion-down 200ms ease-out;

package/src/styles/nokia.css

@@ -0,0 +1,38 @@
+/*
+ * Undocumented "nokia" Navigation variant — Nokia 3310-style monochrome LCD
+ * 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;
+}
+
+/* No `position: relative` here — SheetContent is `position: fixed` via its
+ * own Tailwind class, and a same-specificity `.nokia-screen { position:
+ * relative }` loaded later in the cascade would silently win and break the
+ * sheet's fixed/inset layout (bit us once already; see labs' app.css). The
+ * `::before` overlay below still gets a positioning context from the
+ * ancestor's `fixed`, so this class never needs to set position itself. */
+.nokia-screen {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    rgb(0 0 0 / 0.05) 0,
+    rgb(0 0 0 / 0.05) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+}
+
+.nokia-screen::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 12px 2px rgb(0 0 0 / 0.25);
+  pointer-events: none;
+}