@central-ui/react 0.1.2 → 0.2.0

package/dist/components/tour/index.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { asChildStyleAttributes } from "../../utils/asChild.js";
+import { Joyride, ACTIONS, EVENTS, STATUS } from 'react-joyride';
+import { cloneElement, createContext, useContext, useLayoutEffect, useState, } from 'react';
+import { X } from "../../utils/icons.js";
+import { twMerge } from 'tailwind-merge';
+/**
+ * A guided tour that highlights elements one by one, each with a popup next to it.
+ * Root holds the steps (which element, in which order); Popup holds what every popup shows.
+ * Write the popup's frame and buttons once, and put what differs per step in a Content
+ * with the step's `value`, like Tabs.Content. Back/Next/Done/Skip/Close are styled buttons that show only when they can act.
+ *
+ * @example Complete composition, opened from a button
+ * import { Button, Tour } from '@central-ui/react'
+ *
+ * function Example() {
+ *   const [open, setOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button.default onClick={() => setOpen(true)}>Take the tour</Button.default>
+ *       <div id="search">…</div>
+ *       <div id="filters">…</div>
+ *
+ *       <Tour.Root
+ *         steps={[
+ *           { value: 'search', target: '#search' },
+ *           { value: 'filters', target: '#filters' },
+ *         ]}
+ *         open={open}
+ *         onOpenChange={setOpen}
+ *       >
+ *         <Tour.Popup>
+ *           <Tour.Content value="search">
+ *             <Tour.Title>Search</Tour.Title>
+ *             <Tour.Description>Find any order fast.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Content value="filters">
+ *             <Tour.Title>Filters</Tour.Title>
+ *             <Tour.Description>Narrow the results.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Progress />
+ *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.NextButton>Next</Tour.NextButton>
+ *           <Tour.DoneButton>Done</Tour.DoneButton>
+ *         </Tour.Popup>
+ *       </Tour.Root>
+ *     </>
+ *   )
+ * }
+ *
+ * @example Start on its own as soon as the page mounts, with no trigger button
+ * // Uncontrolled: defaultOpen starts the tour when Root mounts, and Root closes it itself.
+ * // Mount Root conditionally (e.g. only for users who haven't seen it) to show it once.
+ * ;<Tour.Root steps={steps} defaultOpen onOpenChange={(open) => { if (!open) markTourSeen() }}>
+ *   <Tour.Popup>…</Tour.Popup>
+ * </Tour.Root>
+ *
+ * @example Content only one step has, like a video
+ * // Anything inside a Content shows only on its step; anything outside shows on every step.
+ * ;<Tour.Content value="filters">
+ *   <Tour.Title>Filters</Tour.Title>
+ *   <video src="/filters.mp4" autoPlay muted />
+ * </Tour.Content>
+ *
+ * @example Let users click the highlighted element during a step
+ * ;<Tour.Root steps={[{ value: 'upload', target: '#upload', interactive: true }]}>
+ */
+export function Root(props) {
+    // The step the tour starts on, and rewinds to when it ends
+    const firstStep = props.defaultStep ?? props.steps[0].value;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);
+    const [uncontrolledStep, setUncontrolledStep] = useState(firstStep);
+    const [placement, setPlacement] = useState({
+        side: 'bottom',
+        align: 'center',
+    });
+    // Controlled props win over the internal state, like Base UI's open and value
+    const isOpen = props.open ?? uncontrolledOpen;
+    const currentStep = props.step ?? uncontrolledStep;
+    // Joyride counts steps by position, so the current value becomes its index
+    const stepIndex = props.steps.findIndex((step) => step.value === currentStep);
+    // Joyride places by one word, so Popup's side and align become e.g. 'left-start'
+    const joyridePlacement = placement.align === 'center'
+        ? placement.side
+        : `${placement.side}-${placement.align}`;
+    return (_jsx(RootContext.Provider, { value: { children: props.children, steps: props.steps, setPlacement }, children: _jsx(Joyride, { run: isOpen, stepIndex: stepIndex, steps: props.steps.map((step) => ({
+                target: step.target,
+                id: step.value,
+                // The popup's text lives in Content parts, not in data
+                content: null,
+                placement: joyridePlacement,
+                blockTargetInteraction: !step.interactive,
+            })), 
+            // Next moves straight to the following step, as in a classic guided tour
+            continuous: true, scrollToFirstStep: true, options: {
+                // Steps open directly, without a pulsing dot to click first
+                skipBeacon: true,
+                // A stray click on the dark overlay never ends the tour
+                overlayClickAction: false,
+                // Core layout, not overridable: the arrow matches Popover's and Tooltip's 20×10 size
+                arrowBase: 20,
+                arrowSize: 10,
+            }, tooltipComponent: PopupSlot, arrowComponent: Arrow, onEvent: (event) => {
+                // Ending the tour and rewinding it, so it restarts from the first step.
+                // Stopping `run` is what removes Joyride's overlay.
+                const end = () => {
+                    setUncontrolledOpen(false);
+                    props.onOpenChange?.(false);
+                    setUncontrolledStep(firstStep);
+                    props.onStepChange?.(firstStep);
+                };
+                // Ending by Skip, Close, or Escape
+                if (event.status === STATUS.SKIPPED || event.action === ACTIONS.CLOSE)
+                    return end();
+                // Moving to the next or previous step, or past a target missing from the page.
+                // In controlled mode Joyride waits for the new step, so moving past the last one (Done) must end the tour here.
+                if (event.type === EVENTS.STEP_AFTER ||
+                    event.type === EVENTS.TARGET_NOT_FOUND) {
+                    const nextStep = props.steps[event.index + (event.action === ACTIONS.PREV ? -1 : 1)];
+                    if (!nextStep)
+                        return end();
+                    setUncontrolledStep(nextStep.value);
+                    props.onStepChange?.(nextStep.value);
+                }
+            } }) }));
+}
+const RootContext = /* @__PURE__ */ createContext(null);
+/**
+ * Popover's arrow, drawn in Joyride's arrow slot. Its white base strip covers the popup's border where they meet,
+ * and it overlaps the popup by 2px, so the arrow reads as part of the popup with the border running around both.
+ */
+function Arrow(arrow) {
+    // The SVG points up, which fits a popup sitting below its target; other sides rotate it
+    const rotation = (() => {
+        if (arrow.placement.startsWith('top'))
+            return 180;
+        if (arrow.placement.startsWith('left'))
+            return 90;
+        if (arrow.placement.startsWith('right'))
+            return -90;
+        return 0;
+    })();
+    return (_jsxs("svg", { "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10", "data-component": "tour-arrow", "data-side": arrow.placement.split('-')[0], className: "pointer-events-none fill-white", 
+        // Core layout, not overridable: centered in Joyride's slot, rotated to its side, nudged 2px into the popup
+        style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: `translate(-50%, -50%) rotate(${rotation}deg) translateY(2px)`,
+        }, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "tour-arrow-1", className: "fill-inherit" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "tour-arrow-2", className: "fill-neutral-200" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "tour-arrow-3", className: "fill-inherit" })] }));
+}
+const StepContext = /* @__PURE__ */ createContext(null);
+/** Joyride renders this in its popup slot; it shows Root's children with the current step's state. */
+function PopupSlot(joyride) {
+    const root = useContext(RootContext);
+    if (!root)
+        throw new Error('Tour parts must be inside Tour.Root');
+    return (_jsx(StepContext.Provider, { value: { value: root.steps[joyride.index].value, joyride }, children: root.children }));
+}
+function useStep(part) {
+    const step = useContext(StepContext);
+    if (!step)
+        throw new Error(`Tour.${part} must be inside Tour.Popup`);
+    return step;
+}
+/**
+ * The box next to the highlighted element, shown on every step. Write the shared frame and buttons here once.
+ * `side` and `align` are where it prefers to sit; Joyride flips it when that side has no room, so it never leaves the screen.
+ */
+export function Popup({ disableStyle, className, side = 'bottom', align = 'center', ...props }) {
+    const step = useStep('Popup');
+    const root = useContext(RootContext);
+    // Handing the preferred placement to Root, which passes it to Joyride
+    useLayoutEffect(() => {
+        root?.setPlacement({ side, align });
+    }, [root?.setPlacement, side, align]);
+    return (_jsx("div", { ...props, ...step.joyride.tooltipProps, "data-component": "tour-popup", "data-step": step.value, "data-first": step.joyride.index === 0 ? '' : undefined, "data-last": step.joyride.isLastStep ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle &&
+            'relative flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 rounded-xl border border-neutral-200 bg-white p-4 text-neutral-950 shadow-lg', className) }));
+}
+/** Shows its children only while its step is showing, like Tabs.Content. Put anything specific to one step here. */
+export function Content({ disableStyle, className, value, ...props }) {
+    const step = useStep('Content');
+    if (step.value !== value)
+        return null;
+    return (_jsx("div", { ...props, "data-component": "tour-content", "data-step": value, "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'flex flex-col gap-1', className) }));
+}
+export function Title({ disableStyle, className, ...props }) {
+    return (_jsx("h2", { ...props, "data-component": "tour-title", "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'text-sm font-semibold leading-5 text-neutral-950', className) }));
+}
+export function Description({ disableStyle, className, ...props }) {
+    return (_jsx("p", { ...props, "data-component": "tour-description", "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'text-sm leading-5 text-neutral-600', className) }));
+}
+/** Shows the position in the tour, like "2 of 5". Pass a function as children to word it differently, e.g. for another language. */
+export function Progress({ disableStyle, className, children, ...props }) {
+    const step = useStep('Progress');
+    const progress = { step: step.joyride.index + 1, total: step.joyride.size };
+    return (_jsx("p", { ...props, "data-component": "tour-progress", "data-last": step.joyride.isLastStep ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: twMerge(!disableStyle && 'text-xs tabular-nums text-neutral-500', className), children: children ? children(progress) : `${progress.step} of ${progress.total}` }));
+}
+// Shared by every tour button: Polaris Button's base look at its medium size.
+const buttonBase = 'relative flex w-fit min-h-7 cursor-pointer items-center justify-center gap-1.5 rounded-full px-4 py-1 text-[0.8rem] leading-4 font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none';
+// Polaris Button's primary variant, neutral tone
+const primaryButton = 'bg-neutral-950 text-white shadow-md hover:bg-black hover:text-neutral-200 focus-visible:bg-black active:bg-black [background-image:radial-gradient(50%_50%_at_50%_0%,_#ffffff33_0%,_#ffffff00_100%),_radial-gradient(49.59%_37.11%_at_50.41%_101.56%,_#ffffff26_0%,_#ffffff00_66.46%)] inset-shadow-[0rem_0rem_.25rem_.0625rem_#101010,0rem_0rem_.25rem_.125rem_#ffffff1a,0rem_0rem_.75rem_-.375rem_#ffffffbf]';
+// Polaris Button's secondary variant, neutral tone
+const secondaryButton = 'bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300';
+// Polaris Button's tertiary variant, neutral tone
+const tertiaryButton = 'bg-transparent text-neutral-950 hover:bg-black/8 focus-visible:bg-black/8 active:bg-black/13';
+/** Spreads Joyride's behavior for one button, keeping the user's own onClick too. With asChild, the consumer's child receives that behavior instead of this part's styled button. */
+function TourButton({ asChild, joyrideProps, part, defaultClassName, disableStyle, className, onClick, children, ...props }) {
+    const behaviorProps = {
+        ...props,
+        ...joyrideProps,
+        onClick: (event) => {
+            onClick?.(event);
+            joyrideProps.onClick(event);
+        },
+    };
+    // Giving the behavior to the consumer's child, which keeps its own appearance and onClick
+    if (asChild) {
+        const child = children;
+        return cloneElement(child, {
+            ...behaviorProps,
+            className: twMerge(child.props.className, className),
+            onClick: (event) => {
+                child.props.onClick?.(event);
+                behaviorProps.onClick(event);
+            },
+        });
+    }
+    return (_jsx("button", { type: "button", ...behaviorProps, ...asChildStyleAttributes({ asChild, component: `tour-${part}`, disableStyle }), className: twMerge(!disableStyle && defaultClassName, className), children: children }));
+}
+/** Goes back one step, styled like a secondary Button. Not rendered on the first step, where there's nothing to go back to. Pass asChild to give this behavior to your own button instead. */
+export function BackButton(props) {
+    const step = useStep('BackButton');
+    if (step.joyride.index === 0)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.backProps, part: "backbutton", defaultClassName: `${buttonBase} ${secondaryButton}` }));
+}
+/** Goes to the next step, styled like a primary Button. Not rendered on the last step; DoneButton takes its place there. Pass asChild to give this behavior to your own button instead. */
+export function NextButton(props) {
+    const step = useStep('NextButton');
+    if (step.joyride.isLastStep)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.primaryProps, part: "nextbutton", defaultClassName: `${buttonBase} ${primaryButton}` }));
+}
+/** Finishes the tour, styled like a primary Button. Rendered only on the last step, in NextButton's place. Pass asChild to give this behavior to your own button instead. */
+export function DoneButton(props) {
+    const step = useStep('DoneButton');
+    if (!step.joyride.isLastStep)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.primaryProps, part: "donebutton", defaultClassName: `${buttonBase} ${primaryButton}` }));
+}
+/** Ends the tour early, styled like a tertiary Button. Not rendered on the last step, where Done already ends it. Pass asChild to give this behavior to your own button instead. */
+export function SkipButton(props) {
+    const step = useStep('SkipButton');
+    if (step.joyride.isLastStep)
+        return null;
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.skipProps, part: "skipbutton", defaultClassName: `${buttonBase} ${tertiaryButton}` }));
+}
+/**
+ * Ends the tour from any step: the round ✕ in the popup's top-right corner, like Dialog's.
+ * Icon-only: put just a CloseButtonIcon inside, never text like "Close". It is already named for screen readers by Joyride.
+ * Pass asChild to give this behavior to your own button instead.
+ */
+export function CloseButton(props) {
+    const step = useStep('CloseButton');
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.closeProps, part: "closebutton", defaultClassName: "absolute top-4 right-4 flex h-7 aspect-square w-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-neutral-200 bg-white p-0 text-neutral-950 shadow-sm hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-200 active:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500" }));
+}
+/** A default ✕ icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
+export function CloseButtonIcon({ disableStyle, children, className, ...props }) {
+    return cloneElement(children ?? _jsx(X, {}), {
+        ...props,
+        'aria-hidden': true,
+        ...{
+            'data-component': 'tour-closebuttonicon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+        },
+        className: twMerge(!disableStyle && 'h-4 w-fit shrink-0 text-inherit', children?.props.className, className),
+    });
+}

package/dist/index.d.ts

@@ -40,11 +40,14 @@ export * as Spinner from './components/spinner/index.tsx';
 export * as Table from './components/table/index.tsx';
 export * as Chip from './components/chip/index.tsx';
 export * as TextLink from './components/textlink/index.tsx';
-export type { ToneProps } from './types/Tone.ts';
+export * as Tour from './components/tour/index.tsx';
+export * as BarChart from './components/barchart/index.tsx';
+export * as HorizontalBarChart from './components/horizontalbarchart/index.tsx';
+export * as LineChart from './components/linechart/index.tsx';
+export * as DonutChart from './components/donutchart/index.tsx';
 export { useVirtualizedCombobox, FilteredItemsSync as ComboboxFilteredItemsSync, } from './utils/virtualization/useVirtualizedCombobox.ts';
 export type { UseVirtualizedComboboxOptions } from './utils/virtualization/useVirtualizedCombobox.ts';
 export { useVirtualizedAutocomplete, FilteredItemsSync as AutocompleteFilteredItemsSync, } from './utils/virtualization/useVirtualizedAutocomplete.ts';
 export type { UseVirtualizedAutocompleteOptions } from './utils/virtualization/useVirtualizedAutocomplete.ts';
 export { useVirtualizedTable } from './utils/virtualization/useVirtualizedTable.ts';
 export type { UseVirtualizedTableOptions } from './utils/virtualization/useVirtualizedTable.ts';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -40,7 +40,11 @@ export * as Spinner from "./components/spinner/index.js";
 export * as Table from "./components/table/index.js";
 export * as Chip from "./components/chip/index.js";
 export * as TextLink from "./components/textlink/index.js";
+export * as Tour from "./components/tour/index.js";
+export * as BarChart from "./components/barchart/index.js";
+export * as HorizontalBarChart from "./components/horizontalbarchart/index.js";
+export * as LineChart from "./components/linechart/index.js";
+export * as DonutChart from "./components/donutchart/index.js";
 export { useVirtualizedCombobox, FilteredItemsSync as ComboboxFilteredItemsSync, } from "./utils/virtualization/useVirtualizedCombobox.js";
 export { useVirtualizedAutocomplete, FilteredItemsSync as AutocompleteFilteredItemsSync, } from "./utils/virtualization/useVirtualizedAutocomplete.js";
 export { useVirtualizedTable } from "./utils/virtualization/useVirtualizedTable.js";
-//# sourceMappingURL=index.js.map

package/dist/types/Icon.d.ts

@@ -8,4 +8,3 @@ export interface SVGIconProps extends SVGProps<SVGSVGElement> {
     /** Keep the stroke thickness steady when changing the icon size. */
     nonScalingStroke?: boolean;
 }
-//# sourceMappingURL=Icon.d.ts.map

package/dist/types/Icon.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=Icon.js.map

package/dist/types/Style.d.ts

@@ -11,4 +11,3 @@ export type StyleProps = {
      */
     disableStyle?: boolean;
 };
-//# sourceMappingURL=Style.d.ts.map

package/dist/types/Style.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=Style.js.map

package/dist/types/Tone.d.ts

@@ -1,4 +1,3 @@
 export type ToneProps = {
     tone?: 'neutral' | 'valid' | 'invalid';
 };
-//# sourceMappingURL=Tone.d.ts.map

package/dist/types/Tone.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=Tone.js.map

package/dist/types/Validation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Email is required']` also shows that message in Error. Same for `'success'` and Success.
+ * Error and success never coexist, since a field holds one validation state at a time.
+ */
+export type Validation = 'error' | 'success' | readonly ['error' | 'success', string];
+export type ValidationProps = {
+    /**
+     * The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Email is required']` also shows that message in Error. Same for `'success'` and Success.
+     * Omit it for a neutral field.
+     */
+    validation?: Validation;
+};

package/dist/types/Validation.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/ArkStateToDataAttributes.d.ts

@@ -1,4 +1,3 @@
 export declare function arkStateToDataAttributes(state: object): {
     [k: string]: any;
 };
-//# sourceMappingURL=ArkStateToDataAttributes.d.ts.map

package/dist/utils/ArkStateToDataAttributes.js

@@ -8,4 +8,3 @@ export function arkStateToDataAttributes(state) {
         typeof value === 'boolean' ? value || undefined : value,
     ]));
 }
-//# sourceMappingURL=ArkStateToDataAttributes.js.map

package/dist/utils/Tone.d.ts

@@ -1,3 +1,2 @@
 export declare const ToneProvider: import("react").Provider<"neutral" | "valid" | "invalid" | undefined>;
 export declare function useToneContext(): "neutral" | "valid" | "invalid" | undefined;
-//# sourceMappingURL=Tone.d.ts.map

package/dist/utils/Tone.js

@@ -4,4 +4,3 @@ export const ToneProvider = ToneContext.Provider;
 export function useToneContext() {
     return useContext(ToneContext);
 }
-//# sourceMappingURL=Tone.js.map

package/dist/utils/Validation.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { Validation } from '../types/Validation.ts';
+export declare function readValidation(validation?: Validation): {
+    state: "success" | "error" | undefined;
+    message: string | undefined;
+};
+export declare function validationAttributes(validation: ReturnType<typeof readValidation>): {
+    'data-validation': "success" | "error" | undefined;
+};
+/**
+ * Message children of Error and Success: omit them to show Root's validation message, pass a function to format that message, or pass content to replace it.
+ */
+export type ValidationMessageChildren = ReactNode | ((message: string) => ReactNode);
+export declare function validationMessageContent(validation: ReturnType<typeof readValidation>, state: 'error' | 'success', children?: ValidationMessageChildren): ReactNode;

package/dist/utils/Validation.js

@@ -0,0 +1,23 @@
+// Choosing the state and message from the validation prop's two shapes, so parts read one normalized object
+export function readValidation(validation) {
+    if (typeof validation === 'string')
+        return { state: validation, message: undefined };
+    return { state: validation?.[0], message: validation?.[1] };
+}
+// The state attribute carried by every part, so presets can style any part from Root's validation, like [data-validation='error']
+export function validationAttributes(validation) {
+    return { 'data-validation': validation.state };
+}
+// Choosing what an Error or Success part shows, or undefined when it should stay hidden
+export function validationMessageContent(validation, state, children) {
+    if (validation.state !== state)
+        return undefined;
+    // Static children show with the state alone, while the message and its formatting function need a message
+    if (children !== undefined && typeof children !== 'function')
+        return children;
+    if (!validation.message)
+        return undefined;
+    if (typeof children === 'function')
+        return children(validation.message);
+    return validation.message;
+}

package/dist/utils/asChild.d.ts

@@ -0,0 +1,41 @@
+import type { ReactElement, ReactNode } from 'react';
+/** The asChild prop shared by the library's action parts. */
+export type AsChildProps = {
+    /**
+     * Gives this part's behavior to your own single child element, like your app's Button, instead of rendering its own button.
+     * The child keeps the state data attributes (like data-open or data-disabled) and accessibility props, but none of this part's styling.
+     * @default false
+     */
+    asChild?: boolean;
+};
+/** Decides the style attributes of an action part: none when asChild, since the consumer's child owns its appearance. */
+export declare function asChildStyleAttributes(props: {
+    asChild?: boolean;
+    component: string;
+    disableStyle?: boolean;
+}): {
+    'data-component'?: undefined;
+    'data-style-disabled'?: undefined;
+} | {
+    'data-component': string;
+    'data-style-disabled': string | undefined;
+};
+/** Decides what a Base UI action part renders: the consumer's child as the element when asChild, otherwise the part's own styled element. */
+export declare function asChildRendering(props: {
+    asChild?: boolean;
+    children?: ReactNode;
+    component: string;
+    disableStyle?: boolean;
+}): {
+    render: ReactElement;
+} | {
+    'data-component'?: undefined;
+    'data-style-disabled'?: undefined;
+    children: ReactNode;
+    render?: undefined;
+} | {
+    'data-component': string;
+    'data-style-disabled': string | undefined;
+    children: ReactNode;
+    render?: undefined;
+};

package/dist/utils/asChild.js

@@ -0,0 +1,15 @@
+/** Decides the style attributes of an action part: none when asChild, since the consumer's child owns its appearance. */
+export function asChildStyleAttributes(props) {
+    if (props.asChild)
+        return {};
+    return {
+        'data-component': props.component,
+        'data-style-disabled': props.disableStyle ? '' : undefined,
+    };
+}
+/** Decides what a Base UI action part renders: the consumer's child as the element when asChild, otherwise the part's own styled element. */
+export function asChildRendering(props) {
+    if (props.asChild)
+        return { render: props.children };
+    return { children: props.children, ...asChildStyleAttributes(props) };
+}

package/dist/utils/icons.d.ts

@@ -0,0 +1,24 @@
+import type { SVGIconProps } from '../types/Icon.ts';
+export declare const ArrowLeft: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CalendarDays: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Check: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronDown: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronLeft: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronRight: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronUp: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronsUpDown: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CircleAlert: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CircleCheck: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Eye: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const EyeOff: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const File: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const FolderOpen: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const GripVertical: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Info: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const LoaderCircle: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Minus: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Star: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Text: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const TriangleAlert: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Upload: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const X: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;