@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/accordion.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type AccordionItem = {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    open?: boolean;
+};
+export type AccordionProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    items: readonly AccordionItem[];
+};
+export declare function Accordion({ items, className, ...props }: AccordionProps): ReactElement;

package/dist/accordion.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Accordion({ items, className = "", ...props }) {
+    return createElement("div", { ...props, className: `spui-accordion ${className}`.trim() }, items.map(item => createElement("details", { key: item.id, open: item.open }, createElement("summary", null, item.label), createElement("div", { className: "spui-accordion-content" }, item.content))));
+}

package/dist/alert.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type AlertProps = HTMLAttributes<HTMLDivElement>;
+export declare function Alert({ className, role, ...props }: AlertProps): ReactElement;

package/dist/alert.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Alert({ className = "", role = "status", ...props }) {
+    return createElement("div", { ...props, role, className: `spui-alert ${className}`.trim() });
+}

package/dist/attachment-list.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type AttachmentItem = {
+    id: string;
+    name: string;
+    status?: "ready" | "uploading" | "uploaded" | "error";
+    progress?: number;
+    message?: string;
+};
+export type AttachmentListProps = Omit<HTMLAttributes<HTMLUListElement>, "children" | "aria-label"> & {
+    label: string;
+    items: readonly AttachmentItem[];
+    onRemove?: (id: string) => void;
+    removeLabel?: (name: string) => string;
+};
+export declare function AttachmentList({ label, items, onRemove, removeLabel, className, ...props }: AttachmentListProps): ReactElement;

package/dist/attachment-list.js

@@ -0,0 +1,14 @@
+import { createElement } from "react";
+const statusLabels = { ready: "Ready", uploading: "Uploading", uploaded: "Uploaded", error: "Upload failed" };
+export function AttachmentList({ label, items, onRemove, removeLabel = name => `Remove ${name}`, className = "", ...props }) {
+    return createElement("ul", { ...props, "aria-label": label, className: `spui-attachment-list ${className}`.trim() }, items.map(item => {
+        const status = item.status ?? "ready";
+        return createElement("li", { key: item.id, className: `spui-attachment spui-attachment-${status}` }, createElement("span", null, item.name), status === "uploading" && createElement("progress", {
+            max: 100, value: item.progress === undefined ? undefined : Math.max(0, Math.min(100, item.progress)),
+            "aria-label": `${item.name} upload progress`,
+        }), createElement("span", { role: status === "error" ? "alert" : "status", "aria-live": "polite" }, item.message ?? statusLabels[status]), onRemove && createElement("button", {
+            type: "button", onClick: () => onRemove(item.id),
+            "aria-label": removeLabel(item.name), disabled: status === "uploading",
+        }, "Remove"));
+    }));
+}

package/dist/avatar-group.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type AvatarGroupPerson = {
+    id: string;
+    name: string;
+    src?: string;
+};
+export type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "aria-label"> & {
+    label: string;
+    people: readonly AvatarGroupPerson[];
+    maxVisible?: number;
+};
+export declare function AvatarGroup({ label, people, maxVisible, className, ...props }: AvatarGroupProps): ReactElement;

package/dist/avatar-group.js

@@ -0,0 +1,7 @@
+import { createElement } from "react";
+import { Avatar } from "./avatar.js";
+export function AvatarGroup({ label, people, maxVisible = 4, className = "", ...props }) {
+    const visible = people.slice(0, Math.max(0, maxVisible));
+    const remaining = people.length - visible.length;
+    return createElement("div", { ...props, role: "group", "aria-label": label, className: `spui-avatar-group ${className}`.trim() }, visible.map(person => createElement(Avatar, { key: person.id, name: person.name, src: person.src })), remaining > 0 && createElement("span", { className: "spui-avatar-overflow", "aria-label": `${remaining} more people` }, `+${remaining}`));
+}

package/dist/avatar.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type AvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, "children" | "aria-label"> & {
+    name: string;
+    src?: string;
+};
+export declare function Avatar({ name, src, className, ...props }: AvatarProps): ReactElement;

package/dist/avatar.js

@@ -0,0 +1,5 @@
+import { createElement } from "react";
+export function Avatar({ name, src, className = "", ...props }) {
+    const initials = name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toLocaleUpperCase()).join("");
+    return createElement("span", { ...props, role: "img", "aria-label": name, className: `spui-avatar ${className}`.trim() }, src ? createElement("img", { src, alt: "" }) : initials);
+}

package/dist/badge.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type BadgeProps = HTMLAttributes<HTMLSpanElement>;
+export declare function Badge({ className, ...props }: BadgeProps): ReactElement;

package/dist/badge.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Badge({ className = "", ...props }) {
+    return createElement("span", { ...props, className: `spui-badge ${className}`.trim() });
+}

package/dist/breadcrumb.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type BreadcrumbItem = {
+    label: ReactNode;
+    href?: string;
+};
+export type BreadcrumbProps = Omit<HTMLAttributes<HTMLElement>, "children" | "aria-label"> & {
+    label?: string;
+    items: readonly BreadcrumbItem[];
+};
+export declare function Breadcrumb({ label, items, className, ...props }: BreadcrumbProps): ReactElement;

package/dist/breadcrumb.js

@@ -0,0 +1,9 @@
+import { createElement } from "react";
+export function Breadcrumb({ label = "Breadcrumb", items, className = "", ...props }) {
+    return createElement("nav", { ...props, "aria-label": label, className: `spui-breadcrumb ${className}`.trim() }, createElement("ol", null, items.map((item, index) => {
+        const current = index === items.length - 1;
+        return createElement("li", { key: `${index}-${item.href ?? "current"}` }, !current && item.href
+            ? createElement("a", { href: item.href }, item.label)
+            : createElement("span", { "aria-current": current ? "page" : undefined }, item.label));
+    })));
+}

package/dist/button-group.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type ButtonGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "aria-label"> & {
+    label: string;
+    children?: ReactNode;
+};
+export declare function ButtonGroup({ label, className, children, ...props }: ButtonGroupProps): ReactElement;

package/dist/button-group.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function ButtonGroup({ label, className = "", children, ...props }) {
+    return createElement("div", { ...props, role: "group", "aria-label": label, className: `spui-button-group ${className}`.trim() }, children);
+}

package/dist/button.d.ts

@@ -0,0 +1,3 @@
+import { type ButtonHTMLAttributes, type ReactElement } from "react";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function Button({ className, type, ...props }: ButtonProps): ReactElement;

package/dist/button.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Button({ className = "", type = "button", ...props }) {
+    return createElement("button", { ...props, type, className: `spui-button ${className}`.trim() });
+}

package/dist/card.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type CardProps = HTMLAttributes<HTMLElement>;
+export declare function Card({ className, ...props }: CardProps): ReactElement;

package/dist/card.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Card({ className = "", ...props }) {
+    return createElement("article", { ...props, className: `spui-card ${className}`.trim() });
+}

package/dist/carousel.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type CarouselItem = {
+    id: string;
+    label: string;
+    content: ReactNode;
+};
+export type CarouselProps = Omit<HTMLAttributes<HTMLElement>, "children" | "aria-label"> & {
+    label: string;
+    items: readonly CarouselItem[];
+};
+export declare function Carousel({ label, items, className, ...props }: CarouselProps): ReactElement;

package/dist/carousel.js

@@ -0,0 +1,6 @@
+import { createElement } from "react";
+export function Carousel({ label, items, className = "", ...props }) {
+    return createElement("section", { ...props, role: "region", "aria-label": label, "aria-roledescription": "carousel", tabIndex: 0, className: `spui-carousel ${className}`.trim() }, createElement("ul", null, items.map((item, index) => createElement("li", {
+        key: item.id, "aria-roledescription": "slide", "aria-label": `${item.label}, ${index + 1} of ${items.length}`,
+    }, item.content))));
+}

package/dist/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { type InputHTMLAttributes, type ReactElement } from "react";
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
+export declare function Checkbox({ className, ...props }: CheckboxProps): ReactElement;

package/dist/checkbox.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Checkbox({ className = "", ...props }) {
+    return createElement("input", { ...props, type: "checkbox", className: `spui-checkbox ${className}`.trim() });
+}

package/dist/combobox.d.ts

@@ -0,0 +1,9 @@
+import { type InputHTMLAttributes, type ReactElement } from "react";
+export type ComboBoxOption = {
+    value: string;
+    label?: string;
+};
+export type ComboBoxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "list"> & {
+    options: readonly ComboBoxOption[];
+};
+export declare function ComboBox({ className, id, options, ...props }: ComboBoxProps): ReactElement;

package/dist/combobox.js

@@ -0,0 +1,6 @@
+import { createElement, useId } from "react";
+export function ComboBox({ className = "", id, options, ...props }) {
+    const generatedId = useId();
+    const listId = `${id ?? generatedId}-options`;
+    return createElement("span", { className: "spui-combobox" }, createElement("input", { ...props, id, type: "text", list: listId, className: `spui-input ${className}`.trim() }), createElement("datalist", { id: listId }, options.map(option => createElement("option", { key: option.value, value: option.value, label: option.label }))));
+}

package/dist/command-bar.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type CommandBarProps = Omit<HTMLAttributes<HTMLElement>, "children" | "aria-label"> & {
+    label: string;
+    children?: ReactNode;
+};
+export declare function CommandBar({ label, className, children, ...props }: CommandBarProps): ReactElement;

package/dist/command-bar.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function CommandBar({ label, className = "", children, ...props }) {
+    return createElement("nav", { ...props, "aria-label": label, className: `spui-command-bar ${className}`.trim() }, children);
+}

package/dist/copy-button.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonHTMLAttributes, type ReactElement } from "react";
+export type CopyButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> & {
+    value: string;
+    copiedLabel?: string;
+    failedLabel?: string;
+};
+export declare function CopyButton({ value, copiedLabel, failedLabel, className, type, onClick, children, ...props }: CopyButtonProps): ReactElement;

package/dist/copy-button.js

@@ -0,0 +1,19 @@
+import { createElement, useState } from "react";
+export function CopyButton({ value, copiedLabel = "Copied", failedLabel = "Copy failed", className = "", type = "button", onClick, children = "Copy", ...props }) {
+    const [message, setMessage] = useState("");
+    return createElement("span", { className: "spui-copy" }, createElement("button", {
+        ...props,
+        type,
+        className: `spui-button ${className}`.trim(),
+        onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (typeof navigator === "undefined" || !navigator.clipboard) {
+                setMessage(failedLabel);
+                return;
+            }
+            void navigator.clipboard.writeText(value).then(() => setMessage(copiedLabel), () => setMessage(failedLabel));
+        },
+    }, children), createElement("span", { className: "spui-visually-hidden", role: "status", "aria-live": "polite" }, message));
+}

package/dist/data-grid.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement, type ReactNode, type TableHTMLAttributes } from "react";
+export type DataGridColumn<Row> = {
+    key: keyof Row & string;
+    label: string;
+    render?: (row: Row) => ReactNode;
+    sortable?: boolean;
+};
+export type DataGridSort<Row> = {
+    key: keyof Row & string;
+    direction: "ascending" | "descending";
+};
+export type DataGridProps<Row extends Record<string, unknown>> = Omit<TableHTMLAttributes<HTMLTableElement>, "children"> & {
+    label: string;
+    caption?: ReactNode;
+    rows: readonly Row[];
+    columns: readonly DataGridColumn<Row>[];
+    getRowId: (row: Row) => string;
+    rowLabel?: (row: Row) => string;
+    selectable?: boolean;
+    selectedIds?: readonly string[];
+    onSelectionChange?: (ids: string[]) => void;
+    initialSort?: DataGridSort<Row>;
+    onSortChange?: (sort: DataGridSort<Row>) => void;
+};
+export declare function DataGrid<Row extends Record<string, unknown>>({ label, caption, rows, columns, getRowId, rowLabel, selectable, selectedIds, onSelectionChange, initialSort, onSortChange, className, ...props }: DataGridProps<Row>): ReactElement;

package/dist/data-grid.js

@@ -0,0 +1,39 @@
+import { createElement, useState } from "react";
+export function DataGrid({ label, caption, rows, columns, getRowId, rowLabel, selectable = false, selectedIds, onSelectionChange, initialSort, onSortChange, className = "", ...props }) {
+    const [sort, setSort] = useState(initialSort);
+    const [internalSelected, setInternalSelected] = useState(() => new Set(selectedIds));
+    const selected = selectedIds === undefined ? internalSelected : new Set(selectedIds);
+    const orderedRows = sort ? [...rows].sort((a, b) => {
+        const left = a[sort.key], right = b[sort.key];
+        const comparison = typeof left === "number" && typeof right === "number"
+            ? left - right : String(left ?? "").localeCompare(String(right ?? ""), undefined, { numeric: true });
+        return sort.direction === "ascending" ? comparison : -comparison;
+    }) : rows;
+    const changeSort = (key) => {
+        const next = { key, direction: sort?.key === key && sort.direction === "ascending" ? "descending" : "ascending" };
+        setSort(next);
+        onSortChange?.(next);
+    };
+    const toggle = (id) => {
+        const next = new Set(selected);
+        next.has(id) ? next.delete(id) : next.add(id);
+        if (selectedIds === undefined)
+            setInternalSelected(next);
+        onSelectionChange?.([...next]);
+    };
+    return createElement("table", { ...props, "aria-label": label, className: `spui-table spui-data-grid ${className}`.trim() }, caption && createElement("caption", null, caption), createElement("thead", null, createElement("tr", null, selectable && createElement("th", { scope: "col" }, "Select"), columns.map(column => createElement("th", {
+        key: column.key, scope: "col",
+        "aria-sort": sort?.key === column.key ? sort.direction : undefined,
+    }, column.sortable === false ? column.label : createElement("button", {
+        type: "button", onClick: () => changeSort(column.key),
+        "aria-label": `Sort by ${column.label}`,
+    }, column.label))))), createElement("tbody", null, orderedRows.map(row => {
+        const id = getRowId(row);
+        const name = rowLabel?.(row) ?? id;
+        return createElement("tr", { key: id, "aria-selected": selectable ? selected.has(id) : undefined }, selectable && createElement("td", null, createElement("input", {
+            type: "checkbox", className: "spui-checkbox", checked: selected.has(id),
+            "aria-label": `Select ${name}`, onChange: () => toggle(id),
+        })), columns.map(column => createElement("td", { key: column.key }, column.render
+            ? column.render(row) : String(row[column.key] ?? ""))));
+    })));
+}

package/dist/date-range-picker.d.ts

@@ -0,0 +1,12 @@
+import { type FieldsetHTMLAttributes, type InputHTMLAttributes, type ReactElement } from "react";
+export type DateRangePickerProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "id" | "children"> & {
+    id: string;
+    label: string;
+    startLabel?: string;
+    endLabel?: string;
+    startName?: string;
+    endName?: string;
+    startProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "name" | "type">;
+    endProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "name" | "type">;
+};
+export declare function DateRangePicker({ id, label, startLabel, endLabel, startName, endName, startProps, endProps, className, ...props }: DateRangePickerProps): ReactElement;

package/dist/date-range-picker.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function DateRangePicker({ id, label, startLabel = "Start date", endLabel = "End date", startName = "start", endName = "end", startProps, endProps, className = "", ...props }) {
+    return createElement("fieldset", { ...props, className: `spui-date-range ${className}`.trim() }, createElement("legend", null, label), createElement("label", { htmlFor: `${id}-start` }, startLabel, createElement("input", { ...startProps, id: `${id}-start`, name: startName, type: "date", className: `spui-input ${startProps?.className ?? ""}`.trim() })), createElement("label", { htmlFor: `${id}-end` }, endLabel, createElement("input", { ...endProps, id: `${id}-end`, name: endName, type: "date", className: `spui-input ${endProps?.className ?? ""}`.trim() })));
+}

package/dist/dialog.d.ts

@@ -0,0 +1,9 @@
+import { type DialogHTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, "children" | "open" | "onClose"> & {
+    open: boolean;
+    title: ReactNode;
+    children?: ReactNode;
+    closeLabel?: string;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare function Dialog({ open, title, children, closeLabel, onOpenChange, className, ...props }: DialogProps): ReactElement;

package/dist/dialog.js

@@ -0,0 +1,21 @@
+import { createElement, useEffect, useId, useRef } from "react";
+export function Dialog({ open, title, children, closeLabel = "Close", onOpenChange, className = "", ...props }) {
+    const ref = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open)
+            dialog.showModal();
+        if (!open && dialog.open)
+            dialog.close();
+    }, [open]);
+    return createElement("dialog", {
+        ...props,
+        ref,
+        "aria-labelledby": titleId,
+        className: `spui-dialog ${className}`.trim(),
+        onClose: () => onOpenChange?.(false),
+    }, createElement("header", null, createElement("h2", { id: titleId }, title), createElement("button", { type: "button", onClick: () => ref.current?.close(), "aria-label": closeLabel }, closeLabel)), children);
+}

package/dist/divider.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type DividerProps = HTMLAttributes<HTMLHRElement>;
+export declare function Divider({ className, ...props }: DividerProps): ReactElement;

package/dist/divider.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Divider({ className = "", ...props }) {
+    return createElement("hr", { ...props, className: `spui-divider ${className}`.trim() });
+}

package/dist/drawer.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from "react";
+import { type DialogProps } from "./dialog.js";
+export type DrawerProps = DialogProps & {
+    placement?: "start" | "end";
+};
+export declare function Drawer({ placement, className, ...props }: DrawerProps): ReactElement;

package/dist/drawer.js

@@ -0,0 +1,5 @@
+import { createElement } from "react";
+import { Dialog } from "./dialog.js";
+export function Drawer({ placement = "end", className = "", ...props }) {
+    return createElement(Dialog, { ...props, className: `spui-drawer spui-drawer-${placement} ${className}`.trim() });
+}

package/dist/empty-state.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+};
+export declare function EmptyState({ title, description, className, children, ...props }: EmptyStateProps): ReactElement;

package/dist/empty-state.js

@@ -0,0 +1,5 @@
+import { createElement, useId } from "react";
+export function EmptyState({ title, description, className = "", children, ...props }) {
+    const headingId = useId();
+    return createElement("section", { ...props, "aria-labelledby": headingId, className: `spui-empty-state ${className}`.trim() }, createElement("h2", { id: headingId }, title), description && createElement("p", null, description), children);
+}

package/dist/field.d.ts

@@ -0,0 +1,15 @@
+import { type AriaAttributes, type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type FieldProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "id"> & {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactElement<{
+        id?: string;
+        "aria-describedby"?: string;
+        "aria-invalid"?: AriaAttributes["aria-invalid"];
+        required?: boolean;
+    }>;
+};
+export declare function Field({ id, label, hint, error, required, children, className, ...props }: FieldProps): ReactElement;

package/dist/field.js

@@ -0,0 +1,11 @@
+import { cloneElement, createElement } from "react";
+export function Field({ id, label, hint, error, required, children, className = "", ...props }) {
+    const describedBy = [children.props["aria-describedby"], hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(" ");
+    const control = cloneElement(children, {
+        id,
+        required: required || children.props.required,
+        "aria-describedby": describedBy || undefined,
+        "aria-invalid": error ? true : children.props["aria-invalid"],
+    });
+    return createElement("div", { ...props, className: `spui-field ${className}`.trim() }, createElement("label", { htmlFor: id }, label, required && createElement("span", { "aria-hidden": true }, " *")), control, hint && createElement("div", { id: `${id}-hint`, className: "spui-hint" }, hint), error && createElement("div", { id: `${id}-error`, className: "spui-error", role: "alert" }, error));
+}

package/dist/file-dropzone.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type InputHTMLAttributes, type ReactElement } from "react";
+export type FileDropzoneProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "aria-label" | "aria-labelledby" | "onDrop" | "onDragOver"> & {
+    id: string;
+    label: string;
+    hint?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    files?: readonly File[];
+    onFiles: (files: File[]) => void;
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "name" | "accept" | "multiple" | "disabled" | "required" | "onChange">;
+};
+export declare function FileDropzone({ id, label, hint, accept, multiple, disabled, required, name, files, onFiles, inputProps, className, ...props }: FileDropzoneProps): ReactElement;

package/dist/file-dropzone.js

@@ -0,0 +1,21 @@
+import { createElement } from "react";
+export function FileDropzone({ id, label, hint, accept, multiple = true, disabled = false, required = false, name, files = [], onFiles, inputProps, className = "", ...props }) {
+    const notifyFiles = (incoming) => {
+        if (!disabled)
+            onFiles(Array.from(incoming ?? []).slice(0, multiple ? undefined : 1));
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        notifyFiles(event.dataTransfer.files);
+    };
+    return createElement("div", {
+        ...props, role: "group", "aria-labelledby": `${id}-label`, className: `spui-file-dropzone ${className}`.trim(),
+        onDragOver: (event) => event.preventDefault(),
+        onDrop: handleDrop,
+    }, createElement("label", { id: `${id}-label`, htmlFor: id }, label), hint && createElement("p", { id: `${id}-hint`, className: "spui-hint" }, hint), createElement("input", {
+        ...inputProps, id, name, type: "file", accept, multiple, disabled, required,
+        "aria-describedby": [inputProps?.["aria-describedby"], hint && `${id}-hint`].filter(Boolean).join(" ") || undefined,
+        onChange: (event) => notifyFiles(event.currentTarget.files),
+        className: `spui-file-input ${inputProps?.className ?? ""}`.trim(),
+    }), createElement("span", { className: "spui-file-drop-hint", "aria-hidden": true }, "Drop files here or choose files"), createElement("span", { className: "spui-sr-only", role: "status", "aria-live": "polite" }, files.length ? `${files.length} file${files.length === 1 ? "" : "s"} selected` : "No files selected"));
+}

package/dist/filter-bar.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type FilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "aria-label"> & {
+    label: string;
+    children?: ReactNode;
+    onClear?: () => void;
+    clearLabel?: string;
+    activeFilterCount?: number;
+};
+export declare function FilterBar({ label, children, onClear, clearLabel, activeFilterCount, className, ...props }: FilterBarProps): ReactElement;

package/dist/filter-bar.js

@@ -0,0 +1,9 @@
+import { createElement } from "react";
+export function FilterBar({ label, children, onClear, clearLabel = "Clear filters", activeFilterCount, className = "", ...props }) {
+    return createElement("div", {
+        ...props, role: "search", "aria-label": label, className: `spui-filter-bar ${className}`.trim(),
+    }, createElement("div", { className: "spui-filter-controls" }, children), onClear && createElement("button", {
+        type: "button", className: "spui-filter-clear", onClick: onClear,
+        disabled: activeFilterCount === 0,
+    }, clearLabel));
+}

package/dist/image.d.ts

@@ -0,0 +1,5 @@
+import { type ImgHTMLAttributes, type ReactElement } from "react";
+export type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
+    alt: string;
+};
+export declare function Image({ className, ...props }: ImageProps): ReactElement;

package/dist/image.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Image({ className = "", ...props }) {
+    return createElement("img", { ...props, className: `spui-image ${className}`.trim() });
+}