@getufy/flint-ui-react 0.2.2 → 0.4.0

package/dist/components/FlintTabs.js

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

package/dist/components/FlintTextField.d.ts

@@ -1,8 +1,38 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTextField as FlintTextFieldElement } from '@getufy/flint-ui/text-field/flint-text-field';
-export declare const FlintTextField: import("@lit/react").ReactWebComponent<FlintTextFieldElement, {
-    onInput: EventName<CustomEvent>;
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintTextFieldProps = React.ComponentProps<typeof FlintTextField>;
+export interface FlintTextFieldInputDetail {
+    value: string;
+}
+export interface FlintTextFieldChangeDetail {
+    value: string;
+}
+/**
+ * Text Field: a styled text input with outlined/filled variants.
+ */
+export interface FlintTextFieldProps extends Omit<React.HTMLAttributes<FlintTextFieldElement>, 'defaultValue'> {
+    /** Label text displayed above the input. */
+    label?: string;
+    /** Current value of the text field. */
+    value?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** HTML input type (e.g. 'text', 'password', 'email'). */
+    type?: string;
+    /** Visual style variant of the text field. */
+    variant?: 'outlined' | 'filled';
+    /** Whether the text field is disabled. */
+    disabled?: boolean;
+    /** Whether the text field is in an error state. */
+    error?: boolean;
+    /** Helper text displayed below the input. */
+    helperText?: string;
+    /** Error message displayed below the input when in error state. */
+    errorMessage?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Fired on each keystroke as the value changes. detail: `{ value: string }` */
+    onFlintTextFieldInput?: (event: CustomEvent<FlintTextFieldInputDetail>) => void;
+    /** Fired when the input loses focus after the value has changed. detail: `{ value: string }` */
+    onFlintTextFieldChange?: (event: CustomEvent<FlintTextFieldChangeDetail>) => void;
+}
+export declare const FlintTextField: React.ForwardRefExoticComponent<FlintTextFieldProps & React.RefAttributes<FlintTextFieldElement>>;

package/dist/components/FlintTextField.js

@@ -0,0 +1,16 @@
+// src/components/FlintTextField.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintTextField as FlintTextFieldElement } from "@getufy/flint-ui/text-field/flint-text-field";
+var FlintTextField = createComponent({
+  tagName: "flint-text-field",
+  elementClass: FlintTextFieldElement,
+  react: React,
+  events: {
+    onFlintTextFieldInput: "flint-text-field-input",
+    onFlintTextFieldChange: "flint-text-field-change"
+  }
+});
+export {
+  FlintTextField
+};

package/dist/components/FlintTextarea.d.ts

@@ -1,8 +1,54 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTextarea as FlintTextareaElement } from '@getufy/flint-ui/textarea/flint-textarea';
-export declare const FlintTextarea: import("@lit/react").ReactWebComponent<FlintTextareaElement, {
-    onFlintTextareaInput: EventName<CustomEvent>;
-    onFlintTextareaChange: EventName<CustomEvent>;
-}>;
-export type FlintTextareaProps = React.ComponentProps<typeof FlintTextarea>;
+export interface FlintTextareaInputDetail {
+    value: string;
+}
+export interface FlintTextareaChangeDetail {
+    value: string;
+}
+/**
+ * A Textarea component for multi-line text input.
+ */
+export interface FlintTextareaProps extends Omit<React.HTMLAttributes<FlintTextareaElement>, 'defaultValue'> {
+    /** Current textarea value. */
+    value?: string;
+    /** Placeholder text shown when empty. */
+    placeholder?: string;
+    /** Disables the textarea and prevents interaction. */
+    disabled?: boolean;
+    /** Makes the textarea read-only. */
+    readonly?: boolean;
+    /** Marks the textarea as required for form validation. */
+    required?: boolean;
+    /** Whether the textarea is in an error state. */
+    error?: boolean;
+    /** Error message displayed below the textarea. */
+    errorMessage?: string;
+    /** Help text displayed below the textarea. */
+    helperText?: string;
+    /** Label text displayed above the textarea. */
+    label?: string;
+    /** Size variant of the textarea. */
+    size?: 'sm' | 'default' | 'lg';
+    /** Number of visible text rows. */
+    rows?: number;
+    /** Maximum number of characters allowed. */
+    maxlength?: number | undefined;
+    /** Minimum number of characters required. */
+    minlength?: number | undefined;
+    /** Form field name used when submitting form data. */
+    name?: string;
+    /** Browser autocomplete hint. */
+    autocomplete?: string;
+    /** Controls the resize handle. */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto';
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Accessible label for screen readers when no visible label is provided. */
+    ariaLabel?: string | null;
+    /** Dispatched on every keystroke. Detail: `{ value: string }` */
+    onFlintTextareaInput?: (event: CustomEvent<FlintTextareaInputDetail>) => void;
+    /** Dispatched on blur/change. Detail: `{ value: string }` */
+    onFlintTextareaChange?: (event: CustomEvent<FlintTextareaChangeDetail>) => void;
+}
+export declare const FlintTextarea: React.ForwardRefExoticComponent<FlintTextareaProps & React.RefAttributes<FlintTextareaElement>>;

package/dist/components/FlintTextarea.js

@@ -0,0 +1,16 @@
+// src/components/FlintTextarea.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintTextarea as FlintTextareaElement } from "@getufy/flint-ui/textarea/flint-textarea";
+var FlintTextarea = createComponent({
+  tagName: "flint-textarea",
+  elementClass: FlintTextareaElement,
+  react: React,
+  events: {
+    onFlintTextareaInput: "flint-textarea-input",
+    onFlintTextareaChange: "flint-textarea-change"
+  }
+});
+export {
+  FlintTextarea
+};

package/dist/components/FlintTimeClock.d.ts

@@ -1,8 +1,23 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTimeClock as FlintTimeClockElement } from '@getufy/flint-ui/time-picker/flint-time-picker';
-export declare const FlintTimeClock: import("@lit/react").ReactWebComponent<FlintTimeClockElement, {
-    onChange: EventName<CustomEvent>;
-    onFlintTimeClockViewChange: EventName<CustomEvent>;
-}>;
-export type FlintTimeClockProps = React.ComponentProps<typeof FlintTimeClock>;
+export interface FlintTimeClockChangeDetail {
+    value: string;
+}
+/**
+ * Time Clock: an analog clock face for selecting hours, minutes, and seconds.
+ */
+export interface FlintTimeClockProps extends React.HTMLAttributes<FlintTimeClockElement> {
+    /** Time value in HH:MM:SS format. */
+    value?: string;
+    /** Whether to use 12-hour (AM/PM) format instead of 24-hour. */
+    ampm?: boolean;
+    /** Whether to show a seconds face on the clock. */
+    seconds?: boolean;
+    /** Currently active clock face view. */
+    view?: FlintTimeClockElement['view'];
+    /** Fired when the time value changes. detail: `{ value: string }` */
+    onFlintTimeClockChange?: (event: CustomEvent<FlintTimeClockChangeDetail>) => void;
+    /** Fired when the clock face view switches. */
+    onFlintTimeClockViewChange?: (event: CustomEvent) => void;
+}
+export declare const FlintTimeClock: React.ForwardRefExoticComponent<FlintTimeClockProps & React.RefAttributes<FlintTimeClockElement>>;

package/dist/components/FlintTimeClock.js

@@ -0,0 +1,16 @@
+// src/components/FlintTimeClock.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintTimeClock as FlintTimeClockElement } from "@getufy/flint-ui/time-picker/flint-time-picker";
+var FlintTimeClock = createComponent({
+  tagName: "flint-time-clock",
+  elementClass: FlintTimeClockElement,
+  react: React,
+  events: {
+    onFlintTimeClockChange: "flint-time-clock-change",
+    onFlintTimeClockViewChange: "flint-time-clock-view-change"
+  }
+});
+export {
+  FlintTimeClock
+};

package/dist/components/FlintTimeField.d.ts

@@ -1,8 +1,33 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTimeField as FlintTimeFieldElement } from '@getufy/flint-ui/time-picker/flint-time-picker';
-export declare const FlintTimeField: import("@lit/react").ReactWebComponent<FlintTimeFieldElement, {
-    onFlintTimePickerClear: EventName<CustomEvent>;
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintTimeFieldProps = React.ComponentProps<typeof FlintTimeField>;
+export interface FlintTimeFieldChangeDetail {
+    value: string;
+}
+/**
+ * Time Field: a segmented time input with keyboard navigation.
+ */
+export interface FlintTimeFieldProps extends React.HTMLAttributes<FlintTimeFieldElement> {
+    /** Time value in HH:MM:SS format. */
+    value?: string;
+    /** Field label text. */
+    label?: string;
+    /** Whether to use 12-hour (AM/PM) format instead of 24-hour. */
+    ampm?: boolean;
+    /** Whether to show a seconds segment. */
+    seconds?: boolean;
+    /** 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 the clear button is clicked. */
+    onFlintTimePickerClear?: (event: CustomEvent) => void;
+    /** Fired when the time value changes. detail: `{ value: string }` */
+    onFlintTimeFieldChange?: (event: CustomEvent<FlintTimeFieldChangeDetail>) => void;
+}
+export declare const FlintTimeField: React.ForwardRefExoticComponent<FlintTimeFieldProps & React.RefAttributes<FlintTimeFieldElement>>;

package/dist/components/FlintTimeField.js

@@ -0,0 +1,16 @@
+// src/components/FlintTimeField.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintTimeField as FlintTimeFieldElement } from "@getufy/flint-ui/time-picker/flint-time-picker";
+var FlintTimeField = createComponent({
+  tagName: "flint-time-field",
+  elementClass: FlintTimeFieldElement,
+  react: React,
+  events: {
+    onFlintTimePickerClear: "flint-time-picker-clear",
+    onFlintTimeFieldChange: "flint-time-field-change"
+  }
+});
+export {
+  FlintTimeField
+};

package/dist/components/FlintTimePicker.d.ts

@@ -1,7 +1,28 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTimePicker as FlintTimePickerElement } from '@getufy/flint-ui/time-picker/flint-time-picker';
-export declare const FlintTimePicker: import("@lit/react").ReactWebComponent<FlintTimePickerElement, {
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintTimePickerProps = React.ComponentProps<typeof FlintTimePicker>;
+/**
+ * Time Picker: a configurable time input supporting desktop, mobile, and static variants.
+ */
+export interface FlintTimePickerProps extends React.HTMLAttributes<FlintTimePickerElement> {
+    /** Time value in HH:MM:SS format. */
+    value?: string;
+    /** Field label text. */
+    label?: string;
+    /** Picker variant controlling the UI style. */
+    variant?: 'desktop' | 'mobile' | 'static' | 'auto';
+    /** Whether to use 12-hour (AM/PM) format instead of 24-hour. */
+    ampm?: boolean;
+    /** Whether to show a seconds segment. */
+    seconds?: boolean;
+    /** Disables the picker and prevents interaction. */
+    disabled?: boolean;
+    /** Displays the picker 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 the time value changes. detail: `{ value: string }` */
+    onFlintTimePickerChange?: (event: CustomEvent) => void;
+}
+export declare const FlintTimePicker: React.ForwardRefExoticComponent<FlintTimePickerProps & React.RefAttributes<FlintTimePickerElement>>;

package/dist/components/FlintTimePicker.js

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

package/dist/components/FlintToaster.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
 import { FlintToaster as FlintToasterElement } from '@getufy/flint-ui/sonner/flint-sonner';
-export declare const FlintToaster: import("@lit/react").ReactWebComponent<FlintToasterElement, {}>;
-export type FlintToasterProps = React.ComponentProps<typeof FlintToaster>;
+/**
+ * Toast container. Place **once** in your application (typically in `<body>`).
+Toasts are created imperatively via the `toast()` function.
+ */
+export interface FlintToasterProps extends React.HTMLAttributes<FlintToasterElement> {
+    /** Position of the toast stack relative to the viewport. */
+    position?: FlintToasterElement['position'];
+    /** Default auto-dismiss duration in milliseconds. */
+    duration?: number;
+    /** Maximum number of toasts visible simultaneously. */
+    visibleToasts?: number;
+}
+export declare const FlintToaster: React.ForwardRefExoticComponent<FlintToasterProps & React.RefAttributes<FlintToasterElement>>;

package/dist/components/FlintToaster.js

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

package/dist/components/FlintToggle.d.ts

@@ -1,7 +1,29 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintToggle as FlintToggleElement } from '@getufy/flint-ui/toggle/flint-toggle';
-export declare const FlintToggle: import("@lit/react").ReactWebComponent<FlintToggleElement, {
-    onFlintToggleChange: EventName<CustomEvent>;
-}>;
-export type FlintToggleProps = React.ComponentProps<typeof FlintToggle>;
+export interface FlintToggleChangeDetail {
+    pressed: boolean;
+}
+/**
+ * A two-state button that can be either on (pressed) or off.
+ *
+ * @slot - Content to render inside the toggle (text, icons, or both).
+ */
+export interface FlintToggleProps extends Omit<React.HTMLAttributes<FlintToggleElement>, 'dir'> {
+    /** Whether the toggle is currently pressed (on). */
+    pressed?: boolean;
+    /** Whether the toggle is disabled. */
+    disabled?: boolean;
+    /** Visual variant of the toggle. */
+    variant?: 'default' | 'outline';
+    /** Size of the toggle. */
+    size?: 'sm' | 'default' | 'lg';
+    /** Text direction for the toggle. */
+    dir?: 'ltr' | 'rtl';
+    /** Initial pressed state for uncontrolled mode. */
+    defaultPressed?: boolean;
+    /** Accessible label for icon-only toggles. */
+    ariaLabel?: string | null;
+    /** Dispatched when the pressed state changes. Detail: `{ pressed: boolean }` */
+    onFlintToggleChange?: (event: CustomEvent<FlintToggleChangeDetail>) => void;
+}
+export declare const FlintToggle: React.ForwardRefExoticComponent<FlintToggleProps & React.RefAttributes<FlintToggleElement>>;

package/dist/components/FlintToggle.js

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

package/dist/components/FlintToggleButton.d.ts

@@ -1,7 +1,22 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintToggleButton as FlintToggleButtonElement } from '@getufy/flint-ui/button/flint-toggle-button';
-export declare const FlintToggleButton: import("@lit/react").ReactWebComponent<FlintToggleButtonElement, {
-    onFlintToggleButtonChange: EventName<CustomEvent>;
-}>;
-export type FlintToggleButtonProps = React.ComponentProps<typeof FlintToggleButton>;
+export interface FlintToggleButtonChangeDetail {
+    value: string;
+    selected: boolean;
+}
+/**
+ * Toggle Button: a button that can be toggled on/off.
+ */
+export interface FlintToggleButtonProps extends React.HTMLAttributes<FlintToggleButtonElement> {
+    /** Whether the button is currently selected (pressed). */
+    selected?: boolean;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Value associated with this toggle button. */
+    value?: string;
+    /** Size variant of the toggle button. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Fired when the button's selected state changes. */
+    onFlintToggleButtonChange?: (event: CustomEvent<FlintToggleButtonChangeDetail>) => void;
+}
+export declare const FlintToggleButton: React.ForwardRefExoticComponent<FlintToggleButtonProps & React.RefAttributes<FlintToggleButtonElement>>;

package/dist/components/FlintToggleButton.js

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

package/dist/components/FlintToggleButtonGroup.d.ts

@@ -1,7 +1,19 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintToggleButtonGroup as FlintToggleButtonGroupElement } from '@getufy/flint-ui/button/flint-toggle-button-group';
-export declare const FlintToggleButtonGroup: import("@lit/react").ReactWebComponent<FlintToggleButtonGroupElement, {
-    onFlintToggleButtonGroupChange: EventName<CustomEvent>;
-}>;
-export type FlintToggleButtonGroupProps = React.ComponentProps<typeof FlintToggleButtonGroup>;
+export interface FlintToggleButtonGroupChangeDetail {
+    value: string | string[];
+}
+/**
+ * Toggle Button Group: manages exclusive or multi-select toggle buttons.
+ */
+export interface FlintToggleButtonGroupProps extends Omit<React.HTMLAttributes<FlintToggleButtonGroupElement>, 'defaultValue'> {
+    /** Currently selected value(s). A string when exclusive, an array otherwise. */
+    value?: string | string[];
+    /** Initial selected value(s) for uncontrolled usage. */
+    defaultValue?: string | string[];
+    /** Whether only one button can be selected at a time. */
+    exclusive?: boolean;
+    /** Fired when the group's selected value(s) change. */
+    onFlintToggleButtonGroupChange?: (event: CustomEvent<FlintToggleButtonGroupChangeDetail>) => void;
+}
+export declare const FlintToggleButtonGroup: React.ForwardRefExoticComponent<FlintToggleButtonGroupProps & React.RefAttributes<FlintToggleButtonGroupElement>>;

package/dist/components/FlintToggleButtonGroup.js

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

package/dist/components/FlintTooltip.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
 import { FlintTooltip as FlintTooltipElement } from '@getufy/flint-ui/tooltip/flint-tooltip';
-export declare const FlintTooltip: import("@lit/react").ReactWebComponent<FlintTooltipElement, {}>;
-export type FlintTooltipProps = React.ComponentProps<typeof FlintTooltip>;
+/**
+ * flint-tooltip
+A component that displays a text label when users hover over or focus on an element.
+ */
+export interface FlintTooltipProps extends React.HTMLAttributes<FlintTooltipElement> {
+    /** Text content displayed inside the tooltip. */
+    label?: string;
+    /** Preferred placement of the tooltip relative to the trigger element. */
+    placement?: FlintTooltipElement['placement'];
+    /** Show a small arrow pointing toward the trigger element. */
+    arrow?: boolean;
+    /** Disables the tooltip so it never appears. */
+    disabled?: boolean;
+    /** Delay in ms before showing the tooltip. */
+    openDelay?: number;
+    /** Delay in ms before hiding the tooltip. */
+    closeDelay?: number;
+}
+export declare const FlintTooltip: React.ForwardRefExoticComponent<FlintTooltipProps & React.RefAttributes<FlintTooltipElement>>;

package/dist/components/FlintTooltip.js

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

package/dist/components/FlintTransferList.d.ts

@@ -1,7 +1,27 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTransferList as FlintTransferListElement } from '@getufy/flint-ui/transfer-list/flint-transfer-list';
-export declare const FlintTransferList: import("@lit/react").ReactWebComponent<FlintTransferListElement, {
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintTransferListProps = React.ComponentProps<typeof FlintTransferList>;
+export interface FlintTransferListChangeDetail {
+    value: string[];
+}
+/**
+ * A premium Transfer List component for moving items between two lists.
+ */
+export interface FlintTransferListProps extends Omit<React.HTMLAttributes<FlintTransferListElement>, 'defaultValue'> {
+    /** Available options to display in the transfer list. */
+    options?: FlintTransferListElement['options'];
+    /** Currently selected values (items in the right list). */
+    value?: string[];
+    /** Initial value for uncontrolled usage. Applied once on first render. */
+    defaultValue?: string[];
+    /** Title displayed above the left (available) list. */
+    leftTitle?: string;
+    /** Title displayed above the right (selected) list. */
+    rightTitle?: string;
+    /** Whether the transfer list is disabled. */
+    disabled?: boolean;
+    /** Whether to show search inputs for filtering each list. */
+    searchable?: boolean;
+    /** Dispatched when items are moved between lists. detail: `{ value: string[] }` */
+    onFlintTransferListChange?: (event: CustomEvent<FlintTransferListChangeDetail>) => void;
+}
+export declare const FlintTransferList: React.ForwardRefExoticComponent<FlintTransferListProps & React.RefAttributes<FlintTransferListElement>>;

package/dist/components/FlintTransferList.js

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

package/dist/components/FlintTreeItem.d.ts

@@ -1,8 +1,36 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTreeItem as FlintTreeItemElement } from '@getufy/flint-ui/tree-view/flint-tree-item';
-export declare const FlintTreeItem: import("@lit/react").ReactWebComponent<FlintTreeItemElement, {
-    onFlintTreeItemToggle: EventName<CustomEvent>;
-    onFlintTreeItemClick: EventName<CustomEvent>;
-}>;
-export type FlintTreeItemProps = React.ComponentProps<typeof FlintTreeItem>;
+export interface FlintTreeItemToggleDetail {
+    itemId: string;
+    expanded: boolean;
+}
+export interface FlintTreeItemClickDetail {
+    itemId: string;
+}
+/**
+ * A single item inside a `flint-simple-tree-view` or `flint-rich-tree-view`.
+ *
+ * @slot lead - Leading icon or content.
+ * @slot - Item label text.
+ */
+export interface FlintTreeItemProps extends React.HTMLAttributes<FlintTreeItemElement> {
+    /** Unique identifier for this item within the tree */
+    itemId?: string;
+    /** Label text displayed for this item */
+    label?: string;
+    /** Whether this item is disabled (non-interactive) */
+    disabled?: boolean;
+    /** Whether this item's children are visible */
+    expanded?: boolean;
+    /** When `true`, forces the expand button to render even if no `flint-tree-item` */
+    hasChildren?: boolean;
+    /** Visual drop position indicator — reflected so CSS :host selectors match */
+    dropPosition?: 'before' | 'after' | 'inside' | null;
+    /** Whether to show a dedicated drag handle icon */
+    showDragHandle?: boolean;
+    /** Fired when expanded state changes (detail: { itemId, expanded }) */
+    onFlintTreeItemToggle?: (event: CustomEvent<FlintTreeItemToggleDetail>) => void;
+    /** Fired when the item is clicked (detail: { itemId }) */
+    onFlintTreeItemClick?: (event: CustomEvent<FlintTreeItemClickDetail>) => void;
+}
+export declare const FlintTreeItem: React.ForwardRefExoticComponent<FlintTreeItemProps & React.RefAttributes<FlintTreeItemElement>>;

package/dist/components/FlintTreeItem.js

@@ -0,0 +1,16 @@
+// src/components/FlintTreeItem.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintTreeItem as FlintTreeItemElement } from "@getufy/flint-ui/tree-view/flint-tree-item";
+var FlintTreeItem = createComponent({
+  tagName: "flint-tree-item",
+  elementClass: FlintTreeItemElement,
+  react: React,
+  events: {
+    onFlintTreeItemToggle: "flint-tree-item-toggle",
+    onFlintTreeItemClick: "flint-tree-item-click"
+  }
+});
+export {
+  FlintTreeItem
+};