@ponti-studios/ui 0.1.2

package/src/components/data-display/table.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="w-full overflow-auto">
+      <table ref={ref} className={cn("body-3 w-full caption-bottom", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("bg-accent text-on-accent font-medium", className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("data-[state=selected]:bg-inset border-default border-b", className)}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "ui-eyebrow h-9 px-3 text-left align-middle [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("px-3 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("body-4 text-secondary mt-4", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/src/components/feedback/alert.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AlertCircle, Info, Terminal } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "./alert";
+
+const meta = {
+  title: "Feedback/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <Terminal className="size-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertCircle className="size-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const WithoutIcon: Story = {
+  render: () => (
+    <Alert>
+      <AlertTitle>Note</AlertTitle>
+      <AlertDescription>This alert has no icon.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const DescriptionOnly: Story = {
+  render: () => (
+    <Alert>
+      <Info className="size-4" />
+      <AlertDescription>A simple informational message without a title.</AlertDescription>
+    </Alert>
+  ),
+};

package/src/components/feedback/alert.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-md border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-panel text-primary",
+        destructive:
+          "text-destructive bg-panel [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("subheading-4 col-start-2 line-clamp-1 min-h-4", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-secondary body-3 col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/feedback/empty-state.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  layout?: "centered" | "inline";
+  size?: "md" | "lg";
+  variant?: "default" | "dashed" | "quiet" | "search";
+}
+
+/**
+ * EmptyState communicates an absence of content and gives the host application
+ * room for an optional next action. Domain copy and recovery behavior stay with
+ * the calling feature.
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  children,
+  className,
+  layout = "centered",
+  size = "md",
+  variant = "default",
+}: EmptyStateProps) {
+  const centered = layout === "centered";
+  const large = size === "lg";
+
+  return (
+    <section
+      className={cn(
+        "rounded-lg px-5 py-8",
+        variant === "default" && "border-subtle bg-panel border",
+        variant === "dashed" && "border-subtle bg-panel border border-dashed",
+        variant === "search" && "border-subtle bg-surface border border-dashed",
+        variant === "quiet" && "bg-surface",
+        centered
+          ? cn(
+              "flex flex-col items-center justify-center text-center",
+              large ? "min-h-80 px-6 py-10" : "min-h-64",
+            )
+          : "flex flex-col gap-3",
+        className,
+      )}
+    >
+      {icon ? (
+        <div className="text-secondary mb-3 flex size-11 items-center justify-center" aria-hidden>
+          {icon}
+        </div>
+      ) : null}
+      <div className={cn("space-y-2", centered && "max-w-[34ch]")}>
+        <h2 className={cn("text-primary", large ? "heading-3" : "heading-4")}>{title}</h2>
+        {description ? <p className="body-3 text-secondary">{description}</p> : null}
+      </div>
+      {children ? <div className="mt-3">{children}</div> : null}
+      {action ? <div className="mt-4">{action}</div> : null}
+    </section>
+  );
+}

package/src/components/feedback/index.ts

@@ -0,0 +1,6 @@
+export { Alert, AlertDescription, AlertTitle } from "./alert";
+export { EmptyState } from "./empty-state";
+export type { EmptyStateProps } from "./empty-state";
+export { Progress } from "./progress";
+export { Spinner } from "./spinner";
+export type { SpinnerProps } from "./spinner";

package/src/components/feedback/progress.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Progress } from "./progress";
+
+const meta = {
+  title: "Feedback/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 60,
+  },
+};
+
+export const Empty: Story = {
+  args: { value: 0 },
+};
+
+export const Complete: Story = {
+  args: { value: 100 },
+};
+
+export const Partial: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-4">
+      <Progress value={10} />
+      <Progress value={33} />
+      <Progress value={66} />
+      <Progress value={90} />
+    </div>
+  ),
+};

package/src/components/feedback/progress.tsx

@@ -0,0 +1,30 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+  indicatorClassName?: string;
+}) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn("bg-accent/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+      value={value}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className={cn("bg-accent h-full w-full flex-1 transition-all", indicatorClassName)}
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };

package/src/components/feedback/spinner.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { textControl } from "../../storybook/controls";
+import { Spinner } from "./spinner";
+
+const meta = {
+  title: "Feedback/Spinner",
+  component: Spinner,
+  tags: ["autodocs"],
+  argTypes: {
+    label: textControl("Visible + accessible label; pass false to hide the text", "Loading"),
+  },
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: false,
+  },
+};
+
+export const CustomLabel: Story = {
+  args: {
+    label: "Fetching results…",
+  },
+};
+
+export const NoLabel: Story = {
+  args: {
+    label: false,
+  },
+};
+
+export const Centered: Story = {
+  args: {
+    label: "Loading",
+    presentation: "centered",
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+      <Spinner size="xl" />
+    </div>
+  ),
+};

package/src/components/feedback/spinner.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const sizeClasses = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-8",
+  xl: "size-12",
+} as const;
+
+export interface SpinnerProps extends React.ComponentProps<"div"> {
+  label?: string | false;
+  presentation?: "inline" | "centered";
+  size?: keyof typeof sizeClasses;
+}
+
+export function Spinner({
+  label = false,
+  presentation = "inline",
+  size = "md",
+  className,
+  ...props
+}: SpinnerProps) {
+  const accessibleLabel = typeof label === "string" ? label : "Loading";
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center justify-center gap-2",
+        presentation === "centered" && "flex w-full py-12",
+        className,
+      )}
+      role="status"
+      aria-label={accessibleLabel}
+      {...props}
+    >
+      <span
+        className={cn(
+          "border-default border-t-accent rounded-full border-2 motion-safe:animate-spin",
+          sizeClasses[size],
+        )}
+        aria-hidden="true"
+      />
+      {label && <span className="text-secondary text-xs">{label}</span>}
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { Calendar } from "./calendar";
+
+const meta = {
+  title: "Forms/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    return (
+      <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+    );
+  },
+};
+
+export const WithoutOutsideDays: Story = {
+  render: () => <Calendar mode="single" showOutsideDays={false} className="rounded-md border" />,
+};
+
+export const RangeMode: Story = {
+  render: () => <Calendar mode="range" className="rounded-md border" />,
+};

package/src/components/forms/calendar.tsx

@@ -0,0 +1,67 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import type * as React from "react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("relative w-fit rounded-md p-4", className)}
+      classNames={{
+        root: "text-primary",
+        months: "flex flex-col gap-4 sm:flex-row",
+        month: "flex flex-col gap-4",
+        month_caption: "relative flex h-8 items-center justify-center",
+        caption_label: "text-sm font-medium",
+        nav: "absolute inset-x-4 top-4 flex items-center justify-between",
+        button_previous:
+          "inline-flex size-8 p-2 items-center justify-center rounded-full border border-default bg-canvas text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        button_next:
+          "inline-flex size-8 p-2 items-center justify-center rounded-full border border-default bg-canvas text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "flex size-8 items-center justify-center text-[0.8rem] font-normal text-secondary",
+        week: "mt-1 flex w-full",
+        day: "relative size-8 p-0 text-center text-lg focus-within:z-20",
+        day_button:
+          "inline-flex size-6 items-center justify-center rounded-md text-sm font-normal disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        selected:
+          "[&>button]:bg-accent [&>button]:text-on-accent [&>button]:hover:bg-accent [&>button]:hover:text-on-accent",
+        today: "[&>button]:bg-accent [&>button]:text-on-accent",
+        outside: "text-secondary opacity-50 [&>button]:text-secondary",
+        disabled: "text-secondary opacity-50",
+        range_start: "rounded-l-md bg-accent [&>button]:bg-accent [&>button]:text-on-accent",
+        range_middle: "bg-accent [&>button]:rounded-none [&>button]:text-on-accent",
+        range_end: "rounded-r-md bg-accent [&>button]:bg-accent [&>button]:text-on-accent",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className: iconClassName, orientation, ...iconProps }) => {
+          if (orientation === "left") {
+            return <ChevronLeft className={cn("size-4", iconClassName)} {...iconProps} />;
+          }
+
+          if (orientation === "right") {
+            return <ChevronRight className={cn("size-4", iconClassName)} {...iconProps} />;
+          }
+
+          if (orientation === "up") {
+            return <ChevronUp className={cn("size-4", iconClassName)} {...iconProps} />;
+          }
+
+          return <ChevronDown className={cn("size-4", iconClassName)} {...iconProps} />;
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/src/components/forms/date-picker.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { DatePicker } from "./date-picker";
+
+const meta = {
+  title: "Forms/DatePicker",
+  component: DatePicker,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: undefined,
+    onSelect: () => {},
+    placeholder: "Pick a date",
+  },
+  render: (args) => {
+    const [date, setDate] = useState<Date | undefined>(args.value);
+    return <DatePicker {...args} value={date} onSelect={setDate} />;
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    value: new Date(),
+    onSelect: () => {},
+    label: "Due Date",
+    showLabel: true,
+  },
+  render: (args) => {
+    const [date, setDate] = useState<Date | undefined>(args.value);
+    return <DatePicker {...args} value={date} onSelect={setDate} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: new Date(),
+    onSelect: () => {},
+    disabled: true,
+    label: "Locked Date",
+    showLabel: true,
+  },
+};

package/src/components/forms/date-picker.tsx

@@ -0,0 +1,60 @@
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import { Button } from "../primitives/button";
+import { Calendar } from "../forms/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../overlays/popover";
+
+export interface DatePickerProps {
+  value: Date | undefined;
+  onSelect: (date: Date | undefined) => void;
+  disabled?: boolean;
+  id?: string;
+  placeholder?: string;
+  label?: string;
+  dateFormat?: string;
+  showLabel?: boolean;
+  containerClassName?: string;
+  popoverAlign?: "start" | "center" | "end";
+  variant?: "outline" | "default" | "destructive" | "secondary" | "ghost" | "link";
+}
+
+export function DatePicker({
+  value,
+  onSelect,
+  disabled = false,
+  id = "date-picker",
+  placeholder = "Pick a date",
+  label,
+  dateFormat = "MMM d, yyyy",
+  showLabel = true,
+  containerClassName = "flex-1 min-w-0",
+  popoverAlign = "start",
+  variant = "outline",
+}: DatePickerProps) {
+  return (
+    <div className={containerClassName}>
+      {showLabel && label ? (
+        <label htmlFor={id} className="text-primary mb-2 block text-sm font-medium">
+          {label}
+        </label>
+      ) : null}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            variant={variant}
+            disabled={disabled}
+            className="bg-inset placeholder:text-secondary w-full justify-start text-left font-normal backdrop-blur-sm"
+          >
+            <CalendarIcon className="mr-2 size-4" />
+            {value ? format(value, dateFormat) : <span>{placeholder}</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="bg-canvas w-auto p-0" align={popoverAlign}>
+          <Calendar mode="single" selected={value} onSelect={onSelect} />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}