@ponti-studios/ui 0.7.1 → 0.8.0

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

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"),
-  },
-};