@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/select.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement, type SelectHTMLAttributes } from "react";
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+export declare function Select({ className, ...props }: SelectProps): ReactElement;

package/dist/select.js

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

package/dist/sharepoint-field.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+import { type LookupOption } from "./lookup-picker.js";
+import { type PersonOption } from "./person-picker.js";
+export type SharePointFieldType = "text" | "multiline" | "number" | "date" | "boolean" | "choice" | "person" | "lookup";
+export type SharePointFieldProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    name: string;
+    label: string;
+    type: SharePointFieldType;
+    value?: string | boolean;
+    defaultValue?: string | boolean;
+    required?: boolean;
+    hint?: string;
+    choices?: readonly string[];
+    people?: readonly PersonOption[];
+    lookups?: readonly LookupOption[];
+    onValueChange?: (value: string | boolean) => void;
+};
+export declare function SharePointField({ name, label, type, value, defaultValue, required, hint, choices, people, lookups, onValueChange, className, ...props }: SharePointFieldProps): ReactElement;

package/dist/sharepoint-field.js

@@ -0,0 +1,54 @@
+import { createElement, useId } from "react";
+import { Checkbox } from "./checkbox.js";
+import { Field } from "./field.js";
+import { Input } from "./input.js";
+import { LookupPicker } from "./lookup-picker.js";
+import { PersonPicker } from "./person-picker.js";
+import { Select } from "./select.js";
+import { TextArea } from "./textarea.js";
+export function SharePointField({ name, label, type, value, defaultValue, required, hint, choices = [], people = [], lookups = [], onValueChange, className = "", ...props }) {
+    const id = useId();
+    const onStringChange = (event) => onValueChange?.(event.currentTarget.value);
+    const control = type === "boolean"
+        ? createElement(Checkbox, {
+            name, required,
+            checked: value === undefined ? undefined : Boolean(value),
+            defaultChecked: value === undefined ? Boolean(defaultValue) : undefined,
+            onChange: event => onValueChange?.(event.currentTarget.checked),
+        })
+        : type === "choice"
+            ? createElement(Select, {
+                name, required, onChange: onStringChange,
+                value: value === undefined ? undefined : typeof value === "string" ? value : "",
+                defaultValue: value === undefined ? typeof defaultValue === "string" ? defaultValue : "" : undefined,
+            }, createElement("option", { value: "" }, "Choose an option"), choices.map(choice => createElement("option", { key: choice, value: choice }, choice)))
+            : type === "person"
+                ? createElement(PersonPicker, {
+                    id, name, label, options: people, required, onChange: onStringChange,
+                    value: typeof value === "string" ? value : undefined,
+                    defaultValue: typeof value === "string" ? undefined : typeof defaultValue === "string" ? defaultValue : undefined,
+                    "aria-describedby": hint ? `${id}-hint` : undefined,
+                })
+                : type === "lookup"
+                    ? createElement(LookupPicker, {
+                        id, name, label, options: lookups, required, onChange: onStringChange,
+                        value: typeof value === "string" ? value : undefined,
+                        defaultValue: typeof value === "string" ? undefined : typeof defaultValue === "string" ? defaultValue : undefined,
+                        "aria-describedby": hint ? `${id}-hint` : undefined,
+                    })
+                    : type === "multiline"
+                        ? createElement(TextArea, {
+                            name, required, onChange: onStringChange,
+                            value: value === undefined ? undefined : typeof value === "string" ? value : "",
+                            defaultValue: value === undefined ? typeof defaultValue === "string" ? defaultValue : "" : undefined,
+                        })
+                        : createElement(Input, {
+                            name, type: type === "number" || type === "date" ? type : "text",
+                            required, onChange: onStringChange,
+                            value: value === undefined ? undefined : typeof value === "string" ? value : "",
+                            defaultValue: value === undefined ? typeof defaultValue === "string" ? defaultValue : "" : undefined,
+                        });
+    return createElement("div", { ...props, className: `spui-sharepoint-field ${className}`.trim() }, type === "person" || type === "lookup"
+        ? control
+        : createElement(Field, { id, label, hint, required, children: control }), (type === "person" || type === "lookup") && hint && createElement("span", { id: `${id}-hint`, className: "spui-hint" }, hint));
+}

package/dist/skeleton.d.ts

@@ -0,0 +1,6 @@
+import { type CSSProperties, type HTMLAttributes, type ReactElement } from "react";
+export type SkeletonProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    width?: CSSProperties["width"];
+    height?: CSSProperties["height"];
+};
+export declare function Skeleton({ width, height, className, style, ...props }: SkeletonProps): ReactElement;

package/dist/skeleton.js

@@ -0,0 +1,9 @@
+import { createElement } from "react";
+export function Skeleton({ width = "100%", height = "1em", className = "", style, ...props }) {
+    return createElement("span", {
+        ...props,
+        "aria-hidden": true,
+        className: `spui-skeleton ${className}`.trim(),
+        style: { ...style, width, height },
+    });
+}

package/dist/spinner.d.ts

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

package/dist/spinner.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Spinner({ label, className = "", ...props }) {
+    return createElement("span", { ...props, role: "status", "aria-label": label, className: `spui-spinner ${className}`.trim() }, createElement("span", { "aria-hidden": true }));
+}

package/dist/swatch-picker.d.ts

@@ -0,0 +1,17 @@
+import { type ChangeEventHandler, type FieldsetHTMLAttributes, type ReactElement } from "react";
+export type SwatchOption = {
+    value: string;
+    label: string;
+    color?: string;
+    src?: string;
+    disabled?: boolean;
+};
+export type SwatchPickerProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" | "name"> & {
+    name: string;
+    label: string;
+    options: readonly SwatchOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+export declare function SwatchPicker({ name, label, options, value, defaultValue, onChange, className, ...props }: SwatchPickerProps): ReactElement;

package/dist/swatch-picker.js

@@ -0,0 +1,11 @@
+import { createElement, useId } from "react";
+export function SwatchPicker({ name, label, options, value, defaultValue, onChange, className = "", ...props }) {
+    const id = useId();
+    return createElement("fieldset", { ...props, className: `spui-swatch-picker ${className}`.trim() }, createElement("legend", null, label), options.map((option, index) => createElement("label", { key: option.value, htmlFor: `${id}-${index}`, className: "spui-swatch-option" }, createElement("input", {
+        id: `${id}-${index}`, type: "radio", name, value: option.value, disabled: option.disabled,
+        checked: value === undefined ? undefined : value === option.value,
+        defaultChecked: value === undefined && defaultValue === option.value,
+        onChange,
+    }), option.src ? createElement("img", { src: option.src, alt: "", "aria-hidden": true, className: "spui-swatch-dot" })
+        : createElement("span", { "aria-hidden": true, className: "spui-swatch-dot", style: { backgroundColor: option.color } }), createElement("span", { className: "spui-swatch-label" }, option.label))));
+}

package/dist/switch.d.ts

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

package/dist/switch.js

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

package/dist/table.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement, type ReactNode, type TableHTMLAttributes } from "react";
+export type TableProps = Omit<TableHTMLAttributes<HTMLTableElement>, "children"> & {
+    caption: string;
+    children?: ReactNode;
+};
+export declare function Table({ caption, children, className, ...props }: TableProps): ReactElement;

package/dist/table.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function Table({ caption, children, className = "", ...props }) {
+    return createElement("table", { ...props, className: `spui-table ${className}`.trim() }, createElement("caption", null, caption), children);
+}

package/dist/tabs.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type TabItem = {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+};
+export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    items: readonly TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function Tabs({ label, items, value, defaultValue, onValueChange, className, ...props }: TabsProps): ReactElement;

package/dist/tabs.js

@@ -0,0 +1,30 @@
+import { createElement, useId, useState } from "react";
+export function Tabs({ label, items, value, defaultValue, onValueChange, className = "", ...props }) {
+    const baseId = useId();
+    const [internalValue, setInternalValue] = useState(defaultValue ?? items[0]?.id ?? "");
+    const selected = value ?? internalValue;
+    const select = (next) => {
+        if (value === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    };
+    const moveFocus = (event) => {
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) || !items.length)
+            return;
+        event.preventDefault();
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        const current = [...event.currentTarget.querySelectorAll("[role=tab]")].indexOf(event.target);
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
+            : (current + (event.key === "ArrowRight" !== rtl ? 1 : -1) + items.length) % items.length;
+        event.currentTarget.querySelectorAll("[role=tab]")[next]?.focus();
+        select(items[next].id);
+    };
+    const activeIndex = Math.max(0, items.findIndex(item => item.id === selected));
+    return createElement("div", { ...props, className: `spui-tabs ${className}`.trim() }, createElement("div", { role: "tablist", "aria-label": label, onKeyDown: moveFocus }, items.map((item, index) => createElement("button", {
+        key: item.id, id: `${baseId}-tab-${index}`, type: "button", role: "tab",
+        "aria-selected": index === activeIndex, "aria-controls": `${baseId}-panel-${index}`,
+        tabIndex: index === activeIndex ? 0 : -1, onClick: () => select(item.id),
+    }, item.label))), items.map((item, index) => index === activeIndex && createElement("div", {
+        key: item.id, id: `${baseId}-panel-${index}`, role: "tabpanel", tabIndex: 0, "aria-labelledby": `${baseId}-tab-${index}`,
+    }, item.content)));
+}

package/dist/tag-group.d.ts

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

package/dist/tag-group.js

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

package/dist/tag-picker.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement, type SelectHTMLAttributes } from "react";
+export type TagPickerOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type TagPickerProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "children" | "id" | "multiple"> & {
+    id: string;
+    label: string;
+    options: readonly TagPickerOption[];
+};
+export declare function TagPicker({ id, label, options, className, size, ...props }: TagPickerProps): ReactElement;

package/dist/tag-picker.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function TagPicker({ id, label, options, className = "", size = 4, ...props }) {
+    return createElement("div", { className: "spui-field" }, createElement("label", { htmlFor: id }, label), createElement("select", { ...props, id, multiple: true, size, className: `spui-select spui-tag-picker ${className}`.trim() }, options.map(option => createElement("option", { key: option.value, value: option.value, disabled: option.disabled }, option.label))));
+}

package/dist/tag.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    children?: ReactNode;
+    onRemove?: () => void;
+    removeLabel?: string;
+};
+export declare function Tag({ className, children, onRemove, removeLabel, ...props }: TagProps): ReactElement;

package/dist/tag.js

@@ -0,0 +1,5 @@
+import { createElement } from "react";
+export function Tag({ className = "", children, onRemove, removeLabel, ...props }) {
+    const label = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove tag");
+    return createElement("span", { ...props, className: `spui-tag ${className}`.trim() }, children, onRemove && createElement("button", { type: "button", className: "spui-tag-remove", "aria-label": label, onClick: onRemove }, "Remove"));
+}

package/dist/text.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type TextProps = HTMLAttributes<HTMLElement> & {
+    as?: "p" | "span" | "strong" | "small" | "div";
+};
+export declare function Text({ as, className, ...props }: TextProps): ReactElement;

package/dist/text.js

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

package/dist/textarea.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement, type TextareaHTMLAttributes } from "react";
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare function TextArea({ className, ...props }: TextAreaProps): ReactElement;

package/dist/textarea.js

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

package/dist/theme.d.ts

@@ -1,177 +1,17 @@
-import { type SharePointUIAppearance, type SharePointUIBaseAppearance, type SharePointUIDensity, type SharePointUIStyleTokens } from "./appearance.js";
-/** SPFx theme data is copied through without a lossy, hand-maintained token allowlist. */
+import { type ReactNode } from "react";
 export type SharePointTheme = {
-    palette?: Record<string, string | undefined>;
-    semanticColors?: Record<string, string | undefined>;
-    /** Raw Fluent v8 theme tokens exposed as `--spui-effects-*`, `--spui-spacing-*`, and `--spui-fonts-*-*` variables. */
-    effects?: Record<string, string | undefined>;
-    spacing?: Record<string, string | undefined>;
-    fonts?: Record<string, Record<string, string | number | undefined> | undefined>;
-    defaultFontStyle?: Record<string, string | number | undefined>;
-    isInverted?: boolean;
+    accent: string;
+    accentText: string;
+    background: string;
+    border: string;
+    radius: string;
+    surface: string;
+    text: string;
+    muted: string;
 };
-export type FluentThemeTokens = Record<string, string | number | undefined>;
-/** Semantic theme values are translated to the library's shared design tokens. */
-export type SharePointUIDesignTheme = {
-    /** Raw named SharePoint palette values, exposed as `--spui-palette-*` CSS variables. `themePrimary` also seeds the accent when no explicit accent is set. */
-    palette?: Record<string, string>;
-    /** Any Fluent v9 theme values, exposed under their native CSS variable names and composable with the other design-pack groups. */
-    fluentTokens?: FluentThemeTokens;
-    /** Brand seed for an accent scale and softly tinted surfaces. Hex values also get an AA-aware on-accent foreground; other CSS colors can set colors.accentForeground explicitly. */
-    brandColor?: string;
-    /** App- or component-specific CSS custom properties, merged after semantic roles and before direct provider tokens. */
-    customProperties?: Record<`--${string}`, string | number>;
-    colors?: {
-        accent?: string;
-        accentHover?: string;
-        accentPressed?: string;
-        accentSubtle?: string;
-        accentSubtleHover?: string;
-        accentSubtlePressed?: string;
-        accentForeground?: string;
-        secondaryHover?: string;
-        foreground?: string;
-        foregroundMuted?: string;
-        foregroundTertiary?: string;
-        foregroundSubtle?: string;
-        foregroundDisabled?: string;
-        canvas?: string;
-        surface?: string;
-        surfaceHover?: string;
-        surfaceAlt?: string;
-        surfaceSecondary?: string;
-        surfaceSubtle?: string;
-        surfaceRaised?: string;
-        surfaceSunken?: string;
-        border?: string;
-        borderSubtle?: string;
-        borderStrong?: string;
-        borderFocus?: string;
-        borderDisabled?: string;
-        selectedBackground?: string;
-        selectedBackgroundHover?: string;
-        selectedForeground?: string;
-        selectedBorder?: string;
-        link?: string;
-        linkVisited?: string;
-        overlay?: string;
-        info?: string;
-        infoSurface?: string;
-        success?: string;
-        successSurface?: string;
-        warning?: string;
-        warningSurface?: string;
-        danger?: string;
-        dangerSurface?: string;
-        focus?: string;
-        focusRing?: string;
-    };
-    typography?: {
-        fontFamily?: string;
-        fontFamilyMono?: string;
-        fontSize?: string;
-        fontSizeSmall?: string;
-        fontSizeLarge?: string;
-        fontSizeHeading?: string;
-        fontWeight?: string | number;
-        fontWeightStrong?: string | number;
-        lineHeight?: string;
-        lineHeightHeading?: string;
-        /** Fluent-compatible type ramp; values flow to the same CSS variables used by the component styles. */
-        fontSize100?: string;
-        fontSize200?: string;
-        fontSize300?: string;
-        fontSize400?: string;
-        fontSize500?: string;
-        fontSize600?: string;
-        fontSize700?: string;
-        fontSize800?: string;
-        fontSize900?: string;
-        fontSize1000?: string;
-        fontSize1100?: string;
-        fontSize1200?: string;
-        lineHeight100?: string;
-        lineHeight200?: string;
-        lineHeight300?: string;
-        lineHeight400?: string;
-        lineHeight500?: string;
-        lineHeight600?: string;
-        lineHeight700?: string;
-        lineHeight800?: string;
-        lineHeight900?: string;
-        lineHeight1000?: string;
-        lineHeight1100?: string;
-        lineHeight1200?: string;
-        fontWeightRegular?: string | number;
-        fontWeightMedium?: string | number;
-        fontWeightSemibold?: string | number;
-        fontWeightBold?: string | number;
-        letterSpacing?: string;
-    };
-    spacing?: {
-        controlHeight?: string;
-        controlGap?: string;
-        controlPaddingInline?: string;
-        controlPaddingBlock?: string;
-        cardPadding?: string;
-        fieldGap?: string;
-        sectionGap?: string;
-        listGap?: string;
-        touchTargetMin?: string;
-    };
-    shape?: {
-        controlRadius?: string;
-        inputRadius?: string;
-        cardRadius?: string;
-        surfaceRadius?: string;
-        pillRadius?: string;
-        focusRingWidth?: string;
-    };
-    elevation?: {
-        cardShadow?: string;
-        controlShadow?: string;
-        popoverShadow?: string;
-        overlayShadow?: string;
-        focusShadow?: string;
-    };
-    /** Material controls tune theme-derived translucent surfaces without replacing their brand or neutral colors. */
-    materials?: {
-        glassBlur?: string;
-        glassSaturation?: string;
-        glassSurfaceOpacity?: string;
-        glassCanvasOpacity?: string;
-        glassBorderOpacity?: string;
-    };
-    motion?: {
-        durationFast?: string;
-        durationNormal?: string;
-        durationSlow?: string;
-        easingStandard?: string;
-        easingEmphasized?: string;
-    };
-    /** Shared stacking order for menus, floating pickers, and notifications. Browser top-layer surfaces remain above these layers. */
-    layers?: {
-        dropdown?: string | number;
-        popover?: string | number;
-        toast?: string | number;
-    };
-};
-export type SharePointThemeColorPreset = {
-    name: string;
-    value: string;
-    color: string;
-    label: string;
-};
-/** Build named swatches from the current SharePoint palette; custom tenant keys are preserved. */
-export declare function getSharePointThemeColorPresets(palette?: Readonly<Record<string, string | undefined>>, labelForKey?: (key: string) => string): SharePointThemeColorPreset[];
-/** Compose reusable theme packs left-to-right; later packs override earlier values within each group. */
-export declare function composeSharePointUIDesignThemes(...themes: Array<SharePointUIDesignTheme | undefined>): SharePointUIDesignTheme;
-export declare function getSharePointUIDesignTokens(theme?: SharePointUIDesignTheme): Record<string, string>;
-export type SharePointUIThemeOptions = {
-    appearance?: SharePointUIAppearance;
-    baseAppearance?: SharePointUIBaseAppearance;
-    density?: SharePointUIDensity;
-    theme?: SharePointUIDesignTheme;
-    tokens?: Partial<SharePointUIStyleTokens>;
-};
-export declare function applySharePointTheme(target: HTMLElement, theme?: SharePointTheme, fluentTokens?: FluentThemeTokens, options?: SharePointUIThemeOptions): void;
+export declare function createSharePointTheme(overrides?: Partial<SharePointTheme>): SharePointTheme;
+export declare function SharePointThemeProvider({ children, theme, }: {
+    children: ReactNode;
+    theme?: Partial<SharePointTheme>;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<SharePointTheme>>;
+export declare function useSharePointTheme(): SharePointTheme;