@ponti-studios/ui 0.1.2

package/src/components/primitives/avatar.tsx

@@ -0,0 +1,132 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type { ClassValue } from "clsx";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+type AvatarSize = "sm" | "default" | "lg";
+
+const AvatarContext = React.createContext<{ size: AvatarSize }>({ size: "default" });
+
+const avatarSize: Record<AvatarSize, ClassValue> = {
+  sm: "size-6",
+  default: "size-6",
+  lg: "size-10",
+};
+
+const badgeDotSize: Record<AvatarSize, ClassValue> = {
+  sm: "size-2",
+  default: "size-2.5",
+  lg: "size-3",
+};
+
+const fallbackText: Record<AvatarSize, ClassValue> = {
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-sm",
+};
+
+const groupCountSvg: Record<AvatarSize, ClassValue> = {
+  sm: "[&>svg]:size-3",
+  default: "[&>svg]:size-4",
+  lg: "[&>svg]:size-5",
+};
+
+function Avatar({
+  className,
+  size = "default",
+  statusBadge = false,
+  children,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: AvatarSize;
+  statusBadge?: boolean;
+}) {
+  return (
+    <AvatarContext.Provider value={{ size }}>
+      <AvatarPrimitive.Root
+        data-slot="avatar"
+        className={cn("relative shrink-0 rounded-full select-none", avatarSize[size], className)}
+        {...props}
+      >
+        {children}
+        {statusBadge ? (
+          <span
+            data-slot="avatar-badge"
+            className={cn(
+              "bg-accent ring-background absolute right-0 bottom-0 z-10 rounded-full ring-2",
+              badgeDotSize[size],
+            )}
+          />
+        ) : null}
+      </AvatarPrimitive.Root>
+    </AvatarContext.Provider>
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("absolute inset-0 size-full rounded-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  const { size } = React.useContext(AvatarContext);
+
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-inset text-secondary absolute inset-0 flex items-center justify-center rounded-full",
+        fallbackText[size],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: AvatarSize }) {
+  return (
+    <AvatarContext.Provider value={{ size }}>
+      <div
+        data-slot="avatar-group"
+        className={cn(
+          "*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
+          className,
+        )}
+        {...props}
+      />
+    </AvatarContext.Provider>
+  );
+}
+
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
+  const { size } = React.useContext(AvatarContext);
+
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-inset text-secondary ring-background relative flex shrink-0 items-center justify-center rounded-full text-sm ring-2",
+        avatarSize[size],
+        groupCountSvg[size],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Primitives/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "secondary", "destructive", "outline"],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Badge" },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  ),
+};

package/src/components/primitives/badge.tsx

@@ -0,0 +1,44 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded border border-transparent px-1.5 py-px text-xs font-medium [&>svg]:size-3 [&>svg]:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+  {
+    variants: {
+      variant: {
+        default: "bg-accent text-on-accent [a&]:[a&]: [a&]: [a&]:",
+        secondary: "bg-panel text-primary [a&]:[a&]: [a&]: [a&]:",
+        destructive: "bg-destructive text-on-destructive [a&]:[a&]: [a&]: [a&]:",
+        outline: "border-default text-primary [a&]:[a&]: [a&]: [a&]:",
+        ghost: "[a&]:[a&]: [a&]: [a&]:",
+        link: "text-primary underline-offset-4 [a&]:[a&]:hover:underline [a&]: [a&]: [a&]:",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Plus, Trash2 } from "lucide-react";
+import { expect, userEvent, within } from "storybook/test";
+
+import { booleanControl, hiddenControl, selectControl } from "../../storybook/controls";
+import { buttonVariantOptions } from "../../storybook/options";
+import { Button } from "./button";
+
+const meta: Meta = {
+  title: "Primitives/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: selectControl(buttonVariantOptions, "Visual style variant of the button", {
+      defaultValue: "default",
+    }),
+    disabled: booleanControl("Prevents user interaction and applies disabled styling", false),
+    asChild: hiddenControl,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Button" },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: "Button" });
+
+    await userEvent.hover(button);
+    await userEvent.click(button);
+
+    await expect(button).toHaveFocus();
+    await expect(button).toBeEnabled();
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      <Button variant="default">Default</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="ghost" size="icon" aria-label="Add">
+        <Plus className="size-4" />
+      </Button>
+      <Button variant="link">Link</Button>
+    </div>
+  ),
+};
+
+export const Icon: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Button>Standard</Button>
+      <Button size="icon" aria-label="Add">
+        <Plus className="size-4" />
+      </Button>
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="flex gap-3">
+      <Button>
+        <Plus className="size-4" />
+        Create
+      </Button>
+      <Button variant="destructive">
+        <Trash2 className="size-4" />
+        Delete
+      </Button>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex gap-3">
+      <Button disabled>Default</Button>
+      <Button variant="outline" disabled>
+        Outline
+      </Button>
+      <Button variant="destructive" disabled>
+        Destructive
+      </Button>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByRole("button", { name: "Default" })).toBeDisabled();
+    await expect(canvas.getByRole("button", { name: "Outline" })).toBeDisabled();
+    await expect(canvas.getByRole("button", { name: "Destructive" })).toBeDisabled();
+  },
+};
+
+export const Loading: Story = {
+  render: () => (
+    <Button isLoading loadingLabel="Saving">
+      Save
+    </Button>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: "Saving" });
+
+    await expect(button).toBeDisabled();
+  },
+};

package/src/components/primitives/button.tsx

@@ -0,0 +1,95 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Spinner } from "../feedback/spinner";
+
+const buttonVariants = cva(
+  "inline-flex min-h-11 !cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border px-3 py-1.5 text-sm font-medium leading-5 transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:!cursor-default [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-pressed disabled:border-subtle disabled:bg-panel disabled:text-disabled",
+        destructive:
+          "border-transparent bg-destructive text-on-destructive hover:bg-destructive-hover active:bg-destructive-pressed disabled:border-subtle disabled:bg-panel disabled:text-disabled",
+        outline:
+          "border-default bg-transparent text-primary hover:bg-surface-hover active:bg-surface-pressed disabled:border-subtle disabled:text-disabled",
+        secondary:
+          "border-default bg-panel text-primary hover:bg-surface-hover active:bg-surface-pressed disabled:border-subtle disabled:bg-panel disabled:text-disabled",
+        ghost:
+          "border-transparent bg-transparent text-secondary hover:bg-surface-hover hover:text-primary active:bg-surface-pressed disabled:text-disabled",
+        link: "border-transparent bg-transparent px-0 text-accent hover:text-accent-hover disabled:text-disabled underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "min-h-11 px-2.5 text-sm",
+        md: "min-h-11 px-3 text-sm",
+        lg: "min-h-12 px-4 text-base",
+        default: "",
+        icon: "size-11 rounded-md p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  isLoading?: boolean;
+  loadingLabel?: string;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      className,
+      disabled,
+      isLoading = false,
+      loadingLabel = "Loading",
+      variant,
+      size,
+      asChild = false,
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }), isLoading && "relative")}
+        style={{
+          ...props.style,
+          cursor: disabled || isLoading ? "default" : "pointer",
+        }}
+        type="button"
+        ref={ref}
+        disabled={disabled || isLoading}
+        aria-busy={isLoading}
+        aria-label={isLoading ? loadingLabel : ariaLabel}
+        {...props}
+      >
+        {isLoading ? (
+          <>
+            <span className="opacity-0">{children}</span>
+            <span className="absolute inset-0 inline-flex items-center justify-center">
+              <Spinner size="sm" aria-hidden="true" />
+            </span>
+            <span className="sr-only">{loadingLabel}</span>
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/primitives/button.types.ts

@@ -0,0 +1,10 @@
+export type ButtonVariant = "default" | "destructive" | "ghost" | "link" | "outline" | "secondary";
+
+export type ButtonSize = "sm" | "md" | "lg" | "default" | "icon";
+
+export interface ButtonBaseProps {
+  isLoading?: boolean | undefined;
+  size?: ButtonSize;
+  title?: string | undefined;
+  variant?: ButtonVariant;
+}

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+
+import { Button } from "./button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+
+const meta = {
+  title: "Primitives/Card",
+  tags: ["autodocs"],
+  component: Card,
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>A short description of the card's content.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="body-2 text-secondary">
+          Card body content goes here. It can be any React node.
+        </p>
+      </CardContent>
+      <CardFooter className="flex justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Confirm</Button>
+      </CardFooter>
+    </Card>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const cancelButton = canvas.getByRole("button", { name: "Cancel" });
+
+    await userEvent.tab();
+
+    await expect(canvas.getByText("Card Title")).toBeInTheDocument();
+    await expect(cancelButton).toHaveFocus();
+    await expect(canvas.getByRole("button", { name: "Confirm" })).toBeInTheDocument();
+  },
+};
+
+export const Minimal: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardContent>
+        <p className="body-2 text-secondary">Minimal card with only content.</p>
+      </CardContent>
+    </Card>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText("Minimal card with only content.")).toBeInTheDocument();
+  },
+};

package/src/components/primitives/card.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-panel text-primary border-default flex flex-col rounded-md border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <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]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-title" className={cn(className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("body-4 text-secondary", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("p-4", className)} {...props} />;
+}
+
+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}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/src/components/primitives/index.ts

@@ -0,0 +1,13 @@
+export { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar";
+export { Badge, badgeVariants } from "./badge";
+export { Button, buttonVariants } from "./button";
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
+export { Label } from "./label";

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+
+import { Input } from "../forms/input";
+import { Label } from "../primitives/label";
+
+const meta: Meta<typeof Label> = {
+  title: "Primitives/Label",
+  component: Label,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Email address",
+  },
+};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="flex w-full max-w-sm flex-col gap-2">
+      <Label htmlFor="email">Email address</Label>
+      <Input id="email" type="email" placeholder="you@example.com" />
+    </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-secondary 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

@@ -0,0 +1,21 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+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-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ComponentRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/constants/chart-colors.ts

@@ -0,0 +1,39 @@
+/**
+ * Chart colors are CSS-variable-backed so they stay in sync with the active
+ * color system and mode at runtime.
+ */
+
+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)",
+
+  positive: "var(--color-chart-positive)",
+  negative: "var(--color-chart-negative)",
+  neutral: "var(--color-chart-neutral)",
+
+  background: "var(--color-surface-canvas)",
+  grid: "var(--color-border-subtle)",
+
+  axis: "var(--color-text-tertiary)",
+  label: "var(--color-text-secondary)",
+
+  tooltip: {
+    background: "var(--color-surface-panel)",
+    text: "var(--color-text-primary)",
+    border: "var(--color-border-default)",
+  },
+} 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)",
+} as const;