@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.1

package/dist/components/Popover/Popover.js

@@ -0,0 +1,116 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/Popover/Popover.tsx
+/**
+* Groups the popover parts and owns the open state. Accepts Base UI's Root
+* props: `open`/`defaultOpen`/`onOpenChange` for control, `modal` to lock
+* scroll or trap focus, and `handle`/`triggerId` for detached triggers.
+*/
+const Popover$1 = Popover.Root;
+/**
+* Creates a handle that links `Popover` with `PopoverTrigger`s rendered
+* elsewhere in the tree (toolbars, table rows). Triggers may attach a
+* `payload`, which the `Popover` children render function receives.
+*/
+const createPopoverHandle = Popover.createHandle;
+/**
+* The button that opens the popover. Ships unstyled so the visual comes from
+* composition — render the design system's Button:
+*
+*   <PopoverTrigger render={<Button variant="outline" />}>Filters</PopoverTrigger>
+*
+* While its popup is open the element carries `data-popup-open`, the hook for
+* a pressed look (e.g. `className="data-popup-open:bg-muted"`). Hover-card
+* behavior comes from `openOnHover` with its `delay`/`closeDelay` (300/0ms
+* defaults) — reserve it for previews; interactive content should open on
+* click so it can't vanish mid-interaction.
+*/
+const PopoverTrigger = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Popover.Trigger, {
+	ref,
+	className,
+	...rest
+}));
+PopoverTrigger.displayName = "PopoverTrigger";
+const popupSurfaceClasses = "rounded-md border border-border bg-background p-4 font-sans text-sm text-foreground shadow-md outline-none";
+const popupBehaviorClasses = "origin-[var(--transform-origin)] max-w-[min(20rem,var(--available-width))] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+const arrowClasses = "relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-border before:bg-background before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)]";
+const ARROW_PADDING = 8;
+/**
+* Class list for an element styled as the popover panel — for floating
+* surfaces that don't come from Base UI (static previews, custom
+* floating-ui popups) so every popup in the product shares one look.
+*/
+function popoverPopupVariants({ className } = {}) {
+	return cn(popupSurfaceClasses, className);
+}
+/**
+* The floating panel, with the portal and positioning plumbing folded in.
+* Anchored to its trigger by default; opens with a motion-safe scale/fade
+* from the anchor-facing corner. When the popover holds no `PopoverTitle`,
+* name the panel for assistive tech with `aria-label`.
+*/
+const PopoverPopup = forwardRef(({ side = "bottom", align = "center", sideOffset = 8, alignOffset = 0, collisionPadding, anchor, keepMounted = false, container, arrow = false, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(Popover.Portal, {
+	container,
+	keepMounted,
+	children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		anchor,
+		arrowPadding: ARROW_PADDING,
+		className: "z-50",
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			ref,
+			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
+			...rest,
+			children: [arrow && /* @__PURE__ */ jsx(Popover.Arrow, { className: arrowClasses }), children]
+		})
+	})
+}));
+PopoverPopup.displayName = "PopoverPopup";
+/**
+* Heading that names the popup — Base UI wires it to the panel via
+* `aria-labelledby` automatically. An `<h2>` by default; pick the level from
+* the surrounding outline with `render`, e.g. `render={<h3 />}`.
+*/
+const PopoverTitle = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Popover.Title, {
+	ref,
+	className: cn("m-0 font-heading text-lg font-semibold text-foreground", className),
+	...rest
+}));
+PopoverTitle.displayName = "PopoverTitle";
+/**
+* Supporting copy announced with the popup — Base UI wires it via
+* `aria-describedby` automatically.
+*/
+const PopoverDescription = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Popover.Description, {
+	ref,
+	className: cn("m-0 font-sans text-sm text-muted-foreground", className),
+	...rest
+}));
+PopoverDescription.displayName = "PopoverDescription";
+/**
+* A button that closes the popup. Unstyled, like the trigger — compose the
+* design system's Button for footer actions:
+*
+*   <PopoverClose render={<Button size="sm" variant="outline" />}>Done</PopoverClose>
+*
+* or borrow its classes for a corner icon dismiss, which needs an accessible
+* name:
+*
+*   <PopoverClose aria-label="Close" className={buttonVariants({ variant: "ghost", size: "sm", iconOnly: true })}>
+*     <XIcon />
+*   </PopoverClose>
+*/
+const PopoverClose = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Popover.Close, {
+	ref,
+	className,
+	...rest
+}));
+PopoverClose.displayName = "PopoverClose";
+//#endregion
+export { Popover$1 as Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, createPopoverHandle, popoverPopupVariants };

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover, PopoverAlign, PopoverClose, PopoverCloseProps, PopoverDescription, PopoverDescriptionProps, PopoverHandle, PopoverPopup, PopoverPopupProps, PopoverPopupVariantsOptions, PopoverProps, PopoverSide, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, createPopoverHandle, popoverPopupVariants } from "./Popover.js";
+export { Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, createPopoverHandle, popoverPopupVariants };

package/dist/components/Popover/index.js

@@ -0,0 +1,2 @@
+import { Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, createPopoverHandle, popoverPopupVariants } from "./Popover.js";
+export { Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, createPopoverHandle, popoverPopupVariants };

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,87 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/Progress/Progress.d.ts
+type ProgressSize = "sm" | "md" | "lg";
+type ProgressVariant = "primary" | "success" | "warning" | "destructive";
+interface ProgressTrackVariantsOptions {
+  size?: ProgressSize;
+  className?: string;
+}
+/**
+ * Class list for an element styled as a Progress track.
+ *
+ * Pair with `progressIndicatorVariants()` to build layouts the flattened
+ * component doesn't cover — e.g. a stacked storage bar. Such a composite is
+ * one image to assistive technology, so name the whole thing:
+ *
+ *   <div role="img" aria-label="Storage: documents 45%, media 21%"
+ *        className={progressTrackVariants({ size: "lg" })}>
+ *     <div className="flex h-full gap-px">
+ *       <div className={progressIndicatorVariants({ className: "rounded-none" })} style={{ width: "45%" }} />
+ *       <div className={progressIndicatorVariants({ variant: "success", className: "rounded-none" })} style={{ width: "21%" }} />
+ *     </div>
+ *   </div>
+ */
+declare function progressTrackVariants({ size, className }?: ProgressTrackVariantsOptions): string;
+interface ProgressIndicatorVariantsOptions {
+  variant?: ProgressVariant;
+  className?: string;
+}
+/** Class list for an element styled as a Progress fill — see `progressTrackVariants`. */
+declare function progressIndicatorVariants({ variant, className }?: ProgressIndicatorVariantsOptions): string;
+interface ProgressBaseProps extends Omit<ComponentPropsWithoutRef<typeof Progress.Root>, "className" | "value" | "children"> {
+  /**
+   * Completion within `[min, max]` (0–100 by default). Omit — or pass
+   * `null` — for an indeterminate bar while the amount of work is unknown.
+   * Never move it backwards; per NN/g, prefer indeterminate under ~10s and
+   * a percent-done readout beyond that.
+   */
+  value?: number | null;
+  /** Track thickness: `sm` 4px · `md` 8px · `lg` 12px. Text and spacing are unaffected. */
+  size?: ProgressSize;
+  /**
+   * Semantic fill color. For informational statuses use `primary` — the
+   * palette's `info` alias shares the primary ramp. Every fill clears the
+   * WCAG 1.4.11 3:1 non-text contrast floor against the track. The fill does
+   * not change on completion; switch to `success` yourself if the surface
+   * calls for it (see `data-complete`).
+   */
+  variant?: ProgressVariant;
+  /**
+   * Visible operation name (Base UI's Label part), rendered above the track
+   * and wired up as the accessible name. Without it, `aria-label` or
+   * `aria-labelledby` is required — enforced at the type level.
+   */
+  label?: ReactNode;
+  /**
+   * Show the formatted value (Base UI's Value part) at the trailing edge of
+   * the header row — a percentage by default; `format` and `locale` on the
+   * root change the formatting. Renders nothing while indeterminate.
+   */
+  showValue?: boolean;
+  className?: string;
+}
+/** A progressbar must expose an accessible name: a visible label or an aria attribute. */
+type ProgressLabellingProps = {
+  label: ReactNode;
+} | {
+  label?: never;
+  "aria-label": string;
+} | {
+  label?: never;
+  "aria-labelledby": string;
+};
+type ProgressProps = ProgressBaseProps & ProgressLabellingProps;
+/**
+ * Linear indicator for the status of a long-running task, built on Base UI's
+ * Progress. `value` fills the track (the width transition is motion-safe);
+ * omitting it renders the indeterminate sweep, which degrades to an opacity
+ * pulse under reduced motion so the bar never looks stalled. `min`, `max`,
+ * `format`, `locale`, `aria-valuetext`, and `getAriaValueText` pass through
+ * to Base UI's Root; `data-progressing` / `data-complete` /
+ * `data-indeterminate` are available as styling hooks. Linear only — for
+ * spinner-style ambient waits use AILoader.
+ */
+declare const Progress$1: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Progress$1 as Progress, ProgressIndicatorVariantsOptions, ProgressProps, ProgressSize, ProgressTrackVariantsOptions, ProgressVariant, progressIndicatorVariants, progressTrackVariants };

package/dist/components/Progress/Progress.js

@@ -0,0 +1,73 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/Progress/Progress.tsx
+const rootClasses = "flex w-full flex-col gap-1.5";
+const headerClasses = "flex items-baseline gap-2";
+const labelClasses = "font-sans text-sm font-medium text-foreground";
+const valueClasses = "ms-auto font-sans text-sm text-muted-foreground tabular-nums";
+const trackClasses = "relative w-full overflow-hidden rounded-full bg-muted";
+const trackSizeClasses = {
+	sm: "h-1",
+	md: "h-2",
+	lg: "h-3"
+};
+const indicatorClasses = "h-full rounded-full motion-safe:transition-[width] motion-safe:duration-500 motion-safe:data-indeterminate:w-2/5 motion-safe:data-indeterminate:animate-progress-indeterminate motion-safe:data-indeterminate:will-change-transform motion-reduce:data-indeterminate:w-full motion-reduce:data-indeterminate:animate-pulse";
+const indicatorVariantClasses = {
+	primary: "bg-primary",
+	success: "bg-success",
+	warning: "bg-warning-700",
+	destructive: "bg-destructive"
+};
+/**
+* Class list for an element styled as a Progress track.
+*
+* Pair with `progressIndicatorVariants()` to build layouts the flattened
+* component doesn't cover — e.g. a stacked storage bar. Such a composite is
+* one image to assistive technology, so name the whole thing:
+*
+*   <div role="img" aria-label="Storage: documents 45%, media 21%"
+*        className={progressTrackVariants({ size: "lg" })}>
+*     <div className="flex h-full gap-px">
+*       <div className={progressIndicatorVariants({ className: "rounded-none" })} style={{ width: "45%" }} />
+*       <div className={progressIndicatorVariants({ variant: "success", className: "rounded-none" })} style={{ width: "21%" }} />
+*     </div>
+*   </div>
+*/
+function progressTrackVariants({ size = "md", className } = {}) {
+	return cn(trackClasses, trackSizeClasses[size], className);
+}
+/** Class list for an element styled as a Progress fill — see `progressTrackVariants`. */
+function progressIndicatorVariants({ variant = "primary", className } = {}) {
+	return cn(indicatorClasses, indicatorVariantClasses[variant], className);
+}
+/**
+* Linear indicator for the status of a long-running task, built on Base UI's
+* Progress. `value` fills the track (the width transition is motion-safe);
+* omitting it renders the indeterminate sweep, which degrades to an opacity
+* pulse under reduced motion so the bar never looks stalled. `min`, `max`,
+* `format`, `locale`, `aria-valuetext`, and `getAriaValueText` pass through
+* to Base UI's Root; `data-progressing` / `data-complete` /
+* `data-indeterminate` are available as styling hooks. Linear only — for
+* spinner-style ambient waits use AILoader.
+*/
+const Progress$1 = forwardRef(({ value = null, size = "md", variant = "primary", label, showValue = false, className, ...rest }, ref) => /* @__PURE__ */ jsxs(Progress.Root, {
+	ref,
+	value,
+	className: cn(rootClasses, className),
+	...rest,
+	children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
+		className: headerClasses,
+		children: [label != null && /* @__PURE__ */ jsx(Progress.Label, {
+			className: labelClasses,
+			children: label
+		}), showValue && /* @__PURE__ */ jsx(Progress.Value, { className: valueClasses })]
+	}), /* @__PURE__ */ jsx(Progress.Track, {
+		className: progressTrackVariants({ size }),
+		children: /* @__PURE__ */ jsx(Progress.Indicator, { className: progressIndicatorVariants({ variant }) })
+	})]
+}));
+Progress$1.displayName = "Progress";
+//#endregion
+export { Progress$1 as Progress, progressIndicatorVariants, progressTrackVariants };

package/dist/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+import { Progress, ProgressIndicatorVariantsOptions, ProgressProps, ProgressSize, ProgressTrackVariantsOptions, ProgressVariant, progressIndicatorVariants, progressTrackVariants } from "./Progress.js";
+export { Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, progressIndicatorVariants, progressTrackVariants };

package/dist/components/Progress/index.js

@@ -0,0 +1,2 @@
+import { Progress, progressIndicatorVariants, progressTrackVariants } from "./Progress.js";
+export { Progress, progressIndicatorVariants, progressTrackVariants };

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,65 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/Radio/Radio.d.ts
+type RadioSize = "sm" | "md" | "lg";
+interface RadioVariantsOptions {
+  size?: RadioSize;
+  className?: string;
+}
+/**
+ * Class list for the radio circle itself. State styling hangs off Base UI's
+ * data-attributes (`data-checked`, `data-disabled`, `data-readonly`,
+ * `data-invalid`) plus `aria-invalid` — useful when styling a sibling of the
+ * radio (e.g. a selection card) with the same look.
+ */
+declare function radioVariants({ size, className }?: RadioVariantsOptions): string;
+interface RadioProps extends Omit<ComponentPropsWithoutRef<typeof Radio.Root>, "className"> {
+  /**
+   * Circle size. The 24px `lg` circle meets the WCAG 2.5.8 target-size floor
+   * on its own; `sm`/`md` rely on the clickable `label` (or surrounding
+   * spacing) to extend the target. Prefer `md`+ with a label on touch-first
+   * surfaces.
+   */
+  size?: RadioSize;
+  /**
+   * Visible option label rendered in an enclosing `<label>`, so clicking it
+   * selects the radio and it names the option. Without it, provide an
+   * accessible name another way: `aria-label`, `aria-labelledby`, or an
+   * external `<label>`. Unlike Checkbox, `required` adds no asterisk here —
+   * a radio option is never required by itself; mark the group caption
+   * instead.
+   */
+  label?: ReactNode;
+  /**
+   * Supporting copy below the label, linked via `aria-describedby`. Rendered
+   * outside the `<label>` element so screen readers announce it as the
+   * description instead of reading it into the accessible name.
+   */
+  description?: ReactNode;
+  /** Applied to the radio circle itself, also when `label`/`description` wrap it. */
+  className?: string;
+}
+/**
+ * One option of a `RadioGroup`, built on Base UI's Radio. The indicator dot
+ * is built in and animates behind `motion-safe`. `ref` and `className`
+ * always target the circle element, whether or not the labelled layout
+ * wraps it. Radios only function inside a `RadioGroup`.
+ */
+declare const Radio$1: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroup>, "className"> {
+  className?: string;
+}
+/**
+ * Holds the single selected value (`value`/`defaultValue`/`onValueChange`)
+ * shared by child radios matched by their `value` prop, and submits it in
+ * forms via `name`. `disabled`, `readOnly`, and `required` apply group-wide.
+ * Lays the options out as a vertical stack — pass `className="flex-row"` for
+ * a horizontal row (arrow keys move the selection either way). The group
+ * needs an accessible name: `aria-labelledby` pointing at a caption, or
+ * `aria-label`; when the choice is required, mark that caption — not the
+ * individual options.
+ */
+declare const RadioGroup$1: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupProps, RadioProps, RadioSize, RadioVariantsOptions, radioVariants };

package/dist/components/Radio/Radio.js

@@ -0,0 +1,93 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/Radio/Radio.tsx
+const circleClasses = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-full border border-border bg-background text-primary-foreground transition-colors duration-150 hover:border-slate-300 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const circleSizeClasses = {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6"
+};
+const dotSizeClasses = {
+	sm: "size-1.5",
+	md: "size-2",
+	lg: "size-2.5"
+};
+const circleOffsetClasses = {
+	sm: "mt-0.5",
+	md: "",
+	lg: ""
+};
+const labelTextClasses = {
+	sm: "text-sm",
+	md: "text-sm",
+	lg: "text-base"
+};
+const descriptionTextClasses = {
+	sm: "text-xs ps-6",
+	md: "text-xs ps-7",
+	lg: "text-sm ps-8"
+};
+/**
+* Class list for the radio circle itself. State styling hangs off Base UI's
+* data-attributes (`data-checked`, `data-disabled`, `data-readonly`,
+* `data-invalid`) plus `aria-invalid` — useful when styling a sibling of the
+* radio (e.g. a selection card) with the same look.
+*/
+function radioVariants({ size = "md", className } = {}) {
+	return cn(circleClasses, circleSizeClasses[size], className);
+}
+/**
+* One option of a `RadioGroup`, built on Base UI's Radio. The indicator dot
+* is built in and animates behind `motion-safe`. `ref` and `className`
+* always target the circle element, whether or not the labelled layout
+* wraps it. Radios only function inside a `RadioGroup`.
+*/
+const Radio$1 = forwardRef(({ size = "md", label, description, className, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+	const descriptionId = useId();
+	const hasLabel = label != null;
+	const hasText = hasLabel || description != null;
+	const control = /* @__PURE__ */ jsx(Radio.Root, {
+		ref,
+		"aria-describedby": [ariaDescribedBy, description != null ? descriptionId : void 0].filter(Boolean).join(" ") || void 0,
+		className: cn(radioVariants({ size }), hasText && "data-disabled:opacity-100", hasLabel && circleOffsetClasses[size], className),
+		...rest,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: cn("rounded-full bg-current", "motion-safe:transition-[scale,opacity] motion-safe:duration-200 motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)]", "motion-safe:data-starting-style:scale-0 motion-safe:data-starting-style:opacity-0", "motion-safe:data-ending-style:scale-0 motion-safe:data-ending-style:opacity-0", "motion-safe:data-ending-style:duration-100 motion-safe:data-ending-style:ease-in", dotSizeClasses[size]) })
+	});
+	if (!hasText) return control;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
+		children: [hasLabel ? /* @__PURE__ */ jsxs("label", {
+			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default"),
+			children: [control, /* @__PURE__ */ jsx("span", {
+				className: cn("font-medium text-foreground select-none", labelTextClasses[size]),
+				children: label
+			})]
+		}) : control, description != null && /* @__PURE__ */ jsx("span", {
+			id: descriptionId,
+			className: cn("text-muted-foreground", descriptionTextClasses[size]),
+			children: description
+		})]
+	});
+});
+Radio$1.displayName = "Radio";
+/**
+* Holds the single selected value (`value`/`defaultValue`/`onValueChange`)
+* shared by child radios matched by their `value` prop, and submits it in
+* forms via `name`. `disabled`, `readOnly`, and `required` apply group-wide.
+* Lays the options out as a vertical stack — pass `className="flex-row"` for
+* a horizontal row (arrow keys move the selection either way). The group
+* needs an accessible name: `aria-labelledby` pointing at a caption, or
+* `aria-label`; when the choice is required, mark that caption — not the
+* individual options.
+*/
+const RadioGroup$1 = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(RadioGroup, {
+	ref,
+	className: cn("flex flex-col items-start gap-3", className),
+	...rest
+}));
+RadioGroup$1.displayName = "RadioGroup";
+//#endregion
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, radioVariants };

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+import { Radio, RadioGroup, RadioGroupProps, RadioProps, RadioSize, RadioVariantsOptions, radioVariants } from "./Radio.js";
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, radioVariants };

package/dist/components/Radio/index.js

@@ -0,0 +1,2 @@
+import { Radio, RadioGroup, radioVariants } from "./Radio.js";
+export { Radio, RadioGroup, radioVariants };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,136 @@
+import { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
+import { Select } from "@base-ui/react/select";
+//#region src/components/Select/Select.d.ts
+/**
+ * Groups the select parts and owns value + popup state. This is Base UI's
+ * `Select.Root` re-exported unchanged, so every root feature is available:
+ * `value`/`defaultValue`/`onValueChange(value, details)`, `multiple`,
+ * `items` (lets `SelectValue` display labels instead of raw values),
+ * `name`/`required`/`disabled`/`readOnly` form wiring, and object values via
+ * `isItemEqualToValue`/`itemToStringLabel`/`itemToStringValue`.
+ */
+declare const Select$1: typeof Select.Root;
+type SelectProps<Value = unknown, Multiple extends boolean | undefined = false> = Select.Root.Props<Value, Multiple>;
+interface SelectLabelProps extends Omit<ComponentPropsWithoutRef<typeof Select.Label>, "className"> {
+  className?: string;
+}
+/**
+ * Visible label for the select — Base UI associates it with the trigger
+ * automatically, and clicking it focuses the trigger without opening the
+ * popup. Renders a `<div>`. When no visible label is rendered, give the
+ * trigger an accessible name with `aria-label` instead.
+ */
+declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+type SelectTriggerVariant = "outline" | "ghost";
+type SelectTriggerSize = "sm" | "md" | "lg";
+type BaseTriggerProps = ComponentPropsWithoutRef<typeof Select.Trigger>;
+interface SelectTriggerVariantsOptions {
+  variant?: SelectTriggerVariant;
+  size?: SelectTriggerSize;
+  fullWidth?: boolean;
+  className?: string;
+}
+/**
+ * Class list for an element styled as the select trigger — for select-shaped
+ * controls that don't come from Base UI (custom comboboxes, fake dropdowns
+ * in previews) so every value-picker in the product shares one look.
+ */
+declare function selectTriggerVariants({ variant, size, fullWidth, className }?: SelectTriggerVariantsOptions): string;
+interface SelectTriggerProps extends Omit<BaseTriggerProps, "className"> {
+  /** Visual style: `outline` is the input-like default; `ghost` is borderless for toolbars and dense inline filters. */
+  variant?: SelectTriggerVariant;
+  /** Control height. `sm` (32px) meets the WCAG 2.5.8 AA target-size floor; prefer `md`/`lg` for touch-first surfaces. */
+  size?: SelectTriggerSize;
+  /** Stretch to fill the container width — the usual setting inside form layouts. `anchorWidth` takes precedence when both are set. */
+  fullWidth?: boolean;
+  /**
+   * CSS width of the trigger (the popup anchor). Accepts a number in pixels
+   * or any CSS width such as `"14rem"`, `"100%"`, or `"max-content"`.
+   * `"max-content"` keeps the control only as wide as the selected value,
+   * padding, and icon; the popup still grows when an option needs more room.
+   * A consumer `style.width` can override this convenience prop.
+   */
+  anchorWidth?: CSSProperties["width"];
+  /** Replaces the dropdown chevron. Decorative — hidden from assistive technology. */
+  icon?: ReactNode;
+  className?: string;
+}
+/**
+ * The button that shows the current value and opens the popup. Place a
+ * `SelectValue` inside it and the dropdown chevron is appended
+ * automatically. The trigger's accessible name comes from a sibling
+ * `SelectLabel` (or a composed `Field.Label`); without one, pass
+ * `aria-label`.
+ */
+declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface SelectValueProps extends Omit<ComponentPropsWithoutRef<typeof Select.Value>, "className"> {
+  className?: string;
+}
+/**
+ * The selected value's text inside the trigger. Set `placeholder` for the
+ * empty state (rendered muted). With `items` on the root it shows the
+ * matching label instead of the raw value; pass a function as `children`
+ * to format the value yourself — the multi-select "+N more" pattern lives
+ * there.
+ */
+declare const SelectValue: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof Select.Positioner>;
+type SelectAlign = NonNullable<BasePositionerProps["align"]>;
+interface SelectPopupProps extends Omit<ComponentPropsWithoutRef<typeof Select.Popup>, "className"> {
+  /** How the popup lines up along the trigger's bottom (or top) edge. */
+  align?: SelectAlign;
+  /** Gap between trigger and popup in pixels. */
+  sideOffset?: BasePositionerProps["sideOffset"];
+  /** Additional shift along the alignment axis in pixels. */
+  alignOffset?: BasePositionerProps["alignOffset"];
+  /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
+  collisionPadding?: BasePositionerProps["collisionPadding"];
+  /**
+   * Caps the popup's height so long lists scroll inside it — a number is
+   * pixels, a string is any CSS length. Whatever the value, the popup never
+   * exceeds the space between the trigger and the viewport edge.
+   */
+  maxHeight?: number | string;
+  /** Portal destination. Defaults to `document.body`. */
+  container?: ComponentPropsWithoutRef<typeof Select.Portal>["container"];
+  /**
+   * Applied to the popup panel. Width hooks: the panel is at least as wide
+   * as the trigger — set `w-[var(--anchor-width)]` to match it exactly or
+   * `w-*`/`max-w-*` for a fixed width. Cap height with the `maxHeight` prop.
+   */
+  className?: string;
+}
+/**
+ * The floating option list, with the portal, positioning, list, and
+ * hover-scroll arrow plumbing folded in. Always drops below the trigger and
+ * flips above it only when the space below runs out — never sideways. Long
+ * lists scroll inside the popup, up to `maxHeight`.
+ */
+declare const SelectPopup: import("react").ForwardRefExoticComponent<SelectPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface SelectItemProps extends Omit<ComponentPropsWithoutRef<typeof Select.Item>, "className"> {
+  className?: string;
+}
+/**
+ * One option in the popup. Children render as the option's label (wrapped in
+ * Base UI's `ItemText`); a check mark appears at the item's right edge while
+ * selected. Set `label` when children aren't plain text so keyboard
+ * typeahead has something to match, and `disabled` for unavailable options.
+ */
+declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface SelectGroupProps extends Omit<ComponentPropsWithoutRef<typeof Select.Group>, "className"> {
+  className?: string;
+}
+/** Groups related options under a `SelectGroupLabel`, announced together by assistive technology. */
+declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface SelectGroupLabelProps extends Omit<ComponentPropsWithoutRef<typeof Select.GroupLabel>, "className"> {
+  className?: string;
+}
+/** Heading for a `SelectGroup` — visually a meta caption, wired to the group via `aria-labelledby`. */
+declare const SelectGroupLabel: import("react").ForwardRefExoticComponent<SelectGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+interface SelectSeparatorProps extends Omit<ComponentPropsWithoutRef<typeof Select.Separator>, "className"> {
+  className?: string;
+}
+/** Divider between option groups, exposed to screen readers as a separator. */
+declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Select$1 as Select, SelectAlign, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectPopup, SelectPopupProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectTriggerSize, SelectTriggerVariant, SelectTriggerVariantsOptions, SelectValue, SelectValueProps, selectTriggerVariants };