@ponti-studios/ui 0.7.1 → 1.0.0

package/README.md

@@ -11,6 +11,19 @@ The design system is documented in `docs/`:
 - [Patterns](./docs/patterns.md) — screen composition rules
 - [Review gates](./docs/review-gates.md) — pass/fail review criteria
 
+## Development
+
+Common development workflows are available through the `Makefile`:
+
+```bash
+make check          # tokens, source contracts, and typecheck
+make tokens-build   # regenerate token artifacts
+make storybook      # build Storybook themes and start Storybook
+make test-a11y      # run light and dark accessibility tests
+```
+
+The existing `pnpm run` scripts delegate to these targets for compatibility.
+
 ## Release
 
 Releases are owned by [release-please](https://github.com/googleapis/release-please), not by hand-edited version numbers or manually pushed tags. The `.github/workflows/publish.yml` workflow runs after a successful `validate` push to `main`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.7.1",
+  "version": "1.0.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -82,18 +82,20 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "tsc --noEmit",
+    "build": "make build",
     "dev": "vite",
-    "storybook": "style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json && storybook dev -p 6006",
-    "check:source": "node src/styles/tokens/scripts/check-source.mjs",
-    "test": "vitest --run --config vitest.config.ts",
-    "test:a11y": "vitest --run --config vitest.config.ts",
-    "tokens:build": "style-dictionary build --config src/styles/tokens/style-dictionary.foundations.json && style-dictionary build --config src/styles/tokens/style-dictionary.light.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json",
-    "tokens:check": "pnpm run tokens:build && node src/styles/tokens/scripts/check-foundations.mjs && git diff --exit-code -- src/styles/tokens/generated",
-    "typecheck": "tsc --noEmit",
-    "lint": "oxlint src --fix",
-    "format": "oxfmt src --write",
-    "prepack": "pnpm run tokens:check && pnpm run check:source && pnpm run typecheck"
+    "storybook": "make storybook",
+    "check:source": "make check-source",
+    "test": "make test",
+    "test:a11y": "make test-a11y",
+    "test:a11y:light": "make test-a11y-light",
+    "test:a11y:dark": "make test-a11y-dark",
+    "tokens:build": "make tokens-build",
+    "tokens:check": "make tokens-check",
+    "typecheck": "make typecheck",
+    "lint": "make lint",
+    "format": "make format",
+    "prepack": "make prepack"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
@@ -107,13 +109,13 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@storybook/addon-a11y": "10.5.3",
-    "@storybook/addon-docs": "^10.5.3",
-    "@storybook/addon-links": "^10.5.3",
-    "@storybook/addon-onboarding": "^10.5.3",
-    "@storybook/addon-themes": "10.5.3",
-    "@storybook/addon-vitest": "10.5.3",
-    "@storybook/react-vite": "^10.5.3",
+    "@storybook/addon-a11y": "10.5.6",
+    "@storybook/addon-docs": "10.5.6",
+    "@storybook/addon-links": "10.5.6",
+    "@storybook/addon-onboarding": "10.5.6",
+    "@storybook/addon-themes": "10.5.6",
+    "@storybook/addon-vitest": "10.5.6",
+    "@storybook/react-vite": "10.5.6",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
@@ -127,7 +129,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-native": "0.86.0",
-    "storybook": "^10.5.3",
+    "storybook": "10.5.6",
     "style-dictionary": "5.5.0",
     "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",

package/src/components/data-display/accordion.tsx

@@ -46,7 +46,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "flex w-full flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          "text-muted-foreground flex w-full flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className,
         )}
         {...props}

package/src/components/data-display/sort-controls.tsx

@@ -48,10 +48,10 @@ export function SortControls({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-80 space-y-2 p-2">
-        <DropdownMenuLabel>Define Sort Order</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-
         <DropdownMenuGroup className="space-y-1">
+          <DropdownMenuLabel>Define Sort Order</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+
           {sortOptions.map((sort, index) => {
             const usedFields = sortOptions
               .filter((_, i) => i !== index)

package/src/components/feedback/index.ts

@@ -3,8 +3,6 @@ export { EmptyState } from "./empty-state";
 export type { EmptyStateProps } from "./empty-state";
 export { FileUploadStatus } from "./file-upload-status";
 export type { FileUploadState, FileUploadStats } from "./file-upload-status";
-export { FileUploadStatusBadge } from "./file-upload-status-badge";
-export type { FileUploadStatusValue } from "./file-upload-status-badge";
 export { Progress } from "./progress";
 export { ProgressBar } from "./progress-bar";
 export type { ProgressBarProps } from "./progress-bar";

package/src/components/forms/date-month-select.tsx

@@ -1,6 +1,7 @@
 import { Calendar } from "lucide-react";
 import { useMemo } from "react";
 
+import { cn } from "../../lib/utils";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 
 interface MonthOption {
@@ -40,13 +41,21 @@ export function DateMonthSelect({
   }, [monthsBack]);
 
   return (
-    <div className="flex items-center gap-2">
-      <Calendar className="size-4" />
+    <div className="flex items-center">
+      <div className="flex items-center justify-center size-10 border rounded-l-xl bg-surface-2 text-text-1">
+        <Calendar className="size-4" />
+      </div>
       <Select
         value={selectedMonthYear}
         onValueChange={(v: string | null) => v != null && onMonthChange(v)}
       >
-        <SelectTrigger className={className} aria-label={placeholder}>
+        <SelectTrigger
+          className={cn(
+            "rounded-r-xl rounded-l-none min-h-10 max-h-10 bg-surface-2 text-text-1 border-l-0",
+            className,
+          )}
+          aria-label={placeholder}
+        >
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>

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

@@ -1,9 +1,9 @@
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 
-import { Button } from "../primitives/button";
 import { Calendar } from "../forms/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlays/popover";
+import { Button } from "../primitives/button";
 
 export interface DatePickerProps {
   value: Date | undefined;
@@ -40,17 +40,21 @@ export function DatePicker({
         </label>
       ) : null}
       <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant={variant}
-            disabled={disabled}
-            className="bg-muted placeholder:text-muted-foreground w-full justify-start text-left font-normal"
-          >
-            <CalendarIcon className="mr-2 size-4" />
-            {value ? format(value, dateFormat) : <span>{placeholder}</span>}
-          </Button>
-        </PopoverTrigger>
+        <div className="flex w-full items-center">
+          <div className="border-border bg-surface-2 text-text-1 flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
+            <CalendarIcon className="size-4" aria-hidden />
+          </div>
+          <PopoverTrigger asChild>
+            <Button
+              id={id}
+              variant={variant}
+              disabled={disabled}
+              className="border-border bg-surface-2 text-text-1 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"
+            >
+              {value ? format(value, dateFormat) : <span>{placeholder}</span>}
+            </Button>
+          </PopoverTrigger>
+        </div>
         <PopoverContent className="bg-popover w-auto p-0" align={popoverAlign}>
           <Calendar mode="single" selected={value} onSelect={onSelect} />
         </PopoverContent>

package/src/components/forms/drop-zone.tsx

@@ -126,7 +126,7 @@ export function DropZone({
       >
         <div className="space-y-2 text-center">
           <p className="text-muted-foreground">
-            {label} <span className="text-foreground font-medium">click to browse</span>
+            {label} <span className="text-accent font-medium">click to browse</span>
           </p>
           {helpText ? <p className="text-muted-foreground text-sm">{helpText}</p> : null}
         </div>

package/src/components/forms/index.ts

@@ -1,17 +1,13 @@
+export { FilterSelect } from "../filters/filter-select";
+export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
 export { Calendar } from "./calendar";
 export type { CalendarProps } from "./calendar";
-export { DatePicker } from "./date-picker";
-export type { DatePickerProps } from "./date-picker";
 export { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
 export type { DateMonthSelectProps } from "./date-month-select";
+export { DatePicker } from "./date-picker";
+export type { DatePickerProps } from "./date-picker";
 export { DropZone } from "./drop-zone";
 export type { DropZoneProps } from "./drop-zone";
-export { Field } from "./field";
-export type { FieldProps } from "./field";
-export { FilterSelect } from "../filters/filter-select";
-export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
-export { GroupBySelect } from "./group-by-select";
-export type { GroupBySelectProps } from "./group-by-select";
 export { Input } from "./input";
 export { PasskeyManagement } from "./passkey-management";
 export type { PasskeyManagementProps, PasskeyRecord } from "./passkey-management";

package/src/components/forms/passkey-management.tsx

@@ -68,17 +68,11 @@ export function PasskeyManagement({
   return (
     <section aria-labelledby="passkey-heading" className="space-y-4">
       <div className="flex items-center justify-between">
-        <div>
-          <h2 id="passkey-heading" className="text-foreground text-sm font-medium">
-            Passkeys
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            Sign in without a password using biometrics or a security key.
-          </p>
-        </div>
+        <h2 id="passkey-heading" className="text-foreground text-sm font-medium">
+          Passkeys
+        </h2>
         <Button
           type="button"
-          variant="outline"
           size="sm"
           onClick={() => void handleAdd()}
           disabled={adding}
@@ -107,7 +101,7 @@ export function PasskeyManagement({
           {passkeys.map((pk) => (
             <li
               key={pk.id}
-              className="border-border flex items-center justify-between border px-4 py-3 text-sm"
+              className="border-border rounded flex items-center justify-between border px-4 py-3 text-sm"
             >
               <div className="flex items-center gap-3">
                 <KeyRound className="text-muted-foreground size-4 shrink-0" aria-hidden />

package/src/components/forms/radio-group.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { Circle } from "lucide-react";
 import * as React from "react";
 
@@ -23,13 +23,17 @@ const RadioGroupItem = React.forwardRef<
     <RadioPrimitive.Root
       ref={ref}
       className={cn(
-        "border-primary bg-background text-foreground focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring aspect-square h-6 w-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "border-primary bg-background focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring aspect-square size-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "flex items-center justify-center",
         className,
       )}
       {...props}
     >
-      <RadioPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="fill-primary h-4 w-4" />
+      <RadioPrimitive.Indicator
+        keepMounted
+        className="data-unchecked:opacity-0 data-checked:opacity-100 data-starting-style:animate-fade-in data-ending-style:animate-fade-out"
+      >
+        <Circle className="fill-primary size-5" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   );

package/src/components/forms/select.tsx

@@ -71,7 +71,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
+            "bg-background text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
             className,
           )}
           {...props}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Field } from "./field";
+import { cn } from "../../lib/utils";
 import { Input } from "./input";
 import type { TextFieldBaseProps, TextFieldType } from "./text-field.types";
 
@@ -26,14 +26,49 @@ function TextField({
   type = "text",
   ...inputProps
 }: TextFieldProps) {
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const descriptionId = `${inputId}-description`;
+  const errorId = `${inputId}-error`;
+
   if (!label && !helpText && !error) {
-    return <Input className={className} disabled={disabled} type={type} {...inputProps} />;
+    return (
+      <Input id={inputId} className={className} disabled={disabled} type={type} {...inputProps} />
+    );
   }
 
   return (
-    <Field id={id} label={label} helpText={helpText} error={error}>
-      <Input className={className} disabled={disabled} type={type} {...inputProps} />
-    </Field>
+    <div className="flex flex-col gap-1.5">
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn(
+            "text-foreground text-sm font-medium",
+            inputProps.required && "after:text-destructive-text after:ml-0.5 after:content-['*']",
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <Input
+        id={inputId}
+        className={className}
+        disabled={disabled}
+        type={type}
+        aria-describedby={error ? errorId : helpText ? descriptionId : undefined}
+        aria-invalid={error ? true : undefined}
+        {...inputProps}
+      />
+      {error ? (
+        <p id={errorId} role="alert" className="text-destructive-text text-sm">
+          {error}
+        </p>
+      ) : helpText ? (
+        <p id={descriptionId} className="text-muted-foreground text-sm">
+          {helpText}
+        </p>
+      ) : null}
+    </div>
   );
 }
 

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

@@ -1,17 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as React from "react";
 
-import { AppNavigation } from "./app-navigation";
+import { Button } from "../primitives/button";
+import { Navigation } from "./app-navigation";
 
-const meta: Meta<typeof AppNavigation> = {
+const meta: Meta<typeof Navigation> = {
   title: "Navigation/AppNavigation",
-  component: AppNavigation,
+  component: Navigation,
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen",
   },
 };
-
 export default meta;
 type Story = StoryObj<typeof meta>;
 
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 // Shared helpers
 // ---------------------------------------------------------------------------
 
-const defaultLinks: Array<{ href: string; label: string }> = [
+const defaultLinks = [
   { href: "/features", label: "Features" },
   { href: "/pricing", label: "Pricing" },
   { href: "/blog", label: "Blog" },
@@ -46,12 +46,25 @@ function PageContent({
 export const Default: Story = {
   render: () => (
     <>
-      <AppNavigation
-        brand="Acme"
-        brandHref="/"
-        links={defaultLinks}
-        cta={{ href: "/get-started", label: "Get started", variant: "default" }}
-      />
+      <Navigation>
+        <Navigation.Brand>
+          <a href="/">Acme</a>
+        </Navigation.Brand>
+
+        <Navigation.List>
+          {defaultLinks.map((link) => (
+            <Navigation.Item key={link.href} href={link.href}>
+              {link.label}
+            </Navigation.Item>
+          ))}
+        </Navigation.List>
+
+        <Navigation.Action>
+          <Button size="md" asChild>
+            <a href="/get-started">Get started</a>
+          </Button>
+        </Navigation.Action>
+      </Navigation>
       <PageContent />
     </>
   ),
@@ -60,22 +73,99 @@ export const Default: Story = {
 export const NoCta: Story = {
   render: () => (
     <>
-      <AppNavigation brand="Acme" brandHref="/" links={defaultLinks} />
-      <PageContent message="Same nav, no CTA button." />
+      <Navigation>
+        <Navigation.Brand>
+          <a href="/">Acme</a>
+        </Navigation.Brand>
+        <Navigation.List>
+          {defaultLinks.map((link) => (
+            <Navigation.Item key={link.href} href={link.href}>
+              {link.label}
+            </Navigation.Item>
+          ))}
+        </Navigation.List>
+      </Navigation>
+      <PageContent message="Same nav, no Action content." />
     </>
   ),
 };
 
-export const OutlineCta: Story = {
+/**
+ * `Navigation.Item` (and any of the other pieces) support the same
+ * `asChild` composition as `Button`: pass your router's `Link` (or
+ * anything else) as the single child. This story stands in for a router
+ * `Link` with a plain anchor that no-ops on click, since Storybook has no
+ * router.
+ */
+export const WithCustomRouterLink: Story = {
+  render: () => {
+    const activeHref = "/pricing";
+    return (
+      <>
+        <Navigation>
+          <Navigation.Brand>
+            <a href="/" data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
+              Acme
+            </a>
+          </Navigation.Brand>
+
+          <Navigation.List>
+            {defaultLinks.map((link) => (
+              <Navigation.Item key={link.href} asChild active={link.href === activeHref}>
+                <a href={link.href} data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
+                  {link.label}
+                </a>
+              </Navigation.Item>
+            ))}
+          </Navigation.List>
+
+          <Navigation.Action>
+            <Button size="md" asChild>
+              <a href="/get-started" data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
+                Get started
+              </a>
+            </Button>
+          </Navigation.Action>
+        </Navigation>
+        <PageContent message="Every link here is a custom element composed via asChild - open the elements panel to see data-router-link on each one, and the /pricing item's data-active/aria-current." />
+      </>
+    );
+  },
+};
+
+/**
+ * Composition means arbitrary content can sit alongside the link list and
+ * action area without any prop-shape changes to `Navigation` itself.
+ */
+export const WithExtraContent: Story = {
   render: () => (
     <>
-      <AppNavigation
-        brand="Acme"
-        brandHref="/"
-        links={defaultLinks}
-        cta={{ href: "/get-started", label: "Get started", variant: "outline" }}
-      />
-      <PageContent message="The outline CTA keeps the same navigation geometry with a quieter emphasis." />
+      <Navigation>
+        <Navigation.Brand>
+          <a href="/">Acme</a>
+        </Navigation.Brand>
+
+        <Navigation.List>
+          {defaultLinks.slice(0, 2).map((link) => (
+            <Navigation.Item key={link.href} href={link.href}>
+              {link.label}
+            </Navigation.Item>
+          ))}
+        </Navigation.List>
+
+        <input
+          type="search"
+          placeholder="Search..."
+          className="h-9 w-40 rounded-md border bg-background px-3 text-sm"
+        />
+
+        <Navigation.Action>
+          <Button size="md" variant="outline" asChild>
+            <a href="/get-started">Get started</a>
+          </Button>
+        </Navigation.Action>
+      </Navigation>
+      <PageContent message="A search input sits directly between the link list and the action area — no endContent prop needed." />
     </>
   ),
 };