@getufy/flint-ui-react 0.2.1 → 0.3.0

package/dist/components/FlintNavigationMenuItem.d.ts

@@ -1,8 +1,20 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintNavigationMenuItem as FlintNavigationMenuItemElement } from '@getufy/flint-ui/navigation-menu/flint-navigation-menu-item';
-export declare const FlintNavigationMenuItem: import("@lit/react").ReactWebComponent<FlintNavigationMenuItemElement, {
-    onFlintNavigationMenuTriggerClick: EventName<CustomEvent>;
-    onFlintNavigationMenuContentToggle: EventName<CustomEvent>;
-}>;
-export type FlintNavigationMenuItemProps = React.ComponentProps<typeof FlintNavigationMenuItem>;
+/**
+ * @slot default - Item content (NavigationMenuTrigger and NavigationMenuContent)
+ */
+export interface FlintNavigationMenuItemProps extends React.HTMLAttributes<FlintNavigationMenuItemElement> {
+    /** Unique identifier for this menu item */
+    itemId?: string;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Delay in ms before opening on hover */
+    openDelay?: number;
+    /** Delay in ms before closing after mouse leaves */
+    closeDelay?: number;
+    /** Fired when the item's trigger is clicked. */
+    onFlintNavigationMenuTriggerClick?: (event: CustomEvent) => void;
+    /** Fired when content visibility changes. */
+    onFlintNavigationMenuContentToggle?: (event: CustomEvent) => void;
+}
+export declare const FlintNavigationMenuItem: React.ForwardRefExoticComponent<FlintNavigationMenuItemProps & React.RefAttributes<FlintNavigationMenuItemElement>>;

package/dist/components/FlintNavigationMenuLink.d.ts

@@ -1,4 +1,18 @@
 import React from 'react';
 import { FlintNavigationMenuLink as FlintNavigationMenuLinkElement } from '@getufy/flint-ui/navigation-menu/flint-navigation-menu-link';
-export declare const FlintNavigationMenuLink: import("@lit/react").ReactWebComponent<FlintNavigationMenuLinkElement, {}>;
-export type FlintNavigationMenuLinkProps = React.ComponentProps<typeof FlintNavigationMenuLink>;
+/**
+ * @slot default - Link text/content
+ */
+export interface FlintNavigationMenuLinkProps extends Omit<React.HTMLAttributes<FlintNavigationMenuLinkElement>, 'title'> {
+    /** The link URL */
+    href?: string;
+    /** The link target (e.g., '_blank') */
+    target?: string;
+    /** Link title/tooltip */
+    title?: string;
+    /** Whether the link is disabled */
+    disabled?: boolean;
+    /** Whether this link represents the current page. */
+    active?: boolean;
+}
+export declare const FlintNavigationMenuLink: React.ForwardRefExoticComponent<FlintNavigationMenuLinkProps & React.RefAttributes<FlintNavigationMenuLinkElement>>;

package/dist/components/FlintNavigationMenuList.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
 import { FlintNavigationMenuList as FlintNavigationMenuListElement } from '@getufy/flint-ui/navigation-menu/flint-navigation-menu-list';
-export declare const FlintNavigationMenuList: import("@lit/react").ReactWebComponent<FlintNavigationMenuListElement, {}>;
-export type FlintNavigationMenuListProps = React.ComponentProps<typeof FlintNavigationMenuList>;
+/**
+ * @slot default - Menu items (NavigationMenuItem elements)
+ */
+export interface FlintNavigationMenuListProps extends React.HTMLAttributes<FlintNavigationMenuListElement> {
+    /** Gap between menu items */
+    gap?: number;
+    /** Flex direction for the list */
+    direction?: 'row' | 'column';
+    /** Accessible label for the navigation landmark. */
+    ariaLabel?: string;
+}
+export declare const FlintNavigationMenuList: React.ForwardRefExoticComponent<FlintNavigationMenuListProps & React.RefAttributes<FlintNavigationMenuListElement>>;

package/dist/components/FlintNavigationMenuTrigger.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintNavigationMenuTrigger as FlintNavigationMenuTriggerElement } from '@getufy/flint-ui/navigation-menu/flint-navigation-menu-trigger';
-export declare const FlintNavigationMenuTrigger: import("@lit/react").ReactWebComponent<FlintNavigationMenuTriggerElement, {
-    onFlintNavigationMenuTriggerClick: EventName<CustomEvent>;
-}>;
-export type FlintNavigationMenuTriggerProps = React.ComponentProps<typeof FlintNavigationMenuTrigger>;
+/**
+ * @slot default - Trigger label/content
+ */
+export interface FlintNavigationMenuTriggerProps extends React.HTMLAttributes<FlintNavigationMenuTriggerElement> {
+    /** The ID of the associated content element */
+    contentId?: string;
+    /** Whether the trigger is disabled */
+    disabled?: boolean;
+    /** Fired when trigger is clicked */
+    onFlintNavigationMenuTriggerClick?: (event: CustomEvent) => void;
+}
+export declare const FlintNavigationMenuTrigger: React.ForwardRefExoticComponent<FlintNavigationMenuTriggerProps & React.RefAttributes<FlintNavigationMenuTriggerElement>>;

package/dist/components/FlintPagination.d.ts

@@ -1,7 +1,50 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintPagination as FlintPaginationElement } from '@getufy/flint-ui/pagination/flint-pagination';
-export declare const FlintPagination: import("@lit/react").ReactWebComponent<FlintPaginationElement, {
-    onFlintPaginationChange: EventName<CustomEvent>;
-}>;
-export type FlintPaginationProps = React.ComponentProps<typeof FlintPagination>;
+export interface FlintPaginationChangeDetail {
+    page: number;
+}
+/**
+ * Pagination component enabling the user to select a specific page from
+a range of pages.
+ *
+ * @slot prev-icon - Icon for the previous button (default: chevron left SVG).
+ * @slot next-icon - Icon for the next button (default: chevron right SVG).
+ * @slot first-icon - Icon for the first button (default: skip-to-start SVG).
+ * @slot last-icon - Icon for the last button (default: skip-to-end SVG).
+ * @slot ellipsis-icon - Icon for ellipsis items (default: three-dot SVG).
+ */
+export interface FlintPaginationProps extends Omit<React.HTMLAttributes<FlintPaginationElement>, 'color'> {
+    /** Total number of pages. */
+    count?: number;
+    /** The current page (1-based). In controlled mode, update this from the flint-pagination-change event. */
+    page?: number;
+    /** Initial page for uncontrolled mode. Ignored after first render. */
+    defaultPage?: number;
+    /** Accessible label for the nav landmark (aria-label). */
+    label?: string;
+    /** Variant. */
+    variant?: 'text' | 'outlined';
+    /** Shape. */
+    shape?: 'circular' | 'rounded' | 'square';
+    /** Size. */
+    size?: 'small' | 'medium' | 'large';
+    /** Color. */
+    color?: 'primary' | 'secondary' | 'standard';
+    /** Show first-page button. */
+    showFirstButton?: boolean;
+    /** Show last-page button. */
+    showLastButton?: boolean;
+    /** Hide previous button. */
+    hidePrevButton?: boolean;
+    /** Hide next button. */
+    hideNextButton?: boolean;
+    /** Number of sibling pages around the current page. */
+    siblingCount?: number;
+    /** Number of pages always shown at start and end. */
+    boundaryCount?: number;
+    /** Disable the whole component. */
+    disabled?: boolean;
+    /** { page: number } when the active page changes. */
+    onFlintPaginationChange?: (event: CustomEvent<FlintPaginationChangeDetail>) => void;
+}
+export declare const FlintPagination: React.ForwardRefExoticComponent<FlintPaginationProps & React.RefAttributes<FlintPaginationElement>>;

package/dist/components/FlintPaper.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
 import { FlintPaper as FlintPaperElement } from '@getufy/flint-ui/paper/flint-paper';
-export declare const FlintPaper: import("@lit/react").ReactWebComponent<FlintPaperElement, {}>;
-export type FlintPaperProps = React.ComponentProps<typeof FlintPaper>;
+/**
+ * The Paper component is a container for displaying content on an elevated surface.
+Shadow styles are influenced by real-world physical counterparts.
+ */
+export interface FlintPaperProps extends React.HTMLAttributes<FlintPaperElement> {
+    /** Shadow depth. Supported values: 0, 1, 2, 3, 4, 6, 8, 12, 16, 24. */
+    elevation?: number;
+    /** If true, the paper will have square corners (border-radius: 0). */
+    square?: boolean;
+    /** Visual variant. */
+    variant?: 'elevated' | 'outlined' | 'flat';
+}
+export declare const FlintPaper: React.ForwardRefExoticComponent<FlintPaperProps & React.RefAttributes<FlintPaperElement>>;

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>>;