plass-ui 0.0.1 → 1.0.0

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

@@ -0,0 +1,274 @@
+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] }));
+});

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

@@ -0,0 +1,2 @@
+export { PlFilePicker, formatFileSize } from './PlFilePicker.js';
+export type { PlFilePickerProps, PlFileRejection, PlFileRejectionReason } from './PlFilePicker.js';

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

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

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
+/** A destination's value. The same restraint `PlBottomNavigation` puts on its own. */
+export type PlFloatingBottomNavigationValue = string | number;
+export interface PlFloatingBottomNavigationProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * What the capsule is made of.
+     *
+     * `glass` is the default and the whole point: a clear sheet over a blurred
+     * backdrop with a hairline around it, floating clear of the page. `solid` is
+     * the same sheet at its most opaque, for a bar that sits over photography.
+     * `ghost` has no capsule at all — the discs float on their own.
+     * @default 'glass'
+     */
+    variant?: PlassStyleProps['variant'];
+    /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
+    value?: PlFloatingBottomNavigationValue | null;
+    /** Which starts current, for an uncontrolled bar. */
+    defaultValue?: PlFloatingBottomNavigationValue | null;
+    onValueChange?: (value: PlFloatingBottomNavigationValue) => void;
+    /**
+     * How the bar sits in the page's scroll.
+     * @default 'fixed'
+     */
+    position?: PlassPosition;
+    /**
+     * Keeps the bar clear of the home indicator on a phone, by adding
+     * `env(safe-area-inset-bottom)` to the gap under it.
+     * @default true
+     */
+    safeArea?: boolean;
+    /**
+     * Drop shadow depth. `2`, against the `0` a bar attached to the window edge
+     * takes.
+     *
+     * That is not an inconsistency: this bar is defined by **not** being part of
+     * the page. Every other sheet in the library rests on the page and earns its
+     * separation from the glass edge, so a shadow is opt-in; this one hovers over
+     * whatever is underneath it, and a capsule lying flat on the content it is
+     * floating over reads as a mistake.
+     * @default 2
+     */
+    elevation?: PlassElevation;
+    /** Every destination stops answering. */
+    disabled?: boolean;
+    /** The name the bar is announced by — "Main", "Sections". */
+    label?: string;
+    /**
+     * Renders something other than a `<nav>`. Rarely what you want here: a row of
+     * destinations is navigation.
+     */
+    render?: useRender.RenderProp;
+    /** The `PlFloatingBottomNavigationItem`s. */
+    children?: React.ReactNode;
+}
+export interface PlFloatingBottomNavigationItemProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {
+    /** Identifies the destination. What `onValueChange` reports. */
+    value: PlFloatingBottomNavigationValue;
+    /** The glyph. It is the whole of what a reader sees. */
+    icon?: React.ReactNode;
+    /** Renders the item as a link rather than as a button. */
+    href?: string;
+    /** Unavailable, but still part of the set. */
+    disabled?: boolean;
+    /**
+     * The destination's name.
+     *
+     * **Never drawn, always read.** A row of glyphs with no names is a row of
+     * unnamed buttons, which is the defect this prop exists to make impossible.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A row of round destinations floating clear of the bottom edge of the window.
+ *
+ * The other half of `PlBottomNavigation`, and a different object rather than a
+ * variant of one: that bar is **attached** to the edge of the window — full
+ * width, a hairline against the content, its sheet running under the home
+ * indicator — and this one is **not part of the page at all**. Everything that
+ * follows comes from that one difference: the capsule, the gap under it, the
+ * shadow it defaults to, and the pill corners it is allowed.
+ *
+ * Every destination is a disc with a glyph in it and no name drawn, which is
+ * what keeps a row of five inside the width of a phone. The name is still
+ * required and still read out — a row of glyphs with no accessible names is the
+ * defect `PlIconButton`'s `label` exists to make impossible, and it would be
+ * exactly as easy to ship here.
+ *
+ * The current destination is a key of **tinted glass** riding in the clear
+ * sheet, which is the design language's own sentence with nothing added to it.
+ * The key is **one element that travels**, measured off whichever disc is
+ * current and animated the way a `PlSegmentedButton`'s tile is — not a fill
+ * that appears on one disc while it disappears from another. Two discs
+ * cross-fading is two objects; a bar with a key in it has one, and where it
+ * goes is the whole of what the component has to say.
+ *
+ * Nothing is transformed: the key is an empty box, and no glyph is resampled
+ * while it travels. That is what lets the house no-transform rule survive a
+ * component whose entire point is that something moves.
+ *
+ * It reads `controlSlots` and not the `surfaceSlots` every other container
+ * takes, which is the one place this bar is not a container: the slots a
+ * container is given are deliberately undyed — no `--p-fill`, no `--p-on-solid`
+ * and no `--p-lift` — and the key is made of all three. Asking a container's
+ * slot set for a control's colours is asking for `var(--p-fill)` to resolve to
+ * nothing, which is a `background-image` the browser drops on the floor and a
+ * current destination that looks exactly like the four beside it.
+ */
+export declare const PlFloatingBottomNavigation: React.ForwardRefExoticComponent<PlFloatingBottomNavigationProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One destination, as a disc.
+ *
+ * It has no `size`, no `color` and no `variant` of its own: all three belong to
+ * the bar, which is the only place they can be set once and mean the same thing
+ * for every disc.
+ */
+export declare const PlFloatingBottomNavigationItem: React.ForwardRefExoticComponent<PlFloatingBottomNavigationItemProps & React.RefAttributes<HTMLElement>>;