@usememos/ui 26.11.17 → 26.11.19

package/dist/tokens.css

@@ -1 +1 @@
-@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: oklch(.982 .004 95);--mu-surface: #ffffff;--mu-well: oklch(.934 .008 95);--mu-hover: oklch(.95 .006 95);--mu-key: #ffffff;--mu-key-hover: oklch(.982 .004 95);--mu-edge: oklch(.858 .006 95);--mu-control-edge: #909090;--mu-line: oklch(.919 .004 95);--mu-overlay: rgba(0,0,0,.32);--mu-text: #1a1a1a;--mu-text-secondary: #5e5e5e;--mu-text-disabled: #666666;--mu-primary: #1a1a1a;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-edge)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-edge: #343434;--mu-control-edge: #777777;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-text: #ededed;--mu-text-secondary: #adadad;--mu-text-disabled: #9e9e9e;--mu-primary: #e6e6e6;--mu-primary-hover: #ffffff;--mu-on-primary: #0f0f0f;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-edge);color-scheme:dark}:where(:root,:host,.mu-root){--mu-space-1: 4px;--mu-space-2: 8px;--mu-space-3: 12px;--mu-space-4: 16px;--mu-space-5: 20px;--mu-space-6: 24px;--mu-space-8: 32px;--mu-space-12: 48px;--mu-space-16: 64px;--mu-radius-xs: 2px;--mu-radius-sm: 4px;--mu-radius-md: 6px;--mu-radius-lg: 8px;--mu-radius-xl: 12px;--mu-radius-2xl: 16px;--mu-radius-full: 9999px;--mu-control-xs: 20px;--mu-control-sm: 24px;--mu-control-md: 32px;--mu-control-compact: 28px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-edge-width: 1px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-icon-stroke: 1.25px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 160px;--mu-menu-max-width: 280px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-drawer-width: 320px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 0ms;--mu-duration-settle: .15s;--mu-duration-fade: .1s;--mu-duration-spin: .8s;--mu-duration-shimmer: 1.4s;--mu-ease-settle: cubic-bezier(.2, .9, .3, 1);--mu-ease-out: cubic-bezier(.2, 0, 0, 1);--mu-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}@media(forced-colors:active){:where(:root,:host,.mu-root),[data-theme]{--mu-focus-edge-width: 2px;--mu-control-edge: ButtonText;--mu-text-disabled: GrayText;--mu-focus: Highlight;--mu-focus-edge: Highlight;--mu-on-primary: Highlight;--mu-on-danger: Highlight;--mu-key: ButtonText}}}
+@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: oklch(.982 .004 95);--mu-surface: #ffffff;--mu-well: oklch(.934 .008 95);--mu-hover: oklch(.95 .006 95);--mu-selected: oklch(.919 .004 95);--mu-key: #ffffff;--mu-key-hover: oklch(.982 .004 95);--mu-edge: oklch(.858 .006 95);--mu-control-edge: #909090;--mu-line: oklch(.919 .004 95);--mu-overlay: rgba(0,0,0,.32);--mu-text: #1a1a1a;--mu-text-secondary: #5e5e5e;--mu-text-disabled: #666666;--mu-primary: #1a1a1a;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-edge)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-selected: #343434;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-edge: #343434;--mu-control-edge: #777777;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-text: #ededed;--mu-text-secondary: #adadad;--mu-text-disabled: #9e9e9e;--mu-primary: #e6e6e6;--mu-primary-hover: #ffffff;--mu-on-primary: #0f0f0f;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-edge);color-scheme:dark}:where(:root,:host,.mu-root){--mu-space-1: 4px;--mu-space-2: 8px;--mu-space-3: 12px;--mu-space-4: 16px;--mu-space-5: 20px;--mu-space-6: 24px;--mu-space-8: 32px;--mu-space-12: 48px;--mu-space-16: 64px;--mu-radius-xs: 2px;--mu-radius-sm: 4px;--mu-radius-md: 6px;--mu-radius-lg: 8px;--mu-radius-xl: 12px;--mu-radius-2xl: 16px;--mu-radius-full: 9999px;--mu-control-xs: 20px;--mu-control-sm: 24px;--mu-control-md: 32px;--mu-control-compact: 28px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-edge-width: 1px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-icon-stroke: 1.25px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 160px;--mu-menu-max-width: 280px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-drawer-width: 320px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 0ms;--mu-duration-settle: .15s;--mu-duration-fade: .1s;--mu-duration-spin: .8s;--mu-duration-shimmer: 1.4s;--mu-ease-settle: cubic-bezier(.2, .9, .3, 1);--mu-ease-out: cubic-bezier(.2, 0, 0, 1);--mu-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}@media(forced-colors:active){:where(:root,:host,.mu-root),[data-theme]{--mu-focus-edge-width: 2px;--mu-control-edge: ButtonText;--mu-text-disabled: GrayText;--mu-focus: Highlight;--mu-focus-edge: Highlight;--mu-on-primary: Highlight;--mu-on-danger: Highlight;--mu-key: ButtonText}}}

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

@@ -1,11 +1,12 @@
 import { Button as BaseButton } from '@base-ui/react/button';
 import { type ReactNode } from 'react';
-import type { IconElement, Size } from '../../types.js';
+import type { ControlShape, IconElement, Size } from '../../types.js';
 export type ButtonVariant = 'primary' | 'neutral' | 'ghost' | 'danger';
 export interface ButtonProps extends BaseButton.Props {
     /** `primary` for the one action a view exists for, `neutral` for the rest, `ghost` in toolbars, `danger` to confirm a destructive action. */
     variant?: ButtonVariant;
     size?: Size;
+    shape?: ControlShape;
     /** 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. */
@@ -19,6 +20,7 @@ export interface ButtonProps extends BaseButton.Props {
 export interface ButtonClassesOptions {
     variant?: ButtonVariant;
     size?: Size;
+    shape?: ControlShape;
     /** A square button with only an icon. */
     iconOnly?: boolean;
 }
@@ -26,6 +28,6 @@ export interface ButtonClassesOptions {
  * The classes that make an element look like a Button. Use them on a link
  * that should look like an action: `<a className={buttonClasses({ variant: 'primary' })} href="/start">`.
  */
-export declare function buttonClasses({ variant, size, iconOnly }?: ButtonClassesOptions): string;
+export declare function buttonClasses({ variant, size, shape, iconOnly }?: ButtonClassesOptions): string;
 /** Starts an action. A flat control with shared pressed feedback. */
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

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

@@ -14,7 +14,7 @@ export interface PopupProps extends BasePopover.Popup.Props, PositionerProps {
     /**
      * `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`.
+     * 6px outer padding and no gap, for rows with `menuClasses().item`.
      */
     variant?: PopoverVariant;
 }

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

@@ -1,8 +1,12 @@
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 import { type ReactNode } from 'react';
-import type { IconElement, Size } from '../../types.js';
+import type { ControlShape, IconElement, Size } from '../../types.js';
+export type ToggleVariant = 'ghost' | 'soft';
 export interface ToggleProps extends BaseToggle.Props {
     size?: Size;
+    /** `ghost` (default) is flat when off; `soft` keeps a quiet fill and a stronger saved-state fill. */
+    variant?: ToggleVariant;
+    shape?: ControlShape;
     /** A Lucide element before the label. With no children the toggle is square and needs `aria-label`. */
     icon?: IconElement;
     children?: ReactNode;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { IconElement, Size, Tone } from './types.js';
+export type { ControlShape, IconElement, Size, Tone } from './types.js';
 export { themeTokens } from './theme-tokens.js';
 export { offLadderSpacing, spacingSteps } from './spacing.js';
 export * as AlertDialog from './components/dialog/alert-dialog.js';
@@ -33,6 +33,6 @@ export * as Table from './components/table/index.js';
 export * as Tabs from './components/tabs/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 { Toggle, type ToggleProps, type ToggleVariant } 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/theme-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
- * The custom properties an app theme sets: the 28 color tokens in
+ * The custom properties an app theme sets: the 29 color tokens in
  * docs/color.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-edge", "--mu-control-edge", "--mu-line", "--mu-overlay", "--mu-text", "--mu-text-secondary", "--mu-text-disabled", "--mu-primary", "--mu-primary-hover", "--mu-on-primary", "--mu-accent", "--mu-selection", "--mu-focus", "--mu-focus-edge", "--mu-success", "--mu-success-soft", "--mu-warning", "--mu-warning-soft", "--mu-danger", "--mu-danger-key", "--mu-danger-soft", "--mu-on-danger"];
+export declare const themeTokens: readonly ["--mu-canvas", "--mu-surface", "--mu-well", "--mu-hover", "--mu-selected", "--mu-key", "--mu-key-hover", "--mu-edge", "--mu-control-edge", "--mu-line", "--mu-overlay", "--mu-text", "--mu-text-secondary", "--mu-text-disabled", "--mu-primary", "--mu-primary-hover", "--mu-on-primary", "--mu-accent", "--mu-selection", "--mu-focus", "--mu-focus-edge", "--mu-success", "--mu-success-soft", "--mu-warning", "--mu-warning-soft", "--mu-danger", "--mu-danger-key", "--mu-danger-soft", "--mu-on-danger"];

package/dist/types/types.d.ts

@@ -5,6 +5,8 @@ import type { ReactElement } from 'react';
  * menus, tabs and tables take `Exclude<Size, 'xs'>`.
  */
 export type Size = 'xs' | 'sm' | 'md';
+/** The usual size-row corners, or a pill with equal horizontal padding. */
+export type ControlShape = 'default' | 'pill';
 /** 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. */