@tempots/beatui 0.95.0 → 1.0.0

package/dist/types/components/data/date-picker.d.ts

@@ -0,0 +1,58 @@
+import { Value, type Renderable } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '../../tokens';
+import type { PlainDate } from '../../temporal/types';
+/**
+ * Configuration options for the {@link DatePicker} component.
+ * Uses Temporal `PlainDate` for date values — no time or timezone concerns.
+ */
+export interface DatePickerOptions {
+    /** The currently selected date. */
+    value?: Value<PlainDate | null>;
+    /** Callback invoked when a date is selected. */
+    onSelect?: (date: PlainDate) => void;
+    /**
+     * Predicate that returns `true` if the given date should be disabled (unselectable).
+     * Replaces min/max — use e.g. `d => PlainDate.compare(d, minDate) < 0` for range constraints.
+     */
+    isDateDisabled?: (date: PlainDate) => boolean;
+    /** Theme color for selected and today highlights. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** Visual size of the date picker. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Whether the date picker is disabled. @default false */
+    disabled?: Value<boolean>;
+    /**
+     * The day the week starts on.
+     * 0 = Sunday, 1 = Monday, etc.
+     * @default 0
+     */
+    weekStartsOn?: Value<number>;
+}
+/**
+ * A date picker component for date selection with month/year navigation.
+ *
+ * Uses Temporal `PlainDate` internally — a date-only type with no time or
+ * timezone concerns, 1-based months, and proper date arithmetic.
+ *
+ * Renders a full month grid with day-of-week headers, previous/next month
+ * navigation, and a flexible `isDateDisabled` predicate for controlling which
+ * dates are selectable. The date picker highlights the currently selected date
+ * and today's date. Navigation buttons allow moving between months and years.
+ *
+ * @param options - Configuration for the date picker
+ * @returns A date picker element with date selection capability
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DatePicker, PlainDate } from '@tempots/beatui'
+ *
+ * const date = prop<PlainDate | null>(null)
+ * DatePicker({
+ *   value: date,
+ *   onSelect: date.set,
+ * })
+ * ```
+ */
+export declare function DatePicker(options?: DatePickerOptions): Renderable;

package/dist/types/components/data/date-range-picker.d.ts

@@ -0,0 +1,56 @@
+import { Value, type Renderable } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '../../tokens';
+import type { PlainDate } from '../../temporal/types';
+/**
+ * Configuration options for the {@link DateRangePicker} component.
+ * Uses Temporal `PlainDate` for date values — no time or timezone concerns.
+ */
+export interface DateRangePickerOptions {
+    /** The currently selected date range as `[start, end]`. */
+    value?: Value<[PlainDate, PlainDate] | null>;
+    /** Callback invoked when a complete range is selected. */
+    onChange?: (range: [PlainDate, PlainDate]) => void;
+    /**
+     * Predicate that returns `true` if the given date should be disabled (unselectable).
+     */
+    isDateDisabled?: (date: PlainDate) => boolean;
+    /** Theme color for selected and today highlights. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** Visual size of the date picker. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Whether the date picker is disabled. @default false */
+    disabled?: Value<boolean>;
+    /**
+     * The day the week starts on.
+     * 0 = Sunday, 1 = Monday, etc.
+     * @default 0
+     */
+    weekStartsOn?: Value<number>;
+}
+/**
+ * A date picker component for date range selection with hover preview.
+ *
+ * Uses Temporal `PlainDate` internally — a date-only type with no time or
+ * timezone concerns, 1-based months, and proper date arithmetic.
+ *
+ * Users click twice to select a range: the first click sets the start date,
+ * hovering shows a preview, and the second click completes the range.
+ * The range is auto-sorted so start is always before end.
+ *
+ * @param options - Configuration for the range date picker
+ * @returns A date picker element with date range selection capability
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { DateRangePicker, PlainDate } from '@tempots/beatui'
+ *
+ * const range = prop<[PlainDate, PlainDate] | null>(null)
+ * DateRangePicker({
+ *   value: range,
+ *   onChange: range.set,
+ * })
+ * ```
+ */
+export declare function DateRangePicker(options?: DateRangePickerOptions): Renderable;

package/dist/types/components/data/filter.d.ts

@@ -0,0 +1,268 @@
+/**
+ * A value annotated with its runtime type. Used by compare, range, and set
+ * filters so that the evaluator can handle each type correctly without
+ * function predicates.
+ */
+export type TypedValue = {
+    valueType: 'string';
+    value: string;
+} | {
+    valueType: 'number';
+    value: number;
+} | {
+    valueType: 'bigint';
+    value: bigint;
+} | {
+    valueType: 'date';
+    value: Date;
+} | {
+    valueType: 'boolean';
+    value: boolean;
+};
+/**
+ * A range bound annotated with its runtime type.
+ * At least one of `min` or `max` must be provided.
+ */
+export type TypedRange = {
+    valueType: 'string';
+    min?: string;
+    max?: string;
+} | {
+    valueType: 'number';
+    min?: number;
+    max?: number;
+} | {
+    valueType: 'bigint';
+    min?: bigint;
+    max?: bigint;
+} | {
+    valueType: 'date';
+    min?: Date;
+    max?: Date;
+};
+/**
+ * A set of values annotated with its runtime type.
+ */
+export type TypedSet = {
+    valueType: 'string';
+    values: string[];
+} | {
+    valueType: 'number';
+    values: number[];
+} | {
+    valueType: 'bigint';
+    values: bigint[];
+} | {
+    valueType: 'date';
+    values: Date[];
+} | {
+    valueType: 'boolean';
+    values: boolean[];
+};
+/** Operators for text (string-only) filters. */
+export type TextOperator = 'contains' | 'notContains' | 'equals' | 'notEquals' | 'startsWith' | 'endsWith';
+/** Operators for compare filters (any orderable type). */
+export type CompareOperator = 'eq' | 'neq' | 'gt' | 'gte' | 'lt' | 'lte';
+/**
+ * Open base type for all filters.
+ *
+ * @typeParam C - Column identifier type
+ */
+export interface FilterBase<C extends string = string> {
+    kind: string;
+    column: C;
+}
+/**
+ * Text (string-only) filter with case-sensitivity option.
+ */
+export interface TextFilter<C extends string = string> extends FilterBase<C> {
+    kind: 'text';
+    operator: TextOperator;
+    value: string;
+    caseSensitive?: boolean;
+}
+/**
+ * Comparison filter for orderable types.
+ */
+export type CompareFilter<C extends string = string> = FilterBase<C> & {
+    kind: 'compare';
+    operator: CompareOperator;
+} & TypedValue;
+/**
+ * Range filter (between min and max).
+ */
+export type RangeFilter<C extends string = string> = FilterBase<C> & {
+    kind: 'range';
+    exclusive?: boolean;
+} & TypedRange;
+/**
+ * Set membership filter.
+ */
+export type SetFilter<C extends string = string> = FilterBase<C> & {
+    kind: 'set';
+    mode: 'include' | 'exclude';
+} & TypedSet;
+/**
+ * Boolean filter.
+ */
+export interface BooleanFilter<C extends string = string> extends FilterBase<C> {
+    kind: 'boolean';
+    value: boolean;
+}
+/**
+ * Null-check filter.
+ */
+export interface NullFilter<C extends string = string> extends FilterBase<C> {
+    kind: 'null';
+    operator: 'isNull' | 'isNotNull';
+}
+/**
+ * A composite per-column filter that combines multiple child filters
+ * using AND or OR logic. All children share the same column.
+ */
+export interface CompositeColumnFilter<C extends string = string> extends FilterBase<C> {
+    kind: 'composite';
+    mode: 'and' | 'or';
+    filters: BuiltinFilter<C>[];
+}
+/**
+ * Closed union of all builtin filter kinds.
+ */
+export type BuiltinFilter<C extends string = string> = TextFilter<C> | CompareFilter<C> | RangeFilter<C> | SetFilter<C> | BooleanFilter<C> | NullFilter<C> | CompositeColumnFilter<C>;
+export type FilterExpr<C extends string = string> = FilterBase<C> | {
+    kind: 'and';
+    filters: FilterExpr<C>[];
+} | {
+    kind: 'or';
+    filters: FilterExpr<C>[];
+} | {
+    kind: 'not';
+    filter: FilterExpr<C>;
+};
+/**
+ * Returns `true` if `f` is one of the builtin filter kinds.
+ */
+export declare function isBuiltinFilter<C extends string = string>(f: FilterBase<C>): f is BuiltinFilter<C>;
+type InferableValue = string | number | bigint | Date | boolean;
+/**
+ * Infers the `valueType` discriminator from a runtime value.
+ */
+export declare function inferValueType(v: InferableValue): TypedValue['valueType'];
+/**
+ * Evaluates a single builtin filter against a cell value.
+ *
+ * @param filter - The builtin filter descriptor
+ * @param value - The cell value to test
+ * @returns Whether the value passes the filter
+ */
+export declare function evaluateBuiltinFilter<C extends string = string>(filter: BuiltinFilter<C>, value: unknown): boolean;
+export interface EvaluateFilterOptions<T, C extends string = string> {
+    /** Evaluate a custom (non-builtin) filter kind. Return `true` to include the row. */
+    evaluateFilter?: (filter: FilterBase<C>, row: T) => boolean;
+}
+/**
+ * Evaluates a filter expression tree against a row.
+ *
+ * @param expr - Filter expression (single filter, AND, OR, NOT)
+ * @param row - The data row
+ * @param accessor - Maps a column to its cell value
+ * @param opts - Optional callbacks for custom filter kinds
+ */
+export declare function evaluateFilterExpr<T, C extends string = string>(expr: FilterExpr<C>, row: T, accessor: (column: C, row: T) => unknown, opts?: EvaluateFilterOptions<T, C>): boolean;
+/**
+ * Returns a human-readable label for a builtin filter.
+ */
+export declare function describeBuiltinFilter<C extends string = string>(filter: BuiltinFilter<C>): string;
+export interface DescribeFilterOptions<C extends string = string> {
+    /** Describe a custom (non-builtin) filter kind. */
+    describeFilter?: (filter: FilterBase<C>) => string;
+}
+/**
+ * Localized message functions for describing filter conditions.
+ * Each function receives the column name and relevant values,
+ * returning a human-readable description.
+ */
+export interface FilterDescriptionMessages {
+    textContains: (column: string, value: string) => string;
+    textNotContains: (column: string, value: string) => string;
+    textEquals: (column: string, value: string) => string;
+    textNotEquals: (column: string, value: string) => string;
+    textStartsWith: (column: string, value: string) => string;
+    textEndsWith: (column: string, value: string) => string;
+    compareEq: (column: string, value: string) => string;
+    compareNeq: (column: string, value: string) => string;
+    compareGt: (column: string, value: string) => string;
+    compareGte: (column: string, value: string) => string;
+    compareLt: (column: string, value: string) => string;
+    compareLte: (column: string, value: string) => string;
+    rangeBetween: (column: string, min: string, max: string) => string;
+    rangeGte: (column: string, value: string) => string;
+    rangeLte: (column: string, value: string) => string;
+    setIn: (column: string, values: string) => string;
+    setNotIn: (column: string, values: string) => string;
+    booleanIs: (column: string, value: string) => string;
+    isNull: (column: string) => string;
+    isNotNull: (column: string) => string;
+    compositeAnd: (descriptions: string[]) => string;
+    compositeOr: (descriptions: string[]) => string;
+}
+/**
+ * Returns a human-readable label for any filter, delegating to a callback
+ * for custom kinds.
+ */
+export declare function describeFilter<C extends string = string>(filter: FilterBase<C>, opts?: DescribeFilterOptions<C>): string;
+/**
+ * Returns a localized human-readable label for a builtin filter
+ * using the provided message functions.
+ */
+export declare function describeBuiltinFilterLocalized<C extends string = string>(filter: BuiltinFilter<C>, messages: FilterDescriptionMessages): string;
+export interface DescribeFilterLocalizedOptions<C extends string = string> {
+    /** Describe a custom (non-builtin) filter kind. */
+    describeFilter?: (filter: FilterBase<C>) => string;
+}
+/**
+ * Returns a localized human-readable label for any filter, using
+ * the provided message functions for builtin kinds and delegating
+ * to a callback for custom kinds.
+ */
+export declare function describeFilterLocalized<C extends string = string>(filter: FilterBase<C>, messages: FilterDescriptionMessages, opts?: DescribeFilterLocalizedOptions<C>): string;
+/**
+ * Ergonomic builder namespace for constructing filter descriptors.
+ *
+ * @example
+ * ```ts
+ * Filter.contains('name', 'alice')
+ * Filter.gt('age', 30)
+ * Filter.between('salary', 50000, 150000)
+ * Filter.oneOf('role', ['admin', 'editor'])
+ * Filter.isNull('deletedAt')
+ * Filter.and(Filter.gt('age', 18), Filter.lt('age', 65))
+ * ```
+ */
+export declare const Filter: {
+    text: <C extends string = string>(column: C, operator: TextOperator, value: string, caseSensitive?: boolean) => TextFilter<C>;
+    contains: <C extends string = string>(column: C, value: string, caseSensitive?: boolean) => TextFilter<C>;
+    notContains: <C extends string = string>(column: C, value: string, caseSensitive?: boolean) => TextFilter<C>;
+    equals: <C extends string = string>(column: C, value: string, caseSensitive?: boolean) => TextFilter<C>;
+    notEquals: <C extends string = string>(column: C, value: string, caseSensitive?: boolean) => TextFilter<C>;
+    startsWith: <C extends string = string>(column: C, value: string, caseSensitive?: boolean) => TextFilter<C>;
+    endsWith: <C extends string = string>(column: C, value: string, caseSensitive?: boolean) => TextFilter<C>;
+    eq: <C extends string = string>(column: C, value: InferableValue) => CompareFilter<C>;
+    neq: <C extends string = string>(column: C, value: InferableValue) => CompareFilter<C>;
+    gt: <C extends string = string>(column: C, value: InferableValue) => CompareFilter<C>;
+    gte: <C extends string = string>(column: C, value: InferableValue) => CompareFilter<C>;
+    lt: <C extends string = string>(column: C, value: InferableValue) => CompareFilter<C>;
+    lte: <C extends string = string>(column: C, value: InferableValue) => CompareFilter<C>;
+    between: <C extends string = string>(column: C, min: InferableValue | undefined, max: InferableValue | undefined, exclusive?: boolean) => RangeFilter<C>;
+    oneOf: <C extends string = string>(column: C, values: InferableValue[]) => SetFilter<C>;
+    noneOf: <C extends string = string>(column: C, values: InferableValue[]) => SetFilter<C>;
+    isTrue: <C extends string = string>(column: C) => BooleanFilter<C>;
+    isFalse: <C extends string = string>(column: C) => BooleanFilter<C>;
+    isNull: <C extends string = string>(column: C) => NullFilter<C>;
+    isNotNull: <C extends string = string>(column: C) => NullFilter<C>;
+    composite: <C extends string = string>(column: C, mode: "and" | "or", filters: BuiltinFilter<C>[]) => CompositeColumnFilter<C>;
+    and: <C extends string = string>(...filters: FilterExpr<C>[]) => FilterExpr<C>;
+    or: <C extends string = string>(...filters: FilterExpr<C>[]) => FilterExpr<C>;
+    not: <C extends string = string>(filter: FilterExpr<C>) => FilterExpr<C>;
+};
+export {};

package/dist/types/components/data/index.d.ts

@@ -1,15 +1,24 @@
 export * from './avatar';
-export * from './calendar';
-export * from './range-calendar';
+export * from './date-picker';
+export * from './date-range-picker';
 export * from './avatar-group';
 export * from './badge';
 export * from './history-timeline';
 export * from './icon';
-export * from './icon-badge';
+export * from './indicator';
 export * from './page-drop-zone';
 export * from './presence-overlay';
 export * from './progress-bar';
 export * from './skeleton';
 export * from './table';
-export * from './tag';
 export * from './unstyled-drop-zone';
+export * from './data-source';
+export * from './filter';
+export * from './data-table-types';
+export * from './data-table';
+export * from './sortable-header';
+export * from './column-filter';
+export * from './column-filter-panel';
+export * from './selection-checkbox';
+export * from './data-toolbar';
+export * from './column-header-menu';

package/dist/types/components/data/indicator.d.ts

@@ -0,0 +1,41 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '../../tokens';
+/** Placement of the indicator relative to its container. */
+export type IndicatorPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/** Configuration options for the {@link Indicator} component. */
+export interface IndicatorOptions {
+    /** Whether to show the indicator. @default true */
+    show?: Value<boolean>;
+    /** Count to display. When > 0, shows a count badge instead of a dot. */
+    count?: Value<number>;
+    /** Maximum count before showing "N+". @default 9 */
+    maxCount?: Value<number>;
+    /** Theme color of the indicator. @default 'danger' */
+    color?: Value<ThemeColorName>;
+    /** Position of the indicator. @default 'top-right' */
+    placement?: Value<IndicatorPlacement>;
+    /** Size of the indicator. @default 'sm' */
+    size?: Value<ControlSize>;
+}
+/**
+ * Overlays a small dot or count badge on any child content.
+ * Use for notification counts, status dots, or unread indicators.
+ *
+ * @param options - Configuration for visibility, count, color, placement, and size
+ * @param children - The content to overlay the indicator on (Icon, Avatar, Button, etc.)
+ * @returns A positioned container with the indicator badge
+ *
+ * @example
+ * ```typescript
+ * // Dot indicator on an icon
+ * Indicator({ show: hasNotifications }, Icon({ icon: 'mdi:bell' }))
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Count badge on an avatar
+ * Indicator({ count: unreadCount, color: 'primary' }, Avatar({ name: 'John' }))
+ * ```
+ */
+export declare function Indicator({ show, count, maxCount, color, placement, size, }: IndicatorOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/data/progress-bar.d.ts

@@ -6,9 +6,9 @@ import { ExtendedColor } from '../theme/style-utils';
  * Configuration options for the {@link ProgressBar} component.
  */
 export interface ProgressBarOptions {
-    /** Current progress value (0 to max). @default 0 */
+    /** Current progress value (0 to max). @default 50 @min 0 @max 100 @step 1 */
     value?: Value<number>;
-    /** Maximum value for the progress bar. @default 100 */
+    /** Maximum value for the progress bar. @default 100 @min 1 @step 1 */
     max?: Value<number>;
     /** Visual size variant. @default 'md' */
     size?: Value<'sm' | 'md' | 'lg'>;

package/dist/types/components/data/selection-checkbox.d.ts

@@ -0,0 +1,63 @@
+import { Value } from '@tempots/dom';
+import { DataSource } from './data-source';
+import { ControlSize } from '../theme';
+/**
+ * Options for the {@link SelectionCheckbox} component.
+ *
+ * @typeParam T - The type of data rows in the data source
+ */
+export interface SelectionCheckboxOptions<T, C extends string = string> {
+    /** The data source to wire selection into */
+    dataSource: DataSource<T, C>;
+    /** The unique row ID for this checkbox */
+    rowId: Value<string>;
+    isSelected: Value<boolean>;
+    /** Size variant. @default 'md' */
+    size?: Value<ControlSize>;
+}
+/**
+ * A checkbox for selecting/deselecting a single row in a {@link DataSource}.
+ *
+ * @typeParam T - The type of data rows
+ * @param options - Checkbox configuration
+ * @returns An `<input type="checkbox">` element wired to the data source selection
+ *
+ * @example
+ * ```ts
+ * html.td(
+ *   SelectionCheckbox({ dataSource: ds, rowId: row.id })
+ * )
+ * ```
+ */
+export declare function SelectionCheckbox<T, C extends string = string>({ dataSource, rowId, isSelected, size, }: SelectionCheckboxOptions<T, C>): import("@tempots/dom").Renderable;
+/**
+ * Options for the {@link SelectAllCheckbox} component.
+ *
+ * @typeParam T - The type of data rows in the data source
+ */
+export interface SelectAllCheckboxOptions<T, C extends string = string> {
+    /** The data source to wire selection into */
+    dataSource: DataSource<T, C>;
+    /** Size variant. @default 'md' */
+    size?: Value<ControlSize>;
+}
+/**
+ * A checkbox for selecting/deselecting all filtered rows in a {@link DataSource}.
+ *
+ * Shows three states:
+ * - Unchecked: no rows selected
+ * - Indeterminate: some rows selected
+ * - Checked: all rows selected
+ *
+ * @typeParam T - The type of data rows
+ * @param options - Checkbox configuration
+ * @returns An `<input type="checkbox">` element with indeterminate support
+ *
+ * @example
+ * ```ts
+ * html.th(
+ *   SelectAllCheckbox({ dataSource: ds })
+ * )
+ * ```
+ */
+export declare function SelectAllCheckbox<T, C extends string = string>({ dataSource, size, }: SelectAllCheckboxOptions<T, C>): import("@tempots/dom").Renderable;

package/dist/types/components/data/skeleton.d.ts

@@ -10,7 +10,7 @@ export interface SkeletonOptions {
     width?: Value<string | undefined>;
     /** CSS height value (e.g., '100px', '2rem'). Default varies by variant. */
     height?: Value<string | undefined>;
-    /** Number of text lines to render (only applies to text variant). @default 1 */
+    /** Number of text lines to render (only applies to text variant). @default 1 @step 1 @min 1 */
     lines?: Value<number>;
     /** Whether to show the shimmer animation. @default true */
     animate?: Value<boolean>;

package/dist/types/components/data/sortable-header.d.ts

@@ -0,0 +1,55 @@
+import { TNode, Value } from '@tempots/dom';
+import { DataSource } from './data-source';
+import { ControlSize } from '../theme';
+/**
+ * Options for the {@link SortableHeader} component.
+ *
+ * @typeParam T - The type of data rows in the data source
+ * @typeParam C - Column identifier type (defaults to `string`)
+ */
+export interface SortableHeaderOptions<T, C extends string = string> {
+    /** The data source to wire sorting into */
+    dataSource: DataSource<T, C>;
+    /** Column identifier matching the accessor key */
+    column: C;
+    /** Size variant. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Extra actions (e.g. filter panel) rendered alongside the sort icon */
+    actions?: TNode;
+    /** Column menu (e.g. kebab ⋮ with sort/hide/columns actions) */
+    menu?: TNode;
+    /** Hide the sort icon when no sort is active. @default false */
+    hideInactiveIcon?: boolean;
+    /** Whether this header is draggable (for column reordering). @default false */
+    draggable?: boolean;
+    /** Drag start handler */
+    onDragStart?: (e: DragEvent) => void;
+    /** Drag over handler */
+    onDragOver?: (e: DragEvent) => void;
+    /** Drop handler */
+    onDrop?: (e: DragEvent) => void;
+    /** Drag end handler */
+    onDragEnd?: (e: DragEvent) => void;
+}
+/**
+ * A table header cell (`<th>`) that enables click-to-sort on a data source column.
+ *
+ * Clicking cycles through: none → ascending → descending → none.
+ * Displays an icon indicating the current sort direction.
+ *
+ * @typeParam T - The type of data rows
+ * @param options - Configuration for the sortable header
+ * @param children - Header label content
+ * @returns A `<th>` element with sort interaction
+ *
+ * @example
+ * ```ts
+ * html.thead(
+ *   html.tr(
+ *     SortableHeader({ dataSource: ds, column: 'name' }, 'Name'),
+ *     SortableHeader({ dataSource: ds, column: 'age' }, 'Age'),
+ *   )
+ * )
+ * ```
+ */
+export declare function SortableHeader<T, C extends string = string>({ dataSource, column, size, actions, menu, hideInactiveIcon, draggable: isDraggable, onDragStart, onDragOver, onDrop, onDragEnd, }: SortableHeaderOptions<T, C>, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/data/unstyled-drop-zone.d.ts

@@ -2,7 +2,7 @@ import { TNode, Value, Signal } from '@tempots/dom';
 /**
  * Configuration options for the {@link UnstyledDropZone} component.
  */
-export type DropZoneOptions = {
+export type UnstyledDropZoneOptions = {
     /**
      * Callback invoked when files are selected, either via drag-and-drop
      * or the file picker dialog. The `via` parameter indicates the selection method.
@@ -85,4 +85,4 @@ export type DropZoneOptions = {
  * })
  * ```
  */
-export declare function UnstyledDropZone({ onChange, value, accept, enableClick, content, disabled, allowMultiple, }: DropZoneOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare function UnstyledDropZone({ onChange, value, accept, enableClick, content, disabled, allowMultiple, }: UnstyledDropZoneOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;