@getufy/flint-ui-react 0.2.2 → 1.0.0

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 ChangeDetail {
+    value: string;
+}
+/**
+ * Time Clock: an analog clock face for selecting hours, minutes, and seconds.
+ */
+export interface FlintTimeClockProps extends Omit<React.HTMLAttributes<FlintTimeClockElement>, '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 face on the clock. */
+    seconds?: boolean;
+    /** Currently active clock face view. */
+    view?: FlintTimeClockElement['view'];
+    /** Fired when the time value changes. */
+    onChange?: (event: CustomEvent<ChangeDetail>) => 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/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 ChangeDetail {
+    value: string;
+}
+/**
+ * Time Field: a segmented time input with keyboard navigation.
+ */
+export interface FlintTimeFieldProps extends Omit<React.HTMLAttributes<FlintTimeFieldElement>, 'onChange'> {
+    /** 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. */
+    onChange?: (event: CustomEvent<ChangeDetail>) => void;
+}
+export declare const FlintTimeField: React.ForwardRefExoticComponent<FlintTimeFieldProps & React.RefAttributes<FlintTimeFieldElement>>;

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

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/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/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/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/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/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 ChangeDetail {
+    value: string[];
+}
+/**
+ * A premium Transfer List component for moving items between two lists.
+ */
+export interface FlintTransferListProps extends Omit<React.HTMLAttributes<FlintTransferListElement>, 'onChange' | '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[] }` */
+    onChange?: (event: CustomEvent<ChangeDetail>) => void;
+}
+export declare const FlintTransferList: React.ForwardRefExoticComponent<FlintTransferListProps & React.RefAttributes<FlintTransferListElement>>;

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

@@ -1,4 +1,24 @@
 import React from 'react';
 import { FlintTypography as FlintTypographyElement } from '@getufy/flint-ui/typography/flint-typography';
-export declare const FlintTypography: import("@lit/react").ReactWebComponent<FlintTypographyElement, {}>;
-export type FlintTypographyProps = React.ComponentProps<typeof FlintTypography>;
+/**
+ * Typography component for displaying text with consistent theme styles.
+ *
+ * @slot - The text content.
+ */
+export interface FlintTypographyProps extends Omit<React.HTMLAttributes<FlintTypographyElement>, 'color'> {
+    /** Variant of the typography. */
+    variant?: FlintTypographyElement['variant'];
+    /** The color of the text. */
+    color?: FlintTypographyElement['color'];
+    /** Override the rendered HTML tag. */
+    component?: string;
+    /** Text alignment. */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** If true, text is truncated with an ellipsis. */
+    noWrap?: boolean;
+    /** If true, adds a bottom margin. */
+    gutterBottom?: boolean;
+    /** If true, adds paragraph margin bottom. */
+    paragraph?: boolean;
+}
+export declare const FlintTypography: React.ForwardRefExoticComponent<FlintTypographyProps & React.RefAttributes<FlintTypographyElement>>;

package/dist/components/FlintVisuallyHidden.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintVisuallyHidden as FlintVisuallyHiddenElement } from '@getufy/flint-ui/visually-hidden/flint-visually-hidden';
-export declare const FlintVisuallyHidden: import("@lit/react").ReactWebComponent<FlintVisuallyHiddenElement, {}>;
-export type FlintVisuallyHiddenProps = React.ComponentProps<typeof FlintVisuallyHidden>;
+/**
+ * Makes content accessible to assistive devices (screen readers) without
+displaying it visually on screen.
+ *
+ * @slot - The content to be visually hidden.
+ */
+export interface FlintVisuallyHiddenProps extends React.HTMLAttributes<FlintVisuallyHiddenElement> {
+    /** When `true`, the focus-reveal behaviour is disabled. */
+    notFocusable?: boolean;
+}
+export declare const FlintVisuallyHidden: React.ForwardRefExoticComponent<FlintVisuallyHiddenProps & React.RefAttributes<FlintVisuallyHiddenElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getufy/flint-ui-react",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "module": "./dist/index.js",
@@ -337,7 +337,7 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "@getufy/flint-ui": "^0.2.2"
+    "@getufy/flint-ui": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",