panelui-web 0.9.0 → 0.10.0

package/dist/components/sheet/index.js

@@ -46,6 +46,18 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Every sheet follows a drag and leaves on a flick toward its own edge. The
  * grabber on a top or bottom sheet says so before anybody tries.
  *
+ * With a mouse, the text in a sheet is for reading: a press on the title,
+ * the description, the body or the footer selects text the way it does on the
+ * page, and the sheet is dragged by its grabber and the padding around the
+ * header. A finger still swipes the sheet from anywhere.
+ *
+ * ## The close button
+ *
+ * Every sheet has a round close button in its top trailing corner. Write a
+ * bare `<Sheet.Close />` somewhere in the sheet to put it there instead, for
+ * example first in `Sheet.Header` to stand before the title, and the one in
+ * the corner steps aside. `showClose={false}` leaves the sheet with none.
+ *
  * ## Slides
  *
  * `Sheet.Slides` takes the place of the body with a column of rounded
@@ -58,7 +70,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { Drawer } from '@base-ui/react/drawer';
 import { ScrollArea } from '@base-ui/react/scroll-area';
-import { Children, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Children, createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 /*
  * One curve for every movement: the sheet arriving, the one behind it stepping
@@ -116,12 +128,24 @@ const sheetVariants = tv({
             'before:h-[5px] before:w-9 before:rounded-full before:bg-muted-foreground/35',
         ],
         close: [
-            'absolute end-4 top-4 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-full',
+            'relative inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full',
             'bg-muted text-muted-foreground outline-none transition-[background-color,color,scale] duration-150',
             'after:absolute after:-inset-1.5 hover:bg-foreground/10 hover:text-foreground active:scale-95',
             'focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none',
         ],
-        header: 'flex shrink-0 flex-col gap-1 px-6 pt-6 pb-3',
+        closeCorner: 'absolute end-4 top-4 z-10',
+        /*
+         * A close button written into the header shares the title's line: the
+         * header becomes three columns, the button takes the first or the last
+         * depending on where it was written, and the text keeps the middle.
+         */
+        header: [
+            'flex shrink-0 flex-col gap-1 px-6 pt-6 pb-3',
+            'has-[>[data-slot=sheet-close]]:grid has-[>[data-slot=sheet-close]]:grid-cols-[auto_minmax(0,1fr)_auto] has-[>[data-slot=sheet-close]]:gap-x-3',
+            '[&>*]:col-start-2',
+            '[&>[data-slot=sheet-close]]:row-span-2 [&>[data-slot=sheet-close]]:row-start-1 [&>[data-slot=sheet-close]]:-my-1 [&>[data-slot=sheet-close]]:self-start',
+            '[&>[data-slot=sheet-close]:first-child]:col-start-1 [&>[data-slot=sheet-close]:not(:first-child)]:col-start-3',
+        ],
         title: 'text-[19px] font-semibold leading-6 tracking-[-0.01em]',
         description: 'text-[15px] leading-5 text-muted-foreground',
         body: 'relative flex min-h-0 flex-1 flex-col',
@@ -319,14 +343,16 @@ function SheetFrame({ children, open, onOpenChange, defaultOpen = false, side =
         stack,
         nested,
         inline: false,
+        dismissible,
         showClose: true,
+        claimClose: () => () => { },
         register: (child) => {
             opened.current.add(child);
             return () => opened.current.delete(child);
         },
         closeTree: handle.closeTree,
         hasOpenChild: () => [...opened.current].some((child) => child.isOpen()),
-    }), [side, stack, nested, handle]);
+    }), [side, stack, nested, dismissible, handle]);
     return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: isOpen, handle: drawerHandle, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
                 // The primitive has a switch for a press outside and none for
                 // Escape or a swipe, so those are refused here.
@@ -384,8 +410,16 @@ function SheetContent({ children, detached = true, size = 'auto', showGrabber, s
         attached: !detached || (vertical && size === 'full'),
         blur,
     });
-    const context = useMemo(() => ({ ...sheet, inline, showClose }), [sheet, inline, showClose]);
-    const inside = (_jsxs(_Fragment, { children: [(showGrabber ?? vertical) ? _jsx("div", { "aria-hidden": true, className: slots.grabber() }) : null, showClose ? _jsx(SheetClose, { "aria-label": "Close", className: slots.close(), icon: true }) : null, children] }));
+    // Bare close buttons written into the sheet. While there is one, the
+    // corner button is not drawn.
+    const [placed, setPlaced] = useState(0);
+    const claimClose = useCallback(() => {
+        setPlaced((count) => count + 1);
+        return () => setPlaced((count) => count - 1);
+    }, []);
+    const corner = showClose && placed === 0;
+    const context = useMemo(() => ({ ...sheet, inline, showClose: corner, claimClose }), [sheet, inline, corner, claimClose]);
+    const inside = (_jsxs(_Fragment, { children: [(showGrabber ?? (vertical && sheet.dismissible)) ? _jsx("div", { "aria-hidden": true, className: slots.grabber() }) : null, corner ? _jsx(CloseButton, { className: slots.closeCorner() }) : null, children] }));
     if (inline) {
         return (_jsx(SheetContext.Provider, { value: context, children: _jsx("div", { className: slots.popup({ className: ['[transform:none]', className] }), ...props, children: inside }) }));
     }
@@ -413,7 +447,7 @@ function SheetTitle({ className, ...props }) {
     const slots = sheetVariants();
     if (inline)
         return _jsx("h2", { className: slots.title({ className }), ...props });
-    return _jsx(Drawer.Title, { className: slots.title({ className }), ...props });
+    return _jsx(Drawer.Content, { render: _jsx(Drawer.Title, { className: slots.title({ className }), ...props }) });
 }
 SheetTitle.displayName = 'Sheet.Title';
 /** A sentence under the title, read out after it. */
@@ -422,7 +456,7 @@ function SheetDescription({ className, ...props }) {
     const slots = sheetVariants();
     if (inline)
         return _jsx("p", { className: slots.description({ className }), ...props });
-    return _jsx(Drawer.Description, { className: slots.description({ className }), ...props });
+    return (_jsx(Drawer.Content, { render: _jsx(Drawer.Description, { className: slots.description({ className }), ...props }) }));
 }
 SheetDescription.displayName = 'Sheet.Description';
 /**
@@ -430,26 +464,49 @@ SheetDescription.displayName = 'Sheet.Description';
  * the scrollbar is a thin drawn thumb that shows while the content is moving.
  */
 function SheetBody({ className, children, ...props }) {
+    const { inline } = useSheet('Sheet.Body');
     const slots = sheetVariants();
-    return (_jsxs(ScrollArea.Root, { className: slots.body(), children: [_jsx(ScrollArea.Viewport, { className: slots.bodyViewport(), children: _jsx(ScrollArea.Content, { className: slots.bodyContent({ className }), ...props, children: children }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
+    const content = (_jsx(ScrollArea.Content, { className: slots.bodyContent({ className }), ...props, children: children }));
+    return (_jsxs(ScrollArea.Root, { className: slots.body(), children: [_jsx(ScrollArea.Viewport, { className: slots.bodyViewport(), children: inline ? content : _jsx(Drawer.Content, { render: content }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
 }
 SheetBody.displayName = 'Sheet.Body';
 /** The actions, stacked full width at the bottom of the sheet. */
 function SheetFooter({ className, ...props }) {
+    const { inline } = useSheet('Sheet.Footer');
     const slots = sheetVariants();
-    return _jsx("div", { className: slots.footer({ className }), ...props });
+    const footer = _jsx("div", { className: slots.footer({ className }), ...props });
+    return inline ? footer : _jsx(Drawer.Content, { render: footer });
 }
 SheetFooter.displayName = 'Sheet.Footer';
-/** Closes the sheet. Works even when `dismissible` is off. */
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/**
+ * Closes the sheet. Works even when `dismissible` is off. Written bare, it is
+ * the round close button, and the sheet stops drawing its own in the corner.
+ */
 function SheetClose({ render, icon = false, children, ...props }) {
+    const sheet = useSheet('Sheet.Close');
+    const bare = icon || (render === undefined && children === undefined);
+    const { claimClose } = sheet;
+    useIsomorphicLayoutEffect(() => (bare ? claimClose() : undefined), [bare, claimClose]);
+    if (bare)
+        return _jsx(CloseButton, { ...props });
+    if (sheet.inline) {
+        return (_jsx("button", { type: "button", "data-slot": "sheet-close", ...props, children: children }));
+    }
+    return (_jsx(Drawer.Close, { "data-slot": "sheet-close", render: render, ...props, children: children }));
+}
+SheetClose.displayName = 'Sheet.Close';
+/** The round button with a cross in it. */
+function CloseButton({ className, 'aria-label': label = 'Close', ...props }) {
     const { inline } = useSheet('Sheet.Close');
-    const content = icon ? (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinecap: "round", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })) : (children);
+    const slots = sheetVariants();
+    const glyph = (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinecap: "round", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }));
+    const shared = { 'data-slot': 'sheet-close', 'aria-label': label, className: slots.close({ className }), ...props };
     if (inline) {
-        return (_jsx("button", { type: "button", ...props, children: content }));
+        return (_jsx("button", { type: "button", ...shared, children: glyph }));
     }
-    return (_jsx(Drawer.Close, { render: render, ...props, children: content }));
+    return _jsx(Drawer.Close, { ...shared, children: glyph });
 }
-SheetClose.displayName = 'Sheet.Close';
 const SlidesContext = createContext(null);
 /** The rounded frame of a slide: the slide itself in a deck, inside its row in a column. */
 const frameOf = (slide) => slide.querySelector('[data-slide-frame]') ?? slide;

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

@@ -0,0 +1,293 @@
+/**
+ * Slider — a number chosen by dragging along a track, with its name and its
+ * value written inside the track.
+ *
+ * ```tsx
+ * <Slider label="Opacity" defaultValue={64} format={{ style: 'unit', unit: 'percent' }} />
+ *
+ * <Slider variant="line" label="Zoom" min={10} max={400} defaultValue={100}>
+ *   <Slider.Step by={-10} aria-label="Zoom out"><MinusIcon /></Slider.Step>
+ *   <Slider.Step by={10} aria-label="Zoom in"><PlusIcon /></Slider.Step>
+ * </Slider>
+ * ```
+ *
+ * ## The track is the label
+ *
+ * In a panel of settings, a column of sliders each with a label above and a
+ * number beside is three things to line up per row. The `fill` slider puts
+ * the name at the start of the track and the value at its end, so a row is
+ * one bar the height of a button, and a stack of them reads as a table.
+ *
+ * ## It moves the way the hand does
+ *
+ * A press away from the handle glides the fill there on a curve with a
+ * little overshoot; a drag follows the pointer exactly, with nothing
+ * easing behind it. Pulled past either end, the track stretches a few
+ * pixels towards the pointer and springs back on release, so the end of
+ * the range is felt rather than hit.
+ *
+ * ## Two weights
+ *
+ * `fill` is the slider for a settings panel. `line` is a thin track with a
+ * round knob, for a toolbar, where a zoom or a scrubber sits between two
+ * buttons: `Slider.Step` is that button, and it moves the value by `by`.
+ *
+ * `origin="center"` fills from the middle out, for a value that can go
+ * either way from nothing: exposure, a balance, a pitch shift.
+ */
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { type ComponentProps, type CSSProperties, type ReactNode } from 'react';
+export type SliderVariant = 'fill' | 'line';
+export type SliderSize = 'sm' | 'md' | 'lg';
+export type SliderColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+declare const sliderVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        fill: {
+            control: string;
+            track: string;
+            fill: string;
+            tick: string[];
+            handle: string[];
+            text: string;
+        };
+        line: {
+            control: string;
+            track: string;
+            fill: string;
+            tick: string;
+            handle: string[];
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    control: string[];
+    track: string;
+    fill: string[];
+    tick: string;
+    center: string;
+    handle: string[];
+    thumb: string;
+    text: string;
+    label: string;
+    value: string;
+    step: string[];
+}, undefined, {
+    variant: {
+        fill: {
+            control: string;
+            track: string;
+            fill: string;
+            tick: string[];
+            handle: string[];
+            text: string;
+        };
+        line: {
+            control: string;
+            track: string;
+            fill: string;
+            tick: string;
+            handle: string[];
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    control: string[];
+    track: string;
+    fill: string[];
+    tick: string;
+    center: string;
+    handle: string[];
+    thumb: string;
+    text: string;
+    label: string;
+    value: string;
+    step: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        fill: {
+            control: string;
+            track: string;
+            fill: string;
+            tick: string[];
+            handle: string[];
+            text: string;
+        };
+        line: {
+            control: string;
+            track: string;
+            fill: string;
+            tick: string;
+            handle: string[];
+        };
+    };
+    color: {
+        neutral: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        destructive: {
+            root: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    control: string[];
+    track: string;
+    fill: string[];
+    tick: string;
+    center: string;
+    handle: string[];
+    thumb: string;
+    text: string;
+    label: string;
+    value: string;
+    step: string[];
+}, undefined, unknown, unknown, undefined>>;
+type SliderValue = number | number[];
+export interface SliderProps<Value extends SliderValue = number> extends Omit<BaseSlider.Root.Props<Value>, 'className' | 'style' | 'format' | 'orientation' | 'children' | 'render' | 'onValueChange' | 'value' | 'defaultValue'> {
+    /** The value, when the caller holds it. Two numbers make a range with two handles. */
+    value?: Value;
+    /** The value to start at, when the caller does not hold it. Default `min`. */
+    defaultValue?: Value;
+    /** Called with the new value while it changes, by a drag, a press, a key or a `Slider.Step`. */
+    onValueChange?: (value: Value) => void;
+    /** `fill` writes the name and value inside a bar; `line` is a thin track with a knob. Default `fill`. */
+    variant?: SliderVariant;
+    /**
+     * What it sets. Written inside a `fill` slider, and what a screen reader
+     * calls either kind.
+     */
+    label?: string;
+    /**
+     * How the value is written: number-format options such as
+     * `{ style: 'unit', unit: 'percent' }`, or a function from the number to
+     * a string for anything else, such as a multiplier written `1.40×`. Also
+     * what a screen reader reads.
+     */
+    format?: Intl.NumberFormatOptions | ((value: number) => string);
+    /** Where the fill grows from. `center` fills outwards from the middle of the range. Default `start`. */
+    origin?: 'start' | 'center';
+    /** The colour of the fill and the handle. `neutral` by default. */
+    color?: SliderColor;
+    /** Height of a `fill` slider. Default `md`. */
+    size?: SliderSize;
+    /** Show the value at the end of a `fill` slider. Default true. */
+    showValue?: boolean;
+    /** Mark every step with a notch. Default: on when there are 12 steps or fewer. */
+    ticks?: boolean;
+    /** `Slider.Step` buttons. One with a negative `by` stands before the track, a positive one after it. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A slider. `defaultValue`, or `value` with `onValueChange`; `min`, `max`
+ * and `step` as for any range.
+ */
+declare function SliderRoot<Value extends SliderValue = number>({ value: valueProp, defaultValue, onValueChange, variant, label, format, origin, color, size, showValue, ticks, min, max, step, disabled, locale, children, className, style, ...props }: SliderProps<Value>): import("react").JSX.Element;
+declare namespace SliderRoot {
+    var displayName: string;
+}
+export interface SliderStepProps extends Omit<ComponentProps<'button'>, 'children'> {
+    /** How much one press moves the value. Negative steps down and sits before the track. */
+    by: number;
+    /** Usually an icon. Give the button an `aria-label` then. */
+    children?: ReactNode;
+}
+/**
+ * A button beside the track that moves the value by `by`: zoom out and zoom
+ * in on either side of a zoom slider. It is disabled at the end it moves
+ * towards.
+ */
+declare function SliderStep({ by, className, disabled, onClick, ...props }: SliderStepProps): import("react").JSX.Element;
+declare namespace SliderStep {
+    var displayName: string;
+}
+export declare const Slider: typeof SliderRoot & {
+    Step: typeof SliderStep;
+};
+export { SliderStep, sliderVariants };