gladvn 0.2.14

package/src/components/macro/progress-preset.tsx

@@ -0,0 +1,45 @@
+import {
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue,
+} from "../../components/micro/progress";
+import * as React from "react";
+
+export type ProgressPresetProps = Omit<
+  React.ComponentProps<typeof Progress>,
+  "value"
+> & {
+  value?: number;
+  label?: React.ReactNode;
+  showValue?: boolean;
+};
+
+const ProgressPreset = React.forwardRef<
+  React.ComponentRef<typeof Progress>,
+  ProgressPresetProps
+>(({ children, label, showValue = true, value, ...progressProps }, ref) => {
+  const resolvedValue = value ?? null;
+
+  if (children) {
+    return (
+      <Progress ref={ref} value={resolvedValue} {...progressProps}>
+        {children}
+      </Progress>
+    );
+  }
+
+  return (
+    <Progress ref={ref} value={resolvedValue} {...progressProps}>
+      {label && <ProgressLabel>{label}</ProgressLabel>}
+      {label && showValue && <ProgressValue />}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </Progress>
+  );
+});
+ProgressPreset.displayName = "ProgressPreset";
+
+export { ProgressPreset };

package/src/components/macro/radio-group-preset.tsx

@@ -0,0 +1,115 @@
+import { Label } from "../../components/micro/label";
+import { RadioGroup, RadioGroupItem } from "../../components/micro/radio-group";
+import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+import * as React from "react";
+import { FieldPreset } from "./field-preset";
+
+export interface RadioGroupOption {
+  label: React.ReactNode;
+  value: string;
+  description?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type RadioGroupPresetProps = Omit<
+  React.ComponentProps<typeof RadioGroup>,
+  "className"
+> & {
+  className?: string;
+  options: RadioGroupOption[];
+  orientation?: "vertical" | "horizontal";
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+  size?: Size;
+};
+
+const RadioGroupPreset = React.forwardRef<
+  React.ComponentRef<typeof RadioGroup>,
+  RadioGroupPresetProps
+>(
+  (
+    {
+      options,
+      orientation = "vertical",
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      className,
+      id,
+      size = "md",
+      ...radioGroupProps
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const textSizeClass = cn({
+      "text-xs": size === "sm",
+      "text-sm": size === "md",
+      "text-base": size === "lg",
+    });
+
+    return (
+      <FieldPreset
+        size={size}
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        htmlFor={inputId}
+      >
+        <RadioGroup
+          ref={ref}
+          id={inputId}
+          className={cn("flex", {
+            "flex-col gap-2": orientation === "vertical",
+            "flex-row gap-4 flex-wrap": orientation !== "vertical",
+          })}
+          aria-invalid={!!errorMessage}
+          {...radioGroupProps}
+        >
+          {options.map((option) => (
+            <div key={option.value} className="flex items-start gap-3">
+              <div
+                className={cn("flex items-center leading-snug", textSizeClass)}
+              >
+                &#8203;
+                <RadioGroupItem
+                  value={option.value}
+                  id={`${inputId}-${option.value}`}
+                  disabled={option.disabled}
+                  size={size}
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <Label
+                  htmlFor={`${inputId}-${option.value}`}
+                  className={cn(
+                    "font-normal cursor-pointer leading-snug",
+                    textSizeClass,
+                    { "opacity-50 cursor-not-allowed": option.disabled },
+                  )}
+                >
+                  {option.label}
+                </Label>
+                {option.description && (
+                  <p className={cn("text-muted-foreground", textSizeClass)}>
+                    {option.description}
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </RadioGroup>
+      </FieldPreset>
+    );
+  },
+);
+RadioGroupPreset.displayName = "RadioGroupPreset";
+
+export { RadioGroupPreset };

package/src/components/macro/select-preset.tsx

@@ -0,0 +1,168 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  SelectPortal,
+} from "../../components/micro/select";
+import { ThemeWrapper } from "../../components/micro/theme-provider";
+import { type Size } from "../../lib/types";
+import * as React from "react";
+import { FieldPreset } from "./field-preset";
+
+interface SelectPresetOption {
+  value: string;
+  label: React.ReactNode;
+  /** Optional label to display inside the dropdown menu (if different from the trigger label) */
+  dropdownLabel?: React.ReactNode;
+  disabled?: boolean;
+  group?: string;
+}
+
+interface SelectPresetProps {
+  /** Flat list of options. Use the `group` field to group items. */
+  options: SelectPresetOption[];
+  /** Placeholder text when no value is selected. */
+  placeholder?: string;
+  /** Controlled value. */
+  value?: string;
+  /** Uncontrolled default value. */
+  defaultValue?: string;
+  /** Called when the value changes. */
+  onValueChange?: (value: string) => void;
+  /** Trigger size variant. */
+  size?: Size;
+  /** Disable the select. */
+  disabled?: boolean;
+  /** Additional className for the FieldPreset wrapper. */
+  className?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+  id?: string;
+}
+
+/**
+ * SelectPreset — A monolithic select for simple use cases.
+ * Wraps the composition-based Select parts into a single component
+ * driven by an `options` prop. Supports flat and grouped options.
+ */
+const SelectPreset = React.forwardRef<
+  React.ComponentRef<typeof SelectTrigger>,
+  SelectPresetProps
+>(
+  (
+    {
+      options,
+      placeholder,
+      value,
+      defaultValue,
+      onValueChange,
+      size,
+      disabled,
+      className,
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      id,
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+
+    return (
+      <FieldPreset
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        orientation="vertical"
+        htmlFor={inputId}
+        size={size}
+      >
+        <Select
+          value={value}
+          defaultValue={defaultValue}
+          onValueChange={
+            onValueChange &&
+            ((v: string | null) => {
+              if (v !== null) onValueChange(v);
+            })
+          }
+          disabled={disabled}
+          items={Object.fromEntries(
+            options.map((opt) => [opt.value, opt.label]),
+          )}
+        >
+          <SelectTrigger
+            ref={ref}
+            id={inputId}
+            size={size}
+            aria-invalid={!!errorMessage || undefined}
+          >
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectPortal>
+            <ThemeWrapper>
+              <SelectContent>
+                {(() => {
+                  const groups = new Map<
+                    string | undefined,
+                    SelectPresetOption[]
+                  >();
+                  options.forEach((opt) => {
+                    const key = opt.group;
+                    if (!groups.has(key)) {
+                      groups.set(key, []);
+                    }
+                    groups.get(key)!.push(opt);
+                  });
+
+                  return Array.from(groups.entries()).map(([groupLabel, opts]) => {
+                    if (groupLabel) {
+                      return (
+                        <SelectGroup key={groupLabel}>
+                          <SelectLabel>{groupLabel}</SelectLabel>
+                          {opts.map((opt) => (
+                            <SelectItem
+                              key={opt.value}
+                              value={opt.value}
+                              disabled={opt.disabled}
+                            >
+                              {opt.dropdownLabel || opt.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      );
+                    }
+                    // Items without a group
+                    return opts.map((opt) => (
+                      <SelectItem
+                        key={opt.value}
+                        value={opt.value}
+                        disabled={opt.disabled}
+                      >
+                        {opt.dropdownLabel || opt.label}
+                      </SelectItem>
+                    ));
+                  });
+                })()}
+              </SelectContent>
+            </ThemeWrapper>
+          </SelectPortal>
+        </Select>
+      </FieldPreset>
+    );
+  },
+);
+SelectPreset.displayName = "SelectPreset";
+
+export { SelectPreset };
+export type { SelectPresetOption, SelectPresetProps };

package/src/components/macro/slider-preset.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SliderPreset } from "./slider-preset";
+
+describe("SliderPreset", () => {
+  it("renders slider", () => {
+    const { container } = render(<SliderPreset />);
+    const slider = container.querySelector("[data-slot='slider']");
+    expect(slider).toBeInTheDocument();
+  });
+
+  it("renders label when provided", () => {
+    render(<SliderPreset label="Volume" />);
+    expect(screen.getByText("Volume")).toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(<SliderPreset label="Volume" description="Adjust volume" />);
+    expect(screen.getByText("Adjust volume")).toBeInTheDocument();
+  });
+
+  it("renders error message when provided", () => {
+    render(<SliderPreset errorMessage="Invalid range" />);
+    expect(screen.getByText("Invalid range")).toBeInTheDocument();
+  });
+
+  it("renders track and indicator", () => {
+    const { container } = render(<SliderPreset />);
+    expect(
+      container.querySelector("[data-slot='slider-track']"),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector("[data-slot='slider-indicator']"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders thumb", () => {
+    const { container } = render(<SliderPreset />);
+    expect(
+      container.querySelector("[data-slot='slider-thumb']"),
+    ).toBeInTheDocument();
+  });
+});

package/src/components/macro/slider-preset.tsx

@@ -0,0 +1,86 @@
+import {
+  Slider,
+  SliderControl,
+  SliderIndicator,
+  SliderThumb,
+  SliderTrack,
+} from "../../components/micro/slider";
+import * as React from "react";
+import { FieldPreset } from "./field-preset";
+
+export type SliderPresetProps = Omit<
+  React.ComponentProps<typeof Slider>,
+  "className"
+> & {
+  className?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+};
+
+const SliderPreset = React.forwardRef<
+  React.ComponentRef<typeof Slider>,
+  SliderPresetProps
+>(
+  (
+    {
+      defaultValue,
+      value,
+      min = 0,
+      max = 100,
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      className,
+      id,
+      ...sliderProps
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+
+    const _values = (() => {
+      if (Array.isArray(value)) return value;
+      if (Array.isArray(defaultValue)) return defaultValue;
+      return [min];
+    })();
+
+    return (
+      <FieldPreset
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        orientation="vertical"
+        htmlFor={inputId}
+      >
+        <Slider
+          ref={ref}
+          id={inputId}
+          defaultValue={defaultValue}
+          value={value}
+          min={min}
+          max={max}
+          aria-invalid={!!errorMessage}
+          {...sliderProps}
+        >
+          <SliderControl>
+            <SliderTrack>
+              <SliderIndicator />
+            </SliderTrack>
+            {Array.from({ length: _values.length }, (_, index) => (
+              <SliderThumb key={`${inputId}-thumb-${index}`} />
+            ))}
+          </SliderControl>
+        </Slider>
+      </FieldPreset>
+    );
+  },
+);
+SliderPreset.displayName = "SliderPreset";
+
+export { SliderPreset };

package/src/components/macro/switch-preset.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SwitchPreset } from "./switch-preset";
+
+describe("SwitchPreset", () => {
+  it("renders switch", () => {
+    render(<SwitchPreset />);
+    const switchEl = screen.getByRole("switch");
+    expect(switchEl).toBeInTheDocument();
+  });
+
+  it("renders label when provided", () => {
+    render(<SwitchPreset label="Airplane mode" />);
+    expect(screen.getByText("Airplane mode")).toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(
+      <SwitchPreset
+        label="Notifications"
+        description="Enable push notifications"
+      />,
+    );
+    expect(screen.getByText("Enable push notifications")).toBeInTheDocument();
+  });
+
+  it("renders error message when provided", () => {
+    render(<SwitchPreset errorMessage="Must enable" />);
+    expect(screen.getByText("Must enable")).toBeInTheDocument();
+  });
+
+  it("sets aria-invalid when errorMessage is provided", () => {
+    render(<SwitchPreset errorMessage="Required" />);
+    const switchEl = screen.getByRole("switch");
+    expect(switchEl).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("renders the switch thumb", () => {
+    const { container } = render(<SwitchPreset />);
+    const thumb = container.querySelector("[data-slot='switch-thumb']");
+    expect(thumb).toBeInTheDocument();
+  });
+
+  it("links label to switch", () => {
+    render(<SwitchPreset label="Dark mode" />);
+    const switchEl = screen.getByRole("switch");
+    const label = screen.getByText("Dark mode");
+    expect(switchEl).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+    // Label's for attr may point to internal input, not the switch button
+    expect(label.getAttribute("for")).toBeTruthy();
+  });
+});

package/src/components/macro/switch-preset.tsx

@@ -0,0 +1,70 @@
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "../../components/micro/field";
+import { Switch, SwitchThumb } from "../../components/micro/switch";
+import { cn } from "../../lib/utils";
+import * as React from "react";
+
+export type SwitchPresetProps = Omit<
+  React.ComponentProps<typeof Switch>,
+  "className"
+> & {
+  className?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+};
+
+const SwitchPreset = React.forwardRef<
+  React.ComponentRef<typeof Switch>,
+  SwitchPresetProps
+>(
+  (
+    {
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      className,
+      id,
+      size = "md",
+      ...switchProps
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+
+    return (
+      <Field
+        size={size}
+        error={!!errorMessage}
+        className={cn("gap-1.5", className)}
+      >
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex-1 space-y-0.5">
+            {label && <FieldLabel htmlFor={inputId}>{label}</FieldLabel>}
+            {description && <FieldDescription>{description}</FieldDescription>}
+          </div>
+          <Switch
+            ref={ref}
+            id={inputId}
+            aria-invalid={!!errorMessage}
+            size={size}
+            {...switchProps}
+          >
+            <SwitchThumb />
+          </Switch>
+        </div>
+        {showError && errorMessage && <FieldError>{errorMessage}</FieldError>}
+      </Field>
+    );
+  },
+);
+SwitchPreset.displayName = "SwitchPreset";
+
+export { SwitchPreset };

package/src/components/macro/tabs-preset.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TabsPreset } from "./tabs-preset";
+
+const items = [
+  { value: "tab1", title: "Tab 1", content: "Content 1" },
+  { value: "tab2", title: "Tab 2", content: "Content 2" },
+  { value: "tab3", title: "Tab 3", content: "Content 3", disabled: true },
+];
+
+describe("TabsPreset", () => {
+  it("renders all tab triggers", () => {
+    render(<TabsPreset items={items} defaultValue="tab1" />);
+    expect(screen.getByText("Tab 1")).toBeInTheDocument();
+    expect(screen.getByText("Tab 2")).toBeInTheDocument();
+    expect(screen.getByText("Tab 3")).toBeInTheDocument();
+  });
+
+  it("renders the active tab content", () => {
+    render(<TabsPreset items={items} defaultValue="tab1" />);
+    expect(screen.getByText("Content 1")).toBeInTheDocument();
+  });
+
+  it("renders correct number of triggers", () => {
+    const { container } = render(
+      <TabsPreset items={items} defaultValue="tab1" />,
+    );
+    const triggers = container.querySelectorAll("[data-slot='tabs-trigger']");
+    expect(triggers.length).toBe(3);
+  });
+});

package/src/components/macro/tabs-preset.tsx

@@ -0,0 +1,51 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  type tabsListVariants,
+} from "../../components/micro/tabs";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+export interface TabsPresetItem {
+  value: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type TabsPresetProps = React.ComponentProps<typeof Tabs> & {
+  items: TabsPresetItem[];
+  variant?: VariantProps<typeof tabsListVariants>["variant"];
+  listClassName?: string;
+};
+
+const TabsPreset = React.forwardRef<
+  React.ComponentRef<typeof Tabs>,
+  TabsPresetProps
+>(({ items, variant, listClassName, ...tabsProps }, ref) => {
+  return (
+    <Tabs ref={ref} {...tabsProps}>
+      <TabsList variant={variant} className={listClassName}>
+        {items.map((tab) => (
+          <TabsTrigger
+            key={tab.value}
+            value={tab.value}
+            disabled={tab.disabled}
+          >
+            {tab.title}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {items.map((tab) => (
+        <TabsContent key={tab.value} value={tab.value}>
+          {tab.content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+});
+TabsPreset.displayName = "TabsPreset";
+
+export { TabsPreset };