@nxgt/material 3.56.0 → 3.58.0

package/dist/lib/components/ui/selection/checkbox-group/checkbox-group.d.ts

@@ -1,24 +1,3 @@
-import { ComponentProps, ReactNode } from 'react';
-export type CheckboxGroupProps = {
-    options: {
-        value: string;
-        label: ReactNode;
-        /** Shown after the label and added to its accessible name. */
-        count?: number;
-    }[];
-    label?: ReactNode;
-    helperText?: ReactNode;
-    error?: boolean;
-    disabled?: boolean;
-    value?: string[];
-    /** On every checkbox of the group. */
-    name?: string;
-    onValueChange?: (value: string[]) => void;
-    /**
-     * `'horizontal'`: the options run in a row and wrap. `'vertical'`: one
-     * per line. Left out, the group keeps its long-standing layout, one per
-     * line, so an app that never set it does not change.
-     */
-    orientation?: 'vertical' | 'horizontal';
-} & ComponentProps<'div'>;
+import { CheckboxGroupProps } from './types.js';
+export type { CheckboxGroupProps };
 export declare function CheckboxGroup({ options, label, helperText, error, value, className, disabled, onValueChange, orientation, id, name, 'aria-invalid': ariaInvalid, ...props }: CheckboxGroupProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/checkbox-group/partials/checkbox-group-options.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxGroupProps } from '../types.js';
+type Props = Pick<CheckboxGroupProps, 'options' | 'disabled' | 'name'> & {
+    value: string[];
+    groupId: string;
+    orientation: CheckboxGroupProps['orientation'];
+    onValueChange?: (value: string[]) => void;
+};
+/** The group's checkboxes, one per option. */
+export declare function CheckboxGroupOptions({ options, value, disabled, groupId, name, orientation, onValueChange, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/selection/checkbox-group/types.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode } from 'react';
+export type CheckboxGroupProps = {
+    options: {
+        value: string;
+        label: ReactNode;
+        /** Shown after the label and added to its accessible name. */
+        count?: number;
+    }[];
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    value?: string[];
+    /** On every checkbox of the group. */
+    name?: string;
+    onValueChange?: (value: string[]) => void;
+    /**
+     * `'horizontal'`: the options run in a row and wrap. `'vertical'`: one
+     * per line. Left out, the group keeps its long-standing layout, one per
+     * line, so an app that never set it does not change.
+     */
+    orientation?: 'vertical' | 'horizontal';
+} & ComponentProps<'div'>;

package/dist/lib/components/ui/selection/color-swatches/color-swatches.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
+import { ColorSwatchesSize } from './types.js';
 /** A colour offered: a CSS colour, or one with its own name. */
 export type ColorSwatch = string | {
     value: string;
     label?: string;
 };
-export type ColorSwatchesSize = 'xs' | 'sm' | 'md' | 'lg';
+export type { ColorSwatchesSize } from './types.js';
 export type ColorSwatchesProps = {
     colors: readonly ColorSwatch[];
     /** The chosen colour (controlled). */

package/dist/lib/components/ui/selection/color-swatches/color-swatches.utils.d.ts

@@ -5,3 +5,6 @@ export declare function swatchLabel(item: {
     value: string;
     label?: string;
 }): string;
+export declare function sameColor(a?: string, b?: string): boolean;
+/** `<input type="color">` takes `#rrggbb` only. */
+export declare function toHexInput(color?: string): string;

package/dist/lib/components/ui/selection/color-swatches/partials/color-swatch-button.d.ts

@@ -0,0 +1,13 @@
+import { ColorSwatchesSize } from '../types.js';
+type Props = {
+    item: {
+        value: string;
+        label?: string;
+    };
+    size: ColorSwatchesSize;
+    pressed: boolean;
+    onChoose: (color: string) => void;
+};
+/** One colour of the row: a pressed button, a check on the chosen one. */
+export declare function ColorSwatchButton({ item, size, pressed, onChoose }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/selection/color-swatches/partials/color-swatch-styles.d.ts

@@ -0,0 +1,3 @@
+import { ColorSwatchesSize } from '../types.js';
+export declare const SIZES: Record<ColorSwatchesSize, string>;
+export declare const SWATCH = "relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-foreground/15 bg-(--swatch) shadow-xs outline-none transition-[box-shadow,transform] duration-200 hover:scale-110 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:hover:scale-100";

package/dist/lib/components/ui/selection/color-swatches/partials/custom-color-swatch.d.ts

@@ -0,0 +1,11 @@
+import { ColorSwatchesSize } from '../types.js';
+type Props = {
+    size: ColorSwatchesSize;
+    current?: string;
+    /** The current colour is one of the listed swatches. */
+    listed: boolean;
+    onChoose: (color: string) => void;
+};
+/** The last swatch: opens the system colour picker, for any colour. */
+export declare function CustomColorSwatch({ size, current, listed, onChoose }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/selection/color-swatches/types.d.ts

@@ -0,0 +1 @@
+export type ColorSwatchesSize = 'xs' | 'sm' | 'md' | 'lg';

package/dist/lib/components/ui/selection/combobox-field/combobox-field.d.ts

@@ -1,48 +1,3 @@
-import { FocusEventHandler, ReactNode } from 'react';
-import { ComboboxInputSize } from '../combobox/combobox.js';
-export type ComboboxOption = {
-    value: string;
-    label: string;
-    /** A muted second line under the label, in the list only. */
-    description?: string;
-    /** Options with the same `group` are listed under its header, with their count. */
-    group?: string;
-};
-export type ComboboxFieldProps = {
-    label?: ReactNode;
-    helperText?: ReactNode;
-    error?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    className?: string;
-    name?: string;
-    id?: string;
-    placeholder?: string;
-    options: ComboboxOption[];
-    value?: string | null;
-    onChange?: (value: string | null) => void;
-    /** 36px (`sm`), 44px (`default`) or 52px (`lg`). */
-    size?: ComboboxInputSize;
-    /** A flag, an avatar or an icon before the input, while no option's own shows. */
-    leading?: ReactNode;
-    /**
-     * Before each option's label, and before the input while that option is
-     * picked (in place of `leading`): a flag, an avatar, an icon. Hidden from
-     * screen readers.
-     */
-    getOptionLeading?: (value: string) => ReactNode;
-    /**
-     * Muted text after each option's label, and after the input while that
-     * option is picked ("GMT+2"); the input's description then includes it,
-     * so give it text.
-     */
-    getOptionSuffix?: (value: string) => ReactNode;
-    /** What the list says when nothing matches. Defaults to "No results". */
-    empty?: ReactNode;
-    /** Name the input without a `label`. */
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-};
-export declare function ComboboxField({ label, helperText, error, required, disabled, className, name, id, placeholder, options, value, onChange, size, leading, getOptionLeading, getOptionSuffix, empty, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, onFocus, onBlur, }: ComboboxFieldProps): import("react").JSX.Element;
+import { ComboboxFieldProps } from './types.js';
+export type { ComboboxFieldProps, ComboboxOption } from './types.js';
+export declare function ComboboxField(props: ComboboxFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/combobox-field/partials/combobox-field-input.d.ts

@@ -0,0 +1,4 @@
+import { ComboboxFieldProps } from '../types.js';
+import { ComboboxFieldAria } from '../use-combobox-field-aria.js';
+/** The field's input: its clear button, leading and suffix. */
+export declare function ComboboxFieldInput({ name, disabled, placeholder, error, required, size, onFocus, onBlur, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, inputId, suffixId, labelId, describedBy, lead, suffix, }: ComboboxFieldProps & ComboboxFieldAria): import("react").JSX.Element;

package/dist/lib/components/ui/selection/combobox-field/types.d.ts

@@ -0,0 +1,47 @@
+import { FocusEventHandler, ReactNode } from 'react';
+import { ComboboxInputSize } from '../combobox/combobox.js';
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    /** A muted second line under the label, in the list only. */
+    description?: string;
+    /** Options with the same `group` are listed under its header, with their count. */
+    group?: string;
+};
+export type ComboboxFieldProps = {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    name?: string;
+    id?: string;
+    placeholder?: string;
+    options: ComboboxOption[];
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    /** 36px (`sm`), 44px (`default`) or 52px (`lg`). */
+    size?: ComboboxInputSize;
+    /** A flag, an avatar or an icon before the input, while no option's own shows. */
+    leading?: ReactNode;
+    /**
+     * Before each option's label, and before the input while that option is
+     * picked (in place of `leading`): a flag, an avatar, an icon. Hidden from
+     * screen readers.
+     */
+    getOptionLeading?: (value: string) => ReactNode;
+    /**
+     * Muted text after each option's label, and after the input while that
+     * option is picked ("GMT+2"); the input's description then includes it,
+     * so give it text.
+     */
+    getOptionSuffix?: (value: string) => ReactNode;
+    /** What the list says when nothing matches. Defaults to "No results". */
+    empty?: ReactNode;
+    /** Name the input without a `label`. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+};

package/dist/lib/components/ui/selection/combobox-field/use-combobox-field-aria.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ComboboxFieldProps } from './types.js';
+export type ComboboxFieldAria = {
+    inputId: string;
+    helperId: string;
+    suffixId: string;
+    labelId?: string;
+    describedBy?: string;
+    /** Before the input: the picked option's own, else the field's. */
+    lead: ReactNode;
+    /** After the input: the picked option's suffix. */
+    suffix: ReactNode;
+};
+/** The ids, descriptions and decorations the input of the field carries. */
+export declare function useComboboxFieldAria({ id, label, helperText, value, leading, getOptionLeading, getOptionSuffix, 'aria-labelledby': ariaLabelledBy, }: ComboboxFieldProps, ownLabelId: string): ComboboxFieldAria;

package/dist/lib/components/ui/selection/combobox-field/use-combobox-field-items.d.ts

@@ -1,4 +1,4 @@
-import { ComboboxOption } from './combobox-field.js';
+import { ComboboxOption } from './types.js';
 /**
  * ComboboxField's items for Base UI, its labels, descriptions and filter.
  * Internal.

package/dist/lib/components/ui/selection/combobox-field/use-typed-query.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What the user typed, to mark in each option. Only typing sets it: a pick, a
+ * clear, Escape or a new `value` fill the input with a label, which marks
+ * nothing.
+ */
+export declare function useTypedQuery(): readonly [string, (text: string, details: {
+    reason: string;
+}) => void];

package/dist/lib/components/ui/selection/option-tile/use-status-text.d.ts

@@ -0,0 +1,3 @@
+import { OptionTileStatus } from './option-tile.js';
+/** What a revealed answer says in words, so colour never says it alone. */
+export declare function useStatusText(status?: OptionTileStatus): string | null;

package/dist/lib/components/ui/selection/radio-group/partials/radio-group-options.d.ts

@@ -0,0 +1,7 @@
+import { RadioGroupProps } from '../types.js';
+type Props = Pick<RadioGroupProps, 'options' | 'orientation' | 'name' | 'disabled'> & {
+    groupId: string;
+};
+/** The options, each a radio and its label. */
+export declare function RadioGroupOptions({ options, orientation, groupId, name, disabled, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/selection/radio-group/partials/radio-group-parts.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+export declare function RadioGroupBase({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>): import("react").JSX.Element;
+export declare function RadioGroupItem({ className, value, disabled, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>): import("react").JSX.Element;

package/dist/lib/components/ui/selection/radio-group/radio-group.d.ts

@@ -1,28 +1,7 @@
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
-import { ComponentProps, ReactNode } from 'react';
-export type RadioGroupOption = {
-    value: string;
-    label: ReactNode;
-    /** Rendered and announced as disabled, skipped by the arrow keys. */
-    disabled?: boolean;
-    /** Shown after the label and added to its accessible name. */
-    count?: number;
-};
-export type RadioGroupProps = {
-    options: RadioGroupOption[];
-    label?: ReactNode;
-    helperText?: ReactNode;
-    error?: boolean;
-    /**
-     * `'horizontal'` (the default): the options run in a row and wrap onto the
-     * next line when they do not fit. `'vertical'`:
-     * one per line. Every arrow key moves the selection in both.
-     */
-    orientation?: 'vertical' | 'horizontal';
-} & Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, 'orientation'>;
+import { RadioGroupBase, RadioGroupItem } from './partials/radio-group-parts.js';
+import { RadioGroupProps } from './types.js';
+export type { RadioGroupOption, RadioGroupProps, } from './types.js';
 declare function RadioGroup({ options, label, helperText, error, orientation, className, id, ...props }: RadioGroupProps): import("react").JSX.Element;
-declare function RadioGroupBase({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>): import("react").JSX.Element;
-declare function RadioGroupItem({ className, value, disabled, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>): import("react").JSX.Element;
 /**
  * The labelled `RadioGroup` under `@nxgt/material-vue`'s name, so code reads
  * the same in both libraries. Same component, same props. The names may

package/dist/lib/components/ui/selection/radio-group/types.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import { ComponentProps, ReactNode } from 'react';
+export type RadioGroupOption = {
+    value: string;
+    label: ReactNode;
+    /** Rendered and announced as disabled, skipped by the arrow keys. */
+    disabled?: boolean;
+    /** Shown after the label and added to its accessible name. */
+    count?: number;
+};
+export type RadioGroupProps = {
+    options: RadioGroupOption[];
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    /**
+     * `'horizontal'` (the default): the options run in a row and wrap onto the
+     * next line when they do not fit. `'vertical'`:
+     * one per line. Every arrow key moves the selection in both.
+     */
+    orientation?: 'vertical' | 'horizontal';
+} & Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, 'orientation'>;

package/dist/lib/components/ui/selection/sortable-list/partials/sortable-list-footer.d.ts

@@ -0,0 +1,4 @@
+/** Under the list: how to drag, and how many rows it shows. */
+export declare function SortableListFooter({ count }: {
+    count: number;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/sortable-list/partials/sortable-list-frame.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { SortableListAppearance, SortableListDensity } from '../types.js';
+type Props = {
+    label?: ReactNode;
+    labelId?: string;
+    helperText?: ReactNode;
+    error?: boolean;
+    required?: boolean;
+    name?: string;
+    className?: string;
+    searchable: boolean;
+    draggable: boolean;
+    disabled: boolean;
+    height: number | string;
+    density: SortableListDensity;
+    appearance: SortableListAppearance;
+};
+/** The field: its label, the searchable pane, the live region and the helper. */
+export declare function SortableListFrame({ label, labelId, helperText, error, required, name, className, searchable, draggable, disabled, height, density, appearance, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/selection/sortable-list/partials/sortable-list-row-parts.d.ts

@@ -0,0 +1,20 @@
+import { SortableListLabels } from '../sortable-list-context.js';
+import { SortableListDragActivator, SortableListItem } from '../types.js';
+/** The row's start mark: a lock, the drag handle, or an empty slot. */
+export declare function SortableListGrip({ locked, canDrag, activator, labels, }: {
+    locked?: boolean;
+    canDrag: boolean;
+    activator: SortableListDragActivator;
+    labels: SortableListLabels;
+}): import("react").JSX.Element;
+/** The row's rank in the whole order (1, 2, 3...). */
+export declare function SortableListRank({ position, compact, }: {
+    position: number;
+    compact: boolean;
+}): import("react").JSX.Element;
+/** What starts a row: its grip (or lock) and its rank, when the list shows them. */
+export declare function SortableListRowLeading({ item, canDrag, position, }: {
+    item: SortableListItem;
+    canDrag: boolean;
+    position: number;
+}): import("react").JSX.Element;