@ponti-studios/ui 1.6.0 → 1.7.0

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

@@ -1,202 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, screen, userEvent, within } from "storybook/test";
-
-import { DateField } from "./date-field";
-
-const meta = {
-  title: "Forms/DateField",
-  component: DateField,
-  tags: ["autodocs"],
-} satisfies Meta<typeof DateField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function hiddenValue(canvasElement: HTMLElement, name: string): string | null {
-  const input = canvasElement.querySelector(`input[name="${name}"]`) as HTMLInputElement | null;
-  return input?.value ?? null;
-}
-
-async function nextMonth(dialog: HTMLElement) {
-  await userEvent.click(within(dialog).getByRole("button", { name: "Go to the Next Month" }));
-}
-
-// The trigger button's accessible name comes from its <label> (htmlFor), so
-// stories query the button by label and assert the visible date text separately.
-export const WithStringDefaultValue: Story = {
-  args: {
-    name: "startDate",
-    defaultValue: "2020-01-15",
-    label: "Start date",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // The hidden input carries the local "YYYY-MM-DD" value, and the trigger
-    // shows the formatted date.
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
-    const trigger = canvas.getByRole("button", { name: "Start date" });
-    await expect(trigger).toHaveTextContent("Jan 15, 2020");
-
-    // The calendar opens on the selected month, not the current one.
-    await userEvent.click(trigger);
-    const dialog = await screen.findByRole("dialog");
-    await expect(within(dialog).getByText("January 2020")).toBeInTheDocument();
-
-    // Real click on the Next chevron navigates the month.
-    await nextMonth(dialog);
-    await expect(within(dialog).getByText("February 2020")).toBeInTheDocument();
-
-    // Picking a day updates the trigger and the hidden input.
-    await userEvent.click(within(dialog).getByText("15"));
-    await expect(canvas.getByRole("button", { name: "Start date" })).toHaveTextContent(
-      "Feb 15, 2020",
-    );
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-15");
-  },
-};
-
-export const WithDateDefaultValue: Story = {
-  args: {
-    name: "endDate",
-    defaultValue: new Date(2020, 0, 15),
-    label: "End date",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-01-15");
-    await expect(canvas.getByRole("button", { name: "End date" })).toHaveTextContent(
-      "Jan 15, 2020",
-    );
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    name: "startDate",
-    label: "Start date",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("");
-    await expect(canvas.getByRole("button", { name: "Start date" })).toHaveTextContent(
-      "Pick a date",
-    );
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    name: "startDate",
-    defaultValue: "2020-01-15",
-    label: "Start date",
-    disabled: true,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByRole("button", { name: "Start date" })).toBeDisabled();
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
-  },
-};
-
-// No play function — this one is for manually driving the interaction
-// (e.g. screen recordings), not automated assertions.
-export const DropdownEmpty: Story = {
-  args: {
-    name: "startDate",
-    label: "Start date",
-    captionLayout: "dropdown",
-  },
-};
-
-export const WithDropdownCaption: Story = {
-  args: {
-    mode: "range",
-    startName: "startDate",
-    endName: "endDate",
-    defaultValue: { from: "2018-03-01" },
-    label: "Employment period",
-    captionLayout: "dropdown",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Jumping back to a date years ago is a month/year select, not repeated
-    // prev-month clicks.
-    const trigger = canvas.getByRole("button", { name: "Employment period" });
-    await userEvent.click(trigger);
-    const dialog = await screen.findByRole("dialog");
-
-    const yearSelect = within(dialog).getByRole("combobox", { name: /year/i });
-    await userEvent.selectOptions(yearSelect, "2009");
-    const monthSelect = within(dialog).getByRole("combobox", { name: /month/i });
-    await userEvent.selectOptions(monthSelect, "May");
-
-    await userEvent.click(within(dialog).getByText("12"));
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2009-05-12");
-  },
-};
-
-export const WithRangeDefaultValue: Story = {
-  args: {
-    mode: "range",
-    startName: "startDate",
-    endName: "endDate",
-    defaultValue: { from: "2020-01-15", to: "2020-06-30" },
-    label: "Active period",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Both hidden inputs carry local date strings; the trigger shows the range.
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
-    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-06-30");
-    const trigger = canvas.getByRole("button", { name: "Active period" });
-    await expect(trigger).toHaveTextContent("Jan 15, 2020");
-    await expect(trigger).toHaveTextContent("Jun 30, 2020");
-
-    // The range calendar opens on the start month.
-    await userEvent.click(trigger);
-    const dialog = await screen.findByRole("dialog");
-    await expect(within(dialog).getByText("January 2020")).toBeInTheDocument();
-
-    // Real-click the Next chevron, then pick a new from date.
-    await nextMonth(dialog);
-    await expect(within(dialog).getByText("February 2020")).toBeInTheDocument();
-    await userEvent.click(within(dialog).getByText("20"));
-    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
-      "From Feb 20, 2020",
-    );
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-20");
-    await expect(hiddenValue(canvasElement, "endDate")).toBe("");
-
-    // Picking an end date fills the second hidden input.
-    await userEvent.click(within(dialog).getByText("25"));
-    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
-      "Feb 20, 2020 – Feb 25, 2020",
-    );
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-20");
-    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-02-25");
-  },
-};
-
-export const EmptyRange: Story = {
-  args: {
-    mode: "range",
-    startName: "startDate",
-    endName: "endDate",
-    label: "Active period",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("");
-    await expect(hiddenValue(canvasElement, "endDate")).toBe("");
-    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
-      "Pick a date range",
-    );
-  },
-};

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

@@ -1,179 +0,0 @@
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { useId, useState } from "react";
-
-import { Popover, PopoverContent, PopoverTrigger } from "../overlays/popover";
-import { Button } from "../primitives/button";
-import { Calendar } from "./calendar";
-import { formatDateInput, parseDateInput } from "./date-utils";
-import { DatePicker, type DatePickerProps } from "./date-picker";
-
-export interface DateRangeValue {
-  from?: Date | string | null;
-  to?: Date | string | null;
-}
-
-interface DateFieldCommonProps {
-  id?: string;
-  label?: string;
-  showLabel?: boolean;
-  placeholder?: string;
-  dateFormat?: string;
-  disabled?: boolean;
-  containerClassName?: string;
-  popoverAlign?: DatePickerProps["popoverAlign"];
-  variant?: DatePickerProps["variant"];
-  captionLayout?: DatePickerProps["captionLayout"];
-}
-
-export interface SingleDateFieldProps extends DateFieldCommonProps {
-  mode?: "single";
-  name: string;
-  defaultValue?: Date | string | null;
-}
-
-export interface RangeDateFieldProps extends DateFieldCommonProps {
-  mode: "range";
-  startName: string;
-  endName: string;
-  defaultValue?: DateRangeValue;
-}
-
-export type DateFieldProps = SingleDateFieldProps | RangeDateFieldProps;
-
-const TRIGGER_CLASSES =
-  "border-border bg-background text-foreground placeholder:text-muted-foreground min-h-10 max-h-10 w-full justify-start rounded-l-none rounded-r-xl border-l-0 text-left font-normal";
-
-function SingleDateField({
-  name,
-  defaultValue,
-  id,
-  label,
-  showLabel,
-  placeholder,
-  dateFormat,
-  disabled,
-  containerClassName,
-  popoverAlign,
-  variant,
-  captionLayout,
-}: SingleDateFieldProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const [value, setValue] = useState<Date | undefined>(() => parseDateInput(defaultValue));
-
-  return (
-    <div>
-      <DatePicker
-        id={inputId}
-        label={label}
-        showLabel={showLabel}
-        placeholder={placeholder}
-        dateFormat={dateFormat}
-        disabled={disabled}
-        containerClassName={containerClassName}
-        popoverAlign={popoverAlign}
-        variant={variant}
-        captionLayout={captionLayout}
-        value={value}
-        onSelect={setValue}
-      />
-      <input type="hidden" name={name} value={value ? formatDateInput(value) : ""} />
-    </div>
-  );
-}
-
-function RangeDateField({
-  startName,
-  endName,
-  defaultValue,
-  id,
-  label,
-  showLabel = true,
-  placeholder = "Pick a date range",
-  dateFormat = "MMM d, yyyy",
-  disabled = false,
-  containerClassName = "flex-1 min-w-0",
-  popoverAlign = "start",
-  variant = "outline",
-  captionLayout = "label",
-}: RangeDateFieldProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const [range, setRange] = useState<{ from?: Date; to?: Date }>(() => ({
-    from: parseDateInput(defaultValue?.from),
-    to: parseDateInput(defaultValue?.to),
-  }));
-
-  const fromLabel = range.from ? format(range.from, dateFormat) : null;
-  const toLabel = range.to ? format(range.to, dateFormat) : null;
-  const triggerLabel = fromLabel
-    ? toLabel
-      ? `${fromLabel} – ${toLabel}`
-      : `From ${fromLabel}`
-    : toLabel
-      ? `Until ${toLabel}`
-      : placeholder;
-
-  return (
-    <div className={containerClassName}>
-      {showLabel && label ? (
-        <label htmlFor={inputId} className="text-foreground mb-2 block text-sm font-medium">
-          {label}
-        </label>
-      ) : null}
-      <Popover>
-        <div className="flex w-full items-center">
-          <div className="border-border bg-background text-foreground flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
-            <CalendarIcon className="size-4" aria-hidden />
-          </div>
-          <PopoverTrigger asChild>
-            <Button id={inputId} variant={variant} disabled={disabled} className={TRIGGER_CLASSES}>
-              {triggerLabel}
-            </Button>
-          </PopoverTrigger>
-        </div>
-        <PopoverContent
-          className="bg-popover w-auto p-0"
-          align={popoverAlign}
-          aria-label={label ?? "Choose a date range"}
-        >
-          <Calendar
-            mode="range"
-            selected={range.from ? { from: range.from, to: range.to } : undefined}
-            defaultMonth={range.from ?? range.to}
-            resetOnSelect
-            onSelect={(next) => setRange({ from: next?.from, to: next?.to })}
-            captionLayout={captionLayout}
-          />
-        </PopoverContent>
-      </Popover>
-      <input type="hidden" name={startName} value={range.from ? formatDateInput(range.from) : ""} />
-      <input type="hidden" name={endName} value={range.to ? formatDateInput(range.to) : ""} />
-    </div>
-  );
-}
-
-/**
- * DateField — calendar picker backed by hidden inputs that submit "YYYY-MM-DD"
- * local date strings, so forms never receive UTC-shifted dates. Supports both
- * a single date (`name`) and a range (`startName` + `endName`).
- *
- * @example
- * <DateField name="startDate" defaultValue="2020-01-15" label="Start date" />
- * <DateField
- *   mode="range"
- *   startName="startDate"
- *   endName="endDate"
- *   defaultValue={{ from: "2020-01-15", to: "2020-06-30" }}
- *   label="Active period"
- * />
- */
-function DateField(props: DateFieldProps) {
-  if (props.mode === "range") {
-    return <RangeDateField {...props} />;
-  }
-  return <SingleDateField {...props} />;
-}
-
-export { DateField };

package/src/components/overlays/alert-dialog.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
-
-const meta = {
-  title: "Overlays/AlertDialog",
-  component: AlertDialog,
-  tags: ["autodocs"],
-} satisfies Meta<typeof AlertDialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger className="rounded border px-4 py-2 text-sm">
-        Open Dialog
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};

package/src/components/overlays/alert-dialog.tsx

@@ -1,116 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "../primitives/button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = ({
-  children,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => (
-  <AlertDialogPrimitive.Portal {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
-      {children}
-    </div>
-  </AlertDialogPrimitive.Portal>
-);
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Backdrop>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Backdrop>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Backdrop
-    ref={ref}
-    className={cn(
-      "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 transition-opacity",
-      className,
-    )}
-    {...props}
-  />
-));
-
-const AlertDialogContent = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Popup>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Popup>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Popup
-      ref={ref}
-      className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 sm:data-open:slide-in-from-bottom-0 fixed bottom-0 z-50 grid w-full max-w-lg gap-6 rounded-t-xl border p-4 outline-none sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-
-function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />;
-}
-
-function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className)}
-      {...props}
-    />
-  );
-}
-
-const AlertDialogTitle = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold tracking-tight", className)}
-    {...props}
-  />
-));
-
-const AlertDialogDescription = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground max-w-prose text-sm", className)}
-    {...props}
-  />
-));
-
-const AlertDialogAction = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Close>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Close ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-
-const AlertDialogCancel = React.forwardRef<
-  React.ComponentRef<typeof AlertDialogPrimitive.Close>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Close
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

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

@@ -1,29 +0,0 @@
-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>
-  ),
-};

package/src/components/primitives/label.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-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}
-    />
-  ),
-);
-Label.displayName = "Label";
-
-export { Label };

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

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CheckCircle, Clock, XCircle } from "lucide-react";
-
-import { StatusBadge, type StatusBadgeConfig } from "./status-badge";
-
-type ConnectionStatus = "active" | "error" | "pending" | "revoked";
-
-const connectionStatusConfig: Record<ConnectionStatus, StatusBadgeConfig> = {
-  active: { label: "Active", variant: "default", icon: <CheckCircle className="mr-1 size-3" /> },
-  error: { label: "Error", variant: "destructive", icon: <XCircle className="mr-1 size-3" /> },
-  pending: { label: "Pending", variant: "secondary", icon: <Clock className="mr-1 size-3" /> },
-  revoked: { label: "Revoked", variant: "outline" },
-};
-
-const meta = {
-  title: "Primitives/StatusBadge",
-  component: StatusBadge<ConnectionStatus>,
-  tags: ["autodocs"],
-} satisfies Meta<typeof StatusBadge<ConnectionStatus>>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    status: "active",
-    config: connectionStatusConfig,
-  },
-};
-
-export const AllStatuses: Story = {
-  args: {
-    status: "active",
-    config: connectionStatusConfig,
-  },
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <StatusBadge status="active" config={connectionStatusConfig} />
-      <StatusBadge status="error" config={connectionStatusConfig} />
-      <StatusBadge status="pending" config={connectionStatusConfig} />
-      <StatusBadge status="revoked" config={connectionStatusConfig} />
-    </div>
-  ),
-};
-
-export const WithFallback: Story = {
-  args: {
-    status: null,
-    config: connectionStatusConfig,
-    fallback: { label: "Unknown", variant: "outline" },
-  },
-};

package/src/components/primitives/status-badge.tsx

@@ -1,33 +0,0 @@
-import type { ReactNode } from "react";
-
-import { Badge, type badgeVariants } from "./badge";
-import type { VariantProps } from "class-variance-authority";
-
-export interface StatusBadgeConfig {
-  label: string;
-  variant?: VariantProps<typeof badgeVariants>["variant"];
-  className?: string;
-  icon?: ReactNode;
-}
-
-export interface StatusBadgeProps<T extends string> {
-  status: T | null | undefined;
-  config: Record<T, StatusBadgeConfig>;
-  fallback?: StatusBadgeConfig;
-}
-
-/** Renders a `Badge` from a status → { label, variant, icon } config map. */
-export function StatusBadge<T extends string>({ status, config, fallback }: StatusBadgeProps<T>) {
-  const entry = (status != null ? config[status] : undefined) ?? fallback;
-
-  if (!entry) {
-    return null;
-  }
-
-  return (
-    <Badge variant={entry.variant ?? "outline"} className={entry.className}>
-      {entry.icon}
-      {entry.label}
-    </Badge>
-  );
-}