@usememos/ui 26.10.3 → 26.10.4

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

@@ -1,7 +1,7 @@
 import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
 import type { Size } from '../../types.js';
 export interface RootProps extends BaseCollapsible.Root.Props {
-    size?: Size;
+    size?: Exclude<Size, 'xs'>;
 }
 /** Hides content behind one trigger until people ask for it. Holds a Trigger and a Panel. */
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -6,7 +6,7 @@ export declare const Collection: typeof BaseCombobox.Collection;
 /** Base UI's matcher for `filter`, with locale-aware `contains`, `startsWith` and `endsWith`. */
 export declare const useFilter: typeof BaseCombobox.useFilter;
 export type RootProps<Value, Multiple extends boolean | undefined = false, Item = Value> = BaseCombobox.Root.Props<Value, Multiple, Item> & {
-    size?: Size;
+    size?: Exclude<Size, 'xs'>;
 };
 /**
  * Groups the input and the list, and holds the value. Pass `items` so the
@@ -29,7 +29,7 @@ export interface InputProps extends Omit<BaseCombobox.Input.Props, 'size' | 'cla
  * `className` and `style` go to the box around it.
  */
 export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-type PositionerProps = Pick<BaseCombobox.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'>;
+type PositionerProps = Pick<BaseCombobox.Positioner.Props, 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'>;
 export interface PopupProps extends BaseCombobox.Popup.Props, PositionerProps {
     /** Where the list is portaled to. Default `document.body`. */
     container?: BaseCombobox.Portal.Props['container'];

package/dist/types/components/field/fieldset.d.ts

@@ -1,7 +1,7 @@
 import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
 import type { Size } from '../../types.js';
 export interface RootProps extends BaseFieldset.Root.Props {
-    size?: Size;
+    size?: Exclude<Size, 'xs'>;
 }
 /** A group of checkboxes, radios or switches with one legend. */
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>>;

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

@@ -2,7 +2,7 @@ import { Field as BaseField } from '@base-ui/react/field';
 import type { Size } from '../../types.js';
 export interface RootProps extends BaseField.Root.Props {
     /** The size of the control inside, passed on to it. */
-    size?: Size;
+    size?: Exclude<Size, 'xs'>;
 }
 /** One control with its label, description and error, wired for screen readers. */
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -2,7 +2,7 @@ import { Input as BaseInput } from '@base-ui/react/input';
 import { type CSSProperties, type ReactNode } from 'react';
 import type { Size } from '../../types.js';
 export interface InputProps extends Omit<BaseInput.Props, 'size' | 'prefix' | 'className' | 'style'> {
-    size?: Size;
+    size?: Exclude<Size, 'xs'>;
     /** Says what the field is: a search or link icon. */
     prefix?: ReactNode;
     /** One action on the value (copy, clear), or a unit. */
@@ -12,6 +12,16 @@ export interface InputProps extends Omit<BaseInput.Props, 'size' | 'prefix' | 'c
     /** Styles for the visible box around the input. */
     style?: CSSProperties;
 }
+export interface InputClassesOptions {
+    size?: Exclude<Size, 'xs'>;
+}
+/**
+ * The classes that make an element look like an Input's box. Use them on an
+ * app's own one-line field, such as a tag input: focus inside the element
+ * shows the ring, and `aria-invalid="true"` or `aria-disabled="true"` on it
+ * shows those states. See docs/custom-components.md.
+ */
+export declare function inputClasses({ size }?: InputClassesOptions): string;
 /**
  * One line of text: flat `surface` with an `edge`. The ref and every other
  * prop go to the `<input>`; `className` and `style` go to the box around it.

package/dist/types/components/menu/classes.d.ts

@@ -0,0 +1,28 @@
+import type { Size } from '../../types.js';
+export interface MenuClassesOptions {
+    /** Row height of every item: 24 or 32px. */
+    size?: Exclude<Size, 'xs'>;
+}
+/** The classes of each part of a Menu. */
+export interface MenuClasses {
+    /** The floating list. Sets the row size its items read. */
+    popup: string;
+    /** One row. Highlighted while it has `data-highlighted`; dimmed with `data-disabled`. */
+    item: string;
+    /** A destructive row: red text. */
+    dangerItem: string;
+    /** The text of a row, which truncates. */
+    label: string;
+    /** A keyboard shortcut at the end of a row. */
+    shortcut: string;
+    /** A line between groups of rows. */
+    separator: string;
+    /** The name of a group of rows. */
+    groupLabel: string;
+}
+/**
+ * The classes that make an app's own floating list look like a Menu, such as
+ * an editor's suggestion list. The app sets `data-highlighted` on the active
+ * row. See docs/custom-components.md.
+ */
+export declare function menuClasses({ size }?: MenuClassesOptions): MenuClasses;

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

@@ -3,7 +3,7 @@ import { type ReactNode } from 'react';
 import type { IconElement, Size } from '../../types.js';
 export interface RootProps extends BaseMenu.Root.Props {
     /** Row height of every item: 24, 32 or 40px. */
-    size?: Size;
+    size?: Exclude<Size, 'xs'>;
 }
 /** Groups a trigger and its menu. */
 export declare function Root({ size, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
@@ -11,7 +11,7 @@ export interface TriggerProps extends BaseMenu.Trigger.Props {
 }
 /** Opens the menu. Usually `render={<Button variant="ghost" icon={<Ellipsis />} aria-label="More actions" />}`. */
 export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-type PositionerProps = Pick<BaseMenu.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'>;
+type PositionerProps = Pick<BaseMenu.Positioner.Props, 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'>;
 export interface PopupProps extends BaseMenu.Popup.Props, PositionerProps {
     /** Where the menu is portaled to. Default `document.body`. */
     container?: BaseMenu.Portal.Props['container'];

package/dist/types/components/popover/classes.d.ts

@@ -0,0 +1,14 @@
+/** The classes of each part of a Popover. */
+export interface PopoverClasses {
+    /** The panel: a surface with `shadow-pop`, `popover-width` wide. */
+    popup: string;
+    /** The panel's heading. */
+    title: string;
+    /** One line under the title. */
+    description: string;
+}
+/**
+ * The classes that make an app's own floating panel look like a Popover, such
+ * as an emoji picker. See docs/custom-components.md.
+ */
+export declare function popoverClasses(): PopoverClasses;

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

@@ -6,7 +6,7 @@ export interface TriggerProps extends BasePopover.Trigger.Props {
 }
 /** Opens the popover. Usually `render={<Button />}`. */
 export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-type PositionerProps = Pick<BasePopover.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'>;
+type PositionerProps = Pick<BasePopover.Positioner.Props, 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'>;
 export interface PopupProps extends BasePopover.Popup.Props, PositionerProps {
     /** Where the popover is portaled to. Default `document.body`. */
     container?: BasePopover.Portal.Props['container'];

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

@@ -2,7 +2,7 @@ import { Select as BaseSelect } from '@base-ui/react/select';
 import { type ReactNode } from 'react';
 import type { IconElement, Size } from '../../types.js';
 export type RootProps<Value, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple> & {
-    size?: Size;
+    size?: Exclude<Size, 'xs'>;
 };
 /** Groups the trigger and the list, and holds the value. Pass `items` so `Value` shows labels, not raw values. */
 export declare function Root<Value, Multiple extends boolean | undefined = false>({ size, ...props }: RootProps<Value, Multiple>): import("react/jsx-runtime").JSX.Element;
@@ -14,7 +14,7 @@ export interface ValueProps extends BaseSelect.Value.Props {
 }
 /** The chosen item's label, or `placeholder` in `ink-muted`. */
 export declare const Value: import("react").ForwardRefExoticComponent<Omit<ValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-type PositionerProps = Pick<BaseSelect.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking' | 'alignItemWithTrigger'>;
+type PositionerProps = Pick<BaseSelect.Positioner.Props, 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking' | 'alignItemWithTrigger'>;
 export interface PopupProps extends BaseSelect.Popup.Props, PositionerProps {
     /** Where the list is portaled to. Default `document.body`. */
     container?: BaseSelect.Portal.Props['container'];

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

@@ -1,7 +1,7 @@
 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. */
+    /** 12, 14 or 16px. Defaults to the surrounding component's size, else md. */
     size?: Size;
     /** What is loading, for screen readers. */
     label?: string;

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

@@ -2,7 +2,7 @@ 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;
+    size?: Exclude<Size, 'xs'>;
 }
 /**
  * A `<table>` with rows separated by `line`. It sits in a box that scrolls

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

@@ -2,7 +2,7 @@ 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;
+    size?: Exclude<Size, 'xs'>;
 }
 /** 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>>;

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

@@ -1,9 +1,19 @@
 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;
+    size?: Exclude<Size, 'xs'>;
     /** Visible lines before it scrolls. Default 3. */
     rows?: number;
 }
+export interface TextareaClassesOptions {
+    size?: Exclude<Size, 'xs'>;
+}
+/**
+ * The classes that make an element look like a Textarea. Use them on an app's
+ * own multi-line field, such as a content-editable editor: focus shows the
+ * ring, and `aria-invalid="true"` or `aria-disabled="true"` show those states.
+ * See docs/custom-components.md.
+ */
+export declare function textareaClasses({ size }?: TextareaClassesOptions): string;
 /** 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/tooltip/index.d.ts

@@ -12,7 +12,7 @@ export interface TriggerProps extends BaseTooltip.Trigger.Props {
 }
 /** 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'>;
+type PositionerProps = Pick<BaseTooltip.Positioner.Props, 'side' | 'align' | '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;

package/dist/types/index.d.ts

@@ -1,7 +1,8 @@
 export type { IconElement, Size, Tone } from './types.js';
+export { themeTokens } from './theme-tokens.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 { Badge, badgeClasses, type BadgeClassesOptions, 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';
@@ -9,11 +10,13 @@ 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 { Input, inputClasses, type InputClassesOptions, 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 { menuClasses, type MenuClasses, type MenuClassesOptions } from './components/menu/classes.js';
 export * as Popover from './components/popover/index.js';
+export { popoverClasses, type PopoverClasses } from './components/popover/classes.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';
@@ -23,7 +26,7 @@ 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 { Textarea, textareaClasses, type TextareaClassesOptions, 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';

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

@@ -1,9 +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"];
+declare const positionerKeys: readonly ["side", "align", "collisionAvoidance", "collisionBoundary", "sticky", "anchor", "positionMethod", "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 declare function splitPositioner<Props extends object>(props: Props): readonly [Record<string, unknown>, Omit<Props, "anchor" | "side" | "align" | "collisionAvoidance" | "collisionBoundary" | "sticky" | "positionMethod" | "disableAnchorTracking" | "alignItemWithTrigger">];
 export {};

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

@@ -3,3 +3,5 @@ import type { Size } from '../types.js';
 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;
+/** useSize for components without xs: text entry, menus, tabs and tables. An xs inherited from a parent renders them at sm. */
+export declare function useRowSize(size?: Exclude<Size, 'xs'>): Exclude<Size, 'xs'>;

package/dist/types/theme-tokens.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The custom properties an app theme sets: the 26 color tokens in
+ * docs/color.md and the five shadow tokens in docs/depth.md. A token a theme
+ * leaves out keeps its Light value, so an app's tests can check its theme
+ * against this list. See docs/color.md#app-themes.
+ */
+export declare const themeTokens: readonly ["--mu-canvas", "--mu-surface", "--mu-well", "--mu-hover", "--mu-key", "--mu-key-hover", "--mu-key-sheen", "--mu-edge", "--mu-line", "--mu-overlay", "--mu-ink", "--mu-ink-muted", "--mu-primary", "--mu-primary-hover", "--mu-on-primary", "--mu-accent", "--mu-selection", "--mu-focus", "--mu-success", "--mu-success-soft", "--mu-warning", "--mu-warning-soft", "--mu-danger", "--mu-danger-key", "--mu-danger-soft", "--mu-on-danger", "--mu-shadow-track", "--mu-shadow-key", "--mu-shadow-raised", "--mu-shadow-pressed", "--mu-shadow-pop"];

package/dist/types/types.d.ts

@@ -1,6 +1,10 @@
 import type { ReactElement } from 'react';
-/** Control size. One value sets height, padding, text, icon size and radius together. */
-export type Size = 'sm' | 'md' | 'lg';
+/**
+ * Control size. One value sets height, padding, text, icon size and radius
+ * together. Only the components listed in docs/layout.md take xs; text entry,
+ * menus, tabs and tables take `Exclude<Size, 'xs'>`.
+ */
+export type Size = 'xs' | 'sm' | 'md';
 /** 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. */