@ponti-studios/ui 0.1.2

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

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

@@ -0,0 +1,65 @@
+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(
+            "body-3 text-primary font-medium",
+            required && "after:text-destructive 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="body-4 text-destructive">
+          {error}
+        </p>
+      ) : helpText ? (
+        <p id={descId} className="body-4 text-tertiary">
+          {helpText}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export { Field, type FieldProps };

package/src/components/forms/field.types.ts

@@ -0,0 +1,7 @@
+export interface FieldBaseProps {
+  error?: string | undefined;
+  helpText?: string | undefined;
+  id?: string | undefined;
+  label?: string | undefined;
+  required?: boolean | undefined;
+}

package/src/components/forms/index.ts

@@ -0,0 +1,24 @@
+export { Calendar } from "./calendar";
+export type { CalendarProps } from "./calendar";
+export { DatePicker } from "./date-picker";
+export type { DatePickerProps } from "./date-picker";
+export { Field } from "./field";
+export type { FieldProps } from "./field";
+export { Input } from "./input";
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+export { Slider } from "./slider";
+export { Stepper } from "./stepper";
+export type { StepperProps } from "./stepper";
+export { Switch } from "./switch";
+export { TextField } from "./text-field";
+export type { TextFieldProps } from "./text-field";
+export { Textarea } from "./textarea";

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { booleanControl, selectControl, textControl } from "../../storybook/controls";
+import { inputTypeOptions } from "../../storybook/options";
+import { Input } from "./input";
+
+const meta = {
+  title: "Forms/Input",
+  component: Input,
+  tags: ["autodocs"],
+  argTypes: {
+    type: selectControl(inputTypeOptions, "HTML input type attribute", {
+      defaultValue: "text",
+    }),
+    placeholder: textControl("Placeholder text shown when the input is empty"),
+    disabled: booleanControl("Prevents user interaction and applies disabled styling", false),
+    required: booleanControl("Marks the input as required for form submission", false),
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { placeholder: "Enter text…" },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex w-72 flex-col gap-2">
+      <label htmlFor="email" className="text-primary text-sm leading-none font-medium">
+        Email
+      </label>
+      <Input id="email" type="email" placeholder="you@example.com" />
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="flex w-72 flex-col gap-4">
+      <Input placeholder="Default" />
+      <Input placeholder="Disabled" disabled />
+      <Input defaultValue="With value" />
+    </div>
+  ),
+};

package/src/components/forms/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-primary placeholder:text-secondary selection:bg-accent selection:text-on-accent bg-canvas focus-visible:ring-focus h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-colors file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/components/forms/radio-group.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+
+import { Label } from "../primitives/label";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "Forms/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { value: "default", label: "Default" },
+  { value: "comfortable", label: "Comfortable" },
+  { value: "compact", label: "Compact" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="default" className="gap-3">
+      {options.map(({ value, label }) => (
+        <div key={value} className="flex items-center gap-3">
+          <RadioGroupItem value={value} id={`opt-${value}`} />
+          <Label htmlFor={`opt-${value}`} className="cursor-pointer">
+            {label}
+          </Label>
+        </div>
+      ))}
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="default" disabled className="gap-3">
+      {options.map(({ value, label }) => (
+        <div key={value} className="flex items-center gap-3">
+          <RadioGroupItem value={value} id={`dis-${value}`} />
+          <Label htmlFor={`dis-${value}`}>{label}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  ),
+};

package/src/components/forms/radio-group.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "border-accent bg-canvas text-primary focus-visible:border-foreground focus-visible:bg-accent/25 focus-visible:ring-focus aspect-square h-6 w-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="fill-primary h-4 w-4" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+const meta = {
+  title: "Forms/Select",
+  component: Select,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="blueberry">Blueberry</SelectItem>
+        <SelectItem value="grapes">Grapes</SelectItem>
+        <SelectItem value="pineapple">Pineapple</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select timezone" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>North America</SelectLabel>
+          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Europe</SelectLabel>
+          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+          <SelectItem value="cet">Central European Time (CET)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger size="sm" className="w-[160px]">
+        <SelectValue placeholder="Select" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="1">Option 1</SelectItem>
+        <SelectItem value="2">Option 2</SelectItem>
+        <SelectItem value="3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

package/src/components/forms/select.tsx

@@ -0,0 +1,147 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "data-placeholder:text-secondary [&_svg:not([class*='text-'])]:text-secondary focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-raised text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-secondary px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-on-accent [&_svg:not([class*='text-'])]:text-secondary relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue };

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+
+import { Slider } from "./slider";
+
+const meta: Meta<typeof Slider> = {
+  title: "Forms/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-sm px-1">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    disabled: { control: "boolean" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: [50],
+    min: 0,
+    max: 100,
+  },
+};
+
+export const WithStep: Story = {
+  args: {
+    defaultValue: [0],
+    min: 0,
+    max: 100,
+    step: 10,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState([33]);
+    return (
+      <div className="w-full max-w-sm space-y-4 px-1">
+        <Slider value={value} onValueChange={setValue} min={0} max={100} />
+        <div className="flex justify-between text-sm">
+          <span className="text-secondary">Volume</span>
+          <span className="font-medium tabular-nums">{value[0]}%</span>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: [40],
+    disabled: true,
+    min: 0,
+    max: 100,
+  },
+};

package/src/components/forms/slider.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Slider = React.forwardRef<
+  React.ComponentRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none items-center select-none", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="bg-panel/40 relative h-2 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-accent absolute h-full" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="border-default focus-visible:border-foreground focus-visible:bg-accent focus-visible:ring-focus block h-6 w-6 rounded-full border bg-white shadow-sm ring-1 ring-black/5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };