@usememos/ui 26.10.0 → 26.10.2

package/dist/types/components/skeleton/index.d.ts

@@ -0,0 +1,13 @@
+import { useRender } from '@base-ui/react/use-render';
+import type { Size } from '../../types.js';
+export interface SkeletonProps extends useRender.ComponentProps<'div'> {
+    /** Defaults to the full width. */
+    width?: number | string;
+    /** Defaults to one line of text at `size`. */
+    height?: number | string;
+    /** A circle, for an avatar. Its width defaults to its height. */
+    round?: boolean;
+    size?: Size;
+}
+/** Holds the place of content that is still loading. Hidden from screen readers. */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/spinner/index.d.ts

@@ -0,0 +1,10 @@
+import { useRender } from '@base-ui/react/use-render';
+import type { Size } from '../../types.js';
+export interface SpinnerProps extends useRender.ComponentProps<'span'> {
+    /** 14, 16 or 20px. Defaults to the surrounding component's size, else md. */
+    size?: Size;
+    /** What is loading, for screen readers. */
+    label?: string;
+}
+/** A ring that turns while something short is in progress. */
+export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/types/components/switch/index.d.ts

@@ -0,0 +1,11 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import type { Size } from '../../types.js';
+export interface SwitchProps extends BaseSwitch.Root.Props {
+    /** 18, 20 or 22px tall. */
+    size?: Size;
+}
+/**
+ * Turns a setting on or off at once. Name it with a `Field.Label` around it,
+ * or `aria-label`.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/table/index.d.ts

@@ -0,0 +1,42 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { Size } from '../../types.js';
+export interface RootProps extends ComponentPropsWithoutRef<'table'> {
+    /** `sm` for dense admin lists. Sets row height and cell text. */
+    size?: Size;
+}
+/**
+ * A `<table>` with rows separated by `line`. It sits in a box that scrolls
+ * sideways when the table is wider than the screen; the ref and every prop go
+ * to the `<table>`.
+ */
+export declare const Root: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLTableElement>>;
+export interface HeaderProps extends ComponentPropsWithoutRef<'thead'> {
+}
+/** The `<thead>`, holding one Row of Head cells. */
+export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export interface BodyProps extends ComponentPropsWithoutRef<'tbody'> {
+}
+/** The `<tbody>`, holding the data Rows. */
+export declare const Body: import("react").ForwardRefExoticComponent<BodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export interface RowProps extends ComponentPropsWithoutRef<'tr'> {
+}
+/** A `<tr>`. Body rows highlight with `hover`. */
+export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+export interface HeadProps extends ComponentPropsWithoutRef<'th'> {
+    /** Right-aligns a column of numbers. Set it on the column's Cells too. */
+    num?: boolean;
+}
+/** A column header, `<th scope="col">` in 12px `ink-muted`. */
+export declare const Head: import("react").ForwardRefExoticComponent<HeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export interface CellProps extends ComponentPropsWithoutRef<'td'> {
+    /** Right-aligns a number. */
+    num?: boolean;
+    /** Secondary text, such as a date, in `ink-muted`. */
+    muted?: boolean;
+}
+/** A data cell, `<td>`. */
+export declare const Cell: import("react").ForwardRefExoticComponent<CellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export interface CaptionProps extends ComponentPropsWithoutRef<'caption'> {
+}
+/** Names the table, under it in `caption` style. Screen readers read it as the table's name. */
+export declare const Caption: import("react").ForwardRefExoticComponent<CaptionProps & import("react").RefAttributes<HTMLTableCaptionElement>>;

package/dist/types/components/tabs/index.d.ts

@@ -0,0 +1,22 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { type ReactNode } from 'react';
+import type { IconElement, Size } from '../../types.js';
+export interface RootProps extends BaseTabs.Root.Props {
+    size?: Size;
+}
+/** Switches between sections of the same page. Holds a List and one Panel per tab. */
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface ListProps extends BaseTabs.List.Props {
+}
+/** The well that holds the tabs, with the sliding key built in. */
+export declare const List: import("react").ForwardRefExoticComponent<Omit<ListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface TabProps extends BaseTabs.Tab.Props {
+    icon?: IconElement;
+    children?: ReactNode;
+}
+/** One tab. Its `value` matches a Panel's. */
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export interface PanelProps extends BaseTabs.Panel.Props {
+}
+/** The content of one tab. */
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<PanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/textarea/index.d.ts

@@ -0,0 +1,9 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import type { Size } from '../../types.js';
+export interface TextareaProps extends Omit<BaseField.Control.Props, 'size' | 'render'> {
+    size?: Size;
+    /** Visible lines before it scrolls. Default 3. */
+    rows?: number;
+}
+/** A few lines of plain text. Looks like Input. */
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/types/components/toast/index.d.ts

@@ -0,0 +1,19 @@
+import { Toast as BaseToast } from '@base-ui/react/toast';
+export type ProviderProps = BaseToast.Provider.Props;
+/** Holds the toasts. Wrap the app in it once. `timeout` (default 5000ms) and `limit` (default 3) apply to every toast. */
+export declare const Provider: import("react").FC<import("@base-ui/react").ToastProviderProps>;
+/**
+ * Adds, updates and closes toasts: `add({ title, description, type, actionProps, timeout })`.
+ * `type` is the tone: "success", "warning", "danger", or none for neutral.
+ */
+export declare const useToastManager: typeof BaseToast.useToastManager;
+/** A manager for code outside React. Pass it to `Provider` as `toastManager`. */
+export declare const createToastManager: typeof BaseToast.createToastManager;
+export interface ViewportProps extends BaseToast.Viewport.Props {
+    /** Where the toasts are portaled to. Default `document.body`. */
+    container?: BaseToast.Portal.Props['container'];
+    /** The accessible name of each toast's X button. Default "Close". */
+    closeLabel?: string;
+}
+/** Shows the toasts: bottom-right, or bottom-center below `breakpoint-sm`. Render it once, inside Provider. */
+export declare const Viewport: import("react").ForwardRefExoticComponent<Omit<ViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/toggle/index.d.ts

@@ -0,0 +1,11 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { type ReactNode } from 'react';
+import type { IconElement, Size } from '../../types.js';
+export interface ToggleProps extends BaseToggle.Props {
+    size?: Size;
+    /** A Lucide element before the label. With no children the toggle is square and needs `aria-label`. */
+    icon?: IconElement;
+    children?: ReactNode;
+}
+/** Turns one option on or off and stays pressed while on. Also the item of a ToggleGroup. */
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/toggle-group/index.d.ts

@@ -0,0 +1,13 @@
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { type ReactNode } from 'react';
+import type { Size } from '../../types.js';
+export interface ToggleGroupProps extends BaseToggleGroup.Props {
+    size?: Size;
+    children?: ReactNode;
+}
+/**
+ * A row of Toggles. With `multiple` it is a toolbar of independent on/off
+ * toggles. Without it, one choice among peers: a well with one sliding key,
+ * the same control as Tabs.
+ */
+export declare const ToggleGroup: import("react").ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/tooltip/index.d.ts

@@ -0,0 +1,24 @@
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ReactNode } from 'react';
+export type ProviderProps = BaseTooltip.Provider.Props;
+/** Shares the hover delay between tooltips, so moving from one trigger to the next opens at once. */
+export declare const Provider: import("react").FC<import("@base-ui/react").TooltipProviderProps>;
+export type RootProps = BaseTooltip.Root.Props;
+/** Groups a trigger and its tooltip. */
+export declare const Root: <Payload>(props: BaseTooltip.Root.Props<Payload>) => React.JSX.Element;
+export interface TriggerProps extends BaseTooltip.Trigger.Props {
+    /** Hover time before the tooltip opens, in ms. Default 400. */
+    delay?: number;
+}
+/** The control the tooltip names. Usually `render={<Button icon={...} aria-label="..." />}`. */
+export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type PositionerProps = Pick<BaseTooltip.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'>;
+export interface PopupProps extends BaseTooltip.Popup.Props, PositionerProps {
+    /** A keyboard shortcut shown after the label, such as "⌘ K". */
+    shortcut?: ReactNode;
+    /** Where the tooltip is portaled to. Default `document.body`. */
+    container?: BaseTooltip.Portal.Props['container'];
+}
+/** The label: two or three words, the same text as the trigger's `aria-label`. */
+export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,30 @@
+export type { IconElement, Size, Tone } from './types.js';
+export * as AlertDialog from './components/dialog/alert-dialog.js';
+export * as Avatar from './components/avatar/index.js';
+export { Badge, type BadgeProps } from './components/badge/index.js';
+export { Button, buttonClasses, type ButtonClassesOptions, type ButtonProps, type ButtonVariant } from './components/button/index.js';
+export { Checkbox, type CheckboxProps } from './components/checkbox/index.js';
+export * as Collapsible from './components/collapsible/index.js';
+export * as Combobox from './components/combobox/index.js';
+export * as Dialog from './components/dialog/index.js';
+export * as Field from './components/field/index.js';
+export * as Fieldset from './components/field/fieldset.js';
+export { Input, type InputProps } from './components/input/index.js';
+export { Kbd, type KbdProps } from './components/kbd/index.js';
+export { Link, type LinkProps } from './components/link/index.js';
+export * as Menu from './components/menu/index.js';
+export * as Popover from './components/popover/index.js';
+export { Prose, type ProseProps } from './components/prose/index.js';
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps } from './components/radio-group/index.js';
+export * as Select from './components/select/index.js';
+export { Separator, type SeparatorProps } from './components/separator/index.js';
+export { Skeleton, type SkeletonProps } from './components/skeleton/index.js';
+export { Spinner, type SpinnerProps } from './components/spinner/index.js';
+export { Switch, type SwitchProps } from './components/switch/index.js';
+export * as Table from './components/table/index.js';
+export * as Tabs from './components/tabs/index.js';
+export { Textarea, type TextareaProps } from './components/textarea/index.js';
+export * as Toast from './components/toast/index.js';
+export { Toggle, type ToggleProps } from './components/toggle/index.js';
+export { ToggleGroup, type ToggleGroupProps } from './components/toggle-group/index.js';
+export * as Tooltip from './components/tooltip/index.js';

package/dist/types/internal/class-name.d.ts

@@ -0,0 +1,7 @@
+/** Joins class names, skipping empty ones. */
+export declare function cx(...names: (string | false | null | undefined)[]): string;
+/**
+ * Puts our classes before the app's `className`, which Base UI lets be a
+ * function of the part's state.
+ */
+export declare function withClass<State>(ours: string, theirs: string | ((state: State) => string | undefined) | undefined): string | ((state: State) => string);

package/dist/types/internal/popup.d.ts

@@ -0,0 +1,9 @@
+/** Base UI's Positioner props that every folded `Popup` part accepts. */
+declare const positionerKeys: readonly ["side", "align", "sideOffset", "alignOffset", "collisionPadding", "collisionAvoidance", "collisionBoundary", "sticky", "anchor", "positionMethod", "arrowPadding", "disableAnchorTracking", "alignItemWithTrigger"];
+type PositionerKey = (typeof positionerKeys)[number];
+/**
+ * Splits a folded Popup's props into the ones for Base UI's Positioner and
+ * the rest, for its Popup.
+ */
+export declare function splitPositioner<Props extends object>(props: Props): readonly [Record<string, unknown>, Omit<Props, "anchor" | "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding" | "collisionAvoidance" | "collisionBoundary" | "sticky" | "positionMethod" | "arrowPadding" | "disableAnchorTracking" | "alignItemWithTrigger">];
+export {};

package/dist/types/internal/size.d.ts

@@ -0,0 +1,5 @@
+import type { Size } from '../types.js';
+/** The size set on a component's Root, read by its parts. */
+export declare const SizeContext: import("react").Context<Size | undefined>;
+/** The size to render at: the component's own prop, else the nearest Root's, else md. */
+export declare function useSize(size?: Size): Size;

package/dist/types/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+/** Control size. One value sets height, padding, text, icon size and radius together. */
+export type Size = 'sm' | 'md' | 'lg';
+/** Status tone for components that report a status, such as Badge and toasts. */
+export type Tone = 'neutral' | 'success' | 'warning' | 'danger';
+/** A Lucide icon element, such as `<Pin />` from lucide-react. Size and stroke come from the component. */
+export type IconElement = ReactElement;