plass-ui 0.0.1 → 1.0.0

package/dist/components/divider/PlDivider.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Separator } from '@base-ui/react/separator';
+import { metaTextClasses } from '../../internal/styles.js';
+/**
+ * The hairline itself. A border rather than a filled 1px box, so it lands on
+ * the device pixel grid the same way every other edge in the library does.
+ *
+ * Its thickness is read from a slot rather than from a `border-2`-style utility
+ * because a labelled divider draws the rule twice — the two stubs either side
+ * of the label — and one custom property set on the root keeps both the same
+ * without threading a value through each.
+ */
+const lineClasses = '[border-color:var(--p-rule-color)]';
+/** Turns `2` into `2px` and leaves `'0.5rem'` alone. */
+function toLength(value) {
+    return typeof value === 'number' ? `${value}px` : value;
+}
+/**
+ * How the line is split around an off-centre label: `[before, after]`. The short
+ * side is a fixed stub rather than a small flex ratio, so the label sits the
+ * same distance from the edge whatever the divider's length turns out to be.
+ */
+const stubClasses = {
+    horizontal: {
+        start: ['w-4 shrink-0', 'flex-1'],
+        center: ['flex-1', 'flex-1'],
+        end: ['flex-1', 'w-4 shrink-0']
+    },
+    vertical: {
+        start: ['h-4 shrink-0', 'flex-1'],
+        center: ['flex-1', 'flex-1'],
+        end: ['flex-1', 'h-4 shrink-0']
+    }
+};
+/** Space between the label and the line on either side of it. */
+const labelGapClasses = {
+    xs: 'gap-1.5',
+    sm: 'gap-2',
+    md: 'gap-3',
+    lg: 'gap-3.5',
+    xl: 'gap-4'
+};
+/**
+ * A rule between two things.
+ *
+ * With no children it is Base UI's `Separator` and nothing else — a real
+ * `role="separator"` with the right `aria-orientation`. With children the line
+ * breaks around the label.
+ *
+ * `separator` is not a name-from-content role, so a visible label does *not*
+ * become the accessible name on its own: a screen reader would announce a bare
+ * "separator" and read the word "OR" as loose text somewhere nearby. A string
+ * label is therefore copied into `aria-label`. Anything richer is left alone —
+ * only the caller knows which part of it is the name.
+ *
+ * There is no `variant` and no `elevation`, because a divider is not a surface.
+ * It is not made of glass, catches no light and casts no shadow — it is the
+ * absence of a surface, drawn.
+ */
+export const PlDivider = /* @__PURE__ */ React.forwardRef(function PlDivider({ orientation = 'horizontal', color, size = 'md', length, thickness, textAlign = 'center', className, style, children, ...props }, ref) {
+    const vertical = orientation === 'vertical';
+    const hasLabel = children !== undefined && children !== null && children !== false && children !== '';
+    const slots = {
+        '--p-rule-color': color ? `var(--plass-${color}-line)` : 'var(--plass-border)',
+        '--p-rule': toLength(thickness) ?? '1px'
+    };
+    // The long axis, and only when it was asked for: left alone, a horizontal
+    // divider is `w-full` and a vertical one stretches to its flex row, which are
+    // the two things a rule between two things should already do.
+    const span = toLength(length);
+    const sizing = span === undefined ? null : vertical ? { height: span } : { width: span };
+    const rootStyle = { ...slots, ...sizing, ...style };
+    if (!hasLabel) {
+        return (_jsx(Separator, { ref: ref, orientation: orientation, className: [
+                // The line is a single border edge; the box itself has no thickness,
+                // so a divider never adds a pixel of layout beyond the rule.
+                vertical
+                    ? `w-0 border-l [border-left-width:var(--p-rule)] ${span === undefined ? 'self-stretch' : ''}`
+                    : 'h-0 w-full border-t [border-top-width:var(--p-rule)]',
+                lineClasses,
+                className ?? ''
+            ]
+                .filter(Boolean)
+                .join(' '), style: rootStyle, ...props }));
+    }
+    const [before, after] = stubClasses[orientation][textAlign];
+    const edgeClasses = vertical
+        ? 'w-0 border-l [border-left-width:var(--p-rule)]'
+        : 'h-0 border-t [border-top-width:var(--p-rule)]';
+    return (_jsxs(Separator, { ref: ref, orientation: orientation, "aria-label": typeof children === 'string' ? children : undefined, className: [
+            'flex items-center',
+            vertical ? `w-auto flex-col ${span === undefined ? 'self-stretch' : ''}` : 'w-full',
+            labelGapClasses[size],
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), style: rootStyle, ...props, children: [_jsx("span", { "aria-hidden": "true", className: `${edgeClasses} ${before} ${lineClasses}` }), _jsx("span", { className: [
+                    'shrink-0 whitespace-nowrap text-(--plass-muted-fg)',
+                    metaTextClasses[size],
+                    // A vertical rule's label has to turn with it, or the line grows to
+                    // the width of the word and stops being a hairline.
+                    vertical ? '[writing-mode:vertical-rl]' : ''
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: children }), _jsx("span", { "aria-hidden": "true", className: `${edgeClasses} ${after} ${lineClasses}` })] }));
+});

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

@@ -0,0 +1,2 @@
+export { PlDivider } from './PlDivider.js';
+export type { PlDividerProps, PlDividerTextAlign } from './PlDivider.js';

package/dist/components/divider/index.js

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

package/dist/components/drawer/PlDrawer.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import type { PlassSide, PlassStyleProps } from '../../types.js';
+/**
+ * How the panel relates to the page.
+ *
+ * - `overlay` — it is opened, it floats over the page on a scrim, it holds the
+ *   focus, and it is dismissed. The navigation drawer behind a hamburger, the
+ *   filter panel beside a table.
+ * - `inline` — it is part of the layout and the page is laid out around it. No
+ *   scrim, no portal, no focus trap, nothing to dismiss. The sidebar that is
+ *   simply there.
+ *
+ * A separate axis from `variant`, which already means the weight of a surface
+ * across the whole library and would be a second spelling of nothing.
+ */
+export type PlDrawerMode = 'overlay' | 'inline';
+/**
+ * A drawer takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for `PlModal`'s reason: the three materials answer
+ * "how much does this surface assert itself against the page", and a panel that
+ * has taken an edge of the window has answered it. There is no `elevation`
+ * either — an `overlay` drawer floats and carries a shadow at the top of the
+ * ladder, an `inline` one is part of the layout and carries none, and neither
+ * is a decision worth offering.
+ */
+export interface PlDrawerProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /**
+     * Which edge the panel is attached to. Physical rather than logical, the way
+     * `PlassSide` is everywhere: a drawer along the top of the window is along the
+     * top in every writing direction.
+     * @default 'left'
+     */
+    side?: PlassSide;
+    /** @default 'overlay' */
+    mode?: PlDrawerMode;
+    /** The drawer is shown. Use with `onOpenChange` for a controlled drawer. */
+    open?: boolean;
+    /**
+     * Whether the drawer starts open, for an uncontrolled one.
+     *
+     * Defaults to `false` in `overlay` mode and `true` in `inline` mode, because
+     * a fixed sidebar that had to be opened before it appeared would not be a
+     * fixed sidebar.
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the drawer, wired up by Base UI.
+     *
+     * `overlay` only. An `inline` drawer is not opened — it is in the layout — so
+     * a trigger there would have nothing to do and is not rendered.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the element that names the drawer. */
+    title?: React.ReactNode;
+    /** A line under the title, and the drawer's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row, held against the foot of the panel while the body scrolls.
+     * Laid out end-aligned, so a pair of buttons needs no wrapper of its own —
+     * and `PlDrawerClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Scores the panel between the header, the body and the actions with a
+     * hairline instead of separating them with space. Worth turning on the moment
+     * the body scrolls: the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner. On in `overlay` mode, where the panel has taken
+     * the page and the way out should not have to be remembered; off in `inline`
+     * mode, where a × that closes a fixed sidebar with nothing to reopen it is a
+     * one-way door.
+     */
+    showClose?: boolean;
+    /** Accessible name of the × button. Never drawn. @default 'Close' */
+    closeLabel?: string;
+    /**
+     * How far the panel reaches in from its edge: a **width** for `left` and
+     * `right`, a **height** for `top` and `bottom`. Numbers are pixels.
+     *
+     * Left alone, a side panel takes the width its `size` implies and a top or
+     * bottom panel is as tall as what is in it, up to 85% of the window.
+     */
+    extent?: number | string;
+    /**
+     * Rounds the two corners on the edge that faces the page — the top and bottom
+     * of a side panel, the inner pair of a top or bottom one. The corners against
+     * the window edge are always square, because a corner cut off something that
+     * has no visible end is a corner cut off nothing.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside. `overlay` only.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking the scrim closes the drawer. Turn it off
+     * for the drawer that has to be answered — and then give it actions that
+     * answer it, because there will be no other way out. `overlay` only.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+export type PlDrawerCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIDialog.Close>;
+/**
+ * Closes the drawer it is inside.
+ *
+ * Exported for `PlModalClose`'s reason: an uncontrolled drawer has no `setOpen`
+ * for its Cancel button to call. It is an `overlay` drawer's button — an
+ * `inline` drawer is not a Base UI dialog and has nothing for this to talk to.
+ *
+ * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
+ * `<PlDrawerClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
+ */
+export declare const PlDrawerClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A panel attached to one edge of the window.
+ *
+ * Two things in one component, because they are the same panel: `overlay` is the
+ * drawer you open — a scrim, a focus trap, Escape — and `inline` is the drawer
+ * that is simply part of the page. Everything else about them is identical,
+ * which is exactly why they should not be two components a caller has to switch
+ * between when a sidebar becomes a hamburger at a breakpoint.
+ *
+ * The sections are props rather than compound sub-components, as on `PlCard` and
+ * `PlModal`: the arrangement is fixed — heading, description, body, actions —
+ * and what a caller wants to decide is what goes in each slot. The body is the
+ * only part that scrolls, so the heading and the actions stay put.
+ *
+ * In `overlay` mode Base UI owns everything hard about it: the focus trap, the
+ * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
+ * focus to the trigger, and the inert page behind.
+ */
+export declare function PlDrawer({ side, mode, size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/PlDrawer.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import { CloseIcon } from '../../internal/icons.js';
+import { cx, focusRingClasses, glassClasses, hasContent, metaTextClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetLineClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses, surfaceSlots } from '../../internal/styles.js';
+/**
+ * How wide a `left` or `right` panel is when nothing says otherwise.
+ *
+ * Its own ladder rather than `PlModal`'s `maxWidth`, and deliberately narrower
+ * at every step: a modal is measured by how long a line of text is comfortable
+ * inside it, and a drawer is measured by how much of the window it is willing
+ * to take away from what it is a drawer *for*.
+ *
+ * A `top` or `bottom` panel has no entry here on purpose — its extent is its
+ * content, capped at 85% of the window, because a bottom sheet holding three
+ * rows should be three rows tall.
+ */
+const extentClasses = {
+    xs: 'w-56',
+    sm: 'w-64',
+    md: 'w-80',
+    lg: 'w-96',
+    xl: 'w-[28rem]'
+};
+/**
+ * The corners on the free edge, written out per side and per step because
+ * Tailwind only ever sees class names that appear literally in the source.
+ */
+const roundedClasses = {
+    left: {
+        xs: 'rounded-r-(--plass-radius-xs)',
+        sm: 'rounded-r-(--plass-radius-sm)',
+        md: 'rounded-r-(--plass-radius-md)',
+        lg: 'rounded-r-(--plass-radius-lg)',
+        xl: 'rounded-r-(--plass-radius-xl)'
+    },
+    right: {
+        xs: 'rounded-l-(--plass-radius-xs)',
+        sm: 'rounded-l-(--plass-radius-sm)',
+        md: 'rounded-l-(--plass-radius-md)',
+        lg: 'rounded-l-(--plass-radius-lg)',
+        xl: 'rounded-l-(--plass-radius-xl)'
+    },
+    top: {
+        xs: 'rounded-b-(--plass-radius-xs)',
+        sm: 'rounded-b-(--plass-radius-sm)',
+        md: 'rounded-b-(--plass-radius-md)',
+        lg: 'rounded-b-(--plass-radius-lg)',
+        xl: 'rounded-b-(--plass-radius-xl)'
+    },
+    bottom: {
+        xs: 'rounded-t-(--plass-radius-xs)',
+        sm: 'rounded-t-(--plass-radius-sm)',
+        md: 'rounded-t-(--plass-radius-md)',
+        lg: 'rounded-t-(--plass-radius-lg)',
+        xl: 'rounded-t-(--plass-radius-xl)'
+    }
+};
+/**
+ * The hairline on the free edge only. A border all round would draw a line
+ * along the window's own edge, where there is nothing on the other side of it
+ * to be separated from.
+ */
+const edgeClasses = {
+    left: 'border-r',
+    right: 'border-l',
+    top: 'border-b',
+    bottom: 'border-t'
+};
+/** Which end of the viewport the panel is pushed to, and along which axis. */
+const viewportClasses = {
+    left: 'flex-row justify-start',
+    right: 'flex-row justify-end',
+    top: 'flex-col justify-start',
+    bottom: 'flex-col justify-end'
+};
+/**
+ * The sheet.
+ *
+ * Opacity only, exactly as on `PlModal`. A drawer that slid in would be
+ * dragging its own text across the screen for the length of the transition, and
+ * a panel is nothing but text and controls — this is the case the no-transform
+ * rule was written for, not the exception to it. What says the panel came from
+ * an edge is that it is *attached* to one: square against the window, cut on the
+ * free side.
+ */
+const panelClasses = /* @__PURE__ */ [
+    glassClasses,
+    'relative flex flex-col overflow-hidden',
+    'text-(--plass-fg) bg-(--plass-glass-press)',
+    '[border-color:var(--plass-glass-line)]',
+    '[outline:none]'
+].join(' ');
+const overlayShadowClasses = '[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]';
+const inlineShadowClasses = '[box-shadow:var(--plass-gloss-glass)]';
+const fadeClasses = /* @__PURE__ */ [
+    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
+    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
+].join(' ');
+const backdropClasses = /* @__PURE__ */ [
+    'fixed inset-0 z-50 bg-(--plass-scrim)',
+    '[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]',
+    fadeClasses
+].join(' ');
+/** The × in the corner, shared by both modes. */
+const closeButtonClasses = /* @__PURE__ */ [
+    'flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center',
+    'rounded-full text-(--plass-muted-fg)',
+    '[&_svg]:size-[1.1em] [&_svg]:shrink-0',
+    '[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]',
+    'hover:bg-(--p-soft) hover:text-(--plass-fg)',
+    focusRingClasses
+].join(' ');
+/**
+ * Closes the drawer it is inside.
+ *
+ * Exported for `PlModalClose`'s reason: an uncontrolled drawer has no `setOpen`
+ * for its Cancel button to call. It is an `overlay` drawer's button — an
+ * `inline` drawer is not a Base UI dialog and has nothing for this to talk to.
+ *
+ * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
+ * `<PlDrawerClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
+ */
+export const PlDrawerClose = BaseUIDialog.Close;
+/**
+ * A panel attached to one edge of the window.
+ *
+ * Two things in one component, because they are the same panel: `overlay` is the
+ * drawer you open — a scrim, a focus trap, Escape — and `inline` is the drawer
+ * that is simply part of the page. Everything else about them is identical,
+ * which is exactly why they should not be two components a caller has to switch
+ * between when a sidebar becomes a hamburger at a breakpoint.
+ *
+ * The sections are props rather than compound sub-components, as on `PlCard` and
+ * `PlModal`: the arrangement is fixed — heading, description, body, actions —
+ * and what a caller wants to decide is what goes in each slot. The body is the
+ * only part that scrolls, so the heading and the actions stay put.
+ *
+ * In `overlay` mode Base UI owns everything hard about it: the focus trap, the
+ * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
+ * focus to the trigger, and the inert page behind.
+ */
+export function PlDrawer({ side = 'left', mode = 'overlay', size = 'md', color = 'primary', density = 'default', open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers = false, showClose, closeLabel = 'Close', extent, rounded = true, modal = true, dismissible = true, className, style, children, ...props }) {
+    const overlay = mode === 'overlay';
+    const along = side === 'left' || side === 'right';
+    const showCloseButton = showClose ?? overlay;
+    const insetX = sheetPaddingXClasses[density][size];
+    const insetY = sheetPaddingYClasses[density][size];
+    // With dividers the lines have to reach both edges, so the sheet gives up its
+    // padding and every section takes it on instead — the same trade PlCard makes.
+    const sectionClasses = dividers ? `${insetX} ${insetY}` : insetX;
+    const hasHeader = hasContent(title) || hasContent(description);
+    const hasActions = hasContent(actions);
+    const sizeStyle = extent === undefined
+        ? null
+        : { [along ? 'width' : 'height']: typeof extent === 'number' ? `${extent}px` : extent };
+    const panel = cx(panelClasses, sheetBodyClasses[size], edgeClasses[side], rounded ? roundedClasses[side][size] : '', overlay ? overlayShadowClasses : inlineShadowClasses, overlay ? fadeClasses : '', along
+        ? `h-full max-w-full ${extent === undefined ? extentClasses[size] : ''}`
+        : `w-full ${extent === undefined ? 'max-h-[85%]' : ''}`, dividers ? '' : `${insetY} ${sheetSectionGapClasses[size]}`, className);
+    // Base UI's parts carry the `aria-labelledby` / `aria-describedby` wiring an
+    // overlay drawer needs. An inline one is not a dialog and needs none, so it
+    // gets the plain tags rather than a dialog's parts outside a dialog.
+    const TitleTag = overlay ? BaseUIDialog.Title : 'h2';
+    const DescriptionTag = overlay ? BaseUIDialog.Description : 'p';
+    const contents = (_jsxs(_Fragment, { children: [hasHeader || showCloseButton ? (_jsxs("div", { className: cx('flex shrink-0 items-start gap-3', sectionClasses), children: [_jsxs("div", { className: cx('flex min-w-0 flex-1 flex-col', sheetHeaderGapClasses[size]), children: [hasContent(title) ? (_jsx(TitleTag, { className: cx('m-0 font-semibold', sheetTitleClasses[size]), children: title })) : null, hasContent(description) ? (_jsx(DescriptionTag, { className: cx('m-0 text-(--plass-muted-fg)', metaTextClasses[size]), children: description })) : null] }), showCloseButton ? (overlay ? (_jsx(BaseUIDialog.Close, { "aria-label": closeLabel, className: closeButtonClasses, children: _jsx(CloseIcon, {}) })) : (_jsx("button", { type: "button", "aria-label": closeLabel, className: closeButtonClasses, onClick: () => onOpenChange?.(false), children: _jsx(CloseIcon, {}) }))) : null] })) : null, hasContent(children) ? (_jsx("div", { className: cx('min-h-0 flex-1 overflow-y-auto overscroll-contain', sectionClasses, dividers && (hasHeader || showCloseButton) ? sheetLineClasses : '', 
+                // A scroll container clips at its padding box and a focus ring is
+                // drawn outside the control that owns it, so a field at the top or
+                // bottom of an unruled body would have its ring sliced off. The
+                // padding is room for the ring and the negative margin hands the
+                // space straight back, so nothing on the sheet moves.
+                dividers ? '' : '-my-1 py-1'), children: children })) : null, hasActions ? (_jsx("div", { className: cx('flex shrink-0 flex-wrap items-center justify-end gap-2', sectionClasses, dividers ? sheetLineClasses : ''), children: actions })) : null] }));
+    if (!overlay) {
+        // An inline drawer is in the flow, so "closed" is "not in the layout".
+        // There is nothing to animate on the way out: the page around it is what
+        // moves, and moving the page is not this component's to do.
+        if (!(open ?? defaultOpen ?? true)) {
+            return null;
+        }
+        return (_jsx("div", { className: panel, style: { ...surfaceSlots(color, 0), ...sizeStyle, ...style }, ...props, children: contents }));
+    }
+    return (_jsxs(BaseUIDialog.Root, { open: open, defaultOpen: defaultOpen, modal: modal, disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+            // `disablePointerDismissal` covers the click on the scrim; Escape has no
+            // prop of its own, so it is cancelled here by the reason it arrives
+            // with.
+            if (!dismissible && !next && details.reason === 'escape-key') {
+                details.cancel();
+                return;
+            }
+            onOpenChange?.(next);
+        }, children: [trigger ? _jsx(BaseUIDialog.Trigger, { render: trigger }) : null, _jsxs(BaseUIDialog.Portal, { children: [_jsx(BaseUIDialog.Backdrop, { className: `plass-portal ${backdropClasses}` }), _jsx(BaseUIDialog.Viewport, { className: cx('plass-portal fixed inset-0 z-50 flex', viewportClasses[side]), children: _jsx(BaseUIDialog.Popup, { className: panel, style: { ...surfaceSlots(color, 3), ...sizeStyle, ...style }, ...props, children: contents }) })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export { PlDrawer, PlDrawerClose } from './PlDrawer.js';
+export type { PlDrawerCloseProps, PlDrawerMode, PlDrawerProps } from './PlDrawer.js';

package/dist/components/drawer/index.js

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

package/dist/components/file-picker/PlFilePicker.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/** Why a file was turned away. One reason per file, in the order they are checked. */
+export type PlFileRejectionReason = 'type' | 'size' | 'count';
+export interface PlFileRejection {
+    file: File;
+    reason: PlFileRejectionReason;
+}
+export interface PlFilePickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'title' | 'children'> {
+    /**
+     * Drop shadow depth. `0` is the default — a dropzone is cut into the page
+     * rather than floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Which files the browser's own picker offers, in the `accept` grammar —
+     * `'image/*,.pdf'`. Dropped files are checked against it too, which the
+     * attribute alone does not do.
+     */
+    accept?: string;
+    /** Whether more than one file may be chosen. @default false */
+    multiple?: boolean;
+    /** The largest a single file may be, in bytes. */
+    maxSize?: number;
+    /**
+     * How many files may be held at once. Implies `multiple`, and is checked
+     * against what is already chosen rather than against one drop.
+     */
+    maxFiles?: number;
+    /** The chosen files. Use with `onFilesChange` for a controlled picker. */
+    value?: readonly File[];
+    /** The initially chosen files, for an uncontrolled one. */
+    defaultValue?: readonly File[];
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Called with everything that was turned away, and why. Without it a rejected
+     * file disappears silently, which is the single worst thing a dropzone does.
+     */
+    onReject?: (rejections: PlFileRejection[]) => void;
+    /** Label above the box. */
+    label?: React.ReactNode;
+    /** Helper text below the box. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the picker 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;
+    /** The line inside the box. Defaults to an English sentence. */
+    title?: React.ReactNode;
+    /** The line under it — what is accepted, how big, how many. */
+    hint?: React.ReactNode;
+    /** The glyph above the title. Pass `null` for a box with no picture in it. */
+    icon?: React.ReactNode;
+    /**
+     * Lists the chosen files under the box, each with a way to remove it.
+     * @default true
+     */
+    showList?: boolean;
+    /** Accessible name of a file's remove button. Receives the file's name. */
+    removeLabel?: (name: string) => string;
+    /** Stretches to the width of the container. @default true */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The files are shown but cannot be added to or removed. */
+    readOnly?: boolean;
+    /** Whether a file must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    id?: string;
+}
+/**
+ * `1.4 MB`, in the units a person reading a file list expects.
+ *
+ * Base 1000 rather than 1024, and `MB` rather than `MiB`: it is the number
+ * every operating system's file browser shows, and a picker that disagrees with
+ * the Finder about how big the file is has picked a fight it cannot win.
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * A box you drop files on, or click to open the file dialog.
+ *
+ * There is no Base UI primitive under this, and the fallback the library allows
+ * — plain React and DOM — is the right one: a dropzone is a `<div>` listening
+ * for four drag events and an `<input type="file">` it clicks for you. There is
+ * no popup to position, no focus to trap and no roving anything.
+ *
+ * What that leaves is the part every hand-rolled dropzone gets wrong. The drag
+ * counter is one: `dragenter` and `dragleave` both fire as the pointer crosses
+ * a *child* of the zone, so a zone that toggles a boolean flickers the whole
+ * time a file is dragged across its own contents. Counting them is the fix. The
+ * other is `accept`, which the browser enforces on its own dialog and never on
+ * a drop, so a dropzone that only sets the attribute accepts anything the
+ * moment a file arrives by drag.
+ *
+ * The shell is a `<div>` and the pressable area inside it is a real `<button>`,
+ * with the file list outside that button — the remove buttons cannot be nested
+ * inside the browse button.
+ */
+export declare const PlFilePicker: React.ForwardRefExoticComponent<PlFilePickerProps & React.RefAttributes<HTMLInputElement>>;