@ponti-studios/ui 2.0.2 → 3.0.0

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

@@ -1,113 +0,0 @@
-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

@@ -1,131 +0,0 @@
-import { Button as BaseButton } from "@base-ui/react/button";
-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 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors outline-none",
-    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  ],
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border-input bg-background hover:bg-muted hover:text-muted-foreground",
-        secondary: "border-input bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "border-transparent bg-transparent hover:bg-muted hover:text-muted-foreground",
-        link: "border-transparent bg-transparent px-0 text-accent-text underline-offset-4 hover:underline",
-      },
-      size: {
-        sm: "min-h-8 px-2.5 text-xs",
-        md: "min-h-9 px-3 text-sm",
-        lg: "min-h-10 px-4 text-base",
-        icon: "size-9 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,
-      // Defaults to "button" — same safe default the native element loses
-      // once it's rendered inside a <form> — but must stay overridable so
-      // consumers can pass type="submit"/"reset".
-      type = "button",
-      "aria-label": ariaLabel,
-      ...props
-    },
-    ref,
-  ) => {
-    if (asChild && React.isValidElement(children)) {
-      const child = children as React.ReactElement<{ children?: React.ReactNode }>;
-      const renderedChild = React.cloneElement(child, {
-        children: isLoading ? (
-          <>
-            <span className="opacity-0" aria-hidden="true">
-              {child.props.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>
-          </>
-        ) : (
-          child.props.children
-        ),
-      });
-
-      return (
-        <BaseButton
-          {...props}
-          type={type}
-          render={renderedChild}
-          nativeButton={false}
-          className={cn(buttonVariants({ variant, size, className }), isLoading && "relative")}
-          disabled={disabled || isLoading}
-          aria-busy={isLoading}
-          aria-label={isLoading ? loadingLabel : ariaLabel}
-          ref={ref}
-        />
-      );
-    }
-    return (
-      <button
-        {...props}
-        className={cn(buttonVariants({ variant, size, className }), isLoading && "relative")}
-        style={{
-          ...props.style,
-          cursor: disabled || isLoading ? "default" : "pointer",
-        }}
-        type={type}
-        ref={ref}
-        disabled={disabled || isLoading}
-        aria-busy={isLoading}
-        aria-label={isLoading ? loadingLabel : ariaLabel}
-      >
-        {isLoading ? (
-          <>
-            <span className="opacity-0" aria-hidden="true">
-              {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
-        )}
-      </button>
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

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

@@ -1,59 +0,0 @@
-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="text-muted-foreground text-sm">
-          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="text-muted-foreground text-sm">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

@@ -1,66 +0,0 @@
-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-card text-card-foreground flex flex-col gap-4 rounded border", className)}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "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}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
-  return (
-    <h3 data-slot="card-title" className={cn("text-xl", className)} {...props}>
-      {props.children}
-    </h3>
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-xs", 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 p-4", className)} {...props} />
-  );
-}
-
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/components/primitives/segmented-control.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { SegmentedControl } from "./segmented-control";
-
-const meta = {
-  title: "Primitives/SegmentedControl",
-  component: SegmentedControl,
-  tags: ["autodocs"],
-} satisfies Meta<typeof SegmentedControl>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Single: Story = {
-  args: {
-    label: "Layers",
-    options: [
-      { value: "cameras", label: "Cameras" },
-      { value: "places", label: "Places" },
-    ],
-  },
-  render: () => (
-    <SegmentedControl
-      label="Layers"
-      defaultValue={["cameras"]}
-      options={[
-        { value: "cameras", label: "Cameras" },
-        { value: "places", label: "Places" },
-      ]}
-    />
-  ),
-};
-
-export const Multiple: Story = {
-  args: {
-    label: "Layers",
-    options: [
-      { value: "cameras", label: "Cameras" },
-      { value: "places", label: "Places" },
-    ],
-  },
-  render: () => (
-    <SegmentedControl
-      label="Layers"
-      multiple
-      defaultValue={["cameras", "places"]}
-      options={[
-        { value: "cameras", label: "Cameras" },
-        { value: "places", label: "Places" },
-        { value: "trains", label: "Trains" },
-      ]}
-    />
-  ),
-};

package/src/components/primitives/segmented-control.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import { ToggleGroup as SegmentedPrimitive } from "@base-ui/react/toggle-group";
-import { Toggle as SegmentedItemPrimitive } from "@base-ui/react/toggle";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export type SegmentedOption = {
-  value: string;
-  label: React.ReactNode;
-  ariaLabel?: string;
-};
-
-export type SegmentedControlProps = {
-  options: SegmentedOption[];
-  /** Selected values. Single mode: pass at most one. */
-  value?: string[];
-  defaultValue?: string[];
-  onValueChange?: (value: string[]) => void;
-  /** @default false — single-select. True allows several pressed. */
-  multiple?: boolean;
-  /** Accessible name for the group. Falls back to joining option labels. */
-  label?: string;
-  className?: string;
-  itemClassName?: string;
-};
-
-// Pill-group single/multi toggle. Shape + pressed states are kit-owned;
-// elevation and placement are app-owned via className.
-export function SegmentedControl({
-  options,
-  value,
-  defaultValue,
-  onValueChange,
-  multiple = false,
-  label,
-  className,
-  itemClassName,
-}: SegmentedControlProps) {
-  return (
-    <SegmentedPrimitive
-      data-slot="segmented-control"
-      aria-label={label ?? options.map((o) => o.ariaLabel ?? o.value).join(", ")}
-      multiple={multiple}
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-      className={cn(
-        "border-border bg-card inline-flex items-center gap-0.5 rounded-full border p-0.5",
-        className,
-      )}
-    >
-      {options.map((option) => (
-        <SegmentedItemPrimitive
-          key={option.value}
-          data-slot="segmented-control-item"
-          value={option.value}
-          aria-label={option.ariaLabel ?? (typeof option.label === "string" ? option.label : option.value)}
-          className={cn(
-            "text-muted-foreground hover:text-foreground rounded-full px-4 py-1.5 text-[11px] font-semibold tracking-wider whitespace-nowrap uppercase transition-colors",
-            "data-pressed:bg-foreground data-pressed:text-background",
-            "focus-visible:outline-ring focus-visible:outline-2 focus-visible:outline-offset-2",
-            "data-disabled:pointer-events-none data-disabled:opacity-50",
-            itemClassName,
-          )}
-        >
-          {option.label}
-        </SegmentedItemPrimitive>
-      ))}
-    </SegmentedPrimitive>
-  );
-}

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

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Separator } from "./separator";
-
-const meta = {
-  title: "Primitives/Separator",
-  component: Separator,
-  tags: ["autodocs"],
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Horizontal: Story = {
-  args: {},
-  render: () => (
-    <div className="w-64">
-      <p className="text-sm">Above</p>
-      <Separator className="my-2" />
-      <p className="text-sm">Below</p>
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  args: { orientation: "vertical" },
-  render: () => (
-    <div className="flex h-8 items-center gap-2">
-      <p className="text-sm">Left</p>
-      <Separator orientation="vertical" />
-      <p className="text-sm">Right</p>
-    </div>
-  ),
-};

package/src/components/primitives/separator.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive>) {
-  return (
-    <SeparatorPrimitive
-      data-slot="separator"
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Separator };

package/src/constants/chart-colors.ts

@@ -1,39 +0,0 @@
-/**
- * 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(--chart-1)",
-  chart2: "var(--chart-2)",
-  chart3: "var(--chart-3)",
-  chart4: "var(--chart-4)",
-  chart5: "var(--chart-5)",
-
-  positive: "var(--chart-positive)",
-  negative: "var(--chart-negative)",
-  neutral: "var(--chart-neutral)",
-
-  background: "var(--color-background)",
-  grid: "var(--color-border)",
-
-  axis: "var(--color-muted-foreground)",
-  label: "var(--color-muted-foreground)",
-
-  tooltip: {
-    background: "var(--color-card)",
-    text: "var(--color-foreground)",
-    border: "var(--color-border)",
-  },
-} as const;
-
-export const CHART_CSS_VARS = {
-  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/env.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_API_BASE_URL: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}