@techzyapp/ui-library 1.0.0

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,79 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type DateTimePickerSize = 'sm' | 'md' | 'lg';
+export interface DateTimePickerProps {
+    /** Label rendered above the field. */
+    label?: ReactNode;
+    /** Preset size — control height, font and calendar density. */
+    size?: DateTimePickerSize;
+    /** Marks the field invalid: red border/ring + the `helperText` in the error color. */
+    error?: boolean;
+    /** Helper / validation text under the field. Adopts the error color while `error`. */
+    helperText?: ReactNode;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+    /** Stretches the field to fill its container width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Controlled value — a datetime string in `valueFormat` (default ISO datetime; `''` = empty). */
+    value?: string;
+    /** Initial value for uncontrolled use (in `valueFormat`). */
+    defaultValue?: string;
+    /** Fires with the next datetime in `valueFormat` (`''` when cleared). */
+    onChange?: (value: string) => void;
+    /**
+     * Display + typed-input format (dayjs tokens). Defaults to `'DD/MM/YYYY HH:mm:ss'` (or `hh:mm:ss A`
+     * when `hour12`; the `:ss` is dropped when `showSeconds` is `false`).
+     */
+    format?: string;
+    /**
+     * Wire format of `value`/`defaultValue`/`onChange` (dayjs tokens), decoupled from the displayed
+     * `format`. Defaults to the ISO datetime `'YYYY-MM-DDTHH:mm:ss[Z]'` when `utc` (the `Z` marks the
+     * value as UTC, e.g. `'2026-06-10T09:35:00Z'`), or `'YYYY-MM-DDTHH:mm:ss'` (no `Z`) when `utc={false}`.
+     * Incoming values are parsed **leniently** (this format, then any ISO-8601 string — so a backend
+     * datetime like `'2026-06-10T09:35:49.6134342'` with or without `Z` is accepted).
+     */
+    valueFormat?: string;
+    /**
+     * Treat the value as **UTC** and display/edit in the viewer's **local** timezone (default `true`).
+     * Set `false` to disable timezone conversion entirely — the field shows and emits the value's exact
+     * wall-clock (what you pick is what's sent, no UTC shift).
+     */
+    utc?: boolean;
+    /** 12-hour clock (1–12 + AM/PM) instead of 24-hour (0–23). Defaults to `false`. */
+    hour12?: boolean;
+    /** Minute increment for the minutes column. Defaults to `1`. */
+    minuteStep?: number;
+    /** Show the seconds column + `:ss` in the default format. Defaults to `true`; pass `false` to hide seconds. */
+    showSeconds?: boolean;
+    /** Placeholder shown when empty. Defaults to the lowercased `format`. */
+    placeholder?: string;
+    /** Earliest selectable date (ISO date or datetime; day-level bound on the calendar). */
+    min?: string;
+    /** Latest selectable date (ISO date or datetime; day-level bound on the calendar). */
+    max?: string;
+    /** Disables specific dates — receives each day as an ISO `'YYYY-MM-DD'` string. */
+    disabledDate?: (date: string) => boolean;
+    /** First day of the week: 0 = Sunday … 6 = Saturday. Defaults to `1` (Monday). */
+    weekStartsOn?: number;
+    /** Shows a clear (×) button when a value is set. Defaults to `true`. */
+    clearable?: boolean;
+    /** Form field name — auto-binds to a surrounding `<Form>` (value is the datetime string). */
+    name?: string;
+    /** Id for the input (label association). */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A datetime field with a typed, masked input **and** a popover combining the keyboard-navigable
+ * `Calendar` (date) with scrollable time columns (hour / minute / optional second + AM/PM in 12-hour
+ * mode). All math runs in **UTC** so the instant never drifts with the viewer's timezone; the value is a
+ * string in `valueFormat` (UTC ISO datetime with a `Z` by default, or no `Z` when `utc={false}`) — incoming values are parsed
+ * leniently (a richer backend datetime is accepted) and the chosen instant is emitted in that format.
+ * Picking a date keeps the time and vice-versa, and the popover stays open until you click away,
+ * press Escape, or hit Done. Supports `hour12`, `minuteStep`, `showSeconds`, `min`/`max`,
+ * `disabledDate`, `weekStartsOn`, and `clearable`. Controlled (`value` + `onChange`) or uncontrolled
+ * (`defaultValue`), and binds to a surrounding `<Form>` by `name`. Requires the `dayjs` peer dependency.
+ */
+export declare const DateTimePicker: import("react").ForwardRefExoticComponent<DateTimePickerProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/DateTimePicker/TimeColumns.d.cts

@@ -0,0 +1,22 @@
+import { type Dayjs } from '../DatePicker/dateUtils';
+export interface TimeColumnsProps {
+    /** The working datetime (selected value) or null. */
+    value: Dayjs | null;
+    /** Emit the next datetime when an hour / minute / second / meridiem is chosen. */
+    onChange: (next: Dayjs) => void;
+    /** 12-hour clock (1–12 + AM/PM) instead of 24-hour (0–23). */
+    hour12: boolean;
+    /** Minute increment for the minutes column. */
+    minuteStep: number;
+    /** Show a seconds column. */
+    showSeconds: boolean;
+    /** Focus the hours column on mount (when there's no calendar to take focus, e.g. `TimePicker`). */
+    autoFocus?: boolean;
+}
+/**
+ * The time-picker columns shown beside the calendar in `DateTimePicker`. Scrollable hour + minute
+ * (+ optional seconds) lists plus an AM/PM toggle in 12-hour mode — each a roving-focus listbox. All
+ * math is UTC; each pick keeps the rest of the datetime intact (changing the hour preserves
+ * minutes/seconds, etc.). When `value` is null a pick anchors to today's date at the chosen time.
+ */
+export declare function TimeColumns({ value, onChange, hour12, minuteStep, showSeconds, autoFocus, }: TimeColumnsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateTimePicker/TimeColumns.d.ts

@@ -0,0 +1,22 @@
+import { type Dayjs } from '../DatePicker/dateUtils';
+export interface TimeColumnsProps {
+    /** The working datetime (selected value) or null. */
+    value: Dayjs | null;
+    /** Emit the next datetime when an hour / minute / second / meridiem is chosen. */
+    onChange: (next: Dayjs) => void;
+    /** 12-hour clock (1–12 + AM/PM) instead of 24-hour (0–23). */
+    hour12: boolean;
+    /** Minute increment for the minutes column. */
+    minuteStep: number;
+    /** Show a seconds column. */
+    showSeconds: boolean;
+    /** Focus the hours column on mount (when there's no calendar to take focus, e.g. `TimePicker`). */
+    autoFocus?: boolean;
+}
+/**
+ * The time-picker columns shown beside the calendar in `DateTimePicker`. Scrollable hour + minute
+ * (+ optional seconds) lists plus an AM/PM toggle in 12-hour mode — each a roving-focus listbox. All
+ * math is UTC; each pick keeps the rest of the datetime intact (changing the hour preserves
+ * minutes/seconds, etc.). When `value` is null a pick anchors to today's date at the chosen time.
+ */
+export declare function TimeColumns({ value, onChange, hour12, minuteStep, showSeconds, autoFocus, }: TimeColumnsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateTimePicker/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DateTimePicker-C557OjBU.cjs");exports.DateTimePicker=e.DateTimePicker;exports.default=e.DateTimePicker;
+//# sourceMappingURL=index.cjs.map

package/dist/components/DateTimePicker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/DateTimePicker/index.d.cts

@@ -0,0 +1,2 @@
+export { DateTimePicker, DateTimePicker as default } from './DateTimePicker';
+export type { DateTimePickerProps, DateTimePickerSize } from './DateTimePicker';

package/dist/components/DateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateTimePicker, DateTimePicker as default } from './DateTimePicker';
+export type { DateTimePickerProps, DateTimePickerSize } from './DateTimePicker';

package/dist/components/DateTimePicker/index.js

@@ -0,0 +1,6 @@
+import { D as r, D as t } from "../../DateTimePicker-DBtcWK0F.js";
+export {
+  r as DateTimePicker,
+  t as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/DateTimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Divider/Divider.d.cts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerAlign = 'left' | 'center' | 'right';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Line direction. `horizontal` (default) spans its container; `vertical` is a thin upright rule. */
+    orientation?: DividerOrientation;
+    /** Where the label sits along a horizontal divider. Defaults to `center`. (Ignored without a label.) */
+    align?: DividerAlign;
+    /** Optional title/label rendered in the line (horizontal only). */
+    children?: ReactNode;
+}
+/**
+ * A separator line. On its own it's a plain rule; pass `children` for a labeled divider
+ * (`line — title — line`) positioned by `align` (`left` / `center` / `right`). `orientation="vertical"`
+ * renders a thin upright rule (stretches inside a flex row). Token-only styling; `role="separator"`.
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerAlign = 'left' | 'center' | 'right';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Line direction. `horizontal` (default) spans its container; `vertical` is a thin upright rule. */
+    orientation?: DividerOrientation;
+    /** Where the label sits along a horizontal divider. Defaults to `center`. (Ignored without a label.) */
+    align?: DividerAlign;
+    /** Optional title/label rendered in the line (horizontal only). */
+    children?: ReactNode;
+}
+/**
+ * A separator line. On its own it's a plain rule; pass `children` for a labeled divider
+ * (`line — title — line`) positioned by `align` (`left` / `center` / `right`). `orientation="vertical"`
+ * renders a thin upright rule (stretches inside a flex row). Token-only styling; `role="separator"`.
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Divider/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Divider-CzbhdCiD.cjs");exports.Divider=e.Divider;exports.default=e.Divider;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Divider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Divider/index.d.cts

@@ -0,0 +1,2 @@
+export { Divider, Divider as default } from './Divider';
+export type { DividerProps, DividerOrientation, DividerAlign } from './Divider';

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider, Divider as default } from './Divider';
+export type { DividerProps, DividerOrientation, DividerAlign } from './Divider';

package/dist/components/Divider/index.js

@@ -0,0 +1,6 @@
+import { D as r, D } from "../../Divider-LtH3dLgw.js";
+export {
+  r as Divider,
+  D as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Dropdown/Dropdown.d.cts

@@ -0,0 +1,44 @@
+import { type CSSProperties, type ReactElement, type ReactNode } from 'react';
+import { type ListItemSize } from '../List';
+export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export interface DropdownProps {
+    /** The element that opens the menu (e.g. a `Button` / `IconButton`). Cloned to wire click + a11y. */
+    trigger: ReactElement;
+    /** Menu content — typically `ListItem`s (composed inside a `role="menu"` `List`). */
+    children: ReactNode;
+    /** Preferred placement. Flips to the opposite side automatically when it would overflow. Default `bottom-start`. */
+    placement?: DropdownPlacement;
+    /** Menu size — sets the panel min-width (`sm` 150 · `md` 190 · `lg` 220) and the items' density. Default `md`. */
+    size?: ListItemSize;
+    /**
+     * Apply the size-based min-width (`sm` 150 · `md` 190 · `lg` 220px). Defaults to `true`; set `false`
+     * to let the menu size to its content instead (the items' density still tracks `size`).
+     */
+    minWidth?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled use. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /** Fires with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Close the menu when an item inside is clicked. Defaults to `true`. */
+    closeOnSelect?: boolean;
+    /** Make the menu at least as wide as the trigger (select-like). Defaults to `false`. */
+    matchTriggerWidth?: boolean;
+    /** Prevents opening. */
+    disabled?: boolean;
+    /** Gap between the trigger and the menu, in px. Defaults to `6`. */
+    offset?: number;
+    /** Class applied to the floating panel. */
+    className?: string;
+    /** Style applied to the floating panel. */
+    style?: CSSProperties;
+}
+/**
+ * A floating menu anchored to a `trigger`. Opens on trigger click; closes on outside click, `Escape`,
+ * or selecting an item. The panel is portaled to `document.body` and positioned with collision
+ * handling — it **flips** to the opposite side when it would overflow, clamps within the viewport, and
+ * re-positions on scroll/resize (a too-tall menu caps its height and scrolls). Arrow keys move between
+ * items; `Escape` returns focus to the trigger. Compose `ListItem`s as `children`.
+ */
+export declare function Dropdown({ trigger, children, placement, size, minWidth, open, defaultOpen, onOpenChange, closeOnSelect, matchTriggerWidth, disabled, offset, className, style, }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,44 @@
+import { type CSSProperties, type ReactElement, type ReactNode } from 'react';
+import { type ListItemSize } from '../List';
+export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export interface DropdownProps {
+    /** The element that opens the menu (e.g. a `Button` / `IconButton`). Cloned to wire click + a11y. */
+    trigger: ReactElement;
+    /** Menu content — typically `ListItem`s (composed inside a `role="menu"` `List`). */
+    children: ReactNode;
+    /** Preferred placement. Flips to the opposite side automatically when it would overflow. Default `bottom-start`. */
+    placement?: DropdownPlacement;
+    /** Menu size — sets the panel min-width (`sm` 150 · `md` 190 · `lg` 220) and the items' density. Default `md`. */
+    size?: ListItemSize;
+    /**
+     * Apply the size-based min-width (`sm` 150 · `md` 190 · `lg` 220px). Defaults to `true`; set `false`
+     * to let the menu size to its content instead (the items' density still tracks `size`).
+     */
+    minWidth?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled use. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /** Fires with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Close the menu when an item inside is clicked. Defaults to `true`. */
+    closeOnSelect?: boolean;
+    /** Make the menu at least as wide as the trigger (select-like). Defaults to `false`. */
+    matchTriggerWidth?: boolean;
+    /** Prevents opening. */
+    disabled?: boolean;
+    /** Gap between the trigger and the menu, in px. Defaults to `6`. */
+    offset?: number;
+    /** Class applied to the floating panel. */
+    className?: string;
+    /** Style applied to the floating panel. */
+    style?: CSSProperties;
+}
+/**
+ * A floating menu anchored to a `trigger`. Opens on trigger click; closes on outside click, `Escape`,
+ * or selecting an item. The panel is portaled to `document.body` and positioned with collision
+ * handling — it **flips** to the opposite side when it would overflow, clamps within the viewport, and
+ * re-positions on scroll/resize (a too-tall menu caps its height and scrolls). Arrow keys move between
+ * items; `Escape` returns focus to the trigger. Compose `ListItem`s as `children`.
+ */
+export declare function Dropdown({ trigger, children, placement, size, minWidth, open, defaultOpen, onOpenChange, closeOnSelect, matchTriggerWidth, disabled, offset, className, style, }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Dropdown-DygP50OB.cjs");exports.Dropdown=e.Dropdown;exports.default=e.Dropdown;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Dropdown/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Dropdown/index.d.cts

@@ -0,0 +1,2 @@
+export { Dropdown, Dropdown as default } from './Dropdown';
+export type { DropdownProps, DropdownPlacement } from './Dropdown';

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Dropdown, Dropdown as default } from './Dropdown';
+export type { DropdownProps, DropdownPlacement } from './Dropdown';

package/dist/components/Dropdown/index.js

@@ -0,0 +1,6 @@
+import { D as r, D } from "../../Dropdown-DKAXue5_.js";
+export {
+  r as Dropdown,
+  D as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/EmptyState/EmptyState.d.cts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons/names';
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Leading glyph shown in a soft circle — an `IconName`, any node, or `false` to hide it. Defaults to `FolderOpen`. */
+    icon?: IconName | ReactNode | false;
+    /** Heading line. Defaults to `"No Results Found"`. */
+    title?: ReactNode;
+    /** Muted description under the title (e.g. a hint on what to do next). */
+    description?: ReactNode;
+    /** Action slot under the text — e.g. an "Add Item" or "Clear Filters" button. */
+    action?: ReactNode;
+    /** Size — scales the icon, text, and vertical padding. Defaults to `md`. */
+    size?: EmptyStateSize;
+    /**
+     * Polished "hero" look: a faded grid backdrop (fades out toward the edges) + an elevated icon
+     * (gradient + drop shadow). Defaults to `true`; pass `pattern={false}` for the flat, compact placeholder.
+     */
+    pattern?: boolean;
+    /** Extra content rendered below the action. */
+    children?: ReactNode;
+}
+/**
+ * The empty-state placeholder — drop it in wherever a page, table, list, or gallery has nothing to
+ * show (no records yet, no search matches). A centered, muted glyph in a soft circle + a `title` +
+ * an optional `description` and `action` (e.g. a "Add Item" / "Clear Filters" button). Neutral by
+ * design; pass a custom `icon` node for a tinted glyph. Token-only styling.
+ */
+export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons/names';
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Leading glyph shown in a soft circle — an `IconName`, any node, or `false` to hide it. Defaults to `FolderOpen`. */
+    icon?: IconName | ReactNode | false;
+    /** Heading line. Defaults to `"No Results Found"`. */
+    title?: ReactNode;
+    /** Muted description under the title (e.g. a hint on what to do next). */
+    description?: ReactNode;
+    /** Action slot under the text — e.g. an "Add Item" or "Clear Filters" button. */
+    action?: ReactNode;
+    /** Size — scales the icon, text, and vertical padding. Defaults to `md`. */
+    size?: EmptyStateSize;
+    /**
+     * Polished "hero" look: a faded grid backdrop (fades out toward the edges) + an elevated icon
+     * (gradient + drop shadow). Defaults to `true`; pass `pattern={false}` for the flat, compact placeholder.
+     */
+    pattern?: boolean;
+    /** Extra content rendered below the action. */
+    children?: ReactNode;
+}
+/**
+ * The empty-state placeholder — drop it in wherever a page, table, list, or gallery has nothing to
+ * show (no records yet, no search matches). A centered, muted glyph in a soft circle + a `title` +
+ * an optional `description` and `action` (e.g. a "Add Item" / "Clear Filters" button). Neutral by
+ * design; pass a custom `icon` node for a tinted glyph. Token-only styling.
+ */
+export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/EmptyState/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../EmptyState-CCCpZ-ZA.cjs");exports.EmptyState=t.EmptyState;exports.default=t.EmptyState;
+//# sourceMappingURL=index.cjs.map

package/dist/components/EmptyState/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/EmptyState/index.d.cts

@@ -0,0 +1,2 @@
+export { EmptyState, EmptyState as default } from './EmptyState';
+export type { EmptyStateProps, EmptyStateSize } from './EmptyState';

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState, EmptyState as default } from './EmptyState';
+export type { EmptyStateProps, EmptyStateSize } from './EmptyState';

package/dist/components/EmptyState/index.js

@@ -0,0 +1,6 @@
+import { E as e, E } from "../../EmptyState-CetM49vk.js";
+export {
+  e as EmptyState,
+  E as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/EmptyState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/FileUploader/FileUploader.d.cts

@@ -0,0 +1,144 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Accept } from 'react-dropzone';
+import { type LocaleConfig } from '../../theme';
+/**
+ * A single file entry. A freshly-picked file carries its binary in `file`; an already-uploaded one
+ * (a backend response, edit mode) carries only its URL in `source` — then `file` is absent.
+ */
+export interface FileUploaderItem {
+    /** The picked binary — present for a newly-selected file, absent for an already-uploaded one. */
+    file?: File;
+    /** Server URL of an already-uploaded file (edit mode); `''` for a fresh pick. */
+    source?: string;
+    /** Position in the list (0-based) — kept in sync with the visual order on every change. */
+    sortIndex: number;
+    /**
+     * Optional alt text, edited per card via the `allowAltText` modal. **Per-locale by default** —
+     * `Record<localeCode, string>` (e.g. `{ 'en-US': 'A red car', 'ka-GE': '…' }`); with
+     * **`localizedAltText={false}`** it's a single **`string`**. Absent until something is typed.
+     */
+    altText?: Record<string, string> | string;
+}
+/** Single mode → one item (or `null`); `multiple` mode → an array. */
+export type FileUploaderValue = FileUploaderItem | FileUploaderItem[] | null;
+export interface FileUploaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Accept more than one file — the value becomes an array. Defaults to `false`. */
+    multiple?: boolean;
+    /** Allow dropping files onto the dropzone (drag from the OS). Defaults to `true`. */
+    allowDrop?: boolean;
+    /** Allow drag + keyboard reordering of the rows (only meaningful with `multiple`). Defaults to `true`. */
+    allowReorder?: boolean;
+    /** Show a download button on each item (downloads the File / source). Defaults to `true`. */
+    allowDownload?: boolean;
+    /**
+     * Show a per-card **preview** (Eye) button — opens a fullscreen lightbox of the image / video. Defaults
+     * to `true`. Only rendered for **image + video** items (a PDF / doc has nothing to preview).
+     */
+    allowPreview?: boolean;
+    /**
+     * Show a per-card **edit** button that opens a modal for editing the item's `altText`. Defaults to
+     * `true` — pass `false` to hide it. The modal renders one input per content locale (a tab strip when
+     * there are several), so the edited value lands in `item.altText` keyed by locale code (or a single
+     * string with `localizedAltText={false}`).
+     */
+    allowAltText?: boolean;
+    /**
+     * Locales for the `allowAltText` editor (one input/tab each). Defaults to the app's `ConfigProvider`
+     * locales (`useLocales()`); pass this to override — mirrors `<TranslatedFields locales>`. Ignored when
+     * `localizedAltText` is `false`.
+     */
+    altTextLocales?: LocaleConfig[];
+    /**
+     * Whether the `allowAltText` editor is **per-locale**. Defaults to `true` — `altText` is a
+     * `Record<localeCode, string>` with one input/tab per locale. Pass **`false`** for a single plain input
+     * (no locales), so `altText` is just a **`string`**.
+     */
+    localizedAltText?: boolean;
+    /**
+     * Allow the same file to be added more than once. By default (`false`) a pick that matches an
+     * already-present item by content (a File by name + size + last-modified, a source by URL) is skipped
+     * and a notice is shown. Only meaningful with `multiple` (single mode replaces, so it can't stack).
+     */
+    allowDuplicates?: boolean;
+    /** Disables the whole control — no adding, removing, reordering, or downloading; dimmed + inert. */
+    disabled?: boolean;
+    /**
+     * Accepted file types (react-dropzone's format: a MIME type → file-extensions map) — restricts the file
+     * picker and rejects non-matching picks/drops (a rejection raises a `toast.error`). E.g. `{ 'image/*': [] }`
+     * or `{ 'image/*': [], 'application/pdf': ['.pdf'] }`. Omit to accept any type.
+     */
+    accept?: Accept;
+    /** Maximum number of files (only meaningful with `multiple`). Picks beyond it are rejected with a notice. */
+    maxFiles?: number;
+    /**
+     * Maximum size per file — a bytes `number`, or a human string like `"5MB"` / `"500KB"`. A picked file
+     * over the limit is **rejected** (not added) and raises a **`toast.error`** (so a `<Toaster>` — mounted
+     * by `RootLayout` by default — must be present to see it). A file supplied via `value`/`defaultValue`
+     * that exceeds the limit is still rendered but flagged in an error state (red ring + `"Exceeds … limit"`).
+     */
+    maxFileSize?: number | string;
+    /** Where a newly added file lands in the list (`multiple` only): `'start'` (top) or `'end'` (bottom). Defaults to `'end'`. */
+    itemInsertLocation?: 'start' | 'end';
+    /** Controlled value — one item (or `null`) when single, an array when `multiple`. */
+    value?: FileUploaderValue;
+    /** Initial value for uncontrolled use. */
+    defaultValue?: FileUploaderValue;
+    /** Fires with the next value whenever files are added, removed, or reordered. */
+    onChange?: (value: FileUploaderValue) => void;
+    /** Label rendered above the control. */
+    label?: ReactNode;
+    /** Marks the field invalid: red dropzone border + the `helperText` in the error color. */
+    error?: boolean;
+    /** Helper / validation text under the control. Adopts the error color while `error`. */
+    helperText?: ReactNode;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+    /** Stretches the control to fill its container width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /**
+     * Binds the field to a surrounding `<Form>` — the form value is the item / array, validated with e.g.
+     * `z.array(fileItemSchema).min(1)`. Reads the raw `form.values[name]` and writes via `setValue`;
+     * error/touched come from the form, and the form's scroll-to-error can focus the field.
+     */
+    name?: string;
+}
+/** Human-readable byte size, e.g. `2.4 MB`. (Exported for unit tests; not part of the public surface.) */
+export declare const formatBytes: (bytes: number) => string;
+/** Coerce a `maxFileSize` (a bytes number, or a human string like `"5MB"` / `"500 KB"`) to bytes. */
+export declare const toBytes: (size: number | string) => number | undefined;
+/**
+ * A content-identity key for de-duplication. The same file picked twice arrives as two distinct `File`
+ * objects (so a `WeakMap`/reference check can't catch it), but its name + size + last-modified match.
+ */
+export declare const fileKey: (file: File) => string;
+/** The dedup key for an existing item — a File by its content, an already-uploaded one by its URL. */
+export declare const itemKey: (item: FileUploaderItem) => string;
+/** Display name — the File's name or the last path segment of a source URL. */
+export declare const labelOf: (item: FileUploaderItem) => string;
+/**
+ * Whether an item is an image — the only kind that gets the **crop** + **alt-text** editors (a video / PDF
+ * / doc has nothing to crop or describe). A File is judged by its MIME `type`; a source URL by a known
+ * image extension or a `data:image/…` URI, defaulting to `true` when it carries no recognizable extension
+ * (the image-first assumption — e.g. extensionless CDN URLs).
+ */
+export declare const isImageItem: (item: FileUploaderItem) => boolean;
+/** Whether an item is a video — rendered as a playable `<video controls>` preview instead of an `<img>`. */
+export declare const isVideoItem: (item: FileUploaderItem) => boolean;
+/**
+ * Split a name into the part that may truncate and a short trailing extension that should always stay
+ * visible — so a long name middle-ellipses as `name….ext` instead of overflowing or losing the type.
+ */
+export declare const splitName: (name: string) => {
+    base: string;
+    ext: string;
+};
+/**
+ * A small, clean file field that **collects** files for the consumer to upload on save — it never
+ * uploads itself. New picks carry their binary in `file`; already-uploaded files arrive with a
+ * `source` URL. A soft dropzone panel sits above a grid of image cards (thumbnail/file-icon + name +
+ * size, with overlaid remove + download buttons). `allowDrop` enables drag-from-OS (via
+ * `react-dropzone`); `allowReorder` enables drag + keyboard reordering (via `@dnd-kit`); cards animate
+ * in/out (via `@formkit/auto-animate`). Controlled (`value` + `onChange`) or uncontrolled
+ * (`defaultValue`); binds to a `<Form>` by `name`. The forwarded ref points at the root.
+ */
+export declare const FileUploader: import("react").ForwardRefExoticComponent<FileUploaderProps & import("react").RefAttributes<HTMLDivElement>>;