@texturehq/edges 0.0.18 → 0.0.19

package/dist/index.d.ts

@@ -4,6 +4,19 @@ import React__default, { ComponentProps, ReactNode, Component, ErrorInfo } from
 import { Key, ValidationResult, ButtonProps as ButtonProps$1, DateValue, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, DateFieldProps as DateFieldProps$1, DateRangePickerProps as DateRangePickerProps$1, DialogProps, TextProps, FormProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps, NumberFieldProps as NumberFieldProps$1, PopoverProps as PopoverProps$1, ProgressBarProps as ProgressBarProps$1, RangeCalendarProps as RangeCalendarProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps, TabPanelProps, TabsProps, TextFieldProps as TextFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, TooltipProps as TooltipProps$1 } from 'react-aria-components';
 import * as _phosphor_icons_react from '@phosphor-icons/react';
 
+/**
+ * Control-specific style utilities for form elements and interactive components.
+ * These styles use CSS variables defined in the theme for consistent sizing
+ * and spacing across all control elements.
+ *
+ * Text sizes follow the relationships defined in theme.css:
+ * sm: --control-text-sm (maps to --text-xs)
+ * md: --control-text-md (maps to --text-sm)
+ * lg: --control-text-lg (maps to --text-base)
+ * xl: --control-text-xl (maps to --text-lg)
+ */
+type Size = "sm" | "md" | "lg" | "xl";
+
 interface Item {
     id: string;
     name: string;
@@ -33,6 +46,11 @@ interface GraphQLRequestConfig extends BaseRequestConfig {
     shouldLoad?: (filterText: string) => boolean;
 }
 type AutocompleteRequestConfig = RestRequestConfig | GraphQLRequestConfig;
+/**
+ * Autocomplete
+ *
+ * Text input with typeahead suggestions and keyboard navigation.
+ */
 interface AutocompleteProps {
     label?: string;
     staticItems?: Item[];
@@ -47,16 +65,16 @@ interface AutocompleteProps {
     renderLeftIcon?: (isLoading: boolean) => React__default.ReactNode;
     errorMessage?: string | ((validation: ValidationResult) => string);
     description?: string;
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: Size;
     tooltip?: string;
     isRequired?: boolean;
     isDisabled?: boolean;
+    isInvalid?: boolean;
     validationResult?: ValidationResult;
     showErrors?: boolean;
     autoFocus?: boolean;
-    onLoadError?: (error: Error) => void;
 }
-declare function Autocomplete({ label, staticItems, sections, selectedKey, defaultSelectedKey, onSelectionChange, requestConfig, defaultFilter, errorMessage, size, tooltip, isRequired, isDisabled, renderLeftIcon, autoFocus, onLoadError, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+declare function Autocomplete({ label, staticItems, sections, selectedKey, defaultSelectedKey, onSelectionChange, requestConfig, defaultFilter, placeholder, errorMessage, description, size, tooltip, isRequired, isDisabled, isInvalid, validationResult, showErrors, renderItem, renderLeftIcon, autoFocus, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
 
 declare const iconMapping: {
     readonly AppWindow: _phosphor_icons_react.Icon;
@@ -199,21 +217,20 @@ interface ExtendedIconProps {
 }
 declare const Icon: React$1.MemoExoticComponent<({ name, size, color, weight, className, title, ariaLabel, grow, variant, rounded, bgColor, ...props }: ExtendedIconProps) => react_jsx_runtime.JSX.Element | null>;
 
+type IconName$1 = ComponentProps<typeof Icon>["name"];
+type BaseButtonProps = Omit<ButtonProps$1, "className">;
 /**
- * Control-specific style utilities for form elements and interactive components.
- * These styles use CSS variables defined in the theme for consistent sizing
- * and spacing across all control elements.
+ * Button
  *
- * Text sizes follow the relationships defined in theme.css:
- * sm: --control-text-sm (maps to --text-xs)
- * md: --control-text-md (maps to --text-sm)
- * lg: --control-text-lg (maps to --text-base)
- * xl: --control-text-xl (maps to --text-lg)
+ * 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="primary" size="md" icon="Check">Save</Button>
+ * ```
  */
-type Size = "sm" | "md" | "lg" | "xl";
-
-type IconName$1 = ComponentProps<typeof Icon>["name"];
-type BaseButtonProps = Omit<ButtonProps$1, "className">;
 interface ButtonProps extends BaseButtonProps {
     variant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
     size?: Size;
@@ -233,13 +250,27 @@ interface ButtonProps extends BaseButtonProps {
     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;
 
+/**
+ * Calendar
+ *
+ * Single-date calendar primitive with Edges styling.
+ */
 interface CalendarProps<T extends DateValue> extends Omit<CalendarProps$1<T>, "visibleDuration"> {
     errorMessage?: string;
 }
 declare function Calendar<T extends DateValue>({ errorMessage, ...props }: CalendarProps<T>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Card
+ *
+ * Surface container with optional heading and actions.
+ */
 interface CardProps {
     heading?: React__default.ReactNode;
     upperRightText?: React__default.ReactNode;
@@ -251,6 +282,11 @@ interface CardProps {
 }
 declare const Card: React__default.FC<CardProps>;
 
+/**
+ * Checkbox
+ *
+ * Single checkbox with Edges visuals.
+ */
 interface CheckboxProps extends Omit<CheckboxProps$1, "children"> {
     children?: ReactNode | ((props: CheckboxRenderProps) => ReactNode);
 }
@@ -276,6 +312,11 @@ interface CopyToClipboardProps {
 }
 declare function CopyToClipboard({ value, children, className, size }: CopyToClipboardProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * DateField
+ *
+ * Segmented date input with Edges styling.
+ */
 interface DateFieldProps<T extends DateValue> extends DateFieldProps$1<T> {
     label?: string;
     description?: string;
@@ -283,6 +324,11 @@ interface DateFieldProps<T extends DateValue> extends DateFieldProps$1<T> {
 }
 declare function DateField<T extends DateValue>({ label, description, errorMessage, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
 
+/**
+ * DateRangePicker
+ *
+ * Composed date range input with popover calendar.
+ */
 interface DateRangePickerProps<T extends DateValue> extends DateRangePickerProps$1<T> {
     label?: string;
     description?: string;
@@ -290,6 +336,11 @@ interface DateRangePickerProps<T extends DateValue> extends DateRangePickerProps
 }
 declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, ...props }: DateRangePickerProps<T>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Dialog
+ *
+ * Generic modal/dialog surface with Edges defaults.
+ */
 declare function Dialog(props: DialogProps): react_jsx_runtime.JSX.Element;
 
 type BaseDialogHeaderProps = {
@@ -306,6 +357,11 @@ type WithoutBackArrow = BaseDialogHeaderProps & {
     hasBackArrow?: false;
     onBack?: never;
 };
+/**
+ * DialogHeader
+ *
+ * Header area for dialogs with optional back arrow.
+ */
 type DialogHeaderProps = WithBackArrow | WithoutBackArrow;
 declare const DialogHeader: React__default.FC<DialogHeaderProps>;
 
@@ -317,6 +373,11 @@ interface DrawerAction {
     isLoading?: boolean;
     isDisabled?: boolean;
 }
+/**
+ * Drawer
+ *
+ * Sliding panel that anchors to screen edges.
+ */
 interface DrawerProps {
     title?: string;
     headerContent?: React__default.ReactNode;
@@ -548,6 +609,11 @@ declare function Input({ size, isInvalid, isDisabled, isFocused, transparent, cl
  */
 declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Form
+ *
+ * Accessibility-first form wrapper with consistent spacing.
+ */
 declare function Form(props: FormProps): react_jsx_runtime.JSX.Element;
 
 declare const sizeVariants: {
@@ -562,6 +628,11 @@ declare const heightVariants: {
 };
 type HeadingSize = keyof typeof sizeVariants;
 type HeadingHeight = keyof typeof heightVariants;
+/**
+ * Heading
+ *
+ * Typography component for page/section headings with size and height options.
+ */
 interface HeadingProps {
     tag?: keyof JSX.IntrinsicElements;
     size?: HeadingSize;
@@ -571,10 +642,22 @@ interface HeadingProps {
 }
 declare function Heading({ tag: Tag, size, height, className, children }: HeadingProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * ListBox
+ *
+ * Styled wrapper around `react-aria-components` ListBox and related parts
+ * used in dropdowns and menus.
+ */
 interface ListBoxProps<T> extends Omit<ListBoxProps$1<T>, "layout" | "orientation"> {
 }
 declare function ListBox<T extends object>({ children, ...props }: ListBoxProps<T>): react_jsx_runtime.JSX.Element;
 
+/**
+ * ListBoxItem
+ *
+ * A styled wrapper around `react-aria-components` ListBoxItem with size
+ * variants that align with Edges typography.
+ */
 interface ExtendedListBoxItemProps extends Omit<ListBoxItemProps, "className"> {
     size?: "sm" | "md" | "lg" | "xl";
     className?: string;
@@ -605,6 +688,11 @@ interface LogoProps {
 }
 declare const Logo: ({ className, showWordmark }: LogoProps) => 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;
@@ -631,6 +719,12 @@ interface Place {
     center: [number, number];
 }
 type SearchType = "country" | "region" | "district" | "place" | "locality" | "neighborhood" | "address" | "street";
+/**
+ * PlaceSearch
+ *
+ * Location search component with autocomplete; emits a `Place` value on
+ * selection.
+ */
 interface PlaceSearchProps {
     label?: string;
     selectedKey?: Key | null;
@@ -654,12 +748,23 @@ interface PlaceSearchProps {
 }
 declare function PlaceSearch({ label, selectedKey, defaultSelectedKey, onSelectionChange, placeholder, errorMessage, description, size, tooltip, isRequired, isDisabled, showErrors, autoFocus, onSelect, searchTypes, defaultFilter, validationResult, countryRestrictions, proximity, }: PlaceSearchProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Popover
+ *
+ * Positioned overlay container with optional arrow, built on
+ * `react-aria-components` Popover.
+ */
 interface PopoverProps extends Omit<PopoverProps$1, "children"> {
     showArrow?: boolean;
     children: React__default.ReactNode;
 }
 declare function Popover({ children, showArrow, className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * ProgressBar
+ *
+ * Linear progress indicator with optional labels.
+ */
 interface ProgressBarProps extends ProgressBarProps$1 {
     label?: string;
     rightLabel?: string;
@@ -668,6 +773,11 @@ interface ProgressBarProps extends ProgressBarProps$1 {
 }
 declare function ProgressBar({ label, rightLabel, progressWidth, hideLabels, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * RangeCalendar
+ *
+ * Calendar allowing selection of a date range.
+ */
 interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarProps$1<T>, "visibleDuration"> {
     errorMessage?: string;
 }
@@ -746,11 +856,30 @@ type TabProps = TabProps$1 & {
     isSelected?: boolean;
     id?: string;
 };
+/**
+ * Tabs
+ *
+ * Tabbed interface with styled tabs and panels.
+ */
 declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+/**
+ * TabList container.
+ */
 declare function TabList<T extends object>(props: TabListProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Tab trigger element.
+ */
 declare function Tab(props: TabProps): react_jsx_runtime.JSX.Element;
+/**
+ * TabPanel content area.
+ */
 declare function TabPanel(props: TabPanelProps): 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">, BaseInputProps {
     label?: string;
     description?: string;
@@ -762,6 +891,14 @@ interface TextAreaProps extends Omit<React__default.TextareaHTMLAttributes<HTMLT
 }
 declare function TextArea({ label, description, errorMessage, size, tooltip, required, transparent, isInvalid, className, validationResult, ...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;
@@ -772,6 +909,10 @@ interface TextFieldProps extends Omit<TextFieldProps$1, "isRequired" | "size" |
     className?: string;
     validationResult?: ValidationResult;
 }
+/**
+ * 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, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
 
 interface TextLinkProps {
@@ -788,6 +929,12 @@ interface TextLinkProps {
 }
 declare const TextLink: ({ href, children, className, external, title, variant, onClick, asButton, onPress, showArrow, }: TextLinkProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * TimeField
+ *
+ * Input segmented time with Edges styling and accessible behavior via
+ * `react-aria-components`. Supports labels, descriptions and validation.
+ */
 interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, "size" | "className">, BaseInputProps {
     label?: string;
     description?: string;
@@ -798,6 +945,9 @@ interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, "size" | "cla
     className?: string;
     validationResult?: ValidationResult;
 }
+/**
+ * Renders an Edges TimeField composed from segmented date parts.
+ */
 declare function TimeField({ label, description, errorMessage, size, tooltip, isRequired, transparent, validationResult, ...props }: TimeFieldProps): react_jsx_runtime.JSX.Element;
 
 type IconName = ComponentProps<typeof Icon>["name"];
@@ -827,10 +977,17 @@ interface ToggleButtonProps {
 }
 declare function ToggleButton(props: ToggleButtonProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Tooltip
+ *
+ * Lightweight content container that appears on hover/focus/press.
+ */
 interface TooltipProps extends Omit<TooltipProps$1, "children"> {
     children: React__default.ReactNode;
     content: React__default.ReactNode;
 }
 declare function Tooltip({ children, content, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-export { Autocomplete, type BaseInputProps, type BaseProps, Button, Calendar, Card, Checkbox, ClearButton, CopyToClipboard, DateField, DateRangePicker, Description, type DescriptionProps, Dialog, DialogHeader, Drawer, ErrorBoundary, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, Form, Heading, Icon, Input, type InputProps, type InputStyleProps, InputWrapper, Label, type LabelProps, ListBox, ListBoxItem, Loader, Logo, NumberField, PlaceSearch, Popover, ProgressBar, RangeCalendar, Select, Skeleton, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, TextLink, TimeField, ToggleButton, Tooltip, getFieldGroupStyles, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, useInputFocus };
+declare function useDebounce<T>(value: T, delay?: number): T;
+
+export { Autocomplete, type BaseInputProps, type BaseProps, Button, Calendar, Card, Checkbox, ClearButton, CopyToClipboard, DateField, DateRangePicker, Description, type DescriptionProps, Dialog, DialogHeader, Drawer, ErrorBoundary, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, Form, Heading, Icon, Input, type InputProps, type InputStyleProps, InputWrapper, Label, type LabelProps, ListBox, ListBoxItem, Loader, Logo, NumberField, PlaceSearch, Popover, ProgressBar, RangeCalendar, Select, Skeleton, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, TextLink, TimeField, ToggleButton, Tooltip, getFieldGroupStyles, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, useDebounce, useInputFocus };