@ponti-studios/ui 2.0.1 → 3.0.0

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

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-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

@@ -1,44 +0,0 @@
-"use client";
-
-import { Radio as RadioPrimitive } from "@base-ui/react/radio";
-import { RadioGroup as RadioGroupPrimitive } from "@base-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>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive className={cn("grid gap-2", className)} {...props} ref={ref} />;
-});
-RadioGroup.displayName = "RadioGroup";
-
-const RadioGroupItem = React.forwardRef<
-  React.ComponentRef<typeof RadioPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioPrimitive.Root
-      ref={ref}
-      className={cn(
-        "border-ring bg-background flex aspect-square size-6 items-center justify-center rounded-full border",
-        "focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <RadioPrimitive.Indicator
-        keepMounted
-        className="data-unchecked:opacity-0 data-checked:opacity-100 data-starting-style:animate-fade-in data-ending-style:animate-fade-out"
-      >
-        <Circle className="fill-ring size-5" />
-      </RadioPrimitive.Indicator>
-    </RadioPrimitive.Root>
-  );
-});
-RadioGroupItem.displayName = "Radio";
-
-export { RadioGroup, RadioGroupItem };

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

@@ -1,207 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
-import { expect, userEvent, within } from "storybook/test";
-
-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]" aria-label="Select a fruit">
-        <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 SelectedValue: Story = {
-  render: () => (
-    <Select defaultValue="banana">
-      <SelectTrigger className="w-[180px]" aria-label="Selected fruit">
-        <SelectValue placeholder="Select a fruit" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="apple">Apple</SelectItem>
-        <SelectItem value="banana">Banana</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-  play: async ({ canvasElement }) => {
-    await expect(
-      within(canvasElement).getByRole("combobox", { name: "Selected fruit" }),
-    ).toHaveTextContent("Banana");
-  },
-};
-
-export const ExplicitItems: Story = {
-  render: () => (
-    <Select
-      defaultValue="us"
-      items={[
-        { value: "us", label: "United States" },
-        { value: "ca", label: "Canada" },
-      ]}
-    >
-      <SelectTrigger aria-label="Country">
-        <SelectValue placeholder="Select a country" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="us">US</SelectItem>
-        <SelectItem value="ca">CA</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-  play: async ({ canvasElement }) => {
-    await expect(
-      within(canvasElement).getByRole("combobox", { name: "Country" }),
-    ).toHaveTextContent("United States");
-  },
-};
-
-export const NullItem: Story = {
-  render: () => (
-    <Select defaultValue={null} items={[{ value: null, label: "All options" }]}>
-      <SelectTrigger aria-label="Filter">
-        <SelectValue placeholder="Choose a filter" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem>All options</SelectItem>
-        <SelectItem value="active">Active</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-  play: async ({ canvasElement }) => {
-    await expect(within(canvasElement).getByRole("combobox", { name: "Filter" })).toHaveTextContent(
-      "All options",
-    );
-  },
-};
-
-function ControlledNullSelection() {
-  const [value, setValue] = React.useState<string | null>("active");
-  const [lastChange, setLastChange] = React.useState<string | null>("active");
-
-  return (
-    <div>
-      <Select
-        value={value}
-        onValueChange={(nextValue) => {
-          setValue(nextValue);
-          setLastChange(nextValue);
-        }}
-        items={[
-          { value: null, label: "All options" },
-          { value: "active", label: "Active" },
-        ]}
-      >
-        <SelectTrigger aria-label="Controlled filter">
-          <SelectValue placeholder="Choose a filter" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem>All options</SelectItem>
-          <SelectItem value="active">Active</SelectItem>
-        </SelectContent>
-      </Select>
-      <output aria-label="Last selected value">{lastChange ?? "null"}</output>
-    </div>
-  );
-}
-
-export const ControlledNullChange: Story = {
-  render: () => <ControlledNullSelection />,
-  parameters: { a11y: { test: "off" } },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole("combobox", { name: "Controlled filter" });
-
-    await userEvent.click(trigger);
-    await userEvent.click(
-      await within(document.body).findByRole("option", { name: "All options" }),
-    );
-    await expect(trigger).toHaveTextContent("All options");
-    await expect(canvas.getByRole("status", { name: "Last selected value" })).toHaveTextContent(
-      "null",
-    );
-    await userEvent.keyboard("{Escape}");
-  },
-};
-
-export const WithGroups: Story = {
-  render: () => (
-    <Select>
-      <SelectTrigger className="w-[200px]" aria-label="Select timezone">
-        <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]" aria-label="Select a fruit">
-        <SelectValue placeholder="Select a fruit" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="apple">Apple</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-  play: async ({ canvasElement }) => {
-    await expect(
-      within(canvasElement).getByRole("combobox", { name: "Select a fruit" }),
-    ).toBeDisabled();
-  },
-};
-
-export const Small: Story = {
-  render: () => (
-    <Select>
-      <SelectTrigger size="sm" className="w-[160px]" aria-label="Select an option">
-        <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

@@ -1,182 +0,0 @@
-import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-type SelectProps = Omit<
-  React.ComponentProps<typeof SelectPrimitive.Root<string>>,
-  "value" | "defaultValue"
-> & {
-  value?: string | null;
-  defaultValue?: string | null;
-};
-
-function Select({ children, items, ...props }: SelectProps) {
-  const resolvedItems = items ?? getItemsFromChildren(children);
-
-  return (
-    <SelectPrimitive.Root data-slot="select" items={resolvedItems} {...props}>
-      {children}
-    </SelectPrimitive.Root>
-  );
-}
-
-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(
-        "border-input 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",
-        "data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-inset",
-        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-        "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>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position: _position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Popup> & {
-  position?: "item-aligned" | "popper";
-}) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Backdrop className="ui-mobile-sheet-backdrop" />
-      <SelectPrimitive.Positioner
-        className="ui-mobile-sheet-positioner"
-        alignItemWithTrigger={_position === "item-aligned"}
-        sideOffset={4}
-      >
-        <SelectPrimitive.Popup
-          data-slot="select-content"
-          className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none ui-mobile-sheet-popup",
-            className,
-          )}
-          {...props}
-        >
-          <SelectScrollUpButton />
-          <SelectPrimitive.List>{children}</SelectPrimitive.List>
-          <SelectScrollDownButton />
-        </SelectPrimitive.Popup>
-      </SelectPrimitive.Positioner>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground 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(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground 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",
-        className,
-      )}
-      {...props}
-    >
-      <span 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 getItemsFromChildren(children: React.ReactNode): Record<string, React.ReactNode> {
-  const items: Record<string, React.ReactNode> = {};
-
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) return;
-
-    const element = child as React.ReactElement<{
-      children?: React.ReactNode;
-      value?: unknown;
-    }>;
-
-    if (element.type === SelectItem) {
-      const value = element.props.value;
-      if (typeof value === "string") {
-        items[value] = element.props.children;
-      }
-      return;
-    }
-
-    if (element.props.children) {
-      Object.assign(items, getItemsFromChildren(element.props.children));
-    }
-  });
-
-  return items;
-}
-
-function SelectScrollUpButton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <SelectPrimitive.ScrollUpArrow
-      data-slot="select-scroll-up-button"
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpArrow>
-  );
-}
-
-function SelectScrollDownButton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <SelectPrimitive.ScrollDownArrow
-      data-slot="select-scroll-down-button"
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownArrow>
-  );
-}
-
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue };

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

@@ -1,70 +0,0 @@
-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-80 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,
-    "aria-label": "Volume",
-  },
-};
-
-export const WithStep: Story = {
-  args: {
-    defaultValue: [0],
-    min: 0,
-    max: 100,
-    step: 10,
-    "aria-label": "Volume",
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = React.useState([33]);
-    return (
-      <div className="w-80 space-y-4 px-1">
-        <Slider aria-label="Volume" value={value} onValueChange={setValue} min={0} max={100} />
-        <div className="flex justify-between text-sm">
-          <span className="text-muted-foreground">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,
-    "aria-label": "Volume",
-  },
-};

package/src/components/forms/slider.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import { Slider as SliderPrimitive } from "@base-ui/react/slider";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-type SliderProps = Omit<
-  React.ComponentProps<typeof SliderPrimitive.Root>,
-  "onValueChange" | "value" | "defaultValue"
-> & {
-  value?: number[];
-  defaultValue?: number[];
-  onValueChange?: (value: number[]) => void;
-};
-
-const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
-  (
-    {
-      className,
-      onValueChange,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      ...props
-    },
-    ref,
-  ) => (
-    <SliderPrimitive.Root
-      ref={ref}
-      {...props}
-      onValueChange={(value) => onValueChange?.(Array.isArray(value) ? [...value] : [value])}
-    >
-      <SliderPrimitive.Control
-        className={cn("relative flex w-full touch-none items-center py-2 select-none", className)}
-      >
-        <SliderPrimitive.Track className="bg-muted relative h-2 w-full grow rounded-full">
-          <SliderPrimitive.Indicator className="bg-primary absolute h-full rounded-full" />
-          <SliderPrimitive.Thumb
-            aria-label={ariaLabel ?? "Slider"}
-            aria-labelledby={ariaLabelledby}
-            className="border-border focus-visible:border-ring focus-visible:bg-primary focus-visible:ring-ring bg-background z-10 block h-6 w-6 rounded-full border shadow-sm ring-1 ring-border/5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-          />
-        </SliderPrimitive.Track>
-      </SliderPrimitive.Control>
-    </SliderPrimitive.Root>
-  ),
-);
-Slider.displayName = "Slider";
-
-export { Slider };