@allxsmith/bestax-bulma 5.55.0 → 5.57.0

package/dist/index.esm.js

@@ -110,6 +110,8 @@ export { DateTimeInputBase } from './esm/form/DateTimeInputBase.js';
 export { DateTimeInput } from './esm/form/DateTimeInput.js';
 export { DateRangeInputBase } from './esm/form/DateRangeInputBase.js';
 export { DateRangeInput } from './esm/form/DateRangeInput.js';
+export { ColorInputBase } from './esm/form/ColorInputBase.js';
+export { ColorInput } from './esm/form/ColorInput.js';
 export { useInsideControl, useInsideField } from './esm/form/FormContext.js';
 export { Cell } from './esm/grid/Cell.js';
 export { Grid } from './esm/grid/Grid.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/components/DataTable.d.ts

@@ -3,7 +3,7 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
 import { TrProps } from '../elements/Tr.js';
 import { type DataTableColumn, type DataTableModel, type DataTableStateOptions } from './useDataTable.js';
 export { useDataTable } from './useDataTable.js';
-export type { DataTableCellContext, DataTableCellProps, DataTableCheckboxProps, DataTableColumn, DataTableColumnMeta, DataTableFilters, DataTableHeaderCellProps, DataTableLabels, DataTableModel, DataTablePaginationProps, DataTableResolvedLabels, DataTableRowScope, DataTableSearchProps, DataTableSelectionMode, DataTableSort, DataTableSortButtonProps, DataTableSortDirection, DataTableState, DataTableStateOptions, UseDataTableOptions, } from './useDataTable.js';
+export type { DataTableCSVOptions, DataTableCellContext, DataTableCellProps, DataTableCheckboxProps, DataTableColumn, DataTableColumnMeta, DataTableFilters, DataTableHeaderCellProps, DataTableLabels, DataTableModel, DataTablePaginationProps, DataTableResolvedLabels, DataTableRowScope, DataTableSearchProps, DataTableSelectionMode, DataTableSort, DataTableSortButtonProps, DataTableSortDirection, DataTableState, DataTableStateOptions, UseDataTableOptions, } from './useDataTable.js';
 /**
  * Props for the DataTable component. The helper props, `className`, the
  * `ref` and the other attributes go on the wrapper `<div>`, which holds the

package/dist/types/components/useDataTable.d.ts

@@ -335,6 +335,32 @@ export interface DataTablePaginationProps {
     current: number;
     onPageChange: (page: number) => void;
 }
+/** What `toCSV` writes. */
+export interface DataTableCSVOptions {
+    /**
+     * Which rows, in the order the table shows them: the ones the search and
+     * filters let through, from every page, by default, or `all`, `page` or
+     * `selected`.
+     *
+     * @defaultValue 'filtered'
+     */
+    rows?: DataTableRowScope;
+    /** The ids of the columns to write, in that order. Every column, in the order shown, by default. */
+    columns?: string[];
+    /**
+     * Writes the columns' headers as the first line.
+     *
+     * @defaultValue true
+     */
+    header?: boolean;
+    /**
+     * What separates the fields. A semicolon suits a spreadsheet that reads
+     * a comma as the decimal point, as Excel does in much of Europe.
+     *
+     * @defaultValue ','
+     */
+    delimiter?: string;
+}
 /**
  * A table: what `useDataTable` returns, what `DataTable`'s `toolbar` is
  * given, and what its `table` takes. It reads the rows and the state, changes
@@ -367,6 +393,16 @@ export interface DataTableModel<TRow> {
     getText: (row: TRow, columnId: string) => string;
     /** What names a row: its row header's text, or its first column's. */
     getRowLabel: (row: TRow) => string;
+    /**
+     * The rows as CSV, from the columns' text (`format`, not `cell`), with a
+     * line break of `\r\n` between rows and fields quoted as RFC 4180 asks.
+     * A field that starts with `=`, `+`, `-`, `@`, a tab or a carriage return
+     * gets a `'` in front, so a spreadsheet shows it as text rather than
+     * running it as a formula, unless it's a plain number such as `-12.5`.
+     * Excel takes a file as UTF-8 only when it starts with a byte order mark,
+     * so put `\uFEFF` in front of the text when you save it for Excel.
+     */
+    toCSV: (options?: DataTableCSVOptions) => string;
     /** Whether a row is selected. */
     isSelected: (row: TRow) => boolean;
     /** Sets the sort. */

package/dist/types/form/ColorInput.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { ColorInputBaseProps } from './ColorInputBase.js';
+/**
+ * Props for the ColorInput convenience wrapper. Extends
+ * `ColorInputBaseProps` with Field-level (label, horizontal, message) and
+ * Control-level (loading, expanded) props. Inside an existing `Control` it
+ * renders no `Control` of its own, so its Control-level props do nothing
+ * there and warn in development; set them on that `Control` instead. Inside
+ * an outer `Field`, or a `Control` with no `Field` around it, it renders no
+ * `Field` of its own either. The exception is `label`, `message`,
+ * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`
+ * for them, nested in the `.control`, and warns in development. Wrap the
+ * `Control` in a `Field` instead, and set the `label`, `horizontal` and class
+ * name on that `Field`.
+ *
+ * @helperProps Helper props go on the `.colorinput` `<div>`, with
+ * `className`. The other attributes go on the text `<input>`.
+ * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
+ * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
+ */
+export interface ColorInputProps extends ColorInputBaseProps {
+    /** Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the text field via `htmlFor`, using your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */
+    label?: React.ReactNode;
+    /** Size for the label. */
+    labelSize?: FieldProps['labelSize'];
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: FieldProps['labelProps'];
+    /** Render the field with horizontal layout. */
+    horizontal?: boolean;
+    /**
+     * Shows a loading spinner on the `Control` it renders, and hides the
+     * launcher (`triggerIcon`) while it does. Inside your own `Control` it
+     * renders none, so this draws nothing and warns in development; set
+     * `isLoading` on that `Control`.
+     */
+    isLoading?: boolean;
+    /**
+     * Shows the launcher on the field's end that toggles the panel. Hidden by
+     * default while a spinner shows at the same edge: this component's
+     * `isLoading` when it renders its own `Control`, or the enclosing
+     * `Control`'s `isLoading` inside one.
+     * @defaultValue true
+     */
+    triggerIcon?: boolean;
+    /** Expand the control to fill its container. */
+    isExpanded?: boolean;
+    /** Size of the wrapping Control. */
+    controlSize?: ControlBaseProps['size'];
+    /** Help/validation text below the field. */
+    message?: React.ReactNode;
+    /** Color modifier for the help message. */
+    messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field wrapper. */
+    fieldClassName?: string;
+    /** Additional CSS classes for the Control wrapper. */
+    controlClassName?: string;
+}
+/**
+ * The `ColorInput` component is a form field for a color: type it, or open a color picker from its launcher or its swatch.
+ *
+ * The value is a CSS color string, HSL by default, or empty. The panel is
+ * the `ColorPicker`'s square, hue slider and, when asked for, alpha slider,
+ * swatches and eye dropper, in the same popover the date pickers use.
+ *
+ * @function
+ * @param {ColorInputProps} props - Props for the ColorInput.
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <ColorInput label="Brand color" defaultValue="hsl(202, 67%, 36%)" swatches="bulma" />
+ */
+export declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
+export default ColorInput;

package/dist/types/form/ColorInputBase.d.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { type ColorFormat, type ColorPickerLabels, type ColorPickerSwatch } from './ColorPicker.js';
+import { type PickerPosition } from './_pickerInternals/pickerTypes.js';
+/**
+ * Props for the raw ColorInput base. Use the higher-level `ColorInput` for
+ * Field/Control composition; `ColorInputBase` is the field and its popover
+ * only.
+ *
+ * @helperProps Helper props go on the `.colorinput` `<div>`, with
+ * `className`. The other attributes go on the text `<input>`.
+ * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
+ * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
+ */
+export interface ColorInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
+    /**
+     * The color, controlled, as a CSS color the picker reads (hex, `rgb()`,
+     * `hsl()` or a color name), or `''` for none.
+     */
+    value?: string;
+    /** The color to start with, uncontrolled; empty without one. */
+    defaultValue?: string;
+    /**
+     * Called with the color, in `format`, as it changes: on every step of a
+     * drag in the panel, on a key or a swatch, and when typed text is
+     * committed. Clearing the field calls it with `''`.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called with the color, in `format`, once a change is done: when a drag
+     * ends, and with `onChange` for everything else. The place to save it.
+     */
+    onChangeEnd?: (value: string) => void;
+    /**
+     * How the value is written: `'hsl'` (`hsl(171, 100%, 41%)`), `'hex'` or
+     * `'rgb'`, with alpha as `hsla()`, `#rrggbbaa` and `rgba()`. Typed text in
+     * any of them is written back in this one.
+     * @defaultValue 'hsl'
+     */
+    format?: ColorFormat;
+    /** Adds an alpha slider to the panel and writes the alpha into the value. */
+    alpha?: boolean;
+    /**
+     * Preset colors in the panel: a list of CSS colors, each a string or
+     * `{ color, label }`, or `"bulma"` for the page's theme colors.
+     */
+    swatches?: ColorPickerSwatch[] | 'bulma';
+    /**
+     * Adds a button to the panel that picks a color from anywhere on the
+     * screen, where the browser has the EyeDropper API.
+     */
+    eyeDropper?: boolean;
+    /** Fired when the panel opens. */
+    onOpen?: () => void;
+    /** Fired when the panel closes. */
+    onClose?: () => void;
+    /**
+     * Opens the panel when the field takes focus, and moves focus into it.
+     * Off by default, since typing a value is the quick way in and the
+     * launcher, a click on the swatch or Alt+ArrowDown open it.
+     */
+    openOnFocus?: boolean;
+    /** Closes the panel once a swatch is chosen. */
+    closeOnSwatchClick?: boolean;
+    /** The panel's place relative to the field. */
+    position?: PickerPosition;
+    /**
+     * Renders the panel through a portal, into the `portalContainer` a
+     * `ConfigProvider` sets, `document.body` by default.
+     */
+    appendToBody?: boolean;
+    /** Bulma color modifier for the field. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** The field's size. */
+    size?: 'small' | 'medium' | 'large';
+    /** Renders the field with rounded ends. */
+    isRounded?: boolean;
+    /** Disables the field and its panel. A disabled `Fieldset` does too. */
+    disabled?: boolean;
+    /** Makes the field read-only, with no panel. */
+    readOnly?: boolean;
+    /** Text shown while the field is empty. */
+    placeholder?: string;
+    /**
+     * Shows the launcher on the field's end that toggles the panel. Hidden by
+     * default while a `Control` it sits in shows its `isLoading` spinner,
+     * which shares that edge.
+     * @defaultValue true
+     */
+    triggerIcon?: boolean;
+    /** The launcher's glyph. */
+    triggerIconName?: string;
+    /** The strings it says, each with an English default. */
+    labels?: ColorPickerLabels;
+}
+/**
+ * The raw ColorInput: a text field with a swatch and a launcher that opens a color picker in a popover, without Field/Control wrapping.
+ *
+ * Use `ColorInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {ColorInputBaseProps} props - Props for ColorInputBase.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the text `<input>`.
+ * @returns {JSX.Element} The rendered field.
+ */
+export declare const ColorInputBase: React.ForwardRefExoticComponent<ColorInputBaseProps & React.RefAttributes<HTMLInputElement>>;
+export default ColorInputBase;

package/dist/types/form/ColorPicker.d.ts

@@ -69,6 +69,11 @@ export interface ColorPickerLabels {
      * @defaultValue 'Pick a color from the screen'
      */
     eyeDropper?: string;
+    /**
+     * Names `ColorInput`'s launcher and the panel it opens.
+     * @defaultValue 'Choose color'
+     */
+    chooseColor?: string;
 }
 /**
  * Props for ColorPicker.Area. The helper props, the other attributes and the

package/dist/types/form/_colorInternals/EyeDropperButton.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A button that picks a color from anywhere on the screen, for the picker
+ * around it. It renders only once the page has hydrated, where the browser
+ * has the EyeDropper API, and inside a picker that asked for it.
+ */
+export declare function EyeDropperButton({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/types/form/_colorInternals/pickerState.d.ts

@@ -53,10 +53,16 @@ export interface PickerOptions {
     swatches: ColorPickerSwatch[] | 'bulma' | undefined;
     eyeDropper: boolean;
     labels: ColorPickerLabels | undefined;
+    /**
+     * Whether the field the picker serves is empty, as ColorInput's can be.
+     * The picker still shows a color then, and any change, even to that same
+     * color, is reported, so it fills the field.
+     */
+    empty?: boolean;
 }
 /**
  * Holds a picker's color and builds what its parts read. Controlled, the
  * color shown follows `value`; a value the picker handed out comes back as
  * the exact color it was, thumbs and all.
  */
-export declare function useColorPicker({ value, defaultValue, onChange, onChangeEnd, format, alpha, disabled, swatches, eyeDropper, labels, }: PickerOptions): ColorPickerContextValue;
+export declare function useColorPicker({ value, defaultValue, onChange, onChangeEnd, format, alpha, disabled, swatches, eyeDropper, labels, empty, }: PickerOptions): ColorPickerContextValue;

package/dist/types/index.d.ts

@@ -123,6 +123,10 @@ export { DateRangeInputBase } from './form/DateRangeInputBase.js';
 export type { DateRangeInputBaseProps, DateRangeValue, } from './form/DateRangeInputBase.js';
 export { DateRangeInput } from './form/DateRangeInput.js';
 export type { DateRangeInputProps } from './form/DateRangeInput.js';
+export { ColorInputBase } from './form/ColorInputBase.js';
+export type { ColorInputBaseProps } from './form/ColorInputBase.js';
+export { ColorInput } from './form/ColorInput.js';
+export type { ColorInputProps } from './form/ColorInput.js';
 export { useInsideField, useInsideControl } from './form/FormContext.js';
 export type { FormFieldProps } from './form/fieldProps.js';
 export * from './grid/Cell.js';

package/dist/types-cjs/components/DataTable.d.ts

@@ -3,7 +3,7 @@ import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
 import { TrProps } from '../elements/Tr.js';
 import { type DataTableColumn, type DataTableModel, type DataTableStateOptions } from './useDataTable.js';
 export { useDataTable } from './useDataTable.js';
-export type { DataTableCellContext, DataTableCellProps, DataTableCheckboxProps, DataTableColumn, DataTableColumnMeta, DataTableFilters, DataTableHeaderCellProps, DataTableLabels, DataTableModel, DataTablePaginationProps, DataTableResolvedLabels, DataTableRowScope, DataTableSearchProps, DataTableSelectionMode, DataTableSort, DataTableSortButtonProps, DataTableSortDirection, DataTableState, DataTableStateOptions, UseDataTableOptions, } from './useDataTable.js';
+export type { DataTableCSVOptions, DataTableCellContext, DataTableCellProps, DataTableCheckboxProps, DataTableColumn, DataTableColumnMeta, DataTableFilters, DataTableHeaderCellProps, DataTableLabels, DataTableModel, DataTablePaginationProps, DataTableResolvedLabels, DataTableRowScope, DataTableSearchProps, DataTableSelectionMode, DataTableSort, DataTableSortButtonProps, DataTableSortDirection, DataTableState, DataTableStateOptions, UseDataTableOptions, } from './useDataTable.js';
 /**
  * Props for the DataTable component. The helper props, `className`, the
  * `ref` and the other attributes go on the wrapper `<div>`, which holds the

package/dist/types-cjs/components/useDataTable.d.ts

@@ -335,6 +335,32 @@ export interface DataTablePaginationProps {
     current: number;
     onPageChange: (page: number) => void;
 }
+/** What `toCSV` writes. */
+export interface DataTableCSVOptions {
+    /**
+     * Which rows, in the order the table shows them: the ones the search and
+     * filters let through, from every page, by default, or `all`, `page` or
+     * `selected`.
+     *
+     * @defaultValue 'filtered'
+     */
+    rows?: DataTableRowScope;
+    /** The ids of the columns to write, in that order. Every column, in the order shown, by default. */
+    columns?: string[];
+    /**
+     * Writes the columns' headers as the first line.
+     *
+     * @defaultValue true
+     */
+    header?: boolean;
+    /**
+     * What separates the fields. A semicolon suits a spreadsheet that reads
+     * a comma as the decimal point, as Excel does in much of Europe.
+     *
+     * @defaultValue ','
+     */
+    delimiter?: string;
+}
 /**
  * A table: what `useDataTable` returns, what `DataTable`'s `toolbar` is
  * given, and what its `table` takes. It reads the rows and the state, changes
@@ -367,6 +393,16 @@ export interface DataTableModel<TRow> {
     getText: (row: TRow, columnId: string) => string;
     /** What names a row: its row header's text, or its first column's. */
     getRowLabel: (row: TRow) => string;
+    /**
+     * The rows as CSV, from the columns' text (`format`, not `cell`), with a
+     * line break of `\r\n` between rows and fields quoted as RFC 4180 asks.
+     * A field that starts with `=`, `+`, `-`, `@`, a tab or a carriage return
+     * gets a `'` in front, so a spreadsheet shows it as text rather than
+     * running it as a formula, unless it's a plain number such as `-12.5`.
+     * Excel takes a file as UTF-8 only when it starts with a byte order mark,
+     * so put `\uFEFF` in front of the text when you save it for Excel.
+     */
+    toCSV: (options?: DataTableCSVOptions) => string;
     /** Whether a row is selected. */
     isSelected: (row: TRow) => boolean;
     /** Sets the sort. */

package/dist/types-cjs/form/ColorInput.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import { FieldProps } from './Field.js';
+import { ControlBaseProps } from './Control.js';
+import { ColorInputBaseProps } from './ColorInputBase.js';
+/**
+ * Props for the ColorInput convenience wrapper. Extends
+ * `ColorInputBaseProps` with Field-level (label, horizontal, message) and
+ * Control-level (loading, expanded) props. Inside an existing `Control` it
+ * renders no `Control` of its own, so its Control-level props do nothing
+ * there and warn in development; set them on that `Control` instead. Inside
+ * an outer `Field`, or a `Control` with no `Field` around it, it renders no
+ * `Field` of its own either. The exception is `label`, `message`,
+ * `horizontal` or `fieldClassName` in that bare `Control`: it keeps a `Field`
+ * for them, nested in the `.control`, and warns in development. Wrap the
+ * `Control` in a `Field` instead, and set the `label`, `horizontal` and class
+ * name on that `Field`.
+ *
+ * @helperProps Helper props go on the `.colorinput` `<div>`, with
+ * `className`. The other attributes go on the text `<input>`.
+ * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
+ * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
+ */
+export interface ColorInputProps extends ColorInputBaseProps {
+    /** Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the text field via `htmlFor`, using your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */
+    label?: React.ReactNode;
+    /** Size for the label. */
+    labelSize?: FieldProps['labelSize'];
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: FieldProps['labelProps'];
+    /** Render the field with horizontal layout. */
+    horizontal?: boolean;
+    /**
+     * Shows a loading spinner on the `Control` it renders, and hides the
+     * launcher (`triggerIcon`) while it does. Inside your own `Control` it
+     * renders none, so this draws nothing and warns in development; set
+     * `isLoading` on that `Control`.
+     */
+    isLoading?: boolean;
+    /**
+     * Shows the launcher on the field's end that toggles the panel. Hidden by
+     * default while a spinner shows at the same edge: this component's
+     * `isLoading` when it renders its own `Control`, or the enclosing
+     * `Control`'s `isLoading` inside one.
+     * @defaultValue true
+     */
+    triggerIcon?: boolean;
+    /** Expand the control to fill its container. */
+    isExpanded?: boolean;
+    /** Size of the wrapping Control. */
+    controlSize?: ControlBaseProps['size'];
+    /** Help/validation text below the field. */
+    message?: React.ReactNode;
+    /** Color modifier for the help message. */
+    messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field wrapper. */
+    fieldClassName?: string;
+    /** Additional CSS classes for the Control wrapper. */
+    controlClassName?: string;
+}
+/**
+ * The `ColorInput` component is a form field for a color: type it, or open a color picker from its launcher or its swatch.
+ *
+ * The value is a CSS color string, HSL by default, or empty. The panel is
+ * the `ColorPicker`'s square, hue slider and, when asked for, alpha slider,
+ * swatches and eye dropper, in the same popover the date pickers use.
+ *
+ * @function
+ * @param {ColorInputProps} props - Props for the ColorInput.
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <ColorInput label="Brand color" defaultValue="hsl(202, 67%, 36%)" swatches="bulma" />
+ */
+export declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
+export default ColorInput;

package/dist/types-cjs/form/ColorInputBase.d.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { type ColorFormat, type ColorPickerLabels, type ColorPickerSwatch } from './ColorPicker.js';
+import { type PickerPosition } from './_pickerInternals/pickerTypes.js';
+/**
+ * Props for the raw ColorInput base. Use the higher-level `ColorInput` for
+ * Field/Control composition; `ColorInputBase` is the field and its popover
+ * only.
+ *
+ * @helperProps Helper props go on the `.colorinput` `<div>`, with
+ * `className`. The other attributes go on the text `<input>`.
+ * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
+ * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
+ */
+export interface ColorInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
+    /**
+     * The color, controlled, as a CSS color the picker reads (hex, `rgb()`,
+     * `hsl()` or a color name), or `''` for none.
+     */
+    value?: string;
+    /** The color to start with, uncontrolled; empty without one. */
+    defaultValue?: string;
+    /**
+     * Called with the color, in `format`, as it changes: on every step of a
+     * drag in the panel, on a key or a swatch, and when typed text is
+     * committed. Clearing the field calls it with `''`.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called with the color, in `format`, once a change is done: when a drag
+     * ends, and with `onChange` for everything else. The place to save it.
+     */
+    onChangeEnd?: (value: string) => void;
+    /**
+     * How the value is written: `'hsl'` (`hsl(171, 100%, 41%)`), `'hex'` or
+     * `'rgb'`, with alpha as `hsla()`, `#rrggbbaa` and `rgba()`. Typed text in
+     * any of them is written back in this one.
+     * @defaultValue 'hsl'
+     */
+    format?: ColorFormat;
+    /** Adds an alpha slider to the panel and writes the alpha into the value. */
+    alpha?: boolean;
+    /**
+     * Preset colors in the panel: a list of CSS colors, each a string or
+     * `{ color, label }`, or `"bulma"` for the page's theme colors.
+     */
+    swatches?: ColorPickerSwatch[] | 'bulma';
+    /**
+     * Adds a button to the panel that picks a color from anywhere on the
+     * screen, where the browser has the EyeDropper API.
+     */
+    eyeDropper?: boolean;
+    /** Fired when the panel opens. */
+    onOpen?: () => void;
+    /** Fired when the panel closes. */
+    onClose?: () => void;
+    /**
+     * Opens the panel when the field takes focus, and moves focus into it.
+     * Off by default, since typing a value is the quick way in and the
+     * launcher, a click on the swatch or Alt+ArrowDown open it.
+     */
+    openOnFocus?: boolean;
+    /** Closes the panel once a swatch is chosen. */
+    closeOnSwatchClick?: boolean;
+    /** The panel's place relative to the field. */
+    position?: PickerPosition;
+    /**
+     * Renders the panel through a portal, into the `portalContainer` a
+     * `ConfigProvider` sets, `document.body` by default.
+     */
+    appendToBody?: boolean;
+    /** Bulma color modifier for the field. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** The field's size. */
+    size?: 'small' | 'medium' | 'large';
+    /** Renders the field with rounded ends. */
+    isRounded?: boolean;
+    /** Disables the field and its panel. A disabled `Fieldset` does too. */
+    disabled?: boolean;
+    /** Makes the field read-only, with no panel. */
+    readOnly?: boolean;
+    /** Text shown while the field is empty. */
+    placeholder?: string;
+    /**
+     * Shows the launcher on the field's end that toggles the panel. Hidden by
+     * default while a `Control` it sits in shows its `isLoading` spinner,
+     * which shares that edge.
+     * @defaultValue true
+     */
+    triggerIcon?: boolean;
+    /** The launcher's glyph. */
+    triggerIconName?: string;
+    /** The strings it says, each with an English default. */
+    labels?: ColorPickerLabels;
+}
+/**
+ * The raw ColorInput: a text field with a swatch and a launcher that opens a color picker in a popover, without Field/Control wrapping.
+ *
+ * Use `ColorInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {ColorInputBaseProps} props - Props for ColorInputBase.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the text `<input>`.
+ * @returns {JSX.Element} The rendered field.
+ */
+export declare const ColorInputBase: React.ForwardRefExoticComponent<ColorInputBaseProps & React.RefAttributes<HTMLInputElement>>;
+export default ColorInputBase;

package/dist/types-cjs/form/ColorPicker.d.ts

@@ -69,6 +69,11 @@ export interface ColorPickerLabels {
      * @defaultValue 'Pick a color from the screen'
      */
     eyeDropper?: string;
+    /**
+     * Names `ColorInput`'s launcher and the panel it opens.
+     * @defaultValue 'Choose color'
+     */
+    chooseColor?: string;
 }
 /**
  * Props for ColorPicker.Area. The helper props, the other attributes and the

package/dist/types-cjs/form/_colorInternals/EyeDropperButton.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A button that picks a color from anywhere on the screen, for the picker
+ * around it. It renders only once the page has hydrated, where the browser
+ * has the EyeDropper API, and inside a picker that asked for it.
+ */
+export declare function EyeDropperButton({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/types-cjs/form/_colorInternals/pickerState.d.ts

@@ -53,10 +53,16 @@ export interface PickerOptions {
     swatches: ColorPickerSwatch[] | 'bulma' | undefined;
     eyeDropper: boolean;
     labels: ColorPickerLabels | undefined;
+    /**
+     * Whether the field the picker serves is empty, as ColorInput's can be.
+     * The picker still shows a color then, and any change, even to that same
+     * color, is reported, so it fills the field.
+     */
+    empty?: boolean;
 }
 /**
  * Holds a picker's color and builds what its parts read. Controlled, the
  * color shown follows `value`; a value the picker handed out comes back as
  * the exact color it was, thumbs and all.
  */
-export declare function useColorPicker({ value, defaultValue, onChange, onChangeEnd, format, alpha, disabled, swatches, eyeDropper, labels, }: PickerOptions): ColorPickerContextValue;
+export declare function useColorPicker({ value, defaultValue, onChange, onChangeEnd, format, alpha, disabled, swatches, eyeDropper, labels, empty, }: PickerOptions): ColorPickerContextValue;

package/dist/types-cjs/index.d.ts

@@ -123,6 +123,10 @@ export { DateRangeInputBase } from './form/DateRangeInputBase.js';
 export type { DateRangeInputBaseProps, DateRangeValue, } from './form/DateRangeInputBase.js';
 export { DateRangeInput } from './form/DateRangeInput.js';
 export type { DateRangeInputProps } from './form/DateRangeInput.js';
+export { ColorInputBase } from './form/ColorInputBase.js';
+export type { ColorInputBaseProps } from './form/ColorInputBase.js';
+export { ColorInput } from './form/ColorInput.js';
+export type { ColorInputProps } from './form/ColorInput.js';
 export { useInsideField, useInsideControl } from './form/FormContext.js';
 export type { FormFieldProps } from './form/fieldProps.js';
 export * from './grid/Cell.js';