dustyui 1.0.2 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wioletta Gluza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1,56 @@
-# DustyUI\n\nA calm, beach-inspired React UI component library using CSS Modules.
+# DustyUI
+
+A small React component library, styled with CSS Modules and themed through CSS custom properties. Accessible by default, with light and dark themes built in.
+
+## Install
+
+```bash
+npm install dustyui
+```
+
+Requires React 19.2 or later and a bundler that handles CSS Modules, such as Next.js or Vite.
+
+## Usage
+
+```tsx
+import { Button } from "dustyui";
+
+export function Example() {
+  return <Button>Save</Button>;
+}
+```
+
+The styles load with the components, so there is no stylesheet to import.
+
+Components, props and themes are documented in [dustyui-docs](https://github.com/w-gluza/dustyui-docs).
+
+## Accessibility
+
+- A component that needs an accessible name takes it as a required prop, so it cannot be left out by accident.
+- Decorative parts, such as icons, are hidden from screen readers.
+- Unavailable and loading controls stay focusable, so keyboard users do not lose their place.
+- Status changes are announced through one shared live region, which you can also use directly:
+
+```tsx
+import { announce } from "dustyui";
+
+announce("3 unread messages");
+announce("Connection lost", "assertive");
+```
+
+## Scripts
+
+| Script              | What it does                                                |
+| ------------------- | ----------------------------------------------------------- |
+| `npm run build`     | Compiles to `dist` and copies the stylesheets               |
+| `npm run typecheck` | Type-checks the source and the tests with TypeScript 7      |
+| `npm test`          | Unit tests in Node and component tests in headless Chromium |
+| `npm run lint`      | ESLint, with accessibility rules as errors                  |
+| `npm run lint:css`  | Stylelint                                                   |
+| `npm run format`    | Prettier                                                    |
+
+Run `npx playwright install chromium` once before the first `npm test`.
+
+## Licence
+
+MIT

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface AvatarProps extends Omit<ComponentProps<"span">, "children" | "dangerouslySetInnerHTML" | "role" | "aria-label" | "aria-labelledby" | "aria-hidden"> {
+    name: string;
+    image?: ReactNode;
+    fallback?: string;
+    size?: number;
+    decorative?: boolean;
+}
+export declare function Avatar({ name, image, fallback, size, decorative, className, style, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/Avatar/Avatar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { getInitials } from "./getInitials.js";
+import styles from "./Avatar.module.css";
+const DEFAULT_SIZE = 64;
+const ROOT_FONT_SIZE = 16;
+export function Avatar({ name, image, fallback, size = DEFAULT_SIZE, decorative = false, className, style, ...props }) {
+    const safeSize = Number.isFinite(size) && size > 0 ? size : DEFAULT_SIZE;
+    const sizedStyle = {
+        ...style,
+        "--avatar-size": `${safeSize / ROOT_FONT_SIZE}rem`,
+    };
+    const accessibility = decorative
+        ? { "aria-hidden": true }
+        : { role: "img", "aria-label": name };
+    return (_jsx("span", { ...props, ...accessibility, className: clsx(styles.avatar, className), style: sizedStyle, children: image ? (image) : (_jsx("span", { className: styles.fallback, children: fallback ?? getInitials(name) })) }));
+}

package/dist/Avatar/Avatar.module.css

@@ -0,0 +1,33 @@
+.avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--avatar-size, 4rem);
+  block-size: var(--avatar-size, 4rem);
+  overflow: hidden;
+  border-radius: var(--dusty-radius-full);
+}
+
+.avatar > img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  background-color: var(--dusty-surface-sunken);
+  color: var(--dusty-text-muted);
+  font-weight: var(--dusty-weight-semibold);
+  font-size: calc(var(--avatar-size, 4rem) / 3);
+  text-transform: uppercase;
+}
+
+@media (forced-colors: active) {
+  .avatar {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/Avatar/getInitials.d.ts

@@ -0,0 +1 @@
+export declare function getInitials(name: string): string;

package/dist/Avatar/getInitials.js

@@ -0,0 +1,13 @@
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+function firstGrapheme(word) {
+    for (const { segment } of graphemes.segment(word)) {
+        return segment;
+    }
+    return "";
+}
+export function getInitials(name) {
+    const words = name.trim().split(/\s+/u).filter(Boolean);
+    const first = words[0] ?? "";
+    const last = words.length > 1 ? (words.at(-1) ?? "") : "";
+    return firstGrapheme(first) + firstGrapheme(last);
+}

package/dist/Badge/Badge.d.ts

@@ -1,17 +1,7 @@
-import React, { type ReactNode } from "react";
-interface BadgeProps {
-    /** Visible text inside the badge. */
+import type { ComponentProps, ReactNode } from "react";
+export interface BadgeProps extends Omit<ComponentProps<"span">, "children" | "dangerouslySetInnerHTML"> {
     label: string;
-    /** Optional icon */
     icon?: ReactNode;
-    /** Where to place the icon relative to the label. */
     iconPosition?: "left" | "right";
-    /** If true, announces updates to assistive tech (use when value changes dynamically). */
-    announce?: boolean;
-    /** Test hook. */
-    dataTestId?: string;
-    /** Extra class on the root element. */
-    className?: string;
 }
-export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-export {};
+export declare function Badge({ label, icon, iconPosition, className, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/Badge/Badge.js

@@ -1,33 +1,7 @@
-import React from "react";
-import { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import styles from "./Badge.module.css";
-const Badge = forwardRef(
-  ({
-    label,
-    icon,
-    iconPosition = "left",
-    announce = false,
-    dataTestId,
-    className
-  }, ref) => {
-    return /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        ref,
-        className: clsx(styles.badge, className),
-        "data-testid": dataTestId,
-        "data-icon-position": iconPosition,
-        role: announce ? "status" : void 0,
-        "aria-live": announce ? "polite" : void 0
-      },
-      icon && iconPosition === "left" && /* @__PURE__ */ React.createElement("span", { className: styles.icon, "aria-hidden": "true" }, icon),
-      /* @__PURE__ */ React.createElement("span", { className: styles.label }, label),
-      icon && iconPosition === "right" && /* @__PURE__ */ React.createElement("span", { className: styles.icon, "aria-hidden": "true" }, icon)
-    );
-  }
-);
-Badge.displayName = "Badge";
-export {
-  Badge
-};
+export function Badge({ label, icon, iconPosition = "left", className, ...props }) {
+    const iconNode = icon != null ? (_jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon })) : null;
+    return (_jsxs("span", { ...props, className: clsx(styles.badge, className), children: [iconPosition === "left" ? iconNode : null, _jsx("span", { className: styles.label, children: label }), iconPosition === "right" ? iconNode : null] }));
+}

package/dist/Badge/Badge.module.css

@@ -1,26 +1,27 @@
 .badge {
   display: inline-flex;
   align-items: center;
+  gap: 0.25rem;
+  max-inline-size: 100%;
+  padding-block: 0.125rem;
+  padding-inline: 0.625rem;
+  border: 1px solid var(--dusty-border);
+  border-radius: var(--dusty-radius-full);
+  color: var(--dusty-text);
   font-size: 0.75rem;
-  line-height: 1rem;
-  padding: 0.125rem 0.625rem;
-  font-weight: 600;
-  border: 1px solid var(--color-gray-300);
-  width: max-content;
-  border-radius: 12px;
-  align-items: center;
-  gap: 4px;
+  font-weight: var(--dusty-weight-semibold);
+  line-height: 1.33;
 }
 
 .icon {
-  width: 0.875rem;
-  height: 0.875rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
   line-height: 0;
 }
 
 .label {
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }

package/dist/Button/Button.d.ts

@@ -1,14 +1,9 @@
-import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Content inside the button */
+import { type ComponentProps, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary";
+export interface ButtonProps extends Omit<ComponentProps<"button">, "children" | "dangerouslySetInnerHTML"> {
     children: ReactNode;
-    /** Visual style variant */
-    variant?: "primary" | "secondary";
-    /** Show as busy (disables interaction + aria-busy) */
+    variant?: ButtonVariant;
     loading?: boolean;
-    /** Test hook. */
-    dataTestId?: string;
-    /** Additional CSS class names */
-    className?: string;
+    loadingLabel?: string;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare function Button({ variant, loading, loadingLabel, className, type, children, onClick, "aria-disabled": ariaDisabled, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/Button/Button.js

@@ -1,42 +1,23 @@
-import React, {
-  forwardRef
-} from "react";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, } from "react";
 import clsx from "clsx";
+import { announce } from "../announcer/announcer.js";
 import styles from "./Button.module.css";
-const Button = forwardRef(
-  ({
-    children,
-    variant = "primary",
-    loading = false,
-    dataTestId,
-    className,
-    disabled,
-    type = "button",
-    ...props
-  }, ref) => {
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        ref,
-        type,
-        className: clsx(
-          styles.button,
-          styles[variant],
-          isDisabled && styles.disabled,
-          className
-        ),
-        "data-testid": dataTestId,
-        "data-variant": variant,
-        "aria-busy": loading || void 0,
-        disabled: isDisabled,
-        ...props
-      },
-      children
-    );
-  }
-);
-Button.displayName = "Button";
-export {
-  Button
-};
+export function Button({ variant = "primary", loading = false, loadingLabel = "Loading", className, type = "button", children, onClick, "aria-disabled": ariaDisabled, ...props }) {
+    const inactive = loading || ariaDisabled === true || ariaDisabled === "true";
+    useEffect(() => {
+        if (loading) {
+            announce(loadingLabel);
+        }
+    }, [loading, loadingLabel]);
+    function handleClick(event) {
+        if (inactive) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onClick?.(event);
+    }
+    return (_jsxs("button", { ...props, type: type, className: clsx(styles.button, styles[variant], className), "data-variant": variant, "data-loading": loading || undefined, "aria-disabled": inactive ? true : ariaDisabled, onClick: handleClick, children: [_jsx("span", { className: styles.label, children: children }), loading ? _jsx("span", { className: styles.spinner, "aria-hidden": "true" }) : null] }));
+}

package/dist/Button/Button.module.css

@@ -1,37 +1,108 @@
 .button {
-  display: inline-block;
-  padding: 0.75rem 1.5rem;
-  border-radius: 8px;
-  font-weight: var(--weight-semibold);
-  text-decoration: none;
-  line-height: 1;
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  padding-block: var(--button-padding-block, 0.75rem);
+  padding-inline: var(--button-padding-inline, 1.5rem);
+  border: 1px solid var(--dusty-action);
+  border-radius: var(--dusty-radius-md);
+  font: inherit;
+  font-weight: var(--dusty-weight-semibold);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.button:focus-visible {
+  outline: var(--dusty-focus-ring-width) solid var(--dusty-focus-ring);
+  outline-offset: var(--dusty-focus-ring-offset);
+}
+
+.button:disabled,
+.button[aria-disabled="true"]:not([data-loading]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button[data-loading] {
+  cursor: progress;
+}
+
+.label,
+.spinner {
+  grid-area: 1 / 1;
+}
+
+.button[data-loading] .label {
+  opacity: 0;
+}
+
+.spinner {
+  box-sizing: border-box;
+  inline-size: 1em;
+  block-size: 1em;
+  border: 2px solid currentcolor;
+  border-inline-end-color: transparent;
+  border-radius: var(--dusty-radius-full);
+  animation: spin 0.8s linear infinite;
 }
 
-/* Primary: filled black */
 .primary {
-  background-color: var(--color-black);
-  color: var(--color-white);
-  border: 1px solid var(--color-black);
+  background-color: var(--dusty-action);
+  color: var(--dusty-on-action);
 }
 
-.primary:hover {
-  background-color: var(--color-black-700);
+.primary:enabled:not([aria-disabled="true"]):active {
+  border-color: var(--dusty-action-active);
+  background-color: var(--dusty-action-active);
 }
 
-/* Secondary: outline black */
 .secondary {
   background-color: transparent;
-  color: var(--color-black);
-  border: 1px solid var(--color-black);
+  color: var(--dusty-action);
 }
 
-.secondary:hover {
-  background-color: var(--color-gray-200);
+.secondary:enabled:not([aria-disabled="true"]):active {
+  background-color: var(--dusty-surface-selected);
 }
 
-/* Disabled state */
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
+@media (hover: hover) {
+  .primary:enabled:not([aria-disabled="true"]):hover:not(:active) {
+    border-color: var(--dusty-action-hover);
+    background-color: var(--dusty-action-hover);
+  }
+
+  .secondary:enabled:not([aria-disabled="true"]):hover:not(:active) {
+    background-color: var(--dusty-surface-hover);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: pulse 1.2s ease-in-out infinite alternate;
+  }
+}
+
+@media (forced-colors: active) {
+  .button:disabled,
+  .button[aria-disabled="true"]:not([data-loading]) {
+    opacity: 1;
+  }
+
+  .spinner {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    border-inline-end-color: transparent;
+  }
+}
+
+@keyframes spin {
+  to {
+    rotate: 1turn;
+  }
+}
+
+@keyframes pulse {
+  to {
+    opacity: 0.3;
+  }
 }

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { type ButtonProps } from "../Button/Button.js";
+export interface IconButtonProps extends Omit<ButtonProps, "children" | "dangerouslySetInnerHTML" | "aria-label" | "aria-labelledby"> {
+    label: string;
+    icon: ReactNode;
+}
+export declare function IconButton({ label, icon, className, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import visuallyHidden from "../styles/visuallyHidden.module.css";
+import styles from "./IconButton.module.css";
+export function IconButton({ label, icon, className, ...props }) {
+    return (_jsxs(Button, { ...props, className: clsx(styles.iconButton, className), children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }), _jsx("span", { className: visuallyHidden.visuallyHidden, children: label })] }));
+}

package/dist/IconButton/IconButton.module.css

@@ -0,0 +1,17 @@
+.iconButton {
+  --button-padding-inline: 0.75rem;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  line-height: 1;
+}
+
+.icon > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}

package/dist/ObjectInspector/InspectorDetails.d.ts

@@ -0,0 +1,6 @@
+import type { InspectorNode } from "./describe/describe.js";
+interface InspectorDetailsProps {
+    node: InspectorNode;
+}
+export declare function InspectorDetails({ node }: InspectorDetailsProps): import("react").JSX.Element;
+export {};

package/dist/ObjectInspector/InspectorDetails.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { announce } from "../announcer/announcer.js";
+import { Button } from "../Button/Button.js";
+import { getCopyText } from "./getCopyText.js";
+import { getValueText } from "./getValueText.js";
+import styles from "./InspectorDetails.module.css";
+const SHOWN_VALUE_LENGTH = 2000;
+function getTypeText(node) {
+    return node.typeName ? `${node.kind} (${node.typeName})` : node.kind;
+}
+function getShownValue(node) {
+    const text = getValueText(node);
+    return text.length > SHOWN_VALUE_LENGTH
+        ? `${text.slice(0, SHOWN_VALUE_LENGTH)}…`
+        : text;
+}
+export function InspectorDetails({ node }) {
+    const [feedback, setFeedback] = useState({ id: "", text: "" });
+    async function copy(text, name) {
+        let result = `${name} copied`;
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch {
+            result = "Copying failed";
+        }
+        setFeedback({ id: node.id, text: result });
+        announce(result);
+    }
+    return (_jsxs("section", { "aria-label": "Selected value", className: styles.details, children: [_jsxs("dl", { className: styles.facts, children: [_jsx("dt", { children: "Path" }), _jsx("dd", { children: node.path }), _jsx("dt", { children: "Type" }), _jsx("dd", { children: getTypeText(node) }), node.childCount === 0 ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Value" }), _jsx("dd", { className: styles.value, children: getShownValue(node) })] })) : null] }), _jsxs("div", { className: styles.actions, children: [_jsx(Button, { variant: "secondary", className: styles.copy, onClick: () => void copy(node.path, "Path"), children: "Copy path" }), _jsx(Button, { variant: "secondary", className: styles.copy, onClick: () => void copy(getCopyText(node), "Value"), children: "Copy value" }), _jsx("span", { className: styles.feedback, children: feedback.id === node.id ? feedback.text : "" })] })] }));
+}

package/dist/ObjectInspector/InspectorDetails.module.css

@@ -0,0 +1,47 @@
+.details {
+  display: grid;
+  gap: 0.5rem;
+  padding-block-start: 0.5rem;
+  border-block-start: 1px solid var(--dusty-border);
+}
+
+.facts {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 0.25rem 0.75rem;
+  margin: 0;
+  font-family: var(--dusty-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.facts dt {
+  color: var(--dusty-text-muted);
+}
+
+.facts dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.facts .value {
+  max-block-size: 8rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.copy {
+  --button-padding-block: 0.375rem;
+  --button-padding-inline: 0.75rem;
+}
+
+.feedback {
+  color: var(--dusty-text-muted);
+}

package/dist/ObjectInspector/InspectorSearch.d.ts

@@ -0,0 +1,9 @@
+interface InspectorSearchProps {
+    query: string;
+    status: string;
+    hasMatches: boolean;
+    onQueryChange: (query: string) => void;
+    onMove: (step: 1 | -1) => void;
+}
+export declare function InspectorSearch({ query, status, hasMatches, onQueryChange, onMove, }: InspectorSearchProps): import("react").JSX.Element;
+export {};

package/dist/ObjectInspector/InspectorSearch.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from "../IconButton/IconButton.js";
+import styles from "./InspectorSearch.module.css";
+export function InspectorSearch({ query, status, hasMatches, onQueryChange, onMove, }) {
+    function handleKeyDown(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            onMove(event.shiftKey ? -1 : 1);
+        }
+    }
+    return (_jsxs("search", { className: styles.search, children: [_jsxs("label", { className: styles.field, children: [_jsx("span", { children: "Search" }), _jsx("input", { type: "search", className: styles.input, value: query, autoComplete: "off", spellCheck: false, onChange: (event) => onQueryChange(event.target.value), onKeyDown: handleKeyDown })] }), _jsx("span", { className: styles.status, children: status }), _jsx(IconButton, { variant: "secondary", className: styles.move, label: "Previous match", icon: "\u2191", "aria-disabled": !hasMatches, onClick: () => onMove(-1) }), _jsx(IconButton, { variant: "secondary", className: styles.move, label: "Next match", icon: "\u2193", "aria-disabled": !hasMatches, onClick: () => onMove(1) })] }));
+}