@texturehq/edges 1.18.1 → 1.19.0

package/dist/TimeField-B4J8gA8E.d.ts

@@ -0,0 +1,393 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ComponentProps, ReactNode } from 'react';
+import { Key, ValidationResult, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, CheckboxGroupProps as CheckboxGroupProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue } from 'react-aria-components';
+import { S as Size, I as Icon, B as BaseInputProps } from './FileUpload-DXTcfLIh.js';
+
+interface Item {
+    id: string;
+    name: string;
+}
+interface Section {
+    name: string;
+    items: Item[];
+}
+type RequestMethod = "GET" | "POST";
+interface BaseRequestConfig {
+    url: string;
+    headers?: Record<string, string>;
+    transformResponse: (data: unknown) => Item[];
+}
+interface RestRequestConfig extends BaseRequestConfig {
+    requestType: "REST";
+    method?: RequestMethod;
+    queryKey?: string;
+    extraParams?: Record<string, string>;
+    shouldLoad?: (filterText: string) => boolean;
+}
+interface GraphQLRequestConfig extends BaseRequestConfig {
+    requestType: "GraphQL";
+    graphqlQuery: string;
+    variableKey?: string;
+    responsePath?: string;
+    shouldLoad?: (filterText: string) => boolean;
+}
+type AutocompleteRequestConfig = RestRequestConfig | GraphQLRequestConfig;
+/**
+ * Autocomplete
+ *
+ * Text input with typeahead suggestions and keyboard navigation.
+ */
+interface AutocompleteProps {
+    label?: string;
+    staticItems?: Item[];
+    sections?: Section[];
+    selectedKey?: Key | null;
+    defaultSelectedKey?: Key | null;
+    onSelectionChange?: (key: Key | null) => void;
+    requestConfig?: AutocompleteRequestConfig;
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    placeholder?: string;
+    renderItem?: (item: Item) => React__default.ReactNode;
+    renderLeftIcon?: (isLoading: boolean) => React__default.ReactNode;
+    renderSection?: (section: Section, children: React__default.ReactNode) => React__default.ReactNode;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    description?: string;
+    size?: Size;
+    tooltip?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    validationResult?: ValidationResult;
+    showErrors?: boolean;
+    autoFocus?: boolean;
+    /**
+     * Whether to reserve space for error messages to prevent layout shift
+     * @default false
+     */
+    reserveErrorSpace?: boolean;
+}
+declare function Autocomplete({ label, staticItems, sections, selectedKey, defaultSelectedKey, onSelectionChange, requestConfig, defaultFilter, placeholder, errorMessage, description, size, tooltip, isRequired, isDisabled, isInvalid, validationResult, showErrors, renderItem, renderLeftIcon, renderSection, autoFocus, reserveErrorSpace, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+
+type IconName = ComponentProps<typeof Icon>["name"];
+type BaseButtonProps = Omit<ButtonProps$1, "className">;
+/**
+ * Button
+ *
+ * A versatile action component that supports multiple visual variants, sizes,
+ * optional icons, a loading state, and badge indicators. Follows the Edges
+ * design system tokens and composes `react-aria-components` under the hood.
+ *
+ * Example usage:
+ * ```tsx
+ * <Button variant="brand" size="md" icon="Check">Save</Button>
+ * ```
+ */
+interface ButtonProps extends BaseButtonProps {
+    variant?: "default" | "brand" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost" | "primary";
+    size?: Size;
+    badgeNumber?: number;
+    badgeVariant?: "primary" | "destructive";
+    badgePosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    fullWidth?: boolean;
+    icon?: IconName;
+    iconWeight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+    iconPosition?: "left" | "right";
+    isLoading?: boolean;
+    loadingText?: string;
+    loadingIndicator?: React.ReactNode;
+    className?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Renders an Edges Button. When `href` is provided, renders a link-styled
+ * button using the same visual system.
+ */
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CheckboxGroup
+ *
+ * Groups multiple checkboxes with shared label/description.
+ */
+interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, "children"> {
+    label?: string;
+    children?: ReactNode;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+}
+/**
+ * Checkbox
+ *
+ * Single checkbox with Edges visuals.
+ */
+interface CheckboxProps extends Omit<CheckboxProps$1, "children"> {
+    children?: ReactNode | ((props: CheckboxRenderProps) => ReactNode);
+    /**
+     * Visual variant of the checkbox
+     * @default "default"
+     */
+    variant?: "default" | "brand";
+}
+declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ColorField Props
+ */
+interface ColorFieldProps extends Omit<TextFieldProps$1, "isRequired" | "size" | "className">, BaseInputProps {
+    /** Label text displayed above the color field */
+    label?: string;
+    /** Helper text displayed below the color field */
+    description?: string;
+    /** Error message or function to generate error message */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Optional tooltip text to show next to the label */
+    tooltip?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Validation result object */
+    validationResult?: ValidationResult;
+    /** The current hex color value (controlled) */
+    value?: string;
+    /** Default hex color value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when the color changes */
+    onChange?: (color: string) => void;
+    /** Whether to show the color swatch preview */
+    showColorSwatch?: boolean;
+}
+/**
+ * ColorField Component
+ *
+ * A form control that allows users to input hex color codes manually
+ * or select colors using a visual color picker. Integrates seamlessly
+ * with the Edges design system.
+ *
+ * @example
+ * ```tsx
+ * <ColorField
+ *   label="Brand Color"
+ *   value={color}
+ *   onChange={setColor}
+ *   description="Choose your primary brand color"
+ * />
+ * ```
+ */
+declare function ColorField({ label, description, errorMessage, size, tooltip, isRequired, transparent, className, validationResult, value: controlledValue, defaultValue, onChange, placeholder, showColorSwatch, reserveErrorSpace, ...props }: ColorFieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * NumberField
+ *
+ * Numeric input with stepper controls and validation.
+ */
+interface NumberFieldProps extends Omit<NumberFieldProps$1, "size" | "className">, BaseInputProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+    id?: string;
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    tooltip?: string;
+    isRequired?: boolean;
+    className?: string;
+    validationResult?: ValidationResult;
+}
+declare function NumberField({ label, description, errorMessage, size, tooltip, isRequired, transparent, validationResult, reserveErrorSpace, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
+
+interface RadioGroupProps extends Omit<RadioGroupProps$1, "children"> {
+    /** Label for the radio group */
+    label?: string;
+    /** Children elements */
+    children?: ReactNode;
+    /** Optional description for the radio group */
+    description?: string;
+    /** Error message to display when validation fails */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Validation result object for functional errorMessage */
+    validationResult?: ValidationResult;
+    /**
+     * Visual variant of the radio buttons
+     * @default "default"
+     */
+    variant?: "default" | "brand";
+}
+declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Interface defining the shape of items in the Select component
+ */
+interface SelectItem<T = unknown> {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the item */
+    label: string;
+    /** Value associated with the item */
+    value: T;
+}
+/**
+ * Props for the Select component
+ * @template T - The type of the items, must extend SelectItem
+ */
+interface SelectProps<T extends SelectItem> extends Omit<SelectProps$1<T>, "children" | "onSelectionChange"> {
+    /** Label text displayed above the select */
+    label?: string;
+    /** Helper text displayed below the select */
+    description?: string;
+    /** Error message or function to generate error message */
+    errorMessage?: string | ((validation: ValidationResult) => React__default.ReactNode);
+    /** Collection of items to display in the select */
+    items?: Iterable<T>;
+    /** Size variant of the select */
+    size?: Size;
+    /** Render function for items or static children */
+    children?: React__default.ReactNode | ((item: T) => React__default.ReactNode);
+    /** Custom render function for individual items. When provided, items prop is used to render items automatically */
+    renderItem?: (item: T) => React__default.ReactNode;
+    /** Currently selected item's id. Uses the SelectItem's `id` field for stable selection tracking */
+    selectedKey?: Key;
+    /** Default selected item's id for uncontrolled usage */
+    defaultSelectedKey?: Key;
+    /** Callback when selection changes, provides the selected item's id */
+    onSelectionChange?: (key: Key) => void;
+    /** Whether to show error states */
+    showErrors?: boolean;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Validation result object */
+    validationResult?: ValidationResult;
+    /** Whether to use transparent background */
+    transparent?: boolean;
+    /**
+     * Whether to reserve space for error messages to prevent layout shift
+     * @default false
+     */
+    reserveErrorSpace?: boolean;
+    /** Placement of the dropdown menu relative to the trigger. Defaults to "bottom start" */
+    placement?: "bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom";
+    /** Whether the menu should flip to the opposite side when there's not enough space. Defaults to true */
+    shouldFlip?: boolean;
+    /**
+     * Controls the menu width behavior relative to the trigger.
+     * - "match": Menu width matches trigger width exactly (default)
+     * - "auto": Menu width grows to fit content, with minimum of trigger width
+     * @default "match"
+     */
+    menuWidth?: "match" | "auto";
+}
+declare function Select<T extends SelectItem>({ label, description, errorMessage, children, items, renderItem, size, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, placeholder, showErrors, tooltip, isRequired, transparent, reserveErrorSpace, placement, shouldFlip, menuWidth, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps extends Omit<SwitchProps$1, "children"> {
+    children: React__default.ReactNode;
+    /**
+     * Visual variant of the switch
+     * @default "default"
+     */
+    variant?: "default" | "brand";
+    /**
+     * Size of the switch
+     * @default "md"
+     */
+    size?: Size;
+}
+/**
+ * Switch
+ *
+ * Toggle switch component for binary on/off states.
+ * Provides an accessible alternative to checkboxes for settings and preferences.
+ */
+declare function Switch({ children, variant, size, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TextArea
+ *
+ * Multi-line text input with Edges styling, label, description, and error.
+ */
+interface TextAreaProps extends Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "disabled">, BaseInputProps {
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    tooltip?: string;
+    size?: Size;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    /**
+     * Allow user resizing of the textarea. Defaults to false (non-resizable).
+     * When true, enables vertical resize.
+     */
+    isResizable?: boolean;
+    validationResult?: ValidationResult;
+}
+declare function TextArea({ label, description, errorMessage, size, tooltip, required, transparent, isInvalid, isDisabled, isResizable, className, validationResult, reserveErrorSpace, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TextField
+ *
+ * A controlled or uncontrolled text input with Edges styling, label,
+ * description, error messaging, and optional affordances like a search icon,
+ * clear button, and password visibility toggle. Wraps
+ * `react-aria-components` TextField for accessible behavior.
+ */
+interface TextFieldProps extends Omit<TextFieldProps$1, "isRequired" | "size" | "className">, BaseInputProps {
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    placeholder?: string;
+    tooltip?: string;
+    isRequired?: boolean;
+    className?: string;
+    validationResult?: ValidationResult;
+    /**
+     * Whether to reserve space for error messages to prevent layout shift
+     * @default true
+     */
+    reserveErrorSpace?: boolean;
+}
+/**
+ * Renders an Edges TextField with label, description, validation states and
+ * optional search/clear/password affordances.
+ */
+declare function TextField({ label, description, errorMessage, size, tooltip, isRequired, transparent, showSearchIcon, isClearable, onClear, type, validationResult, reserveErrorSpace, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TimeField
+ *
+ * A segmented time input with Edges styling. Matches the API and styling
+ * of TextField and DateField for consistency across form controls.
+ */
+interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, "isRequired" | "size" | "className">, Omit<BaseInputProps, "transparent" | "isClearable" | "onClear"> {
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    placeholder?: string;
+    tooltip?: string;
+    isRequired?: boolean;
+    className?: string;
+    validationResult?: ValidationResult;
+    /**
+     * Whether to reserve space for error messages to prevent layout shift
+     * @default true
+     */
+    reserveErrorSpace?: boolean;
+}
+/**
+ * Renders an Edges TimeField with label, description, validation states,
+ * and segmented time input.
+ */
+declare function TimeField({ label, description, errorMessage, size, tooltip, isRequired, isDisabled, isInvalid, reserveErrorSpace, validationResult, className, ...props }: TimeFieldProps): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete as A, Button as B, Checkbox as C, NumberField as N, RadioGroup as R, Select as S, TextArea as T, CheckboxGroup as a, ColorField as b, Switch as c, TextField as d, type TimeFieldProps as e, type ColorFieldProps as f, Radio as g, TimeField as h };