@getufy/flint-ui-react 0.2.2 → 0.4.0

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/FlintPagination.js

@@ -0,0 +1,15 @@
+// src/components/FlintPagination.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintPagination as FlintPaginationElement } from "@getufy/flint-ui/pagination/flint-pagination";
+var FlintPagination = createComponent({
+  tagName: "flint-pagination",
+  elementClass: FlintPaginationElement,
+  react: React,
+  events: {
+    onFlintPaginationChange: "flint-pagination-change"
+  }
+});
+export {
+  FlintPagination
+};

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/FlintPaper.js

@@ -0,0 +1,12 @@
+// src/components/FlintPaper.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintPaper as FlintPaperElement } from "@getufy/flint-ui/paper/flint-paper";
+var FlintPaper = createComponent({
+  tagName: "flint-paper",
+  elementClass: FlintPaperElement,
+  react: React
+});
+export {
+  FlintPaper
+};

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/FlintRadio.js

@@ -0,0 +1,15 @@
+// src/components/FlintRadio.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintRadio as FlintRadioElement } from "@getufy/flint-ui/radio/flint-radio";
+var FlintRadio = createComponent({
+  tagName: "flint-radio",
+  elementClass: FlintRadioElement,
+  react: React,
+  events: {
+    onFlintRadioSelect: "flint-radio-select"
+  }
+});
+export {
+  FlintRadio
+};

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/FlintRadioGroup.js

@@ -0,0 +1,15 @@
+// src/components/FlintRadioGroup.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintRadioGroup as FlintRadioGroupElement } from "@getufy/flint-ui/radio/flint-radio";
+var FlintRadioGroup = createComponent({
+  tagName: "flint-radio-group",
+  elementClass: FlintRadioGroupElement,
+  react: React,
+  events: {
+    onFlintRadioGroupChange: "flint-radio-group-change"
+  }
+});
+export {
+  FlintRadioGroup
+};

package/dist/components/FlintRangeSlider.d.ts

@@ -1,7 +1,28 @@
 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>;
+export interface FlintRangeSliderChangeDetail {
+    value: [number, number];
+}
+/**
+ * A range slider that lets users select a start and end value within a range.
+ */
+export interface FlintRangeSliderProps extends React.HTMLAttributes<FlintRangeSliderElement> {
+    value?: [number, number];
+    /** 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<FlintRangeSliderChangeDetail>) => void;
+}
+export declare const FlintRangeSlider: React.ForwardRefExoticComponent<FlintRangeSliderProps & React.RefAttributes<FlintRangeSliderElement>>;

package/dist/components/FlintRangeSlider.js

@@ -0,0 +1,15 @@
+// src/components/FlintRangeSlider.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintRangeSlider as FlintRangeSliderElement } from "@getufy/flint-ui/flint-range-slider/flint-range-slider";
+var FlintRangeSlider = createComponent({
+  tagName: "flint-range-slider",
+  elementClass: FlintRangeSliderElement,
+  react: React,
+  events: {
+    onFlintRangeSliderChange: "flint-range-slider-change"
+  }
+});
+export {
+  FlintRangeSlider
+};

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/FlintRating.js

@@ -0,0 +1,15 @@
+// src/components/FlintRating.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintRating as FlintRatingElement } from "@getufy/flint-ui/rating/flint-rating";
+var FlintRating = createComponent({
+  tagName: "flint-rating",
+  elementClass: FlintRatingElement,
+  react: React,
+  events: {
+    onFlintRatingChange: "flint-rating-change"
+  }
+});
+export {
+  FlintRating
+};

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/FlintRelativeTime.js

@@ -0,0 +1,12 @@
+// src/components/FlintRelativeTime.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintRelativeTime as FlintRelativeTimeElement } from "@getufy/flint-ui/relative-time/flint-relative-time";
+var FlintRelativeTime = createComponent({
+  tagName: "flint-relative-time",
+  elementClass: FlintRelativeTimeElement,
+  react: React
+});
+export {
+  FlintRelativeTime
+};

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/FlintResizableGroup.js

@@ -0,0 +1,17 @@
+// src/components/FlintResizableGroup.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintResizableGroup as FlintResizableGroupElement } from "@getufy/flint-ui/resizable/flint-resizable";
+var FlintResizableGroup = createComponent({
+  tagName: "flint-resizable-group",
+  elementClass: FlintResizableGroupElement,
+  react: React,
+  events: {
+    onFlintResizableCollapse: "flint-resizable-collapse",
+    onFlintResizableExpand: "flint-resizable-expand",
+    onFlintResizableChange: "flint-resizable-change"
+  }
+});
+export {
+  FlintResizableGroup
+};

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/FlintResizableHandle.js

@@ -0,0 +1,12 @@
+// src/components/FlintResizableHandle.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintResizableHandle as FlintResizableHandleElement } from "@getufy/flint-ui/resizable/flint-resizable";
+var FlintResizableHandle = createComponent({
+  tagName: "flint-resizable-handle",
+  elementClass: FlintResizableHandleElement,
+  react: React
+});
+export {
+  FlintResizableHandle
+};

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/FlintResizablePanel.js

@@ -0,0 +1,12 @@
+// src/components/FlintResizablePanel.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintResizablePanel as FlintResizablePanelElement } from "@getufy/flint-ui/resizable/flint-resizable";
+var FlintResizablePanel = createComponent({
+  tagName: "flint-resizable-panel",
+  elementClass: FlintResizablePanelElement,
+  react: React
+});
+export {
+  FlintResizablePanel
+};

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/FlintRichTreeView.js

@@ -0,0 +1,18 @@
+// src/components/FlintRichTreeView.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintRichTreeView as FlintRichTreeViewElement } from "@getufy/flint-ui/tree-view/flint-rich-tree-view";
+var FlintRichTreeView = createComponent({
+  tagName: "flint-rich-tree-view",
+  elementClass: FlintRichTreeViewElement,
+  react: React,
+  events: {
+    onFlintTreeViewError: "flint-tree-view-error",
+    onFlintTreeViewExpandedItemsChange: "flint-tree-view-expanded-items-change",
+    onFlintTreeViewItemClick: "flint-tree-view-item-click",
+    onFlintTreeViewItemPositionChange: "flint-tree-view-item-position-change"
+  }
+});
+export {
+  FlintRichTreeView
+};

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/FlintScrollArea.js

@@ -0,0 +1,12 @@
+// src/components/FlintScrollArea.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintScrollArea as FlintScrollAreaElement } from "@getufy/flint-ui/scroll-area/flint-scroll-area";
+var FlintScrollArea = createComponent({
+  tagName: "flint-scroll-area",
+  elementClass: FlintScrollAreaElement,
+  react: React
+});
+export {
+  FlintScrollArea
+};

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/FlintScrollBar.js

@@ -0,0 +1,12 @@
+// src/components/FlintScrollBar.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintScrollBar as FlintScrollBarElement } from "@getufy/flint-ui/scroll-area/flint-scroll-area";
+var FlintScrollBar = createComponent({
+  tagName: "flint-scroll-bar",
+  elementClass: FlintScrollBarElement,
+  react: React
+});
+export {
+  FlintScrollBar
+};