@kismet-ux/constellation 1.8.0 → 1.11.0

package/dist/index-5QXWn0de.d.ts

@@ -0,0 +1,200 @@
+import * as React from 'react';
+import React__default from 'react';
+import { a as InputBaseProps } from './input-Cp5LET5i.js';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+type DatePickerProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    label?: React__default.ReactNode;
+    helperText?: React__default.ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    sizeVariant?: 'sm' | 'md';
+    placeholder?: string;
+    min?: string;
+    max?: string;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    name?: string;
+};
+
+type SelectAlign = 'start' | 'center' | 'end';
+type SelectSide = 'top' | 'bottom' | 'left' | 'right';
+type SelectPosition = 'item-aligned' | 'popper';
+type SelectProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    children?: React__default.ReactNode;
+};
+type SelectContentProps = React__default.HTMLAttributes<HTMLDivElement> & {
+    position?: SelectPosition;
+    align?: SelectAlign;
+    side?: SelectSide;
+    sideOffset?: number;
+    collisionPadding?: number;
+};
+type SelectFieldContentProps = Pick<SelectContentProps, 'align' | 'className' | 'collisionPadding' | 'side' | 'sideOffset'>;
+type SelectFieldBaseProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onValueChange'> & {
+    'aria-required'?: boolean;
+    label?: React__default.ReactNode;
+    helperText?: React__default.ReactNode;
+    error?: boolean;
+    placeholder?: string;
+    fieldClassName?: string;
+    contentProps?: SelectFieldContentProps;
+    id?: string;
+    children?: React__default.ReactNode;
+    sizeVariant?: 'sm' | 'md';
+    searchThreshold?: number;
+};
+type SingleSelectFieldProps = SelectFieldBaseProps & {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type MultiSelectFieldProps = SelectFieldBaseProps & {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type SelectFieldProps = SingleSelectFieldProps | MultiSelectFieldProps;
+
+type FormTheme = 'inherit' | 'primary' | 'secondary' | 'destructive' | 'warning' | 'success' | 'info' | 'slate';
+
+type CheckedState = boolean | 'indeterminate';
+interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue' | 'defaultChecked'> {
+    theme?: FormTheme;
+    destructive?: boolean;
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+    value?: string;
+    name?: string;
+    required?: boolean;
+    /** Optional inline label rendered to the right of the checkbox and associated via htmlFor. */
+    label?: React.ReactNode;
+    /** Optional helper / validation text rendered beneath the checkbox + label row. */
+    helperText?: React.ReactNode;
+    /**
+     * Box size. `md` (default) is the form size; `sm` suits a dense list row and
+     * `lg` a primary confirm. The tick and the helper-text indent follow it.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface ComboboxOption {
+    /** The value written back on selection. */
+    value: string;
+    /** What the row shows. Falls back to `value`. */
+    label?: string;
+    /** Trailing muted text — a category, a count, a unit. */
+    hint?: string;
+    /** Heading this option files under. Ungrouped options render first. */
+    group?: string;
+}
+interface ComboboxProps extends InputBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'list'> {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether a value absent from `options` is allowed. Default true — this
+     * replaces a `<datalist>`, whose whole point is that typing a new one is how
+     * the vocabulary grows.
+     */
+    allowCustom?: boolean;
+    /** Shown when the filter matches nothing. */
+    emptyText?: string;
+    /** Cap on rows rendered at once. */
+    maxVisible?: number;
+}
+/**
+ * Free-text field with a suggestion list.
+ *
+ * This exists because `<datalist>` does not hold up: Chrome only reliably opens
+ * it once the user types or presses ArrowDown — a click on the field does
+ * nothing, so it reads as broken — and nothing about the popup can be styled,
+ * so it arrives as OS chrome hanging off an otherwise themed field.
+ *
+ * The panel is Select's `Surface` and Select's stylesheet, deliberately: a
+ * lookalike built from its own rules drifts the moment either is touched.
+ */
+declare function Combobox({ options, value, onValueChange, allowCustom, emptyText, maxVisible, onKeyDown, onFocus, onBlur, className, ...inputProps }: ComboboxProps): React.JSX.Element;
+
+declare function DatePicker({ value: valueProp, defaultValue, onChange, label, helperText, error, disabled, sizeVariant, placeholder, min, max, required, id, className, name, }: DatePickerProps): React.JSX.Element;
+
+declare const labelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    theme?: "inherit" | "primary" | "secondary" | "success" | "destructive" | "warning" | "info" | "slate" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
+    theme?: FormTheme;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+type SurfaceProps = {
+    align?: SelectAlign;
+    children: React.ReactNode;
+    className?: string;
+    collisionPadding?: number;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    displayOpen: boolean;
+    isClosing?: boolean;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    open: boolean;
+    position?: SelectPosition;
+    side?: SelectSide;
+    sideOffset?: number;
+    triggerRef: React.MutableRefObject<HTMLElement | null>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'onKeyDown'>;
+declare function Surface({ align, children, className, collisionPadding, contentRef, displayOpen, isClosing, onKeyDown, open, position, side, sideOffset, triggerRef, ...props }: SurfaceProps): React.ReactPortal | null;
+declare function Select({ open: openProp, defaultOpen, onOpenChange, value: valueProp, defaultValue, onValueChange, disabled, children, ...props }: SelectProps): React.JSX.Element;
+/**
+ * A titled run of options — the `<optgroup>` of this select.
+ *
+ * The heading is presentational and never focusable: it names the run, it is
+ * not a thing you can pick. Labelling the group with `aria-label` rather than
+ * pointing at the heading keeps it out of the option list for a screen reader
+ * too.
+ */
+declare function SelectGroup({ label, children, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    label?: React.ReactNode;
+}): React.JSX.Element;
+declare function SelectValue({ children, placeholder, ...props }: React.HTMLAttributes<HTMLSpanElement> & {
+    placeholder?: React.ReactNode;
+}): React.JSX.Element;
+declare function SelectTrigger({ className, children, onClick, onKeyDown, type, asChild, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Render the caller's own element as the trigger, and drop the field styling
+     * and the chevron with it.
+     *
+     * For a control that opens a listbox without looking like a form field — a
+     * picker that states itself as an icon and a line of text, say. The caller
+     * owns every visual decision; the Select still owns the behaviour, the
+     * portaled surface and the ARIA wiring.
+     */
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SelectContent({ align, className, children, collisionPadding, onKeyDown, position, side, sideOffset, ...props }: SelectContentProps): React.JSX.Element;
+declare function SelectItem({ className, children, disabled, onClick, onMouseMove, value, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    value: string;
+}): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function SelectField(props: SelectFieldProps): React.JSX.Element;
+
+export { Checkbox as C, DatePicker as D, Label as L, Select as S, Combobox as b, SelectContent as h, SelectField as j, SelectGroup as l, SelectItem as m, SelectSeparator as p, SelectTrigger as r, SelectValue as s, Surface as t };
+export type { FormTheme as F, CheckboxProps as a, ComboboxOption as c, ComboboxProps as d, DatePickerProps as e, LabelProps as f, SelectAlign as g, SelectContentProps as i, SelectFieldProps as k, SelectPosition as n, SelectProps as o, SelectSide as q };