@usememos/ui 26.11.16 → 26.11.18

package/dist/theme-tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/theme-tokens.ts"],
-  "sourcesContent": ["/**\n * The custom properties an app theme sets: the 28 color tokens in\n * docs/color.md. A token a theme leaves out keeps its Light value, so an app's tests can check its theme\n * against this list. See docs/color.md#app-themes.\n */\nexport const themeTokens = [\n  '--mu-canvas',\n  '--mu-surface',\n  '--mu-well',\n  '--mu-hover',\n  '--mu-key',\n  '--mu-key-hover',\n  '--mu-edge',\n  '--mu-control-edge',\n  '--mu-line',\n  '--mu-overlay',\n  '--mu-text',\n  '--mu-text-secondary',\n  '--mu-text-disabled',\n  '--mu-primary',\n  '--mu-primary-hover',\n  '--mu-on-primary',\n  '--mu-accent',\n  '--mu-selection',\n  '--mu-focus',\n  '--mu-focus-edge',\n  '--mu-success',\n  '--mu-success-soft',\n  '--mu-warning',\n  '--mu-warning-soft',\n  '--mu-danger',\n  '--mu-danger-key',\n  '--mu-danger-soft',\n  '--mu-on-danger',\n] as const;\n"],
-  "mappings": ";AAKO,IAAMA,EAAc,CACzB,cACA,eACA,YACA,aACA,WACA,iBACA,YACA,oBACA,YACA,eACA,YACA,sBACA,qBACA,eACA,qBACA,kBACA,cACA,iBACA,aACA,kBACA,eACA,oBACA,eACA,oBACA,cACA,kBACA,mBACA,gBACF",
+  "sourcesContent": ["/**\n * The custom properties an app theme sets: the 29 color tokens in\n * docs/color.md. A token a theme leaves out keeps its Light value, so an app's tests can check its theme\n * against this list. See docs/color.md#app-themes.\n */\nexport const themeTokens = [\n  '--mu-canvas',\n  '--mu-surface',\n  '--mu-well',\n  '--mu-hover',\n  '--mu-selected',\n  '--mu-key',\n  '--mu-key-hover',\n  '--mu-edge',\n  '--mu-control-edge',\n  '--mu-line',\n  '--mu-overlay',\n  '--mu-text',\n  '--mu-text-secondary',\n  '--mu-text-disabled',\n  '--mu-primary',\n  '--mu-primary-hover',\n  '--mu-on-primary',\n  '--mu-accent',\n  '--mu-selection',\n  '--mu-focus',\n  '--mu-focus-edge',\n  '--mu-success',\n  '--mu-success-soft',\n  '--mu-warning',\n  '--mu-warning-soft',\n  '--mu-danger',\n  '--mu-danger-key',\n  '--mu-danger-soft',\n  '--mu-on-danger',\n] as const;\n"],
+  "mappings": ";AAKO,IAAMA,EAAc,CACzB,cACA,eACA,YACA,aACA,gBACA,WACA,iBACA,YACA,oBACA,YACA,eACA,YACA,sBACA,qBACA,eACA,qBACA,kBACA,cACA,iBACA,aACA,kBACA,eACA,oBACA,eACA,oBACA,cACA,kBACA,mBACA,gBACF",
   "names": ["themeTokens"]
 }

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-text)}[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-text);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: 80ms;--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/collapsible/index.d.ts

@@ -7,7 +7,7 @@ export interface RootProps extends BaseCollapsible.Root.Props {
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface TriggerProps extends BaseCollapsible.Trigger.Props {
 }
-/** A ghost key with a chevron at the end that turns while the panel is open. */
+/** A ghost key with a chevron at the end that points up while the panel is open. */
 export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export interface PanelProps extends BaseCollapsible.Panel.Props {
 }

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

@@ -25,8 +25,8 @@ export interface PopupProps extends BaseSelect.Popup.Props, PositionerProps {
     container?: BaseSelect.Portal.Props['container'];
 }
 /**
- * The list of items. By default it opens over the trigger with the chosen
- * item on top of the value; `alignItemWithTrigger={false}` opens it below.
+ * The list of items. By default it opens below the trigger, aligned to its
+ * start edge. `alignItemWithTrigger` can opt into value-aligned positioning.
  */
 export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface ItemProps extends BaseSelect.Item.Props {

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

@@ -8,7 +8,7 @@ export interface RootProps extends BaseTabs.Root.Props {
 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. */
+/** The well that holds the tabs, with the selected 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;

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/components/toggle-group/index.d.ts

@@ -9,7 +9,7 @@ export interface ToggleGroupProps extends BaseToggleGroup.Props {
 }
 /**
  * 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,
+ * toggles. Without it, one choice among peers: a well with one selected key,
  * the same control as Tabs.
  */
 export declare const ToggleGroup: import("react").ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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. */