@minimalstuff/ui 2.1.0 → 3.0.0

package/dist/index.d.ts

@@ -2,53 +2,78 @@ import { Callable } from 'react-call';
 import { ComponentPropsWithRef } from 'react';
 import { JSX } from 'react';
 import { JSXElementConstructor } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
+import { Ref } from 'react';
 import { StoreApi } from 'zustand';
 import { UseBoundStore } from 'zustand';
 
+export declare const Badge: ({ children, color, variant, size, radius, className, ...props }: Readonly<BadgeProps>) => JSX.Element;
+
+export declare interface BadgeProps extends ComponentPropsWithRef<'span'> {
+    children: ReactNode;
+    color?: ButtonColor;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    radius?: Radius;
+}
+
+export declare type BadgeSize = ControlSize;
+
+export declare type BadgeVariant = 'solid' | 'outline' | 'subtle';
+
+/** Chrome shared by every text-entry control (Input, Textarea, Select, Combobox). */
 export declare const BASE_INPUT_STYLES = "w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
 
-export declare const Button: ({ variant, color, size, radius, children, className, fullWidth, loading, startIcon, endIcon, disabled, ...props }: ButtonProps) => JSX.Element;
+export declare function Button(buttonProps: Readonly<ButtonProps>): JSX.Element;
 
-export declare type ButtonColor = 'primary' | 'neutral' | 'danger' | 'success';
+declare type ButtonColor =
+	| 'primary'
+	| 'neutral'
+	| 'danger'
+	| 'success'
+	| 'warning';
+export { ButtonColor as BadgeColor }
+export { ButtonColor }
 
-declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
-    variant?: ButtonVariant;
-    color?: ButtonColor;
-    size?: ButtonSize;
-    radius?: Radius;
+export declare type ButtonProps = Omit<ComponentPropsWithRef<'button'>, 'children'> & {
     children: ReactNode;
+    size?: ControlSize;
     className?: string;
     fullWidth?: boolean;
     loading?: boolean;
     startIcon?: string;
     endIcon?: string;
-}
+} & ButtonStyle;
 
-declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+declare type ButtonStyle = {
+    unstyled: true;
+} | {
+    unstyled?: false;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    radius?: Radius;
+};
 
-export declare type ButtonVariant =
-	| 'solid'
-	| 'outline'
-	| 'ghost'
-	| 'subtle'
-	| 'unstyled';
+export declare type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'subtle';
 
-export declare function CharacterCount({ current, min, max, showMin, showMax, }: CharacterCountProps): JSX.Element;
+export declare function CharacterCount({ current, min, max, showMin, showMax, unstyled, className, }: Readonly<CharacterCountProps>): JSX.Element;
 
-declare interface CharacterCountProps {
+export declare interface CharacterCountProps {
     current: number;
     min?: number;
     max?: number;
     showMin?: boolean;
     showMax?: boolean;
+    unstyled?: boolean;
+    className?: string;
 }
 
-export declare function Checkbox({ label, description, error, radius, unstyled, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ label, description, error, radius, unstyled, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: Readonly<CheckboxProps>): JSX.Element;
 
-declare interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'className'> {
+export declare interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'className'> {
     label?: string | React.ReactNode;
     description?: string | React.ReactNode;
     error?: string;
@@ -58,25 +83,26 @@ declare interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'ty
     wrapperClassName?: string;
 }
 
-export declare function ClientOnly({ children, fallback }: ClientOnlyProps): string | number | bigint | boolean | Iterable< ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | null | undefined> | JSX.Element | null;
+export declare function ClientOnly({ children, fallback }: Readonly<ClientOnlyProps>): string | number | bigint | boolean | Iterable< ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | null | undefined> | JSX.Element | null;
 
-declare interface ClientOnlyProps extends React.PropsWithChildren {
+export declare interface ClientOnlyProps extends React.PropsWithChildren {
     fallback?: React.ReactNode;
 }
 
-export declare function Combobox({ options, label, error, placeholder, noResultsText, radius, unstyled, disabled, required, className, wrapperClassName, value, defaultValue, onChange, id, }: ComboboxProps): JSX.Element;
+export declare function Combobox({ options, label, error, placeholder, noResultsText, clearLabel, radius, unstyled, disabled, required, className, wrapperClassName, value, defaultValue, onChange, id, }: Readonly<ComboboxProps>): JSX.Element;
 
 export declare interface ComboboxOption {
     value: string;
     label: string;
 }
 
-declare interface ComboboxProps {
+export declare interface ComboboxProps {
     options: ComboboxOption[];
     label?: string | ReactNode;
     error?: string;
     placeholder?: string;
     noResultsText?: string;
+    clearLabel?: string;
     radius?: Radius;
     unstyled?: boolean;
     disabled?: boolean;
@@ -91,7 +117,7 @@ declare interface ComboboxProps {
 
 export declare const ConfirmModal: Callable<ConfirmModalProps, boolean, {}>;
 
-export declare type ConfirmModalColor = 'red' | 'blue' | 'green';
+export declare type ConfirmModalColor = Extract<ButtonColor, 'primary' | 'danger' | 'success'>;
 
 export declare interface ConfirmModalProps {
     title: ReactNode;
@@ -100,31 +126,87 @@ export declare interface ConfirmModalProps {
     cancelLabel?: ReactNode;
     confirmColor?: ConfirmModalColor;
     radius?: Radius;
+    closeLabel?: string;
     onConfirm?: () => void | Promise<void>;
+    onError?: (error: unknown) => void;
 }
 
 export declare type ConfirmModalResponse = boolean;
 
+/**
+ * Wraps `children` (the right-click target area) and opens `items`, a list
+ * of `MenuItem` elements as direct children (see `MenuItem`'s own doc
+ * comment), at the cursor position. Right-click again elsewhere on the
+ * wrapped area to reposition it.
+ *
+ * For a menu anchored to a specific button (e.g. a kebab icon) instead of a
+ * right-click, use `Menu`.
+ */
+export declare function ContextMenu({ children, items, radius, className, ref, }: Readonly<ContextMenuProps>): JSX.Element;
+
+export declare interface ContextMenuProps {
+    /** The area that opens the menu on right-click. */
+    children: ReactNode;
+    /** `MenuItem` elements shown in the menu. */
+    items: ReactNode;
+    radius?: Radius;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/** The size scale every inline control shares (Button, IconButton, Badge, Kbd). */
+declare type ControlSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export declare function CopyButton({ value, children, onError, }: Readonly<CopyButtonProps>): JSX.Element;
+
+export declare interface CopyButtonProps {
+    value: string;
+    children: (props: {
+        copied: boolean;
+        copy: () => void | Promise<void>;
+    }) => ReactNode;
+    onError?: (error: unknown) => void;
+}
+
 declare interface GlobalHotkeysStore {
     globalHotkeysEnabled: boolean;
     setGlobalHotkeysEnabled: (value: boolean) => void;
 }
 
-export declare const IconButton: ({ icon, "aria-label": ariaLabel, variant, color, size, radius, className, children, ref, ...props }: IconButtonProps) => JSX.Element;
+declare function Highlight_2({ text, ranges }: Readonly<HighlightProps>): JSX.Element;
+export { Highlight_2 as Highlight }
+
+export declare interface HighlightProps {
+    text: string;
+    ranges: readonly number[];
+}
+
+export declare interface HighlightSegment {
+    	text: string;
+    	isMatch: boolean;
+}
+
+export declare function IconButton(iconButtonProps: Readonly<IconButtonProps>): JSX.Element;
 
-declare interface IconButtonProps extends ComponentPropsWithRef<'button'> {
+export declare type IconButtonProps = ComponentPropsWithRef<'button'> & {
     icon: string;
     'aria-label': string;
+    size?: ControlSize;
+    children?: ReactNode;
+} & IconButtonStyle;
+
+declare type IconButtonStyle = {
+    unstyled: true;
+} | {
+    unstyled?: false;
     variant?: ButtonVariant;
     color?: ButtonColor;
-    size?: 'sm' | 'md' | 'lg';
     radius?: Radius;
-    children?: ReactNode;
-}
+};
 
-export declare function Input({ label, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: InputProps): JSX.Element;
+export declare function Input({ label, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: Readonly<InputProps>): JSX.Element;
 
-declare interface InputProps extends ComponentPropsWithRef<'input'> {
+export declare interface InputProps extends ComponentPropsWithRef<'input'> {
     label?: string | ReactNode;
     error?: string;
     showCharCount?: boolean;
@@ -136,8 +218,95 @@ declare interface InputProps extends ComponentPropsWithRef<'input'> {
     wrapperClassName?: string;
 }
 
+export declare const Kbd: ({ children, size, radius, unstyled, className, }: Readonly<KbdProps>) => JSX.Element;
+
+export declare interface KbdProps {
+    children: ReactNode;
+    size?: KbdSize;
+    radius?: Radius;
+    unstyled?: boolean;
+    className?: string;
+}
+
+export declare type KbdSize = ControlSize;
+
+/**
+ * A dropdown anchored to `trigger` (e.g. a kebab `IconButton`): click to
+ * open, click again/click outside/Escape to close. `children` must be
+ * `MenuItem` elements as direct children (see `MenuItem`'s own doc comment)
+ * for keyboard nav and close-on-select to work.
+ *
+ * For "right-click anywhere on this area" instead of a specific trigger
+ * button, use `ContextMenu`.
+ */
+export declare function Menu({ trigger, children, side, align, radius, className, ref, }: Readonly<MenuProps>): JSX.Element;
+
+export declare type MenuAlign = 'start' | 'center' | 'end';
+
+/**
+ * A row inside a `Menu` or `ContextMenu`. Must be a direct child of one of
+ * those (or of a `<>` fragment passed as their `children`/`items`): arrow
+ * key navigation and close-on-select both rely on `role="menuitem"` being a
+ * direct descendant. Wrapping items in another element (e.g. a `<div>` for
+ * a labeled section) will render fine but breaks both.
+ *
+ * Works standalone outside a `Menu`/`ContextMenu` too (e.g. in isolation in
+ * Storybook): `onClick` still fires, it just won't auto-close anything.
+ */
+export declare function MenuItem({ icon, onClick, danger, disabled, children, className, ref, }: Readonly<MenuItemProps>): JSX.Element;
+
+export declare interface MenuItemProps {
+    icon?: string;
+    onClick: (event: MouseEvent_2<HTMLButtonElement>) => void;
+    danger?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+export declare interface MenuProps {
+    trigger: ReactElement;
+    children: ReactNode;
+    side?: MenuSide;
+    align?: MenuAlign;
+    radius?: Radius;
+    className?: string;
+    /** Attaches to the wrapper `<span>` around `trigger`, alongside `Menu`'s own internal ref. */
+    ref?: Ref<HTMLSpanElement>;
+}
+
+export declare type MenuSide = 'top' | 'bottom' | 'left' | 'right';
+
 export declare const Modal: Callable<ModalProps, void, {}>;
 
+/**
+ * Scrollable content region for a modal. Pair with `ModalFooter` as direct
+ * children of `Modal`'s `children` prop to get a footer pinned outside the
+ * scroll area — `ModalShell` detects the pairing and skips its own default
+ * padded/scrolling wrapper. Used alone (no `ModalFooter` sibling), it has no
+ * effect: `ModalShell` still applies its default wrapper around it.
+ */
+export declare const ModalBody: ({ children, className, }: Readonly<ModalBodyProps>) => JSX.Element;
+
+export declare interface ModalBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+
+/**
+ * Pinned footer region for a modal. Rendered as a direct child of `Modal`'s
+ * `children` prop (alongside `ModalBody`) — `ModalShell` detects it and
+ * places it outside the scrollable content instead of inside it, so it stays
+ * visible regardless of body content height.
+ */
+export declare const ModalFooter: ({ children, className, }: Readonly<ModalFooterProps>) => JSX.Element;
+
+export declare interface ModalFooterProps {
+    children: ReactNode;
+    className?: string;
+}
+
 export declare interface ModalProps {
     title?: ReactNode;
     children: ModalRenderProp;
@@ -146,6 +315,7 @@ export declare interface ModalProps {
     radius?: Radius;
     className?: string;
     dismissible?: boolean;
+    closeLabel?: string;
 }
 
 export declare function ModalProvider(): JSX.Element;
@@ -162,9 +332,9 @@ export declare interface RadioOption {
     disabled?: boolean;
 }
 
-export declare function RadioOptions({ options, orientation, value, defaultValue, onChange, name: nameProp, label, error, required, disabled, radius, unstyled, className, wrapperClassName, id, ...props }: RadioOptionsProps): JSX.Element;
+export declare function RadioOptions({ options, orientation, value, defaultValue, onChange, name: nameProp, label, error, required, disabled, radius, unstyled, className, wrapperClassName, id, ...props }: Readonly<RadioOptionsProps>): JSX.Element;
 
-declare interface RadioOptionsProps extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> {
+export declare interface RadioOptionsProps extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> {
     options: string[] | RadioOption[];
     orientation?: 'vertical' | 'horizontal';
     value?: string;
@@ -183,14 +353,14 @@ declare interface RadioOptionsProps extends Omit<ComponentPropsWithRef<'fieldset
 
 declare type Radius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
-export declare function Select({ options, label, error, placeholder, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: SelectProps): JSX.Element;
+export declare function Select({ options, label, error, placeholder, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: Readonly<SelectProps>): JSX.Element;
 
 export declare interface SelectOption {
     value: string;
     label: string;
 }
 
-declare interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'children'> {
+export declare interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'children'> {
     options: SelectOption[];
     label?: string | ReactNode;
     error?: string;
@@ -201,12 +371,53 @@ declare interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'chi
     wrapperClassName?: string;
 }
 
-export declare function Switch({ label, description, error, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: SwitchProps): JSX.Element;
+/**
+ * Splits `text` into consecutive segments, flagging the ones covered by
+ * `ranges` (flat `[start0, end0, start1, end1, ...]` pairs, ascending and
+ * non-overlapping — the shape uFuzzy's match info returns). Returns a
+ * single unmatched segment when there are no ranges, so callers never
+ * special-case an unmatched row.
+ */
+export declare function splitIntoHighlightSegments(
+	text: string,
+	ranges: readonly number[]
+): HighlightSegment[] {
+    	if (ranges.length === 0) {
+        		return [{ text, isMatch: false }];
+        	}
+
+    	const segments: HighlightSegment[] = [];
+    	let cursor = 0;
+
+    	for (let rangeIndex = 0; rangeIndex < ranges.length; rangeIndex += 2) {
+        		const start = ranges[rangeIndex];
+        		const end = ranges[rangeIndex + 1];
+        		if (start === undefined || end === undefined) {
+            			continue;
+            		}
+
+        		if (start > cursor) {
+            			segments.push({ text: text.slice(cursor, start), isMatch: false });
+            		}
+
+        		segments.push({ text: text.slice(start, end), isMatch: true });
+        		cursor = end;
+        	}
+
+    	if (cursor < text.length) {
+        		segments.push({ text: text.slice(cursor), isMatch: false });
+        	}
+
+    	return segments;
+}
+
+export declare function Switch({ label, description, error, unstyled, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: Readonly<SwitchProps>): JSX.Element;
 
-declare interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'className'> {
+export declare interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'className'> {
     label?: string | ReactNode;
     description?: string | ReactNode;
     error?: string;
+    unstyled?: boolean;
     className?: string;
     wrapperClassName?: string;
 }
@@ -218,21 +429,23 @@ export declare interface TabItem {
     icon?: string;
 }
 
-export declare function Tabs({ items, defaultIndex, radius, className, tabListClassName, panelClassName, onChange, }: TabsProps): JSX.Element;
+export declare function Tabs({ items, value, defaultIndex, radius, unstyled, className, tabListClassName, panelClassName, onChange, }: Readonly<TabsProps>): JSX.Element;
 
-declare interface TabsProps {
+export declare interface TabsProps {
     items: TabItem[];
+    value?: number;
     defaultIndex?: number;
     radius?: Radius;
+    unstyled?: boolean;
     className?: string;
     tabListClassName?: string;
     panelClassName?: string;
     onChange?: (index: number) => void;
 }
 
-export declare function Textarea({ label, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: TextareaProps): JSX.Element;
+export declare function Textarea({ label, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: Readonly<TextareaProps>): JSX.Element;
 
-declare interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
+export declare interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     label?: string | ReactNode;
     error?: string;
     showCharCount?: boolean;
@@ -253,18 +466,36 @@ declare interface ThemeStore {
     setTheme: (theme: Theme_2) => void;
 }
 
-export declare function ThemeToggle({ isTransitionEnabled, transitionDuration, transitionEasing, size, radius, }: Readonly<ThemeToggleProps>): JSX.Element;
+export declare function ThemeToggle({ isTransitionEnabled, transitionDuration, transitionEasing, size, radius, variant, getAriaLabel, }: Readonly<ThemeToggleProps>): JSX.Element;
 
-declare interface ThemeToggleProps {
+export declare interface ThemeToggleProps {
     isTransitionEnabled?: boolean;
     transitionDuration?: number;
     transitionEasing?: string;
     size?: 'sm' | 'md' | 'lg';
     radius?: Radius;
+    variant?: ButtonVariant;
+    getAriaLabel?: (theme: Theme_2) => string;
 }
 
-/** React hook that returns true if the component has mounted client-side */
-export declare const useClientOnly: () => boolean;
+export declare function Tooltip({ content, children, position, showOnClick, temporaryContent, temporaryDuration, disabled, radius, onTemporaryShow, className, ref, }: Readonly<TooltipProps>): JSX.Element;
+
+export declare type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export declare interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    position?: TooltipPosition;
+    showOnClick?: boolean;
+    temporaryContent?: ReactNode;
+    temporaryDuration?: number;
+    disabled?: boolean;
+    radius?: Radius;
+    onTemporaryShow?: () => void;
+    className?: string;
+    /** Attaches to the wrapper `<span>` around `children`, alongside `Tooltip`'s own internal ref. */
+    ref?: Ref<HTMLSpanElement>;
+}
 
 export declare function useDisableHotkeysWhileMounted(): void;
 
@@ -272,10 +503,9 @@ export declare const useGlobalHotkeysStore: UseBoundStore<StoreApi<GlobalHotkeys
 
 export declare const useIsClient: () => boolean;
 
-export declare function useRunAfterAnimation(durationMs: number): (callback: () => void) => () => void;
-
 export declare const useThemeStore: UseBoundStore<StoreApi<ThemeStore>>;
 
-export declare const withClientOnly: <T extends object>(Component: React.ComponentType<T>) => React.ComponentType<T>;
+/** Wraps `Component` so it only renders once the client has mounted. */
+export declare const withClientOnly: <TProps extends object>(Component: React.ComponentType<TProps>) => React.ComponentType<TProps>;
 
 export { }