ionbase-ui 0.51.0 → 0.69.0

package/dist/components/FileUpload.js

@@ -0,0 +1,218 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from 'react';
+const UploadIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M12 16V4m0 0L8 8m4-4 4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const RemoveIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/**
+ * Bytes as a person would say them.
+ *
+ * Decimal units, not binary: a disk sold as 500 GB and a browser reporting a
+ * file size both mean powers of 1000, and showing "476 MiB" for a 500 MB file
+ * is correct arithmetic and a confusing answer.
+ */
+const formatBytes = (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]}`;
+};
+/**
+ * Does a file match an `accept` list?
+ *
+ * The browser enforces `accept` in its own picker but NOT on drop, and not at
+ * all if the user switches the picker's filter to "All files" — which every
+ * platform picker offers. So the check is repeated here. Treating the native
+ * attribute as a guarantee is the standard way a drop zone ends up holding a
+ * .exe someone dragged into it.
+ */
+const matchesAccept = (file, accept) => {
+    if (!accept)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept.split(',').some((raw) => {
+        const token = raw.trim().toLowerCase();
+        if (!token)
+            return false;
+        if (token.startsWith('.'))
+            return name.endsWith(token);
+        if (token.endsWith('/*'))
+            return type.startsWith(token.slice(0, -1));
+        return type === token;
+    });
+};
+/**
+ * FileUpload — a drop target wrapped around a real `<input type="file">`.
+ *
+ * Drawn in Figma as `File Upload` (1367:2333) — two sizes by five states. The
+ * measurements came from `Input` and `EmptyState` rather than being invented:
+ * the border, radius and disabled treatment are Input's; the centred
+ * icon-over-text stack is EmptyState's. Figma draws the drop zone alone, the
+ * same split `Input` makes against `Form Field`.
+ *
+ * THE INPUT IS THE CONTROL. THE DROP ZONE IS DECORATION.
+ *
+ * The usual build of this component is a `<div>` with drag handlers and a
+ * click that calls `input.click()`. That version cannot be reached by keyboard,
+ * has no accessible name, does not participate in a form, and does not work in
+ * any environment without a pointer — which includes switch access, voice
+ * control and most screen-reader browse modes.
+ *
+ * Here the file input is a real, focusable, labelled control that is visually
+ * hidden but NOT `display: none` — it keeps its place in the tab order and its
+ * label. Drag-and-drop is layered on top as an enhancement, and every path it
+ * offers is also reachable without it. That ordering is the whole component.
+ *
+ * VALIDATION IS ADVISORY, NOT SECURITY. `accept` and `maxSize` are checked here
+ * so the user finds out immediately instead of after an upload. A server that
+ * trusts either one is trusting a value the client chose.
+ */
+export function FileUpload({ label, description, errorMessage, isInvalid, isDisabled: isDisabledProp, size = 'md', accept, multiple, maxSize, maxFiles, files: controlledFiles, onChange, onReject, prompt, hint, removeLabel = (name) => `Remove ${name}`, className, wrapperClassName, id: providedId, name: inputName, }) {
+    /* No `disabled` alias to resolve: FileUpload is new, so it never had one. */
+    const isDisabled = isDisabledProp ?? false;
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const helperId = `${id}-helper`;
+    const hintId = `${id}-hint`;
+    const inputRef = useRef(null);
+    const [uncontrolled, setUncontrolled] = useState([]);
+    const [isDragging, setIsDragging] = useState(false);
+    /*
+     * A depth counter, not a boolean. `dragleave` fires every time the pointer
+     * crosses into a CHILD element, so a boolean flickers off whenever the
+     * cursor passes over the icon or the prompt text. Counting enter/leave pairs
+     * is the only version that survives having children.
+     */
+    const dragDepth = useRef(0);
+    const files = controlledFiles ? [...controlledFiles] : uncontrolled;
+    const commit = useCallback((next) => {
+        if (!controlledFiles)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [controlledFiles, onChange]);
+    const add = useCallback((incoming) => {
+        if (isDisabled || incoming.length === 0)
+            return;
+        const accepted = [];
+        const rejected = [];
+        /*
+         * Room is counted against what is already held, so dropping four files
+         * onto a control holding two with maxFiles=3 accepts one and reports
+         * three — rather than accepting all four or refusing the lot.
+         */
+        let room = multiple ? (maxFiles ?? Infinity) - files.length : 1;
+        for (const file of incoming) {
+            if (!matchesAccept(file, accept)) {
+                rejected.push({
+                    file,
+                    reason: 'type',
+                    message: `${file.name} is not an accepted file type.`,
+                });
+            }
+            else if (maxSize !== undefined && file.size > maxSize) {
+                rejected.push({
+                    file,
+                    reason: 'size',
+                    message: `${file.name} is ${formatBytes(file.size)}, over the ${formatBytes(maxSize)} limit.`,
+                });
+            }
+            else if (room <= 0) {
+                rejected.push({
+                    file,
+                    reason: 'count',
+                    message: multiple
+                        ? `${file.name} was not added — at most ${maxFiles} files.`
+                        : `${file.name} was not added — only one file is allowed.`,
+                });
+            }
+            else {
+                accepted.push(file);
+                room -= 1;
+            }
+        }
+        if (accepted.length)
+            commit(multiple ? [...files, ...accepted] : accepted);
+        if (rejected.length)
+            onReject?.(rejected);
+    }, [accept, commit, files, isDisabled, maxFiles, maxSize, multiple, onReject]);
+    const remove = (index) => {
+        commit(files.filter((_, i) => i !== index));
+        /*
+         * Clearing the input's own value matters: a browser fires no `change` when
+         * the same file is picked twice in a row, so removing a file and picking it
+         * again would silently do nothing.
+         */
+        if (inputRef.current)
+            inputRef.current.value = '';
+    };
+    const helper = isInvalid && errorMessage ? errorMessage : description;
+    const zoneClassNames = [
+        'ion-file-upload',
+        size !== 'md' ? `ion-file-upload--${size}` : '',
+        isDragging ? 'ion-file-upload--dragging' : '',
+        isInvalid ? 'ion-file-upload--invalid' : '',
+        isDisabled ? 'ion-file-upload--disabled' : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const zone = (_jsxs("div", { className: zoneClassNames, "data-dragging": isDragging || undefined, "data-invalid": isInvalid || undefined, "data-disabled": isDisabled || undefined, onDragEnter: (e) => {
+            if (isDisabled)
+                return;
+            e.preventDefault();
+            dragDepth.current += 1;
+            setIsDragging(true);
+        }, onDragOver: (e) => {
+            if (isDisabled)
+                return;
+            // Without this the browser navigates to the dropped file. There is no
+            // other reason for a dragover handler that only calls preventDefault.
+            e.preventDefault();
+        }, onDragLeave: () => {
+            dragDepth.current = Math.max(0, dragDepth.current - 1);
+            if (dragDepth.current === 0)
+                setIsDragging(false);
+        }, onDrop: (e) => {
+            if (isDisabled)
+                return;
+            e.preventDefault();
+            dragDepth.current = 0;
+            setIsDragging(false);
+            add(Array.from(e.dataTransfer.files));
+        }, children: [_jsx("input", { ref: inputRef, type: "file", id: id, name: inputName, className: "ion-file-upload__input", accept: accept, multiple: multiple, disabled: isDisabled, "aria-describedby": [hint ? hintId : null, helper ? helperId : null]
+                    .filter(Boolean)
+                    .join(' ') || undefined, "aria-invalid": isInvalid || undefined, onChange: (e) => {
+                    add(Array.from(e.target.files ?? []));
+                    // Same reason as remove(): re-picking an identical file must fire.
+                    e.target.value = '';
+                } }), _jsxs("label", { htmlFor: id, className: "ion-file-upload__target", children: [_jsx("span", { className: "ion-file-upload__icon", "aria-hidden": "true", children: _jsx(UploadIcon, {}) }), _jsx("span", { className: "ion-file-upload__prompt", children: prompt ??
+                            (multiple
+                                ? 'Choose files or drag them here'
+                                : 'Choose a file or drag it here') }), hint && (_jsx("span", { id: hintId, className: "ion-file-upload__hint", children: hint }))] })] }));
+    const list = files.length > 0 && (_jsx("ul", { className: "ion-file-upload__list", children: files.map((file, index) => (_jsxs("li", { className: "ion-file-upload__file", children: [_jsx("span", { className: "ion-file-upload__name", children: file.name }), _jsx("span", { className: "ion-file-upload__size", children: formatBytes(file.size) }), _jsx("button", { type: "button", className: "ion-file-upload__remove", "aria-label": removeLabel(file.name), disabled: isDisabled, onClick: () => remove(index), children: _jsx(RemoveIcon, {}) })] }, `${file.name}-${file.size}-${index}`))) }));
+    /*
+     * The count, announced. A file added by drop produces no focus change and no
+     * visible change anywhere near the user's attention, so without this a screen
+     * reader user gets no confirmation that the drop did anything at all. Polite,
+     * and the count rather than the names: reading six filenames over an
+     * assertive interruption is worse than saying how many there now are.
+     */
+    const status = (_jsx("span", { className: "ion-visually-hidden", role: "status", "aria-live": "polite", children: files.length === 0
+            ? ''
+            : `${files.length} file${files.length === 1 ? '' : 's'} selected` }));
+    return (_jsxs("div", { className: [
+            'ion-field',
+            isInvalid ? 'ion-field--error' : '',
+            wrapperClassName || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label && (_jsx("label", { htmlFor: id, className: "ion-field__label", children: label })), zone, list, status, helper && (_jsx("span", { id: helperId, className: "ion-field__helper", children: helper }))] }));
+}
+FileUpload.displayName = 'FileUpload';
+//# sourceMappingURL=FileUpload.js.map

package/dist/components/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sourceRoot":"","sources":["../../src/components/FileUpload.tsx"],"names":[],"mappings":"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"}

package/dist/components/Header.d.ts

@@ -15,6 +15,16 @@ export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
     onOpenChange?: (open: boolean) => void;
     /** Accessible name for the mobile menu toggle. */
     menuLabel?: string;
+    /**
+     * What the mobile toggle opens.
+     *
+     * `panel` (default) is Figma's Mobile-Open: `center` and `end` drop below the
+     * bar. `dialog` is for an app whose navigation lives in a Sidebar: the toggle
+     * sits at the start of the bar and only reports `onOpenChange`, the caller
+     * opens a Drawer with it, and `center` and `end` stay in the bar at every
+     * width — so keep `center` empty and `end` short.
+     */
+    menuType?: 'panel' | 'dialog';
     children?: React.ReactNode;
 }
 /**

package/dist/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA2BxE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;iEAC6D;IAC7D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kFAAkF;IAClF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,iFAwElB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA2BxE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;iEAC6D;IAC7D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kFAAkF;IAClF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,iFAgGlB,CAAC"}

package/dist/components/Header.js

@@ -42,7 +42,7 @@ const CloseGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "ari
  * A `<header>` element with no explicit role: it is a landmark already when it
  * is a direct child of body, which is where a page header sits.
  */
-export const Header = forwardRef(({ brand, center, end, open: openProp, defaultOpen = false, onOpenChange, menuLabel = 'Menu', className, children, ...rest }, ref) => {
+export const Header = forwardRef(({ brand, center, end, open: openProp, defaultOpen = false, onOpenChange, menuLabel = 'Menu', menuType = 'panel', className, children, ...rest }, ref) => {
     const menuId = useId();
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const isControlled = openProp !== undefined;
@@ -59,12 +59,27 @@ export const Header = forwardRef(({ brand, center, end, open: openProp, defaultO
      * and it is handled on the header rather than the document so a header that
      * is never open never listens.
      */
+    const isDialog = menuType === 'dialog';
     const handleKeyDown = (event) => {
-        if (event.key === 'Escape' && isOpen)
+        // A dialog owns its own Escape; the header only closes its own panel.
+        if (event.key === 'Escape' && isOpen && !isDialog)
             toggle();
         rest.onKeyDown?.(event);
     };
-    return (_jsxs("header", { ...rest, onKeyDown: handleKeyDown, ref: ref, "data-open": isOpen || undefined, className: ['ion-header', className].filter(Boolean).join(' '), children: [brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsxs("div", { className: "ion-header__menu", id: menuId, children: [_jsx("div", { className: "ion-header__center", children: center }), _jsx("div", { className: "ion-header__end", children: end })] }), children, _jsx("button", { type: "button", className: "ion-header__toggle", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": menuLabel, onClick: toggle, children: isOpen ? _jsx(CloseGlyph, {}) : _jsx(MenuGlyph, {}) })] }));
+    /*
+     * As a panel the toggle discloses the menu wrapper, which is always in the
+     * DOM, so aria-controls can point at it. As a dialog it opens something the
+     * caller mounts only while open — an aria-controls pointing at a missing id
+     * is an error — so it says what it opens with aria-haspopup instead.
+     */
+    const toggleButton = (_jsx("button", { type: "button", className: "ion-header__toggle", "aria-expanded": isOpen, "aria-controls": isDialog ? undefined : menuId, "aria-haspopup": isDialog ? 'dialog' : undefined, "aria-label": menuLabel, onClick: toggle, children: isOpen && !isDialog ? _jsx(CloseGlyph, {}) : _jsx(MenuGlyph, {}) }));
+    return (_jsxs("header", { ...rest, onKeyDown: handleKeyDown, ref: ref, "data-open": (isOpen && !isDialog) || undefined, className: [
+            'ion-header',
+            isDialog ? 'ion-header--dialog-menu' : '',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [isDialog && toggleButton, brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsxs("div", { className: "ion-header__menu", id: menuId, children: [_jsx("div", { className: "ion-header__center", children: center }), _jsx("div", { className: "ion-header__end", children: end })] }), children, !isDialog && toggleButton] }));
 });
 Header.displayName = 'Header';
 //# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExE;kFACkF;AAClF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,yBAAyB,EAC3B,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AAEF,gDAAgD;AAChD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,sBAAsB,EACxB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AAwBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAI,EAAE,QAAQ,EACd,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtE,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAS,CAAC;IAC5C,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAE1D,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC;QACrB,IAAI,CAAC,YAAY;YAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC7C,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzC;;;;;OAKG;IACH,MAAM,aAAa,GAAG,CAAC,KAAuC,EAAE,EAAE;QAChE,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,MAAM;YAAE,MAAM,EAAE,CAAC;QAC/C,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACL,qBACM,IAAI,EACR,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,GAAG,eACG,MAAM,IAAI,SAAS,EAC9B,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAE7D,KAAK,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAO,EAM1D,eAAK,SAAS,EAAC,kBAAkB,EAAC,EAAE,EAAE,MAAM,aAC1C,cAAK,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAO,EAClD,cAAK,SAAS,EAAC,iBAAiB,YAAE,GAAG,GAAO,IACxC,EAEL,QAAQ,EAET,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,oBAAoB,mBACf,MAAM,mBACN,MAAM,gBACT,SAAS,EACrB,OAAO,EAAE,MAAM,YAEd,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GACjC,IACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"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"}

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { AriaNumberFieldProps } from 'react-aria';
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+type NumberInputDOMProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof AriaNumberFieldProps | 'size' | 'type' | 'min' | 'max' | 'step' | 'disabled' | 'value' | 'defaultValue' | 'onChange'>;
+export interface NumberInputProps extends Omit<AriaNumberFieldProps, 'value' | 'defaultValue' | 'onChange'>, NumberInputDOMProps {
+    /**
+     * Controlled value. `null` is empty — never `NaN`, which is what the
+     * underlying hook uses and which fails every `===` check a caller writes.
+     */
+    value?: number | null;
+    /** Uncontrolled starting value. `null` for empty. */
+    defaultValue?: number | null;
+    /**
+     * Fires when the value is committed — on blur, Enter, a step button or an
+     * arrow key — not on every keystroke. `null` when the field was cleared.
+     */
+    onChange?: (value: number | null) => void;
+    /** Matches Input's `size`: Small, Medium, Large. */
+    size?: NumberInputSize;
+    /**
+     * The − and + buttons. On by default; turn off for a dense table cell where
+     * the arrow keys are enough.
+     */
+    showStepper?: boolean;
+    /** Class names for the control box (`.ion-input`). */
+    className?: string;
+    /** Class names for the `.ion-field` wrapper when a label or helper is shown. */
+    wrapperClassName?: string;
+}
+/**
+ * NumberInput — a quantity, with formatting, bounds and steps.
+ *
+ * NOT `<input type="number">`, and the list of reasons is the component:
+ *
+ *   It scrolls. A focused `type="number"` changes value under the mouse wheel,
+ *   so a user scrolling the page past a price field edits the price. The wheel
+ *   is OFF here by default (`isWheelDisabled`), and a caller has to ask for it.
+ *
+ *   It cannot format. "1,234.50", "€12", "15%" are text to the browser's number
+ *   input, which rejects them. `formatOptions` takes `Intl.NumberFormatOptions`,
+ *   so currency, percent and units display and parse in the user's locale —
+ *   including "1.234,50" for a German user.
+ *
+ *   It is not a number to the browser's validation either. `type="text"` with
+ *   the right `inputMode` gets the numeric keyboard on a phone without
+ *   Firefox letting letters in and Chrome silently reporting an empty value.
+ *
+ * EMPTY IS `null`, NOT `NaN`. React Aria reports an empty field as `NaN`, and
+ * `NaN === NaN` is false — so every "is it empty" check a caller writes is
+ * wrong. This converts at the boundary, both ways.
+ *
+ * − AND + SIT SIDE BY SIDE, NOT STACKED. Stacked chevrons split the field's
+ * height in two, which puts a Small field's targets at 16px — under the 24px
+ * WCAG 2.5.8 asks. Side by side, every size clears it. They are out of the tab
+ * order, as React Aria sets them: the arrow keys do the same job from the field,
+ * and two extra tab stops per number on a form is a tax on every keyboard user.
+ *
+ * The box is Input's, class for class, so every state — hover, focus, invalid,
+ * read-only, disabled — is Input's and cannot drift from it.
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=NumberInput.d.ts.map

package/dist/components/NumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EAAmB,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAIxE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,oBAAoB,GAC1B,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,CACb,CAAC;AAEF,MAAM,WAAW,gBACf,SACE,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,EACjE,mBAAmB;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,oDAAoD;IACpD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,WAAW,2FA4HvB,CAAC"}

package/dist/components/NumberInput.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useButton, useFocusRing, useHover, useLocale, useNumberField, } from 'react-aria';
+import { useNumberFieldState } from 'react-stately';
+import { ARIA_TEXT_FIELD_NON_DOM_PROPS, omitProps } from './dom-props.js';
+/* Props this component or the number-field hook consume, on top of a text field's. */
+const NUMBER_FIELD_NON_DOM_PROPS = [
+    ...ARIA_TEXT_FIELD_NON_DOM_PROPS,
+    'minValue',
+    'maxValue',
+    'step',
+    'formatOptions',
+    'commitBehavior',
+    'isWheelDisabled',
+    'incrementAriaLabel',
+    'decrementAriaLabel',
+];
+const Minus = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+const Plus = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M12 6v12M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+function StepButton({ children, ...props }) {
+    const ref = useRef(null);
+    const { buttonProps } = useButton(props, ref);
+    return (_jsx("button", { ...buttonProps, ref: ref, className: "ion-number-input__step", children: children }));
+}
+const toHook = (v) => (v === null ? NaN : v);
+/**
+ * NumberInput — a quantity, with formatting, bounds and steps.
+ *
+ * NOT `<input type="number">`, and the list of reasons is the component:
+ *
+ *   It scrolls. A focused `type="number"` changes value under the mouse wheel,
+ *   so a user scrolling the page past a price field edits the price. The wheel
+ *   is OFF here by default (`isWheelDisabled`), and a caller has to ask for it.
+ *
+ *   It cannot format. "1,234.50", "€12", "15%" are text to the browser's number
+ *   input, which rejects them. `formatOptions` takes `Intl.NumberFormatOptions`,
+ *   so currency, percent and units display and parse in the user's locale —
+ *   including "1.234,50" for a German user.
+ *
+ *   It is not a number to the browser's validation either. `type="text"` with
+ *   the right `inputMode` gets the numeric keyboard on a phone without
+ *   Firefox letting letters in and Chrome silently reporting an empty value.
+ *
+ * EMPTY IS `null`, NOT `NaN`. React Aria reports an empty field as `NaN`, and
+ * `NaN === NaN` is false — so every "is it empty" check a caller writes is
+ * wrong. This converts at the boundary, both ways.
+ *
+ * − AND + SIT SIDE BY SIDE, NOT STACKED. Stacked chevrons split the field's
+ * height in two, which puts a Small field's targets at 16px — under the 24px
+ * WCAG 2.5.8 asks. Side by side, every size clears it. They are out of the tab
+ * order, as React Aria sets them: the arrow keys do the same job from the field,
+ * and two extra tab stops per number on a form is a tax on every keyboard user.
+ *
+ * The box is Input's, class for class, so every state — hover, focus, invalid,
+ * read-only, disabled — is Input's and cannot drift from it.
+ */
+export const NumberInput = forwardRef((props, forwardedRef) => {
+    const { size = 'md', showStepper = true, isWheelDisabled = true, value, defaultValue, onChange, label, description, errorMessage, isDisabled, isReadOnly, className, wrapperClassName, ...rest } = props;
+    const { locale } = useLocale();
+    const hookProps = {
+        ...props,
+        isWheelDisabled,
+        value: value === undefined ? undefined : toHook(value),
+        defaultValue: defaultValue === undefined ? undefined : toHook(defaultValue),
+        onChange: onChange
+            ? (n) => onChange(Number.isNaN(n) ? null : n)
+            : undefined,
+    };
+    const state = useNumberFieldState({ ...hookProps, locale });
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, isInvalid, } = useNumberField(hookProps, state, ref);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing({ isTextInput: true });
+    const domProps = omitProps(rest, NUMBER_FIELD_NON_DOM_PROPS);
+    const box = (_jsxs("div", { ...mergeProps(groupProps, hoverProps), "data-hovered": isHovered || undefined, "data-focused": isFocusVisible || undefined, "data-invalid": isInvalid || undefined, "data-readonly": isReadOnly || undefined, "data-disabled": isDisabled || undefined, className: [
+            'ion-input',
+            'ion-number-input',
+            size !== 'md' ? `ion-input--${size}` : '',
+            showStepper ? 'ion-number-input--stepper' : '',
+            isInvalid ? 'ion-input--invalid' : '',
+            isReadOnly ? 'ion-input--readonly' : '',
+            isDisabled ? 'ion-input--disabled' : '',
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [_jsx("input", { ...domProps, ...mergeProps(inputProps, focusProps), ref: ref, className: "ion-input__field ion-number-input__field" }), showStepper && (_jsxs("span", { className: "ion-number-input__steps", children: [_jsx(StepButton, { ...decrementButtonProps, children: _jsx(Minus, {}) }), _jsx(StepButton, { ...incrementButtonProps, children: _jsx(Plus, {}) })] }))] }));
+    const helper = isInvalid && errorMessage ? errorMessage : description;
+    const helperProps = isInvalid && errorMessage ? errorMessageProps : descriptionProps;
+    if (!label && !helper)
+        return box;
+    return (_jsxs("div", { className: [
+            'ion-field',
+            isInvalid ? 'ion-field--error' : '',
+            wrapperClassName || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label && (_jsx("label", { ...labelProps, className: "ion-field__label", children: label })), box, helper && (_jsx("span", { ...helperProps, className: "ion-field__helper", children: helper }))] }));
+});
+NumberInput.displayName = 'NumberInput';
+//# sourceMappingURL=NumberInput.js.map

package/dist/components/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export type ProgressBarIntent = 'primary' | 'success' | 'warning' | 'error';
+export type ProgressBarSize = 'sm' | 'md';
+export interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What is progressing. Required — a bare bar announces a number and no noun. */
+    label: string;
+    /** 0 to `max`. Omit for an indeterminate bar. */
+    value?: number;
+    /** Defaults to 100. */
+    max?: number;
+    intent?: ProgressBarIntent;
+    size?: ProgressBarSize;
+    /** Show the label as text above the track. */
+    isLabelVisible?: boolean;
+    /** Show the percentage beside the label. Determinate bars only. */
+    isValueVisible?: boolean;
+    /**
+     * Spoken instead of the percentage — "3 of 12 files". A percentage is rarely
+     * the thing a person wants read aloud.
+     */
+    valueText?: string;
+}
+/**
+ * ProgressBar — a determinate or indeterminate measure of work.
+ *
+ * DETERMINATE AND INDETERMINATE ARE THE SAME COMPONENT ON PURPOSE
+ *
+ * Work that starts unmeasurable and becomes measurable is the common case — a
+ * upload that does not know its size until the first chunk lands. Splitting
+ * them into two components would make that transition a swap, which remounts
+ * the node and loses the live region with it.
+ *
+ * Omitting `value` is what makes it indeterminate. `aria-valuenow` is then
+ * omitted too, which is exactly what the ARIA spec asks for and is the detail
+ * hand-rolled progress bars get wrong most often — a bar reporting
+ * `aria-valuenow="0"` forever tells a screen reader the work is stuck at zero,
+ * not that it is unmeasured.
+ *
+ * WHY `label` IS REQUIRED
+ *
+ * `role="progressbar"` announces a number. Without a name the user hears "42
+ * percent" with no indication of what is at 42 percent, which is worse than
+ * silence because it sounds like information.
+ */
+export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC5E,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,yFA6EvB,CAAC"}

package/dist/components/ProgressBar.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+const clamp = (n, max) => Math.min(Math.max(n, 0), max);
+/**
+ * ProgressBar — a determinate or indeterminate measure of work.
+ *
+ * DETERMINATE AND INDETERMINATE ARE THE SAME COMPONENT ON PURPOSE
+ *
+ * Work that starts unmeasurable and becomes measurable is the common case — a
+ * upload that does not know its size until the first chunk lands. Splitting
+ * them into two components would make that transition a swap, which remounts
+ * the node and loses the live region with it.
+ *
+ * Omitting `value` is what makes it indeterminate. `aria-valuenow` is then
+ * omitted too, which is exactly what the ARIA spec asks for and is the detail
+ * hand-rolled progress bars get wrong most often — a bar reporting
+ * `aria-valuenow="0"` forever tells a screen reader the work is stuck at zero,
+ * not that it is unmeasured.
+ *
+ * WHY `label` IS REQUIRED
+ *
+ * `role="progressbar"` announces a number. Without a name the user hears "42
+ * percent" with no indication of what is at 42 percent, which is worse than
+ * silence because it sounds like information.
+ */
+export const ProgressBar = forwardRef(({ label, value, max = 100, intent = 'primary', size = 'md', isLabelVisible = false, isValueVisible = false, valueText, className, ...rest }, ref) => {
+    const labelId = useId();
+    const isIndeterminate = value === undefined;
+    const resolved = isIndeterminate ? 0 : clamp(value, max);
+    const pct = max > 0 ? (resolved / max) * 100 : 0;
+    const classNames = [
+        'ion-progress-bar',
+        intent !== 'primary' ? `ion-progress-bar--${intent}` : '',
+        size !== 'md' ? `ion-progress-bar--${size}` : '',
+        isIndeterminate ? 'ion-progress-bar--indeterminate' : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { ...rest, ref: ref, className: classNames, children: [_jsxs("div", { className: isLabelVisible ? 'ion-progress-bar__header' : 'ion-visually-hidden', children: [_jsx("span", { id: labelId, className: "ion-progress-bar__label", children: label }), isLabelVisible && isValueVisible && !isIndeterminate && (_jsx("span", { className: "ion-progress-bar__value", children: valueText ?? `${Math.round(pct)}%` }))] }), _jsx("div", { className: "ion-progress-bar__track", role: "progressbar", "aria-labelledby": labelId, "aria-valuemin": 0, "aria-valuemax": max, ...(isIndeterminate
+                    ? {}
+                    : {
+                        'aria-valuenow': resolved,
+                        ...(valueText ? { 'aria-valuetext': valueText } : {}),
+                    }), children: _jsx("div", { className: "ion-progress-bar__fill", style: isIndeterminate
+                        ? undefined
+                        : {
+                            '--ion-progress-bar-pct': `${pct}%`,
+                        } }) })] }));
+});
+ProgressBar.displayName = 'ProgressBar';
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AA4BjD,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,GAAW,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,KAAK,EACL,KAAK,EACL,GAAG,GAAG,GAAG,EACT,MAAM,GAAG,SAAS,EAClB,IAAI,GAAG,IAAI,EACX,cAAc,GAAG,KAAK,EACtB,cAAc,GAAG,KAAK,EACtB,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,eAAe,GAAG,KAAK,KAAK,SAAS,CAAC;IAC5C,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACzD,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjD,MAAM,UAAU,GAAG;QACjB,kBAAkB;QAClB,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,qBAAqB,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACzD,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAChD,eAAe,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE;QACxD,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,kBAAS,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,aAC5C,eACE,SAAS,EACP,cAAc,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,qBAAqB,aAGrE,eAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,yBAAyB,YACnD,KAAK,GACD,EACN,cAAc,IAAI,cAAc,IAAI,CAAC,eAAe,IAAI,CACvD,eAAM,SAAS,EAAC,yBAAyB,YACtC,SAAS,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,GAC9B,CACR,IACG,EAEN,cACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,aAAa,qBACD,OAAO,mBACT,CAAC,mBACD,GAAG,KAGd,CAAC,eAAe;oBAClB,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC;wBACE,eAAe,EAAE,QAAQ;wBACzB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;qBACtD,CAAC,YAEN,cACE,SAAS,EAAC,wBAAwB,EAClC,KAAK,EACH,eAAe;wBACb,CAAC,CAAC,SAAS;wBACX,CAAC,CAAE;4BACC,wBAAwB,EAAE,GAAG,GAAG,GAAG;yBACZ,GAE/B,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}