@ravileal/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 Ravi Leal
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -1,3 +1,242 @@
-# Temporary Holding Version
+# @ravileal/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Reusable React UI primitives with a themeable CSS-variable design system.
+
+- Repository: https://github.com/ravileal/ui
+- Storybook: https://ravileal.github.io/ui/
+
+The library is intentionally small and domain-agnostic. It contains the
+presentational primitives used by `couple-finance` and other personal React
+projects. Finance-specific screens and components stay in their application.
+
+## Install
+
+```bash
+pnpm add @ravileal/ui
+# or
+npm install @ravileal/ui
+```
+
+React and React DOM are peer dependencies:
+
+```bash
+pnpm add react react-dom
+```
+
+## Styles
+
+Import the stylesheet once in your application entry point (or in the root
+layout for Next.js):
+
+```ts
+import '@ravileal/ui/styles.css';
+```
+
+The stylesheet is wrapped in `@layer ravileal-ui` and does not ship a global
+reset or a font. Add your own reset/typography if needed.
+
+## Theme
+
+All tokens are namespaced with `--ui-*` to avoid collisions:
+
+```css
+:root {
+  --ui-bg: #0b1422;
+  --ui-surface: #101c2e;
+  --ui-surface-2: #17273a;
+  --ui-border: #24384f;
+  --ui-text: #eaf0f8;
+  --ui-text-2: #9fb4cd;
+  --ui-text-3: #7b93b0;
+  --ui-accent: #00c9a7;
+  --ui-blue: #4f7cff;
+  --ui-green: #22c55e;
+  --ui-red: #f87171;
+  --ui-amber: #f59e0b;
+  --ui-purple: #a855f7;
+  --ui-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  --ui-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
+  --ui-overlay: rgba(0, 0, 0, 0.6);
+  --ui-on-accent: #ffffff;
+}
+```
+
+Override any token on `:root`, a container, or a theme selector. The library
+ships light defaults under `[data-ui-theme='light']` and `.ui-theme-light`:
+
+```tsx
+<html data-ui-theme="light">
+```
+
+## Usage
+
+```tsx
+import { useState } from 'react';
+import { Dropdown, Modal } from '@ravileal/ui';
+import '@ravileal/ui/styles.css';
+
+export function Example() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState('food');
+
+  return (
+    <>
+      <Dropdown
+        ariaLabel="Category"
+        value={value}
+        onChange={setValue}
+        options={[
+          { value: 'food', label: 'Food', color: '#00c9a7' },
+          { value: 'home', label: 'Home', color: '#4f7cff' },
+        ]}
+      />
+      <button type="button" onClick={() => setOpen(true)}>
+        Open
+      </button>
+      <Modal open={open} title="Settings" onClose={() => setOpen(false)}>
+        Content
+      </Modal>
+    </>
+  );
+}
+```
+
+## Components
+
+**Actions and feedback**
+
+- `Button`, `IconButton`
+- `Spinner`, `ProgressBar`
+- `Alert`
+- `Badge`, `Chip`
+- `ToastProvider`, `useToast`
+
+**Forms**
+
+- `TextInput`, `Textarea`
+- `FormField`
+- `Switch`
+- `Slider`
+- `SearchInput`
+- `Checkbox`, `Radio`
+- `NumberStepper`
+- `Dropdown`
+- `Combobox`
+- `DatePicker`
+- `MonthSelector`
+- `ColorPicker`
+
+**Layout and navigation**
+
+- `Card`, `CardHeader`, `CardBody`, `CardFooter`, `Section`
+- `EmptyState`
+- `PageHeader`
+- `ListScreen`, `ListCard`, `ListRow`, `ListSearch`, `ListEmptyState`
+- `Tabs`, `SegmentedControl`
+- `DropdownMenu` (also exported as `Menu`)
+- `Drawer` (also exported as `Sheet`)
+- `DataTable`
+- `FileUpload` (also exported as `Dropzone`)
+
+**Overlays and utilities**
+
+- `Modal`, `ConfirmModal`
+- `Tooltip`
+- `Avatar`
+- `CopyValue`
+- `InlineEditorCard`
+- `RowActions`
+- `Skeleton`, `SkeletonStatus`, `PageSkeleton`, `PageHeaderSkeleton`, `SearchSkeleton`, `ListCardSkeleton`, `DetailRowsSkeleton`
+- `Portal`
+- `VisuallyHidden`
+
+Every component exports its prop types. `CopyValue` accepts `formatValue` and
+`copyValue` so the consumer owns currency/locale formatting. `MonthSelector`
+accepts its month list as `options`. `DatePicker` accepts `locale`, weekday
+labels and navigation labels. `ColorPicker` accepts a `labels` object.
+`Button` accepts `variant` (`primary`, `secondary`, `ghost`, `danger`), `size`
+and `loading`.
+
+```tsx
+import { useState } from 'react';
+import { Button, FormField, Switch, TextInput, ToastProvider, useToast } from '@ravileal/ui';
+
+function SettingsForm() {
+  const [checked, setChecked] = useState(true);
+  const { showToast } = useToast();
+
+  return (
+    <div style={{ display: 'grid', gap: 16 }}>
+      <FormField label="Partner name" hint="Shown in reports" required>
+        <TextInput />
+      </FormField>
+      <Switch checked={checked} onChange={setChecked} label="Monthly summary" />
+      <Button onClick={() => showToast({ title: 'Saved', tone: 'success' })}>Save</Button>
+    </div>
+  );
+}
+
+export function Settings() {
+  return (
+    <ToastProvider>
+      <SettingsForm />
+    </ToastProvider>
+  );
+}
+```
+
+## Next.js
+
+The package entry is a client boundary (`"use client"`). Import the stylesheet
+in the root layout:
+
+```tsx
+// app/layout.tsx
+import '@ravileal/ui/styles.css';
+```
+
+The components render safely with `ReactDOMServer`; browser-only features
+(portals, eyedropper, clipboard) are initialized after mount or inside event
+handlers.
+
+## Local development with `couple-finance`
+
+In this repository:
+
+```bash
+pnpm build
+pnpm link --global
+```
+
+In the consuming project:
+
+```bash
+pnpm link --global @ravileal/ui
+```
+
+Remove the link before committing and use the published semver range. Keep
+React as a peer dependency to avoid duplicate React copies.
+
+## Release
+
+Releases use semantic-release based on
+[`ravileal/semantic-release`](https://github.com/ravileal/semantic-release).
+The release workflow is initially manual (`workflow_dispatch`) so it cannot fail
+before the npm automation token exists. Add the `NPM_TOKEN` repository secret,
+publish the first `0.1.0` and tag `release-0.1.0`, then enable the `push` trigger
+on `main` in `.github/workflows/release.yml`.
+
+The semantic-release config uses the `release-${version}` tag format in
+production, matching the reference template.
+
+## Development
+
+```bash
+pnpm install
+pnpm lint
+pnpm typecheck
+pnpm test
+pnpm build
+pnpm storybook
+pnpm build-storybook
+```

package/dist/components/Alert.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Tone } from '../internal/tone';
+export interface AlertProps {
+    children: ReactNode;
+    tone?: Exclude<Tone, 'accent' | 'purple'>;
+    title?: ReactNode;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    role?: 'alert' | 'status';
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Alert({ children, tone, title, action, onDismiss, dismissLabel, role, className, style, }: AlertProps): import('react').JSX.Element;

package/dist/components/Avatar.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export interface AvatarProps {
+    name: string;
+    color: string;
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Accessible name. Defaults to `name`; pass an empty string to hide it. */
+    ariaLabel?: string;
+}
+export default function Avatar({ name, color, size, className, style, ariaLabel, }: AvatarProps): import('react').JSX.Element;

package/dist/components/Badge.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Tone } from '../internal/tone';
+export type BadgeVariant = 'soft' | 'solid' | 'outline';
+export interface BadgeProps {
+    children: ReactNode;
+    tone?: Tone;
+    variant?: BadgeVariant;
+    dot?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Badge({ children, tone, variant, dot, className, style, }: BadgeProps): import('react').JSX.Element;
+export interface ChipProps {
+    children: ReactNode;
+    tone?: Tone;
+    variant?: BadgeVariant;
+    leadingIcon?: ReactNode;
+    onRemove?: () => void;
+    removeLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Chip({ children, tone, variant, leadingIcon, onRemove, removeLabel, className, style, }: ChipProps): import('react').JSX.Element;

package/dist/components/Button.d.ts

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    loadingLabel?: string;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    fullWidth?: boolean;
+}
+declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'leadingIcon' | 'trailingIcon'> {
+    /** Accessible name for the icon-only button. */
+    'aria-label': string;
+    children: ReactNode;
+}
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/Card.d.ts

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface CardProps {
+    children: ReactNode;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Card({ children, padding, className, style }: CardProps): import('react').JSX.Element;
+export interface CardHeaderProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+export declare function CardHeader({ title, subtitle, actions, className }: CardHeaderProps): import('react').JSX.Element;
+export declare function CardBody({ children, className, style, }: {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import('react').JSX.Element;
+export declare function CardFooter({ children, className, style, }: {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import('react').JSX.Element;
+export interface SectionProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    style?: CSSProperties;
+}
+/** Card with a standard header and body — the Settings-style section pattern. */
+export declare function Section({ title, subtitle, actions, children, className, contentClassName, style, }: SectionProps): import('react').JSX.Element;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from 'react';
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'size'> {
+    size?: 'sm' | 'md';
+    /** Visually marks a partial selection (DOM `indeterminate` is not an attribute). */
+    indeterminate?: boolean;
+}
+export default function Checkbox({ size, className, indeterminate, ...props }: CheckboxProps): import('react').JSX.Element;

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+export interface ColorPickerLabels {
+    picker?: string;
+    saturationAndBrightness?: string;
+    hue?: string;
+    hexColor?: string;
+    pickFromScreen?: string;
+    presetColors?: string;
+    presetColor?: (hex: string) => string;
+    red?: string;
+    green?: string;
+    blue?: string;
+    cancel?: string;
+    done?: string;
+    clickToPick?: string;
+    saturationValueText?: (saturation: number, brightness: number) => string;
+}
+export interface ColorPickerProps {
+    value: string;
+    onChange: (color: string) => void;
+    /** Swatches offered by the caller (customizable per usage). */
+    presets: string[];
+    ariaLabel?: string;
+    labels?: ColorPickerLabels;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Full colour picker styled with the library tokens (replaces the native
+ * browser dialog): saturation/brightness area, hue slider, hex + RGB fields,
+ * optional screen eyedropper and preset swatches.
+ */
+export declare function ColorPicker({ value, onChange, presets, ariaLabel, labels, className, style, }: ColorPickerProps): import('react').JSX.Element;

package/dist/components/Combobox.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: ComboboxOption[];
+    ariaLabel: string;
+    placeholder?: string;
+    noResultsLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Searchable single-select. The input filters the listbox; the selected value
+ * is shown when the popover is closed.
+ */
+export default function Combobox({ value, onChange, options, ariaLabel, placeholder, noResultsLabel, disabled, className, style, }: ComboboxProps): import('react').JSX.Element;

package/dist/components/ConfirmModal.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+export interface ConfirmModalProps {
+    open: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    danger?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    panelStyle?: CSSProperties;
+    panelClassName?: string;
+}
+export default function ConfirmModal({ open, title, message, onConfirm, onCancel, danger, confirmLabel, cancelLabel, panelStyle, panelClassName, }: ConfirmModalProps): import('react').JSX.Element;

package/dist/components/CopyValue.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface CopyValueLabels {
+    copied?: string;
+    clickToCopy?: string;
+    tooltip?: string;
+}
+export interface CopyValueProps {
+    /** Raw value copied to the clipboard. */
+    value: number | string;
+    /** Visible content; defaults to `formatValue(value)`. */
+    children?: ReactNode;
+    /** Accessible name of the copy affordance. */
+    ariaLabel: string;
+    /** Formats the visible value. Defaults to `String(value)`. */
+    formatValue?: (value: number | string) => ReactNode;
+    /** Serializes the value copied to the clipboard. Defaults to `String(value)`. */
+    copyValue?: (value: number | string) => string;
+    /** Label shown in the tooltip above the copied value. */
+    tooltipLabel?: string;
+    labels?: CopyValueLabels;
+    className?: string;
+    style?: CSSProperties;
+    /** Style for the tooltip trigger wrapper (e.g. right alignment in a header). */
+    wrapperStyle?: CSSProperties;
+}
+/**
+ * Click-to-copy value. The panel is informational only (the click itself
+ * copies). Formatting and clipboard serialization are injectable so the
+ * component stays independent from an application's currency helpers.
+ */
+export default function CopyValue({ value, children, ariaLabel, formatValue, copyValue, tooltipLabel, labels, className, style, wrapperStyle, }: CopyValueProps): import('react').JSX.Element;

package/dist/components/DataTable.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface DataTableColumn<T> {
+    key: string;
+    header: ReactNode;
+    render?: (row: T, index: number) => ReactNode;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    width?: number | string;
+}
+export interface DataTableSort {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    rowKey: (row: T, index: number) => string;
+    ariaLabel?: string;
+    caption?: ReactNode;
+    sort?: DataTableSort;
+    onSortChange?: (sort: DataTableSort) => void;
+    emptyState?: ReactNode;
+    onRowClick?: (row: T) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function DataTable<T>({ columns, rows, rowKey, ariaLabel, caption, sort, onSortChange, emptyState, onRowClick, className, style, }: DataTableProps<T>): import('react').JSX.Element;

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+export interface DatePickerProps {
+    /** ISO date (`YYYY-MM-DD`) or empty string. */
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Trigger label style: `friendly` = "Mar 30, 2026", `short` = "03/30/2026". */
+    format?: 'friendly' | 'short';
+    /** `sm` for compact table cells, `md` for form fields (matches input height). */
+    size?: 'sm' | 'md';
+    fontSize?: number;
+    /** Extra style for the trigger button (e.g. tighter horizontal padding in a narrow cell). */
+    triggerStyle?: CSSProperties;
+    /** BCP 47 locale used for formatting month/weekday labels. Defaults to `en-US`. */
+    locale?: string;
+    /** Overrides the narrow weekday labels. The list starts on Sunday. */
+    weekdayLabels?: string[];
+    previousMonthLabel?: string;
+    nextMonthLabel?: string;
+    clearLabel?: string;
+    todayLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Themed calendar trigger. The month grid is portaled and follows the shared
+ * popover behavior (flip/reposition/outside-click/Escape) so it is never clipped
+ * and matches the design system instead of the native OS date picker.
+ */
+export default function DatePicker({ value, onChange, ariaLabel, placeholder, disabled, invalid, format, size, fontSize, triggerStyle, locale, weekdayLabels, previousMonthLabel, nextMonthLabel, clearLabel, todayLabel, className, style, }: DatePickerProps): import('react').JSX.Element;

package/dist/components/Drawer.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    side?: 'left' | 'right';
+    width?: number | string;
+    closeLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+    bodyClassName?: string;
+}
+export declare function Drawer({ open, onClose, title, children, footer, side, width, closeLabel, className, style, bodyClassName, }: DrawerProps): import('react').ReactPortal | null;
+export { Drawer as Sheet };

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,51 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface DropdownOption {
+    value: string;
+    label: string;
+    /** Optional swatch color rendered as a dot in the option (and in the trigger when `dot`). */
+    color?: string;
+    /** Optional leading icon rendered in the option (and in the trigger when selected). */
+    icon?: ReactNode;
+    /** Optional tooltip shown while hovering the option (e.g. the raw card number). */
+    hint?: string;
+    /** Label of the hint tooltip. */
+    hintLabel?: string;
+    /**
+     * Nested options revealed when this one is selected. The parent is not
+     * committed: the user must pick one of the children (used when an alias
+     * groups several card patterns).
+     */
+    children?: DropdownOption[];
+}
+export interface DropdownProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: DropdownOption[];
+    ariaLabel: string;
+    /** Shown by the trigger when `value` matches no option. */
+    placeholder?: string;
+    title?: string;
+    /** Trigger text color (falls back to `var(--ui-text-2)`). */
+    color?: string;
+    /** Render a color dot before the value when a `color` is given. */
+    dot?: boolean;
+    fontSize?: number;
+    fontWeight?: number;
+    /** `sm` for compact table cells, `md` for form fields (matches input height). */
+    size?: 'sm' | 'md';
+    /** When false the trigger shrinks to its content (e.g. filter bars). */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    maxHeight?: number;
+    /** Notifies the owner when the list opens/closes (used to suppress trigger tooltips). */
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Accessible custom select. The option list is rendered in a portal so it is
+ * never clipped by ancestor `overflow: hidden` (transaction rows live inside
+ * grouped containers that clip), and is styled with the app theme + custom
+ * scrollbar instead of the native OS dropdown.
+ */
+export default function Dropdown({ value, onChange, options, ariaLabel, placeholder, title, color, dot, fontSize, fontWeight, size, fullWidth, disabled, maxHeight, onOpenChange, className, style, }: DropdownProps): import('react').JSX.Element;

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface DropdownMenuItem {
+    type?: 'item';
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    onSelect?: () => void;
+}
+export interface DropdownMenuSeparator {
+    type: 'separator';
+    id?: string;
+}
+export type DropdownMenuEntry = DropdownMenuItem | DropdownMenuSeparator;
+export interface DropdownMenuProps {
+    /** Trigger content (rendered inside the menu button). */
+    trigger: ReactNode;
+    items: DropdownMenuEntry[];
+    ariaLabel: string;
+    align?: 'start' | 'end';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function DropdownMenu({ trigger, items, ariaLabel, align, className, style, }: DropdownMenuProps): import('react').JSX.Element;
+export { DropdownMenu as Menu };

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function EmptyState({ title, description, icon, action, className, style, }: EmptyStateProps): import('react').JSX.Element;

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface FileUploadProps {
+    onFiles: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    label?: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    inputId?: string;
+}
+export declare function FileUpload({ onFiles, accept, multiple, disabled, label, hint, className, style, inputId, }: FileUploadProps): import('react').JSX.Element;
+export { FileUpload as Dropzone };