@getufy/flint-ui-react 0.2.2 → 0.4.0

package/dist/components/FlintCopyButton.js

@@ -0,0 +1,16 @@
+// src/components/FlintCopyButton.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCopyButton as FlintCopyButtonElement } from "@getufy/flint-ui/copy-button/flint-copy-button";
+var FlintCopyButton = createComponent({
+  tagName: "flint-copy-button",
+  elementClass: FlintCopyButtonElement,
+  react: React,
+  events: {
+    onFlintCopyError: "flint-copy-error",
+    onFlintCopy: "flint-copy"
+  }
+});
+export {
+  FlintCopyButton
+};

package/dist/components/FlintDateField.d.ts

@@ -1,8 +1,36 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDateField as FlintDateFieldElement } from '@getufy/flint-ui/date-field/flint-date-field';
-export declare const FlintDateField: import("@lit/react").ReactWebComponent<FlintDateFieldElement, {
-    onFlintDateFieldClear: EventName<CustomEvent>;
-    onFlintDateFieldChange: EventName<CustomEvent>;
-}>;
-export type FlintDateFieldProps = React.ComponentProps<typeof FlintDateField>;
+export interface FlintDateFieldChangeDetail {
+    value: string;
+}
+/**
+ * A segmented keyboard-driven date input.
+Each section (month, day, year) is independently editable via keyboard.
+ */
+export interface FlintDateFieldProps extends React.HTMLAttributes<FlintDateFieldElement> {
+    /** Controlled date value (ISO YYYY-MM-DD). Set to '' for uncontrolled. */
+    value?: string;
+    /** Field label. */
+    label?: string;
+    /** Form field name. Reflected so the browser picks it up for form data collection. */
+    name?: string;
+    /** Minimum allowed date (ISO). */
+    min?: string;
+    /** Maximum allowed date (ISO). */
+    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 */
+    onFlintDateFieldClear?: (event: CustomEvent) => void;
+    /** { detail: { value: string } } ISO date when all three segments are filled */
+    onFlintDateFieldChange?: (event: CustomEvent<FlintDateFieldChangeDetail>) => void;
+}
+export declare const FlintDateField: React.ForwardRefExoticComponent<FlintDateFieldProps & React.RefAttributes<FlintDateFieldElement>>;

package/dist/components/FlintDateField.js

@@ -0,0 +1,16 @@
+// src/components/FlintDateField.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintDateField as FlintDateFieldElement } from "@getufy/flint-ui/date-field/flint-date-field";
+var FlintDateField = createComponent({
+  tagName: "flint-date-field",
+  elementClass: FlintDateFieldElement,
+  react: React,
+  events: {
+    onFlintDateFieldClear: "flint-date-field-clear",
+    onFlintDateFieldChange: "flint-date-field-change"
+  }
+});
+export {
+  FlintDateField
+};

package/dist/components/FlintDatePicker.d.ts

@@ -1,7 +1,37 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDatePicker as FlintDatePickerElement } from '@getufy/flint-ui/date-picker/flint-date-picker';
-export declare const FlintDatePicker: import("@lit/react").ReactWebComponent<FlintDatePickerElement, {
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintDatePickerProps = React.ComponentProps<typeof FlintDatePicker>;
+export interface FlintDatePickerChangeDetail {
+    value: string;
+}
+/**
+ * A date picker with a text field and a calendar popover/modal.
+ */
+export interface FlintDatePickerProps extends React.HTMLAttributes<FlintDatePickerElement> {
+    /** Selected date as ISO string (YYYY-MM-DD). */
+    value?: string;
+    /** Label shown above the field. */
+    label?: string;
+    /** Placeholder shown in the empty field. */
+    placeholder?: string;
+    /** Form field name attribute. */
+    name?: string;
+    /** Variant: 'desktop' | 'mobile' | 'static' | 'auto'. */
+    variant?: 'desktop' | 'mobile' | 'static' | 'auto';
+    /** Minimum selectable date (ISO). */
+    min?: string;
+    /** Maximum selectable date (ISO). */
+    max?: string;
+    /** Disables the picker. */
+    disabled?: boolean;
+    /** Makes the field read-only (auto-opens a picker when clicked). */
+    readonly?: boolean;
+    /** Shows error styling. */
+    error?: boolean;
+    /** Helper/error text below the field. */
+    helperText?: string;
+    /** Error message displayed below the field when in error state. */
+    errorMessage?: string;
+    /** Fired when the date changes. detail: `{ value: string }` */
+    onFlintDatePickerChange?: (event: CustomEvent<FlintDatePickerChangeDetail>) => void;
+}
+export declare const FlintDatePicker: React.ForwardRefExoticComponent<FlintDatePickerProps & React.RefAttributes<FlintDatePickerElement>>;

package/dist/components/FlintDatePicker.js

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

package/dist/components/FlintDatePickerCalendar.d.ts

@@ -1,7 +1,22 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDatePickerCalendar as FlintDatePickerCalendarElement } from '@getufy/flint-ui/date-picker/flint-date-picker';
-export declare const FlintDatePickerCalendar: import("@lit/react").ReactWebComponent<FlintDatePickerCalendarElement, {
-    onFlintDatePickerSelect: EventName<CustomEvent>;
-}>;
-export type FlintDatePickerCalendarProps = React.ComponentProps<typeof FlintDatePickerCalendar>;
+export interface FlintDatePickerSelectDetail {
+    value: string;
+}
+/**
+ * A standalone calendar grid — the core date-selection view.
+Used internally by flint-date-picker, but can also be used on its own.
+ */
+export interface FlintDatePickerCalendarProps extends React.HTMLAttributes<FlintDatePickerCalendarElement> {
+    /** Currently selected value as ISO string (YYYY-MM-DD). */
+    value?: string;
+    /** Minimum selectable date (ISO). */
+    min?: string;
+    /** Maximum selectable date (ISO). */
+    max?: string;
+    /** Disable all interaction. */
+    disabled?: boolean;
+    /** { detail: { value: string } } ISO date YYYY-MM-DD */
+    onFlintDatePickerSelect?: (event: CustomEvent<FlintDatePickerSelectDetail>) => void;
+}
+export declare const FlintDatePickerCalendar: React.ForwardRefExoticComponent<FlintDatePickerCalendarProps & React.RefAttributes<FlintDatePickerCalendarElement>>;

package/dist/components/FlintDatePickerCalendar.js

@@ -0,0 +1,15 @@
+// src/components/FlintDatePickerCalendar.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintDatePickerCalendar as FlintDatePickerCalendarElement } from "@getufy/flint-ui/date-picker/flint-date-picker";
+var FlintDatePickerCalendar = createComponent({
+  tagName: "flint-date-picker-calendar",
+  elementClass: FlintDatePickerCalendarElement,
+  react: React,
+  events: {
+    onFlintDatePickerSelect: "flint-date-picker-select"
+  }
+});
+export {
+  FlintDatePickerCalendar
+};

package/dist/components/FlintDateRangeCalendar.d.ts

@@ -1,7 +1,19 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDateRangeCalendar as FlintDateRangeCalendarElement } from '@getufy/flint-ui/date-range-picker/flint-date-range-calendar';
-export declare const FlintDateRangeCalendar: import("@lit/react").ReactWebComponent<FlintDateRangeCalendarElement, {
-    onFlintDateRangePickerSelect: EventName<CustomEvent>;
-}>;
-export type FlintDateRangeCalendarProps = React.ComponentProps<typeof FlintDateRangeCalendar>;
+/**
+ * A dual-month calendar for range selection.
+Shows two months side-by-side (or stacked on narrow screens).
+ */
+export interface FlintDateRangeCalendarProps extends React.HTMLAttributes<FlintDateRangeCalendarElement> {
+    /** Current selected range [startISO, endISO]. */
+    value?: FlintDateRangeCalendarElement['value'];
+    /** Minimum selectable date (ISO YYYY-MM-DD). */
+    min?: string;
+    /** Maximum selectable date (ISO YYYY-MM-DD). */
+    max?: string;
+    /** Disables the calendar and prevents date selection. */
+    disabled?: boolean;
+    /** { detail: { value: DateRange } } on each click */
+    onFlintDateRangePickerSelect?: (event: CustomEvent) => void;
+}
+export declare const FlintDateRangeCalendar: React.ForwardRefExoticComponent<FlintDateRangeCalendarProps & React.RefAttributes<FlintDateRangeCalendarElement>>;

package/dist/components/FlintDateRangeCalendar.js

@@ -0,0 +1,15 @@
+// src/components/FlintDateRangeCalendar.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintDateRangeCalendar as FlintDateRangeCalendarElement } from "@getufy/flint-ui/date-range-picker/flint-date-range-calendar";
+var FlintDateRangeCalendar = createComponent({
+  tagName: "flint-date-range-calendar",
+  elementClass: FlintDateRangeCalendarElement,
+  react: React,
+  events: {
+    onFlintDateRangePickerSelect: "flint-date-range-picker-select"
+  }
+});
+export {
+  FlintDateRangeCalendar
+};

package/dist/components/FlintDateRangePicker.d.ts

@@ -1,7 +1,38 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDateRangePicker as FlintDateRangePickerElement } from '@getufy/flint-ui/date-range-picker/flint-date-range-picker';
-export declare const FlintDateRangePicker: import("@lit/react").ReactWebComponent<FlintDateRangePickerElement, {
-    onFlintDateRangePickerChange: EventName<CustomEvent>;
-}>;
-export type FlintDateRangePickerProps = React.ComponentProps<typeof FlintDateRangePicker>;
+/**
+ * A date range picker combining a segmented field and a dual-month calendar.
+ */
+export interface FlintDateRangePickerProps extends React.HTMLAttributes<FlintDateRangePickerElement> {
+    /** Selected range [startISO, endISO]. Empty strings mean unset. */
+    value?: FlintDateRangePickerElement['value'];
+    /** Label shown above the field. */
+    label?: string;
+    /** Variant: 'desktop' | 'mobile' | 'static' | 'auto'. */
+    variant?: 'desktop' | 'mobile' | 'static' | 'auto';
+    /** Use a multi-input field (two separate fields) instead of single-input. Currently shows two simple text displays. */
+    multiInput?: boolean;
+    /** Show shortcuts panel. */
+    shortcuts?: boolean;
+    /** Custom shortcuts list. Defaults to built-in shortcuts when shortcuts=true. */
+    shortcutItems?: FlintDateRangePickerElement['shortcutItems'];
+    /** Minimum selectable date (ISO YYYY-MM-DD). */
+    min?: string;
+    /** Maximum selectable date (ISO YYYY-MM-DD). */
+    max?: string;
+    /** Form field name for hidden inputs. */
+    name?: string;
+    /** Disables the picker and prevents interaction. */
+    disabled?: boolean;
+    /** Makes the picker read-only (visible but not editable). */
+    readonly?: 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;
+    /** { detail: { value: DateRange } } when range is committed */
+    onFlintDateRangePickerChange?: (event: CustomEvent) => void;
+}
+export declare const FlintDateRangePicker: React.ForwardRefExoticComponent<FlintDateRangePickerProps & React.RefAttributes<FlintDateRangePickerElement>>;

package/dist/components/FlintDateRangePicker.js

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

package/dist/components/FlintDesktopTimePicker.d.ts

@@ -1,7 +1,31 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDesktopTimePicker as FlintDesktopTimePickerElement } from '@getufy/flint-ui/time-picker/flint-time-picker';
-export declare const FlintDesktopTimePicker: import("@lit/react").ReactWebComponent<FlintDesktopTimePickerElement, {
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintDesktopTimePickerProps = React.ComponentProps<typeof FlintDesktopTimePicker>;
+export interface FlintDesktopTimePickerChangeDetail {
+    value: string;
+}
+/**
+ * Desktop Time Picker: a time field with a dropdown clock.
+ */
+export interface FlintDesktopTimePickerProps extends React.HTMLAttributes<FlintDesktopTimePickerElement> {
+    /** 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 picker 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 time value changes. detail: `{ value: string }` */
+    onFlintDesktopTimePickerChange?: (event: CustomEvent<FlintDesktopTimePickerChangeDetail>) => void;
+}
+export declare const FlintDesktopTimePicker: React.ForwardRefExoticComponent<FlintDesktopTimePickerProps & React.RefAttributes<FlintDesktopTimePickerElement>>;

package/dist/components/FlintDesktopTimePicker.js

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

package/dist/components/FlintDialog.d.ts

@@ -1,7 +1,25 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDialog as FlintDialogElement } from '@getufy/flint-ui/dialog/flint-dialog';
-export declare const FlintDialog: import("@lit/react").ReactWebComponent<FlintDialogElement, {
-    onClose: EventName<CustomEvent>;
-}>;
-export type FlintDialogProps = React.ComponentProps<typeof FlintDialog>;
+export interface FlintDialogCloseDetail {
+    open: boolean;
+}
+/**
+ * flint-dialog: a modal dialog component.
+ *
+ * @slot - Default slot for dialog content (title, content, actions sub-components).
+ */
+export interface FlintDialogProps extends React.HTMLAttributes<FlintDialogElement> {
+    /** Controls the open / closed state of the dialog. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Animation style: 'scale' (default), 'slide-up', or 'slide-down'. */
+    transition?: 'scale' | 'slide-up' | 'slide-down';
+    /** When true, clicking the backdrop will NOT close the dialog. */
+    disableBackdropClose?: boolean;
+    /** Dispatched when the dialog requests to be closed (backdrop click or
+       an explicit call to `requestClose()`). The host is responsible for
+       setting `open = false` in response. detail: `{ open: false }` */
+    onFlintDialogClose?: (event: CustomEvent<FlintDialogCloseDetail>) => void;
+}
+export declare const FlintDialog: React.ForwardRefExoticComponent<FlintDialogProps & React.RefAttributes<FlintDialogElement>>;

package/dist/components/FlintDialog.js

@@ -0,0 +1,15 @@
+// src/components/FlintDialog.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintDialog as FlintDialogElement } from "@getufy/flint-ui/dialog/flint-dialog";
+var FlintDialog = createComponent({
+  tagName: "flint-dialog",
+  elementClass: FlintDialogElement,
+  react: React,
+  events: {
+    onFlintDialogClose: "flint-dialog-close"
+  }
+});
+export {
+  FlintDialog
+};

package/dist/components/FlintDialogActions.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintDialogActions as FlintDialogActionsElement } from '@getufy/flint-ui/dialog/flint-dialog';
-export declare const FlintDialogActions: import("@lit/react").ReactWebComponent<FlintDialogActionsElement, {}>;
-export type FlintDialogActionsProps = React.ComponentProps<typeof FlintDialogActions>;
+/**
+ * flint-dialog-actions: footer button row for a dialog.
+Use the `align` prop to control button alignment.
+ */
+export interface FlintDialogActionsProps extends React.HTMLAttributes<FlintDialogActionsElement> {
+    /** Alignment of action buttons: 'end' (default), 'start', 'center', 'space-between'. */
+    align?: 'start' | 'center' | 'end' | 'space-between';
+}
+export declare const FlintDialogActions: React.ForwardRefExoticComponent<FlintDialogActionsProps & React.RefAttributes<FlintDialogActionsElement>>;

package/dist/components/FlintDialogActions.js

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

package/dist/components/FlintDialogContent.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintDialogContent as FlintDialogContentElement } from '@getufy/flint-ui/dialog/flint-dialog';
-export declare const FlintDialogContent: import("@lit/react").ReactWebComponent<FlintDialogContentElement, {}>;
-export type FlintDialogContentProps = React.ComponentProps<typeof FlintDialogContent>;
+/**
+ * flint-dialog-content: scrollable content area of a dialog.
+ */
+export interface FlintDialogContentProps extends React.HTMLAttributes<FlintDialogContentElement> {
+}
+export declare const FlintDialogContent: React.ForwardRefExoticComponent<FlintDialogContentProps & React.RefAttributes<FlintDialogContentElement>>;

package/dist/components/FlintDialogContent.js

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

package/dist/components/FlintDialogContentText.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintDialogContentText as FlintDialogContentTextElement } from '@getufy/flint-ui/dialog/flint-dialog';
-export declare const FlintDialogContentText: import("@lit/react").ReactWebComponent<FlintDialogContentTextElement, {}>;
-export type FlintDialogContentTextProps = React.ComponentProps<typeof FlintDialogContentText>;
+/**
+ * flint-dialog-content-text: body text inside a dialog content area.
+ */
+export interface FlintDialogContentTextProps extends React.HTMLAttributes<FlintDialogContentTextElement> {
+}
+export declare const FlintDialogContentText: React.ForwardRefExoticComponent<FlintDialogContentTextProps & React.RefAttributes<FlintDialogContentTextElement>>;

package/dist/components/FlintDialogContentText.js

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

package/dist/components/FlintDialogTitle.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
 import { FlintDialogTitle as FlintDialogTitleElement } from '@getufy/flint-ui/dialog/flint-dialog';
-export declare const FlintDialogTitle: import("@lit/react").ReactWebComponent<FlintDialogTitleElement, {}>;
-export type FlintDialogTitleProps = React.ComponentProps<typeof FlintDialogTitle>;
+/**
+ * flint-dialog-title: heading area of a dialog.
+Automatically assigned id="dialog-title" for aria-labelledby.
+ */
+export interface FlintDialogTitleProps extends React.HTMLAttributes<FlintDialogTitleElement> {
+}
+export declare const FlintDialogTitle: React.ForwardRefExoticComponent<FlintDialogTitleProps & React.RefAttributes<FlintDialogTitleElement>>;

package/dist/components/FlintDialogTitle.js

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

package/dist/components/FlintDigitalClock.d.ts

@@ -1,7 +1,19 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDigitalClock as FlintDigitalClockElement } from '@getufy/flint-ui/time-picker/flint-time-picker';
-export declare const FlintDigitalClock: import("@lit/react").ReactWebComponent<FlintDigitalClockElement, {
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintDigitalClockProps = React.ComponentProps<typeof FlintDigitalClock>;
+export interface FlintDigitalClockChangeDetail {
+    value: string;
+}
+/**
+ * Digital Clock: a scrollable time-slot picker.
+ */
+export interface FlintDigitalClockProps extends React.HTMLAttributes<FlintDigitalClockElement> {
+    /** Time value in HH:MM:SS format. */
+    value?: string;
+    /** Step interval in minutes between selectable times. */
+    step?: number;
+    /** Whether to use 12-hour (AM/PM) format instead of 24-hour. */
+    ampm?: boolean;
+    /** Fired when a time slot is selected. detail: `{ value: string }` */
+    onFlintDigitalClockChange?: (event: CustomEvent<FlintDigitalClockChangeDetail>) => void;
+}
+export declare const FlintDigitalClock: React.ForwardRefExoticComponent<FlintDigitalClockProps & React.RefAttributes<FlintDigitalClockElement>>;

package/dist/components/FlintDigitalClock.js

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

package/dist/components/FlintDivider.d.ts

@@ -1,4 +1,18 @@
 import React from 'react';
 import { FlintDivider as FlintDividerElement } from '@getufy/flint-ui/divider/flint-divider';
-export declare const FlintDivider: import("@lit/react").ReactWebComponent<FlintDividerElement, {}>;
-export type FlintDividerProps = React.ComponentProps<typeof FlintDivider>;
+/**
+ * A divider component that provides a thin line for grouping elements.
+ *
+ * @slot - Optional text or content to display within the divider.
+ */
+export interface FlintDividerProps extends React.HTMLAttributes<FlintDividerElement> {
+    /** Orientation of the divider line. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Inset variant controlling how far the divider extends. */
+    variant?: 'full' | 'middle' | 'inset';
+    /** Thickness of the divider line. */
+    weight?: 'light' | 'medium' | 'heavy';
+    /** Alignment of text content within the divider. */
+    textAlign?: 'left' | 'center' | 'right';
+}
+export declare const FlintDivider: React.ForwardRefExoticComponent<FlintDividerProps & React.RefAttributes<FlintDividerElement>>;

package/dist/components/FlintDivider.js

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

package/dist/components/FlintDrawer.d.ts

@@ -1,7 +1,29 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDrawer as FlintDrawerElement } from '@getufy/flint-ui/drawer/flint-drawer';
-export declare const FlintDrawer: import("@lit/react").ReactWebComponent<FlintDrawerElement, {
-    onFlintDrawerClose: EventName<CustomEvent>;
-}>;
-export type FlintDrawerProps = React.ComponentProps<typeof FlintDrawer>;
+export interface FlintDrawerCloseDetail {
+    open: boolean;
+}
+/**
+ * Navigation drawers provide ergonomic access to destinations in a site or app.
+ *
+ * @slot - Drawer content.
+ */
+export interface FlintDrawerProps extends React.HTMLAttributes<FlintDrawerElement> {
+    /** Whether the drawer is open. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Side from which the drawer slides in. */
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    /** Drawer behavior mode. */
+    variant?: 'temporary' | 'persistent' | 'mini';
+    /** Whether the drawer uses edge spacing. */
+    edge?: boolean;
+    /** Whether the drawer is contained within its parent. */
+    container?: boolean;
+    /** Accessible label for the drawer panel (used as aria-label on the panel). */
+    label?: string;
+    /** Dispatched when the drawer requests to be closed (backdrop click or Escape). detail: `{ open: false }` */
+    onFlintDrawerClose?: (event: CustomEvent<FlintDrawerCloseDetail>) => void;
+}
+export declare const FlintDrawer: React.ForwardRefExoticComponent<FlintDrawerProps & React.RefAttributes<FlintDrawerElement>>;

package/dist/components/FlintDrawer.js

@@ -0,0 +1,15 @@
+// src/components/FlintDrawer.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintDrawer as FlintDrawerElement } from "@getufy/flint-ui/drawer/flint-drawer";
+var FlintDrawer = createComponent({
+  tagName: "flint-drawer",
+  elementClass: FlintDrawerElement,
+  react: React,
+  events: {
+    onFlintDrawerClose: "flint-drawer-close"
+  }
+});
+export {
+  FlintDrawer
+};