@ponti-studios/ui 0.7.0 → 0.8.0

package/src/components/navigation/pagination-controls.tsx

@@ -8,41 +8,37 @@ export interface PaginationControlsProps {
   onPageChange: (page: number) => void;
 }
 
-/** Zero-indexed prev/next pagination control. Renders nothing for a single page. */
+/** Zero-indexed prev/next pagination control. */
 export function PaginationControls({
   currentPage,
   totalPages,
   onPageChange,
 }: PaginationControlsProps) {
-  if (totalPages <= 1) {
-    return null;
-  }
-
   return (
-    <div className="text-muted-foreground flex items-center justify-end gap-2 text-sm">
+    <div className="border-border bg-background text-foreground inline-flex items-center overflow-hidden rounded-full border text-sm">
       <Button
         type="button"
         variant="outline"
-        size="sm"
-        className="border-dashed"
+        size="icon"
+        className="rounded-none border-0 border-r bg-transparent shadow-none"
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 0}
+        aria-label="Previous page"
       >
         <ChevronLeft className="size-4" aria-hidden />
-        Previous
       </Button>
-      <span className="text-foreground text-xs">
-        Page {currentPage + 1} of {totalPages}
+      <span className="min-w-20 px-3 text-center text-xs tabular-nums">
+        {currentPage + 1} of {totalPages}
       </span>
       <Button
         type="button"
         variant="outline"
-        size="sm"
-        className="border-dashed"
+        size="icon"
+        className="rounded-none border-0 border-l bg-transparent shadow-none"
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage >= totalPages - 1}
+        aria-label="Next page"
       >
-        Next
         <ChevronRight className="size-4" aria-hidden />
       </Button>
     </div>

package/src/components/overlays/dropdown-menu.stories.tsx

@@ -44,9 +44,9 @@ export const Default: Story = {
         <Button variant="outline">Open Menu</Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
         <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
           <DropdownMenuItem>
             <User className="mr-2 size-4" />
             <span>Profile</span>

package/src/components/primitives/card.tsx

@@ -6,7 +6,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
-      className={cn("bg-card text-card-foreground flex flex-col rounded-xl border", className)}
+      className={cn("bg-card text-card-foreground flex flex-col gap-4 rounded border", className)}
       {...props}
     />
   );
@@ -17,7 +17,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "flex items-center justify-between gap-2 border-b px-4 py-3 has-data-[slot=card-action]:grid has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        "flex flex-col items-start justify-between gap-1 p-4 has-data-[slot=card-action]:grid has-data-[slot=card-action]:grid-cols-[1fr_auto]",
         className,
       )}
       {...props}
@@ -26,14 +26,14 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-title" className={cn(className)} {...props} />;
+  return <div data-slot="card-title" className={cn("text-xl", className)} {...props} />;
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-xs", className)}
       {...props}
     />
   );
@@ -55,12 +55,8 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center border-t px-4 py-3", className)}
-      {...props}
-    />
+    <div data-slot="card-footer" className={cn("flex items-center p-4", className)} {...props} />
   );
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/components/primitives/label.stories.tsx

@@ -27,21 +27,3 @@ export const WithInput: Story = {
     </div>
   ),
 };
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="flex w-full max-w-sm flex-col gap-2">
-      <Label htmlFor="disabled-field">Subscription plan</Label>
-      <div className="flex items-center gap-3">
-        <Input id="disabled-field" className="peer" disabled placeholder="Enterprise" />
-        <Label htmlFor="disabled-field" className="shrink-0">
-          (locked)
-        </Label>
-      </div>
-      <p className="text-muted-foreground text-xs">
-        The <code className="font-mono">peer-disabled</code> variant mutes the label when its paired
-        input is disabled.
-      </p>
-    </div>
-  ),
-};

package/src/components/primitives/label.tsx

@@ -1,20 +1,20 @@
-"use client";
-
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-const labelVariants = cva(
-  "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      htmlFor={props.htmlFor}
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  ),
 );
-
-const Label = React.forwardRef<
-  HTMLLabelElement,
-  React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <label ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
 Label.displayName = "Label";
 
 export { Label };

package/src/constants/chart-colors.ts

@@ -4,15 +4,15 @@
  */
 
 export const CHART_COLORS = {
-  chart1: "var(--color-chart-1)",
-  chart2: "var(--color-chart-2)",
-  chart3: "var(--color-chart-3)",
-  chart4: "var(--color-chart-4)",
-  chart5: "var(--color-chart-5)",
+  chart1: "var(--chart-1)",
+  chart2: "var(--chart-2)",
+  chart3: "var(--chart-3)",
+  chart4: "var(--chart-4)",
+  chart5: "var(--chart-5)",
 
-  positive: "var(--color-chart-positive)",
-  negative: "var(--color-chart-negative)",
-  neutral: "var(--color-chart-neutral)",
+  positive: "var(--chart-positive)",
+  negative: "var(--chart-negative)",
+  neutral: "var(--chart-neutral)",
 
   background: "var(--color-background)",
   grid: "var(--color-border)",
@@ -28,12 +28,12 @@ export const CHART_COLORS = {
 } as const;
 
 export const CHART_CSS_VARS = {
-  positive: "var(--color-chart-positive)",
-  negative: "var(--color-chart-negative)",
-  neutral: "var(--color-chart-neutral)",
-  chart1: "var(--color-chart-1)",
-  chart2: "var(--color-chart-2)",
-  chart3: "var(--color-chart-3)",
-  chart4: "var(--color-chart-4)",
-  chart5: "var(--color-chart-5)",
+  positive: "var(--chart-positive)",
+  negative: "var(--chart-negative)",
+  neutral: "var(--chart-neutral)",
+  chart1: "var(--chart-1)",
+  chart2: "var(--chart-2)",
+  chart3: "var(--chart-3)",
+  chart4: "var(--chart-4)",
+  chart5: "var(--chart-5)",
 } as const;

package/src/hooks/use-media-query.ts

@@ -29,6 +29,10 @@ function mediaQuery(query: string, options?: MediaQueryOptions) {
   return mql.matches;
 }
 
+function getServerSnapshot() {
+  return false;
+}
+
 /**
  * Listens for changes to a media query and returns a boolean indicating whether the query matches.
  * @param query - The media query string to listen for.
@@ -61,5 +65,5 @@ export function useMediaQuery(query: string) {
     return mediaQuery(query);
   }, [query]);
 
-  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }

package/src/styles/animations.css

@@ -51,28 +51,6 @@
   }
 }
 
-.animate-in {
-  animation:
-    fade-in 150ms ease-out,
-    zoom-in 150ms ease-out;
-}
-.animate-out {
-  animation:
-    fade-out 120ms ease-in,
-    zoom-out 120ms ease-in;
-}
-.fade-in-0 {
-  animation-name: fade-in;
-}
-.fade-out-0 {
-  animation-name: fade-out;
-}
-.zoom-in-95 {
-  animation-name: zoom-in;
-}
-.zoom-out-95 {
-  animation-name: zoom-out;
-}
 .data-open\:animate-in[data-open],
 .data-open\:animate-in[data-state="open"] {
   animation:

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 />,
-};