@milktop/react-ui 0.1.2 → 0.2.1

package/dist/appearance.js

@@ -0,0 +1,157 @@
+// The app's accent colour and sidebar style, chosen by its users (with
+// <Appearance>) or set in code, saved like colorScheme:
+//
+//   import { appearance, useAppearance } from '@milktop/react-ui'
+//   appearance.defaults = { accent: 'teal', sidebar: 'neutral' }
+//   appearance.update({ accent: 'violet', sidebar: 'dark' })
+//   appearance.load(user.appearance)        // a saved choice, e.g. from the server
+//   appearance.onChange = (value) => save(value)
+//   const { accent, custom, sidebar } = useAppearance()   // re-renders on change
+//
+// - `accent`: a name from `accents` (Tailwind's scales, each 600 taking white
+//   text), or `custom`: any hex colour, its scale worked out in the browser
+//   (CSS relative colours keep its hue), e.g. to try a brand colour
+// - `sidebar`: a name from `sidebarStyles`, light mode only (dark keeps its
+//   own layers). 'default' leaves the theme's sidebar as it is.
+// - `defaults`: what a visitor with nothing saved gets, and what `reset`
+//   goes back to
+// - `update(changes)` sets and saves them and calls `onChange` with `value`
+//   ({ accent, custom, sidebar }); `load(value)` applies a saved one without
+//   calling it
+// - `restrict(accents, sidebars)` moves a choice outside those lists to their
+//   first item (<Appearance> does this with its own lists); a custom colour
+//   stays only when it's the default
+//
+// The accent becomes the --ui-accent-50 … -950 scale on <html>, which the
+// accent tokens are steps of (see theme.css); the sidebar style is
+// `data-ui-sidebar-style` there (its styles are in sidebar.css). Saved in
+// localStorage (`storageKey`), scale included, so a script in the page's
+// <head> can paint it before the bundle loads (see the README).
+import { useSyncExternalStore } from 'react';
+export const accentSteps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+// [the scale, the text on its 500 (dark mode's accent)]
+export const accents = {
+    slate: [['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1', '#94a3b8', '#64748b', '#475569', '#334155', '#1e293b', '#0f172a', '#020617'], 'white'],
+    blue: [['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa', '#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a', '#172554'], 'white'],
+    indigo: [['#eef2ff', '#e0e7ff', '#c7d2fe', '#a5b4fc', '#818cf8', '#6366f1', '#4f46e5', '#4338ca', '#3730a3', '#312e81', '#1e1b4b'], 'white'],
+    violet: [['#f5f3ff', '#ede9fe', '#ddd6fe', '#c4b5fd', '#a78bfa', '#8b5cf6', '#7c3aed', '#6d28d9', '#5b21b6', '#4c1d95', '#2e1065'], 'white'],
+    teal: [['#f0fdfa', '#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf', '#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a', '#042f2e'], '#042f2e'],
+    emerald: [['#ecfdf5', '#d1fae5', '#a7f3d0', '#6ee7b7', '#34d399', '#10b981', '#059669', '#047857', '#065f46', '#064e3b', '#022c22'], '#022c22'],
+    rose: [['#fff1f2', '#ffe4e6', '#fecdd3', '#fda4af', '#fb7185', '#f43f5e', '#e11d48', '#be123c', '#9f1239', '#881337', '#4c0519'], 'white'],
+};
+export const sidebarStyles = ['default', 'neutral', 'soft', 'tint', 'accent', 'dark', 'deep'];
+// Old names still accepted, e.g. from a saved choice
+const sidebarAliases = { 'neutral-accent': 'neutral' };
+// Lightness and share of the colour's chroma per step, for a custom colour.
+const ramp = [[0.98, 0.15], [0.95, 0.3], [0.9, 0.5], [0.83, 0.7], [0.74, 0.9], [0.65, 1], [0.56, 1], [0.48, 0.9], [0.4, 0.75], [0.33, 0.6], [0.23, 0.45]];
+// A custom colour's scale, as CSS relative colours.
+export const accentScale = (hex) => ramp.map(([l, c]) => `oklch(from ${hex} ${l} calc(c * ${c}) h)`);
+const isHex = (v) => typeof v === 'string' && /^#[0-9a-f]{6}$/i.test(v);
+// Only known accents and sidebar styles, and hex colours.
+function pick(value) {
+    const out = {};
+    if (!value || typeof value !== 'object')
+        return out;
+    const { accent, custom, sidebar } = value;
+    if (typeof accent === 'string' && accent in accents)
+        out.accent = accent;
+    if (custom === null || isHex(custom))
+        out.custom = custom;
+    const style = typeof sidebar === 'string' ? sidebarAliases[sidebar] ?? sidebar : null;
+    if (sidebarStyles.includes(style))
+        out.sidebar = style;
+    return out;
+}
+class Appearance {
+    #key = 'ui-appearance';
+    #defaults = { accent: 'blue', custom: null, sidebar: 'default' };
+    #value = { ...this.#defaults };
+    #listeners = new Set();
+    onChange = null;
+    constructor() {
+        if (typeof document === 'undefined')
+            return;
+        addEventListener('storage', (e) => { if (e.key === this.#key)
+            this.#reload(); });
+        this.#reload();
+    }
+    get storageKey() { return this.#key; }
+    // Set it before the page reads a value (it reloads the saved choice).
+    set storageKey(key) {
+        this.#key = key;
+        this.#reload();
+    }
+    get defaults() { return this.#defaults; }
+    set defaults(value) {
+        this.#defaults = { ...this.#defaults, custom: null, ...pick(value) };
+        this.#reload();
+    }
+    // { accent, custom, sidebar }: a new object on every change.
+    get value() { return this.#value; }
+    get accent() { return this.#value.accent; }
+    get custom() { return this.#value.custom; }
+    get sidebar() { return this.#value.sidebar; }
+    // The scale showing: [50 … 950] colours, and the text on the 500.
+    get scale() { return this.custom ? accentScale(this.custom) : accents[this.accent][0]; }
+    get scaleText() { return this.custom ? 'white' : accents[this.accent][1]; }
+    update(changes) {
+        this.#set(changes);
+        this.onChange?.(this.#value);
+    }
+    load(value) {
+        this.#set(value);
+    }
+    reset() { this.update(this.#defaults); }
+    restrict(allowedAccents, allowedSidebars) {
+        const fix = {};
+        // A custom colour stays only if it's the app's own default
+        const customOk = this.custom && this.custom === this.#defaults.custom;
+        if (allowedAccents?.length && !customOk && (this.custom || !allowedAccents.includes(this.accent))) {
+            fix.accent = allowedAccents[0];
+            fix.custom = null;
+        }
+        if (allowedSidebars?.length && !allowedSidebars.includes(this.sidebar))
+            fix.sidebar = allowedSidebars[0];
+        if (Object.keys(fix).length)
+            this.load(fix);
+    }
+    subscribe = (listener) => {
+        this.#listeners.add(listener);
+        return () => { this.#listeners.delete(listener); };
+    };
+    #reload() {
+        let saved = {};
+        try {
+            saved = JSON.parse(localStorage.getItem(this.#key) ?? '{}');
+        }
+        catch { /* private mode, or not JSON */ }
+        this.#value = { ...this.#defaults, ...pick(saved) };
+        this.#apply();
+    }
+    #set(changes) {
+        this.#value = { ...this.#value, ...pick(changes) };
+        this.#apply();
+        try {
+            localStorage.setItem(this.#key, JSON.stringify({ scale: this.scale, scaleText: this.scaleText, ...this.#value }));
+        }
+        catch { /* private mode */ }
+    }
+    #apply() {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        this.scale.forEach((color, i) => root.style.setProperty(`--ui-accent-${accentSteps[i]}`, color));
+        root.style.setProperty('--ui-accent-500-text', this.scaleText);
+        if (this.sidebar === 'default')
+            delete root.dataset.uiSidebarStyle;
+        else
+            root.dataset.uiSidebarStyle = this.sidebar;
+        this.#listeners.forEach((listener) => listener());
+    }
+}
+export const appearance = new Appearance();
+const serverValue = { accent: 'blue', custom: null, sidebar: 'default' };
+// The current choice, re-rendering when it changes.
+export function useAppearance() {
+    return useSyncExternalStore(appearance.subscribe, () => appearance.value, () => serverValue);
+}

package/dist/attachments/Attachments.d.ts

@@ -37,7 +37,7 @@
  * a new tab. Files with a `url` get a download button.
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './attachments.css';

package/dist/attachments/Attachments.js

@@ -40,7 +40,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createFileTypeValidator, getAcceptAttrString, getFileKey } from '@zag-js/file-utils';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { Dialog } from '../dialog/Dialog.js';
 import { formatBytes } from '../format/format.js';
 import { useLocale, useMessages } from '../format/LocaleProvider.js';

package/dist/avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { Avatar as Ark } from '@ark-ui/react/avatar';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './avatar.css';

package/dist/avatar/Avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar as Ark } from '@ark-ui/react/avatar';
-import 'iconify-icon';
+import '../icons.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { cx, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';

package/dist/badge/Badge.d.ts

@@ -10,7 +10,7 @@
  *   filter, a record's label); `removeLabel` names it ('Remove …')
  */
 import type { ComponentProps } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './badge.css';

package/dist/badge/Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import '../theme.css';
 import './badge.css';

package/dist/banner/Banner.d.ts

@@ -14,7 +14,7 @@
  * - `full`: no rounding, to run edge to edge
  */
 import type { HTMLAttributes, ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './banner.css';

package/dist/banner/Banner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, useControllable } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/breadcrumbs/Breadcrumbs.d.ts

@@ -12,7 +12,7 @@
  *   the crumb and the props to spread on it: `(item, props) => <Link to={item.href} {...props} />`
  */
 import type { HTMLAttributes, ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './breadcrumbs.css';

package/dist/breadcrumbs/Breadcrumbs.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { Menu } from '../menu/Menu.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';

package/dist/button/Button.d.ts

@@ -12,12 +12,13 @@
  * - `count`: a badge on the corner (hidden at 0 or null), "99+" past `max`
  * - `dot`: a small dot there instead, for "something new"
  * - `pulse`: a ring ripples out from the badge or dot (not when the system asks for less motion)
- * - `countColor`: 'danger', 'accent', 'success', 'warning' or 'neutral'
+ * - `countColor`: 'danger', 'accent', 'success', 'warning' or 'neutral', for the
+ *   dot too; or set `--ui-button-count-bg` and `--ui-button-count-text` in CSS for any other
  * - `countLabel`: what the count is, for assistive tech ('new': "Inbox, 3 new")
  * - `type`: 'button' by default (pass 'submit' for forms)
  */
 import type { ComponentProps } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './button.css';

package/dist/button/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/card/Card.d.ts

@@ -27,7 +27,7 @@
  *   </Card>
  */
 import { type ComponentProps, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './card.css';
@@ -61,10 +61,10 @@ declare function CardShortcut({ heading, description, icon, actions, footer, var
     'data-link': string | undefined;
     'data-scope': string;
     'data-part': string;
+    key?: import("react").Key | null | undefined;
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
     ref?: import("react").Ref<HTMLDivElement> | undefined;
-    key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;

package/dist/card/Card.js

@@ -28,7 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   </Card>
  */
 import { Children, createElement, isValidElement } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partOf, partsOf, withParts } from '../utils.js';
 import '../theme.css';
 import './card.css';

package/dist/checkbox/Checkbox.d.ts

@@ -24,7 +24,7 @@
  */
 import type { ReactNode } from 'react';
 import { Checkbox as Ark, type CheckboxCheckedChangeDetails } from '@ark-ui/react/checkbox';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes, type Slot } from '../utils.js';
 import '../theme.css';
 import './checkbox.css';

package/dist/checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox as Ark } from '@ark-ui/react/checkbox';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, on, partsOf, slot, withParts } from '../utils.js';
 import '../theme.css';
 import './checkbox.css';

package/dist/checkbox/CheckboxGroup.d.ts

@@ -18,7 +18,7 @@
  * Shift-clicking a checkbox ticks (or clears) every item between it and the
  * last one clicked, as in mail and file lists.
  */
-import 'iconify-icon';
+import '../icons.js';
 import { type ComponentProps, type ReactNode } from 'react';
 import { type Classes } from '../utils.js';
 import '../theme.css';

package/dist/checkbox/CheckboxGroup.js

@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Shift-clicking a checkbox ticks (or clears) every item between it and the
  * last one clicked, as in mail and file lists.
  */
-import 'iconify-icon';
+import '../icons.js';
 import { useId, useRef } from 'react';
 import { useFieldContext } from '@ark-ui/react/field';
 import { Checkbox } from './Checkbox.js';

package/dist/checkbox/checkbox.css

@@ -3,7 +3,7 @@
     color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
     &[data-disabled] { opacity: 0.5; cursor: not-allowed; } }
   [data-scope=checkbox][data-part=control] { display: grid; place-items: center; flex-shrink: 0; width: 1rem; height: 1rem; box-sizing: border-box;
-    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) - 2px); color: var(--ui-accent-text);
+    background: var(--ui-field-bg); border: 1px solid var(--ui-field-border); border-radius: calc(var(--ui-radius) - 2px); color: var(--ui-accent-text);
     &:is([data-state=checked], [data-state=indeterminate]) { background: var(--ui-accent); border-color: var(--ui-accent); }
     &[data-focus-visible] { outline: 2px solid var(--ui-ring-soft); border-color: var(--ui-ring); }
     &[data-invalid] { border-color: var(--ui-danger); } }

package/dist/collapsible/Collapsible.d.ts

@@ -19,7 +19,7 @@
  */
 import type { ReactElement, ReactNode } from 'react';
 import { Collapsible as Ark, type CollapsibleOpenChangeDetails } from '@ark-ui/react/collapsible';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './collapsible.css';

package/dist/collapsible/Collapsible.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapsible as Ark } from '@ark-ui/react/collapsible';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, on, partsOf, withParts } from '../utils.js';
 import '../theme.css';
 import './collapsible.css';

package/dist/command/Command.d.ts

@@ -27,7 +27,7 @@
  */
 import { type ReactElement } from 'react';
 import { Dialog } from '@ark-ui/react/dialog';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './command.css';

package/dist/command/Command.js

@@ -30,7 +30,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Dialog } from '@ark-ui/react/dialog';
 import { Listbox, createListCollection, useListbox } from '@ark-ui/react/listbox';
 import { Portal } from '@ark-ui/react/portal';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, useControllable } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/copy-button/CopyButton.d.ts

@@ -14,7 +14,7 @@
  * (Clipboard.Root, Trigger, Indicator…) from '@ark-ui/react/clipboard'.
  */
 import type { ComponentProps } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './copy-button.css';

package/dist/copy-button/CopyButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clipboard, useClipboard } from '@ark-ui/react/clipboard';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/data-list/DataList.d.ts

@@ -23,7 +23,7 @@
  *   text in a tooltip; its content is the value
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './data-list.css';

package/dist/data-list/DataList.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   text in a tooltip; its content is the value
  */
 import { createContext, useContext } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { cx, partsOf, withParts } from '../utils.js';
 import '../theme.css';

package/dist/date-picker/DatePicker.d.ts

@@ -37,7 +37,7 @@
  */
 import { type ReactElement, type ReactNode } from 'react';
 import { DatePicker as Ark, parseDate, type DatePickerValueChangeDetails, type DateValue } from '@ark-ui/react/date-picker';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './date-picker.css';

package/dist/date-picker/DatePicker.js

@@ -41,7 +41,7 @@ import { DatePicker as Ark, parseDate, useDatePicker } from '@ark-ui/react/date-
 import { useFieldContext } from '@ark-ui/react/field';
 import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date';
 import { parseDateString } from '@zag-js/date-utils';
-import 'iconify-icon';
+import '../icons.js';
 import { useLocale, useMessages } from '../format/LocaleProvider.js';
 import { cx, partsOf, useControllable, withParts } from '../utils.js';
 import '../theme.css';

package/dist/date-picker/date-picker.css

@@ -7,8 +7,9 @@
     &[data-inline] { width: fit-content; } }
   [data-scope=date-picker][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
   [data-scope=date-picker][data-part=control] { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem;
-    height: var(--ui-control-height); box-sizing: border-box; background: var(--ui-surface);
-    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    height: var(--ui-control-height); box-sizing: border-box; background: var(--ui-field-bg);
+    border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius);
+    &:hover { border-color: var(--ui-field-border-hover); }
     &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
     &[data-invalid], &:has([aria-invalid=true]) { border-color: var(--ui-danger); }
     &[data-disabled] { opacity: 0.5; } }
@@ -23,7 +24,9 @@
     border-radius: 4px; color: var(--ui-muted); cursor: pointer;
     &:hover { background: var(--ui-hover); color: var(--ui-text); } }
 
-  /* Zag copies the content's z-index onto its positioner. */
+  /* The positioner carries the z-index itself. Zag sets it inline as
+     var(--z-index) but doesn't always fill in the variable, so set both. */
+  [data-scope=date-picker][data-part=positioner] { z-index: 50; --z-index: 50; }
   [data-scope=date-picker][data-part=content] { z-index: 50; padding: 0.75rem; background: var(--ui-surface); outline: none;
     border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow);
     /* An inline calendar in a popover (EventCalendar's date jump): the popover is the card. */

package/dist/dialog/Dialog.d.ts

@@ -50,7 +50,7 @@
  */
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Dialog as Ark, type DialogOpenChangeDetails } from '@ark-ui/react/dialog';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './dialog.css';

package/dist/dialog/Dialog.js

@@ -52,7 +52,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, isValidElement } from 'react';
 import { Dialog as Ark } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, on, partOf, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/editable/Editable.d.ts

@@ -18,7 +18,7 @@
  */
 import { type ReactNode } from 'react';
 import { Editable as Ark } from '@ark-ui/react/editable';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './editable.css';

package/dist/editable/Editable.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { Editable as Ark } from '@ark-ui/react/editable';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, withParts } from '../utils.js';
 import { useMessages } from '../format/LocaleProvider.js';
 import '../theme.css';

package/dist/editor/Editor.d.ts

@@ -27,7 +27,7 @@
  */
 import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
 import { Editor as TipTap } from '@tiptap/core';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './editor.css';

package/dist/editor/Editor.js

@@ -31,7 +31,7 @@ import { Editor as TipTap } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import { Placeholder, CharacterCount } from '@tiptap/extensions';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { RichImage } from './image.js';
 import { Popover } from '../popover/Popover.js';
 import { Input } from '../input/Input.js';

package/dist/editor/editor.css

@@ -1,8 +1,9 @@
 @layer ui {
   [data-scope=editor][data-part=label] { display: block; margin-bottom: 0.375rem; font-size: 14px; font-weight: 500; color: var(--ui-text); font-family: var(--ui-font); }
   [data-scope=editor][data-part=root] { display: block; position: relative; width: 100%; min-width: 0; box-sizing: border-box;
-    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    background: var(--ui-field-bg); border: 1px solid var(--ui-field-border); border-radius: var(--ui-radius);
     color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    &:hover { border-color: var(--ui-field-border-hover); }
     &[data-focused] { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
     &[data-invalid] { border-color: var(--ui-danger); }
     &[data-disabled] { background: var(--ui-hover); } }

package/dist/empty-state/EmptyState.d.ts

@@ -9,7 +9,7 @@
  * - the content: actions, e.g. a button to create the first item
  */
 import type { ComponentProps, ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './empty-state.css';

package/dist/empty-state/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf } from '../utils.js';
 import '../theme.css';
 import './empty-state.css';