panelui-web 0.9.1 → 0.10.0

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 };

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

@@ -0,0 +1,242 @@
+import { Tabs } from '@base-ui/react/tabs';
+import { type ComponentProps, type ReactNode } from 'react';
+declare const inspectorVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            section?: import("tailwind-merge").ClassNameValue;
+            marker?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            scrollbar?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            tab?: import("tailwind-merge").ClassNameValue;
+            tooltip?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            viewport?: import("tailwind-merge").ClassNameValue;
+            panel?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            sectionTitle?: import("tailwind-merge").ClassNameValue;
+            railSeparator?: import("tailwind-merge").ClassNameValue;
+            sectionAction?: import("tailwind-merge").ClassNameValue;
+            rail?: import("tailwind-merge").ClassNameValue;
+            sectionContent?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            section?: import("tailwind-merge").ClassNameValue;
+            marker?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            scrollbar?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            tab?: import("tailwind-merge").ClassNameValue;
+            tooltip?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            viewport?: import("tailwind-merge").ClassNameValue;
+            panel?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            sectionTitle?: import("tailwind-merge").ClassNameValue;
+            railSeparator?: import("tailwind-merge").ClassNameValue;
+            sectionAction?: import("tailwind-merge").ClassNameValue;
+            rail?: import("tailwind-merge").ClassNameValue;
+            sectionContent?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    rail: string[];
+    marker: string[];
+    tab: string[];
+    railSeparator: string;
+    tooltip: string[];
+    panel: string[];
+    page: string[];
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    section: string;
+    sectionTitle: string[];
+    chevron: string[];
+    sectionAction: string;
+    sectionContent: string[];
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            section?: import("tailwind-merge").ClassNameValue;
+            marker?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            scrollbar?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            tab?: import("tailwind-merge").ClassNameValue;
+            tooltip?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            viewport?: import("tailwind-merge").ClassNameValue;
+            panel?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            sectionTitle?: import("tailwind-merge").ClassNameValue;
+            railSeparator?: import("tailwind-merge").ClassNameValue;
+            sectionAction?: import("tailwind-merge").ClassNameValue;
+            rail?: import("tailwind-merge").ClassNameValue;
+            sectionContent?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    rail: string[];
+    marker: string[];
+    tab: string[];
+    railSeparator: string;
+    tooltip: string[];
+    panel: string[];
+    page: string[];
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    section: string;
+    sectionTitle: string[];
+    chevron: string[];
+    sectionAction: string;
+    sectionContent: string[];
+    separator: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    rail: string[];
+    marker: string[];
+    tab: string[];
+    railSeparator: string;
+    tooltip: string[];
+    panel: string[];
+    page: string[];
+    viewport: string;
+    content: string;
+    scrollbar: string;
+    thumb: string;
+    section: string;
+    sectionTitle: string[];
+    chevron: string[];
+    sectionAction: string;
+    sectionContent: string[];
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface InspectorProps extends Omit<Tabs.Root.Props, 'className' | 'orientation'> {
+    className?: string;
+}
+/**
+ * The rail and the panel side by side. `defaultValue`, or `value` with
+ * `onValueChange`, names the page that is open.
+ */
+declare function InspectorRoot({ className, ...props }: InspectorProps): import("react").JSX.Element;
+declare namespace InspectorRoot {
+    var displayName: string;
+}
+export interface InspectorRailProps extends Omit<Tabs.List.Props, 'className'> {
+    className?: string;
+}
+/** The column of page icons, in a pill of its own beside the panel. */
+declare function InspectorRail({ className, children, ...props }: InspectorRailProps): import("react").JSX.Element;
+declare namespace InspectorRail {
+    var displayName: string;
+}
+export interface InspectorTabProps extends Omit<Tabs.Tab.Props, 'className' | 'children'> {
+    /** What the page is called: the tab's tooltip and its name for a screen reader. */
+    label: string;
+    /** The icon. */
+    children?: ReactNode;
+    className?: string;
+}
+/** One page's icon on the rail. */
+declare function InspectorTab({ label, className, children, ...props }: InspectorTabProps): import("react").JSX.Element;
+declare namespace InspectorTab {
+    var displayName: string;
+}
+export interface InspectorRailSeparatorProps extends ComponentProps<'span'> {
+}
+/** A short line between groups of pages on the rail. */
+declare function InspectorRailSeparator({ className, ...props }: InspectorRailSeparatorProps): import("react").JSX.Element;
+declare namespace InspectorRailSeparator {
+    var displayName: string;
+}
+export interface InspectorPanelProps extends ComponentProps<'div'> {
+}
+/**
+ * The card the pages open in. Give it a height, such as `h-[32rem]`, and a
+ * page longer than that scrolls inside it. Without pages, its children are
+ * one page of sections.
+ */
+declare function InspectorPanel({ className, children, ...props }: InspectorPanelProps): import("react").JSX.Element;
+declare namespace InspectorPanel {
+    var displayName: string;
+}
+export interface InspectorPageProps extends Omit<Tabs.Panel.Props, 'className'> {
+    className?: string;
+}
+/** What one tab opens: a column of sections that scrolls inside the panel. */
+declare function InspectorPage({ className, children, ...props }: InspectorPageProps): import("react").JSX.Element;
+declare namespace InspectorPage {
+    var displayName: string;
+}
+export interface InspectorSectionProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** Fold the section away by its title. Its content then shows only while it is open. */
+    collapsible?: boolean;
+    /** Whether a collapsible section starts open. Default true. */
+    defaultOpen?: boolean;
+    /** Whether a collapsible section is open, when the caller holds it. */
+    open?: boolean;
+    /** Called when a collapsible section opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/** A titled group of settings: a title, an action on its line, and the controls under them. */
+declare function InspectorSection({ collapsible, defaultOpen, open, onOpenChange, className, children, ...props }: InspectorSectionProps): import("react").JSX.Element;
+declare namespace InspectorSection {
+    var displayName: string;
+}
+export interface InspectorSectionTitleProps extends ComponentProps<'h3'> {
+}
+/** The section's name. In a collapsible section it is the button that folds it, with a chevron. */
+declare function InspectorSectionTitle({ className, children, ...props }: InspectorSectionTitleProps): import("react").JSX.Element;
+declare namespace InspectorSectionTitle {
+    var displayName: string;
+}
+export interface InspectorSectionActionProps extends ComponentProps<'div'> {
+}
+/** What sits at the end of the title's line: the switch for the whole section, or a Reset. */
+declare function InspectorSectionAction({ className, ...props }: InspectorSectionActionProps): import("react").JSX.Element;
+declare namespace InspectorSectionAction {
+    var displayName: string;
+}
+export interface InspectorSectionContentProps extends ComponentProps<'div'> {
+}
+/** The controls under the title, stacked with an even gap. */
+declare function InspectorSectionContent({ className, children, ...props }: InspectorSectionContentProps): import("react").JSX.Element;
+declare namespace InspectorSectionContent {
+    var displayName: string;
+}
+export interface InspectorSeparatorProps extends ComponentProps<'div'> {
+}
+/** A hairline between sections that belong to different things. */
+declare function InspectorSeparator({ className, ...props }: InspectorSeparatorProps): import("react").JSX.Element;
+declare namespace InspectorSeparator {
+    var displayName: string;
+}
+export declare const Inspector: typeof InspectorRoot & {
+    Rail: typeof InspectorRail;
+    Tab: typeof InspectorTab;
+    RailSeparator: typeof InspectorRailSeparator;
+    Panel: typeof InspectorPanel;
+    Page: typeof InspectorPage;
+    Section: typeof InspectorSection;
+    SectionTitle: typeof InspectorSectionTitle;
+    SectionAction: typeof InspectorSectionAction;
+    SectionContent: typeof InspectorSectionContent;
+    Separator: typeof InspectorSeparator;
+};
+export { InspectorRail, InspectorTab, InspectorRailSeparator, InspectorPanel, InspectorPage, InspectorSection, InspectorSectionTitle, InspectorSectionAction, InspectorSectionContent, InspectorSeparator, inspectorVariants, };