@wearenotch/ui-react 0.3.2 → 0.6.0

package/dist/index.d.ts

@@ -1,11 +1,10 @@
 import { ChartData } from 'chart.js';
 import { ChartOptions } from 'chart.js';
 import { default as default_2 } from 'react';
-import { ForwardRefExoticComponent } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { MouseEventHandler } from 'react';
 import { ReactNode } from 'react';
-import { RefAttributes } from 'react';
+import { Ref } from 'react';
 
 export declare function Accordion({ multiple, defaultValue, value: controlledValue, onValueChange, children, className, }: AccordionProps): JSX.Element;
 
@@ -83,7 +82,13 @@ export declare interface AlertProps {
 
 export declare type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 
-export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLSpanElement>>;
+export declare function Avatar({ src, alt, initials, size, className, ref, }: AvatarProps & {
+    ref?: Ref<HTMLSpanElement>;
+}): JSX.Element;
+
+export declare namespace Avatar {
+    var displayName: string;
+}
 
 export declare function AvatarGroup({ children, max, size, className, }: AvatarGroupProps): JSX.Element;
 
@@ -137,7 +142,13 @@ export declare interface BreadcrumbItem {
     onClick?: (e: default_2.MouseEvent) => void;
 }
 
-export declare const Breadcrumbs: default_2.ForwardRefExoticComponent<BreadcrumbsProps & default_2.RefAttributes<HTMLElement>>;
+export declare function Breadcrumbs({ items, separator, maxItems, className, ref, }: BreadcrumbsProps & {
+    ref?: Ref<HTMLElement>;
+}): JSX.Element;
+
+export declare namespace Breadcrumbs {
+    var displayName: string;
+}
 
 export declare interface BreadcrumbsProps {
     items: BreadcrumbItem[];
@@ -147,7 +158,13 @@ export declare interface BreadcrumbsProps {
     className?: string;
 }
 
-export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+export declare function Button({ children, variant, size, disabled, loading, type, leftIcon, rightIcon, fullWidth, onClick, 'aria-label': ariaLabel, className, ref, }: ButtonProps & {
+    ref?: Ref<HTMLButtonElement>;
+}): JSX.Element;
+
+export declare namespace Button {
+    var displayName: string;
+}
 
 export declare interface ButtonProps {
     /** Button label */
@@ -178,7 +195,13 @@ export declare type ButtonSize = 'sm' | 'md' | 'lg';
 
 export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'link' | 'destructive';
 
-export declare const Card: default_2.ForwardRefExoticComponent<CardProps & default_2.RefAttributes<HTMLElement>>;
+export declare function Card({ variant, clickable, href, children, className, onClick, ref, ...rest }: CardProps & {
+    ref?: Ref<HTMLElement>;
+}): JSX.Element;
+
+export declare namespace Card {
+    var displayName: string;
+}
 
 export declare function CardBody({ children, className }: CardBodyProps): JSX.Element;
 
@@ -237,7 +260,13 @@ export declare interface CardProps {
 
 export declare type CardVariant = 'elevated' | 'outlined' | 'filled';
 
-export declare const Carousel: default_2.ForwardRefExoticComponent<CarouselProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function Carousel({ slides, size, showArrows, showDots, autoPlay, autoPlayInterval, loop, defaultIndex, onSlideChange, className, ref, ...rest }: CarouselProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace Carousel {
+    var displayName: string;
+}
 
 export declare interface CarouselProps extends default_2.HTMLAttributes<HTMLDivElement> {
     slides: default_2.ReactNode[];
@@ -253,7 +282,13 @@ export declare interface CarouselProps extends default_2.HTMLAttributes<HTMLDivE
 
 export declare type CarouselSize = 'sm' | 'md' | 'lg';
 
-export declare const Chart: ForwardRefExoticComponent<ChartProps & RefAttributes<HTMLDivElement>>;
+export declare function Chart({ type, data, options, title, description, height, width, className, id, ref, }: ChartProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace Chart {
+    var displayName: string;
+}
 
 export declare interface ChartProps {
     type: ChartVariant;
@@ -269,7 +304,13 @@ export declare interface ChartProps {
 
 export declare type ChartVariant = 'line' | 'bar' | 'pie' | 'doughnut';
 
-export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+export declare function Checkbox({ id, indeterminate, label, helperText, errorMessage, className, checked, disabled, ref, ...props }: CheckboxProps & {
+    ref?: Ref<HTMLInputElement>;
+}): JSX.Element;
+
+export declare namespace Checkbox {
+    var displayName: string;
+}
 
 export declare interface CheckboxProps {
     id?: string;
@@ -290,8 +331,20 @@ export declare interface CheckboxProps {
     className?: string;
 }
 
-export declare const DangerButton: ForwardRefExoticComponent<DangerButtonProps & RefAttributes<HTMLButtonElement>>;
+export declare function DangerButton({ children, variant, size, disabled, loading, type, onClick, 'aria-label': ariaLabel, className, ref, }: DangerButtonProps & {
+    ref?: Ref<HTMLButtonElement>;
+}): JSX.Element;
 
+export declare namespace DangerButton {
+    var displayName: string;
+}
+
+/**
+ * `DangerButton` provides outline and ghost destructive treatments that
+ * `<Button variant="destructive">` does not. For the canonical solid
+ * destructive button, prefer `<Button variant="destructive">`; reach for
+ * `DangerButton` only when you need the outline or ghost variant.
+ */
 export declare interface DangerButtonProps {
     /** Button label */
     children: ReactNode;
@@ -315,7 +368,13 @@ export declare type DangerButtonSize = 'sm' | 'md' | 'lg';
 
 declare type DangerButtonVariant = 'filled' | 'outline' | 'ghost';
 
-export declare const DatePicker: default_2.ForwardRefExoticComponent<DatePickerProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function DatePicker({ value, defaultValue, placeholder, size, disabled, label, error, dateFormat, minDate, maxDate, onChange, className, id: idProp, ref, }: DatePickerProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace DatePicker {
+    var displayName: string;
+}
 
 export declare interface DatePickerProps {
     value?: Date | null;
@@ -335,7 +394,13 @@ export declare interface DatePickerProps {
 
 export declare type DatePickerSize = 'sm' | 'md' | 'lg';
 
-export declare const EmptyState: default_2.ForwardRefExoticComponent<EmptyStateProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function EmptyState({ icon, title, description, action, className, ref, ...rest }: EmptyStateProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace EmptyState {
+    var displayName: string;
+}
 
 export declare interface EmptyStateProps extends default_2.HTMLAttributes<HTMLDivElement> {
     icon?: default_2.ReactNode;
@@ -344,7 +409,13 @@ export declare interface EmptyStateProps extends default_2.HTMLAttributes<HTMLDi
     action?: default_2.ReactNode;
 }
 
-export declare const FileUpload: default_2.ForwardRefExoticComponent<FileUploadProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function FileUpload({ accept, multiple, maxSize, disabled, size, label, hint, error, onFiles, className, id: idProp, ref, }: FileUploadProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace FileUpload {
+    var displayName: string;
+}
 
 export declare interface FileUploadProps {
     accept?: string;
@@ -379,7 +450,13 @@ export declare interface FormFieldProps {
     className?: string;
 }
 
-export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
+export declare function IconButton({ icon, 'aria-label': ariaLabel, variant, size, disabled, loading, type, onClick, className, ref, }: IconButtonProps & {
+    ref?: Ref<HTMLButtonElement>;
+}): JSX.Element;
+
+export declare namespace IconButton {
+    var displayName: string;
+}
 
 export declare interface IconButtonProps {
     /** The icon to display — required */
@@ -395,7 +472,13 @@ export declare interface IconButtonProps {
     className?: string;
 }
 
-export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+export declare function Input({ id, name, type, value, defaultValue, placeholder, label, helperText, errorMessage, size, disabled, required, readOnly, leadingContent, trailingContent, maxLength, onChange, onBlur, onFocus, className, 'aria-describedby': ariaDescribedby, ref, }: InputProps & {
+    ref?: Ref<HTMLInputElement>;
+}): JSX.Element;
+
+export declare namespace Input {
+    var displayName: string;
+}
 
 export declare interface InputProps {
     /** Input id — links label to input */
@@ -439,9 +522,21 @@ export declare interface InputProps {
 
 export declare type InputSize = 'sm' | 'md' | 'lg';
 
-export declare const List: default_2.ForwardRefExoticComponent<ListProps & default_2.RefAttributes<HTMLElement>>;
+export declare function List({ variant, size, divided, className, children, ref, ...rest }: ListProps & {
+    ref?: Ref<HTMLElement>;
+}): JSX.Element;
 
-export declare const ListItem: default_2.ForwardRefExoticComponent<ListItemProps & default_2.RefAttributes<HTMLLIElement>>;
+export declare namespace List {
+    var displayName: string;
+}
+
+export declare function ListItem({ disabled, selected, leading, trailing, className, children, ref, ...rest }: ListItemProps & {
+    ref?: Ref<HTMLLIElement>;
+}): JSX.Element;
+
+export declare namespace ListItem {
+    var displayName: string;
+}
 
 export declare interface ListItemProps extends default_2.LiHTMLAttributes<HTMLLIElement> {
     disabled?: boolean;
@@ -460,7 +555,13 @@ export declare type ListSize = 'sm' | 'md' | 'lg';
 
 export declare type ListVariant = 'unordered' | 'ordered' | 'none';
 
-export declare const Modal: default_2.ForwardRefExoticComponent<ModalProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function Modal({ open, onClose, title, description, footer, size, preventBackdropClose, hideCloseButton, children, className, ref, }: ModalProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element | null;
+
+export declare namespace Modal {
+    var displayName: string;
+}
 
 export declare function ModalActions({ leading, children, className }: ModalActionsProps): JSX.Element;
 
@@ -495,7 +596,13 @@ export declare interface ModalProps {
 
 export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
-export declare const MultiSelect: default_2.ForwardRefExoticComponent<MultiSelectProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function MultiSelect({ options, value, defaultValue, placeholder, size, disabled, searchable, label, error, maxSelected, onChange, className, id: idProp, ref, }: MultiSelectProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace MultiSelect {
+    var displayName: string;
+}
 
 export declare interface MultiSelectProps {
     options: SelectOption[];
@@ -513,7 +620,13 @@ export declare interface MultiSelectProps {
     id?: string;
 }
 
-declare const Notification_2: default_2.ForwardRefExoticComponent<NotificationProps & default_2.RefAttributes<HTMLDivElement>>;
+declare function Notification_2({ variant, title, message, duration, dismissible, onDismiss, className, ref, }: NotificationProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+declare namespace Notification_2 {
+    var displayName: string;
+}
 export { Notification_2 as Notification }
 
 declare interface NotificationContextValue {
@@ -543,7 +656,13 @@ export declare function NotificationProvider({ children, position, }: {
 
 export declare type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
 
-export declare const Pagination: default_2.ForwardRefExoticComponent<PaginationProps & default_2.RefAttributes<HTMLElement>>;
+export declare function Pagination({ total, page, pageSize, pageSizeOptions, onPageChange, onPageSizeChange, size, showFirstLast, showPageNumbers, showPageSize, showGoToPage, siblingCount, className, ref, }: PaginationProps & {
+    ref?: Ref<HTMLElement>;
+}): JSX.Element;
+
+export declare namespace Pagination {
+    var displayName: string;
+}
 
 export declare interface PaginationProps {
     /** Total number of items */
@@ -572,7 +691,13 @@ export declare interface PaginationProps {
 
 export declare type PaginationSize = 'sm' | 'md';
 
-export declare const ProgressBar: default_2.ForwardRefExoticComponent<ProgressBarProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function ProgressBar({ value, max, size, variant, label, showValue, animated, indeterminate, className, ref, }: ProgressBarProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace ProgressBar {
+    var displayName: string;
+}
 
 export declare interface ProgressBarProps {
     /** Current value (0 – max) */
@@ -595,7 +720,13 @@ export declare type ProgressBarSize = 'sm' | 'md' | 'lg';
 
 export declare type ProgressBarVariant = 'default' | 'success' | 'warning' | 'error';
 
-export declare const RichTextEditor: default_2.ForwardRefExoticComponent<RichTextEditorProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function RichTextEditor({ value, defaultValue, placeholder, size, disabled, label, error, minHeight, onChange, className, id, ref, }: RichTextEditorProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace RichTextEditor {
+    var displayName: string;
+}
 
 export declare interface RichTextEditorProps {
     value?: string;
@@ -613,7 +744,13 @@ export declare interface RichTextEditorProps {
 
 export declare type RichTextEditorSize = 'sm' | 'md' | 'lg';
 
-export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function Select({ options, value, defaultValue, placeholder, size, disabled, searchable, clearable, label, error, onChange, className, id: idProp, ref, }: SelectProps & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace Select {
+    var displayName: string;
+}
 
 export declare interface SelectOption {
     value: string;
@@ -658,7 +795,13 @@ export declare interface SkeletonProps {
 
 export declare type SkeletonVariant = 'text' | 'circle' | 'rect';
 
-export declare const Slider: default_2.ForwardRefExoticComponent<SliderProps & default_2.RefAttributes<HTMLInputElement>>;
+export declare function Slider({ value, defaultValue, min, max, step, disabled, label, showValue, showTicks, size, onChange, formatValue, className, ref, }: SliderProps & {
+    ref?: Ref<HTMLInputElement>;
+}): JSX.Element;
+
+export declare namespace Slider {
+    var displayName: string;
+}
 
 export declare interface SliderProps {
     value?: number;
@@ -701,7 +844,13 @@ export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export declare type SpinnerVariant = 'primary' | 'white' | 'current';
 
-export declare const Stepper: default_2.ForwardRefExoticComponent<StepperProps & default_2.RefAttributes<HTMLElement>>;
+export declare function Stepper({ steps, activeStep, orientation, onStepClick, className, ref, }: StepperProps & {
+    ref?: Ref<HTMLElement>;
+}): JSX.Element;
+
+export declare namespace Stepper {
+    var displayName: string;
+}
 
 export declare type StepperOrientation = 'horizontal' | 'vertical';
 
@@ -721,7 +870,13 @@ export declare interface StepperStep {
     optional?: boolean;
 }
 
-export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLInputElement>>;
+export declare function Switch({ id, name, checked, defaultChecked, disabled, label, labelPosition, size, onChange, className, 'aria-label': ariaLabel, ref, }: SwitchProps & {
+    ref?: Ref<HTMLInputElement>;
+}): JSX.Element;
+
+export declare namespace Switch {
+    var displayName: string;
+}
 
 export declare interface SwitchProps {
     id?: string;
@@ -741,15 +896,21 @@ export declare interface SwitchProps {
 
 export declare type SwitchSize = 'sm' | 'md';
 
-export declare function Tab({ value, disabled, badge, children, className }: TabProps): JSX.Element;
+export declare function Tab({ value, disabled, badge, children, className, onClick, onKeyDown, ref, ...rest }: TabProps & {
+    ref?: Ref<HTMLButtonElement>;
+}): JSX.Element;
 
 export declare namespace Tab {
     var displayName: string;
 }
 
-export declare const Table: <T extends Record<string, unknown>>(props: TableProps<T> & {
-    ref?: default_2.Ref<HTMLDivElement>;
-}) => default_2.ReactElement;
+export declare function Table<T extends Record<string, unknown>>({ columns, data, rowKey, sortKey, sortDirection, onSort, selectable, selectedKeys, onSelectionChange, onRowClick, focusableRows, striped, hoverable, bordered, size, emptyState, loading, loadingRows, className, tableClassName, ref, ...rest }: TableProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace Table {
+    var displayName: string;
+}
 
 export declare interface TableColumn<T = Record<string, unknown>> {
     /** Unique key matching a property of T, or a custom id */
@@ -768,7 +929,10 @@ export declare interface TableColumn<T = Record<string, unknown>> {
     align?: 'left' | 'center' | 'right';
 }
 
-export declare interface TableProps<T = Record<string, unknown>> {
+/**
+ * Extra div attributes (id, data-*, aria-*) are forwarded to the outer wrapper.
+ */
+export declare interface TableProps<T = Record<string, unknown>> extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'> {
     columns: TableColumn<T>[];
     data: T[];
     /** Row key accessor — defaults to index */
@@ -785,6 +949,22 @@ export declare interface TableProps<T = Record<string, unknown>> {
     selectedKeys?: Set<string | number>;
     /** Called when selection changes */
     onSelectionChange?: (keys: Set<string | number>) => void;
+    /**
+     * Called when a row is activated by click, or by Enter / Space while the row
+     * has focus (see `focusableRows`). Setting it shows a pointer cursor and,
+     * unless `focusableRows` is false, makes rows focusable. Clicks on interactive content inside a row (links, buttons, inputs,
+     * the selection checkbox) do not trigger it, and neither does a click that
+     * ends a text selection.
+     */
+    onRowClick?: (row: T, index: number, event: default_2.MouseEvent<HTMLDivElement> | default_2.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * Whether clickable rows are Tab stops that activate on Enter / Space.
+     * Set to `false` when each row already contains a link or button for the
+     * same action, so keyboard users get one stop per row instead of two —
+     * the row then responds to mouse clicks only. Has no effect without
+     * `onRowClick`. Defaults to `true`.
+     */
+    focusableRows?: boolean;
     /** Alternating row background */
     striped?: boolean;
     /** Highlight row on hover */
@@ -827,7 +1007,12 @@ export declare interface TabPanelProps {
     className?: string;
 }
 
-export declare interface TabProps {
+/**
+ * Extra button attributes (data-*, aria-*, event handlers) are forwarded to the
+ * underlying <button>. `type` is always "button" so a Tab inside a <form> never
+ * submits it, and `id` is generated so the tab/panel ARIA links stay intact.
+ */
+export declare interface TabProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'type' | 'role' | 'id' | 'children'> {
     /** Must match the value of the corresponding TabPanel */
     value: string;
     disabled?: boolean;
@@ -864,7 +1049,13 @@ export declare type TabsSize = 'sm' | 'md';
 
 export declare type TabsVariant = 'underline' | 'button' | 'line' | 'enclosed' | 'pills';
 
-export declare const Tag: default_2.ForwardRefExoticComponent<TagProps & default_2.RefAttributes<HTMLSpanElement>>;
+export declare function Tag({ size, variant, dismissible, onDismiss, disabled, className, children, ref, ...rest }: TagProps & {
+    ref?: Ref<HTMLSpanElement>;
+}): JSX.Element;
+
+export declare namespace Tag {
+    var displayName: string;
+}
 
 export declare interface TagProps extends default_2.HTMLAttributes<HTMLSpanElement> {
     size?: TagSize;
@@ -878,7 +1069,13 @@ export declare type TagSize = 'sm' | 'md' | 'lg';
 
 export declare type TagVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
 
-export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+export declare function Textarea({ id, name, value, defaultValue, placeholder, label, helperText, errorMessage, disabled, required, readOnly, autoResize, rows, maxLength, showCount, onChange, onBlur, className, ref, }: TextareaProps & {
+    ref?: Ref<HTMLTextAreaElement>;
+}): JSX.Element;
+
+export declare namespace Textarea {
+    var displayName: string;
+}
 
 export declare interface TextareaProps {
     id?: string;
@@ -903,7 +1100,9 @@ export declare interface TextareaProps {
     className?: string;
 }
 
-export declare function Tooltip({ content, children, position, delay, className, }: TooltipProps): JSX.Element;
+export declare function Tooltip({ content, children, position, delay, className, ref, }: TooltipProps & {
+    ref?: Ref<HTMLSpanElement>;
+}): JSX.Element;
 
 export declare namespace Tooltip {
     var displayName: string;