plass-ui 1.0.0 → 1.0.2

package/dist/components/drawer/PlDrawer.js

@@ -1,190 +1 @@
-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 }) })] })] }));
-}
+"use client";import{jsx as s,jsxs as l,Fragment as e}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{CloseIcon as a}from"../../internal/icons.js";import{cx as o,focusRingClasses as d,glassClasses as i,hasContent as t,metaTextClasses as n,sheetBodyClasses as u,sheetHeaderGapClasses as p,sheetLineClasses as m,sheetPaddingXClasses as c,sheetPaddingYClasses as x,sheetSectionGapClasses as f,sheetTitleClasses as g,surfaceSlots as h}from"../../internal/styles.js";const b={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},v={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)"}},y={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},w={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},j=/* @__PURE__ */[i,"relative flex flex-col overflow-hidden","text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[outline:none]"].join(" "),N=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["fixed inset-0 z-50 bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",N].join(" "),C=/* @__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)",d].join(" ");export const PlDrawerClose=r.Close;export function PlDrawer({side:d="left",mode:i="overlay",size:_="md",color:$="primary",density:z="default",open:D,defaultOpen:P,onOpenChange:O,trigger:T,title:B,description:F,actions:L,dividers:R=!1,showClose:V,closeLabel:q="Close",extent:A,rounded:E=!0,modal:G=!0,dismissible:H=!0,className:I,style:J,children:K,...M}){const Q="overlay"===i,S="left"===d||"right"===d,U=V??Q,W=c[z][_],X=x[z][_],Y=R?`${W} ${X}`:W,Z=t(B)||t(F),ss=t(L),ls=void 0===A?null:{[S?"width":"height"]:"number"==typeof A?`${A}px`:A},es=o(j,u[_],y[d],E?v[d][_]:"",Q?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",Q?N:"",S?`h-full max-w-full ${void 0===A?b[_]:""}`:"w-full "+(void 0===A?"max-h-[85%]":""),R?"":`${X} ${f[_]}`,I),rs=Q?r.Title:"h2",as=Q?r.Description:"p",os=l(e,{children:[Z||U?l("div",{className:o("flex shrink-0 items-start gap-3",Y),children:[l("div",{className:o("flex min-w-0 flex-1 flex-col",p[_]),children:[t(B)?s(rs,{className:o("m-0 font-semibold",g[_]),children:B}):null,t(F)?s(as,{className:o("m-0 text-(--plass-muted-fg)",n[_]),children:F}):null]}),U?Q?s(r.Close,{"aria-label":q,className:C,children:s(a,{})}):s("button",{type:"button","aria-label":q,className:C,onClick:()=>O?.(!1),children:s(a,{})}):null]}):null,t(K)?s("div",{className:o("min-h-0 flex-1 overflow-y-auto overscroll-contain",Y,R&&(Z||U)?m:"",R?"":"-my-1 py-1"),children:K}):null,ss?s("div",{className:o("flex shrink-0 flex-wrap items-center justify-end gap-2",Y,R?m:""),children:L}):null]});return Q?l(r.Root,{open:D,defaultOpen:P,modal:G,disablePointerDismissal:!H,onOpenChange:(s,l)=>{H||s||"escape-key"!==l.reason?O?.(s):l.cancel()},children:[T?s(r.Trigger,{render:T}):null,l(r.Portal,{children:[s(r.Backdrop,{className:`plass-portal ${k}`}),s(r.Viewport,{className:o("plass-portal fixed inset-0 z-50 flex",w[d]),children:s(r.Popup,{className:es,style:{...h($,3),...ls,...J},...M,children:os})})]})]}):D??P??!0?s("div",{className:es,style:{...h($,0),...ls,...J},...M,children:os}):null}

package/dist/components/drawer/index.js

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

package/dist/components/file-picker/PlFilePicker.js

@@ -1,274 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { CloseIcon } from '../../internal/icons.js';
-import { controlTextLeadingClasses, disabledClasses, focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, readOnlyFilterClasses, sheetTitleClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/**
- * The box's inner padding. Its own ladder rather than the sheet's, because a
- * dropzone is sized by the gesture it has to catch rather than by what is
- * written in it: a target the height of one line of text is a target you miss.
- */
-const zonePaddingClasses = {
-    default: { xs: 'p-4', sm: 'p-5', md: 'p-6', lg: 'p-8', xl: 'p-10' },
-    compact: { xs: 'p-2', sm: 'p-3', md: 'p-4', lg: 'p-5', xl: 'p-6' }
-};
-/**
- * The three materials, said the way a *container* says them — the sheet is
- * never dyed. What is dropped on it is other people's content.
- *
- * The dashed edge is the one thing all three share, and the one place the
- * library draws a line that is not solid. It is not decoration: a dashed
- * rectangle is the established sign for "this area accepts a drop", and a
- * dropzone that looks like a PlCard is a PlCard nobody tries to drop on.
- *
- * The edge is neutral at rest and takes the family only once the pointer is on
- * it, which is the same arrangement a `glass` PlButton has: the colour is what
- * happens when you engage with the thing, not what the thing is.
- */
-const zoneRestClasses = {
-    solid: /* @__PURE__ */ [
-        glassClasses,
-        'border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)',
-        '[border-color:var(--plass-border)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)',
-        '[border-color:var(--plass-border)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]'
-};
-const zoneHoverClasses = {
-    solid: 'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]',
-    glass: 'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]',
-    ghost: 'hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]'
-};
-/**
- * While a file is over the box.
- *
- * Colour and edge only, and the same two the hover state already uses, one step
- * further along — a dropzone that grows or lifts under the pointer moves the
- * target while the reader is aiming at it.
- */
-const zoneOverClasses = 'bg-(--p-soft-hover) [border-color:var(--p-ring)]';
-function UploadIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-}
-/**
- * `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 function formatFileSize(bytes) {
-    if (bytes < 1000) {
-        return `${bytes} B`;
-    }
-    const units = ['kB', 'MB', 'GB', 'TB'];
-    let value = bytes / 1000;
-    let unit = 0;
-    while (value >= 1000 && unit < units.length - 1) {
-        value /= 1000;
-        unit += 1;
-    }
-    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
-}
-/**
- * Whether a file matches an `accept` string.
- *
- * The browser applies `accept` to its own picker and to nothing else, so a file
- * that arrives by drag has never been checked against it. This is that check:
- * the same three forms the attribute takes — `.ext`, `type/subtype`, `type/*`.
- */
-function matchesAccept(file, accept) {
-    const name = file.name.toLowerCase();
-    const type = file.type.toLowerCase();
-    return accept
-        .split(',')
-        .map((entry) => entry.trim().toLowerCase())
-        .filter(Boolean)
-        .some((entry) => {
-        if (entry.startsWith('.')) {
-            return name.endsWith(entry);
-        }
-        if (entry.endsWith('/*')) {
-            return type.startsWith(entry.slice(0, -1));
-        }
-        return type === entry;
-    });
-}
-/**
- * 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 const PlFilePicker = /* @__PURE__ */ React.forwardRef(function PlFilePicker({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, accept, multiple = false, maxSize, maxFiles, value, defaultValue, onFilesChange, onReject, label, description, error, invalid, title, hint, icon, showList = true, removeLabel = (name) => `Remove ${name}`, fullWidth = true, disabled = false, readOnly = false, required = false, name, id, className, style, ...props }, ref) {
-    const inputRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => inputRef.current);
-    const [uncontrolled, setUncontrolled] = React.useState(() => [...(defaultValue ?? [])]);
-    // The copy is what stops a caller's array being the one held here, and it
-    // has to be memoised: the handlers below close over this list, and a fresh
-    // array every render would rebuild all of them every render.
-    const files = React.useMemo(() => (value ? [...value] : uncontrolled), [value, uncontrolled]);
-    // `dragenter`/`dragleave` fire for every child the pointer crosses, so a
-    // boolean flickers the whole time a file is over the box. The depth counter
-    // is the only thing that survives a zone with content in it.
-    const dragDepth = React.useRef(0);
-    const [over, setOver] = React.useState(false);
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    // Invalid re-points the whole slot family at `danger`, so the edge, the ring
-    // and the message all turn over together — the same wiring PlTextField uses.
-    const family = isInvalid ? 'danger' : color;
-    const inert = disabled || readOnly;
-    const descriptionId = React.useId();
-    const commit = React.useCallback((next) => {
-        if (!value) {
-            setUncontrolled(next);
-        }
-        onFilesChange?.(next);
-    }, [onFilesChange, value]);
-    /**
-     * Sorts an incoming batch into kept and rejected.
-     *
-     * The count is checked against what is *already* held rather than against
-     * the batch, which is the difference between "you may drop five files" and
-     * "you may end up with five files" — only the second is what `maxFiles`
-     * means.
-     */
-    const accepting = React.useCallback((incoming) => {
-        const kept = [];
-        const rejections = [];
-        const room = multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1;
-        const held = multiple ? files.length : 0;
-        for (const file of incoming) {
-            if (accept && !matchesAccept(file, accept)) {
-                rejections.push({ file, reason: 'type' });
-            }
-            else if (maxSize !== undefined && file.size > maxSize) {
-                rejections.push({ file, reason: 'size' });
-            }
-            else if (held + kept.length >= room) {
-                rejections.push({ file, reason: 'count' });
-            }
-            else {
-                kept.push(file);
-            }
-        }
-        return { kept, rejections };
-    }, [accept, files.length, maxFiles, maxSize, multiple]);
-    const add = React.useCallback((incoming) => {
-        const { kept, rejections } = accepting(incoming);
-        if (rejections.length > 0) {
-            onReject?.(rejections);
-        }
-        if (kept.length > 0) {
-            commit(multiple ? [...files, ...kept] : kept);
-        }
-    }, [accepting, commit, files, multiple, onReject]);
-    const browse = () => {
-        if (inert) {
-            return;
-        }
-        // Cleared first, so choosing the same file twice in a row still fires
-        // `change` — the input holds its value otherwise and the second pick is
-        // silently dropped.
-        if (inputRef.current) {
-            inputRef.current.value = '';
-            inputRef.current.click();
-        }
-    };
-    const zoneClassNames = [
-        'flex w-full flex-col items-center justify-center text-center',
-        'cursor-pointer select-none',
-        zonePaddingClasses[density][size],
-        radiusClasses[size],
-        gapClasses[size],
-        transitionClasses,
-        iconClasses,
-        focusRingClasses,
-        // An if/else rather than stacked variants: two Tailwind classes of equal
-        // specificity resolve by their order in the generated stylesheet.
-        disabled
-            ? `${disabledClasses[variant]} border-2 border-dashed`
-            : readOnly
-                ? `${zoneRestClasses[variant]} ${readOnlyFilterClasses} cursor-default`
-                : zoneRestClasses[variant],
-        !inert ? zoneHoverClasses[variant] : '',
-        over && !inert ? zoneOverClasses : ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsxs("div", { className: [
-            'flex-col align-top',
-            stackGapClasses[size],
-            fullWidth ? 'flex w-full' : 'inline-flex',
-            className ?? ''
-        ]
-            .filter(Boolean)
-            .join(' '), style: { ...surfaceSlots(family, elevation), ...style }, ...props, children: [hasContent(label) ? (_jsx("span", { className: [
-                    metaTextClasses[size],
-                    'font-semibold',
-                    disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'
-                ].join(' '), children: label })) : null, _jsxs("div", { className: "flex w-full flex-col", onDragEnter: (event) => {
-                    if (inert) {
-                        return;
-                    }
-                    event.preventDefault();
-                    dragDepth.current += 1;
-                    setOver(true);
-                }, onDragOver: (event) => {
-                    if (inert) {
-                        return;
-                    }
-                    // Without this the browser navigates to the file instead of
-                    // dropping it, which is the default and is never what anybody wants.
-                    event.preventDefault();
-                    event.dataTransfer.dropEffect = 'copy';
-                }, onDragLeave: () => {
-                    if (inert) {
-                        return;
-                    }
-                    dragDepth.current = Math.max(0, dragDepth.current - 1);
-                    if (dragDepth.current === 0) {
-                        setOver(false);
-                    }
-                }, onDrop: (event) => {
-                    if (inert) {
-                        return;
-                    }
-                    event.preventDefault();
-                    dragDepth.current = 0;
-                    setOver(false);
-                    add(Array.from(event.dataTransfer.files));
-                }, children: [_jsxs("button", { type: "button", id: id, disabled: disabled, "aria-describedby": hasContent(description) || hasError ? descriptionId : undefined, "aria-invalid": isInvalid || undefined, className: zoneClassNames, onClick: browse, children: [icon === undefined ? (_jsx("span", { className: "flex items-center text-(--p-accent) [&_svg]:size-[1.8em]", children: _jsx(UploadIcon, {}) })) : hasContent(icon) ? (_jsx("span", { className: "flex items-center text-(--p-accent) [&_svg]:size-[1.8em]", children: icon })) : null, _jsx("span", { className: `font-semibold ${sheetTitleClasses[size]}`, children: title ?? 'Drop files here, or click to browse' }), hasContent(hint) ? (_jsx("span", { className: `text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: hint })) : null] }), _jsx("input", { ref: inputRef, type: "file", name: name, accept: accept, multiple: multiple, required: required && files.length === 0, disabled: inert, tabIndex: -1, "aria-hidden": "true", className: "absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]", onChange: (event) => add(Array.from(event.target.files ?? [])) })] }), showList && files.length > 0 ? (_jsx("ul", { role: "list", className: `flex w-full flex-col ${stackGapClasses[size]} m-0 list-none p-0`, children: files.map((file, index) => (_jsxs("li", { className: [
-                        'flex w-full items-center gap-2 px-2 py-1.5',
-                        radiusClasses.xs,
-                        controlTextLeadingClasses[size],
-                        'bg-(--p-soft) text-(--plass-fg)'
-                    ].join(' '), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: file.name }), _jsx("span", { className: `shrink-0 text-(--plass-muted-fg) tabular-nums ${metaTextClasses[size]}`, children: formatFileSize(file.size) }), inert ? null : (_jsx("button", { type: "button", "aria-label": removeLabel(file.name), className: [
-                                'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full',
-                                'size-[1.3em] text-(--plass-muted-fg) opacity-70',
-                                '[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]',
-                                '[&_svg]:size-[0.9em]',
-                                'hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100',
-                                focusRingClasses
-                            ].join(' '), onClick: () => commit(files.filter((_, at) => at !== index)), children: _jsx(CloseIcon, {}) }))] }, `${file.name}-${file.size}-${file.lastModified}-${index}`))) })) : null, hasContent(description) && !hasError ? (_jsx("span", { id: descriptionId, className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null, hasError ? (_jsx("span", { id: descriptionId, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }));
-});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{CloseIcon as l}from"../../internal/icons.js";import{controlTextLeadingClasses as t,disabledClasses as a,focusRingClasses as o,gapClasses as n,glassClasses as i,hasContent as c,iconClasses as d,metaTextClasses as p,radiusClasses as u,readOnlyFilterClasses as f,sheetTitleClasses as m,stackGapClasses as h,surfaceSlots as v,transitionClasses as g}from"../../internal/styles.js";const b={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},x={solid:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},y={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:i="glass",size:k="md",color:N="primary",density:j="default",elevation:$=0,accept:w,multiple:z=!1,maxSize:C,maxFiles:I,value:L,defaultValue:B,onFilesChange:D,onReject:F,label:M,description:_,error:W,invalid:S,title:P,hint:R,icon:T,showList:A=!0,removeLabel:V=e=>`Remove ${e}`,fullWidth:E=!0,disabled:O=!1,readOnly:q=!1,required:U=!1,name:G,id:H,className:Y,style:J,...K},Q){const X=s.useRef(null);s.useImperativeHandle(Q,()=>X.current);const[Z,ee]=s.useState(()=>[...B??[]]),re=s.useMemo(()=>L?[...L]:Z,[L,Z]),se=s.useRef(0),[le,te]=s.useState(!1),ae=c(W),oe=S??ae,ne=oe?"danger":N,ie=O||q,ce=s.useId(),de=s.useCallback(e=>{L||ee(e),D?.(e)},[D,L]),pe=s.useCallback(e=>{const r=[],s=[],l=z?I??Number.POSITIVE_INFINITY:1,t=z?re.length:0;for(const a of e)w&&!matchesAccept(a,w)?s.push({file:a,reason:"type"}):void 0!==C&&a.size>C?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[w,re.length,I,C,z]),ue=s.useCallback(e=>{const{kept:r,rejections:s}=pe(e);s.length>0&&F?.(s),r.length>0&&de(z?[...re,...r]:r)},[pe,de,re,z,F]),fe=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",b[j][k],u[k],n[k],g,d,o,O?`${a[i]} border-2 border-dashed`:q?`${x[i]} ${f} cursor-default`:x[i],ie?"":y[i],le&&!ie?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",h[k],E?"flex w-full":"inline-flex",Y??""].filter(Boolean).join(" "),style:{...v(ne,$),...J},...K,children:[c(M)?e("span",{className:[p[k],"font-semibold",O?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:M}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{ie||(e.preventDefault(),se.current+=1,te(!0))},onDragOver:e=>{ie||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{ie||(se.current=Math.max(0,se.current-1),0===se.current&&te(!1))},onDrop:e=>{ie||(e.preventDefault(),se.current=0,te(!1),ue(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:H,disabled:O,"aria-describedby":c(_)||ae?ce:void 0,"aria-invalid":oe||void 0,className:fe,onClick:()=>{ie||X.current&&(X.current.value="",X.current.click())},children:[void 0===T?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):c(T)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:T}):null,e("span",{className:`font-semibold ${m[k]}`,children:P??"Drop files here, or click to browse"}),c(R)?e("span",{className:`text-(--plass-muted-fg) ${p[k]}`,children:R}):null]}),e("input",{ref:X,type:"file",name:G,accept:w,multiple:z,required:U&&0===re.length,disabled:ie,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ue(Array.from(e.target.files??[]))})]}),A&&re.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${h[k]} m-0 list-none p-0`,children:re.map((s,a)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",u.xs,t[k],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${p[k]}`,children:formatFileSize(s.size)}),ie?null:e("button",{type:"button","aria-label":V(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",o].join(" "),onClick:()=>de(re.filter((e,r)=>r!==a)),children:e(l,{})})]},`${s.name}-${s.size}-${s.lastModified}-${a}`))}):null,c(_)&&!ae?e("span",{id:ce,className:`${p[k]} text-(--plass-muted-fg)`,children:_}):null,ae?e("span",{id:ce,className:`${p[k]} text-(--p-accent)`,children:W}):null]})});

package/dist/components/file-picker/index.js

@@ -1 +1 @@
-export { PlFilePicker, formatFileSize } from './PlFilePicker.js';
+export{PlFilePicker,formatFileSize}from"./PlFilePicker.js";