@usememos/ui 26.10.0 → 26.10.2

package/llms.txt

@@ -0,0 +1,53 @@
+# Memos UI (@usememos/ui)
+
+> Memos UI is one calm, dense and tactile system for every product we build: memos (the app), the website, the web clipper and whatever comes next. It reads like ink on paper: pure grays, black ink for the one thing that matters, and no brand color competing with what people write. Controls have a little physical depth, so you can tell at a glance what holds a value and what you can press.
+
+React components on Base UI, CSS tokens and foundation styles. Load `@usememos/ui/tokens.css`, then `@usememos/ui/styles.css`; set `data-theme` to `light`, `dark` or `contrast` on the root element. Components are compound parts named after Base UI's anatomy (`Menu.Root`, `Menu.Trigger`, `Menu.Popup`, `Menu.Item`); icons are Lucide elements. Every docs page is in llms-full.txt next to this file.
+
+## Docs
+
+- [Principles and voice](https://github.com/usememos/ui/blob/main/docs/principles.md): The taste in six rules, and how interface text is written
+- [Color](https://github.com/usememos/ui/blob/main/docs/color.md): Color roles, every color token in Light, Dark and High contrast, and how themes are chosen
+- [Depth](https://github.com/usememos/ui/blob/main/docs/depth.md): The tactile model: recessed, key, raised, popup and flat; shadow tokens
+- [Typography](https://github.com/usememos/ui/blob/main/docs/typography.md): The system font, the type scale and text rules
+- [Size, spacing and layout](https://github.com/usememos/ui/blob/main/docs/layout.md): Control sizes, the 4px scale, radius, layout widths, breakpoints and layers
+- [Motion](https://github.com/usememos/ui/blob/main/docs/motion.md): Press, settle and fade timing, and reduced motion
+- [States](https://github.com/usememos/ui/blob/main/docs/states.md): Hover, pressed, loading, disabled, invalid and focus
+- [Icons](https://github.com/usememos/ui/blob/main/docs/icons.md): Lucide, sizes, fixed stroke widths and accessibility
+- [Components](https://github.com/usememos/ui/blob/main/docs/components/README.md): The 28 components, what was left out, and one page per component
+- [Patterns](https://github.com/usememos/ui/blob/main/docs/patterns.md): Page, form, entry, confirmation, loading, empty state and mobile
+- [Building on it](https://github.com/usememos/ui/blob/main/docs/building.md): Base UI, loading the CSS, scoping inside a host page, theme selection and API conventions
+
+## Components
+
+- [Button](https://github.com/usememos/ui/blob/main/docs/components/button.md): Starts an action.
+- [Toggle](https://github.com/usememos/ui/blob/main/docs/components/toggle.md): Turns one option on or off and stays pressed while on.
+- [ToggleGroup](https://github.com/usememos/ui/blob/main/docs/components/toggle-group.md): A row of related Toggles. With `multiple`: a toolbar of independent on/off toggles. Without: one choice among peers, the same control as Tabs without a panel.
+- [Menu](https://github.com/usememos/ui/blob/main/docs/components/menu.md): Lists actions for one thing, opened from a trigger.
+- [Link](https://github.com/usememos/ui/blob/main/docs/components/link.md): Goes somewhere.
+- [Field and Fieldset](https://github.com/usememos/ui/blob/main/docs/components/field.md): Field gives one control its label, description and error, wired for screen readers. Fieldset groups checkboxes, radios or switches under one legend.
+- [Input](https://github.com/usememos/ui/blob/main/docs/components/input.md): Takes one line of text.
+- [Textarea](https://github.com/usememos/ui/blob/main/docs/components/textarea.md): Takes a few lines of plain text.
+- [Select](https://github.com/usememos/ui/blob/main/docs/components/select.md): Picks one value from a short list.
+- [Combobox](https://github.com/usememos/ui/blob/main/docs/components/combobox.md): Picks one value from a long list by typing to filter it.
+- [Checkbox](https://github.com/usememos/ui/blob/main/docs/components/checkbox.md): Includes or excludes one item, saved with a form.
+- [Switch](https://github.com/usememos/ui/blob/main/docs/components/switch.md): Turns a setting on or off at once.
+- [RadioGroup](https://github.com/usememos/ui/blob/main/docs/components/radio-group.md): Picks exactly one option from a short list that is always visible.
+- [Tabs](https://github.com/usememos/ui/blob/main/docs/components/tabs.md): Switches between sections of the same page.
+- [Collapsible](https://github.com/usememos/ui/blob/main/docs/components/collapsible.md): Hides content behind one trigger until people ask for it.
+- [Dialog](https://github.com/usememos/ui/blob/main/docs/components/dialog.md): Dialog asks for a short form or a decision on top of the page. AlertDialog asks to confirm an action and closes only through its buttons.
+- [Popover](https://github.com/usememos/ui/blob/main/docs/components/popover.md): A small floating panel of controls next to its trigger, such as a share panel or a link editor.
+- [Tooltip](https://github.com/usememos/ui/blob/main/docs/components/tooltip.md): Names an icon-only control and shows its shortcut.
+- [Toast](https://github.com/usememos/ui/blob/main/docs/components/toast.md): Confirms that something happened, or that it failed, without blocking the page.
+- [Avatar](https://github.com/usememos/ui/blob/main/docs/components/avatar.md): Shows a person.
+- [Badge](https://github.com/usememos/ui/blob/main/docs/components/badge.md): Labels a thing with a tag or a status.
+- [Kbd](https://github.com/usememos/ui/blob/main/docs/components/kbd.md): Shows one keyboard key in help text, menus and empty states.
+- [Separator](https://github.com/usememos/ui/blob/main/docs/components/separator.md): A line between groups of content, horizontal or vertical.
+- [Spinner](https://github.com/usememos/ui/blob/main/docs/components/spinner.md): Shows that something short is in progress.
+- [Skeleton](https://github.com/usememos/ui/blob/main/docs/components/skeleton.md): Holds the place of content that is still loading.
+- [Table](https://github.com/usememos/ui/blob/main/docs/components/table.md): Lists things with the same attributes, such as tokens, users or webhooks.
+- [Prose](https://github.com/usememos/ui/blob/main/docs/components/prose.md): Styles rendered Markdown: the body of a note, a comment, a changelog, a page on the website.
+
+## Optional
+
+- [llms-full.txt](llms-full.txt): every page above in one file

package/package.json

@@ -1,172 +1,49 @@
 {
   "name": "@usememos/ui",
-  "version": "26.10.0",
-  "description": "Opinionated React UI kit with themeable CSS variables and compound APIs",
+  "version": "26.10.2",
+  "description": "The Memos UI design system: tokens, foundation styles and React components for usememos products.",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "base-ui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/usememos/ui.git",
+    "directory": "packages/ui"
+  },
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "style": "./dist/theme.css",
   "sideEffects": [
-    "./dist/theme.css"
+    "*.css"
   ],
+  "files": [
+    "dist",
+    "llms.txt",
+    "llms-full.txt"
+  ],
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./theme.css": "./dist/theme.css",
-    "./button": {
-      "import": {
-        "types": "./dist/button.d.ts",
-        "default": "./dist/button.js"
-      },
-      "require": {
-        "types": "./dist/button.d.cts",
-        "default": "./dist/button.cjs"
-      }
-    },
-    "./checkbox": {
-      "import": {
-        "types": "./dist/checkbox.d.ts",
-        "default": "./dist/checkbox.js"
-      },
-      "require": {
-        "types": "./dist/checkbox.d.cts",
-        "default": "./dist/checkbox.cjs"
-      }
-    },
-    "./input": {
-      "import": {
-        "types": "./dist/input.d.ts",
-        "default": "./dist/input.js"
-      },
-      "require": {
-        "types": "./dist/input.d.cts",
-        "default": "./dist/input.cjs"
-      }
-    },
-    "./dialog": {
-      "import": {
-        "types": "./dist/dialog.d.ts",
-        "default": "./dist/dialog.js"
-      },
-      "require": {
-        "types": "./dist/dialog.d.cts",
-        "default": "./dist/dialog.cjs"
-      }
-    },
-    "./dropdown-menu": {
-      "import": {
-        "types": "./dist/dropdown-menu.d.ts",
-        "default": "./dist/dropdown-menu.js"
-      },
-      "require": {
-        "types": "./dist/dropdown-menu.d.cts",
-        "default": "./dist/dropdown-menu.cjs"
-      }
-    },
-    "./popover": {
-      "import": {
-        "types": "./dist/popover.d.ts",
-        "default": "./dist/popover.js"
-      },
-      "require": {
-        "types": "./dist/popover.d.cts",
-        "default": "./dist/popover.cjs"
-      }
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/index.js"
     },
-    "./radio-group": {
-      "import": {
-        "types": "./dist/radio-group.d.ts",
-        "default": "./dist/radio-group.js"
-      },
-      "require": {
-        "types": "./dist/radio-group.d.cts",
-        "default": "./dist/radio-group.cjs"
-      }
-    },
-    "./select": {
-      "import": {
-        "types": "./dist/select.d.ts",
-        "default": "./dist/select.js"
-      },
-      "require": {
-        "types": "./dist/select.d.cts",
-        "default": "./dist/select.cjs"
-      }
-    },
-    "./separator": {
-      "import": {
-        "types": "./dist/separator.d.ts",
-        "default": "./dist/separator.js"
-      },
-      "require": {
-        "types": "./dist/separator.d.cts",
-        "default": "./dist/separator.cjs"
-      }
-    },
-    "./switch": {
-      "import": {
-        "types": "./dist/switch.d.ts",
-        "default": "./dist/switch.js"
-      },
-      "require": {
-        "types": "./dist/switch.d.cts",
-        "default": "./dist/switch.cjs"
-      }
-    },
-    "./tooltip": {
-      "import": {
-        "types": "./dist/tooltip.d.ts",
-        "default": "./dist/tooltip.js"
-      },
-      "require": {
-        "types": "./dist/tooltip.d.cts",
-        "default": "./dist/tooltip.cjs"
-      }
-    }
+    "./tokens.css": "./dist/tokens.css",
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "build": "pnpm exec tsup --config tsup.config.ts && mkdir -p dist && cp ../theme/src/theme.css dist/theme.css",
-    "typecheck": "tsc --noEmit",
-    "check:package": "pnpm exec publint . && pnpm exec attw --pack --profile node16 --exclude-entrypoints ./theme.css ."
+    "build": "node scripts/build.mjs",
+    "prepack": "npm run build"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "lucide-react": ">=1.0.0",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
-    "clsx": "^2.0.0",
-    "lucide-react": "^0.523.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "tsup": "^8.3.5",
-    "typescript": "^6.0.2"
-  },
-  "keywords": [
-    "react",
-    "ui",
-    "components",
-    "design-system",
-    "theme"
-  ],
-  "repository": "https://github.com/usememos/ui",
-  "homepage": "https://github.com/usememos/ui",
-  "bugs": {
-    "url": "https://github.com/usememos/ui/issues"
-  },
-  "license": "MIT"
+    "@base-ui/react": "1.9.0"
+  }
 }

package/dist/button.cjs

@@ -1,74 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/button.ts
-var button_exports = {};
-__export(button_exports, {
-  Button: () => Button
-});
-module.exports = __toCommonJS(button_exports);
-
-// src/foundation/button.tsx
-var React = __toESM(require("react"), 1);
-
-// src/shared/cx.ts
-var import_clsx = require("clsx");
-function cx(...values) {
-  return (0, import_clsx.clsx)(values);
-}
-
-// src/foundation/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Button = React.forwardRef(
-  ({
-    className,
-    variant = "default",
-    size = "md",
-    disabled,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        ref,
-        className: cx("mui-button", className),
-        "data-size": size,
-        "data-variant": variant,
-        "data-disabled": disabled ? "" : void 0,
-        disabled,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Button
-});

package/dist/button.d.cts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { C as ControlSize } from './control-size-Bz2gyuyO.cjs';
-
-type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive" | "link";
-type ButtonSize = ControlSize | "icon";
-type ButtonProps = React.ComponentPropsWithoutRef<"button"> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-};
-declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-} & React.RefAttributes<HTMLButtonElement>>;
-
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/button.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { C as ControlSize } from './control-size-Bz2gyuyO.js';
-
-type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive" | "link";
-type ButtonSize = ControlSize | "icon";
-type ButtonProps = React.ComponentPropsWithoutRef<"button"> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-};
-declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-} & React.RefAttributes<HTMLButtonElement>>;
-
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/button.js

@@ -1,7 +0,0 @@
-import {
-  Button
-} from "./chunk-F6GH4X7N.js";
-import "./chunk-6TNEFWVX.js";
-export {
-  Button
-};

package/dist/checkbox.cjs

@@ -1,98 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/checkbox.ts
-var checkbox_exports = {};
-__export(checkbox_exports, {
-  Checkbox: () => Checkbox2
-});
-module.exports = __toCommonJS(checkbox_exports);
-
-// src/foundation/checkbox.tsx
-var import_lucide_react = require("lucide-react");
-
-// ../primitives/src/foundation/checkbox.tsx
-var import_checkbox = require("@base-ui/react/checkbox");
-var React = __toESM(require("react"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var Root = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_checkbox.Checkbox.Root,
-    {
-      ref,
-      "data-scope": "checkbox",
-      "data-part": "root",
-      ...props
-    }
-  );
-});
-var Indicator = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_checkbox.Checkbox.Indicator,
-    {
-      ref,
-      "data-scope": "checkbox",
-      "data-part": "indicator",
-      ...props
-    }
-  );
-});
-Root.displayName = "Checkbox.Root";
-Indicator.displayName = "Checkbox.Indicator";
-var Checkbox = {
-  Root,
-  Indicator
-};
-
-// src/shared/cx.ts
-var import_clsx = require("clsx");
-function cx(...values) {
-  return (0, import_clsx.clsx)(values);
-}
-
-// src/foundation/checkbox.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Checkbox2({ className, children, size = "md", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    Checkbox.Root,
-    {
-      className: cx("mui-checkbox", className),
-      "data-size": size,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Checkbox.Indicator, { className: "mui-checkbox__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.CheckIcon, { size: 10, strokeWidth: 3 }) }),
-        children
-      ]
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Checkbox
-});

package/dist/checkbox.d.cts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as _base_ui_react from '@base-ui/react';
-import { C as ControlSize } from './control-size-Bz2gyuyO.cjs';
-
-declare const Checkbox$1: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-};
-
-type CheckboxProps = React.ComponentPropsWithoutRef<typeof Checkbox$1.Root> & {
-    size?: ControlSize;
-};
-declare function Checkbox({ className, children, size, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
-
-export { Checkbox, type CheckboxProps };

package/dist/checkbox.d.ts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as _base_ui_react from '@base-ui/react';
-import { C as ControlSize } from './control-size-Bz2gyuyO.js';
-
-declare const Checkbox$1: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-};
-
-type CheckboxProps = React.ComponentPropsWithoutRef<typeof Checkbox$1.Root> & {
-    size?: ControlSize;
-};
-declare function Checkbox({ className, children, size, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
-
-export { Checkbox, type CheckboxProps };

package/dist/checkbox.js

@@ -1,7 +0,0 @@
-import {
-  Checkbox
-} from "./chunk-5GQEJQKE.js";
-import "./chunk-6TNEFWVX.js";
-export {
-  Checkbox
-};