@usememos/ui 26.11.1 → 26.11.3

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

@@ -8,6 +8,8 @@ export interface ButtonProps extends BaseButton.Props {
     size?: Size;
     /** A Lucide element, before the label. With no children the button is square and needs `aria-label`. */
     icon?: IconElement;
+    /** A Lucide element after the label, such as a chevron or an arrow that says where the action leads. */
+    iconEnd?: IconElement;
     /** Keeps the width, shows a Spinner and ignores presses. */
     loading?: boolean;
     /** The accessible name while loading, such as "Saving". */

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

@@ -47,6 +47,14 @@ export interface ItemProps extends BaseCombobox.Item.Props {
 }
 /** One option, with a check at the end when chosen. */
 export declare const Item: import("react").ForwardRefExoticComponent<Omit<ItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface RowProps extends BaseCombobox.Row.Props {
+}
+/**
+ * One row of a grid, with `grid` on the root: its items are square cells for
+ * an icon or an emoji, and arrow keys move across rows and columns. Split the
+ * filtered items into rows of a fixed count.
+ */
+export declare const Row: import("react").ForwardRefExoticComponent<Omit<RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface EmptyProps extends BaseCombobox.Empty.Props {
 }
 /** What shows when nothing matches, such as "No tags found". Always mounted, so screen readers hear it. */

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

@@ -1,8 +1,8 @@
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { type PopupProps as SharedPopupProps } from './parts.js';
+import { type PopupProps as SharedPopupProps, type VariantProps } from './parts.js';
 export type { CloseProps, DescriptionProps, FooterProps, RootProps, TitleProps, TriggerProps } from './parts.js';
-export interface PopupProps extends SharedPopupProps {
+export interface PopupProps extends SharedPopupProps, VariantProps {
     /** The accessible name of the X button at the top right. Default "Close". */
     closeLabel?: string;
 }
@@ -10,7 +10,7 @@ export interface PopupProps extends SharedPopupProps {
 export declare const Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element;
 /** Opens the dialog. Usually `render={<Button />}`. */
 export declare const Trigger: ForwardRefExoticComponent<Omit<import("./parts.js").TriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
-/** The panel over a dimmed backdrop, with an X at the top right. A sheet from the bottom below `breakpoint-sm`. */
+/** The panel over a dimmed backdrop, with an X at the top right; `variant="bare"` drops the padding and the X. A sheet from the bottom below `breakpoint-sm`. */
 export declare const Popup: ForwardRefExoticComponent<PopupProps & RefAttributes<HTMLDivElement>>;
 /** The dialog's heading, an `<h2>`: a question or a task. */
 export declare const Title: ForwardRefExoticComponent<Omit<import("./parts.js").TitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;

package/dist/types/components/dialog/parts.d.ts

@@ -9,6 +9,19 @@ export interface PopupProps extends BaseDialog.Popup.Props {
     /** Below `breakpoint-sm` the dialog becomes a sheet from the bottom. `false` keeps it centered. Default true. */
     sheet?: boolean;
 }
+export interface VariantProps {
+    /**
+     * `panel` (default) pads the content `space-5`, stacks it `space-4` apart and
+     * adds the X. `bare` keeps the surface, radius and shadow but has no padding,
+     * gap or X: the content runs edge to edge, for a search palette or an image.
+     */
+    variant?: 'panel' | 'bare';
+    /**
+     * Covers the whole screen with square corners, at every width, instead of
+     * a centered panel or a sheet. With `bare`, for an image viewer.
+     */
+    fullScreen?: boolean;
+}
 export interface TitleProps extends BaseDialog.Title.Props {
 }
 export interface DescriptionProps extends BaseDialog.Description.Props {
@@ -24,7 +37,7 @@ export interface FooterProps extends HTMLAttributes<HTMLDivElement> {
 export declare function createDialogParts(Base: typeof BaseDialog, name: 'dialog' | 'alert-dialog', closeButton: boolean): {
     Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element;
     Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps & {
+    Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps & VariantProps & {
         closeLabel?: string;
     }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

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

@@ -0,0 +1,44 @@
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+/** The edge a drawer slides from. `start` and `end` follow the text direction. */
+export type DrawerSide = 'start' | 'end' | 'bottom';
+export interface RootProps extends Omit<BaseDrawer.Root.Props, 'swipeDirection' | 'snapPoints' | 'defaultSnapPoint' | 'snapPoint' | 'onSnapPointChange' | 'snapToSequentialPoints'> {
+    /** The edge it slides from, and swipes back to. `start` is the left edge in a left-to-right page. Default `end`. */
+    side?: DrawerSide;
+}
+/** Groups a trigger and its drawer. Controlled with `open` and `onOpenChange`. */
+export declare function Root({ side, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export interface TriggerProps extends BaseDrawer.Trigger.Props {
+}
+/** Opens the drawer. Usually `render={<Button />}`. */
+export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export interface PopupProps extends BaseDrawer.Popup.Props {
+    /** Where the drawer is portaled to. Default `document.body`. */
+    container?: BaseDrawer.Portal.Props['container'];
+    /**
+     * `panel` (default) pads the content `space-5`, stacks it `space-4` apart
+     * and adds the X. `bare` has no padding, gap or X, for content that lays
+     * itself out, such as an app's navigation sidebar: its content is exactly
+     * the drawer's height, so the app's own region scrolls, and its Close is
+     * for screen readers only.
+     */
+    variant?: 'panel' | 'bare';
+    /** The accessible name of the X, or of the screen-reader Close in `bare`. Default "Close". */
+    closeLabel?: string;
+}
+/**
+ * The panel against one edge of the screen, over a dimmed backdrop, full
+ * height (or full width from the bottom). Swipe it back to its edge to close.
+ */
+export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface TitleProps extends BaseDrawer.Title.Props {
+}
+/** The drawer's heading, an `<h2>`. Names it for screen readers; hide it with `mu-visually-hidden` when the content names itself. */
+export declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface DescriptionProps extends BaseDrawer.Description.Props {
+}
+/** A `<p>` under the title. */
+export declare const Description: import("react").ForwardRefExoticComponent<Omit<DescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export interface CloseProps extends BaseDrawer.Close.Props {
+}
+/** Closes the drawer, such as a link in a navigation drawer. Usually `render={<Button />}`. */
+export declare const Close: import("react").ForwardRefExoticComponent<Omit<CloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -3,6 +3,12 @@ import type { Size } from '../../types.js';
 export interface RootProps extends BaseField.Root.Props {
     /** The size of the control inside, passed on to it. */
     size?: Exclude<Size, 'xs'>;
+    /**
+     * `vertical` (default) stacks the label over the control. `horizontal` puts
+     * the label and description first and the control at the end of the row,
+     * as in a settings row with a Switch or Select.
+     */
+    orientation?: 'vertical' | 'horizontal';
 }
 /** 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/form/index.d.ts

@@ -0,0 +1,28 @@
+import { Form as BaseForm } from '@base-ui/react/form';
+import { useRender } from '@base-ui/react/use-render';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface RootProps extends BaseForm.Props {
+    /**
+     * Draws the form in a box, as a List: a `line` edge, `radius-lg` corners and
+     * a `surface` fill, with the Footer as a `canvas` bar under a `line`. For a
+     * small form among Lists on a settings page.
+     */
+    bordered?: boolean;
+}
+/**
+ * A `<form>` on Base UI's Form, which shows each Field's errors. Its children
+ * stack `space-4` apart. A Title inside names it.
+ */
+export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
+export interface TitleProps extends useRender.ComponentProps<'h2'> {
+}
+/** The form's heading, an `<h2>` in `label` style that names the form. Use `render` for another level. */
+export declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface DescriptionProps extends ComponentPropsWithoutRef<'p'> {
+}
+/** One line under the title, in `caption` and `ink-muted`. */
+export declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export interface FooterProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** The form's buttons, right-aligned: a ghost Cancel, then the primary. In a bordered form, a `canvas` bar along the bottom. */
+export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,26 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type ComponentPropsWithoutRef } from 'react';
+import type { Size } from '../../types.js';
+export interface RootProps extends ComponentPropsWithoutRef<'ul'> {
+    /** `sm` for dense lists. Sets the rows' padding and the size of the controls inside. */
+    size?: Exclude<Size, 'xs'>;
+}
+/**
+ * A boxed list of records or settings rows: a `<ul>` with a `line` edge and
+ * `radius-lg`, its rows divided by `line`. Name it with `aria-label` or
+ * `aria-labelledby` when a heading above doesn't.
+ */
+export declare const Root: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLUListElement>>;
+export interface ItemProps extends ComponentPropsWithoutRef<'li'> {
+}
+/** One row, an `<li>`: a horizontal Field, a record's text with its actions at the end, or one ItemButton. */
+export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export interface ItemButtonProps extends useRender.ComponentProps<'button'> {
+}
+/**
+ * Makes a whole row one control: a `<button type="button">` that fills its
+ * Item, edge to edge, and highlights with `hover`. Put it alone in a
+ * `List.Item`. For a row that opens a page, render a link:
+ * `render={<a href="/spaces/work" />}`.
+ */
+export declare const ItemButton: import("react").ForwardRefExoticComponent<Omit<ItemButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

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

@@ -13,6 +13,10 @@ export interface MenuClasses {
     dangerItem: string;
     /** The text of a row, which truncates. */
     label: string;
+    /** Stacks a row's label over its description. */
+    text: string;
+    /** A line of `ink-muted` text under the label. */
+    description: string;
     /** A keyboard shortcut at the end of a row. */
     shortcut: string;
     /** A line between groups of rows. */

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

@@ -23,6 +23,8 @@ interface RowProps {
     icon?: IconElement;
     /** A keyboard shortcut at the end of the row, such as "⌘ D". */
     shortcut?: ReactNode;
+    /** A line of `ink-muted` text under the label, which makes the row two lines tall. Screen readers read it as the item's description. */
+    description?: ReactNode;
     children?: ReactNode;
 }
 export interface ItemProps extends BaseMenu.Item.Props, RowProps {

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

@@ -1,3 +1,8 @@
+export type PopoverVariant = 'panel' | 'list';
+export interface PopoverClassesOptions {
+    /** `panel` pads its content and stacks it `space-3` apart; `list` holds rows with a Menu's `space-1` padding and no gap. */
+    variant?: PopoverVariant;
+}
 /** The classes of each part of a Popover. */
 export interface PopoverClasses {
     /** The panel: a surface with `shadow-pop`, `popover-width` wide. */
@@ -11,4 +16,4 @@ export interface PopoverClasses {
  * 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;
+export declare function popoverClasses({ variant }?: PopoverClassesOptions): PopoverClasses;

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

@@ -1,4 +1,5 @@
 import { Popover as BasePopover } from '@base-ui/react/popover';
+import { type PopoverVariant } from './classes.js';
 export type RootProps = BasePopover.Root.Props;
 /** Groups a trigger and its popover. */
 export declare const Root: typeof BasePopover.Root;
@@ -10,6 +11,12 @@ type PositionerProps = Pick<BasePopover.Positioner.Props, 'side' | 'align' | 'co
 export interface PopupProps extends BasePopover.Popup.Props, PositionerProps {
     /** Where the popover is portaled to. Default `document.body`. */
     container?: BasePopover.Portal.Props['container'];
+    /**
+     * `panel` (default) pads its content `space-4` and stacks it `space-3` apart.
+     * `list` holds rows, such as an account menu with a header: a Menu's
+     * `space-1` padding and no gap, for rows with `menuClasses().item`.
+     */
+    variant?: PopoverVariant;
 }
 /** The panel: a surface with `shadow-pop`, `popover-width` wide. */
 export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -7,6 +7,11 @@ export type RootProps<Value, Multiple extends boolean | undefined = false> = Bas
 /** 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;
 export interface TriggerProps extends BaseSelect.Trigger.Props {
+    /**
+     * `neutral` (default) is a raised key, for a value in a form. `ghost` is a
+     * flat row that fills with `hover`, for a switcher in a sidebar or toolbar.
+     */
+    variant?: 'neutral' | 'ghost';
 }
 /** A neutral key that shows the value, with a chevron at the end. Holds `Value`. */
 export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -3,6 +3,8 @@ import type { Size } from '../../types.js';
 export interface RootProps extends ComponentPropsWithoutRef<'table'> {
     /** `sm` for dense admin lists. Sets row height and cell text. */
     size?: Exclude<Size, 'xs'>;
+    /** Draws the table in a box: a `line` edge, `radius-lg` corners and a `surface` fill, as a List. */
+    bordered?: boolean;
 }
 /**
  * A `<table>` with rows separated by `line`. It sits in a box that scrolls
@@ -36,6 +38,14 @@ export interface CellProps extends ComponentPropsWithoutRef<'td'> {
 }
 /** A data cell, `<td>`. */
 export declare const Cell: import("react").ForwardRefExoticComponent<CellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export interface ActionsProps extends ComponentPropsWithoutRef<'div'> {
+}
+/**
+ * Two or more row actions side by side in one Cell, such as Edit and Delete
+ * Buttons. Like a single Button in a Cell, the group overlaps the cell's
+ * padding, so the row keeps its height.
+ */
+export declare const Actions: import("react").ForwardRefExoticComponent<ActionsProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface CaptionProps extends ComponentPropsWithoutRef<'caption'> {
 }
 /** Names the table, under it in `caption` style. Screen readers read it as the table's name. */

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

@@ -15,5 +15,5 @@ export interface ViewportProps extends BaseToast.Viewport.Props {
     /** 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. */
+/** Shows the toasts: top-right, or across the top 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-group/index.d.ts

@@ -3,6 +3,8 @@ import { type ReactNode } from 'react';
 import type { Size } from '../../types.js';
 export interface ToggleGroupProps extends BaseToggleGroup.Props {
     size?: Size;
+    /** Fills its container's width and gives every Toggle an equal share. Icon-only Toggles keep their size. */
+    fullWidth?: boolean;
     children?: ReactNode;
 }
 /**

package/dist/types/index.d.ts

@@ -8,15 +8,19 @@ 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 Drawer from './components/drawer/index.js';
+export type { DrawerSide } from './components/drawer/index.js';
 export * as Field from './components/field/index.js';
 export * as Fieldset from './components/field/fieldset.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 List from './components/list/index.js';
+export * as Form from './components/form/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 { popoverClasses, type PopoverClasses, type PopoverClassesOptions, type PopoverVariant } 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';