@usememos/ui 26.10.0

package/README.md

@@ -0,0 +1,117 @@
+# @usememos/ui
+
+Opinionated React UI kit with explicit CSS delivery and compound component APIs.
+
+## Install
+
+```bash
+pnpm add @usememos/ui react react-dom
+```
+
+Import the packaged theme once:
+
+```tsx
+import "@usememos/ui/theme.css";
+```
+
+## Compound API
+
+```tsx
+import { Button, Dialog, Input, Select } from "@usememos/ui";
+
+<Input aria-label="Project name" placeholder="Project name" />;
+
+<Dialog.Root>
+  <Dialog.Trigger render={<Button />}>Open dialog</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Team access</Dialog.Title>
+      <Dialog.Description>Review the current members.</Dialog.Description>
+    </Dialog.Header>
+  </Dialog.Content>
+</Dialog.Root>;
+
+<Select.Root defaultValue="react">
+  <Select.Trigger aria-label="Framework">
+    <Select.Value placeholder="Pick one" />
+  </Select.Trigger>
+  <Select.Content>
+    <Select.Item value="react">React</Select.Item>
+    <Select.Item value="vue">Vue</Select.Item>
+  </Select.Content>
+</Select.Root>;
+```
+
+## Public Entrypoints
+
+- `@usememos/ui`
+- `@usememos/ui/theme.css`
+- `@usememos/ui/button`
+- `@usememos/ui/checkbox`
+- `@usememos/ui/dialog`
+- `@usememos/ui/dropdown-menu`
+- `@usememos/ui/input`
+- `@usememos/ui/popover`
+- `@usememos/ui/radio-group`
+- `@usememos/ui/select`
+- `@usememos/ui/separator`
+- `@usememos/ui/switch`
+- `@usememos/ui/tooltip`
+
+## Customization
+
+Theme overrides are done with CSS variables on `:root`, `[data-mui-theme]`, or any subtree wrapper:
+
+```css
+:root {
+  --mui-color-background: oklch(0.985 0.0015 260);
+  --mui-color-foreground: oklch(0.205 0.004 260);
+  --mui-color-card: oklch(1 0 0);
+  --mui-color-popover: oklch(1 0 0);
+  --mui-color-primary: oklch(0.245 0.006 260);
+  --mui-color-primary-foreground: oklch(0.99 0 0);
+  --mui-color-secondary: oklch(0.952 0.002 260);
+  --mui-color-border: oklch(0.895 0.003 260);
+  --mui-color-input: oklch(0.84 0.003 260);
+  --mui-color-ring: oklch(0.52 0.085 155);
+}
+```
+
+Dark mode is supported out of the box:
+
+```html
+<html class="dark">
+  <!-- app -->
+</html>
+```
+
+or on any subtree:
+
+```tsx
+<div data-mui-theme="dark">{/* app */}</div>
+```
+
+Components also accept `className` for local overrides:
+
+```tsx
+<Button className="my-custom-styles">Custom Button</Button>
+```
+
+## Development
+
+```bash
+pnpm docs
+pnpm test
+pnpm test:browser
+pnpm build
+```
+
+The browser test project uses Vitest Browser Mode with Playwright. On a new machine, install Chromium once:
+
+```bash
+pnpm exec playwright install chromium
+```
+
+## License
+
+MIT © [usememos](https://github.com/usememos)

package/dist/button.cjs

@@ -0,0 +1,74 @@
+"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

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

package/dist/checkbox.cjs

@@ -0,0 +1,98 @@
+"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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,16 @@
+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

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

package/dist/chunk-3DNMGJFC.js

@@ -0,0 +1,216 @@
+import {
+  useOverlayLayerProps
+} from "./chunk-BH4MPO4N.js";
+import {
+  cx
+} from "./chunk-6TNEFWVX.js";
+
+// src/selection/select.tsx
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+// ../primitives/src/selection/select.tsx
+import * as React from "react";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { jsx } from "react/jsx-runtime";
+var Root = (props) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-scope": "select", "data-part": "root", ...props });
+};
+var Group = (props) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-scope": "select", "data-part": "group", ...props });
+};
+var Value = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, "data-scope": "select", "data-part": "value", ...props });
+});
+var Trigger = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref, "data-scope": "select", "data-part": "trigger", ...props });
+});
+var Portal = (props) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { "data-scope": "select", "data-part": "portal", ...props });
+};
+var Content = React.forwardRef(
+  ({
+    className,
+    children,
+    finalFocus,
+    align = "start",
+    collisionPadding = 8,
+    sideOffset = 4,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      SelectPrimitive.Positioner,
+      {
+        "data-scope": "select",
+        "data-part": "positioner",
+        align,
+        collisionPadding,
+        sideOffset,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          SelectPrimitive.Popup,
+          {
+            ref,
+            "data-scope": "select",
+            "data-part": "content",
+            className,
+            finalFocus,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var Viewport = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.List, { ref, "data-scope": "select", "data-part": "viewport", ...props });
+});
+var Label = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.GroupLabel, { ref, "data-scope": "select", "data-part": "label", ...props });
+});
+var Item = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Item, { ref, "data-scope": "select", "data-part": "item", ...props });
+});
+var ItemText = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { ref, "data-scope": "select", "data-part": "item-text", ...props });
+});
+var ItemIndicator = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { ref, "data-scope": "select", "data-part": "item-indicator", ...props });
+});
+var Separator = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Separator, { ref, "data-scope": "select", "data-part": "separator", ...props });
+});
+var ScrollUpButton = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpArrow, { ref, "data-scope": "select", "data-part": "scroll-up-button", ...props });
+});
+var ScrollDownButton = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownArrow, { ref, "data-scope": "select", "data-part": "scroll-down-button", ...props });
+});
+Root.displayName = "Select.Root";
+Group.displayName = "Select.Group";
+Value.displayName = "Select.Value";
+Trigger.displayName = "Select.Trigger";
+Portal.displayName = "Select.Portal";
+Content.displayName = "Select.Content";
+Viewport.displayName = "Select.Viewport";
+Label.displayName = "Select.Label";
+Item.displayName = "Select.Item";
+ItemText.displayName = "Select.ItemText";
+ItemIndicator.displayName = "Select.ItemIndicator";
+Separator.displayName = "Select.Separator";
+ScrollUpButton.displayName = "Select.ScrollUpButton";
+ScrollDownButton.displayName = "Select.ScrollDownButton";
+var Select = {
+  Root,
+  Group,
+  Value,
+  Trigger,
+  Portal,
+  Content,
+  Viewport,
+  Label,
+  Item,
+  ItemText,
+  ItemIndicator,
+  Separator,
+  ScrollUpButton,
+  ScrollDownButton
+};
+
+// src/selection/select.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Root2 = Select.Root;
+var Group2 = Select.Group;
+var Value2 = Select.Value;
+function Trigger2({
+  className,
+  children,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select.Trigger,
+    {
+      className: cx("mui-select__trigger", className),
+      "data-size": size,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "mui-select__value-slot", children }),
+        /* @__PURE__ */ jsx2("span", { className: "mui-select__icon-slot", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "mui-select__icon", size: 12 }) })
+      ]
+    }
+  );
+}
+function Content2({
+  className,
+  children,
+  ...props
+}) {
+  const layerProps = useOverlayLayerProps(props);
+  return /* @__PURE__ */ jsx2(Select.Portal, { children: /* @__PURE__ */ jsxs(
+    Select.Content,
+    {
+      className: cx("mui-select__content", className),
+      ...layerProps,
+      children: [
+        /* @__PURE__ */ jsx2(Select.ScrollUpButton, { className: "mui-select__scroll-button", children: /* @__PURE__ */ jsx2(ChevronUpIcon, { size: 12 }) }),
+        /* @__PURE__ */ jsx2(Select.Viewport, { className: "mui-select__viewport", children }),
+        /* @__PURE__ */ jsx2(Select.ScrollDownButton, { className: "mui-select__scroll-button", children: /* @__PURE__ */ jsx2(ChevronDownIcon, { size: 12 }) })
+      ]
+    }
+  ) });
+}
+function Label2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    Select.Label,
+    {
+      className: cx("mui-select__label", className),
+      ...props
+    }
+  );
+}
+function Item2({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select.Item,
+    {
+      className: cx("mui-select__item", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "mui-select__item-leading", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Select.ItemIndicator, { className: "mui-select__item-indicator", children: /* @__PURE__ */ jsx2(CheckIcon, { size: 10 }) }) }),
+        /* @__PURE__ */ jsx2(Select.ItemText, { className: "mui-select__item-text", children })
+      ]
+    }
+  );
+}
+function Separator2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    Select.Separator,
+    {
+      className: cx("mui-select__separator", className),
+      ...props
+    }
+  );
+}
+var Select2 = {
+  Root: Root2,
+  Group: Group2,
+  Value: Value2,
+  Trigger: Trigger2,
+  Content: Content2,
+  Label: Label2,
+  Item: Item2,
+  Separator: Separator2
+};
+
+export {
+  Select2 as Select
+};

package/dist/chunk-3VYNJ6UM.js

@@ -0,0 +1,27 @@
+import {
+  cx
+} from "./chunk-6TNEFWVX.js";
+
+// src/foundation/input.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Input = React.forwardRef(
+  ({ className, disabled, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        className: cx("mui-input", className),
+        "data-disabled": disabled ? "" : void 0,
+        "data-size": size,
+        disabled,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export {
+  Input
+};