@allxsmith/bestax-bulma 5.54.0 → 5.55.0

package/dist/types-cjs/elements/Tr.d.ts

@@ -10,7 +10,16 @@ import { TableColor } from './Td.js';
 export interface TrProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'color'>, Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {
     /** Additional CSS classes to apply. */
     className?: string;
-    /** Whether the row is selected (adds Bulma's is-selected class). */
+    /**
+     * Whether the row is selected (adds Bulma's is-selected class). It's a look
+     * only: it says nothing to assistive tech, so pair it with a checkbox named
+     * for the row when the selection matters. A bestax `Checkbox` placed
+     * straight in one of the row's cells takes the row's text color, so a
+     * checked box shows on the row's fill. One in a menu or a table nested in a
+     * cell, or in a cell with a `color` of its own, keeps its own colors, since
+     * it sits on that surface instead, and so does every one in a row with a
+     * `color`, whose cells paint that color over the fill.
+     */
     isSelected?: boolean;
     /** Bulma color modifier for the table row. */
     color?: TableColor;

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

@@ -0,0 +1,266 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { ColorFormat } from './_colorInternals/colorMath.js';
+import { FormFieldProps } from './fieldProps.js';
+export type { ColorFormat } from './_colorInternals/colorMath.js';
+/**
+ * A preset color for a picker's swatches: a CSS color, or a CSS color with
+ * a name. The name labels the swatch for a screen reader and shows as its
+ * tooltip; without one, the color as written does.
+ */
+export type ColorPickerSwatch = string | {
+    color: string;
+    label?: string;
+};
+/**
+ * The strings a color picker says, each with an English default. A key
+ * left out, or set to an empty string, keeps its default.
+ */
+export interface ColorPickerLabels {
+    /**
+     * Names the saturation and brightness square.
+     * @defaultValue 'Saturation and brightness'
+     */
+    area?: string;
+    /**
+     * What a screen reader calls the square in place of "slider".
+     * @defaultValue '2D slider'
+     */
+    areaRoleDescription?: string;
+    /**
+     * The square's horizontal channel, in its value text.
+     * @defaultValue 'Saturation'
+     */
+    saturation?: string;
+    /**
+     * The square's vertical channel, in its value text.
+     * @defaultValue 'Brightness'
+     */
+    brightness?: string;
+    /**
+     * Names the hue slider.
+     * @defaultValue 'Hue'
+     */
+    hue?: string;
+    /**
+     * Names the alpha slider.
+     * @defaultValue 'Alpha'
+     */
+    alpha?: string;
+    /**
+     * The unit after the hue's number in its value text, "171 degrees".
+     * Inside a `LocaleProvider` with a `locale`, that locale writes the number
+     * and its unit, and this isn't used.
+     * @defaultValue 'degrees'
+     */
+    degrees?: string;
+    /**
+     * Names the field that shows the value as text.
+     * @defaultValue 'Color value'
+     */
+    value?: string;
+    /**
+     * Names the group of swatches.
+     * @defaultValue 'Swatches'
+     */
+    swatches?: string;
+    /**
+     * Names the eye dropper button.
+     * @defaultValue 'Pick a color from the screen'
+     */
+    eyeDropper?: string;
+}
+/**
+ * Props for ColorPicker.Area. The helper props, the other attributes and the
+ * `ref` land on the square's `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the square's `<div>`.
+ */
+export interface ColorPickerAreaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+}
+/**
+ * The saturation and brightness square, operated by pointer or by keyboard as one 2D slider.
+ *
+ * @function
+ * @param {ColorPickerAreaProps} props - Props for ColorPicker.Area.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the square's `<div>`.
+ * @returns {JSX.Element | null} The square, or nothing outside a ColorPicker.
+ */
+export declare const ColorPickerArea: React.ForwardRefExoticComponent<ColorPickerAreaProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for ColorPicker.HueSlider and ColorPicker.AlphaSlider. The helper
+ * props, the other attributes and the `ref` land on the slider's `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the slider's `<div>`.
+ */
+export interface ColorPickerSliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+}
+/**
+ * The hue slider, from red round the spectrum and back to red.
+ *
+ * @function
+ * @param {ColorPickerSliderProps} props - Props for ColorPicker.HueSlider.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the slider's `<div>`.
+ * @returns {JSX.Element | null} The slider, or nothing outside a ColorPicker.
+ */
+export declare const ColorPickerHueSlider: React.ForwardRefExoticComponent<ColorPickerSliderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The alpha slider, from see-through to solid.
+ *
+ * @function
+ * @param {ColorPickerSliderProps} props - Props for ColorPicker.AlphaSlider.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the slider's `<div>`.
+ * @returns {JSX.Element | null} The slider, or nothing outside a ColorPicker.
+ */
+export declare const ColorPickerAlphaSlider: React.ForwardRefExoticComponent<ColorPickerSliderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for ColorPicker.Swatches. The helper props, the other attributes and
+ * the `ref` land on the group's `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the group's `<div>`.
+ */
+export interface ColorPickerSwatchesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The colors to offer, in place of the picker's own `swatches`: a list,
+     * or `"bulma"` for the page's theme colors.
+     */
+    swatches?: ColorPickerSwatch[] | 'bulma';
+}
+/**
+ * The swatches, a radio group of preset colors that sets the picker's color.
+ *
+ * @function
+ * @param {ColorPickerSwatchesProps} props - Props for ColorPicker.Swatches.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the group's `<div>`.
+ * @returns {JSX.Element | null} The swatches, or nothing outside a ColorPicker or with none to show.
+ */
+export declare const ColorPickerSwatches: React.ForwardRefExoticComponent<ColorPickerSwatchesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for ColorPicker.Input. The helper props, the other attributes and
+ * the `ref` land on the row's `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the row's `<div>`.
+ */
+export interface ColorPickerInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+}
+/**
+ * The value as text you can type in, beside a preview swatch, with the eye dropper when the picker has `eyeDropper`.
+ *
+ * @function
+ * @param {ColorPickerInputProps} props - Props for ColorPicker.Input.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.
+ * @returns {JSX.Element | null} The row, or nothing outside a ColorPicker.
+ */
+export declare const ColorPickerInput: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the ColorPicker component. The helper props, the other
+ * attributes and the `ref` land on the picker's `<div>`, inside the `Field`
+ * and `Control` it renders when it isn't already in them.
+ *
+ * Inside an existing `Control` it renders no `Control` of its own. 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`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the picker's `<div>`.
+ * @extraProp {string} [aria-label] - Names the picker's group when there's no `label`.
+ */
+export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'color' | 'role'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'>, FormFieldProps {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Field label naming the picker's group, through `aria-labelledby`. Dropped inside an outer `Field`, whose own label names it instead. An `aria-label` or `aria-labelledby` you set wins over either. */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /**
+     * The color, controlled: any CSS color the picker reads (hex, `rgb()`,
+     * `hsl()` or a color name), in any format, since `onChange` hands back
+     * the `format` asked for. One it can't read leaves the picker showing the
+     * last color it could. A value it gave you comes back without moving the
+     * thumbs, and a gray or black keeps the hue and saturation the user had.
+     */
+    value?: string;
+    /** The color to start with, uncontrolled. Black without one. */
+    defaultValue?: string;
+    /**
+     * Called with the color, in `format`, as it changes: on every step of a
+     * drag, and on a key, a swatch, a typed value or the eye dropper.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called with the color, in `format`, once a change is done: when a drag
+     * ends, and with `onChange` for a key, a swatch, a typed value or the eye
+     * dropper. The place to save it.
+     */
+    onChangeEnd?: (value: string) => void;
+    /**
+     * How the value is written: `'hsl'` (`hsl(171, 100%, 41%)`), Bulma's own
+     * color space and what `Theme`'s `primaryH`, `primaryS` and `primaryL`
+     * take, `'hex'` (`#00d1b2`) or `'rgb'` (`rgb(0, 209, 178)`). With `alpha`,
+     * `hsla()`, `#rrggbbaa` and `rgba()`.
+     * @defaultValue 'hsl'
+     */
+    format?: ColorFormat;
+    /**
+     * Adds an alpha slider and writes the alpha into the value. Without it,
+     * the value is always solid.
+     */
+    alpha?: boolean;
+    /**
+     * Preset colors shown as a radio group under the picker: a list of CSS
+     * colors, each a string or `{ color, label }`, or `"bulma"` for the page's
+     * primary, link, info, success, warning and danger, from Bulma's CSS
+     * variables, so a themed app shows its own. A color the picker can't read
+     * as written, such as a `var()`, is read off the page each time the picker
+     * renders, so after a theme change the swatches show the new colors at
+     * once and the chosen one is marked again on the picker's next render,
+     * which a `Theme` around it causes. The `"bulma"` names are English; for
+     * others, pass the list yourself, such as
+     * `{ color: 'var(--bulma-primary)', label: 'Primär' }`.
+     */
+    swatches?: ColorPickerSwatch[] | 'bulma';
+    /**
+     * Adds a button that picks a color from anywhere on the screen, where the
+     * browser has the EyeDropper API (desktop Chromium today). Elsewhere, and
+     * until the page hydrates, it isn't shown.
+     */
+    eyeDropper?: boolean;
+    /** Disables every part. A disabled `Fieldset` around it does too. */
+    disabled?: boolean;
+    /** Form field name. When set, a hidden input carries the value. */
+    name?: string;
+    /** The id of the form the hidden input belongs to. */
+    form?: string;
+    /** The strings it says, each with an English default. */
+    labels?: ColorPickerLabels;
+    /**
+     * Parts for a layout of your own: `ColorPicker.Area`,
+     * `ColorPicker.HueSlider`, `ColorPicker.AlphaSlider`,
+     * `ColorPicker.Swatches` and `ColorPicker.Input`, with anything else
+     * between them. Without children, the picker shows the square, the hue
+     * slider, the alpha slider with `alpha`, the value, and the swatches when
+     * there are some.
+     */
+    children?: React.ReactNode;
+}
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> & {
+    Area: React.ForwardRefExoticComponent<ColorPickerAreaProps & React.RefAttributes<HTMLDivElement>>;
+    HueSlider: React.ForwardRefExoticComponent<ColorPickerSliderProps & React.RefAttributes<HTMLDivElement>>;
+    AlphaSlider: React.ForwardRefExoticComponent<ColorPickerSliderProps & React.RefAttributes<HTMLDivElement>>;
+    Swatches: React.ForwardRefExoticComponent<ColorPickerSwatchesProps & React.RefAttributes<HTMLDivElement>>;
+    Input: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default ColorPicker;

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+import { FormFieldProps } from './fieldProps.js';
+/** Why a Dropzone refused a file. */
+export type DropzoneRejectionCode = 'file-invalid-type' | 'file-too-large' | 'too-many-files';
+/** A file a Dropzone refused, and why. */
+export interface DropzoneRejection {
+    /** The file. */
+    file: File;
+    /**
+     * Why it was refused: `file-invalid-type` when `accept` doesn't take it, or
+     * it's a folder; `file-too-large` when it's over `maxSize`; `too-many-files`
+     * when the list is full.
+     */
+    code: DropzoneRejectionCode;
+}
+/**
+ * Props for the Dropzone component.
+ *
+ * @helperProps Helper props go on the `.dropzone` root `<div>`, with
+ * `className`. The other attributes go on the `<input>`.
+ * @extraProp {string} [accept] - File types it takes, as the native attribute writes them (`.pdf`, `image/*`, `application/pdf`). The picker offers them, and Dropzone checks every pick, drop and paste against them by the same rules, since browsers don't check a dropped file. It goes by a file's name and type, not its contents.
+ * @extraProp {boolean} [multiple=false] - Takes several files, and each pick, drop or paste adds to the list. Without it, a new file replaces the one chosen.
+ * @extraProp {string} [name] - The files' name in the form's data. The input holds the chosen files, so a plain form submit, `FormData` and React 19 actions all carry them.
+ * @extraProp {boolean} [required=false] - The browser's own check: a form won't submit with no file chosen.
+ * @extraProp {boolean} [disabled=false] - Disables the input, hides the remove buttons and takes no drops. A disabled `Fieldset` around it does the same.
+ * @extraProp {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Called on the input's `change`, after each pick, drop, paste or removal that changes the files, with `event.target.files` holding the new list.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the `<input>`, so `ref.current.showPicker()` opens the picker from a button of your own. A script that writes the input through it, such as `value = ''` to clear it or a form library setting `files`, changes what the input holds and what the next pick, drop or paste adds to, but no event reports the write, so the list shows it only from the next change. To clear the list at once, reset the form, or control it with `files` and set that to `[]`.
+ */
+export interface DropzoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type' | 'children' | 'value' | 'defaultValue'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Field label, rendered above the zone. It names the input along with the zone's own text, through `htmlFor` (your `id` when you pass one). Inside an outer `Field` it's dropped, and that `Field`'s label names the input. */
+    label?: React.ReactNode;
+    /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        [key: string]: unknown;
+    };
+    /** Bulma color modifier for the zone, as `File` takes it. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size modifier for the zone. */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The zone's text. It's the input's accessible name, so keep it short, and
+     * put details such as "PDF up to 5 MB" in `hint`. Default: "Choose or drop
+     * a file", or "Choose or drop files" with `multiple`.
+     */
+    buttonLabel?: React.ReactNode;
+    /**
+     * An icon above the zone's text. It sits inside the `<label>` that names
+     * the input, so leave an `Icon` here unnamed (`<Icon name="upload" />`).
+     */
+    icon?: React.ReactNode;
+    /**
+     * A line under the zone that describes the input through
+     * `aria-describedby`, such as "PDF up to 5 MB".
+     */
+    hint?: React.ReactNode;
+    /** The largest file it takes, in bytes. A bigger one is refused with `file-too-large`. */
+    maxSize?: number;
+    /**
+     * With `multiple`, how many files the list holds at most. A drop that would
+     * go over adds files up to the limit and refuses the rest with
+     * `too-many-files`.
+     */
+    maxFiles?: number;
+    /**
+     * The chosen files, to control the list. The input and the list follow it,
+     * and a change you don't take through `onFilesChange` is undone. Setting it
+     * to `[]` clears both.
+     */
+    files?: File[];
+    /** Called with the whole list of chosen files each time it changes. */
+    onFilesChange?: (files: File[]) => void;
+    /** Called with the files a pick, drop or paste refused, and why. */
+    onReject?: (rejections: DropzoneRejection[]) => void;
+    /**
+     * Shows the chosen files under the zone, each with its size and a remove
+     * button. Turn it off to show them your own way from `onFilesChange`. The
+     * refusals still show.
+     */
+    showFileList?: boolean;
+    /** Takes files pasted while the input has focus, through the same checks as a drop. */
+    allowPaste?: boolean;
+    /**
+     * While it's on the page, stops the browser opening a file dropped outside
+     * any drop target, which would leave the page. Drops on other file inputs
+     * and on editable fields are left alone.
+     */
+    preventDocumentDrop?: boolean;
+    /** Names a file's remove button, for localization. Default: `` `Remove ${file.name}` ``. */
+    removeLabel?: (file: File) => string;
+    /**
+     * The text shown and announced for a refused file, for localization.
+     * Default: the file's name and the reason, such as "photo.png: only PDF
+     * files".
+     */
+    rejectionMessage?: (rejection: DropzoneRejection) => string;
+    /**
+     * What's announced when files are added, for localization. Default: the
+     * file's name and "added", or a count ("2 files added").
+     */
+    addedMessage?: (files: File[]) => string;
+    /** What's announced when a file is removed, for localization. Default: `` `${file.name} removed` ``. */
+    removedMessage?: (file: File) => string;
+    /**
+     * Help or validation message under the Dropzone. It describes the input
+     * through `aria-describedby`, after the hint and any refusals.
+     */
+    message?: React.ReactNode;
+    /** Additional CSS classes for the root. */
+    className?: string;
+}
+/**
+ * The `Dropzone` component is an area to drop files on or click to pick
+ * them, which checks each file and lists the chosen ones with a way to remove
+ * each.
+ *
+ * It's Bulma's boxed, full-width file widget with the real
+ * `<input type="file">` lying over it, so the input is the one tab stop, the
+ * click target and the drop target, and Enter and Space open the picker. The
+ * input holds the chosen files: a pick, drop or paste that passes the checks
+ * is written to it, so a form submits the files under `name`. It doesn't
+ * upload anything.
+ *
+ * @function
+ * @param {DropzoneProps} props - Props for the Dropzone component.
+ * @returns {JSX.Element} The rendered dropzone.
+ *
+ * @example
+ * <Dropzone
+ *   label="CV"
+ *   name="cv"
+ *   accept=".pdf,application/pdf"
+ *   maxSize={5_000_000}
+ *   hint="PDF up to 5 MB"
+ * />
+ */
+export declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLInputElement>>;
+export default Dropzone;

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

@@ -12,6 +12,8 @@ import { FormFieldProps } from './fieldProps.js';
  *
  * @helperProps Helper props go on the `.file` wrapper `<div>`, with
  * `className`. The other attributes go on the `<input>`.
+ * @extraProp {string} [accept] - File types the picker offers, as the native attribute takes them (`.pdf`, `image/*`, `application/pdf`). Browsers apply it in the picker only: a file dropped on the input lands whatever its type, so check `files` in `onChange` when the type matters.
+ * @extraProp {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Called when the user picks files, or drops them on the input. With the extras stylesheet loaded, a drop does what a pick does: it replaces what was picked and fires `input` and `change`. A drop of several files lands only with `multiple`.
  */
 export interface FileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
     /** Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. 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. */

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

@@ -0,0 +1,63 @@
+/** The formats a color picker writes its value in. */
+export type ColorFormat = 'hsl' | 'hex' | 'rgb';
+/**
+ * A color as the picker holds it: hue in degrees from 0 to 360, saturation
+ * and value (brightness) from 0 to 100, and alpha from 0 to 1.
+ */
+export interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/** Red, green and blue from 0 to 255, and alpha from 0 to 1. */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** HSV to RGB, each channel unrounded. */
+export declare function hsvaToRgba({ h, s, v, a }: Hsva): Rgba;
+/** RGB to HSV. A gray has no hue, so it gets 0. */
+export declare function rgbaToHsva({ r, g, b, a }: Rgba): Hsva;
+/** HSL (saturation and lightness from 0 to 100) to HSV, keeping the hue. */
+export declare function hslaToHsva(h: number, s: number, l: number, a: number): Hsva;
+/** HSV to HSL, saturation and lightness from 0 to 100, keeping the hue. */
+export declare function hsvaToHsla({ h, s, v, a }: Hsva): {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+/**
+ * Writes a color in a format: `hsl(171, 100%, 41%)`, `#00d1b2` or
+ * `rgb(0, 209, 178)`, with alpha as `hsla(…)`, `#00d1b2ff` and `rgba(…)`.
+ * Channels are whole numbers, and the legacy comma form is used, which every
+ * CSS parser and color library reads.
+ */
+export declare function formatColor(color: Hsva, format: ColorFormat, alpha: boolean): string;
+/** Whether two colors are the same once written as 8-bit RGB with alpha. */
+export declare const sameColor: (one: Hsva, other: Hsva) => boolean;
+/**
+ * The relative luminance of a color, from 0 for black to 1 for white, as
+ * WCAG defines it.
+ */
+export declare function luminance(color: Hsva): number;
+/**
+ * Whether black reads better than white on a color, by WCAG contrast
+ * ratio. Used for the check on a chosen swatch.
+ */
+export declare function prefersDarkInk(color: Hsva): boolean;
+/**
+ * Whether a color's text names its own hue, as `hsl()` and `hsla()` do even
+ * for a gray, where hex, `rgb()` and the color names leave it out.
+ */
+export declare const namesHue: (text: string) => boolean;
+/**
+ * Reads a CSS color: hex (with or without `#`), `rgb()`, `rgba()`, `hsl()`
+ * and `hsla()` in either syntax, the named colors, and `transparent`. Null
+ * for anything else, such as `oklch()` or `var(--x)`, which only the
+ * browser can resolve.
+ */
+export declare function parseColor(input: string | null | undefined): Hsva | null;

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

@@ -0,0 +1,62 @@
+import { ColorFormat, Hsva } from './colorMath.js';
+import type { ColorPickerLabels, ColorPickerSwatch } from '../ColorPicker.js';
+/** The labels with each one left out, or empty, at its default. */
+export declare const mergeColorLabels: (labels: ColorPickerLabels | undefined) => Required<ColorPickerLabels>;
+export declare const BLACK: Hsva;
+/**
+ * A color read from outside the picker, written as `source`, with the hue
+ * and saturation the picker had where the new color has none, so the thumbs
+ * don't jump to 0. A gray written as hex, `rgb()` or a name has no hue, so
+ * it keeps the picker's; one written as `hsl()` names its hue, which wins.
+ * Black has no saturation in the square either way, and keeps the picker's,
+ * which writes no differently.
+ */
+export declare const keepingChannels: (next: Hsva, previous: Hsva, source: string) => Hsva;
+/** What a picker's parts read from the picker around them. */
+export interface ColorPickerContextValue {
+    /** The color shown, alpha at 1 unless the picker takes alpha. */
+    color: Hsva;
+    /** The color written in the picker's format. */
+    text: string;
+    format: ColorFormat;
+    alpha: boolean;
+    disabled: boolean;
+    labels: Required<ColorPickerLabels>;
+    swatches: ColorPickerSwatch[] | 'bulma' | undefined;
+    eyeDropper: boolean;
+    /** Whether a touch screen reader is likely, so both square inputs show. */
+    touch: boolean;
+    /** Writes a percentage, in the locale of a LocaleProvider when there is one. */
+    percent: (value: number) => string;
+    /** Writes a hue in degrees, in the locale of a LocaleProvider when there is one. */
+    degrees: (value: number) => string;
+    /** Sets the color: `onChange`, and `onChangeEnd` too when `end` is set. */
+    change: (next: Hsva, end?: boolean) => void;
+    /** Ends a drag: `onChangeEnd` with the latest value. */
+    end: () => void;
+}
+export declare const ColorPickerContext: import("react").Context<ColorPickerContextValue | null>;
+/** Does nothing, for a part outside a picker and a cancelled eye dropper. */
+export declare const noop: () => void;
+export declare const standalone: ColorPickerContextValue;
+/** The picker around a part, or null with a development warning. */
+export declare function usePicker(part: string): ColorPickerContextValue | null;
+/** What a picker is given: ColorPicker's props, or the ones ColorInput passes on. */
+export interface PickerOptions {
+    value: string | undefined;
+    defaultValue: string | undefined;
+    onChange: ((value: string) => void) | undefined;
+    onChangeEnd: ((value: string) => void) | undefined;
+    format: ColorFormat;
+    alpha: boolean;
+    disabled: boolean;
+    swatches: ColorPickerSwatch[] | 'bulma' | undefined;
+    eyeDropper: boolean;
+    labels: ColorPickerLabels | undefined;
+}
+/**
+ * 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;

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

@@ -32,6 +32,7 @@ export * from './components/Reveal.js';
 export * from './components/TreeView.js';
 export * from './components/ScrollArea.js';
 export * from './components/Command.js';
+export * from './components/DataTable.js';
 export * from './elements/Block.js';
 export * from './elements/Box.js';
 export * from './elements/Button.js';
@@ -39,6 +40,7 @@ export * from './elements/Buttons.js';
 export * from './elements/LinkButton.js';
 export * from './elements/ToggleButton.js';
 export * from './elements/Code.js';
+export * from './elements/ColorSwatch.js';
 export * from './elements/Content.js';
 export * from './elements/Delete.js';
 export * from './elements/DescriptionList.js';
@@ -77,6 +79,7 @@ export * from './form/Checkbox.js';
 export * from './form/CheckboxCard.js';
 export * from './form/Checkboxes.js';
 export * from './form/Control.js';
+export * from './form/Dropzone.js';
 export * from './form/Field.js';
 export * from './form/Fieldset.js';
 export * from './form/File.js';
@@ -91,6 +94,7 @@ export * from './form/Rate.js';
 export * from './form/Autocomplete.js';
 export * from './form/Combobox.js';
 export * from './form/Taginput.js';
+export * from './form/ColorPicker.js';
 export { InputBase } from './form/InputBase.js';
 export type { InputBaseProps } from './form/InputBase.js';
 export { SelectBase } from './form/SelectBase.js';