@enigmax/primitives 0.17.0 → 0.19.0

package/dist/search-UQEXAPQB.js

@@ -0,0 +1,50 @@
+import { createSearch } from './chunk-D5A2ZMAG.js';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function SearchExtras({
+  input,
+  items,
+  keys,
+  delay = 150,
+  limit,
+  fuse,
+  fuseOptions,
+  matcher,
+  onResults,
+  renderResults
+}) {
+  const [results, setResults] = useState([]);
+  const [query, setQuery] = useState("");
+  const listener = useRef(onResults);
+  listener.current = onResults;
+  const instance = useMemo(() => createSearch({
+    items,
+    keys,
+    fuse,
+    fuseOptions,
+    matcher,
+    debounce: delay,
+    limit,
+    onResults: (next, nextQuery) => {
+      setResults(next);
+      setQuery(nextQuery);
+      listener.current?.(next, nextQuery);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+  useEffect(() => () => instance.destroy(), [instance]);
+  useEffect(() => {
+    instance.setItems(items ?? []);
+  }, [instance, items]);
+  useEffect(() => {
+    instance.update({ keys, fuse, fuseOptions, matcher, debounce: delay, limit });
+  }, [instance, keys, fuse, fuseOptions, matcher, delay, limit]);
+  useEffect(() => {
+    if (!input) return;
+    return instance.attach(input);
+  }, [instance, input]);
+  return renderResults ? /* @__PURE__ */ jsx(Fragment, { children: renderResults(results, query) }) : null;
+}
+
+export { SearchExtras };

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -14,6 +17,50 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js"
     },
+    "./react/input": {
+      "types": "./dist/react/input.d.ts",
+      "import": "./dist/react/input.js"
+    },
+    "./react/palette": {
+      "types": "./dist/react/palette.d.ts",
+      "import": "./dist/react/palette.js"
+    },
+    "./react/button": {
+      "types": "./dist/react/button.d.ts",
+      "import": "./dist/react/button.js"
+    },
+    "./react/flag": {
+      "types": "./dist/react/flag.d.ts",
+      "import": "./dist/react/flag.js"
+    },
+    "./react/toast": {
+      "types": "./dist/react/toast.d.ts",
+      "import": "./dist/react/toast.js"
+    },
+    "./react/marquee": {
+      "types": "./dist/react/marquee.d.ts",
+      "import": "./dist/react/marquee.js"
+    },
+    "./react/search": {
+      "types": "./dist/react/search.d.ts",
+      "import": "./dist/react/search.js"
+    },
+    "./react/network": {
+      "types": "./dist/react/network.d.ts",
+      "import": "./dist/react/network.js"
+    },
+    "./react/notifications": {
+      "types": "./dist/react/notifications.d.ts",
+      "import": "./dist/react/notifications.js"
+    },
+    "./react/relative-time": {
+      "types": "./dist/react/relative-time.d.ts",
+      "import": "./dist/react/relative-time.js"
+    },
+    "./react/slot": {
+      "types": "./dist/react/slot.d.ts",
+      "import": "./dist/react/slot.js"
+    },
     "./registry.json": "./registry.json",
     "./search": {
       "types": "./dist/search/index.d.ts",
@@ -31,7 +78,8 @@
     "./toast.css": "./recipes/toast/styles.css",
     "./input.css": "./recipes/input/styles.css",
     "./marquee.css": "./recipes/marquee/styles.css",
-    "./logo-marquee.css": "./recipes/logo-marquee/styles.css"
+    "./logo-marquee.css": "./recipes/logo-marquee/styles.css",
+    "./palette.css": "./recipes/palette/styles.css"
   },
   "scripts": {
     "build": "tsup",
@@ -51,6 +99,7 @@
   ],
   "peerDependencies": {
     "@github/relative-time-element": ">=4",
+    "react-dom": ">=18",
     "fuse.js": ">=6",
     "next": ">=13",
     "react": ">=18",
@@ -60,6 +109,9 @@
     "react": {
       "optional": true
     },
+    "react-dom": {
+      "optional": true
+    },
     "fuse.js": {
       "optional": true
     },
@@ -92,7 +144,6 @@
   "keywords": [
     "carousel",
     "enigma",
-    "flag-icons",
     "flags",
     "fuse",
     "headless",

package/recipes/input/styles.css

@@ -1,23 +1,64 @@
-/* A starting point for the field, yours to edit. The primitive renders the structure and
-   publishes its state through data-* attributes; every colour below is this file's. */
+/*
+ * A starting point for the field, yours to edit.
+ *
+ * The primitive renders the structure and publishes its state through data-* attributes;
+ * every colour and distance below is this file's. The custom properties at the top are the
+ * whole API - override them on `:root` and you have a different field without touching a
+ * selector, which is the same arrangement the toast and the palette use.
+ */
+
+:root {
+    --enigma-input-bg: #171717;
+    --enigma-input-border: #404040;
+    --enigma-input-border-focus: #a3a3a3;
+    --enigma-input-text: #f5f5f5;
+    --enigma-input-muted: #a3a3a3;
+    --enigma-input-radius: 0.5rem;
+    --enigma-input-font-size: 0.875rem;
+    --enigma-input-padding: 0 0.75rem;
+    --enigma-input-danger: #dc2626;
+    --enigma-input-accent: #fbbf24;
+
+    /* The meter, worst to best. A headless package has no business deciding what "strong"
+       looks like on your brand, so the five bands are here rather than in the component. */
+    --enigma-strength-empty: #262626;
+    --enigma-strength-0: #dc2626;
+    --enigma-strength-1: #ea580c;
+    --enigma-strength-2: #eab308;
+    --enigma-strength-3: #84cc16;
+    --enigma-strength-4: #16a34a;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-input-bg: #ffffff;
+        --enigma-input-border: #d4d4d4;
+        --enigma-input-border-focus: #737373;
+        --enigma-input-text: #171717;
+        --enigma-input-muted: #737373;
+        --enigma-strength-empty: #e5e5e5;
+    }
+}
 
 [data-enigma-input-root] { display: grid; gap: 0.375rem; }
 
 [data-enigma-input-field] {
     display: flex; align-items: center; gap: 0.375rem;
-    padding: 0 0.75rem;
-    background: #171717; border: 1px solid #404040; border-radius: 0.5rem;
+    padding: var(--enigma-input-padding);
+    background: var(--enigma-input-bg);
+    border: 1px solid var(--enigma-input-border);
+    border-radius: var(--enigma-input-radius);
 }
-[data-enigma-input-field]:focus-within { border-color: #a3a3a3; }
+[data-enigma-input-field]:focus-within { border-color: var(--enigma-input-border-focus); }
 
 [data-enigma-input] {
     flex: 1; min-width: 0; padding: 0.625rem 0;
-    font-size: 0.875rem; color: #f5f5f5;
+    font-size: var(--enigma-input-font-size); color: var(--enigma-input-text);
     background: transparent; border: 0; outline: none;
 }
 
 /* A breached password is worth showing on the field itself, not only in the message. */
-[data-enigma-input-root][data-breached] [data-enigma-input-field] { border-color: #dc2626; }
+[data-enigma-input-root][data-breached] [data-enigma-input-field] { border-color: var(--enigma-input-danger); }
 
 [data-enigma-input-actions] { display: inline-flex; gap: 0.125rem; }
 [data-enigma-input-actions][data-position="start"] { order: -1; }
@@ -25,30 +66,29 @@
 [data-enigma-input-action] {
     display: grid; place-items: center;
     width: 1.75rem; height: 1.75rem;
-    color: #a3a3a3; background: none; border: 0; border-radius: 0.375rem;
+    color: var(--enigma-input-muted); background: none; border: 0; border-radius: 0.375rem;
     cursor: pointer; font-size: 0.9375rem;
 }
-[data-enigma-input-action]:hover { color: #f5f5f5; background: #262626; }
-[data-enigma-input-action][aria-pressed="true"] { color: #fbbf24; }
+[data-enigma-input-action]:hover { color: var(--enigma-input-text); background: color-mix(in srgb, var(--enigma-input-border) 45%, transparent); }
+[data-enigma-input-action][aria-pressed="true"] { color: var(--enigma-input-accent); }
 [data-enigma-input-action]:disabled { opacity: 0.5; cursor: default; }
 
-/* The meter. Five bars, one per score, red through green - the palette lives here because
-   a headless package has no business choosing what "strong" looks like on your brand. */
+/* The meter. Five bars, one per score, red through green. */
 [data-enigma-password-strength] { display: grid; gap: 0.25rem; }
 [data-enigma-password-strength-track] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
 
 [data-enigma-password-strength-segment] {
-    height: 0.25rem; border-radius: 999px; background: #262626;
+    height: 0.25rem; border-radius: 999px; background: var(--enigma-strength-empty);
     transition: background-color 120ms ease-out;
 }
 
-[data-score="0"] [data-enigma-password-strength-segment][data-filled] { background: #dc2626; }
-[data-score="1"] [data-enigma-password-strength-segment][data-filled] { background: #ea580c; }
-[data-score="2"] [data-enigma-password-strength-segment][data-filled] { background: #eab308; }
-[data-score="3"] [data-enigma-password-strength-segment][data-filled] { background: #84cc16; }
-[data-score="4"] [data-enigma-password-strength-segment][data-filled] { background: #16a34a; }
+[data-score="0"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-0); }
+[data-score="1"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-1); }
+[data-score="2"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-2); }
+[data-score="3"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-3); }
+[data-score="4"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-4); }
 
-[data-enigma-password-strength-label] { margin: 0; font-size: 0.75rem; color: #a3a3a3; }
-[data-enigma-password-strength-warning] { margin: 0; font-size: 0.75rem; color: #fbbf24; }
+[data-enigma-password-strength-label] { margin: 0; font-size: 0.75rem; color: var(--enigma-input-muted); }
+[data-enigma-password-strength-warning] { margin: 0; font-size: 0.75rem; color: var(--enigma-input-accent); }
 /* An empty field is not a bad password: say nothing until there is something to say. */
 [data-enigma-password-strength][data-empty] [data-enigma-password-strength-label] { visibility: hidden; }

package/recipes/palette/styles.css

@@ -0,0 +1,243 @@
+/*
+ * The palette's look.
+ *
+ * `SearchPalette` renders the structure, the state and every key it answers to; every
+ * colour, distance and curve is in this file. Nothing below is something the package decided
+ * for you, so editing it is the supported way to make it yours.
+ *
+ * The custom properties at the top are the whole API. Override them on `:root` and you have
+ * a different palette without touching a selector.
+ */
+
+:root {
+    --enigma-palette-width: 34rem;
+    --enigma-palette-radius: 0.85rem;
+    --enigma-palette-top: 12vh;
+
+    --enigma-palette-bg: #101010;
+    --enigma-palette-border: #2a2a2a;
+    --enigma-palette-text: #f5f5f5;
+    --enigma-palette-muted: #a3a3a3;
+    --enigma-palette-active: #1c1c1c;
+    --enigma-palette-accent: #e0a458;
+    --enigma-palette-shadow: 0 20px 60px rgb(0 0 0 / 55%);
+    --enigma-palette-scrim: rgb(0 0 0 / 55%);
+    --enigma-palette-enter: 160ms;
+    --enigma-palette-exit: 140ms;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-palette-bg: #ffffff;
+        --enigma-palette-border: #e5e5e5;
+        --enigma-palette-text: #171717;
+        --enigma-palette-muted: #737373;
+        --enigma-palette-active: #f5f5f5;
+        --enigma-palette-shadow: 0 20px 60px rgb(0 0 0 / 18%);
+        --enigma-palette-scrim: rgb(0 0 0 / 25%);
+    }
+}
+
+/* -------- the trigger -------- */
+
+[data-enigma-palette-trigger] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 12rem;
+    padding: 0.45rem 0.6rem;
+    font: inherit;
+    font-size: 0.8125rem;
+    /* Set explicitly: this may be rendered as a button or, through asChild, as something
+       else entirely, and only a button gets `line-height: normal` from the user agent. */
+    line-height: 1.25;
+    color: var(--enigma-palette-muted);
+    background: transparent;
+    border: 1px solid var(--enigma-palette-border);
+    border-radius: 0.6rem;
+    cursor: pointer;
+}
+
+[data-enigma-palette-trigger]:hover { color: var(--enigma-palette-text); }
+[data-enigma-palette-trigger-label] { flex: 1; text-align: left; }
+
+[data-enigma-palette-trigger-key] {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.6875rem;
+    padding: 0.15rem 0.35rem;
+    border: 1px solid var(--enigma-palette-border);
+    border-radius: 0.3rem;
+}
+
+/* -------- the panel -------- */
+
+[data-enigma-palette-overlay] {
+    position: fixed;
+    inset: 0;
+    z-index: 9998;
+    background: var(--enigma-palette-scrim);
+    /* Behind the panel, and the only thing a click outside can land on. */
+    backdrop-filter: blur(2px);
+    animation: enigma-palette-fade var(--enigma-palette-enter) ease-out;
+}
+
+/* The panel stays in the DOM through its exit (`closeDuration`), which is the only way a
+   component that unmounts on close can animate out at all. */
+[data-enigma-palette-overlay][data-state="closed"] {
+    animation: enigma-palette-fade var(--enigma-palette-exit) ease-in reverse forwards;
+}
+
+[data-enigma-palette-content] {
+    position: fixed;
+    z-index: 9999;
+    top: var(--enigma-palette-top);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    width: min(var(--enigma-palette-width), calc(100vw - 2rem));
+    /* Never taller than the room it has: the list scrolls, the field and the footer stay. */
+    max-height: min(70vh, 32rem);
+    overflow: hidden;
+    color: var(--enigma-palette-text);
+    background: var(--enigma-palette-bg);
+    border: 1px solid var(--enigma-palette-border);
+    border-radius: var(--enigma-palette-radius);
+    box-shadow: var(--enigma-palette-shadow);
+    animation: enigma-palette-in var(--enigma-palette-enter) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-enigma-palette-content][data-state="closed"] {
+    animation: enigma-palette-in var(--enigma-palette-exit) ease-in reverse forwards;
+}
+
+@keyframes enigma-palette-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Down and in: the panel arrives rather than appearing whole. */
+@keyframes enigma-palette-in {
+    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.98); }
+    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
+}
+
+/* Reduced motion keeps the fade and drops the movement: the panel still has to announce
+   itself as new, and a hard cut in the middle of the screen is its own kind of jolt. */
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-palette-content],
+    [data-enigma-palette-content][data-state="closed"] {
+        animation-name: enigma-palette-fade;
+        animation-duration: 90ms;
+    }
+}
+
+/* The dialog needs a name; nobody needs to see it. */
+[data-enigma-palette-title] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+[data-enigma-palette-field] {
+    display: block;
+    width: 100%;
+    padding: 0.95rem 1.1rem;
+    font: inherit;
+    font-size: 0.95rem;
+    /* Both set explicitly. A field inherits nothing useful from a dialog - a page that
+       styles `input` at all (a reset, a framework, the site's own form CSS) otherwise
+       reaches in and leaves the palette with a field that does not match its own panel. */
+    color: var(--enigma-palette-text);
+    background: var(--enigma-palette-bg);
+    border: 0;
+    border-bottom: 1px solid var(--enigma-palette-border);
+    border-radius: 0;
+    outline: none;
+    box-shadow: none;
+}
+
+[data-enigma-palette-field]::placeholder { color: var(--enigma-palette-muted); }
+/* The platform's own clear button would sit next to a list that already answers to Escape. */
+[data-enigma-palette-field]::-webkit-search-cancel-button { display: none; }
+
+[data-enigma-palette-list] {
+    flex: 1;
+    overflow-y: auto;
+    /* A scroll that reaches the end stays in the panel instead of moving the page under it. */
+    overscroll-behavior: contain;
+    padding: 0.4rem;
+}
+
+[data-enigma-palette-group-label] {
+    margin: 0.4rem 0.6rem 0.25rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--enigma-palette-muted);
+}
+
+[data-enigma-palette-item] {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.55rem 0.6rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+}
+
+/* One highlight, whether it was the keyboard or the pointer that moved it. */
+[data-enigma-palette-item][data-active="true"] { background: var(--enigma-palette-active); }
+[data-enigma-palette-item][data-kind="recent"] [data-enigma-palette-item-label]::before {
+    content: "";
+    display: inline-block;
+    width: 0.35rem;
+    height: 0.35rem;
+    margin-right: 0.5rem;
+    vertical-align: 0.1rem;
+    border-radius: 999px;
+    background: var(--enigma-palette-accent);
+}
+
+[data-enigma-palette-item-label] { flex: 1; min-width: 0; }
+[data-enigma-palette-item-description] { color: var(--enigma-palette-muted); font-size: 0.8125rem; }
+
+[data-enigma-palette-empty] {
+    margin: 0;
+    padding: 2.5rem 1rem;
+    text-align: center;
+    color: var(--enigma-palette-muted);
+    font-size: 0.875rem;
+}
+
+[data-enigma-palette-footer] {
+    display: flex;
+    gap: 1rem;
+    padding: 0.55rem 0.9rem;
+    font-size: 0.75rem;
+    color: var(--enigma-palette-muted);
+    border-top: 1px solid var(--enigma-palette-border);
+}
+
+[data-enigma-palette-hint] kbd {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.6875rem;
+    padding: 0.1rem 0.3rem;
+    margin-right: 0.2rem;
+    border: 1px solid var(--enigma-palette-border);
+    border-radius: 0.25rem;
+}
+
+/* A phone has no Escape key and less room: the panel takes the top of the screen. */
+@media (max-width: 640px) {
+    [data-enigma-palette-content] {
+        top: 0.75rem;
+        max-height: calc(100vh - 1.5rem);
+    }
+}