plass-ui 1.0.0 → 1.0.1

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";

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -1,291 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { controlHeightClasses, controlSlots, controlSquareClasses, cx, focusRingClasses, glassClasses, hasContent, iconSizeClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
-const FloatingBarContext = /* @__PURE__ */ React.createContext({
-    value: null,
-    change: () => { },
-    size: 'md',
-    disabled: false
-});
-/** How far off the floor the capsule sits, on the size ladder. */
-const floatGapClasses = {
-    xs: 'pb-2',
-    sm: 'pb-3',
-    md: 'pb-4',
-    lg: 'pb-5',
-    xl: 'pb-6'
-};
-/** The same, with the home indicator added underneath it. */
-const floatGapSafeClasses = {
-    xs: 'pb-[calc(env(safe-area-inset-bottom)+0.5rem)]',
-    sm: 'pb-[calc(env(safe-area-inset-bottom)+0.75rem)]',
-    md: 'pb-[calc(env(safe-area-inset-bottom)+1rem)]',
-    lg: 'pb-[calc(env(safe-area-inset-bottom)+1.25rem)]',
-    xl: 'pb-[calc(env(safe-area-inset-bottom)+1.5rem)]'
-};
-/** The air inside the capsule, around the discs. */
-const capsulePaddingClasses = {
-    default: { xs: 'p-1', sm: 'p-1', md: 'p-1.5', lg: 'p-2', xl: 'p-2.5' },
-    compact: { xs: 'p-0.5', sm: 'p-0.5', md: 'p-1', lg: 'p-1', xl: 'p-1.5' }
-};
-/** Between two discs. */
-const discGapClasses = {
-    default: { xs: 'gap-1', sm: 'gap-1', md: 'gap-1.5', lg: 'gap-2', xl: 'gap-2.5' },
-    compact: { xs: 'gap-0.5', sm: 'gap-0.5', md: 'gap-1', lg: 'gap-1', xl: 'gap-1.5' }
-};
-const positionClasses = {
-    static: '',
-    sticky: 'sticky bottom-0 z-20',
-    fixed: 'fixed inset-x-0 bottom-0 z-30'
-};
-/**
- * The capsule.
- *
- * `rounded-full` is one of the very few places the library allows a pill, and it
- * is allowed for the reason a `PlSegmentedButton`'s groove is: this is not a
- * sheet lying on the page, it is an object floating clear of one. The house
- * fillet is about a sheet with its corners cut, and a sheet that is not on
- * anything has no corners to cut.
- */
-const capsuleClasses = {
-    solid: /* @__PURE__ */ [
-        glassClasses,
-        'bg-(--plass-glass-press)',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: ''
-};
-/**
- * The key that slides.
- *
- * Always the family's own gradient with that family's tinted shadow under it,
- * whatever the capsule is made of — a key of tinted glass riding in a clear
- * sheet is the design language's own sentence, and `variant` is a statement
- * about the *capsule*. A `ghost` bar is a row of discs with no sheet behind
- * them; the one that is current is still the one that is current.
- *
- * `left`, `top`, `width` and `height` rather than a `translate`: the key is
- * measured off the disc it belongs under, and moving it by its own box is what
- * keeps every glyph in the row unresampled while it travels. `left` and not
- * `inset-inline-start`, because `offsetLeft` is a distance from the left edge
- * and stays one under RTL — pairing a physical measurement with a logical
- * property is what would break the direction.
- *
- * `data-quiet` is the current destination being unavailable, which is the one
- * state the key cannot read off its own props: the light goes out on the key
- * the same way it goes out on the disc over it, or a disabled destination is a
- * dimmed glyph on a fully lit gradient.
- */
-const keyClasses = /* @__PURE__ */ [
-    'pointer-events-none absolute rounded-full',
-    'top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)',
-    '[background-image:var(--p-fill)]',
-    '[box-shadow:var(--plass-shadow-1),var(--p-lift)]',
-    'data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]',
-    '[transition-property:left,top,width,height,opacity,filter]',
-    '[transition-timing-function:var(--plass-ease)]',
-    // Nothing until the first measurement has landed; the house duration from
-    // then on.
-    '[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]'
-].join(' ');
-/**
- * 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 const PlFloatingBottomNavigation = /* @__PURE__ */ React.forwardRef(function PlFloatingBottomNavigation({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 2, value: valueProp, defaultValue = null, onValueChange, position = 'fixed', safeArea = true, disabled = false, label, render, className, style, children, ...props }, ref) {
-    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
-    const controlled = valueProp !== undefined;
-    const value = controlled ? valueProp : uncontrolled;
-    const capsuleRef = React.useRef(null);
-    const keyRef = React.useRef(null);
-    /**
-     * Writes the current disc's box onto the key as four custom properties.
-     *
-     * Written straight to the element rather than held in state, exactly as
-     * `PlSegmentedButton` writes its tile: a `setState` here would re-render
-     * every disc on every resize, and nothing in the tree depends on the numbers
-     * except four CSS declarations.
-     *
-     * `animate` is what separates the two callers. A change of destination is the
-     * thing this exists to animate; a resize is the capsule moving under a key
-     * that was already in the right place, and animating that is a key that lags
-     * behind the window being dragged.
-     */
-    const measure = React.useCallback((animate) => {
-        const capsule = capsuleRef.current;
-        const disc = keyRef.current;
-        if (!capsule || !disc) {
-            return;
-        }
-        const current = capsule.querySelector('[data-disc][data-current]');
-        if (!current) {
-            return;
-        }
-        // A key that has only just mounted has nowhere to travel *from*, so its
-        // first placement is instant however it was asked for — that is what makes
-        // the first destination appear under its disc rather than fly in from the
-        // left edge of the capsule.
-        const instant = !animate || !disc.hasAttribute('data-ready');
-        if (instant) {
-            disc.removeAttribute('data-ready');
-        }
-        // `offsetLeft`/`offsetTop` are measured from the offsetParent's padding
-        // edge, and `left`/`top` on an absolutely positioned child resolve against
-        // the same box — so the capsule's own padding is already accounted for and
-        // must not be subtracted again.
-        disc.style.setProperty('--p-disc-x', `${current.offsetLeft}px`);
-        disc.style.setProperty('--p-disc-y', `${current.offsetTop}px`);
-        disc.style.setProperty('--p-disc-w', `${current.offsetWidth}px`);
-        disc.style.setProperty('--p-disc-h', `${current.offsetHeight}px`);
-        // Read off the disc rather than off a prop, because the bar does not know
-        // which of its children is unavailable — the items are `children` and the
-        // disabled one is whichever of them said so. The same query that measures
-        // the box answers it, so there is no second pass.
-        disc.toggleAttribute('data-quiet', current.hasAttribute('data-disabled'));
-        if (instant) {
-            // Reading a layout property commits the four writes above while the
-            // duration is still 0ms, so turning the transition back on cannot
-            // animate a move that has already happened.
-            void disc.offsetWidth;
-        }
-        disc.setAttribute('data-ready', '');
-    }, []);
-    // Before the browser paints, or the key is visibly at nothing for a frame.
-    React.useLayoutEffect(() => {
-        measure(true);
-    }, [measure, value, variant, size, density, disabled, children]);
-    React.useEffect(() => {
-        const capsule = capsuleRef.current;
-        if (!capsule || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const observer = new ResizeObserver(() => measure(false));
-        observer.observe(capsule);
-        return () => observer.disconnect();
-    }, [measure]);
-    const change = React.useCallback((next) => {
-        if (!controlled) {
-            setUncontrolled(next);
-        }
-        onValueChange?.(next);
-    }, [controlled, onValueChange]);
-    const context = React.useMemo(() => ({ value: value ?? null, change, size, disabled }), [value, change, size, disabled]);
-    const classNames = cx('flex w-full justify-center px-4', 
-    // The strip the capsule is centred in spans the window, and a transparent
-    // band across the bottom of a page that swallowed presses would be a band
-    // nobody could scroll through. Only the capsule takes them back.
-    position === 'static' ? '' : 'pointer-events-none', safeArea ? floatGapSafeClasses[size] : floatGapClasses[size], positionClasses[position], className);
-    return useRender({
-        render: render ?? _jsx("nav", {}),
-        ref,
-        props: {
-            'aria-label': label,
-            className: classNames,
-            // `controlSlots` and not `surfaceSlots`: the capsule is undyed like every
-            // other container, but the key riding in it is a control's surface and is
-            // made of three slots a container's set does not carry.
-            style: { ...controlSlots(color, elevation, 'solid'), ...style },
-            children: (_jsx(FloatingBarContext.Provider, { value: context, children: _jsxs("div", { ref: capsuleRef, className: cx(
-                    // `relative` is load-bearing twice over: it is what makes the
-                    // capsule the discs' offsetParent, and what the key is positioned
-                    // in.
-                    'pointer-events-auto relative inline-flex items-center rounded-full', capsuleClasses[variant], capsulePaddingClasses[density][size], discGapClasses[density][size], transitionClasses), children: [value !== null && value !== undefined ? (_jsx("span", { ref: keyRef, "aria-hidden": "true", className: keyClasses })) : null, children] }) })),
-            ...props
-        }
-    });
-});
-/**
- * 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 const PlFloatingBottomNavigationItem = /* @__PURE__ */ React.forwardRef(function PlFloatingBottomNavigationItem({ value, icon, href, disabled: disabledProp = false, className, children, onClick, ...props }, ref) {
-    const bar = React.useContext(FloatingBarContext);
-    const disabled = disabledProp || bar.disabled;
-    const selected = bar.value !== null && bar.value === value;
-    const classNames = cx(
-    // `z-10` and a stacking context of its own: the key is painted behind the
-    // discs, and without this it would cover the glyph it is under.
-    'relative z-10 inline-flex shrink-0 items-center justify-center rounded-full', controlHeightClasses[bar.size], controlSquareClasses[bar.size], '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]', transitionClasses, 
-    // Offset rather than inset: a disc inside a capsule that is only padding has
-    // room around it, and a flush ring on a circle is the circle's own edge
-    // thickening — which is the one shape where that reads as a border rather
-    // than as focus.
-    focusRingClasses, disabled
-        ? 'cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)'
-        : selected
-            ? // No surface of its own. What is under the glyph is the key, which
-                // belongs to the bar and is the one thing in the row that travels;
-                // a disc that drew its own fill would be a second key appearing
-                // wherever the first one had just left.
-                'cursor-pointer text-(--p-on-solid)'
-            : 'cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)', className);
-    const body = (_jsxs(_Fragment, { children: [hasContent(icon) ? (_jsx("span", { className: cx('flex shrink-0 items-center justify-center', iconSizeClasses[bar.size]), children: icon })) : null, hasContent(children) ? _jsx("span", { className: srOnlyClasses, children: children }) : null] }));
-    /**
-     * The hooks the key is measured from.
-     *
-     * Attributes rather than a ref per disc, for the reason a `PlSegment` carries
-     * `data-segment`: a ref array would mean keeping it in step with however the
-     * caller composed the items — through a `.map()`, through a fragment, through
-     * a component of their own — and an attribute is the version of that which
-     * cannot fall out of step.
-     */
-    const discAttributes = {
-        'data-disc': '',
-        'data-current': selected ? '' : undefined,
-        'data-disabled': disabled ? '' : undefined
-    };
-    const press = (event) => {
-        if (disabled) {
-            event.preventDefault();
-            return;
-        }
-        bar.change(value);
-        onClick?.(event);
-    };
-    if (href) {
-        return (_jsx("a", { ref: ref, href: disabled ? undefined : href, "aria-current": selected ? 'page' : undefined, "aria-disabled": disabled || undefined, ...discAttributes, className: classNames, onClick: press, ...props, children: body }));
-    }
-    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, "aria-current": selected ? 'page' : undefined, ...discAttributes, className: classNames, onClick: press, ...props, children: body }));
-});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useRender as r}from"@base-ui/react/use-render";import{controlHeightClasses as i,controlSlots as l,controlSquareClasses as o,cx as n,focusRingClasses as d,glassClasses as c,hasContent as p,iconSizeClasses as u,srOnlyClasses as f,transitionClasses as m}from"../../internal/styles.js";const g=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},b={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},h={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},x={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},y={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},w={solid:/* @__PURE__ */[c,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},N=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:i="md",color:o="primary",density:d="default",elevation:c=2,value:p,defaultValue:u=null,onValueChange:f,position:k="fixed",safeArea:z=!0,disabled:j=!1,label:P,render:C,className:A,style:R,children:F,...q},B){const[$,E]=s.useState(u),I=void 0!==p,L=I?p:$,O=s.useRef(null),S=s.useRef(null),V=s.useCallback(e=>{const t=O.current,a=S.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{V(!0)},[V,L,a,i,d,j,F]),s.useEffect(()=>{const e=O.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>V(!1));return t.observe(e),()=>t.disconnect()},[V]);const W=s.useCallback(e=>{I||E(e),f?.(e)},[I,f]),D=s.useMemo(()=>({value:L??null,change:W,size:i,disabled:j}),[L,W,i,j]),H=n("flex w-full justify-center px-4","static"===k?"":"pointer-events-none",z?b[i]:v[i],y[k],A);return r({render:C??e("nav",{}),ref:B,props:{"aria-label":P,className:H,style:{...l(o,c,"solid"),...R},children:e(g.Provider,{value:D,children:t("div",{ref:O,className:n("pointer-events-auto relative inline-flex items-center rounded-full",w[a],h[d][i],x[d][i],m),children:[null!=L?e("span",{ref:S,"aria-hidden":"true",className:N}):null,F]})}),...q}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:l,href:c,disabled:v=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(g),k=v||N.disabled,z=null!==N.value&&N.value===r,j=n("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",i[N.size],o[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":z?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[p(l)?e("span",{className:n("flex shrink-0 items-center justify-center",u[N.size]),children:l}):null,p(h)?e("span",{className:f,children:h}):null]}),C={"data-disc":"","data-current":z?"":void 0,"data-disabled":k?"":void 0},press=e=>{k?e.preventDefault():(N.change(r),x?.(e))};return c?e("a",{ref:w,href:k?void 0:c,"aria-current":z?"page":void 0,"aria-disabled":k||void 0,...C,className:j,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:k,"aria-current":z?"page":void 0,...C,className:j,onClick:press,...y,children:P})});

package/dist/components/floating-bottom-navigation/index.js

@@ -1 +1 @@
-export { PlFloatingBottomNavigation, PlFloatingBottomNavigationItem } from './PlFloatingBottomNavigation.js';
+export{PlFloatingBottomNavigation,PlFloatingBottomNavigationItem}from"./PlFloatingBottomNavigation.js";