@ravileal/ui 0.0.0-stage → 0.1.0

package/dist/components/FormField.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface FormFieldControlProps {
+    id: string;
+    describedBy?: string;
+    invalid: boolean;
+}
+export interface FormFieldProps {
+    label?: ReactNode;
+    /** ID of the control. When omitted, the first child's `id` or a generated ID is used. */
+    htmlFor?: string;
+    id?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactNode | ((props: FormFieldControlProps) => ReactNode);
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Label + hint + error wrapper. It clones a single form-control child to inject
+ * `id`, `aria-describedby` and `aria-invalid`; render-prop usage is available
+ * for custom controls.
+ */
+export default function FormField({ label, htmlFor, id, hint, error, required, children, className, style, }: FormFieldProps): import('react').JSX.Element;

package/dist/components/InlineEditorCard.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface InlineEditorCardProps {
+    title: string;
+    onSave: () => void;
+    onCancel: () => void;
+    saveDisabled?: boolean;
+    saveLabel?: string;
+    cancelLabel?: string;
+    embedded?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+/**
+ * Inline editor shell: card with a title, customizable fields and
+ * Cancel/Save. `embedded` renders it flush inside a list, right below the
+ * edited item (the pattern used by Aliases/Payment Aliases/Categories).
+ */
+export declare function InlineEditorCard({ title, onSave, onCancel, saveDisabled, saveLabel, cancelLabel, embedded, className, style, children, }: InlineEditorCardProps): import('react').JSX.Element;

package/dist/components/ListScreen.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface ListScreenProps {
+    title: string;
+    subtitle: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    children: ReactNode;
+    testId?: string;
+    maxWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Shell for list/configuration screens: scroll page, title/subtitle header and
+ * an optional primary action on the right. The content is fully customizable.
+ */
+export declare function ListScreen({ title, subtitle, action, children, testId, maxWidth, className, style, }: ListScreenProps): import('react').JSX.Element;
+/** Card that hosts an inline list (rows + embedded editors). */
+export declare function ListCard({ children, testId, className, style, }: {
+    children: ReactNode;
+    testId?: string;
+    className?: string;
+    style?: CSSProperties;
+}): import('react').JSX.Element;
+/** Row wrapper with the shared spacing/hover and optional divider. */
+export declare function ListRow({ children, style, className, borderBottom, }: {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+    borderBottom?: boolean;
+}): import('react').JSX.Element;
+/** Search input used above the lists. */
+export declare function ListSearch({ ariaLabel, placeholder, value, onChange, className, style, }: {
+    ariaLabel: string;
+    placeholder: string;
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}): import('react').JSX.Element;
+/** Centered empty state inside a ListCard. */
+export declare function ListEmptyState({ children, className, style, }: {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import('react').JSX.Element;

package/dist/components/Modal.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode, RefObject } from 'react';
+export interface ModalProps {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+    maxWidth?: number;
+    /** Overrides the panel defaults (e.g. a taller, non-scrolling viewer). */
+    panelStyle?: CSSProperties;
+    panelClassName?: string;
+    closeLabel?: string;
+    /** Element focused when the modal opens; defaults to the first focusable child. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+}
+/**
+ * Generic modal shell (overlay + centered panel). Traps focus, closes on
+ * Escape/backdrop by default, restores focus on close and keeps content in the
+ * caller.
+ */
+export default function Modal({ open, title, onClose, children, maxWidth, panelStyle, panelClassName, closeLabel, initialFocusRef, closeOnBackdrop, closeOnEscape, }: ModalProps): import('react').JSX.Element | null;

package/dist/components/MonthSelector.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+export interface MonthOption {
+    value: string;
+    label: string;
+}
+export interface MonthSelectorProps {
+    selectedMonth: string;
+    setSelectedMonth: (month: string) => void;
+    /** Months in display order (newest first). */
+    options: MonthOption[];
+    /** Optional entry rendered before the months (e.g. All Months). */
+    allOption?: MonthOption;
+    ariaLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Month stepper: `‹ May 2026 ›`. The arrows move through the supplied month
+ * list (newest first) and are disabled at the bounds. The label becomes a
+ * dropdown trigger, so a month can also be picked by clicking it.
+ */
+export default function MonthSelector({ selectedMonth, setSelectedMonth, options, allOption, ariaLabel, previousLabel, nextLabel, className, style, }: MonthSelectorProps): import('react').JSX.Element;

package/dist/components/NumberStepper.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export interface NumberStepperProps {
+    value: number;
+    onChange: (value: number) => void;
+    ariaLabel: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Numeric input without the native browser spinner: custom increase/decrease
+ * buttons, mouse-wheel stepping and keyboard arrows.
+ */
+export declare function NumberStepper({ value, onChange, ariaLabel, min, max, step, className, style, }: NumberStepperProps): import('react').JSX.Element;

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface PageHeaderProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    onBack?: () => void;
+    backLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PageHeader({ title, subtitle, actions, onBack, backLabel, className, style, }: PageHeaderProps): import('react').JSX.Element;

package/dist/components/Portal.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface PortalProps {
+    children: ReactNode;
+    /** Defaults to `document.body`. Ignored until the component is mounted. */
+    container?: Element | null;
+}
+/**
+ * SSR-safe portal: renders `null` on the server and before the first client
+ * effect, then mounts the children into the requested container.
+ */
+export default function Portal({ children, container }: PortalProps): import('react').ReactPortal | null;

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+export interface ProgressBarProps {
+    /** Current value. Omit/undefined for an indeterminate bar. */
+    value?: number;
+    max?: number;
+    label?: string;
+    /** Overrides the computed percentage (e.g. "3 of 8 files"). */
+    valueText?: string;
+    size?: 'sm' | 'md';
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ProgressBar({ value, max, label, valueText, size, className, style, }: ProgressBarProps): import('react').JSX.Element;

package/dist/components/Radio.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithRef } from 'react';
+export interface RadioProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'size'> {
+    size?: 'sm' | 'md';
+}
+export default function Radio({ size, className, ...props }: RadioProps): import('react').JSX.Element;

package/dist/components/RowActions.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+export interface RowActionsProps {
+    onEdit: () => void;
+    onDelete: () => void;
+    confirmDelete?: boolean;
+    editLabel?: string;
+    deleteLabel?: string;
+    cancelLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Inline row actions (Edit / Delete). Delete asks for an inline confirmation by
+ * default; flows that need their own dialog (e.g. moving category references)
+ * can disable the confirmation and handle it in `onDelete`.
+ */
+export declare function RowActions({ onEdit, onDelete, confirmDelete, editLabel, deleteLabel, cancelLabel, className, style, }: RowActionsProps): import('react').JSX.Element;

package/dist/components/ScreenSkeleton.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export declare function SkeletonStatus({ label, children, className, }: {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}): import('react').JSX.Element;
+export declare function PageSkeleton({ label, children, maxWidth, padding, className, }: {
+    label: string;
+    children: ReactNode;
+    maxWidth?: number;
+    padding?: string;
+    className?: string;
+}): import('react').JSX.Element;
+export declare function PageHeaderSkeleton({ actionWidth, marginBottom, }: {
+    actionWidth?: number | null;
+    marginBottom?: number;
+}): import('react').JSX.Element;
+export declare function SearchSkeleton(): import('react').JSX.Element;
+export declare function ListCardSkeleton({ rows, leading, trailing, }: {
+    rows?: number;
+    leading?: 'dot' | 'avatar' | 'none';
+    trailing?: 'actions' | 'amount' | 'none';
+}): import('react').JSX.Element;
+export declare function DetailRowsSkeleton({ rows }: {
+    rows?: number;
+}): import('react').JSX.Element;

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+export interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel: string;
+    placeholder?: string;
+    onClear?: () => void;
+    clearLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SearchInput({ value, onChange, ariaLabel, placeholder, onClear, clearLabel, disabled, className, style, }: SearchInputProps): import('react').JSX.Element;

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SegmentedItem {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    items: SegmentedItem[];
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel: string;
+    size?: 'sm' | 'md';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SegmentedControl({ items, value, onChange, ariaLabel, size, className, style, }: SegmentedControlProps): import('react').JSX.Element;

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+export interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    radius?: number | string;
+    circle?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Loading placeholder. It is purely decorative: the container that owns the
+ * loading state must expose `role="status"` and an accessible label.
+ */
+export default function Skeleton({ width, height, radius, circle, className, style, }: SkeletonProps): import('react').JSX.Element;

package/dist/components/Slider.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+export interface SliderProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    ariaLabel?: string;
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Slider({ value, onChange, min, max, step, label, ariaLabel, showValue, formatValue, disabled, id, className, style, }: SliderProps): import('react').JSX.Element;

package/dist/components/Spinner.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+export interface SpinnerProps {
+    size?: number;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Spinner({ size, label, className, style }: SpinnerProps): import('react').JSX.Element;

package/dist/components/Switch.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    ariaLabel?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    id?: string;
+    name?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Switch({ checked, onChange, label, description, ariaLabel, disabled, size, id, name, className, style, }: SwitchProps): import('react').JSX.Element;

package/dist/components/Tabs.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface TabItem {
+    id: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    items: TabItem[];
+    value: string;
+    onChange: (id: string) => void;
+    ariaLabel: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Tabs({ items, value, onChange, ariaLabel, className, style }: TabsProps): import('react').JSX.Element;

package/dist/components/TextInput.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: 'sm' | 'md';
+    invalid?: boolean;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    onClear?: () => void;
+    clearLabel?: string;
+    wrapperClassName?: string;
+    wrapperStyle?: CSSProperties;
+}
+declare const TextInput: import('react').ForwardRefExoticComponent<TextInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default TextInput;

package/dist/components/Textarea.d.ts

@@ -0,0 +1,6 @@
+import { TextareaHTMLAttributes } from 'react';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+}
+declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/dist/components/Toast.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { Tone } from '../internal/tone';
+export type ToastTone = Exclude<Tone, 'accent' | 'purple'>;
+export interface ToastOptions {
+    title?: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** Milliseconds before auto-dismiss; `0` keeps the toast until dismissed. */
+    duration?: number;
+}
+export interface ToastApi {
+    showToast: (options: ToastOptions) => string;
+    dismissToast: (id: string) => void;
+}
+export declare function useToast(): ToastApi;
+export interface ToastProviderProps {
+    children: ReactNode;
+    position?: 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+    maxToasts?: number;
+}
+export declare function ToastProvider({ children, position, maxToasts, }: ToastProviderProps): import('react').JSX.Element;

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface TooltipProps {
+    /** Panel content — usually the raw value an alias is covering. */
+    content: ReactNode;
+    children: ReactNode;
+    maxWidth?: number;
+    /** Delay before showing, in ms (0 shows immediately — used by tests). */
+    delay?: number;
+    /** Extra style for the trigger wrapper (e.g. `flex: 1` to wrap a Dropdown). */
+    style?: CSSProperties;
+    className?: string;
+    /** Suppresses the panel (e.g. while the wrapped dropdown is open). */
+    disabled?: boolean;
+    /** Trigger element; use `div` when wrapping block content (e.g. a dropdown option). */
+    as?: 'span' | 'div';
+}
+/**
+ * Custom design-system tooltip: renders the panel in a portal (rows clip with
+ * `overflow: hidden`, so a nested panel would be cut), flips above/below the
+ * trigger based on available space and clamps to the viewport horizontally.
+ */
+export default function Tooltip({ content, children, maxWidth, delay, style, className, disabled, as, }: TooltipProps): import('react').JSX.Element;

package/dist/components/VisuallyHidden.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    style?: CSSProperties;
+}
+export default function VisuallyHidden({ children, className, style, ...props }: VisuallyHiddenProps): import('react').JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+export { default as Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { default as Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+export { ColorPicker } from './components/ColorPicker';
+export type { ColorPickerLabels, ColorPickerProps } from './components/ColorPicker';
+export { default as ConfirmModal } from './components/ConfirmModal';
+export type { ConfirmModalProps } from './components/ConfirmModal';
+export { default as CopyValue } from './components/CopyValue';
+export type { CopyValueLabels, CopyValueProps } from './components/CopyValue';
+export { default as DatePicker } from './components/DatePicker';
+export type { DatePickerProps } from './components/DatePicker';
+export { default as Dropdown } from './components/Dropdown';
+export type { DropdownOption, DropdownProps } from './components/Dropdown';
+export { InlineEditorCard } from './components/InlineEditorCard';
+export type { InlineEditorCardProps } from './components/InlineEditorCard';
+export { ListCard, ListEmptyState, ListRow, ListScreen, ListSearch } from './components/ListScreen';
+export type { ListScreenProps } from './components/ListScreen';
+export { default as Modal } from './components/Modal';
+export type { ModalProps } from './components/Modal';
+export { default as MonthSelector } from './components/MonthSelector';
+export type { MonthOption, MonthSelectorProps } from './components/MonthSelector';
+export { NumberStepper } from './components/NumberStepper';
+export type { NumberStepperProps } from './components/NumberStepper';
+export { default as Radio } from './components/Radio';
+export type { RadioProps } from './components/Radio';
+export { RowActions } from './components/RowActions';
+export type { RowActionsProps } from './components/RowActions';
+export { DetailRowsSkeleton, ListCardSkeleton, PageHeaderSkeleton, PageSkeleton, SearchSkeleton, SkeletonStatus, } from './components/ScreenSkeleton';
+export { default as Skeleton } from './components/Skeleton';
+export type { SkeletonProps } from './components/Skeleton';
+export { default as Tooltip } from './components/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
+export { default as Alert } from './components/Alert';
+export type { AlertProps } from './components/Alert';
+export { Badge, Chip } from './components/Badge';
+export type { BadgeProps, BadgeVariant, ChipProps } from './components/Badge';
+export { default as Button, IconButton } from './components/Button';
+export type { ButtonProps, ButtonSize, ButtonVariant, IconButtonProps } from './components/Button';
+export { Card, CardBody, CardFooter, CardHeader, Section } from './components/Card';
+export type { CardHeaderProps, CardProps, SectionProps } from './components/Card';
+export { default as Combobox } from './components/Combobox';
+export type { ComboboxOption, ComboboxProps } from './components/Combobox';
+export { DataTable } from './components/DataTable';
+export type { DataTableColumn, DataTableProps, DataTableSort } from './components/DataTable';
+export { Drawer, Sheet } from './components/Drawer';
+export type { DrawerProps } from './components/Drawer';
+export { DropdownMenu, Menu } from './components/DropdownMenu';
+export type { DropdownMenuEntry, DropdownMenuItem, DropdownMenuProps, DropdownMenuSeparator, } from './components/DropdownMenu';
+export { default as EmptyState } from './components/EmptyState';
+export type { EmptyStateProps } from './components/EmptyState';
+export { Dropzone, FileUpload } from './components/FileUpload';
+export type { FileUploadProps } from './components/FileUpload';
+export { default as FormField } from './components/FormField';
+export type { FormFieldControlProps, FormFieldProps } from './components/FormField';
+export { default as PageHeader } from './components/PageHeader';
+export type { PageHeaderProps } from './components/PageHeader';
+export { default as Portal } from './components/Portal';
+export type { PortalProps } from './components/Portal';
+export { default as ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar';
+export { default as SearchInput } from './components/SearchInput';
+export type { SearchInputProps } from './components/SearchInput';
+export { SegmentedControl } from './components/SegmentedControl';
+export type { SegmentedControlProps, SegmentedItem } from './components/SegmentedControl';
+export { default as Slider } from './components/Slider';
+export type { SliderProps } from './components/Slider';
+export { default as Spinner } from './components/Spinner';
+export type { SpinnerProps } from './components/Spinner';
+export { default as Switch } from './components/Switch';
+export type { SwitchProps } from './components/Switch';
+export { Tabs } from './components/Tabs';
+export type { TabItem, TabsProps } from './components/Tabs';
+export { default as Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
+export { default as TextInput } from './components/TextInput';
+export type { TextInputProps } from './components/TextInput';
+export { ToastProvider, useToast } from './components/Toast';
+export type { ToastApi, ToastOptions, ToastProviderProps, ToastTone } from './components/Toast';
+export { default as VisuallyHidden } from './components/VisuallyHidden';
+export type { VisuallyHiddenProps } from './components/VisuallyHidden';
+export type { Tone } from './internal/tone';