@getufy/flint-ui-react 0.2.1 → 1.0.0

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

@@ -1,4 +1,30 @@
 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>;
+/**
+ * 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;
+}
+export declare const FlintSpeedDial: React.ForwardRefExoticComponent<FlintSpeedDialProps & React.RefAttributes<FlintSpeedDialElement>>;

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