dustyui 1.0.2 → 2.0.0

package/dist/announcer/announcer.js

@@ -0,0 +1,41 @@
+import visuallyHidden from "../styles/visuallyHidden.module.css";
+const REGION_READY_DELAY = 100;
+const MESSAGE_LIFETIME = 7000;
+let regions;
+let regionsReadyAt = 0;
+function createRegion(politeness) {
+    const region = document.createElement("div");
+    region.setAttribute("role", "log");
+    region.setAttribute("aria-live", politeness);
+    region.setAttribute("aria-relevant", "additions");
+    return region;
+}
+function ensureRegions() {
+    if (regions?.polite.isConnected && regions.assertive.isConnected) {
+        return regions;
+    }
+    const container = document.createElement("div");
+    container.dataset.dustyAnnouncer = "";
+    container.className = visuallyHidden.visuallyHidden ?? "";
+    regions = {
+        polite: createRegion("polite"),
+        assertive: createRegion("assertive"),
+    };
+    container.append(regions.polite, regions.assertive);
+    document.body.append(container);
+    regionsReadyAt = performance.now() + REGION_READY_DELAY;
+    return regions;
+}
+export function announce(message, politeness = "polite") {
+    if (typeof document === "undefined" || message.trim() === "") {
+        return;
+    }
+    const region = ensureRegions()[politeness];
+    const delay = Math.max(0, regionsReadyAt - performance.now());
+    setTimeout(() => {
+        const entry = document.createElement("div");
+        entry.textContent = message;
+        region.append(entry);
+        setTimeout(() => entry.remove(), MESSAGE_LIFETIME);
+    }, delay);
+}

package/dist/index.d.ts

@@ -1,3 +1,11 @@
 import "./styles/tokens.css";
-export { Badge } from "./Badge/Badge";
-export { Button } from "./Button/Button";
+import "./styles/themes/dusty.css";
+export { announce, type Politeness } from "./announcer/announcer.js";
+export { Avatar, type AvatarProps } from "./Avatar/Avatar.js";
+export { Badge, type BadgeProps } from "./Badge/Badge.js";
+export { Button, type ButtonProps, type ButtonVariant, } from "./Button/Button.js";
+export { IconButton, type IconButtonProps } from "./IconButton/IconButton.js";
+export { ObjectInspector, type ObjectInspectorProps, } from "./ObjectInspector/ObjectInspector.js";
+export { describe, type InspectorNode, type NodeLabel, type ValueKind, } from "./ObjectInspector/describe/describe.js";
+export { Tree, type TreeProps } from "./Tree/Tree.js";
+export type { TreeNode, TreeRow } from "./Tree/treeModel.js";

package/dist/index.js

@@ -1,7 +1,10 @@
 import "./styles/tokens.css";
-import { Badge } from "./Badge/Badge";
-import { Button } from "./Button/Button";
-export {
-  Badge,
-  Button
-};
+import "./styles/themes/dusty.css";
+export { announce } from "./announcer/announcer.js";
+export { Avatar } from "./Avatar/Avatar.js";
+export { Badge } from "./Badge/Badge.js";
+export { Button, } from "./Button/Button.js";
+export { IconButton } from "./IconButton/IconButton.js";
+export { ObjectInspector, } from "./ObjectInspector/ObjectInspector.js";
+export { describe, } from "./ObjectInspector/describe/describe.js";
+export { Tree } from "./Tree/Tree.js";

package/dist/styles/themes/dusty.css

@@ -0,0 +1,22 @@
+:where(:root),
+[data-theme="dusty"] {
+  --dusty-surface: light-dark(#faf7f2, #14191b);
+  --dusty-surface-raised: light-dark(#fff, #1c2326);
+  --dusty-surface-sunken: light-dark(#f1ece3, #0f1314);
+  --dusty-surface-hover: light-dark(#f1ece3, #232c30);
+  --dusty-surface-selected: light-dark(#dcebed, #1f3a40);
+  --dusty-text: light-dark(#1f2a2e, #e8e4dc);
+  --dusty-text-muted: light-dark(#55636a, #a3acaf);
+  --dusty-text-disabled: light-dark(#9aa3a3, #5f6a6e);
+  --dusty-border: light-dark(#d9d2c5, #3a4448);
+  --dusty-border-strong: light-dark(#7d837f, #7f8a8e);
+  --dusty-focus-ring: light-dark(#1d6f7a, #6cc5d0);
+  --dusty-action: light-dark(#1f2a2e, #e8e4dc);
+  --dusty-action-hover: light-dark(#33424a, #cfc9be);
+  --dusty-action-active: light-dark(#465862, #b9b3a8);
+  --dusty-on-action: light-dark(#faf7f2, #14191b);
+  --dusty-syntax-string: light-dark(#a04a1c, #e8a87c);
+  --dusty-syntax-number: light-dark(#1d5f8a, #7fb8e0);
+  --dusty-syntax-boolean: light-dark(#7a4a9a, #c79be0);
+  --dusty-syntax-function: light-dark(#2f6b3f, #8fcf9a);
+}

package/dist/styles/themes/mono.css

@@ -0,0 +1,21 @@
+[data-theme="mono"] {
+  --dusty-surface: light-dark(#fafafa, #1a1a1a);
+  --dusty-surface-raised: light-dark(#fff, #242424);
+  --dusty-surface-sunken: light-dark(#eee, #121212);
+  --dusty-surface-hover: light-dark(#eee, #2e2e2e);
+  --dusty-surface-selected: light-dark(#e0e0e0, #3a3a3a);
+  --dusty-text: light-dark(#222, #f0f0f0);
+  --dusty-text-muted: light-dark(#555, #adadad);
+  --dusty-text-disabled: light-dark(#999, #6b6b6b);
+  --dusty-border: light-dark(#ddd, #3d3d3d);
+  --dusty-border-strong: light-dark(#767676, #8a8a8a);
+  --dusty-focus-ring: light-dark(#222, #fafafa);
+  --dusty-action: light-dark(#222, #f0f0f0);
+  --dusty-action-hover: light-dark(#3a3a3a, #d6d6d6);
+  --dusty-action-active: light-dark(#505050, #bdbdbd);
+  --dusty-on-action: light-dark(#fafafa, #1a1a1a);
+  --dusty-syntax-string: light-dark(#8a3d12, #e8a87c);
+  --dusty-syntax-number: light-dark(#1d5f8a, #7fb8e0);
+  --dusty-syntax-boolean: light-dark(#7a4a9a, #c79be0);
+  --dusty-syntax-function: light-dark(#2f6b3f, #8fcf9a);
+}

package/dist/styles/tokens.css

@@ -1,15 +1,21 @@
 :root {
-  /* Color Variables */
-  --color-black: #222222;
-  --color-black-800: #2a2a2a;
-  --color-black-700: #2f2f2f;
-  --color-gray-700: #444444;
-  --color-gray-600: #666666;
-  --color-gray-500: #999999;
-  --color-gray-400: #bbbbbb;
-  --color-gray-300: #dddddd;
-  --color-gray-200: #eeeeee;
-  --color-gray-100: #f5f5f5;
-  --color-gray-50: #fcfcfc;
-  --color-white: #fafafa;
+  --dusty-radius-sm: 0.25rem;
+  --dusty-radius-md: 0.5rem;
+  --dusty-radius-full: 999px;
+  --dusty-weight-semibold: 600;
+  --dusty-font-mono: ui-monospace, "SFMono-Regular", menlo, consolas, monospace;
+  --dusty-focus-ring-width: 2px;
+  --dusty-focus-ring-offset: 2px;
+}
+
+:where(:root) {
+  color-scheme: light dark;
+}
+
+[data-color-scheme="light"] {
+  color-scheme: light;
+}
+
+[data-color-scheme="dark"] {
+  color-scheme: dark;
 }

package/dist/styles/visuallyHidden.module.css

@@ -0,0 +1,8 @@
+.visuallyHidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dustyui",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "A minimalist, neutral-toned React UI component library styled with CSS Modules.",
   "keywords": [
     "react",
@@ -16,53 +16,69 @@
     "type": "git",
     "url": "https://github.com/w-gluza/dustyui"
   },
-  "homepage": "https://dustyui.com",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "homepage": "https://github.com/w-gluza/dustyui",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && cpy \"src/**/*.css\" dist --parents",
-    "typecheck": "tsc --noEmit",
-    "format": "prettier --check .",
-    "format:fix": "prettier --write .",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cpy \"**/*.css\" ../dist --cwd=src",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "format": "prettier --write .",
     "lint": "eslint .",
-    "lint:css": "stylelint 'src/**/*.css'"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "format:check": "prettier --check .",
+    "prepack": "npm run build"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "@typescript-eslint/parser": "^8.35.1",
-    "cpy-cli": "^6.0.0",
-    "eslint": "^9.30.1",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-config-turbo": "^2.5.4",
-    "eslint-plugin-react": "^7.37.5",
-    "prettier": "^3.6.2",
-    "stylelint": "^16.21.1",
-    "stylelint-config-css-modules": "^4.5.1",
-    "stylelint-config-standard": "^38.0.0",
-    "tsup": "^7.0.0",
-    "typescript": "^5.0.0"
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "@vitest/browser-playwright": "^5.1.0",
+    "cpy-cli": "^7.0.0",
+    "eslint": "^10.15.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "fast-check": "^4.10.2",
+    "globals": "^17.14.0",
+    "playwright": "^1.65.1",
+    "prettier": "^3.10.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "stylelint": "^18.0.0",
+    "stylelint-config-standard": "^41.0.0",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "typescript-eslint": "^8.72.2",
+    "vitest": "^5.1.0",
+    "vitest-browser-react": "^2.3.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "type": "module",
+  "overrides": {
+    "eslint-plugin-jsx-a11y": {
+      "eslint": "$eslint"
+    }
   },
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./tokens.css": "./dist/styles/tokens.css",
+    "./themes/*.css": "./dist/styles/themes/*.css"
   },
-  "dependencies": {
-    "clsx": "^2.1.1"
+  "sideEffects": [
+    "./dist/index.js",
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^19.2.0"
   }
 }

package/dist/Badge/Badge.cjs

@@ -1,67 +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);
-var Badge_exports = {};
-__export(Badge_exports, {
-  Badge: () => Badge
-});
-module.exports = __toCommonJS(Badge_exports);
-var import_react = __toESM(require("react"));
-var import_react2 = require("react");
-var import_clsx = __toESM(require("clsx"));
-var import_Badge_module = __toESM(require("./Badge.module.css"));
-const Badge = (0, import_react2.forwardRef)(
-  ({
-    label,
-    icon,
-    iconPosition = "left",
-    announce = false,
-    dataTestId,
-    className
-  }, ref) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        ref,
-        className: (0, import_clsx.default)(import_Badge_module.default.badge, className),
-        "data-testid": dataTestId,
-        "data-icon-position": iconPosition,
-        role: announce ? "status" : void 0,
-        "aria-live": announce ? "polite" : void 0
-      },
-      icon && iconPosition === "left" && /* @__PURE__ */ import_react.default.createElement("span", { className: import_Badge_module.default.icon, "aria-hidden": "true" }, icon),
-      /* @__PURE__ */ import_react.default.createElement("span", { className: import_Badge_module.default.label }, label),
-      icon && iconPosition === "right" && /* @__PURE__ */ import_react.default.createElement("span", { className: import_Badge_module.default.icon, "aria-hidden": "true" }, icon)
-    );
-  }
-);
-Badge.displayName = "Badge";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Badge
-});

package/dist/Button/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);
-var Button_exports = {};
-__export(Button_exports, {
-  Button: () => Button
-});
-module.exports = __toCommonJS(Button_exports);
-var import_react = __toESM(require("react"));
-var import_clsx = __toESM(require("clsx"));
-var import_Button_module = __toESM(require("./Button.module.css"));
-const Button = (0, import_react.forwardRef)(
-  ({
-    children,
-    variant = "primary",
-    loading = false,
-    dataTestId,
-    className,
-    disabled,
-    type = "button",
-    ...props
-  }, ref) => {
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "button",
-      {
-        ref,
-        type,
-        className: (0, import_clsx.default)(
-          import_Button_module.default.button,
-          import_Button_module.default[variant],
-          isDisabled && import_Button_module.default.disabled,
-          className
-        ),
-        "data-testid": dataTestId,
-        "data-variant": variant,
-        "aria-busy": loading || void 0,
-        disabled: isDisabled,
-        ...props
-      },
-      children
-    );
-  }
-);
-Button.displayName = "Button";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Button
-});

package/dist/index.cjs

@@ -1,32 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
-  Badge: () => import_Badge.Badge,
-  Button: () => import_Button.Button
-});
-module.exports = __toCommonJS(src_exports);
-var import_tokens = require("./styles/tokens.css");
-var import_Badge = require("./Badge/Badge");
-var import_Button = require("./Button/Button");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Badge,
-  Button
-});