@wtfalch/design 0.4.0 → 0.6.0

package/dist/components/Checkbox.d.ts

@@ -17,16 +17,36 @@
  * **This is not a `Toggle`.** A switch is the action and applies as it moves; a
  * checkbox is an answer that applies when something else is pressed. If there
  * is no Save at the end of it, this is the wrong control — see `Toggle`.
+ *
+ * **It can post itself.** `checked`/`onChange` were required and there was no
+ * `name`, which made this component unusable in a plain `<form action=…>`:
+ * with nothing to submit under, a caller wanting one boolean in a Server
+ * Action had to render `<input type="checkbox" name="x">` by hand and wrap it
+ * in its own `<label>`. That is exactly the native tick box this component
+ * exists to replace, and it reappeared the moment the form was uncontrolled —
+ * manage's break-glass form carried one, with a comment explaining why it had
+ * to. So `name` and `value` are passed through, and `checked` is optional:
+ * give it `checked` and `onChange` for a controlled box, `defaultChecked` (or
+ * neither) for one the form reads at submit.
  */
-export default function Checkbox({ label, hint, meta, checked, onChange, disabled, className, }: {
+export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, className, }: {
     label: React.ReactNode;
     /** What choosing it means, or what it costs. Under the name. `hint`, the
      *  word `Toggle`, `Slider` and `Field` use for the same line; it was `why`. */
     hint?: React.ReactNode;
     /** A quieter third line — a path, a size, an id. */
     meta?: React.ReactNode;
-    checked: boolean;
-    onChange: (on: boolean) => void;
+    /** Controlled. Omit it, with `name`, for a box a form reads at submit. */
+    checked?: boolean;
+    /** The uncontrolled starting state. Ignored when `checked` is given. */
+    defaultChecked?: boolean;
+    onChange?: (on: boolean) => void;
+    /** What the form submits this under. Without it there is nothing to post,
+     *  which is what sent callers back to a native tick box. */
+    name?: string;
+    /** What the form submits when it is ticked. The browser's default is `on`,
+     *  which is rarely the word a Server Action wants to read. */
+    value?: string;
     disabled?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -18,14 +18,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * **This is not a `Toggle`.** A switch is the action and applies as it moves; a
  * checkbox is an answer that applies when something else is pressed. If there
  * is no Save at the end of it, this is the wrong control — see `Toggle`.
+ *
+ * **It can post itself.** `checked`/`onChange` were required and there was no
+ * `name`, which made this component unusable in a plain `<form action=…>`:
+ * with nothing to submit under, a caller wanting one boolean in a Server
+ * Action had to render `<input type="checkbox" name="x">` by hand and wrap it
+ * in its own `<label>`. That is exactly the native tick box this component
+ * exists to replace, and it reappeared the moment the form was uncontrolled —
+ * manage's break-glass form carried one, with a comment explaining why it had
+ * to. So `name` and `value` are passed through, and `checked` is optional:
+ * give it `checked` and `onChange` for a controlled box, `defaultChecked` (or
+ * neither) for one the form reads at submit.
  */
 import { Checkbox as AriaCheckbox } from 'react-aria-components';
-export default function Checkbox({ label, hint, meta, checked, onChange, disabled, className, }) {
+export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, className, }) {
     /* React Aria's `Checkbox` is the `<label>`. It keeps the real input in the
        markup and visually hidden -- exactly the arrangement this component
        already had by hand -- and stamps `data-selected`, `data-focus-visible`
        and `data-disabled` on the row. The ring and the tick are still drawn by
        the row's `::after` and `::before`; `checkbox.css` now reads the state off
        those attributes instead of `:has(input:checked)`. */
-    return (_jsx(AriaCheckbox, { className: `choice${className ? ` ${className}` : ''}`, isSelected: checked, onChange: onChange, isDisabled: disabled, children: _jsxs("span", { className: "choice-body", children: [_jsx("span", { className: "choice-name", children: label }), hint && _jsx("span", { className: "choice-why", children: hint }), meta && _jsx("span", { className: "choice-meta", children: meta })] }) }));
+    return (_jsx(AriaCheckbox, { className: `choice${className ? ` ${className}` : ''}`, 
+        /* `undefined` is what makes React Aria leave the box uncontrolled, so
+           the controlled and uncontrolled cases are the same call: pass both and
+           let whichever was given decide. Passing `isSelected={false}` here
+           instead would silently pin every uncontrolled box to off. */
+        isSelected: checked, defaultSelected: defaultChecked, onChange: onChange, name: name, value: value, isDisabled: disabled, children: _jsxs("span", { className: "choice-body", children: [_jsx("span", { className: "choice-name", children: label }), hint && _jsx("span", { className: "choice-why", children: hint }), meta && _jsx("span", { className: "choice-meta", children: meta })] }) }));
 }

package/dist/components/Field.d.ts

@@ -33,6 +33,19 @@ export interface FieldWiring {
     id: string;
     'aria-describedby': string | undefined;
     'aria-invalid': boolean | undefined;
+    /** The label element's own id, for a control a `<label for>` cannot name.
+     *
+     *  `htmlFor` is enough for an `<input>`, which is what almost every caller
+     *  wraps. It is not enough for `Select`, or for anything else built on a
+     *  `<button>`: a button takes its accessible name from its *contents*, and
+     *  a `<label for>` pointing at one is ignored by the name computation. A
+     *  caller that put a `Select` in a `Field` got a label on screen and a
+     *  control announcing only its current value — and the workaround was an
+     *  `aria-label` repeating the label string, which is two literals and two
+     *  chances to drift apart. That drift is exactly the bug this component
+     *  exists to prevent, so: pass this as `aria-labelledby` and there is one
+     *  string in one place. */
+    labelId: string;
 }
 export default function Field({ label, hint, error, required, children, labelHidden, layout, className, }: {
     /** What the field is. Always given -- there is no unlabelled case, only

package/dist/components/Field.js

@@ -35,8 +35,10 @@ export default function Field({ label, hint, error, required, children, labelHid
     const id = useId();
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
-    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { className: labelHidden ? 'sr-only' : 'field-label', htmlFor: id, children: [label, required && (_jsxs("span", { className: "field-required", "aria-label": "required", children: [' ', "*"] }))] }), hint && (_jsx("p", { className: "field-hint", id: hintId, children: hint })), children({
+    const labelId = `${id}-label`;
+    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { id: labelId, className: labelHidden ? 'sr-only' : 'field-label', htmlFor: id, children: [label, required && (_jsxs("span", { className: "field-required", "aria-label": "required", children: [' ', "*"] }))] }), hint && (_jsx("p", { className: "field-hint", id: hintId, children: hint })), children({
                 id,
+                labelId,
                 /* Both, in reading order, when both are there. A field that has a rule
                    and has broken it needs to say the rule too -- "must be a URL" on its
                    own does not tell you what shape of URL. */

package/dist/components/Icon.d.ts

@@ -22,13 +22,13 @@
  * **Inlined rather than installed.** The npm package ships the whole set, and a
  * font or a bundle has to load before anything draws -- in an app that opens
  * offline, on a machine that has just downloaded it, that is a flash of missing
- * chrome on the one screen that has to inspire confidence. Nineteen glyphs cost
- * nothing and cannot fail to arrive.
+ * chrome on the one screen that has to inspire confidence. Forty-two glyphs
+ * cost nothing and cannot fail to arrive.
  *
  * `currentColor` throughout, so an icon takes the colour of the thing it sits
  * in and never needs a variant.
  *
- * Source names, if you need to add a twentieth from https://pepicons.com:
+ * Source names, if you need to add another from https://pepicons.com:
  *   chat      text-bubble
  *   settings  gear
  *   refresh   arrows-spin
@@ -49,7 +49,20 @@
  *   mic       microphone
  *   back      arrow-left
  *   spinner   arrow-spin
-  file      file
+ *   file      file
+ *   mail      letter
+ *   mail-open letter-open
+ *   pen       pen
+ *   send      paper-plane
+ *   trash     trash
+ *   paperclip paperclip
+ *   star      star
+ *   star-filled star-filled
+ *   search    loop          (Pepicons' name for a magnifier)
+ *   more      dots-x
+ *   menu      menu
+ *   reply     arrow-up-left
+ *   forward   arrow-up-right
  */
 import type { IconName } from './iconNames.js';
 export type { IconName };

package/dist/components/iconNames.d.ts

@@ -14,5 +14,5 @@
  * derived from this, so the type, the glyph table and the gallery cannot
  * disagree.
  */
-export declare const ICON_NAMES: readonly ["chat", "settings", "refresh", "minimize", "code", "wifi", "wifi-off", "check", "close", "info", "warning", "error", "expand", "download", "image", "bolt", "speaker", "mic", "back", "spinner", "folder", "book", "eye", "eye-off", "palette", "stars", "wrench", "cloud", "file"];
+export declare const ICON_NAMES: readonly ["chat", "settings", "refresh", "minimize", "code", "wifi", "wifi-off", "check", "close", "info", "warning", "error", "expand", "download", "image", "bolt", "speaker", "mic", "back", "spinner", "folder", "book", "eye", "eye-off", "palette", "stars", "wrench", "cloud", "file", "mail", "mail-open", "pen", "send", "trash", "paperclip", "star", "star-filled", "search", "more", "menu", "reply", "forward"];
 export type IconName = (typeof ICON_NAMES)[number];

package/dist/components/iconNames.js

@@ -57,4 +57,29 @@ export const ICON_NAMES = [
     // is the wrong noun: you are handing over one file, not opening a place
     // that holds several.
     'file',
+    // A mail client's vocabulary, added for `@wtfalch/email`'s mailbox. The set
+    // had no noun for a message, a folder to file one in, or any of the four
+    // things you do to one, so the mailbox was drawing Inbox with `chat`, Sent
+    // with `download` and Deleted Items with `close` -- three right shapes for
+    // three wrong words. Measured the same way as the rest; see the `Glyph`
+    // docstring in `Icon.tsx`.
+    'mail',
+    'mail-open',
+    'pen',
+    'send',
+    'trash',
+    'paperclip',
+    // `star` is a rating or a flagged message; `stars` above it is the
+    // sparkles, and means generated. One letter apart and unrelated, which is
+    // worth the comment: reach for the wrong one and it still compiles.
+    'star',
+    'star-filled',
+    'search',
+    'more',
+    'menu',
+    // Diagonal arrows, which is what every minimal set draws reply and forward
+    // as. Pepicons has no curved corner arrow, and a horizontal `arrow-left`
+    // reads as going back rather than answering.
+    'reply',
+    'forward',
 ];

package/dist/components/icons.js

@@ -250,4 +250,101 @@ export const ICONS = {
             'M11 3h-1a4 4 0 0 0-3.874 3H6a4 4 0 1 0 0 8h8a4 4 0 0 0 .899-7.899A4 4 0 0 0 11 3M6.901 7l.193-.75A3 3 0 0 1 10 4h1c1.405 0 2.614.975 2.924 2.325l.14.61l.61.141A3.001 3.001 0 0 1 14 13H6a3 3 0 1 1 0-6z',
         ],
     },
+    /* The mail set. Every one of these is a Pepicons Pencil glyph measured the
+       way the paragraph above describes: bounding box from `getBBox()`,
+       re-centred, grown to 78% fill, magnification clamped to 0.85x-1.45x of
+       its own 20-unit grid. `reply` and `forward` sit on the upper clamp, as
+       `close` does -- small drawings that would otherwise come out at twice
+       the ink weight of their neighbours. */
+    mail: {
+        view: '0.38 0.38 19.23 19.23',
+        d: [
+            'M17 4H3a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-11A.5.5 0 0 0 17 4M3.5 15V5h13v10z',
+            'm17.324 4.88l-7.045 6a.5.5 0 0 1-.65-.001l-6.956-6A.5.5 0 0 1 3 4h14a.5.5 0 0 1 .324.88M15.642 5H4.345l5.612 4.841z',
+        ],
+    },
+    'mail-open': {
+        view: '-0.26 -0.26 20.51 20.51',
+        d: [
+            'M2.5 8a.5.5 0 0 1 .5.5V17h14V8.5a.5.5 0 0 1 1 0v9a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5',
+            'M3 5.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v4.67a.5.5 0 0 1-.223.416l-6.5 4.33a.5.5 0 0 1-.554 0l-6.5-4.33A.5.5 0 0 1 3 10.17zM4 6v3.902l6 3.997l6-3.997V6z',
+            'M9.723 2.084a.5.5 0 0 1 .554 0l4.5 3l-.554.832L10 3.101L5.777 5.916l-.554-.832zm7.131 5.062l1 1l-.708.708l-1-1zm-13 .708l-1 1l-.708-.708l1-1zM6.75 8A.25.25 0 0 1 7 7.75h6a.25.25 0 1 1 0 .5H7A.25.25 0 0 1 6.75 8m.5 2a.25.25 0 0 1 .25-.25h5a.25.25 0 1 1 0 .5h-5a.25.25 0 0 1-.25-.25',
+        ],
+    },
+    pen: {
+        view: '1.02 -0.92 20.09 20.09',
+        d: [
+            'M3.944 11.79a.5.5 0 0 1 .141-.277L14.163 1.435a.5.5 0 0 1 .707 0l3.89 3.89a.5.5 0 0 1 0 .706L8.68 16.11a.5.5 0 0 1-.277.14l-4.595.706a.5.5 0 0 1-.57-.57zm.964.314l-.577 3.76l3.759-.578l9.609-9.608l-3.183-3.182z',
+            'm15.472 8.173l-3.537-3.53l.707-.708l3.536 3.53z',
+        ],
+    },
+    send: {
+        view: '-2.09 -1.79 21.9 21.9',
+        d: [
+            'M.874 7.454L8.697 9.5l2.803 7.868a.5.5 0 0 0 .95-.026l4.746-16.085a.5.5 0 0 0-.655-.61L.826 6.502a.5.5 0 0 0 .048.952m1.783-.567l13.296-4.954l-4.027 13.652l-2.376-6.67a.5.5 0 0 0-.344-.315z',
+            'm16 1.293l.707.707L9 9.707L8.293 9z',
+        ],
+    },
+    trash: {
+        view: '0.74 1.01 18.52 18.52',
+        d: [
+            'M8.5 14.999a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm-1-10.5h-3a1.501 1.501 0 0 1 3-.001',
+            'M4.5 4.999a.5.5 0 1 1 0-1h11a.5.5 0 0 1 0 1z',
+            'M14.5 5.5h-9A.5.5 0 0 0 5 6v11a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5M6 16.5v-10h8v10z',
+        ],
+    },
+    paperclip: {
+        view: '-0.99 -0.41 21.47 21.47',
+        d: [
+            'M9.455 3.188a4 4 0 0 1 5.79 5.521l-5.349 5.608a2.25 2.25 0 0 1-3.258-3.106l4.485-4.706a.5.5 0 1 1 .724.69L7.362 11.9a1.25 1.25 0 0 0 1.81 1.726l5.349-5.608a3 3 0 1 0-4.342-4.141L5.348 8.944a.5.5 0 1 1-.724-.69z',
+            'M4.463 16.391c-.439-.419-.824-1.056-1.145-1.758c-.71-1.552-.17-3.383 1.097-4.712L8.8 5.325a.5.5 0 0 0-.724-.69L3.692 9.231c-1.455 1.526-2.214 3.783-1.284 5.818c.342.747.791 1.518 1.365 2.066c.566.54 1.342.947 2.094 1.251c2.095.849 4.337-.039 5.791-1.593l5.692-6.081a.5.5 0 1 0-.73-.684l-5.692 6.082c-1.267 1.354-3.089 1.996-4.686 1.35c-.704-.286-1.346-.636-1.779-1.049',
+        ],
+    },
+    star: {
+        view: '-0.25 -0.51 20.51 20.51',
+        d: [
+            'M10 2a.5.5 0 0 1 .435.253l2.425 4.274l4.745 1.023a.5.5 0 0 1 .27.82l-3.253 3.667l.51 4.911a.5.5 0 0 1-.703.507L10 15.448l-4.429 2.007a.5.5 0 0 1-.704-.507l.51-4.91l-3.25-3.668a.5.5 0 0 1 .269-.82L7.14 6.527l2.425-4.274A.5.5 0 0 1 10 2m0 1.513L7.9 7.215a.5.5 0 0 1-.33.242l-4.128.89l2.83 3.191a.5.5 0 0 1 .123.384l-.443 4.263l3.842-1.74a.5.5 0 0 1 .412 0l3.842 1.74l-.443-4.263a.5.5 0 0 1 .123-.384l2.83-3.191l-4.128-.89a.5.5 0 0 1-.33-.242z',
+        ],
+    },
+    'star-filled': {
+        view: '-1.03 -1.3 22.07 22.07',
+        d: [
+            'm10 15.97l-4.295 1.915a1 1 0 0 1-1.402-1.018l.494-4.677L1.65 8.698a1 1 0 0 1 .535-1.647l4.6-.976L9.134 2a1 1 0 0 1 1.732 0l2.35 4.074l4.6.976a1 1 0 0 1 .535 1.647l-3.148 3.494l.494 4.676a1 1 0 0 1-1.402 1.018z',
+        ],
+    },
+    search: {
+        view: '1.62 1.66 15.87 15.87',
+        d: [
+            'M4.828 4.828A5 5 0 1 0 11.9 11.9a5 5 0 0 0-7.07-7.07m6.364 6.364a4 4 0 1 1-5.656-5.657a4 4 0 0 1 5.656 5.657',
+            'M11.192 12.627a1 1 0 0 1 1.415-1.414l2.828 2.829a1 1 0 1 1-1.414 1.414z',
+        ],
+    },
+    more: {
+        view: '2.24 2.24 16.03 16.03',
+        d: [
+            'M14 10.25a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0m-5 0a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0m-5 0a1.249 1.249 0 1 1 2.5 0a1.25 1.25 0 1 1-2.5 0',
+        ],
+    },
+    menu: {
+        view: '-0.26 0.24 20.51 20.51',
+        d: [
+            'M2 8.5a.5.5 0 0 1 .5-.5h11.308a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h11.308a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5',
+        ],
+    },
+    reply: {
+        view: '2.87 2.87 13.79 13.79',
+        d: [
+            'M5.948 12.145a.5.5 0 0 1-.453-.543l.471-5.186a.5.5 0 0 1 .996.09l-.471 5.186a.5.5 0 0 1-.543.453',
+            'M12.148 5.945a.5.5 0 0 1-.453.543L6.51 6.96a.5.5 0 0 1-.09-.996l5.185-.472a.5.5 0 0 1 .543.453',
+            'M6.647 6.643a.5.5 0 0 1 .707 0l6.535 6.536a.5.5 0 1 1-.707.707L6.646 7.351a.5.5 0 0 1 0-.708',
+        ],
+    },
+    forward: {
+        view: '3.34 2.87 13.79 13.79',
+        d: [
+            'M7.852 5.952a.5.5 0 0 1 .543-.453l5.186.472a.5.5 0 0 1-.09.996l-5.186-.472a.5.5 0 0 1-.453-.543',
+            'M14.052 12.152a.5.5 0 0 1-.543-.453l-.472-5.185a.5.5 0 0 1 .996-.09l.472 5.185a.5.5 0 0 1-.453.543',
+            'M13.354 6.65a.5.5 0 0 1 0 .708l-6.536 6.535a.5.5 0 0 1-.707-.707l6.535-6.536a.5.5 0 0 1 .707 0',
+        ],
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",
@@ -24,9 +24,7 @@
   },
   "license": "MIT",
   "type": "module",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "publishConfig": {
     "access": "public"
   },
@@ -52,12 +50,16 @@
     "./tokens.css": "./dist/tokens.css",
     "./styles.css": "./dist/styles/index.css"
   },
-  "sideEffects": [
-    "*.css"
-  ],
+  "sideEffects": ["*.css"],
   "engines": {
     "node": ">=22.0.0"
   },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/copy-css.mjs && node scripts/build-products.mjs",
+    "prepack": "pnpm build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -75,10 +77,5 @@
     "react-dom": "^19",
     "typescript": "^5.9.0",
     "vitest": "^4.1.6"
-  },
-  "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/copy-css.mjs && node scripts/build-products.mjs",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
   }
-}
+}