@ponti-studios/ui 1.1.0 → 1.3.0

package/src/styles/tokens/source/native.tokens.json

@@ -29,15 +29,15 @@
     "icon": { "$value": "{radius.md}" }
   },
   "stream-item": {
-    "$description": "Shared look for stream rows (time, inbox). Mirrors what the app used to hand-roll in theme.ts.",
+    "$description": "Shared flat list-row look (Inbox, Time, Tasks) — Vercel-style dense list: full-bleed bottom divider, no radius.",
     "$type": "dimension",
-    "border-radius": { "$value": "{radius.md}" },
+    "border-radius": { "$value": { "value": 0, "unit": "rem" } },
     "border-width": { "$value": { "value": 1, "unit": "px" } },
-    "gap": { "$value": "{spacing-scale.2}" },
-    "icon-size": { "$value": "{component-size.md}" },
-    "min-height": { "$value": { "value": 50, "unit": "px" } },
-    "padding-horizontal": { "$value": "{spacing-scale.2}" },
-    "padding-vertical": { "$value": "{spacing-scale.1}" }
+    "gap": { "$value": "{spacing-scale.3}" },
+    "icon-size": { "$value": "{component-size.icon}" },
+    "min-height": { "$value": "{spacing-scale.14}" },
+    "padding-horizontal": { "$value": "{spacing-scale.4}" },
+    "padding-vertical": { "$value": "{spacing-scale.2}" }
   },
   "font-family": {
     "$type": "string",
@@ -165,5 +165,40 @@
         "letterSpacing": { "value": 0, "unit": "px" }
       }
     }
+  },
+  "motion": {
+    "$description": "Portable motion semantics. Platform adapters own runtime animation objects and reduced-motion behavior.",
+    "duration": {
+      "$type": "duration",
+      "instant": { "$value": "0ms" },
+      "quick": { "$value": "{duration.150}" },
+      "standard": { "$value": "{duration.300}" },
+      "deliberate": { "$value": "{duration.500}" }
+    },
+    "easing": {
+      "$type": "cubicBezier",
+      "enter": { "$value": "{ease.out}" },
+      "exit": { "$value": "{ease.in}" },
+      "inOut": { "$value": "{ease.in-out}" }
+    },
+    "distance": {
+      "$type": "dimension",
+      "rowEnter": { "$value": "{spacing-scale.2}" },
+      "sceneReveal": { "$value": "{spacing-scale.8}" }
+    },
+    "opacity": {
+      "$type": "number",
+      "hidden": { "$value": 0 },
+      "visible": { "$value": 1 },
+      "disabled": { "$value": 0.5 }
+    },
+    "interruption": {
+      "$type": "string",
+      "policy": { "$value": "cancel-and-settle" }
+    },
+    "reducedMotion": {
+      "$type": "string",
+      "policy": { "$value": "replace-transform-with-opacity" }
+    }
   }
 }

package/src/styles/tokens/style-dictionary.native.mjs

@@ -5,7 +5,10 @@
  * foundations.generated.ts.
  */
 export default {
-  source: ["src/styles/tokens/source/foundations.tokens.json", "src/styles/tokens/source/native.tokens.json"],
+  source: [
+    "src/styles/tokens/source/foundations.tokens.json",
+    "src/styles/tokens/source/native.tokens.json",
+  ],
   platforms: {
     typescript: {
       transformGroup: "js",

package/src/components/filters/filters.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
-
-import { Input } from '../forms/input';
-import { Filters } from './filters';
-
-const meta = {
-  title: 'Filters/Compound',
-  component: Filters,
-  tags: ['autodocs'],
-  args: {
-    children: null,
-  },
-} satisfies Meta<typeof Filters>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const statusOptions = [
-  { value: 'active', label: 'Active' },
-  { value: 'interview', label: 'Interview' },
-  { value: 'offer', label: 'Offer' },
-];
-
-export const Default: Story = {
-  render: () => (
-    <div className="w-[720px]">
-      <Filters>
-        <Filters.Search label="Search">
-          <Input placeholder="Search applications..." aria-label="Search applications" />
-        </Filters.Search>
-        <Filters.Select
-          value="active"
-          options={statusOptions}
-          onChange={() => {}}
-          placeholder="All statuses"
-          label="Status"
-        />
-        <Filters.Select
-          value=""
-          options={[{ value: 'engineer', label: 'Engineer' }]}
-          onChange={() => {}}
-          placeholder="All roles"
-          label="Role"
-        />
-        <Filters.Active
-          filters={[
-            { id: 'status', label: 'Status: Active', onRemove: () => {} },
-            { id: 'sort', label: 'Date', onRemove: () => {}, variant: 'sort', direction: 'desc' },
-          ]}
-          onClearAll={() => {}}
-        />
-      </Filters>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByText('Search')).toBeInTheDocument();
-    await expect(canvas.getByRole('textbox', { name: 'Search applications' })).toBeInTheDocument();
-
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
-
-    await expect(canvas.getByText('Role')).toBeInTheDocument();
-    await expect(canvas.getByRole('combobox', { name: 'Role' })).toBeInTheDocument();
-
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
-  },
-};

package/src/components/filters/filters.tsx

@@ -1,78 +0,0 @@
-import { Children, isValidElement, type ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { ActiveFiltersBar, type ActiveFiltersBarProps } from "./active-filters-bar";
-import { FilterSelect, type FilterSelectProps } from "./filter-select";
-import { Label } from "../primitives/label";
-
-export function FiltersSearch({
-  label,
-  children,
-}: {
-  label: string;
-  children: ReactNode;
-}) {
-  const id = `filters-search-${label.toLowerCase().replace(/\s+/g, "-")}`;
-  return (
-    <div className="flex-1 space-y-2">
-      <Label htmlFor={id}>{label}</Label>
-      {children}
-    </div>
-  );
-}
-FiltersSearch.slot = "search";
-
-export function FiltersSelect(props: FilterSelectProps) {
-  return <FilterSelect {...props} label={props.label ?? props.placeholder} />;
-}
-FiltersSelect.slot = "select";
-
-export function FiltersActive(props: ActiveFiltersBarProps) {
-  return <ActiveFiltersBar {...props} />;
-}
-FiltersActive.slot = "active";
-
-export interface FiltersProps {
-  children: ReactNode;
-  className?: string;
-}
-
-function FiltersRoot({ children, className }: FiltersProps) {
-  const search: ReactNode[] = [];
-  const selects: ReactNode[] = [];
-  const active: ReactNode[] = [];
-
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    const slot = (child.type as any)?.slot;
-    if (slot === "search") search.push(child);
-    else if (slot === "select") selects.push(child);
-    else if (slot === "active") active.push(child);
-  });
-
-  return (
-    <div className={cn("flex flex-col gap-4", className)}>
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-start">
-        {search}
-        {selects.map((s, i) => (
-          <div key={i} className="sm:w-48">
-            {s}
-          </div>
-        ))}
-      </div>
-      {active}
-    </div>
-  );
-}
-
-type FiltersComponent = typeof FiltersRoot & {
-  Search: typeof FiltersSearch;
-  Select: typeof FiltersSelect;
-  Active: typeof FiltersActive;
-};
-
-export const Filters: FiltersComponent = Object.assign(FiltersRoot, {
-  Search: FiltersSearch,
-  Select: FiltersSelect,
-  Active: FiltersActive,
-});

package/src/components/filters/search-filter-bar.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Input } from '../forms/input';
-import { FilterSelect } from './filter-select';
-import { SearchFilterBar } from './search-filter-bar';
-
-const meta = {
-  title: 'Filters/SearchFilterBar',
-  component: SearchFilterBar,
-  tags: ['autodocs'],
-} satisfies Meta<typeof SearchFilterBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Legacy: Story = {
-  args: {
-    activeFilters: [],
-  },
-  render: () => (
-    <div className="w-[720px]">
-      <SearchFilterBar
-        activeFilters={[
-          { id: 'status', label: 'Status: Active', onRemove: () => {} },
-        ]}
-        onClearAll={() => {}}
-        search={<Input placeholder="Search..." aria-label="Search" />}
-        filters={[
-          <FilterSelect
-            key="status"
-            value="active"
-            options={[{ value: 'active', label: 'Active' }]}
-            onChange={() => {}}
-            placeholder="All"
-            label="Status"
-          />,
-        ]}
-      />
-    </div>
-  ),
-};

package/src/components/filters/search-filter-bar.tsx

@@ -1,48 +0,0 @@
-import { type ReactNode } from 'react';
-
-import { cn } from '../../lib/utils';
-import { ActiveFiltersBar, type ActiveFilter } from './active-filters-bar';
-
-export interface SearchFilterBarProps {
-  activeFilters: ActiveFilter[];
-  onClearAll?: () => void;
-  search?: ReactNode;
-  filters?: ReactNode[];
-  results?: ReactNode;
-  children?: ReactNode;
-  className?: string;
-  filterItemClassName?: string;
-}
-
-export function SearchFilterBar({
-  activeFilters,
-  onClearAll,
-  search,
-  filters,
-  results,
-  children,
-  className,
-  filterItemClassName = 'sm:w-48',
-}: SearchFilterBarProps) {
-  return (
-    <div className={cn('flex flex-col gap-4', className)}>
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
-        {search ? <div className="flex-1">{search}</div> : null}
-
-        {filters?.map((filter, index) => (
-          <div key={index} className={filterItemClassName}>
-            {filter}
-          </div>
-        ))}
-
-        {results ? (
-          <div className="self-start lg:ml-auto lg:self-auto">{results}</div>
-        ) : null}
-
-        {children}
-      </div>
-
-      <ActiveFiltersBar filters={activeFilters} onClearAll={onClearAll} />
-    </div>
-  );
-}