@getufy/flint-ui-react 0.2.2 → 1.0.0

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/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/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 Omit<React.HTMLAttributes<FlintStaticTimePickerElement>, 'onChange'> {
+    /** 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. */
+    onChange?: (event: CustomEvent) => void;
+}
+export declare const FlintStaticTimePicker: React.ForwardRefExoticComponent<FlintStaticTimePickerProps & React.RefAttributes<FlintStaticTimePickerElement>>;

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/FlintStepConnector.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
 import { FlintStepConnector as FlintStepConnectorElement } from '@getufy/flint-ui/stepper/flint-stepper';
-export declare const FlintStepConnector: import("@lit/react").ReactWebComponent<FlintStepConnectorElement, {}>;
-export type FlintStepConnectorProps = React.ComponentProps<typeof FlintStepConnector>;
+export interface FlintStepConnectorProps extends React.HTMLAttributes<FlintStepConnectorElement> {
+    /** Layout direction of the connector line. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether the connector represents a completed step transition. */
+    completed?: boolean;
+}
+export declare const FlintStepConnector: React.ForwardRefExoticComponent<FlintStepConnectorProps & React.RefAttributes<FlintStepConnectorElement>>;

package/dist/components/FlintStepContent.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintStepContent as FlintStepContentElement } from '@getufy/flint-ui/stepper/flint-stepper';
-export declare const FlintStepContent: import("@lit/react").ReactWebComponent<FlintStepContentElement, {}>;
-export type FlintStepContentProps = React.ComponentProps<typeof FlintStepContent>;
+/**
+ * Step Content: the collapsible content area for a step.
+ *
+ * @slot - Step content.
+ */
+export interface FlintStepContentProps extends React.HTMLAttributes<FlintStepContentElement> {
+    /** Whether the content is visible. Defaults true so standalone usage always shows. */
+    open?: boolean;
+}
+export declare const FlintStepContent: React.ForwardRefExoticComponent<FlintStepContentProps & React.RefAttributes<FlintStepContentElement>>;

package/dist/components/FlintStepLabel.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintStepLabel as FlintStepLabelElement } from '@getufy/flint-ui/stepper/flint-stepper';
-export declare const FlintStepLabel: import("@lit/react").ReactWebComponent<FlintStepLabelElement, {}>;
-export type FlintStepLabelProps = React.ComponentProps<typeof FlintStepLabel>;
+/**
+ * Step Label: the label for a step.
+ *
+ * @slot - Label text.
+ * @slot optional - Optional step text.
+ */
+export interface FlintStepLabelProps extends React.HTMLAttributes<FlintStepLabelElement> {
+    /** Whether the label's step is currently active. */
+    active?: boolean;
+    /** Whether the label's step is disabled. */
+    disabled?: boolean;
+    /** Whether the label's step is in an error state. */
+    error?: boolean;
+}
+export declare const FlintStepLabel: React.ForwardRefExoticComponent<FlintStepLabelProps & React.RefAttributes<FlintStepLabelElement>>;

package/dist/components/FlintStepper.d.ts

@@ -1,7 +1,22 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintStepper as FlintStepperElement } from '@getufy/flint-ui/stepper/flint-stepper';
-export declare const FlintStepper: import("@lit/react").ReactWebComponent<FlintStepperElement, {
-    onFlintStepChange: EventName<CustomEvent>;
-}>;
-export type FlintStepperProps = React.ComponentProps<typeof FlintStepper>;
+/**
+ * Stepper: a multi-step progress indicator.
+ */
+export interface FlintStepperProps extends React.HTMLAttributes<FlintStepperElement> {
+    /** Zero-based index of the currently active step. */
+    activeStep?: number;
+    /** Initial active step for uncontrolled usage. */
+    defaultActiveStep?: number;
+    /** Layout direction of the stepper. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether to display step labels below the icons instead of beside them. */
+    alternativeLabel?: boolean;
+    /** Whether steps can be navigated in any order (enables clickable steps). */
+    nonLinear?: boolean;
+    /** Accessible label for the stepper landmark (maps to aria-label on the list element). */
+    label?: string;
+    /** Fired when the active step changes via step click. */
+    onFlintStepChange?: (event: CustomEvent) => void;
+}
+export declare const FlintStepper: React.ForwardRefExoticComponent<FlintStepperProps & React.RefAttributes<FlintStepperElement>>;

package/dist/components/FlintSwitch.d.ts

@@ -1,7 +1,35 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintSwitch as FlintSwitchElement } from '@getufy/flint-ui/switch/flint-switch';
-export declare const FlintSwitch: import("@lit/react").ReactWebComponent<FlintSwitchElement, {
-    onFlintSwitchChange: EventName<CustomEvent>;
-}>;
-export type FlintSwitchProps = React.ComponentProps<typeof FlintSwitch>;
+export interface FlintSwitchChangeDetail {
+    checked: boolean;
+}
+/**
+ * A Switch component for toggling settings.
+ *
+ * @slot icon-on - Optional icon to show when the switch is ON.
+ * @slot icon-off - Optional icon to show when the switch is OFF.
+ * @slot - Optional label content (used when the `label` prop is not set).
+ */
+export interface FlintSwitchProps extends Omit<React.HTMLAttributes<FlintSwitchElement>, 'defaultChecked'> {
+    /** Whether the switch is toggled on. */
+    checked?: boolean;
+    /** Disables the switch and prevents interaction. */
+    disabled?: boolean;
+    /** Marks the switch as required for form validation. */
+    required?: boolean;
+    /** Size of the switch control. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visible label text displayed next to the switch. */
+    label?: string;
+    /** Form field name used when submitting form data. */
+    name?: string;
+    /** Value submitted with form data when checked. */
+    value?: string;
+    /** Initial checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
+    /** Accessible label for screen readers when no visible label is provided. */
+    ariaLabel?: string | null;
+    /** Dispatched when the switch state changes. Detail: `{ checked: boolean }` */
+    onFlintSwitchChange?: (event: CustomEvent<FlintSwitchChangeDetail>) => void;
+}
+export declare const FlintSwitch: React.ForwardRefExoticComponent<FlintSwitchProps & React.RefAttributes<FlintSwitchElement>>;

package/dist/components/FlintTab.d.ts

@@ -1,7 +1,25 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTab as FlintTabElement } from '@getufy/flint-ui/tabs/flint-tabs';
-export declare const FlintTab: import("@lit/react").ReactWebComponent<FlintTabElement, {
-    onFlintTabClick: EventName<CustomEvent>;
-}>;
-export type FlintTabProps = React.ComponentProps<typeof FlintTab>;
+export interface FlintTabClickDetail {
+    value: string;
+}
+/**
+ * Tab: an individual tab button within a tab list.
+ */
+export interface FlintTabProps extends React.HTMLAttributes<FlintTabElement> {
+    /** Unique identifier for this tab. */
+    value?: string;
+    /** Whether the tab is disabled. */
+    disabled?: boolean;
+    /** Whether the tab is currently selected. */
+    selected?: boolean;
+    /** Position of the icon slot relative to the label. */
+    iconPosition?: 'top' | 'bottom' | 'start' | 'end';
+    /** URL to navigate to, renders the tab as a link. */
+    href?: string;
+    /** Whether the tab stretches to fill available width. */
+    fullWidth?: boolean;
+    /** Fired when the tab is clicked or activated via keyboard. */
+    onFlintTabClick?: (event: CustomEvent<FlintTabClickDetail>) => void;
+}
+export declare const FlintTab: React.ForwardRefExoticComponent<FlintTabProps & React.RefAttributes<FlintTabElement>>;

package/dist/components/FlintTabList.d.ts

@@ -1,7 +1,16 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTabList as FlintTabListElement } from '@getufy/flint-ui/tabs/flint-tabs';
-export declare const FlintTabList: import("@lit/react").ReactWebComponent<FlintTabListElement, {
-    onFlintTabClick: EventName<CustomEvent>;
-}>;
-export type FlintTabListProps = React.ComponentProps<typeof FlintTabList>;
+export interface FlintTabListProps extends React.HTMLAttributes<FlintTabListElement> {
+    /** Layout direction of the tab list. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Display variant controlling tab sizing and scrollability. */
+    variant?: 'standard' | 'fullWidth' | 'scrollable';
+    /** Whether to center the tabs within the tab list. */
+    centered?: boolean;
+    /** Whether to show scroll buttons in scrollable mode. */
+    scrollButtons?: 'auto' | 'false';
+    /** Accessible label for the tab list. */
+    ariaLabel?: string;
+    onFlintTabClick?: (event: CustomEvent) => void;
+}
+export declare const FlintTabList: React.ForwardRefExoticComponent<FlintTabListProps & React.RefAttributes<FlintTabListElement>>;

package/dist/components/FlintTabPanel.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { FlintTabPanel as FlintTabPanelElement } from '@getufy/flint-ui/tabs/flint-tabs';
-export declare const FlintTabPanel: import("@lit/react").ReactWebComponent<FlintTabPanelElement, {}>;
-export type FlintTabPanelProps = React.ComponentProps<typeof FlintTabPanel>;
+export interface FlintTabPanelProps extends React.HTMLAttributes<FlintTabPanelElement> {
+    /** Identifier linking this panel to its corresponding tab. */
+    value?: string;
+}
+export declare const FlintTabPanel: React.ForwardRefExoticComponent<FlintTabPanelProps & React.RefAttributes<FlintTabPanelElement>>;

package/dist/components/FlintTable.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintTable as FlintTableElement } from '@getufy/flint-ui/table/flint-table';
-export declare const FlintTable: import("@lit/react").ReactWebComponent<FlintTableElement, {}>;
-export type FlintTableProps = React.ComponentProps<typeof FlintTable>;
+/**
+ * flint-table
+ */
+export interface FlintTableProps extends React.HTMLAttributes<FlintTableElement> {
+    /** Cell padding density. */
+    size?: 'medium' | 'small';
+}
+export declare const FlintTable: React.ForwardRefExoticComponent<FlintTableProps & React.RefAttributes<FlintTableElement>>;

package/dist/components/FlintTableBody.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintTableBody as FlintTableBodyElement } from '@getufy/flint-ui/table/flint-table';
-export declare const FlintTableBody: import("@lit/react").ReactWebComponent<FlintTableBodyElement, {}>;
-export type FlintTableBodyProps = React.ComponentProps<typeof FlintTableBody>;
+/**
+ * flint-table-body
+ */
+export interface FlintTableBodyProps extends React.HTMLAttributes<FlintTableBodyElement> {
+    /** Enables alternating row shading. */
+    striped?: boolean;
+}
+export declare const FlintTableBody: React.ForwardRefExoticComponent<FlintTableBodyProps & React.RefAttributes<FlintTableBodyElement>>;

package/dist/components/FlintTableCell.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
 import { FlintTableCell as FlintTableCellElement } from '@getufy/flint-ui/table/flint-table';
-export declare const FlintTableCell: import("@lit/react").ReactWebComponent<FlintTableCellElement, {}>;
-export type FlintTableCellProps = React.ComponentProps<typeof FlintTableCell>;
+/**
+ * flint-table-cell
+ */
+export interface FlintTableCellProps extends React.HTMLAttributes<FlintTableCellElement> {
+    /** Renders the cell with header styling. */
+    header?: boolean;
+    /** Text alignment within the cell. */
+    align?: 'left' | 'right' | 'center';
+    /** Padding preset for the cell. */
+    padding?: 'normal' | 'checkbox' | 'none';
+}
+export declare const FlintTableCell: React.ForwardRefExoticComponent<FlintTableCellProps & React.RefAttributes<FlintTableCellElement>>;

package/dist/components/FlintTableContainer.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintTableContainer as FlintTableContainerElement } from '@getufy/flint-ui/table/flint-table';
-export declare const FlintTableContainer: import("@lit/react").ReactWebComponent<FlintTableContainerElement, {}>;
-export type FlintTableContainerProps = React.ComponentProps<typeof FlintTableContainer>;
+/**
+ * flint-table-container
+ */
+export interface FlintTableContainerProps extends React.HTMLAttributes<FlintTableContainerElement> {
+    /** Applies a stronger box-shadow elevation. */
+    shadow?: boolean;
+    /** Sticks the table header to the top on scroll. */
+    stickyHeader?: boolean;
+}
+export declare const FlintTableContainer: React.ForwardRefExoticComponent<FlintTableContainerProps & React.RefAttributes<FlintTableContainerElement>>;

package/dist/components/FlintTableFooter.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintTableFooter as FlintTableFooterElement } from '@getufy/flint-ui/table/flint-table';
-export declare const FlintTableFooter: import("@lit/react").ReactWebComponent<FlintTableFooterElement, {}>;
-export type FlintTableFooterProps = React.ComponentProps<typeof FlintTableFooter>;
+/**
+ * flint-table-footer
+ */
+export interface FlintTableFooterProps extends React.HTMLAttributes<FlintTableFooterElement> {
+}
+export declare const FlintTableFooter: React.ForwardRefExoticComponent<FlintTableFooterProps & React.RefAttributes<FlintTableFooterElement>>;

package/dist/components/FlintTableHead.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintTableHead as FlintTableHeadElement } from '@getufy/flint-ui/table/flint-table';
-export declare const FlintTableHead: import("@lit/react").ReactWebComponent<FlintTableHeadElement, {}>;
-export type FlintTableHeadProps = React.ComponentProps<typeof FlintTableHead>;
+/**
+ * flint-table-head
+ */
+export interface FlintTableHeadProps extends React.HTMLAttributes<FlintTableHeadElement> {
+}
+export declare const FlintTableHead: React.ForwardRefExoticComponent<FlintTableHeadProps & React.RefAttributes<FlintTableHeadElement>>;

package/dist/components/FlintTablePagination.d.ts

@@ -1,8 +1,34 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTablePagination as FlintTablePaginationElement } from '@getufy/flint-ui/table/flint-table-pagination';
-export declare const FlintTablePagination: import("@lit/react").ReactWebComponent<FlintTablePaginationElement, {
-    onFlintPaginationPageChange: EventName<CustomEvent>;
-    onFlintPaginationRowsPerPageChange: EventName<CustomEvent>;
-}>;
-export type FlintTablePaginationProps = React.ComponentProps<typeof FlintTablePagination>;
+export interface FlintPaginationPageChangeDetail {
+    page: number;
+}
+export interface FlintPaginationRowsPerPageChangeDetail {
+    rowsPerPage: number;
+}
+/**
+ * Table Pagination: pagination controls for tabular data.
+ */
+export interface FlintTablePaginationProps extends React.HTMLAttributes<FlintTablePaginationElement> {
+    /** Total number of rows. */
+    count?: number;
+    /** Controlled current page (0-indexed). */
+    page?: number;
+    /** Controlled rows per page. */
+    rowsPerPage?: number;
+    /** Available rows-per-page options. */
+    rowsPerPageOptions?: number[];
+    /** Uncontrolled default page (applied on first render). */
+    defaultPage?: number;
+    /** Uncontrolled default rows per page. */
+    defaultRowsPerPage?: number;
+    /** Show First/Last page buttons. */
+    showFirstLast?: boolean;
+    /** Label for the rows-per-page selector. */
+    labelRowsPerPage?: string;
+    /** Fired when the current page changes. */
+    onFlintPaginationPageChange?: (event: CustomEvent<FlintPaginationPageChangeDetail>) => void;
+    /** Fired when rows per page changes. */
+    onFlintPaginationRowsPerPageChange?: (event: CustomEvent<FlintPaginationRowsPerPageChangeDetail>) => void;
+}
+export declare const FlintTablePagination: React.ForwardRefExoticComponent<FlintTablePaginationProps & React.RefAttributes<FlintTablePaginationElement>>;

package/dist/components/FlintTableRow.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintTableRow as FlintTableRowElement } from '@getufy/flint-ui/table/flint-table';
-export declare const FlintTableRow: import("@lit/react").ReactWebComponent<FlintTableRowElement, {}>;
-export type FlintTableRowProps = React.ComponentProps<typeof FlintTableRow>;
+/**
+ * flint-table-row
+ */
+export interface FlintTableRowProps extends React.HTMLAttributes<FlintTableRowElement> {
+    /** Highlights the row as selected. */
+    selected?: boolean;
+    /** Forces hover highlight on the row. */
+    hover?: boolean;
+}
+export declare const FlintTableRow: React.ForwardRefExoticComponent<FlintTableRowProps & React.RefAttributes<FlintTableRowElement>>;

package/dist/components/FlintTableSortLabel.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
 import { FlintTableSortLabel as FlintTableSortLabelElement } from '@getufy/flint-ui/table/flint-table-sort-label';
-export declare const FlintTableSortLabel: import("@lit/react").ReactWebComponent<FlintTableSortLabelElement, {}>;
-export type FlintTableSortLabelProps = React.ComponentProps<typeof FlintTableSortLabel>;
+export interface FlintTableSortLabelProps extends React.HTMLAttributes<FlintTableSortLabelElement> {
+    /** Whether this column is currently sorted. */
+    active?: boolean;
+    /** Sort direction when active. */
+    direction?: 'asc' | 'desc';
+}
+export declare const FlintTableSortLabel: React.ForwardRefExoticComponent<FlintTableSortLabelProps & React.RefAttributes<FlintTableSortLabelElement>>;

package/dist/components/FlintTabs.d.ts

@@ -1,7 +1,29 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintTabs as FlintTabsElement } from '@getufy/flint-ui/tabs/flint-tabs';
-export declare const FlintTabs: import("@lit/react").ReactWebComponent<FlintTabsElement, {
-    onFlintTabChange: EventName<CustomEvent>;
-}>;
-export type FlintTabsProps = React.ComponentProps<typeof FlintTabs>;
+export interface FlintTabChangeDetail {
+    value: string;
+}
+/**
+ * Tabs: container that coordinates tab selection and panel visibility.
+ */
+export interface FlintTabsProps extends Omit<React.HTMLAttributes<FlintTabsElement>, 'defaultValue'> {
+    /** The currently active tab value. */
+    value?: string;
+    /** Layout direction of the tabs. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Display variant controlling tab sizing and scrollability. */
+    variant?: 'standard' | 'fullWidth' | 'scrollable';
+    /** Whether to center the tabs. */
+    centered?: boolean;
+    /** Whether to show scroll buttons in scrollable mode. */
+    scrollButtons?: 'auto' | 'false';
+    /** 'primary' | 'secondary' | 'inherit' | any CSS color */
+    textColor?: string;
+    /** 'primary' | 'secondary' | any CSS color */
+    indicatorColor?: string;
+    /** Uncontrolled mode: initial value if `value` not set */
+    defaultValue?: string;
+    /** Fired when the active tab changes. */
+    onFlintTabChange?: (event: CustomEvent<FlintTabChangeDetail>) => void;
+}
+export declare const FlintTabs: React.ForwardRefExoticComponent<FlintTabsProps & React.RefAttributes<FlintTabsElement>>;

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 InputDetail {
+    value: string;
+}
+export interface ChangeDetail {
+    value: string;
+}
+/**
+ * Text Field: a styled text input with outlined/filled variants.
+ */
+export interface FlintTextFieldProps extends Omit<React.HTMLAttributes<FlintTextFieldElement>, 'onInput' | 'onChange' | '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. */
+    onInput?: (event: CustomEvent<InputDetail>) => void;
+    /** Fired when the input loses focus after the value has changed. */
+    onChange?: (event: CustomEvent<ChangeDetail>) => void;
+}
+export declare const FlintTextField: React.ForwardRefExoticComponent<FlintTextFieldProps & React.RefAttributes<FlintTextFieldElement>>;

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