@getufy/flint-ui-react 0.2.2 → 0.4.0

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[] }` */
+    onFlintSelectChange?: (event: CustomEvent<FlintSelectChangeDetail>) => void;
+}
+export declare const FlintSelect: React.ForwardRefExoticComponent<FlintSelectProps & React.RefAttributes<FlintSelectElement>>;

package/dist/components/FlintSelect.js

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

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

@@ -0,0 +1,16 @@
+// src/components/FlintSimpleTreeView.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintSimpleTreeView as FlintSimpleTreeViewElement } from "@getufy/flint-ui/tree-view/flint-simple-tree-view";
+var FlintSimpleTreeView = createComponent({
+  tagName: "flint-simple-tree-view",
+  elementClass: FlintSimpleTreeViewElement,
+  react: React,
+  events: {
+    onFlintTreeViewExpandedItemsChange: "flint-tree-view-expanded-items-change",
+    onFlintTreeViewItemClick: "flint-tree-view-item-click"
+  }
+});
+export {
+  FlintSimpleTreeView
+};

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

@@ -0,0 +1,16 @@
+// src/components/FlintSingleInputDateRangeField.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintSingleInputDateRangeField as FlintSingleInputDateRangeFieldElement } from "@getufy/flint-ui/date-range-picker/flint-single-input-date-range-field";
+var FlintSingleInputDateRangeField = createComponent({
+  tagName: "flint-single-input-date-range-field",
+  elementClass: FlintSingleInputDateRangeFieldElement,
+  react: React,
+  events: {
+    onFlintDateRangePickerClear: "flint-date-range-picker-clear",
+    onFlintDateRangePickerChange: "flint-date-range-picker-change"
+  }
+});
+export {
+  FlintSingleInputDateRangeField
+};

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

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

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

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

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

@@ -0,0 +1,16 @@
+// src/components/FlintSnackbar.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintSnackbar as FlintSnackbarElement } from "@getufy/flint-ui/snackbar/flint-snackbar";
+var FlintSnackbar = createComponent({
+  tagName: "flint-snackbar",
+  elementClass: FlintSnackbarElement,
+  react: React,
+  events: {
+    onFlintSnackbarOpen: "flint-snackbar-open",
+    onFlintSnackbarClose: "flint-snackbar-close"
+  }
+});
+export {
+  FlintSnackbar
+};

package/dist/components/FlintSpeedDial.d.ts

@@ -1,4 +1,40 @@
 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>;
+export interface FlintSpeedDialOpenDetail {
+    open: true;
+}
+export interface FlintSpeedDialCloseDetail {
+    open: false;
+}
+/**
+ * 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;
+    /** Fired when the dial opens. detail: `{ open: true }` */
+    onFlintSpeedDialOpen?: (event: CustomEvent<FlintSpeedDialOpenDetail>) => void;
+    /** Fired when the dial closes. detail: `{ open: false }` */
+    onFlintSpeedDialClose?: (event: CustomEvent<FlintSpeedDialCloseDetail>) => void;
+}
+export declare const FlintSpeedDial: React.ForwardRefExoticComponent<FlintSpeedDialProps & React.RefAttributes<FlintSpeedDialElement>>;

package/dist/components/FlintSpeedDial.js

@@ -0,0 +1,16 @@
+// src/components/FlintSpeedDial.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintSpeedDial as FlintSpeedDialElement } from "@getufy/flint-ui/speed-dial/flint-speed-dial";
+var FlintSpeedDial = createComponent({
+  tagName: "flint-speed-dial",
+  elementClass: FlintSpeedDialElement,
+  react: React,
+  events: {
+    onFlintSpeedDialOpen: "flint-speed-dial-open",
+    onFlintSpeedDialClose: "flint-speed-dial-close"
+  }
+});
+export {
+  FlintSpeedDial
+};

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

package/dist/components/FlintSpeedDialAction.js

@@ -0,0 +1,15 @@
+// src/components/FlintSpeedDialAction.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintSpeedDialAction as FlintSpeedDialActionElement } from "@getufy/flint-ui/speed-dial/flint-speed-dial";
+var FlintSpeedDialAction = createComponent({
+  tagName: "flint-speed-dial-action",
+  elementClass: FlintSpeedDialActionElement,
+  react: React,
+  events: {
+    onFlintSpeedDialActionClick: "flint-speed-dial-action-click"
+  }
+});
+export {
+  FlintSpeedDialAction
+};

package/dist/components/FlintSplitPanel.d.ts

@@ -1,7 +1,33 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSplitPanel as FlintSplitPanelElement } from '@getufy/flint-ui/split-panel/flint-split-panel';
-export declare const FlintSplitPanel: import("@lit/react").ReactWebComponent<FlintSplitPanelElement, {
-    onFlintSplitPanelReposition: EventName<CustomEvent>;
-}>;
-export type FlintSplitPanelProps = React.ComponentProps<typeof FlintSplitPanel>;
+export interface FlintSplitPanelRepositionDetail {
+    position: number;
+    positionInPixels: number;
+}
+/**
+ * `flint-split-panel` — Two adjacent panels separated by a draggable divider.
+ *
+ * @slot start - Content for the start (left/top) panel.
+ * @slot end - Content for the end (right/bottom) panel.
+ * @slot divider - Custom handle icon rendered inside the divider.
+ */
+export interface FlintSplitPanelProps extends React.HTMLAttributes<FlintSplitPanelElement> {
+    /** Divider position as a percentage (0–100). Defaults to 50. */
+    position?: number;
+    /** Divider position in pixels from the primary panel's edge. */
+    positionInPixels?: number;
+    /** Vertical layout — start/end panels are stacked top/bottom. */
+    vertical?: boolean;
+    /** Prevent the divider from being repositioned. */
+    disabled?: boolean;
+    /** Designates a primary panel that maintains its pixel size when the */
+    primary?: 'start' | 'end';
+    /** Space-separated snap positions (`Npx`, `N%`, `repeat(Npx)`, `repeat(N%)`), */
+    snap?: FlintSplitPanelElement['snap'];
+    /** How close (px) the divider must be to a snap point before snapping. Default: 12. */
+    snapThreshold?: number;
+    /** Emitted when the divider position changes.
+Detail: `{ position: number; positionInPixels: number }`. */
+    onFlintSplitPanelReposition?: (event: CustomEvent<FlintSplitPanelRepositionDetail>) => void;
+}
+export declare const FlintSplitPanel: React.ForwardRefExoticComponent<FlintSplitPanelProps & React.RefAttributes<FlintSplitPanelElement>>;

package/dist/components/FlintSplitPanel.js

@@ -0,0 +1,15 @@
+// src/components/FlintSplitPanel.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintSplitPanel as FlintSplitPanelElement } from "@getufy/flint-ui/split-panel/flint-split-panel";
+var FlintSplitPanel = createComponent({
+  tagName: "flint-split-panel",
+  elementClass: FlintSplitPanelElement,
+  react: React,
+  events: {
+    onFlintSplitPanelReposition: "flint-split-panel-reposition"
+  }
+});
+export {
+  FlintSplitPanel
+};

package/dist/components/FlintStack.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
 import { FlintStack as FlintStackElement } from '@getufy/flint-ui/stack/flint-stack';
-export declare const FlintStack: import("@lit/react").ReactWebComponent<FlintStackElement, {}>;
-export type FlintStackProps = React.ComponentProps<typeof FlintStack>;
+export interface FlintStackProps extends React.HTMLAttributes<FlintStackElement> {
+    /** Flex direction of the stack layout. */
+    direction?: FlintStackElement['direction'];
+    /** Space between child items (1 unit = 8px). */
+    spacing?: FlintStackElement['spacing'];
+    /** Cross-axis alignment of stack children. */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /** Main-axis alignment of stack children. */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Whether to use CSS flex gap for spacing. */
+    useFlexGap?: boolean;
+}
+export declare const FlintStack: React.ForwardRefExoticComponent<FlintStackProps & React.RefAttributes<FlintStackElement>>;

package/dist/components/FlintStack.js

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

package/dist/components/FlintStaticTimePicker.d.ts

@@ -1,7 +1,16 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintStaticTimePicker as FlintStaticTimePickerElement } from '@getufy/flint-ui/time-picker/flint-time-picker';
-export declare const FlintStaticTimePicker: import("@lit/react").ReactWebComponent<FlintStaticTimePickerElement, {
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintStaticTimePickerProps = React.ComponentProps<typeof FlintStaticTimePicker>;
+/**
+ * Static Time Picker: an always-visible inline clock.
+ */
+export interface FlintStaticTimePickerProps extends React.HTMLAttributes<FlintStaticTimePickerElement> {
+    /** 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 section. */
+    seconds?: boolean;
+    /** Fired when the time value changes. detail: `{ value: string }` */
+    onFlintStaticTimePickerChange?: (event: CustomEvent) => void;
+}
+export declare const FlintStaticTimePicker: React.ForwardRefExoticComponent<FlintStaticTimePickerProps & React.RefAttributes<FlintStaticTimePickerElement>>;

package/dist/components/FlintStaticTimePicker.js

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

package/dist/components/FlintStep.d.ts

@@ -1,7 +1,41 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintStep as FlintStepElement } from '@getufy/flint-ui/stepper/flint-stepper';
-export declare const FlintStep: import("@lit/react").ReactWebComponent<FlintStepElement, {
-    onFlintStepClick: EventName<CustomEvent>;
-}>;
-export type FlintStepProps = React.ComponentProps<typeof FlintStep>;
+export interface FlintStepClickDetail {
+    step: number;
+}
+/**
+ * Step: an individual step within a stepper.
+ *
+ * @slot icon - Custom step icon.
+ * @slot label - Custom label content.
+ * @slot - Step content.
+ */
+export interface FlintStepProps extends React.HTMLAttributes<FlintStepElement> {
+    /** Whether this step is the currently active step. */
+    active?: boolean;
+    /** Whether this step has been completed. */
+    completed?: boolean;
+    /** Whether this step is disabled and non-interactive. */
+    disabled?: boolean;
+    /** Whether this step is optional. */
+    optional?: boolean;
+    /** Whether this step is in an error state. */
+    error?: boolean;
+    /** Whether this is the last step in the stepper. */
+    last?: boolean;
+    /** Whether this step can be clicked to navigate to it. */
+    clickable?: boolean;
+    /** Layout direction of the step. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether to display the label below the step icon instead of beside it. */
+    alternativeLabel?: boolean;
+    /** Zero-based index of this step within the stepper. */
+    stepIndex?: number;
+    /** Text shown below the label when the step is optional. */
+    optionalLabel?: string;
+    /** Set by FlintStepper — true when the immediately preceding step is completed. */
+    prevCompleted?: boolean;
+    /** Fired when a non-linear step is clicked. detail: `{ step: number }` */
+    onFlintStepClick?: (event: CustomEvent<FlintStepClickDetail>) => void;
+}
+export declare const FlintStep: React.ForwardRefExoticComponent<FlintStepProps & React.RefAttributes<FlintStepElement>>;

package/dist/components/FlintStep.js

@@ -0,0 +1,15 @@
+// src/components/FlintStep.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintStep as FlintStepElement } from "@getufy/flint-ui/stepper/flint-stepper";
+var FlintStep = createComponent({
+  tagName: "flint-step",
+  elementClass: FlintStepElement,
+  react: React,
+  events: {
+    onFlintStepClick: "flint-step-click"
+  }
+});
+export {
+  FlintStep
+};