panelui-web 0.10.1 → 0.11.0

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

@@ -34,6 +34,12 @@
  * JavaScript.
  */
 import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export interface CardProps extends ComponentProps<'div'> {
     /** `sm` tightens the padding and the title, for a card in a dense grid. Default `default`. */
     size?: 'default' | 'sm';
@@ -43,14 +49,14 @@ export interface CardProps extends ComponentProps<'div'> {
      */
     as?: 'div' | 'article' | 'section' | 'li';
 }
-declare function CardRoot({ size, as: Element, className, ...props }: CardProps): import("react").JSX.Element;
+declare function CardRoot({ size, as, render, className, ...props }: CardProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CardRoot {
     var displayName: string;
 }
 export interface CardHeaderProps extends ComponentProps<'div'> {
 }
 /** The title, the line under it, and the action beside them. */
-declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+declare function CardHeader({ className, render, ...props }: CardHeaderProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CardHeader {
     var displayName: string;
 }
@@ -59,28 +65,28 @@ export interface CardTitleProps extends ComponentProps<'h3'> {
     as?: 'h2' | 'h3' | 'h4' | 'div';
 }
 /** What the card is about. A heading, so the page outline includes it. */
-declare function CardTitle({ as: Element, className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare function CardTitle({ as, render, className, ...props }: CardTitleProps & RenderProp<'h3'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CardTitle {
     var displayName: string;
 }
 export interface CardDescriptionProps extends ComponentProps<'p'> {
 }
 /** A line under the title. */
-declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+declare function CardDescription({ className, render, ...props }: CardDescriptionProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CardDescription {
     var displayName: string;
 }
 export interface CardActionProps extends ComponentProps<'div'> {
 }
 /** A control for the whole card, held in the header's top trailing corner. */
-declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+declare function CardAction({ className, render, ...props }: CardActionProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CardAction {
     var displayName: string;
 }
 export interface CardContentProps extends ComponentProps<'div'> {
 }
 /** The body. */
-declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+declare function CardContent({ className, render, ...props }: CardContentProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CardContent {
     var displayName: string;
 }
@@ -92,7 +98,7 @@ export interface CardFooterProps extends ComponentProps<'div'> {
     variant?: 'plain' | 'panel';
 }
 /** The row at the bottom, usually the card's actions. */
-declare function CardFooter({ variant, className, ...props }: CardFooterProps): import("react").JSX.Element;
+declare function CardFooter({ variant, className, render, ...props }: CardFooterProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CardFooter {
     var displayName: string;
 }

package/dist/components/card/index.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+'use client';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const cardVariants = tv({
     slots: {
         root: 'group/card flex flex-col rounded-2xl border bg-card text-card-foreground shadow-xs',
@@ -34,47 +36,73 @@ const cardVariants = tv({
         },
     },
 });
-function CardRoot({ size = 'default', as: Element = 'div', className, ...props }) {
+function CardRoot({ size = 'default', as = 'div', render, className, ...props }) {
     const slots = cardVariants();
-    const Tag = Element;
-    return _jsx(Tag, { "data-slot": "card", "data-size": size, className: slots.root({ className }), ...props });
+    return useRender({
+        defaultTagName: as,
+        render,
+        props: mergeProps({ 'data-slot': 'card', 'data-size': size, className: slots.root({ className }) }, props),
+    });
 }
 CardRoot.displayName = 'Card';
 /** The title, the line under it, and the action beside them. */
-function CardHeader({ className, ...props }) {
+function CardHeader({ className, render, ...props }) {
     const slots = cardVariants();
-    return _jsx("div", { "data-slot": "card-header", className: slots.header({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'card-header', className: slots.header({ className }) }, props),
+    });
 }
 CardHeader.displayName = 'Card.Header';
 /** What the card is about. A heading, so the page outline includes it. */
-function CardTitle({ as: Element = 'h3', className, ...props }) {
+function CardTitle({ as = 'h3', render, className, ...props }) {
     const slots = cardVariants();
-    const Tag = Element;
-    return _jsx(Tag, { "data-slot": "card-title", className: slots.title({ className }), ...props });
+    return useRender({
+        defaultTagName: as,
+        render,
+        props: mergeProps({ 'data-slot': 'card-title', className: slots.title({ className }) }, props),
+    });
 }
 CardTitle.displayName = 'Card.Title';
 /** A line under the title. */
-function CardDescription({ className, ...props }) {
+function CardDescription({ className, render, ...props }) {
     const slots = cardVariants();
-    return _jsx("p", { "data-slot": "card-description", className: slots.description({ className }), ...props });
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'card-description', className: slots.description({ className }) }, props),
+    });
 }
 CardDescription.displayName = 'Card.Description';
 /** A control for the whole card, held in the header's top trailing corner. */
-function CardAction({ className, ...props }) {
+function CardAction({ className, render, ...props }) {
     const slots = cardVariants();
-    return _jsx("div", { "data-slot": "card-action", className: slots.action({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'card-action', className: slots.action({ className }) }, props),
+    });
 }
 CardAction.displayName = 'Card.Action';
 /** The body. */
-function CardContent({ className, ...props }) {
+function CardContent({ className, render, ...props }) {
     const slots = cardVariants();
-    return _jsx("div", { "data-slot": "card-content", className: slots.content({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'card-content', className: slots.content({ className }) }, props),
+    });
 }
 CardContent.displayName = 'Card.Content';
 /** The row at the bottom, usually the card's actions. */
-function CardFooter({ variant = 'plain', className, ...props }) {
+function CardFooter({ variant = 'plain', className, render, ...props }) {
     const slots = cardVariants({ footer: variant });
-    return _jsx("div", { "data-slot": "card-footer", className: slots.footer({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'card-footer', className: slots.footer({ className }) }, props),
+    });
 }
 CardFooter.displayName = 'Card.Footer';
 export const Card = Object.assign(CardRoot, {

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

@@ -0,0 +1,73 @@
+/**
+ * Checkbox — one choice that is on or off, usually among others that are too.
+ *
+ * ```tsx
+ * <Label>
+ *   <Checkbox defaultChecked />
+ *   <Label.Text>Email me a receipt</Label.Text>
+ * </Label>
+ *
+ * <Checkbox.Group defaultValue={['sms']} aria-label="Notify me by">
+ *   <Label><Checkbox value="email" /><Label.Text>Email</Label.Text></Label>
+ *   <Label><Checkbox value="sms" /><Label.Text>Text message</Label.Text></Label>
+ * </Checkbox.Group>
+ * ```
+ *
+ * ## The tick is drawn, not swapped in
+ *
+ * When it is checked, the tick is drawn as a line from its short end to its
+ * long one, the way a pen would make it, and the box fills behind it. Unchecked,
+ * the line goes back the way it came. A box that only changes colour is easy to
+ * miss in a long list; one that draws its mark is not. With reduced motion the
+ * tick appears at once.
+ *
+ * ## Some, but not all
+ *
+ * `indeterminate` draws a dash instead of a tick, for a box that stands for a
+ * group whose members are mixed. A `Checkbox.Group` with `allValues` does the
+ * bookkeeping: a checkbox in it marked `parent` is checked when every member
+ * is, a dash when some are, and checks or clears them all when pressed.
+ *
+ * ## Choosing a colour
+ *
+ * A checkbox fills with `primary`. `success`, `info` and `destructive` are for
+ * a box whose meaning is that colour — "I accept the risk" is `destructive`.
+ */
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+import type { CSSProperties } from 'react';
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+export type CheckboxColor = 'primary' | 'success' | 'info' | 'destructive';
+export interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, 'className' | 'color'> {
+    /** Default `md`. */
+    size?: CheckboxSize;
+    /** The colour it fills with when checked. `primary` by default. */
+    color?: CheckboxColor;
+    /** What a screen reader calls it, when there is no visible label tied to it. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A checkbox. Takes `checked`/`onCheckedChange` or `defaultChecked`,
+ * `indeterminate`, and `name` and `value` for a form or a `Checkbox.Group`.
+ */
+declare function CheckboxRoot({ size, color, label, className, ...props }: CheckboxProps): import("react").JSX.Element;
+declare namespace CheckboxRoot {
+    var displayName: string;
+}
+export interface CheckboxGroupProps extends Omit<BaseCheckboxGroup.Props, 'className'> {
+    className?: string;
+}
+/**
+ * Holds the values of the checkboxes inside it as one array. Takes
+ * `value`/`onValueChange` or `defaultValue`, and `allValues` for a `parent` box.
+ */
+declare function CheckboxGroup({ className, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+declare namespace CheckboxGroup {
+    var displayName: string;
+}
+export declare const Checkbox: typeof CheckboxRoot & {
+    Group: typeof CheckboxGroup;
+};
+export { CheckboxGroup };

package/dist/components/checkbox/index.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Checkbox — one choice that is on or off, usually among others that are too.
+ *
+ * ```tsx
+ * <Label>
+ *   <Checkbox defaultChecked />
+ *   <Label.Text>Email me a receipt</Label.Text>
+ * </Label>
+ *
+ * <Checkbox.Group defaultValue={['sms']} aria-label="Notify me by">
+ *   <Label><Checkbox value="email" /><Label.Text>Email</Label.Text></Label>
+ *   <Label><Checkbox value="sms" /><Label.Text>Text message</Label.Text></Label>
+ * </Checkbox.Group>
+ * ```
+ *
+ * ## The tick is drawn, not swapped in
+ *
+ * When it is checked, the tick is drawn as a line from its short end to its
+ * long one, the way a pen would make it, and the box fills behind it. Unchecked,
+ * the line goes back the way it came. A box that only changes colour is easy to
+ * miss in a long list; one that draws its mark is not. With reduced motion the
+ * tick appears at once.
+ *
+ * ## Some, but not all
+ *
+ * `indeterminate` draws a dash instead of a tick, for a box that stands for a
+ * group whose members are mixed. A `Checkbox.Group` with `allValues` does the
+ * bookkeeping: a checkbox in it marked `parent` is checked when every member
+ * is, a dash when some are, and checks or clears them all when pressed.
+ *
+ * ## Choosing a colour
+ *
+ * A checkbox fills with `primary`. `success`, `info` and `destructive` are for
+ * a box whose meaning is that colour — "I accept the risk" is `destructive`.
+ */
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+import { tv } from 'tailwind-variants';
+const checkboxVariants = tv({
+    slots: {
+        root: [
+            'group/checkbox relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[0.3rem] border outline-none',
+            'border-input bg-background shadow-xs dark:bg-input/30',
+            'transition-[background-color,border-color,box-shadow] duration-150',
+            'hover:not-data-disabled:border-[color-mix(in_oklab,var(--input),var(--foreground)_25%)]',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            // Checked or mixed: the box fills with the colour, and the border goes with it.
+            'data-checked:border-(--checkbox-color) data-checked:bg-(--checkbox-color)',
+            'data-indeterminate:border-(--checkbox-color) data-indeterminate:bg-(--checkbox-color)',
+            'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+            // A wider target than the box, so it is not a fiddle to hit on a phone.
+            "after:absolute after:-inset-2 after:content-['']",
+        ],
+        indicator: 'pointer-events-none absolute inset-0 flex items-center justify-center text-(--checkbox-mark)',
+        mark: 'size-[78%] overflow-visible',
+        // The tick is one path of length ~1; the dash offset draws and undraws it.
+        tick: [
+            '[stroke-dasharray:1] [stroke-dashoffset:1] transition-[stroke-dashoffset] duration-200 ease-out',
+            'group-data-checked/checkbox:[stroke-dashoffset:0] group-data-checked/checkbox:delay-75',
+            'motion-reduce:transition-none',
+        ],
+        dash: 'origin-center scale-x-0 transition-transform duration-150 group-data-indeterminate/checkbox:scale-x-100 motion-reduce:transition-none',
+        group: 'flex flex-col gap-3',
+    },
+    variants: {
+        size: {
+            sm: { root: 'size-3.5' },
+            md: { root: 'size-4' },
+            lg: { root: 'size-5 rounded-[0.375rem]' },
+        },
+        color: {
+            primary: { root: '[--checkbox-color:var(--primary)] [--checkbox-mark:var(--primary-foreground)]' },
+            success: { root: '[--checkbox-color:var(--success)] [--checkbox-mark:white]' },
+            info: { root: '[--checkbox-color:var(--info)] [--checkbox-mark:white]' },
+            destructive: { root: '[--checkbox-color:var(--destructive)] [--checkbox-mark:white]' },
+        },
+    },
+    defaultVariants: { size: 'md', color: 'primary' },
+});
+/**
+ * A checkbox. Takes `checked`/`onCheckedChange` or `defaultChecked`,
+ * `indeterminate`, and `name` and `value` for a form or a `Checkbox.Group`.
+ */
+function CheckboxRoot({ size = 'md', color, label, className, ...props }) {
+    const slots = checkboxVariants({ size, color });
+    return (_jsx(BaseCheckbox.Root, { "data-slot": "checkbox", "data-size": size, "aria-label": label, className: slots.root({ className }), ...props, children: _jsx(BaseCheckbox.Indicator, { "data-slot": "checkbox-indicator", keepMounted: true, className: slots.indicator(), children: _jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", fill: "none", className: slots.mark(), children: [_jsx("path", { className: slots.tick(), pathLength: 1, d: "M3.5 8.5 6.6 11.5 12.5 4.75", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { className: slots.dash(), d: "M4 8h8", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" })] }) }) }));
+}
+CheckboxRoot.displayName = 'Checkbox';
+/**
+ * Holds the values of the checkboxes inside it as one array. Takes
+ * `value`/`onValueChange` or `defaultValue`, and `allValues` for a `parent` box.
+ */
+function CheckboxGroup({ className, ...props }) {
+    return _jsx(BaseCheckboxGroup, { "data-slot": "checkbox-group", className: checkboxVariants().group({ className }), ...props });
+}
+CheckboxGroup.displayName = 'Checkbox.Group';
+export const Checkbox = Object.assign(CheckboxRoot, { Group: CheckboxGroup });
+export { CheckboxGroup };

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

@@ -0,0 +1,79 @@
+/**
+ * Chip — a small pill that can be pressed: a filter turned on and off, or a value taken back out.
+ *
+ * ```tsx
+ * <Chip.Group defaultValue={['open']} aria-label="Show">
+ *   <Chip value="open">Open</Chip>
+ *   <Chip value="merged">Merged</Chip>
+ *   <Chip value="closed">Closed</Chip>
+ * </Chip.Group>
+ *
+ * <Chip onRemove={() => drop('design')}>design</Chip>
+ * ```
+ *
+ * ## Two jobs, one shape
+ *
+ * A chip on its own, or in a `Chip.Group`, is a toggle: pressing it turns a
+ * filter on, and a tick slides in at its start while the pill fills, so a
+ * row of them reads as a row of switches rather than a row of tags. The
+ * group holds the values that are on as one array; pass `multiple={false}`
+ * for a row where only one can be on.
+ *
+ * Given `onRemove`, a chip is a value that has been added — a recipient, a
+ * tag — and carries a small × to take it back out. It is not a toggle then,
+ * and pressing Backspace or Delete while its × has focus removes it too.
+ *
+ * For a label that only says what something is, and is never pressed, use
+ * Badge.
+ */
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export type ChipColor = 'primary' | 'success' | 'info' | 'warning' | 'destructive';
+interface ChipBaseProps {
+    /** Default `md`. */
+    size?: ChipSize;
+    /** The colour it takes when on. `primary` by default. */
+    color?: ChipColor;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export interface ChipToggleProps extends ChipBaseProps, Omit<BaseToggle.Props, 'className' | 'color' | 'children' | 'style'> {
+    onRemove?: undefined;
+}
+export interface ChipRemovableProps extends ChipBaseProps, Omit<ComponentProps<'span'>, 'color' | 'children'> {
+    /**
+     * Makes the chip a value that can be taken out: it shows a × that calls
+     * this. A removable chip is not a toggle.
+     */
+    onRemove: () => void;
+    /** What the × is called to a screen reader. Default `Remove <text>`, when the text is a string. */
+    removeLabel?: string;
+    disabled?: boolean;
+}
+export type ChipProps = ChipToggleProps | ChipRemovableProps;
+/**
+ * A toggle pill. Takes `pressed`/`onPressedChange` or `defaultPressed` on its
+ * own, and `value` inside a `Chip.Group`. Given `onRemove`, a removable value instead.
+ */
+declare function ChipRoot(props: ChipProps): import("react").JSX.Element;
+declare namespace ChipRoot {
+    var displayName: string;
+}
+export interface ChipGroupProps extends Omit<BaseToggleGroup.Props<string>, 'className'> {
+    className?: string;
+}
+/**
+ * A row of toggle chips whose values are held as one array. Several can be on
+ * at once; pass `multiple={false}` for one at a time.
+ */
+declare function ChipGroup({ multiple, className, ...props }: ChipGroupProps): import("react").JSX.Element;
+declare namespace ChipGroup {
+    var displayName: string;
+}
+export declare const Chip: typeof ChipRoot & {
+    Group: typeof ChipGroup;
+};
+export { ChipGroup };

package/dist/components/chip/index.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chip — a small pill that can be pressed: a filter turned on and off, or a value taken back out.
+ *
+ * ```tsx
+ * <Chip.Group defaultValue={['open']} aria-label="Show">
+ *   <Chip value="open">Open</Chip>
+ *   <Chip value="merged">Merged</Chip>
+ *   <Chip value="closed">Closed</Chip>
+ * </Chip.Group>
+ *
+ * <Chip onRemove={() => drop('design')}>design</Chip>
+ * ```
+ *
+ * ## Two jobs, one shape
+ *
+ * A chip on its own, or in a `Chip.Group`, is a toggle: pressing it turns a
+ * filter on, and a tick slides in at its start while the pill fills, so a
+ * row of them reads as a row of switches rather than a row of tags. The
+ * group holds the values that are on as one array; pass `multiple={false}`
+ * for a row where only one can be on.
+ *
+ * Given `onRemove`, a chip is a value that has been added — a recipient, a
+ * tag — and carries a small × to take it back out. It is not a toggle then,
+ * and pressing Backspace or Delete while its × has focus removes it too.
+ *
+ * For a label that only says what something is, and is never pressed, use
+ * Badge.
+ */
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { tv } from 'tailwind-variants';
+const chipVariants = tv({
+    slots: {
+        root: [
+            'group/chip inline-flex shrink-0 items-center whitespace-nowrap rounded-full border font-medium outline-none select-none',
+            'border-border bg-background text-foreground shadow-xs dark:bg-input/30',
+            'transition-[background-color,border-color,color,padding] duration-200',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+            '[&_svg:not([class*=size-])]:size-3.5 [&_svg]:shrink-0',
+        ],
+        // A toggle: tinted in its colour when on.
+        toggle: [
+            'cursor-pointer hover:bg-muted/60',
+            'data-pressed:border-[color-mix(in_oklab,var(--chip-color)_40%,var(--background))]',
+            'data-pressed:bg-[color-mix(in_oklab,var(--chip-color)_12%,var(--background))] dark:data-pressed:bg-[color-mix(in_oklab,var(--chip-color)_20%,var(--background))]',
+            'data-pressed:text-[color-mix(in_oklab,var(--chip-color),var(--foreground)_35%)]',
+        ],
+        // The tick's box opens from nothing, so the label slides over to make room for it.
+        check: [
+            'grid w-0 overflow-hidden opacity-0 transition-[width,opacity,margin] duration-200 ease-out',
+            'group-data-pressed/chip:w-3.5 group-data-pressed/chip:opacity-100 group-data-pressed/chip:me-1',
+            'motion-reduce:transition-none',
+        ],
+        remove: [
+            'relative -me-1 ms-1 inline-flex size-4 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none',
+            'hover:bg-foreground/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring',
+            // A bigger target than the mark.
+            "after:absolute after:-inset-1.5 after:content-['']",
+        ],
+        group: 'flex flex-wrap gap-2',
+    },
+    variants: {
+        size: {
+            sm: { root: 'h-6 px-2 text-xs' },
+            md: { root: 'h-7 px-2.5 text-[0.8125rem]' },
+            lg: { root: 'h-8 px-3 text-sm' },
+        },
+        color: {
+            primary: { root: '[--chip-color:var(--primary)]' },
+            success: { root: '[--chip-color:var(--success)]' },
+            info: { root: '[--chip-color:var(--info)]' },
+            warning: { root: '[--chip-color:var(--warning)]' },
+            destructive: { root: '[--chip-color:var(--destructive)]' },
+        },
+    },
+    defaultVariants: { size: 'md', color: 'primary' },
+});
+/**
+ * A toggle pill. Takes `pressed`/`onPressedChange` or `defaultPressed` on its
+ * own, and `value` inside a `Chip.Group`. Given `onRemove`, a removable value instead.
+ */
+function ChipRoot(props) {
+    if (props.onRemove) {
+        const { size = 'md', color, className, children, onRemove, removeLabel, disabled, ...rest } = props;
+        const slots = chipVariants({ size, color });
+        const label = removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove');
+        const onKeyDown = (event) => {
+            if (event.key === 'Backspace' || event.key === 'Delete') {
+                event.preventDefault();
+                onRemove();
+            }
+        };
+        return (_jsxs("span", { "data-slot": "chip", "data-removable": "", "data-disabled": disabled ? '' : undefined, className: slots.root({ className }), ...rest, children: [children, _jsx("button", { type: "button", "data-slot": "chip-remove", "aria-label": label, disabled: disabled, onClick: onRemove, onKeyDown: onKeyDown, className: slots.remove(), children: _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", fill: "none", className: "size-3", children: _jsx("path", { d: "M4.5 4.5l7 7m0-7l-7 7", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round" }) }) })] }));
+    }
+    const { size = 'md', color, className, children, onRemove: _onRemove, ...rest } = props;
+    const slots = chipVariants({ size, color });
+    return (_jsxs(BaseToggle, { "data-slot": "chip", "data-size": size, className: slots.root({ className: [slots.toggle(), className] }), ...rest, children: [_jsx("span", { "data-slot": "chip-check", "aria-hidden": "true", className: slots.check(), children: _jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3.5", children: _jsx("path", { d: "M3.5 8.5 6.6 11.5 12.5 4.75", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }), children] }));
+}
+ChipRoot.displayName = 'Chip';
+/**
+ * A row of toggle chips whose values are held as one array. Several can be on
+ * at once; pass `multiple={false}` for one at a time.
+ */
+function ChipGroup({ multiple = true, className, ...props }) {
+    return (_jsx(BaseToggleGroup, { "data-slot": "chip-group", multiple: multiple, className: chipVariants().group({ className }), ...props }));
+}
+ChipGroup.displayName = 'Chip.Group';
+export const Chip = Object.assign(ChipRoot, { Group: ChipGroup });
+export { ChipGroup };

package/dist/components/choice-cards/index.d.ts

@@ -28,6 +28,12 @@
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
 import { type ComponentProps, type CSSProperties, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export type ChoiceCardsColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
 declare const choiceCardsVariants: import("tailwind-variants").TVReturnType<{
     color: {
@@ -81,7 +87,7 @@ declare const choiceCardsVariants: import("tailwind-variants").TVReturnType<{
     text: string;
     label: string;
     description: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     color: {
         primary: {
             root: string;
@@ -107,7 +113,7 @@ declare const choiceCardsVariants: import("tailwind-variants").TVReturnType<{
     text: string;
     label: string;
     description: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface ChoiceCardsProps extends Omit<RadioGroup.Props<string>, 'className' | 'style' | 'children'> {
     /** How many cards stand in a row. Default: one per item, up to four. */
     columns?: number;
@@ -140,21 +146,21 @@ declare namespace ChoiceCardsItem {
 export interface ChoiceCardsMediaProps extends ComponentProps<'span'> {
 }
 /** The picture of the option: a drawing, an icon or an image, centred in a rounded frame. */
-declare function ChoiceCardsMedia({ className, ...props }: ChoiceCardsMediaProps): import("react").JSX.Element;
+declare function ChoiceCardsMedia({ className, render, ...props }: ChoiceCardsMediaProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace ChoiceCardsMedia {
     var displayName: string;
 }
 export interface ChoiceCardsLabelProps extends ComponentProps<'span'> {
 }
 /** The option's name, under its picture. It is what a screen reader calls the card. */
-declare function ChoiceCardsLabel({ className, ...props }: ChoiceCardsLabelProps): import("react").JSX.Element;
+declare function ChoiceCardsLabel({ className, render, ...props }: ChoiceCardsLabelProps & RenderProp<'span'>): import("react").JSX.Element;
 declare namespace ChoiceCardsLabel {
     var displayName: string;
 }
 export interface ChoiceCardsDescriptionProps extends ComponentProps<'span'> {
 }
 /** A line under the label: what the option costs or does. */
-declare function ChoiceCardsDescription({ className, ...props }: ChoiceCardsDescriptionProps): import("react").JSX.Element;
+declare function ChoiceCardsDescription({ className, render, ...props }: ChoiceCardsDescriptionProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace ChoiceCardsDescription {
     var displayName: string;
 }

package/dist/components/choice-cards/index.js

@@ -31,6 +31,8 @@ import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
 import { createContext, useContext, useId } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const SPRING = 'ease-[cubic-bezier(0.3,1.35,0.45,1)]';
 const choiceCardsVariants = tv({
     slots: {
@@ -97,9 +99,13 @@ function ChoiceCardsItem({ className, children, ...props }) {
 }
 ChoiceCardsItem.displayName = 'ChoiceCards.Item';
 /** The picture of the option: a drawing, an icon or an image, centred in a rounded frame. */
-function ChoiceCardsMedia({ className, ...props }) {
+function ChoiceCardsMedia({ className, render, ...props }) {
     const slots = choiceCardsVariants();
-    return _jsx("span", { "aria-hidden": true, "data-slot": "choice-cards-media", className: slots.media({ className }), ...props });
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'aria-hidden': true, 'data-slot': 'choice-cards-media', className: slots.media({ className }) }, props),
+    });
 }
 ChoiceCardsMedia.displayName = 'ChoiceCards.Media';
 /** Gathers the label and description under the picture, with the card's padding. */
@@ -110,17 +116,30 @@ function useItem(part) {
     return item;
 }
 /** The option's name, under its picture. It is what a screen reader calls the card. */
-function ChoiceCardsLabel({ className, ...props }) {
+function ChoiceCardsLabel({ className, render, ...props }) {
     const { labelId } = useItem('ChoiceCards.Label');
     const slots = choiceCardsVariants();
-    return (_jsx("span", { "data-slot": "choice-cards-text", className: slots.text(), children: _jsx("span", { id: labelId, "data-slot": "choice-cards-label", className: slots.label({ className }), ...props }) }));
+    const element = useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ id: labelId, 'data-slot': 'choice-cards-label', className: slots.label({ className }) }, props),
+    });
+    return (_jsx("span", { "data-slot": "choice-cards-text", className: slots.text(), children: element }));
 }
 ChoiceCardsLabel.displayName = 'ChoiceCards.Label';
 /** A line under the label: what the option costs or does. */
-function ChoiceCardsDescription({ className, ...props }) {
+function ChoiceCardsDescription({ className, render, ...props }) {
     const { descriptionId } = useItem('ChoiceCards.Description');
     const slots = choiceCardsVariants();
-    return (_jsx("span", { id: descriptionId, "data-slot": "choice-cards-description", className: slots.description({ className: ['-mt-1.5 px-1.5 pb-1', className] }), ...props }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            id: descriptionId,
+            'data-slot': 'choice-cards-description',
+            className: slots.description({ className: ['-mt-1.5 px-1.5 pb-1', className] }),
+        }, props),
+    });
 }
 ChoiceCardsDescription.displayName = 'ChoiceCards.Description';
 export const ChoiceCards = Object.assign(ChoiceCardsRoot, {