panelui-web 0.9.0 → 0.10.0

package/dist/components/button-group/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * ButtonGroup — related actions joined into one control.
+ * ButtonGroup — related actions held together in one control.
  *
  * ```tsx
  * <ButtonGroup aria-label="History">
@@ -8,21 +8,30 @@
  * </ButtonGroup>
  * ```
  *
- * ## Joining
+ * ## A track, like the segmented Tabs
  *
- * The group does not draw anything of its own. It squares the corners where
- * two children meet and drops the border one of them would otherwise double,
- * so outline buttons read as one strip with dividers. It does that with child
- * selectors rather than props, so any `Button`, `Input`, `Menu.Trigger` or
- * `Select.Trigger` placed directly inside joins without being told to.
+ * The group is drawn the way the segmented `Tabs` are: a muted track with
+ * rounded corners, and the buttons inside it at the radius one step smaller,
+ * so every corner follows the track's. Outline and ghost buttons lie flat in
+ * the track with muted labels; the one under the pointer rises out of it the
+ * way the chosen tab does, and the short dividers on either side of it fade.
+ * A field or a filled button keeps its own surface, so it reads as raised
+ * from the start.
  *
- * Filled buttons have no border to share, so put a `ButtonGroup.Separator`
- * between them; without one, two primary buttons become one long button.
+ * It does this with child selectors rather than props, so any `Button`,
+ * `Input`, `Menu.Trigger` or `ButtonGroup.Text` placed directly inside takes
+ * part without being told to.
+ *
+ * ## Split buttons
+ *
+ * A group with a `ButtonGroup.Separator` in it is a split button instead: no
+ * track, and its filled halves joined edge to edge, with the separator
+ * carrying their fill across the seam.
  *
  * ## Groups of groups
  *
- * A group whose children are groups spaces them apart instead of joining
- * them, which is how a toolbar is built: one group per kind of action.
+ * A group whose children are groups spaces them apart, which is how a
+ * toolbar is built: one track per kind of action.
  */
 import type { ComponentProps } from 'react';
 import { type VariantProps } from 'tailwind-variants';
@@ -51,7 +60,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
     };
 }, {
     root: string[];
-    separator: string;
+    separator: string[];
     text: string[];
 }, undefined, {
     orientation: {
@@ -78,7 +87,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
     };
 }, {
     root: string[];
-    separator: string;
+    separator: string[];
     text: string[];
 }, import("tailwind-variants").TVReturnType<{
     orientation: {
@@ -105,7 +114,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
     };
 }, {
     root: string[];
-    separator: string;
+    separator: string[];
     text: string[];
 }, undefined, unknown, unknown, undefined>>;
 export type ButtonGroupOrientation = NonNullable<VariantProps<typeof buttonGroupVariants>['orientation']>;
@@ -130,8 +139,11 @@ export interface ButtonGroupSeparatorProps extends ComponentProps<'span'> {
     orientation?: 'vertical' | 'horizontal';
 }
 /**
- * A line between two children that have no border to share, such as filled
- * buttons. It is decorative and hidden from assistive technology.
+ * The divider of a split button. A group with one in it drops its track and
+ * joins its children edge to edge. Before a primary, secondary or destructive
+ * button the separator takes that button's fill, so the two halves read as
+ * one, and draws a short line in the button's text colour. It is decorative
+ * and hidden from assistive technology.
  */
 declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
 declare namespace ButtonGroupSeparator {

package/dist/components/button-group/index.js

@@ -1,19 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from 'tailwind-variants';
+/*
+ * Which of the three a group is depends on what it holds, so the rules below
+ * are scoped by selector rather than by prop:
+ *
+ *   track  &:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))
+ *   split  &:has(>[data-slot=button-group-separator])
+ *
+ * Tailwind reads class names whole, so each selector is written out in full
+ * in every class that uses it.
+ */
 export const buttonGroupVariants = tv({
     slots: {
         root: [
             'flex w-fit items-stretch',
             // A focused child draws its ring over its neighbours, not under them.
             '*:focus-visible:relative *:focus-visible:z-10',
-            // Groups inside a group are spaced, not joined.
-            'has-[>[data-slot=button-group]]:gap-2',
             // A field takes the room the buttons leave.
             '[&>[data-slot=input]]:min-w-0 [&>[data-slot=input]]:flex-1',
+            // The track, in the segmented Tabs' colour and radius. Its children
+            // take the radius one step down, which is the track's less its padding.
+            '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))]:gap-1 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))]:rounded-xl [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))]:bg-muted [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))]:p-1',
+            '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*]:relative [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*]:rounded-lg',
+            // Outline and ghost buttons lie flat, with muted labels, and rise out
+            // of the track under the pointer like the chosen tab.
+            '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost])]:border-transparent [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost])]:bg-transparent [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost])]:text-muted-foreground [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost])]:shadow-none',
+            '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost]):hover:not(:disabled)]:bg-background [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost]):hover:not(:disabled)]:text-foreground [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost]):hover:not(:disabled)]:shadow-sm',
+            '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost]):hover:not(:disabled)]:inset-ring [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost]):hover:not(:disabled)]:inset-ring-foreground/[0.06]',
+            'dark:[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost]):hover:not(:disabled)]:bg-input dark:[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>:is([data-variant=outline],[data-variant=ghost]):hover:not(:disabled)]:inset-ring-foreground/10',
+            // Short dividers in the gaps, drawn by the second child of each pair so
+            // the first never gets one. None beside a field, which has its own
+            // edge, and none beside the child under the pointer.
+            "[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:pointer-events-none [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:absolute [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:bg-foreground/10 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:transition-opacity [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:duration-150 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:content-['']",
+            '[&>[data-slot=input]+*]:before:hidden [&>*+[data-slot=input]]:before:hidden',
+            '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*:hover:not(:disabled)]:before:opacity-0 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*:hover:not(:disabled)+*]:before:opacity-0',
+            // Groups inside a group are spaced, one track each.
+            'has-[>[data-slot=button-group]]:gap-2',
+        ],
+        separator: [
+            'relative shrink-0 self-stretch bg-border',
+            // Between filled buttons the separator carries their fill across the
+            // seam, and a short line in their text colour divides it.
+            "before:absolute before:content-['']",
+            'has-[+[data-variant=default]]:bg-primary has-[+[data-variant=default]]:before:bg-primary-foreground/25',
+            'has-[+[data-variant=secondary]]:bg-secondary has-[+[data-variant=secondary]]:before:bg-secondary-foreground/15',
+            'has-[+[data-variant=destructive]]:bg-destructive has-[+[data-variant=destructive]]:before:bg-white/30',
         ],
-        separator: 'shrink-0 self-stretch bg-border',
         text: [
-            'flex shrink-0 items-center gap-2 whitespace-nowrap border bg-muted font-medium text-muted-foreground shadow-xs dark:bg-input/30',
+            'relative flex shrink-0 items-center gap-2 whitespace-nowrap font-medium text-muted-foreground',
             '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
         ],
     },
@@ -21,25 +55,26 @@ export const buttonGroupVariants = tv({
         orientation: {
             horizontal: {
                 root: [
-                    '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none',
-                    '[&>*:not(:first-child)]:border-l-0',
+                    '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:inset-y-2 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:-left-0.5 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:w-px',
+                    // A split button's halves meet edge to edge.
+                    '[&:has(>[data-slot=button-group-separator])>*:not(:first-child)]:rounded-l-none [&:has(>[data-slot=button-group-separator])>*:not(:last-child)]:rounded-r-none',
                 ],
-                separator: 'w-px',
+                separator: 'w-px before:inset-y-2 before:inset-x-0',
             },
             vertical: {
                 root: [
                     'flex-col',
-                    '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none',
-                    '[&>*:not(:first-child)]:border-t-0',
+                    '[&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:inset-x-2 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:-top-0.5 [&:not(:has(>[data-slot=button-group-separator],>[data-slot=button-group]))>*+*]:before:h-px',
+                    '[&:has(>[data-slot=button-group-separator])>*:not(:first-child)]:rounded-t-none [&:has(>[data-slot=button-group-separator])>*:not(:last-child)]:rounded-b-none',
                 ],
-                separator: 'h-px',
+                separator: 'h-px before:inset-x-2 before:inset-y-0',
             },
         },
         /** Matches the heights of `Button` and `Input` at the same size. */
         size: {
-            sm: { text: 'h-8 rounded-md px-2.5 text-[0.8125rem]' },
-            md: { text: 'h-9 rounded-lg px-3 text-sm' },
-            lg: { text: 'h-11 rounded-xl px-3.5 text-[0.9375rem]' },
+            sm: { text: 'h-8 px-2.5 text-[0.8125rem]' },
+            md: { text: 'h-9 px-3 text-sm' },
+            lg: { text: 'h-11 px-3.5 text-[0.9375rem]' },
         },
     },
     defaultVariants: { orientation: 'horizontal', size: 'md' },
@@ -53,8 +88,11 @@ function ButtonGroupRoot({ orientation = 'horizontal', className, ...props }) {
 }
 ButtonGroupRoot.displayName = 'ButtonGroup';
 /**
- * A line between two children that have no border to share, such as filled
- * buttons. It is decorative and hidden from assistive technology.
+ * The divider of a split button. A group with one in it drops its track and
+ * joins its children edge to edge. Before a primary, secondary or destructive
+ * button the separator takes that button's fill, so the two halves read as
+ * one, and draws a short line in the button's text colour. It is decorative
+ * and hidden from assistive technology.
  */
 function ButtonGroupSeparator({ orientation = 'vertical', className, ...props }) {
     const slots = buttonGroupVariants({

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

@@ -0,0 +1,167 @@
+/**
+ * ChoiceCards — one option chosen from a few, each shown as a picture of
+ * what it does.
+ *
+ * ```tsx
+ * <ChoiceCards defaultValue="rounded" aria-label="Pointer">
+ *   <ChoiceCards.Item value="classic">
+ *     <ChoiceCards.Media><ClassicPointer /></ChoiceCards.Media>
+ *     <ChoiceCards.Label>Classic</ChoiceCards.Label>
+ *   </ChoiceCards.Item>
+ *   …
+ * </ChoiceCards>
+ * ```
+ *
+ * ## Show the option, not its name
+ *
+ * A pointer style, an aspect ratio, a background: options that are seen
+ * before they are understood. Each card leads with a picture of the option,
+ * so the choice is made by looking, and the name under it confirms it.
+ *
+ * ## The chosen one comes forward
+ *
+ * The chosen card is ringed in the theme colour, a check settles into its
+ * corner, and its picture grows a little, as if lifted towards the reader.
+ * The others stay flat, so a row of cards still reads as one choice and one
+ * set of alternatives.
+ */
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import { type ComponentProps, type CSSProperties, type ReactNode } from 'react';
+export type ChoiceCardsColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+declare const choiceCardsVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string[];
+    media: string[];
+    check: string[];
+    text: string;
+    label: string;
+    description: string;
+}, undefined, {
+    color: {
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string[];
+    media: string[];
+    check: string[];
+    text: string;
+    label: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    item: string[];
+    media: string[];
+    check: string[];
+    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;
+    /** The shape of every card's picture, as a CSS aspect ratio. Default `4 / 3`. */
+    aspect?: string;
+    /** The colour of the ring and the check on the chosen card. Default `primary`. */
+    color?: ChoiceCardsColor;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The cards, of which one is chosen. `value` and `onValueChange`, or
+ * `defaultValue`, hold which; `name` submits it with a form.
+ */
+declare function ChoiceCardsRoot({ columns, aspect, color, className, style, children, ...props }: ChoiceCardsProps): import("react").JSX.Element;
+declare namespace ChoiceCardsRoot {
+    var displayName: string;
+}
+export interface ChoiceCardsItemProps extends Omit<Radio.Root.Props, 'className' | 'value'> {
+    /** What choosing this card sets the group's value to. */
+    value: string;
+    className?: string;
+}
+/** One option: a `ChoiceCards.Media` picture, a `Label`, and maybe a `Description`. */
+declare function ChoiceCardsItem({ className, children, ...props }: ChoiceCardsItemProps): import("react").JSX.Element;
+declare namespace ChoiceCardsItem {
+    var displayName: string;
+}
+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 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 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 namespace ChoiceCardsDescription {
+    var displayName: string;
+}
+export declare const ChoiceCards: typeof ChoiceCardsRoot & {
+    Item: typeof ChoiceCardsItem;
+    Media: typeof ChoiceCardsMedia;
+    Label: typeof ChoiceCardsLabel;
+    Description: typeof ChoiceCardsDescription;
+};
+export { ChoiceCardsItem, ChoiceCardsMedia, ChoiceCardsLabel, ChoiceCardsDescription, choiceCardsVariants };

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

@@ -0,0 +1,132 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChoiceCards — one option chosen from a few, each shown as a picture of
+ * what it does.
+ *
+ * ```tsx
+ * <ChoiceCards defaultValue="rounded" aria-label="Pointer">
+ *   <ChoiceCards.Item value="classic">
+ *     <ChoiceCards.Media><ClassicPointer /></ChoiceCards.Media>
+ *     <ChoiceCards.Label>Classic</ChoiceCards.Label>
+ *   </ChoiceCards.Item>
+ *   …
+ * </ChoiceCards>
+ * ```
+ *
+ * ## Show the option, not its name
+ *
+ * A pointer style, an aspect ratio, a background: options that are seen
+ * before they are understood. Each card leads with a picture of the option,
+ * so the choice is made by looking, and the name under it confirms it.
+ *
+ * ## The chosen one comes forward
+ *
+ * The chosen card is ringed in the theme colour, a check settles into its
+ * corner, and its picture grows a little, as if lifted towards the reader.
+ * The others stay flat, so a row of cards still reads as one choice and one
+ * set of alternatives.
+ */
+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';
+const SPRING = 'ease-[cubic-bezier(0.3,1.35,0.45,1)]';
+const choiceCardsVariants = tv({
+    slots: {
+        root: 'grid w-full grid-cols-(--choice-columns) gap-2 data-disabled:opacity-50',
+        item: [
+            'group/choice relative flex min-w-0 cursor-pointer flex-col gap-1.5 rounded-[18px] p-1.5 text-start outline-none select-none',
+            'bg-muted/60 transition-[background-color,box-shadow] duration-200 hover:bg-muted',
+            // The ring stands clear of the card, so it never sits on the picture. It
+            // is an outline, whose gap is see-through on whatever surface holds it.
+            'outline-offset-2 data-checked:bg-muted data-checked:outline-2 data-checked:outline-solid data-checked:outline-(--choice)',
+            'focus-visible:ring-2 focus-visible:ring-ring',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        ],
+        media: [
+            'relative flex aspect-(--choice-aspect) w-full items-center justify-center overflow-hidden rounded-xl',
+            // A frame a step lighter than the card in either theme, with a hairline edge.
+            'bg-background/80 ring-1 ring-inset ring-foreground/[0.05] dark:bg-foreground/[0.06]',
+            'text-foreground/80 [&>*]:transition-transform [&>*]:duration-[420ms] [&>*]:ease-[cubic-bezier(0.3,1.35,0.45,1)]',
+            'group-data-checked/choice:text-foreground group-data-checked/choice:[&>*]:scale-[1.06] motion-reduce:[&>*]:transition-none',
+            '[&>img]:size-full [&>img]:object-cover',
+        ],
+        check: [
+            'pointer-events-none absolute end-1.5 top-1.5 z-10 flex size-5 items-center justify-center rounded-full bg-(--choice) text-(--choice-foreground)',
+            `scale-0 opacity-0 shadow-sm transition-[scale,opacity] duration-300 ${SPRING}`,
+            'group-data-checked/choice:scale-100 group-data-checked/choice:opacity-100 motion-reduce:transition-none',
+        ],
+        text: 'flex flex-col gap-0.5 px-1.5 pb-1',
+        label: 'truncate text-[13px] font-medium text-foreground/80 group-data-checked/choice:text-foreground',
+        description: 'text-xs leading-4 text-muted-foreground',
+    },
+    variants: {
+        color: {
+            primary: { root: '[--choice:var(--primary)] [--choice-foreground:var(--primary-foreground)]' },
+            info: { root: '[--choice:var(--info)] [--choice-foreground:white]' },
+            success: { root: '[--choice:var(--success)] [--choice-foreground:white]' },
+            warning: { root: '[--choice:var(--warning)] [--choice-foreground:black]' },
+            destructive: { root: '[--choice:var(--destructive)] [--choice-foreground:white]' },
+        },
+    },
+    defaultVariants: { color: 'primary' },
+});
+const ItemContext = createContext(null);
+/**
+ * The cards, of which one is chosen. `value` and `onValueChange`, or
+ * `defaultValue`, hold which; `name` submits it with a form.
+ */
+function ChoiceCardsRoot({ columns, aspect = '4 / 3', color, className, style, children, ...props }) {
+    const slots = choiceCardsVariants({ color });
+    const count = Array.isArray(children) ? children.filter(Boolean).length : 1;
+    const across = columns ?? Math.min(Math.max(count, 1), 4);
+    return (_jsx(RadioGroup, { "data-slot": "choice-cards", className: slots.root({ className }), style: {
+            ...style,
+            '--choice-columns': `repeat(${across}, minmax(0, 1fr))`,
+            '--choice-aspect': aspect,
+        }, ...props, children: children }));
+}
+ChoiceCardsRoot.displayName = 'ChoiceCards';
+/** One option: a `ChoiceCards.Media` picture, a `Label`, and maybe a `Description`. */
+function ChoiceCardsItem({ className, children, ...props }) {
+    const slots = choiceCardsVariants();
+    const id = useId();
+    const ids = { labelId: `${id}-label`, descriptionId: `${id}-description` };
+    return (_jsx(ItemContext.Provider, { value: ids, children: _jsxs(Radio.Root, { "data-slot": "choice-cards-item", "aria-labelledby": ids.labelId, "aria-describedby": ids.descriptionId, className: slots.item({ className }), ...props, children: [_jsx("span", { "aria-hidden": true, "data-slot": "choice-cards-check", className: slots.check(), children: _jsx("svg", { viewBox: "0 0 12 12", className: "size-3", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M2.75 6.25 5 8.5l4.25-5" }) }) }), children] }) }));
+}
+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 }) {
+    const slots = choiceCardsVariants();
+    return _jsx("span", { "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. */
+function useItem(part) {
+    const item = useContext(ItemContext);
+    if (!item)
+        throw new Error(`${part} must be used inside a <ChoiceCards.Item>.`);
+    return item;
+}
+/** The option's name, under its picture. It is what a screen reader calls the card. */
+function ChoiceCardsLabel({ className, ...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 }) }));
+}
+ChoiceCardsLabel.displayName = 'ChoiceCards.Label';
+/** A line under the label: what the option costs or does. */
+function ChoiceCardsDescription({ className, ...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 }));
+}
+ChoiceCardsDescription.displayName = 'ChoiceCards.Description';
+export const ChoiceCards = Object.assign(ChoiceCardsRoot, {
+    Item: ChoiceCardsItem,
+    Media: ChoiceCardsMedia,
+    Label: ChoiceCardsLabel,
+    Description: ChoiceCardsDescription,
+});
+export { ChoiceCardsItem, ChoiceCardsMedia, ChoiceCardsLabel, ChoiceCardsDescription, choiceCardsVariants };