@getufy/flint-ui-react 0.2.2 → 1.0.0

package/dist/components/FlintRadio.d.ts

@@ -1,7 +1,27 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintRadio as FlintRadioElement } from '@getufy/flint-ui/radio/flint-radio';
-export declare const FlintRadio: import("@lit/react").ReactWebComponent<FlintRadioElement, {
-    onFlintRadioSelect: EventName<CustomEvent>;
-}>;
-export type FlintRadioProps = React.ComponentProps<typeof FlintRadio>;
+export interface FlintRadioSelectDetail {
+    value: string;
+}
+/**
+ * Radio: a single radio button within a radio group.
+ */
+export interface FlintRadioProps extends React.HTMLAttributes<FlintRadioElement> {
+    /** Whether this radio is selected. */
+    checked?: boolean;
+    /** Disables this radio and prevents interaction. */
+    disabled?: boolean;
+    /** Whether this radio is required. */
+    required?: boolean;
+    /** Form field name (usually set by the parent group). */
+    name?: string;
+    /** Value associated with this radio option. */
+    value?: string;
+    /** Visible label text for this radio option. */
+    label?: string;
+    /** Size of the radio button. */
+    size?: FlintRadioElement['size'];
+    /** Fired when this radio is selected. */
+    onFlintRadioSelect?: (event: CustomEvent<FlintRadioSelectDetail>) => void;
+}
+export declare const FlintRadio: React.ForwardRefExoticComponent<FlintRadioProps & React.RefAttributes<FlintRadioElement>>;

package/dist/components/FlintRadioGroup.d.ts

@@ -1,7 +1,29 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintRadioGroup as FlintRadioGroupElement } from '@getufy/flint-ui/radio/flint-radio';
-export declare const FlintRadioGroup: import("@lit/react").ReactWebComponent<FlintRadioGroupElement, {
-    onFlintRadioGroupChange: EventName<CustomEvent>;
-}>;
-export type FlintRadioGroupProps = React.ComponentProps<typeof FlintRadioGroup>;
+export interface FlintRadioGroupChangeDetail {
+    value: string;
+}
+/**
+ * Radio Group: manages a set of radio buttons with single selection.
+ */
+export interface FlintRadioGroupProps extends Omit<React.HTMLAttributes<FlintRadioGroupElement>, 'defaultValue'> {
+    /** Accessible label for the radio group. */
+    label?: string;
+    /** Form field name for all radios in the group. */
+    name?: string;
+    /** Currently selected radio value. */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Disables all radios in the group. */
+    disabled?: boolean;
+    /** Marks the group as required for form validation. */
+    required?: boolean;
+    /** Layout direction of the radio buttons. */
+    orientation?: FlintRadioGroupElement['orientation'];
+    /** Size of the radio buttons. */
+    size?: FlintRadioGroupElement['size'];
+    /** Fired when the selected radio value changes. */
+    onFlintRadioGroupChange?: (event: CustomEvent<FlintRadioGroupChangeDetail>) => void;
+}
+export declare const FlintRadioGroup: React.ForwardRefExoticComponent<FlintRadioGroupProps & React.RefAttributes<FlintRadioGroupElement>>;

package/dist/components/FlintRangeSlider.d.ts

@@ -1,7 +1,25 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintRangeSlider as FlintRangeSliderElement } from '@getufy/flint-ui/flint-range-slider/flint-range-slider';
-export declare const FlintRangeSlider: import("@lit/react").ReactWebComponent<FlintRangeSliderElement, {
-    onFlintRangeSliderChange: EventName<CustomEvent>;
-}>;
-export type FlintRangeSliderProps = React.ComponentProps<typeof FlintRangeSlider>;
+/**
+ * A range slider that lets users select a start and end value within a range.
+ */
+export interface FlintRangeSliderProps extends React.HTMLAttributes<FlintRangeSliderElement> {
+    value?: FlintRangeSliderElement['value'];
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step increment between values. */
+    step?: number;
+    /** Visual size of the track and thumbs. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether the slider is disabled. */
+    disabled?: boolean;
+    /** Label text displayed above the slider. */
+    label?: string;
+    /** Whether to display the current start and end values. */
+    showValue?: boolean;
+    /** When either thumb moves. detail: { value: [number, number] } */
+    onFlintRangeSliderChange?: (event: CustomEvent) => void;
+}
+export declare const FlintRangeSlider: React.ForwardRefExoticComponent<FlintRangeSliderProps & React.RefAttributes<FlintRangeSliderElement>>;

package/dist/components/FlintRating.d.ts

@@ -1,7 +1,33 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintRating as FlintRatingElement } from '@getufy/flint-ui/rating/flint-rating';
-export declare const FlintRating: import("@lit/react").ReactWebComponent<FlintRatingElement, {
-    onFlintRatingChange: EventName<CustomEvent>;
-}>;
-export type FlintRatingProps = React.ComponentProps<typeof FlintRating>;
+export interface FlintRatingChangeDetail {
+    value: number;
+}
+/**
+ * Rating: a star-based rating input.
+ */
+export interface FlintRatingProps extends Omit<React.HTMLAttributes<FlintRatingElement>, 'defaultValue'> {
+    /** Current rating value. */
+    value?: number;
+    /** Maximum number of stars. */
+    max?: number;
+    /** Whether the rating is read-only. */
+    readonly?: boolean;
+    /** Whether the rating is disabled. */
+    disabled?: boolean;
+    /** Whether clicking the current value clears the rating. */
+    clearable?: boolean;
+    /** Initial rating value for uncontrolled mode. */
+    defaultValue?: number;
+    /** Size of the rating stars. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Form field name for the hidden input. */
+    name?: string;
+    /** Accessible label for the rating group. */
+    label?: string;
+    /** Rating step precision (1 for full stars, 0.5 for half stars). */
+    precision?: FlintRatingElement['precision'];
+    /** Fired when the rating value changes. */
+    onFlintRatingChange?: (event: CustomEvent<FlintRatingChangeDetail>) => void;
+}
+export declare const FlintRating: React.ForwardRefExoticComponent<FlintRatingProps & React.RefAttributes<FlintRatingElement>>;

package/dist/components/FlintRelativeTime.d.ts

@@ -1,4 +1,19 @@
 import React from 'react';
 import { FlintRelativeTime as FlintRelativeTimeElement } from '@getufy/flint-ui/relative-time/flint-relative-time';
-export declare const FlintRelativeTime: import("@lit/react").ReactWebComponent<FlintRelativeTimeElement, {}>;
-export type FlintRelativeTimeProps = React.ComponentProps<typeof FlintRelativeTime>;
+/**
+ * Displays a localized time phrase relative to the current date and time.
+Uses the browser's `Intl.RelativeTimeFormat` API — no language packs needed.
+ */
+export interface FlintRelativeTimeProps extends Omit<React.HTMLAttributes<FlintRelativeTimeElement>, 'lang'> {
+    /** The date to calculate time from. Accepts a Date, ISO string, or Unix ms timestamp. Defaults to the current date/time. */
+    date?: FlintRelativeTimeElement['date'];
+    /** The formatting style to use. */
+    format?: 'long' | 'short' | 'narrow';
+    /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when */
+    numeric?: 'always' | 'auto';
+    /** Keep the displayed value up to date as time passes. */
+    sync?: boolean;
+    /** BCP 47 language tag for formatting (e.g. "en", "de", "ja"). Inherits from the document when unset. */
+    lang?: string;
+}
+export declare const FlintRelativeTime: React.ForwardRefExoticComponent<FlintRelativeTimeProps & React.RefAttributes<FlintRelativeTimeElement>>;

package/dist/components/FlintResizableGroup.d.ts

@@ -1,9 +1,18 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintResizableGroup as FlintResizableGroupElement } from '@getufy/flint-ui/resizable/flint-resizable';
-export declare const FlintResizableGroup: import("@lit/react").ReactWebComponent<FlintResizableGroupElement, {
-    onFlintResizableCollapse: EventName<CustomEvent>;
-    onFlintResizableExpand: EventName<CustomEvent>;
-    onFlintResizableChange: EventName<CustomEvent>;
-}>;
-export type FlintResizableGroupProps = React.ComponentProps<typeof FlintResizableGroup>;
+/**
+ * Resizable Group: a container that enables resizable panels with draggable handles.
+ */
+export interface FlintResizableGroupProps extends Omit<React.HTMLAttributes<FlintResizableGroupElement>, 'dir'> {
+    /** Layout direction — 'horizontal' (row) or 'vertical' (column). */
+    orientation?: 'horizontal' | 'vertical';
+    /** Text direction for RTL support. */
+    dir?: 'ltr' | 'rtl';
+    /** Fired when a panel is collapsed. */
+    onFlintResizableCollapse?: (event: CustomEvent) => void;
+    /** Fired when a collapsed panel is expanded. */
+    onFlintResizableExpand?: (event: CustomEvent) => void;
+    /** Fired when panel sizes change via drag or keyboard. */
+    onFlintResizableChange?: (event: CustomEvent) => void;
+}
+export declare const FlintResizableGroup: React.ForwardRefExoticComponent<FlintResizableGroupProps & React.RefAttributes<FlintResizableGroupElement>>;

package/dist/components/FlintResizableHandle.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintResizableHandle as FlintResizableHandleElement } from '@getufy/flint-ui/resizable/flint-resizable';
-export declare const FlintResizableHandle: import("@lit/react").ReactWebComponent<FlintResizableHandleElement, {}>;
-export type FlintResizableHandleProps = React.ComponentProps<typeof FlintResizableHandle>;
+export interface FlintResizableHandleProps extends React.HTMLAttributes<FlintResizableHandleElement> {
+    /** Show a visible drag grip. */
+    withHandle?: boolean;
+    /** Disable interaction. */
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const FlintResizableHandle: React.ForwardRefExoticComponent<FlintResizableHandleProps & React.RefAttributes<FlintResizableHandleElement>>;

package/dist/components/FlintResizablePanel.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintResizablePanel as FlintResizablePanelElement } from '@getufy/flint-ui/resizable/flint-resizable';
-export declare const FlintResizablePanel: import("@lit/react").ReactWebComponent<FlintResizablePanelElement, {}>;
-export type FlintResizablePanelProps = React.ComponentProps<typeof FlintResizablePanel>;
+export interface FlintResizablePanelProps extends React.HTMLAttributes<FlintResizablePanelElement> {
+    /** Current size as percentage (0–100). */
+    size?: number;
+    /** Default size — applied once on first update. */
+    defaultSize?: number;
+    /** Minimum size percentage (0–100). */
+    minSize?: number;
+    /** Maximum size percentage (0–100). */
+    maxSize?: number;
+    /** Whether the panel can collapse to zero size via drag. */
+    collapsible?: boolean;
+    /** Whether the panel is currently collapsed via the programmatic API. */
+    collapsed?: boolean;
+}
+export declare const FlintResizablePanel: React.ForwardRefExoticComponent<FlintResizablePanelProps & React.RefAttributes<FlintResizablePanelElement>>;

package/dist/components/FlintRichTreeView.d.ts

@@ -1,10 +1,52 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintRichTreeView as FlintRichTreeViewElement } from '@getufy/flint-ui/tree-view/flint-rich-tree-view';
-export declare const FlintRichTreeView: import("@lit/react").ReactWebComponent<FlintRichTreeViewElement, {
-    onFlintTreeViewError: EventName<CustomEvent>;
-    onFlintTreeViewExpandedItemsChange: EventName<CustomEvent>;
-    onFlintTreeViewItemClick: EventName<CustomEvent>;
-    onFlintTreeViewItemPositionChange: EventName<CustomEvent>;
-}>;
-export type FlintRichTreeViewProps = React.ComponentProps<typeof FlintRichTreeView>;
+export interface FlintTreeViewExpandedItemsChangeDetail {
+    expandedItems: string[];
+}
+/**
+ * A data-driven tree view that renders its structure from an `items` array.
+ */
+export interface FlintRichTreeViewProps extends React.HTMLAttributes<FlintRichTreeViewElement> {
+    /** Array of item data objects to render in the tree. */
+    items?: FlintRichTreeViewElement['items'];
+    /** Optional lazy-load data source. When provided, children are fetched */
+    dataSource?: FlintRichTreeViewElement['dataSource'];
+    /** Returns the unique string ID for an item. Defaults to `item.id`. */
+    getItemId?: FlintRichTreeViewElement['getItemId'];
+    /** Returns the display label for an item. Defaults to `item.label`. */
+    getItemLabel?: FlintRichTreeViewElement['getItemLabel'];
+    /** Returns the children array for an item. Defaults to `item.children`. */
+    getItemChildren?: FlintRichTreeViewElement['getItemChildren'];
+    /** Returns `true` if the given item should be disabled. */
+    isItemDisabled?: FlintRichTreeViewElement['isItemDisabled'];
+    /** When `true`, disabled items can receive keyboard focus. */
+    disabledItemsFocusable?: boolean;
+    /** Callback invoked when a tree item is clicked or activated via keyboard. */
+    onItemClick?: FlintRichTreeViewElement['onItemClick'];
+    /** What interaction triggers expand/collapse. */
+    expansionTrigger?: 'content' | 'iconContainer';
+    /** **Controlled mode.** The set of item IDs that should be expanded. */
+    expandedItems?: string[];
+    /** **Uncontrolled mode.** Item IDs to expand on initial mount. */
+    defaultExpandedItems?: string[];
+    /** Callback fired when the user toggles an item's expansion. */
+    onExpandedItemsChange?: FlintRichTreeViewElement['onExpandedItemsChange'];
+    /** When `true`, enables drag-and-drop reordering of items. */
+    itemsReordering?: boolean;
+    /** Function that determines if a specific item can be reordered. */
+    isItemReorderable?: FlintRichTreeViewElement['isItemReorderable'];
+    /** Function that determines if an item can be moved to a specific target position. */
+    canMoveItemToNewPosition?: FlintRichTreeViewElement['canMoveItemToNewPosition'];
+    /** Whether to use a drag handle icon for reordering. */
+    itemsReorderingHandle?: boolean;
+    /** Fired when an item's position changes via reordering. */
+    onItemPositionChange?: FlintRichTreeViewElement['onItemPositionChange'];
+    /** When a lazy-loading dataSource call fails (detail: { message, id, error }) */
+    onFlintTreeViewError?: (event: CustomEvent) => void;
+    /** When the expanded set changes (detail: { expandedItems }) */
+    onFlintTreeViewExpandedItemsChange?: (event: CustomEvent<FlintTreeViewExpandedItemsChangeDetail>) => void;
+    /** When a tree item is activated (detail: { itemId }) */
+    onFlintTreeViewItemClick?: (event: CustomEvent) => void;
+    onFlintTreeViewItemPositionChange?: (event: CustomEvent) => void;
+}
+export declare const FlintRichTreeView: React.ForwardRefExoticComponent<FlintRichTreeViewProps & React.RefAttributes<FlintRichTreeViewElement>>;

package/dist/components/FlintScrollArea.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintScrollArea as FlintScrollAreaElement } from '@getufy/flint-ui/scroll-area/flint-scroll-area';
-export declare const FlintScrollArea: import("@lit/react").ReactWebComponent<FlintScrollAreaElement, {}>;
-export type FlintScrollAreaProps = React.ComponentProps<typeof FlintScrollArea>;
+/**
+ * Augments native scroll with custom, cross-browser overlay scrollbars.
+Native scrollbars are hidden; lightweight custom thumbs are rendered in
+shadow DOM and synced to the viewport via scroll + ResizeObserver events.
+ *
+ * @slot - Scrollable content.
+ * @slot scrollbar - Optional explicit `flint-scroll-bar` elements (e.g. horizontal).
+ */
+export interface FlintScrollAreaProps extends Omit<React.HTMLAttributes<FlintScrollAreaElement>, 'dir'> {
+    /** Controls when the scrollbars appear. */
+    type?: 'auto' | 'always' | 'scroll' | 'hover';
+    /** Text direction. `'rtl'` flips the vertical bar to the left side. */
+    dir?: 'ltr' | 'rtl';
+}
+export declare const FlintScrollArea: React.ForwardRefExoticComponent<FlintScrollAreaProps & React.RefAttributes<FlintScrollAreaElement>>;

package/dist/components/FlintScrollBar.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintScrollBar as FlintScrollBarElement } from '@getufy/flint-ui/scroll-area/flint-scroll-area';
-export declare const FlintScrollBar: import("@lit/react").ReactWebComponent<FlintScrollBarElement, {}>;
-export type FlintScrollBarProps = React.ComponentProps<typeof FlintScrollBar>;
+/**
+ * Custom overlay scrollbar. Place inside `flint-scroll-area` with
+`slot="scrollbar"` for an explicit horizontal or second-axis bar.
+ *
+ * @slot — none (fully shadow DOM)
+ */
+export interface FlintScrollBarProps extends React.HTMLAttributes<FlintScrollBarElement> {
+    /** Which axis this scrollbar controls. Reflects to attribute. */
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare const FlintScrollBar: React.ForwardRefExoticComponent<FlintScrollBarProps & React.RefAttributes<FlintScrollBarElement>>;

package/dist/components/FlintSelect.d.ts

@@ -1,7 +1,42 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSelect as FlintSelectElement } from '@getufy/flint-ui/select/flint-select';
-export declare const FlintSelect: import("@lit/react").ReactWebComponent<FlintSelectElement, {
-    onFlintSelectChange: EventName<CustomEvent>;
-}>;
-export type FlintSelectProps = React.ComponentProps<typeof FlintSelect>;
+export interface FlintSelectChangeDetail {
+    value: string[];
+}
+/**
+ * A select component for choosing one or multiple options from a list.
+ *
+ * @slot icon - Optional icon shown at the start of the trigger.
+ * @slot error-message - Optional slot for error message content (use error-message prop for simple text).
+ */
+export interface FlintSelectProps extends Omit<React.HTMLAttributes<FlintSelectElement>, 'defaultValue'> {
+    /** Label text displayed above the select. */
+    label?: string;
+    /** Array of selectable options. */
+    options?: FlintSelectElement['options'];
+    /** Currently selected value(s). */
+    value?: string[];
+    /** Allow multiple selections. */
+    multiple?: boolean;
+    /** Placeholder text when no value is selected. */
+    placeholder?: string;
+    /** Disables the select and prevents interaction. */
+    disabled?: boolean;
+    /** Makes the select read-only. */
+    readonly?: boolean;
+    /** Marks the select as required for form validation. */
+    required?: boolean;
+    /** Whether the select is in an error state. */
+    error?: boolean;
+    /** Error message displayed below the select. */
+    errorMessage?: string;
+    /** Form field name used when submitting form data. */
+    name?: string;
+    /** Size variant of the select. */
+    size?: FlintSelectElement['size'];
+    /** Sets the initial value in uncontrolled mode (single-select only). */
+    defaultValue?: string;
+    /** Dispatched when the selection changes. detail: { value: string | null } (single) or { value: string[] } (multiple) */
+    onFlintSelectChange?: (event: CustomEvent<FlintSelectChangeDetail>) => void;
+}
+export declare const FlintSelect: React.ForwardRefExoticComponent<FlintSelectProps & React.RefAttributes<FlintSelectElement>>;

package/dist/components/FlintSimpleTreeView.d.ts

@@ -1,8 +1,30 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSimpleTreeView as FlintSimpleTreeViewElement } from '@getufy/flint-ui/tree-view/flint-simple-tree-view';
-export declare const FlintSimpleTreeView: import("@lit/react").ReactWebComponent<FlintSimpleTreeViewElement, {
-    onFlintTreeViewExpandedItemsChange: EventName<CustomEvent>;
-    onFlintTreeViewItemClick: EventName<CustomEvent>;
-}>;
-export type FlintSimpleTreeViewProps = React.ComponentProps<typeof FlintSimpleTreeView>;
+export interface FlintTreeViewExpandedItemsChangeDetail {
+    expandedItems: string[];
+}
+/**
+ * A simple tree-view container that manages keyboard navigation, focus,
+and item selection/expansion for nested `flint-tree-item` elements.
+ *
+ * @slot - Place `flint-tree-item` elements here.
+ */
+export interface FlintSimpleTreeViewProps extends React.HTMLAttributes<FlintSimpleTreeViewElement> {
+    /** When `true`, disabled items can receive keyboard focus. */
+    disabledItemsFocusable?: boolean;
+    /** Callback invoked when a tree item is clicked or activated via keyboard. */
+    onItemClick?: FlintSimpleTreeViewElement['onItemClick'];
+    /** **Controlled mode.** The set of item IDs that should be expanded. */
+    expandedItems?: string[];
+    /** **Uncontrolled mode.** Item IDs to expand on initial mount. */
+    defaultExpandedItems?: string[];
+    /** Callback fired when the user toggles an item's expansion. */
+    onExpandedItemsChange?: FlintSimpleTreeViewElement['onExpandedItemsChange'];
+    /** What interaction triggers expand/collapse. */
+    expansionTrigger?: 'content' | 'iconContainer';
+    /** When the expanded set changes (detail: { expandedItems }) */
+    onFlintTreeViewExpandedItemsChange?: (event: CustomEvent<FlintTreeViewExpandedItemsChangeDetail>) => void;
+    /** When a tree item is activated (detail: { itemId }) */
+    onFlintTreeViewItemClick?: (event: CustomEvent) => void;
+}
+export declare const FlintSimpleTreeView: React.ForwardRefExoticComponent<FlintSimpleTreeViewProps & React.RefAttributes<FlintSimpleTreeViewElement>>;

package/dist/components/FlintSingleInputDateRangeField.d.ts

@@ -1,8 +1,33 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSingleInputDateRangeField as FlintSingleInputDateRangeFieldElement } from '@getufy/flint-ui/date-range-picker/flint-single-input-date-range-field';
-export declare const FlintSingleInputDateRangeField: import("@lit/react").ReactWebComponent<FlintSingleInputDateRangeFieldElement, {
-    onFlintDateRangePickerClear: EventName<CustomEvent>;
-    onFlintDateRangePickerChange: EventName<CustomEvent>;
-}>;
-export type FlintSingleInputDateRangeFieldProps = React.ComponentProps<typeof FlintSingleInputDateRangeField>;
+/**
+ * A single-input field for entering a date range (start → end).
+Renders as "MM/DD/YYYY – MM/DD/YYYY" with six independently editable segments.
+ */
+export interface FlintSingleInputDateRangeFieldProps extends React.HTMLAttributes<FlintSingleInputDateRangeFieldElement> {
+    /** Controlled range value [startISO, endISO]. */
+    value?: FlintSingleInputDateRangeFieldElement['value'];
+    /** Field label text. */
+    label?: string;
+    /** Form field name used for hidden inputs. */
+    name?: string;
+    /** Minimum allowed date (ISO YYYY-MM-DD). */
+    min?: string;
+    /** Maximum allowed date (ISO YYYY-MM-DD). */
+    max?: string;
+    /** Disables the field and prevents interaction. */
+    disabled?: boolean;
+    /** Makes the field read-only (visible but not editable). */
+    readonly?: boolean;
+    /** Displays the field in an error state. */
+    error?: boolean;
+    /** Helper text shown below the field. */
+    helperText?: string;
+    /** Error message displayed below the field when in error state. */
+    errorMessage?: string;
+    /** fired when all segments are cleared */
+    onFlintDateRangePickerClear?: (event: CustomEvent) => void;
+    /** { detail: { value: DateRange } } when both dates are complete */
+    onFlintDateRangePickerChange?: (event: CustomEvent) => void;
+}
+export declare const FlintSingleInputDateRangeField: React.ForwardRefExoticComponent<FlintSingleInputDateRangeFieldProps & React.RefAttributes<FlintSingleInputDateRangeFieldElement>>;

package/dist/components/FlintSkeleton.d.ts

@@ -1,4 +1,20 @@
 import React from 'react';
 import { FlintSkeleton as FlintSkeletonElement } from '@getufy/flint-ui/skeleton/flint-skeleton';
-export declare const FlintSkeleton: import("@lit/react").ReactWebComponent<FlintSkeletonElement, {}>;
-export type FlintSkeletonProps = React.ComponentProps<typeof FlintSkeleton>;
+/**
+ * Skeletons display a placeholder preview of content before data gets loaded.
+ */
+export interface FlintSkeletonProps extends React.HTMLAttributes<FlintSkeletonElement> {
+    /** If true, applies dark-theme styles regardless of OS preference. */
+    dark?: boolean;
+    /** The animation type. */
+    animation?: 'pulse' | 'wave' | 'none';
+    /** The shape of the skeleton. */
+    variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
+    /** The width of the skeleton. Accepts any CSS length value (e.g. '200px', '50%'). */
+    width?: string;
+    /** The height of the skeleton. Accepts any CSS length value. */
+    height?: string;
+    /** Accessible label announced by screen readers. Set to '' to silence. */
+    label?: string;
+}
+export declare const FlintSkeleton: React.ForwardRefExoticComponent<FlintSkeletonProps & React.RefAttributes<FlintSkeletonElement>>;

package/dist/components/FlintSlider.d.ts

@@ -1,7 +1,37 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSlider as FlintSliderElement } from '@getufy/flint-ui/slider/flint-slider';
-export declare const FlintSlider: import("@lit/react").ReactWebComponent<FlintSliderElement, {
-    onFlintSliderChange: EventName<CustomEvent>;
-}>;
-export type FlintSliderProps = React.ComponentProps<typeof FlintSlider>;
+export interface FlintSliderChangeDetail {
+    value: number;
+}
+/**
+ * Slider: a range input for selecting a numeric value.
+ */
+export interface FlintSliderProps extends Omit<React.HTMLAttributes<FlintSliderElement>, 'defaultValue'> {
+    /** Current slider value. */
+    value?: number;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: number | undefined;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step increment between values. */
+    step?: number;
+    /** Disables the slider and prevents interaction. */
+    disabled?: boolean;
+    /** Label text displayed above the slider. */
+    label?: string;
+    /** Whether to display the current value. */
+    showValue?: boolean;
+    /** Renders the slider vertically. */
+    vertical?: boolean;
+    /** Size variant of the slider. */
+    size?: FlintSliderElement['size'];
+    /** Form field name used when submitting form data. */
+    name?: string;
+    /** Optional formatter: `(value: number) => string`. JS-only prop (not an attribute). */
+    formatValue?: FlintSliderElement['formatValue'];
+    /** Fired when the slider value changes. */
+    onFlintSliderChange?: (event: CustomEvent<FlintSliderChangeDetail>) => void;
+}
+export declare const FlintSlider: React.ForwardRefExoticComponent<FlintSliderProps & React.RefAttributes<FlintSliderElement>>;

package/dist/components/FlintSnackbar.d.ts

@@ -1,8 +1,38 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSnackbar as FlintSnackbarElement } from '@getufy/flint-ui/snackbar/flint-snackbar';
-export declare const FlintSnackbar: import("@lit/react").ReactWebComponent<FlintSnackbarElement, {
-    onFlintSnackbarOpen: EventName<CustomEvent>;
-    onFlintSnackbarClose: EventName<CustomEvent>;
-}>;
-export type FlintSnackbarProps = React.ComponentProps<typeof FlintSnackbar>;
+export interface FlintSnackbarOpenDetail {
+    open: boolean;
+}
+export interface FlintSnackbarCloseDetail {
+    open: boolean;
+}
+/**
+ * Snackbars (also known as toasts) are used for brief notifications.
+They appear temporarily and float above the UI.
+ *
+ * @slot action - The action to display inside the snackbar.
+ * @slot - Optional content to display inside the snackbar, such as a message or a flint-alert.
+ */
+export interface FlintSnackbarProps extends React.HTMLAttributes<FlintSnackbarElement> {
+    /** Whether the snackbar is open. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** The message to display (slot fallback). */
+    message?: string;
+    /** Duration in milliseconds before the snackbar auto-closes. */
+    autoHideDuration?: number;
+    /** Position of the snackbar. */
+    anchorOrigin?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    /** Pause the auto-hide timer while the user hovers over the snackbar. */
+    pauseOnHover?: boolean;
+    /** Show a dismiss (✕) button. */
+    closable?: boolean;
+    /** Visual style variant. */
+    variant?: 'default' | 'info' | 'success' | 'warning' | 'error';
+    /** Fired when the snackbar opens (bubbles, composed). detail: `{ open: true }` */
+    onFlintSnackbarOpen?: (event: CustomEvent<FlintSnackbarOpenDetail>) => void;
+    /** Fired when the snackbar closes (bubbles, composed). detail: `{ open: false }` */
+    onFlintSnackbarClose?: (event: CustomEvent<FlintSnackbarCloseDetail>) => void;
+}
+export declare const FlintSnackbar: React.ForwardRefExoticComponent<FlintSnackbarProps & React.RefAttributes<FlintSnackbarElement>>;

package/dist/components/FlintSpeedDial.d.ts

@@ -1,4 +1,30 @@
 import React from 'react';
 import { FlintSpeedDial as FlintSpeedDialElement } from '@getufy/flint-ui/speed-dial/flint-speed-dial';
-export declare const FlintSpeedDial: import("@lit/react").ReactWebComponent<FlintSpeedDialElement, {}>;
-export type FlintSpeedDialProps = React.ComponentProps<typeof FlintSpeedDial>;
+/**
+ * Speed Dial — a FAB that reveals 3-6 related actions when pressed.
+ *
+ * @slot - `flint-speed-dial-action` elements.
+ * @slot icon - Icon shown on the FAB when closed (default: + SVG).
+ * @slot open-icon - Icon shown on the FAB when open (default: ✕ SVG).
+ */
+export interface FlintSpeedDialProps extends Omit<React.HTMLAttributes<FlintSpeedDialElement>, 'hidden'> {
+    /** Whether the speed dial is open (controlled). */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. Sets `open` once on first render. */
+    defaultOpen?: boolean;
+    /** Direction in which actions expand from the FAB (default 'up'). */
+    direction?: 'up' | 'down' | 'left' | 'right';
+    /** Hides the entire speed dial component. */
+    hidden?: boolean;
+    /** Disables the FAB and prevents opening. */
+    disabled?: boolean;
+    /** When true, tooltips on all actions are always visible (good for touch/a11y). */
+    persistentTooltips?: boolean;
+    /** Custom char/text rendered as the ✕ close icon on the FAB. Falls back to built-in SVG. */
+    closeIcon?: string;
+    /** ARIA label for the main FAB button. */
+    ariaLabel?: string;
+    /** True on touch-only devices (auto-detected unless explicitly set). */
+    isTouch?: boolean;
+}
+export declare const FlintSpeedDial: React.ForwardRefExoticComponent<FlintSpeedDialProps & React.RefAttributes<FlintSpeedDialElement>>;

package/dist/components/FlintSpeedDialAction.d.ts

@@ -1,7 +1,26 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSpeedDialAction as FlintSpeedDialActionElement } from '@getufy/flint-ui/speed-dial/flint-speed-dial';
-export declare const FlintSpeedDialAction: import("@lit/react").ReactWebComponent<FlintSpeedDialActionElement, {
-    onFlintSpeedDialActionClick: EventName<CustomEvent>;
-}>;
-export type FlintSpeedDialActionProps = React.ComponentProps<typeof FlintSpeedDialAction>;
+export interface FlintSpeedDialActionClickDetail {
+    name: string;
+    tooltipTitle: string;
+}
+/**
+ * A single action item inside a `flint-speed-dial`.
+ *
+ * @slot - Icon content for the action button.
+ */
+export interface FlintSpeedDialActionProps extends React.HTMLAttributes<FlintSpeedDialActionElement> {
+    /** Programmatic identifier for this action, included in the click event detail. */
+    name?: string;
+    /** Tooltip text shown alongside the action and used as aria-label. */
+    tooltipTitle?: string;
+    /** Forces the tooltip to be visible regardless of hover state. */
+    tooltipOpen?: boolean;
+    /** Tooltip placement relative to the action button. */
+    tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom';
+    /** If true, the action button is disabled. */
+    disabled?: boolean;
+    /** Fired when the action button is clicked. */
+    onFlintSpeedDialActionClick?: (event: CustomEvent<FlintSpeedDialActionClickDetail>) => void;
+}
+export declare const FlintSpeedDialAction: React.ForwardRefExoticComponent<FlintSpeedDialActionProps & React.RefAttributes<FlintSpeedDialActionElement>>;