@ponti-studios/ui 0.7.1 → 1.0.0

package/src/styles/index.css

@@ -19,6 +19,30 @@
 @import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
 @import "./animations.css";
 
+@theme {
+  --animate-accordion-down: accordion-down 200ms ease-out;
+  --animate-accordion-up: accordion-up 200ms ease-out;
+  --animate-in: fade-in 150ms ease-out, zoom-in 150ms ease-out;
+  --animate-out: fade-out 120ms ease-in, zoom-out 120ms ease-in;
+  --animate-fade-in: fade-in 150ms ease-out;
+  --animate-fade-out: fade-out 120ms ease-in;
+  --animate-zoom-in: zoom-in 150ms ease-out;
+  --animate-zoom-out: zoom-out 120ms ease-in;
+}
+
+@utility fade-in-0 {
+  animation-name: fade-in;
+}
+@utility fade-out-0 {
+  animation-name: fade-out;
+}
+@utility zoom-in-95 {
+  animation-name: zoom-in;
+}
+@utility zoom-out-95 {
+  animation-name: zoom-out;
+}
+
 /* shadcn New York semantic contract. Values are generated from the DTCG
  * source; this file only names the roles consumed by web components. */
 @theme inline {
@@ -101,22 +125,52 @@
  * Default fade size: 16 px  (scoped to the element via inline var).
  * Disable with scroll-fade-none (sets --scroll-fade-mask: none). */
 @utility scroll-fade-x {
-  mask-image: var(--scroll-fade-mask, linear-gradient(to right, transparent, black var(--scroll-fade-size, 16px), black calc(100% - var(--scroll-fade-size, 16px)), transparent));
+  mask-image: var(
+    --scroll-fade-mask,
+    linear-gradient(
+      to right,
+      transparent,
+      black var(--scroll-fade-size, 16px),
+      black calc(100% - var(--scroll-fade-size, 16px)),
+      transparent
+    )
+  );
 }
 @utility scroll-fade-y {
-  mask-image: var(--scroll-fade-mask, linear-gradient(to bottom, transparent, black var(--scroll-fade-size, 16px), black calc(100% - var(--scroll-fade-size, 16px)), transparent));
+  mask-image: var(
+    --scroll-fade-mask,
+    linear-gradient(
+      to bottom,
+      transparent,
+      black var(--scroll-fade-size, 16px),
+      black calc(100% - var(--scroll-fade-size, 16px)),
+      transparent
+    )
+  );
 }
 @utility scroll-fade-l {
-  mask-image: var(--scroll-fade-mask, linear-gradient(to right, transparent, black var(--scroll-fade-size, 16px)));
+  mask-image: var(
+    --scroll-fade-mask,
+    linear-gradient(to right, transparent, black var(--scroll-fade-size, 16px))
+  );
 }
 @utility scroll-fade-r {
-  mask-image: var(--scroll-fade-mask, linear-gradient(to left, transparent, black var(--scroll-fade-size, 16px)));
+  mask-image: var(
+    --scroll-fade-mask,
+    linear-gradient(to left, transparent, black var(--scroll-fade-size, 16px))
+  );
 }
 @utility scroll-fade-t {
-  mask-image: var(--scroll-fade-mask, linear-gradient(to bottom, transparent, black var(--scroll-fade-size, 16px)));
+  mask-image: var(
+    --scroll-fade-mask,
+    linear-gradient(to bottom, transparent, black var(--scroll-fade-size, 16px))
+  );
 }
 @utility scroll-fade-b {
-  mask-image: var(--scroll-fade-mask, linear-gradient(to top, transparent, black var(--scroll-fade-size, 16px)));
+  mask-image: var(
+    --scroll-fade-mask,
+    linear-gradient(to top, transparent, black var(--scroll-fade-size, 16px))
+  );
 }
 @utility scroll-fade-none {
   --scroll-fade-mask: none;

package/src/styles/tokens/color-systems.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "../../components/primitives/button";
+import { colors } from "./css-vars";
 import { colorTokenNames } from "./index";
 
 const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };
@@ -28,7 +29,7 @@ export const SystemAppearance: Story = {
           <div
             key={token}
             className="border-border grid min-h-20 content-end rounded-md border p-3"
-            style={{ backgroundColor: `var(--color-${token})` }}
+            style={{ backgroundColor: colors[token] }}
           >
             <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
               {token}

package/src/styles/tokens/generated/light.colors.generated.ts

@@ -24,8 +24,8 @@ export default {
   "chart-3": "#12a594",
   "chart-4": "#f76b15",
   "chart-5": "#8b8d98",
-  "chart-positive": "#30a46c",
-  "chart-negative": "#e5484d",
-  "chart-neutral": "#b9bbc6",
+  "chart-positive": "#1f7a50",
+  "chart-negative": "#be2e33",
+  "chart-neutral": "#626a73",
   "overlay-scrim": "#000000",
 };

package/src/styles/tokens/generated/light.css

@@ -24,8 +24,8 @@
   --chart-3: #12a594;
   --chart-4: #f76b15;
   --chart-5: #8b8d98;
-  --chart-positive: #30a46c;
-  --chart-negative: #e5484d;
-  --chart-neutral: #b9bbc6;
+  --chart-positive: #1f7a50;
+  --chart-negative: #be2e33;
+  --chart-neutral: #626a73;
   --overlay-scrim: #000000;
 }

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

@@ -88,15 +88,15 @@
   },
   "chart-positive": {
     "$type": "color",
-    "$value": "rgb(48, 164, 108)"
+    "$value": "rgb(31, 122, 80)"
   },
   "chart-negative": {
     "$type": "color",
-    "$value": "rgb(229, 72, 77)"
+    "$value": "rgb(190, 46, 51)"
   },
   "chart-neutral": {
     "$type": "color",
-    "$value": "rgb(185, 187, 198)"
+    "$value": "rgb(98, 106, 115)"
   },
   "overlay-scrim": {
     "$type": "color",

package/src/styles/tokens/style-dictionary.light-storybook.json

@@ -0,0 +1,16 @@
+{
+  "source": ["src/styles/tokens/source/light.tokens.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": ".storybook/generated/",
+      "files": [
+        {
+          "destination": "light-theme-class.css",
+          "format": "css/variables",
+          "options": { "selector": ":root.storybook-theme-light" }
+        }
+      ]
+    }
+  }
+}

package/src/components/feedback/file-upload-status-badge.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { FileUploadStatusBadge } from "./file-upload-status-badge";
-
-const meta = {
-  title: "Feedback/FileUploadStatusBadge",
-  component: FileUploadStatusBadge,
-  tags: ["autodocs"],
-} satisfies Meta<typeof FileUploadStatusBadge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { status: "uploading" },
-};
-
-export const AllStatuses: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <FileUploadStatusBadge status="uploading" />
-      <FileUploadStatusBadge status="processing" />
-      <FileUploadStatusBadge status="queued" />
-      <FileUploadStatusBadge status="done" />
-      <FileUploadStatusBadge status="error" />
-    </div>
-  ),
-};

package/src/components/feedback/file-upload-status-badge.tsx

@@ -1,33 +0,0 @@
-import { memo } from "react";
-
-import { cn } from "../../lib/utils";
-
-export type FileUploadStatusValue = "uploading" | "processing" | "queued" | "done" | "error";
-
-const STATUS_CONFIG: Record<FileUploadStatusValue, { bg: string; text: string; label: string }> = {
-  uploading: { bg: "bg-muted", text: "text-foreground", label: "Uploading" },
-  processing: { bg: "bg-muted", text: "text-foreground", label: "Processing" },
-  queued: { bg: "bg-secondary", text: "text-secondary-foreground", label: "Queued" },
-  done: { bg: "bg-muted", text: "text-muted-foreground", label: "Complete" },
-  error: { bg: "bg-destructive/10", text: "text-destructive-text", label: "Error" },
-};
-
-export const FileUploadStatusBadge = memo(function FileUploadStatusBadge({
-  status,
-}: {
-  status?: string | undefined;
-}) {
-  if (!status) return null;
-
-  const config = STATUS_CONFIG[status as FileUploadStatusValue] ?? {
-    bg: "bg-muted",
-    text: "text-foreground",
-    label: status,
-  };
-
-  return (
-    <span className={cn("px-2 py-1 text-xs font-medium", config.bg, config.text)}>
-      {config.label}
-    </span>
-  );
-});

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

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, within } from "storybook/test";
-
-import { Field } from "./field";
-import { Input } from "./input";
-
-const meta = {
-  title: "Forms/Field",
-  component: Field,
-  tags: ["autodocs"],
-  args: {
-    children: <Input placeholder="you@example.com" />,
-  },
-} satisfies Meta<typeof Field>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Field label="Email" helpText="We will never share your address.">
-      <Input placeholder="you@example.com" />
-    </Field>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText("Email");
-
-    await userEvent.type(input, "you@example.com");
-
-    await expect(input).toHaveValue("you@example.com");
-    await expect(canvas.getByText("We will never share your address.")).toBeInTheDocument();
-  },
-};
-
-export const Error: Story = {
-  render: () => (
-    <Field label="Email" error="Email is required">
-      <Input placeholder="you@example.com" />
-    </Field>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByLabelText("Email")).toHaveAttribute("aria-invalid", "true");
-    await expect(canvas.getByRole("alert")).toHaveTextContent("Email is required");
-  },
-};
-
-export const Textarea: Story = {
-  render: () => (
-    <Field label="Notes" helpText="Markdown supported">
-      <textarea rows={5} placeholder="Write something..." />
-    </Field>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByLabelText("Notes")).toBeInTheDocument();
-    await expect(canvas.getByText("Markdown supported")).toBeInTheDocument();
-  },
-};

package/src/components/forms/field.tsx

@@ -1,65 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import type { FieldBaseProps } from "./field.types";
-
-interface FieldProps extends FieldBaseProps {
-  children: React.ReactNode;
-}
-
-/**
- * Field — standalone label + control + helper/error slot.
- * Wires label ↔ control association automatically via a generated id.
- * Does NOT require react-hook-form — works with any controlled or uncontrolled input.
- *
- * @example
- * <Field label="Email" error={errors.email}>
- *   <Input type="email" />
- * </Field>
- */
-function Field({ label, helpText, error, required, children, id: externalId }: FieldProps) {
-  const generatedId = React.useId();
-  const id = externalId ?? generatedId;
-  const descId = `${id}-desc`;
-  const errorId = `${id}-error`;
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      {label && (
-        <label
-          htmlFor={id}
-          className={cn(
-            "text-foreground text-sm font-medium",
-            required && "after:text-destructive-text after:ml-0.5 after:content-['*']",
-          )}
-        >
-          {label}
-        </label>
-      )}
-
-      {/* Clone child to inject id and aria attributes */}
-      {React.isValidElement(children)
-        ? React.cloneElement(
-            children as React.ReactElement<React.HTMLAttributes<HTMLElement>>,
-            {
-              id,
-              "aria-describedby": error ? errorId : helpText ? descId : undefined,
-              "aria-invalid": error ? true : undefined,
-            } as React.HTMLAttributes<HTMLElement>,
-          )
-        : children}
-
-      {error ? (
-        <p id={errorId} role="alert" className="text-destructive-text text-sm">
-          {error}
-        </p>
-      ) : helpText ? (
-        <p id={descId} className="text-muted-foreground text-sm">
-          {helpText}
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-export { Field, type FieldProps };

package/src/components/forms/field.types.ts

@@ -1,7 +0,0 @@
-export interface FieldBaseProps {
-  error?: string | undefined;
-  helpText?: string | undefined;
-  id?: string | undefined;
-  label?: string | undefined;
-  required?: boolean | undefined;
-}

package/src/components/forms/group-by-select.stories.tsx

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { GroupBySelect } from "./group-by-select";
-
-const meta = {
-  title: "Forms/GroupBySelect",
-  component: GroupBySelect,
-  tags: ["autodocs"],
-} satisfies Meta<typeof GroupBySelect>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function GroupBySelectPreview() {
-  const [groupBy, setGroupBy] = useState<"month" | "week" | "day">("month");
-  return <GroupBySelect groupBy={groupBy} onGroupByChange={setGroupBy} />;
-}
-
-export const Default: Story = {
-  args: {
-    groupBy: "month",
-    onGroupByChange: () => {},
-  },
-  render: () => <GroupBySelectPreview />,
-};

package/src/components/forms/group-by-select.tsx

@@ -1,47 +0,0 @@
-import { useId } from "react";
-
-import { Label } from "../primitives/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
-
-type GroupByOption = "month" | "week" | "day";
-
-export interface GroupBySelectProps {
-  groupBy: GroupByOption;
-  onGroupByChange: (value: GroupByOption) => void;
-  label?: string;
-  className?: string;
-}
-
-/** Month/week/day grouping select. */
-export function GroupBySelect({
-  groupBy,
-  onGroupByChange,
-  label = "Group By",
-  className,
-}: GroupBySelectProps) {
-  const id = useId();
-
-  return (
-    <div className={`space-y-2 ${className || ""}`}>
-      <Label htmlFor={id}>{label}</Label>
-      <Select
-        name="groupBy"
-        value={groupBy}
-        onValueChange={(value) => {
-          if (value === "month" || value === "week" || value === "day") {
-            onGroupByChange(value);
-          }
-        }}
-      >
-        <SelectTrigger id={id}>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="month">Month</SelectItem>
-          <SelectItem value="week">Week</SelectItem>
-          <SelectItem value="day">Day</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}

package/src/components/navigation/route-link.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { RouteLink } from "./route-link";
-
-const meta = {
-  title: "Navigation/RouteLink",
-  component: RouteLink,
-  tags: ["autodocs"],
-} satisfies Meta<typeof RouteLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "View accounts",
-    href: "#",
-    className: "text-accent underline",
-  },
-};
-
-export const WithOnNavigate: Story = {
-  name: "With onNavigate callback",
-  args: {
-    children: "Go to analytics",
-    href: "#",
-    className: "text-accent underline",
-    onNavigate: () => console.log("route loading started"),
-  },
-};

package/src/components/navigation/route-link.tsx

@@ -1,42 +0,0 @@
-import type { ComponentPropsWithoutRef, ElementType, MouseEvent, ReactNode } from "react";
-import { useCallback } from "react";
-
-type RouteLinkOwnProps<T extends ElementType> = {
-  as?: T;
-  children: ReactNode;
-  /** Called before the click is forwarded — e.g. to flip a route-loading store. */
-  onNavigate?: () => void;
-};
-
-export type RouteLinkProps<T extends ElementType = "a"> = RouteLinkOwnProps<T> &
-  Omit<ComponentPropsWithoutRef<T>, keyof RouteLinkOwnProps<T>>;
-
-/**
- * Polymorphic link that fires `onNavigate` before `onClick`. Pass your
- * router's `Link` component as `as` for client-side navigation (e.g.
- * `as={Link} to="/accounts"`); the host app owns any route-loading state via
- * `onNavigate` instead of a hardcoded store.
- */
-export function RouteLink<T extends ElementType = "a">({
-  as,
-  children,
-  onNavigate,
-  onClick,
-  ...props
-}: RouteLinkProps<T>) {
-  const Component = (as ?? "a") as ElementType;
-
-  const handleClick = useCallback(
-    (e: MouseEvent) => {
-      onNavigate?.();
-      (onClick as ((e: MouseEvent) => void) | undefined)?.(e);
-    },
-    [onNavigate, onClick],
-  );
-
-  return (
-    <Component onClick={handleClick} {...props}>
-      {children}
-    </Component>
-  );
-}

package/src/hooks/use-derived-filter-state.stories.tsx

@@ -1,136 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { useRef } from 'react';
-
-import { useDerivedFilterState, type FilterConfig } from './use-derived-filter-state';
-
-function createMemorySync(initial: Record<string, string>) {
-  const store = { ...initial };
-  return {
-    read: () => ({ ...store }),
-    write: (values: Record<string, string>) => Object.assign(store, values),
-  };
-}
-
-const fields = {
-  status: { default: "", label: (v: string) => `Status: ${v}` } satisfies FilterConfig,
-  search: { default: "" } satisfies FilterConfig,
-};
-
-function Harness() {
-  const sync = useRef(createMemorySync({ status: "", search: "" }));
-  const { values, setValue, activeFilters, clearAll, hasActive } =
-    useDerivedFilterState({ fields, sync: sync.current });
-
-  return (
-    <div data-testid="harness">
-      <span data-testid="values">{JSON.stringify(values)}</span>
-      <span data-testid="active-filters">
-        {activeFilters.map((f) => f.label).join(',')}
-      </span>
-      <span data-testid="has-active">{String(hasActive)}</span>
-      <button
-        data-testid="set-status"
-        onClick={() => setValue('status', 'active')}
-      >
-        Set status
-      </button>
-      <button
-        data-testid="set-search"
-        onClick={() => setValue('search', 'hello')}
-      >
-        Set search
-      </button>
-      <button
-        data-testid="clear-status"
-        onClick={() => setValue('status', '')}
-      >
-        Clear status
-      </button>
-      <button data-testid="clear-all" onClick={() => clearAll()}>
-        Clear all
-      </button>
-    </div>
-  );
-}
-
-const meta: Meta<typeof Harness> = {
-  title: 'Internal/useDerivedFilterState',
-  component: Harness,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const InitialState: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"","search":""}',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('false');
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent('');
-  },
-};
-
-export const SetValueCreatesActiveFilter: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"active","search":""}',
-    );
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent(
-      'Status: active',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('true');
-  },
-};
-
-export const ClearValueRemovesActiveFilter: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await userEvent.click(canvas.getByTestId('clear-status'));
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"","search":""}',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('false');
-  },
-};
-
-export const ClearAllResetsEverything: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await userEvent.click(canvas.getByTestId('set-search'));
-    await userEvent.click(canvas.getByTestId('clear-all'));
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"","search":""}',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('false');
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent('');
-  },
-};
-
-export const ActiveFilterOnRemoveClearsValue: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent(
-      'Status: active',
-    );
-  },
-};
-
-export const MultipleActiveFilters: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await userEvent.click(canvas.getByTestId('set-search'));
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent(
-      'Status: active,search: hello',
-    );
-  },
-};