plass-ui 0.0.1 → 1.0.0

package/dist/components/radio-group/PlRadioGroup.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Radio as BaseUIRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
+import type { PlassColor, PlassOrientation, PlassSize } from '../../types.js';
+export interface PlRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadioGroup>, 'className' | 'style' | 'render'> {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Which way the options stack. Vertical by default — a column of options is
+     * scannable at any length, and a row silently becomes unreadable the moment
+     * one label is longer than expected.
+     * @default 'vertical'
+     */
+    orientation?: PlassOrientation;
+    /** The question the options answer. Rendered as the group's label. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below the options. Its presence also turns the group invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlRadioProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadio.Root>, 'className' | 'style' | 'render' | 'children'> {
+    /** The text beside the dot. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * One option in a `PlRadioGroup`.
+ *
+ * It has no `size` and no `color` of its own — both come from the group, which
+ * is the only place they can be set once and mean the same thing for every
+ * option in the set.
+ */
+export declare const PlRadio: React.ForwardRefExoticComponent<PlRadioProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A set of options where exactly one is chosen.
+ *
+ * Base UI owns the roving tab index and the arrow-key navigation, which is the
+ * whole reason a radio group is a component at all rather than a `<div>` full of
+ * inputs: the set takes one tab stop, and the arrows move within it.
+ */
+export declare const PlRadioGroup: React.ForwardRefExoticComponent<PlRadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/radio-group/PlRadioGroup.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Radio as BaseUIRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
+import { Field } from '@base-ui/react/field';
+import { controlSlots, focusRingClasses, glassClasses, hasContent, metaTextClasses, tickDotClasses, tickRowTextClasses, tickSizeClasses, transitionClasses } from '../../internal/styles.js';
+const RadioGroupContext = /* @__PURE__ */ React.createContext({
+    size: 'md',
+    color: 'primary',
+    readOnly: false
+});
+/**
+ * The dot. Round, and one of the two things in the library allowed to be —
+ * roundness is exactly what tells a reader "one of these" rather than "any of
+ * these", and it is the one convention old enough that breaking it would cost
+ * more than it bought.
+ */
+const dotBaseClasses = /* @__PURE__ */ [
+    'relative inline-flex shrink-0 items-center justify-center rounded-full border',
+    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
+    transitionClasses,
+    focusRingClasses
+].join(' ');
+/**
+ * No gloss line and no tinted lift, for the reason a PlCheckbox's tick has
+ * neither: a 1px white edge is light on a cut edge at 40px and a grey smudge at
+ * 18px, and a `0 6px 16px` shadow under an 18px circle is bigger than the
+ * circle. The glass stays; only the two decorations go.
+ *
+ * The edge is `--plass-border` rather than the sheet's own `--plass-glass-line`,
+ * and that is not a slip. The glass hairline is white light on a translucent
+ * pane, which is invisible the moment the tick is set on a light card rather
+ * than on the page wash — and a tick nobody can see is a control nobody can
+ * find. A neutral hairline reads on both.
+ */
+const restDotClasses = /* @__PURE__ */ [
+    glassClasses,
+    'cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]',
+    'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]',
+    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
+    'data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105'
+].join(' ');
+const readOnlyDotClasses = /* @__PURE__ */ [
+    glassClasses,
+    'cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]',
+    'saturate-[0.55]',
+    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
+    'data-[checked]:[border-color:transparent]'
+].join(' ');
+const disabledDotClasses = /* @__PURE__ */ [
+    glassClasses,
+    'cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]',
+    'opacity-50 saturate-[0.35]',
+    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
+    'data-[checked]:[border-color:transparent]'
+].join(' ');
+/** The inner dot: `currentColor`, so it inherits the on-fill ink. */
+const indicatorClasses = 'rounded-full bg-current';
+/**
+ * One option in a `PlRadioGroup`.
+ *
+ * It has no `size` and no `color` of its own — both come from the group, which
+ * is the only place they can be set once and mean the same thing for every
+ * option in the set.
+ */
+export const PlRadio = /* @__PURE__ */ React.forwardRef(function PlRadio({ label, description, disabled = false, className, style, ...props }, ref) {
+    const group = React.useContext(RadioGroupContext);
+    const readOnly = props.readOnly ?? group.readOnly;
+    return (_jsx(Field.Root, { disabled: disabled, className: ['flex flex-col', className ?? ''].filter(Boolean).join(' '), style: style, children: _jsxs("div", { className: `flex items-start gap-2 ${tickRowTextClasses[group.size]}`, children: [_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUIRadio.Root, { ref: ref, className: [
+                            dotBaseClasses,
+                            tickSizeClasses[group.size],
+                            disabled ? disabledDotClasses : readOnly ? readOnlyDotClasses : restDotClasses
+                        ].join(' '), disabled: disabled, ...props, children: _jsx(BaseUIRadio.Indicator, { className: `${indicatorClasses} ${tickDotClasses[group.size]}` }) }) }), label || description ? (_jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [label ? (_jsx(Field.Label, { className: disabled ? 'text-(--plass-muted-fg)' : 'cursor-pointer text-(--plass-fg)', children: label })) : null, description ? (_jsx(Field.Description, { className: `${metaTextClasses[group.size]} text-(--plass-muted-fg)`, children: description })) : null] })) : null] }) }));
+});
+/**
+ * A set of options where exactly one is chosen.
+ *
+ * Base UI owns the roving tab index and the arrow-key navigation, which is the
+ * whole reason a radio group is a component at all rather than a `<div>` full of
+ * inputs: the set takes one tab stop, and the arrows move within it.
+ */
+export const PlRadioGroup = /* @__PURE__ */ React.forwardRef(function PlRadioGroup({ size = 'md', color = 'primary', orientation = 'vertical', label, description, error, invalid, disabled = false, readOnly = false, className, style, children, ...props }, ref) {
+    const hasError = hasContent(error);
+    const isInvalid = invalid ?? hasError;
+    // Invalid re-points the whole slot family at `danger`, so every dot, the
+    // ring and the message all turn over together.
+    const family = isInvalid ? 'danger' : color;
+    const context = React.useMemo(() => ({ size, color: family, readOnly }), [size, family, readOnly]);
+    return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: ['flex flex-col gap-1.5', className ?? ''].filter(Boolean).join(' '), 
+            // `solid`, because a checked dot *is* the coloured thing.
+            style: { ...controlSlots(family, 0, 'solid'), ...style }, children: [label ? (_jsx(Field.Label, { className: [
+                        metaTextClasses[size],
+                        'font-semibold',
+                        disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'
+                    ].join(' '), children: label })) : null, description ? (_jsx(Field.Description, { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null, _jsx(BaseUIRadioGroup, { ref: ref, disabled: disabled, readOnly: readOnly, className: [
+                        'flex',
+                        orientation === 'horizontal' ? 'flex-row flex-wrap gap-x-5 gap-y-2' : 'flex-col gap-2'
+                    ].join(' '), ...props, children: children }), hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }) }));
+});

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

@@ -0,0 +1,2 @@
+export { PlRadio, PlRadioGroup } from './PlRadioGroup.js';
+export type { PlRadioGroupProps, PlRadioProps } from './PlRadioGroup.js';

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

@@ -0,0 +1 @@
+export { PlRadio, PlRadioGroup } from './PlRadioGroup.js';

package/dist/components/rating/PlRating.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+export interface PlRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** How much is rated. Use with `onValueChange` for a controlled rating. */
+    value?: number;
+    /** Where an uncontrolled rating starts. @default 0 */
+    defaultValue?: number;
+    /** Called with the new score. `0` is what a cleared rating reports. */
+    onValueChange?: (value: number) => void;
+    /** How many stars there are, and therefore the highest score. @default 5 */
+    count?: number;
+    /**
+     * The smallest step that can be *chosen*, as a fraction of one star — `0.5`
+     * gives half stars, `1` whole ones. Anything outside `0 < precision <= 1`
+     * falls back to `1`.
+     *
+     * It bounds what a reader can pick and nothing else: a `value` of `4.3` is
+     * drawn as four stars and a third at every precision, because an average is
+     * not a choice and rounding it to the nearest half would be reporting a
+     * different number from the one the component was handed.
+     * @default 1
+     */
+    precision?: number;
+    /** The glyph a filled star is drawn with. */
+    icon?: React.ReactNode;
+    /** And the one an empty star is drawn with. Has to be the same shape. */
+    emptyIcon?: React.ReactNode;
+    /** Choosing the score that is already chosen clears it back to `0`. @default true */
+    clearable?: boolean;
+    /**
+     * Shows the score without letting it be changed — a product's average, a
+     * rating somebody else left.
+     *
+     * This is the one `readOnly` in the library that does **not** drain the
+     * saturation, because it is not a control being held still: there are no
+     * inputs at all, and what is left is a picture of a number. A row of grey
+     * stars would say the score itself was unavailable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Unavailable. The light goes out of the whole row. */
+    disabled?: boolean;
+    /** Identifies the value when a form is submitted. */
+    name?: string;
+    /** A form will not submit until a star has been chosen. */
+    required?: boolean;
+    /** Height of one star, on the standalone-glyph ladder. @default 'md' */
+    size?: PlassSize;
+    /**
+     * Semantic colour role.
+     *
+     * `warning` by default — the amber a star is expected to be — rather than the
+     * `primary` everything else takes. It is the one place in the library where a
+     * component's default colour is chosen by what the object *is* instead of by
+     * what it means.
+     * @default 'warning'
+     */
+    color?: PlassColor;
+    /** Names the whole control. @default 'Rating' */
+    label?: string;
+    /**
+     * What one star, and the whole control once it is read only, is called.
+     * @default `{value} out of {count}`
+     */
+    valueLabel?: (value: number, count: number) => string;
+}
+/**
+ * A score out of five, as a row of stars.
+ *
+ * Underneath an interactive rating is a radio group of real `<input>`s, one per
+ * choosable score, each visually hidden under the fraction of a star it stands
+ * for. That is the whole accessibility argument: a rating *is* "exactly one of
+ * these", so it gets one tab stop for the row, arrow keys within it,
+ * `aria-checked` on the one that is taken, and a value in a form submission —
+ * none of which a row of `<button>`s or a `<div>` with a click handler would
+ * have.
+ *
+ * The fraction is drawn by laying the filled star over the empty one and
+ * clipping it to a percentage of the width. Nothing is transformed and no glyph
+ * is scaled, so a half star is the left half of exactly the star beside it —
+ * which is also the no-transform rule holding on a component whose whole job is
+ * a partial shape. The clip runs from the inline start, so it fills from the
+ * right under RTL without anything being told to.
+ *
+ * `readOnly` is a different component in the same clothes: no inputs, no radio
+ * group, and one `role="img"` carrying the score as a sentence. A star display
+ * that kept twenty focusable radios would be twenty tab stops on a page that
+ * was only reporting a number.
+ */
+export declare const PlRating: React.ForwardRefExoticComponent<PlRatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/rating/PlRating.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { StarIcon, StarOutlineIcon } from '../../internal/icons.js';
+import { controlSlots, cx, focusWithinRingClasses, gapClasses, iconSizeClasses, radiusClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
+/**
+ * The box one copy of the glyph is drawn in. Both copies get exactly this, or
+ * the clipped one would not line up with the outline underneath it.
+ */
+const starClasses = 'flex items-center justify-center';
+/** The default accessible name of a score. */
+function defaultValueLabel(value, count) {
+    return value <= 0 ? 'No rating' : `${value} out of ${count}`;
+}
+/**
+ * A score out of five, as a row of stars.
+ *
+ * Underneath an interactive rating is a radio group of real `<input>`s, one per
+ * choosable score, each visually hidden under the fraction of a star it stands
+ * for. That is the whole accessibility argument: a rating *is* "exactly one of
+ * these", so it gets one tab stop for the row, arrow keys within it,
+ * `aria-checked` on the one that is taken, and a value in a form submission —
+ * none of which a row of `<button>`s or a `<div>` with a click handler would
+ * have.
+ *
+ * The fraction is drawn by laying the filled star over the empty one and
+ * clipping it to a percentage of the width. Nothing is transformed and no glyph
+ * is scaled, so a half star is the left half of exactly the star beside it —
+ * which is also the no-transform rule holding on a component whose whole job is
+ * a partial shape. The clip runs from the inline start, so it fills from the
+ * right under RTL without anything being told to.
+ *
+ * `readOnly` is a different component in the same clothes: no inputs, no radio
+ * group, and one `role="img"` carrying the score as a sentence. A star display
+ * that kept twenty focusable radios would be twenty tab stops on a page that
+ * was only reporting a number.
+ */
+export const PlRating = /* @__PURE__ */ React.forwardRef(function PlRating({ value: valueProp, defaultValue = 0, onValueChange, count = 5, precision = 1, icon, emptyIcon, clearable = true, readOnly = false, disabled = false, name: nameProp, required = false, size = 'md', color = 'warning', label = 'Rating', valueLabel = defaultValueLabel, className, style, onPointerLeave, ...props }, ref) {
+    const generatedName = React.useId();
+    const name = nameProp ?? generatedName;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const controlled = valueProp !== undefined;
+    const value = controlled ? valueProp : uncontrolled;
+    // What the pointer is currently promising, which is not the value until it is
+    // clicked. `null` is "the pointer is not on the row", not "zero stars".
+    const [hovered, setHovered] = React.useState(null);
+    const stars = Math.max(1, Math.floor(count));
+    const step = precision > 0 && precision <= 1 ? precision : 1;
+    const stepsPerStar = Math.round(1 / step);
+    const shown = Math.max(0, Math.min(stars, hovered ?? value));
+    const change = (next) => {
+        if (!controlled) {
+            setUncontrolled(next);
+        }
+        onValueChange?.(next);
+    };
+    const marks = Array.from({ length: stars }, (_, index) => {
+        // How much of *this* star is filled, from 0 to 1.
+        const fill = Math.max(0, Math.min(1, shown - index));
+        return (_jsxs("span", { className: cx('relative inline-flex shrink-0', iconSizeClasses[size], radiusClasses.xs, readOnly || disabled ? '' : focusWithinRingClasses), children: [_jsx("span", { className: cx(starClasses, iconSizeClasses[size], 'text-(--p-empty)'), children: emptyIcon ?? _jsx(StarOutlineIcon, {}) }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 start-0 overflow-hidden", style: { width: `${fill * 100}%` }, children: _jsx("span", { className: cx(starClasses, iconSizeClasses[size], 'text-(--p-accent)', transitionClasses), children: icon ?? _jsx(StarIcon, {}) }) }), readOnly
+                    ? null
+                    : Array.from({ length: stepsPerStar }, (_, part) => {
+                        const score = Number((index + (part + 1) * step).toFixed(4));
+                        return (_jsx("label", { className: cx('absolute inset-y-0', disabled ? 'cursor-not-allowed' : 'cursor-pointer'), style: {
+                                insetInlineStart: `${(part * 100) / stepsPerStar}%`,
+                                width: `${100 / stepsPerStar}%`
+                            }, onPointerEnter: () => {
+                                if (!disabled) {
+                                    setHovered(score);
+                                }
+                            }, children: _jsx("input", { type: "radio", className: srOnlyClasses, name: name, value: score, checked: value === score, disabled: disabled, required: required, "aria-label": valueLabel(score, stars), onChange: () => change(score), 
+                                // Clearing cannot ride on `change`: clicking a radio that is
+                                // already checked fires a click and no change at all, and
+                                // that click is exactly the gesture being listened for.
+                                onClick: () => {
+                                    if (clearable && value === score) {
+                                        change(0);
+                                    }
+                                } }) }, score));
+                    })] }, index));
+    });
+    const classNames = cx('inline-flex items-center align-middle', gapClasses[size], 
+    // The house treatment, not a grey token: the light goes out of the row and
+    // the page shows through it, which is what unavailable looks like
+    // everywhere else in the library.
+    disabled ? 'cursor-not-allowed opacity-50 saturate-[0.35]' : '', className);
+    const styles = {
+        ...controlSlots(color, 0, 'solid'),
+        // An empty star is not a disabled one and not a hairline: it is the ghost of
+        // the star beside it, so it takes the muted ink at enough strength to read
+        // as a shape and not enough to compete with the ones that are filled.
+        '--p-empty': 'color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)',
+        ...style
+    };
+    if (readOnly) {
+        return (_jsx("div", { ref: ref, role: "img", "aria-label": valueLabel(Math.max(0, Math.min(stars, value)), stars), className: classNames, style: styles, onPointerLeave: onPointerLeave, ...props, children: marks }));
+    }
+    return (_jsx("div", { ref: ref, role: "radiogroup", "aria-label": label, "aria-disabled": disabled || undefined, "aria-required": required || undefined, className: classNames, style: styles, onPointerLeave: (event) => {
+            setHovered(null);
+            onPointerLeave?.(event);
+        }, ...props, children: marks }));
+});

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

@@ -0,0 +1,2 @@
+export { PlRating } from './PlRating.js';
+export type { PlRatingProps } from './PlRating.js';

package/dist/components/rating/index.js

@@ -0,0 +1 @@
+export { PlRating } from './PlRating.js';

package/dist/components/scroll-zone/PlScrollZone.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassStyleProps } from '../../types.js';
+/**
+ * When the scroll buttons are drawn.
+ *
+ * - `auto` — only the one that has somewhere to go, and neither of them while
+ *   everything fits. The default: a control that cannot do anything is worse
+ *   than no control, and a row that does not overflow is not a scroller.
+ * - `always` — both, from the first paint, with the one that has nowhere to go
+ *   `disabled` rather than gone. What a row whose content arrives later wants,
+ *   since the buttons do not appear under the pointer half a second in.
+ * - `none` — none at all. Dragging, the wheel and the arrow keys are still
+ *   there; this is the strip that scrolls the way a phone scrolls.
+ */
+export type PlScrollZoneButtons = 'auto' | 'always' | 'none';
+/**
+ * What pressing a scroll button does.
+ *
+ * - `item` — moves to the next child along, `step` of them at a time. The
+ *   default, and the only one that lands on something rather than between two
+ *   things.
+ * - `page` — moves by everything currently on screen, the way Page Down does.
+ * - `hold` — scrolls for as long as the button is held, at `speed` pixels a
+ *   second. A press too short to be a hold falls back to one `item`, so the
+ *   button is never dead to a quick tap.
+ */
+export type PlScrollZoneMode = 'item' | 'page' | 'hold';
+/**
+ * Where the scroll buttons sit, which is also where the strip ends.
+ *
+ * - `overlay` — over the ends of the strip, which keeps every pixel of the box
+ *   for content and lets an item pass under a button. The default, and what a
+ *   shelf of pictures wants.
+ * - `inline` — beside the strip, in the layout. The scroller stops where the
+ *   button starts, so an item is *cut off* at the button's edge rather than
+ *   sliding beneath it: nothing is ever half-hidden behind a control, and the
+ *   button is legible over the page rather than over whatever it landed on.
+ *
+ * The lane an `inline` button sits in is kept even while that button has
+ * nowhere to go, or the strip would resize under the pointer every time it
+ * reached an end.
+ */
+export type PlScrollZoneButtonPlacement = 'overlay' | 'inline';
+export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the children run, and therefore which way the zone scrolls.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * How many rows a horizontal zone lays its children out in before it starts a
+     * new column — and how many columns a vertical one uses. `2` is the shelf
+     * that holds twice as much in the same width.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The gap between children, on Tailwind's spacing scale: `2` is `0.5rem`, the
+     * same step `gap-2` is. The same ladder `PlGrid`'s own `spacing` is on.
+     * @default 2
+     */
+    spacing?: number;
+    /** When the scroll buttons are drawn. @default 'auto' */
+    buttons?: PlScrollZoneButtons;
+    /**
+     * Whether the buttons sit over the strip or beside it. `inline` is what to
+     * reach for when an item disappearing under a button reads as a bug rather
+     * than as depth.
+     * @default 'overlay'
+     */
+    buttonPlacement?: PlScrollZoneButtonPlacement;
+    /** What pressing one does. @default 'item' */
+    mode?: PlScrollZoneMode;
+    /** How many children one press moves, in `item` mode. @default 1 */
+    step?: number;
+    /** How fast a held button scrolls, in pixels a second. @default 900 */
+    speed?: number;
+    /**
+     * Snaps the nearest child to the leading edge when the scrolling stops —
+     * dragging and the wheel included, not only the buttons.
+     * @default false
+     */
+    snap?: boolean;
+    /**
+     * Lets a mouse or a pen drag the strip along, the way a finger already does.
+     * Touch is left to the browser, whose own scrolling is better than anything a
+     * handler can imitate: momentum, rubber-banding and the scrollbar all come
+     * with it.
+     * @default true
+     */
+    drag?: boolean;
+    /** Shows the native scrollbar. @default false */
+    scrollbar?: boolean;
+    /** What the scrollable region is called — "Categories", "Recent files". */
+    label?: string;
+    /**
+     * What the buttons are called. Never drawn — a disc with a chevron in it has
+     * no accessible name of its own, which is the defect `PlIconButton`'s `label`
+     * exists to make impossible.
+     * @default 'Previous'
+     */
+    previousLabel?: string;
+    /** @default 'Next' */
+    nextLabel?: string;
+    /** What is being laid out. Every top-level child is one item of the strip. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of anything, laid out in one direction and scrolled in it.
+ *
+ * The mechanism is an ordinary scroll container, and everything the component
+ * offers is a way of driving one. Swiping on a phone, two-finger dragging on a
+ * trackpad, the wheel, the arrow keys and the scrollbar are the browser's own
+ * and are never intercepted; what is added on top is a pair of buttons for the
+ * pointer that has neither a wheel nor a finger, and a mouse drag for the strip
+ * that reads as something to pull rather than something to page.
+ *
+ * Nothing is transformed. A translated track would have to argue for an
+ * exception to the house rule; a scroll offset does not, and it is also what
+ * makes the strip run the other way under RTL without being told, keeps the
+ * scrollbar honest, and lets the browser scroll a focused child into view.
+ *
+ * It draws no sheet of its own, and there is no `elevation` to give it one: a
+ * shelf is a way of laying children out, and the children arrive with their own
+ * surfaces. `variant`, `size`, `color` and `density` reach the two buttons,
+ * which are real `PlIconButton`s.
+ *
+ * `lines` is what separates this from a `PlCarousel`: a carousel is one thing at
+ * a time and knows which one, a scroll zone is a shelf that happens to be longer
+ * than the room it is in.
+ */
+export declare const PlScrollZone: React.ForwardRefExoticComponent<PlScrollZoneProps & React.RefAttributes<HTMLDivElement>>;