@wtfalch/design 0.10.1 → 0.10.2

package/dist/components/Checkbox.d.ts

@@ -1,4 +1,4 @@
-export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, className, }: {
+export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, tile, 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`. */
@@ -17,5 +17,15 @@ export default function Checkbox({ label, hint, meta, checked, defaultChecked, o
      *  which is rarely the word a Server Action wants to read. */
     value?: string;
     disabled?: boolean;
+    /** In a grid of tiles rather than a run of full-width rows.
+     *
+     *  The tick is positioned at the top right, and in a full-width row the
+     *  label never reaches it. In a tile it runs underneath, so the body needs
+     *  the room reserved. This was a `.choice-tiles .choice-body` rule, which
+     *  meant the package styling its own component through a class the caller
+     *  had to know to write on the container -- and there is no such container
+     *  component, so the class was only ever a private name in a consumer's
+     *  markup. A prop says the same thing and belongs to the component. */
+    tile?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -38,14 +38,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * neither) for one the form reads at submit.
  */
 import { Checkbox as AriaCheckbox } from 'react-aria-components';
-export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, className, }) {
+export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, tile, 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}` : ''}`, 
+    return (_jsx(AriaCheckbox, { className: `choice${tile ? ' choice-tile' : ''}${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

package/dist/styles/index.css

@@ -1552,10 +1552,6 @@ input:active, textarea:active, select:active { transform: none; }
   40% { opacity: 1; transform: translateY(-3px); }
 }
 
-/* The top bar carries the title, the views and the way into settings. Nothing
-   that belongs to a conversation lives here any more, so it can breathe. */
-.topbar .ctl-grow { flex: 1; min-width: 0; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -1824,23 +1820,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-color: var(--bad);
 }
 
-/* Three fields on one line, and their inputs on one line too.
-   
-   `Field` puts the description *above* the control, which is the house rule and
-   right -- but only `Arguments` has one here, so as a flex row the other two
-   inputs floated a description's height above it and the row read as broken.
-   Aligned to the end instead: the labels sit where their text needs them and
-   the three boxes share a baseline, which is the edge the eye actually follows.
-   
-   A grid rather than flex, so `Arguments` gets the room it needs by declaration
-   instead of by an inline pixel width on each of its neighbours. */
-.mcp-local .field-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  align-items: end;
-  gap: var(--space-3);
-}
-
 /* How an applet's polling is going, said the same way on every tile. Muted
    when it is going fine -- this is a fact you glance at, not one you are being
    told. */
@@ -3023,11 +3002,6 @@ input[type='radio']:active:not(:disabled) {
   width: min(760px, 100%);
 }
 
-/* Settings is wider than the others: the rail carries group headings with a
-   hint each and indented tabs under them, and a pane beside it that draws
-   cards with a control on the right -- 760 gave one or the other room. */
-.modal.modal-settings { width: min(880px, 100%); }
-
 .modal {
   /* The window, less the backdrop's padding at each end -- `--space-15` is 60px
      and there are two of them, above and below.
@@ -3462,25 +3436,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-/* The same choice, laid out as tiles instead of a column.
-   
-   Four short names down the full width of a card is four wide bands for four
-   words -- the row is sized by the card, not by anything in it, so `Read` gets
-   the same 1000px as a sentence would. As tiles they are sized by their
-   content and the group reads as one set of four rather than a stack of four
-   settings.
-   
-   `auto-fit` with a floor rather than a fixed four: the pane is a modal that
-   narrows with the window, and four columns of 40px is worse than two of 160.
-   The floor is the width at which a two-word name still fits on one line. */
-.choice-tiles {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--space-2);
-}
-
 /* Room for the tick, which is absolutely positioned at the top right. In a
-   full-width row the text never reached it; in a tile it would run underneath. */
-.choice-tiles .choice-body { padding-right: var(--space-6); }
+   full-width row the text never reaches it; in a tile it would run underneath.
+   `tile` is a prop on the component now: this was keyed on a `.choice-tiles`
+   container that no component renders, so the class only ever existed in a
+   consumer's markup and the package was styling itself through it. */
+.choice-tile .choice-body { padding-right: var(--space-6); }
 
 /* The floor is 220px and not 150px because of what four items do at the widths
    in between. The settings pane gives this group 514px: at a 150px floor that

package/dist/tf.css

@@ -1822,10 +1822,6 @@ input:active, textarea:active, select:active { transform: none; }
   40% { opacity: 1; transform: translateY(-3px); }
 }
 
-/* The top bar carries the title, the views and the way into settings. Nothing
-   that belongs to a conversation lives here any more, so it can breathe. */
-.topbar .ctl-grow { flex: 1; min-width: 0; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -2094,23 +2090,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-color: var(--bad);
 }
 
-/* Three fields on one line, and their inputs on one line too.
-   
-   `Field` puts the description *above* the control, which is the house rule and
-   right -- but only `Arguments` has one here, so as a flex row the other two
-   inputs floated a description's height above it and the row read as broken.
-   Aligned to the end instead: the labels sit where their text needs them and
-   the three boxes share a baseline, which is the edge the eye actually follows.
-   
-   A grid rather than flex, so `Arguments` gets the room it needs by declaration
-   instead of by an inline pixel width on each of its neighbours. */
-.mcp-local .field-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  align-items: end;
-  gap: var(--space-3);
-}
-
 /* How an applet's polling is going, said the same way on every tile. Muted
    when it is going fine -- this is a fact you glance at, not one you are being
    told. */
@@ -3293,11 +3272,6 @@ input[type='radio']:active:not(:disabled) {
   width: min(760px, 100%);
 }
 
-/* Settings is wider than the others: the rail carries group headings with a
-   hint each and indented tabs under them, and a pane beside it that draws
-   cards with a control on the right -- 760 gave one or the other room. */
-.modal.modal-settings { width: min(880px, 100%); }
-
 .modal {
   /* The window, less the backdrop's padding at each end -- `--space-15` is 60px
      and there are two of them, above and below.
@@ -3732,25 +3706,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-/* The same choice, laid out as tiles instead of a column.
-   
-   Four short names down the full width of a card is four wide bands for four
-   words -- the row is sized by the card, not by anything in it, so `Read` gets
-   the same 1000px as a sentence would. As tiles they are sized by their
-   content and the group reads as one set of four rather than a stack of four
-   settings.
-   
-   `auto-fit` with a floor rather than a fixed four: the pane is a modal that
-   narrows with the window, and four columns of 40px is worse than two of 160.
-   The floor is the width at which a two-word name still fits on one line. */
-.choice-tiles {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--space-2);
-}
-
 /* Room for the tick, which is absolutely positioned at the top right. In a
-   full-width row the text never reached it; in a tile it would run underneath. */
-.choice-tiles .choice-body { padding-right: var(--space-6); }
+   full-width row the text never reaches it; in a tile it would run underneath.
+   `tile` is a prop on the component now: this was keyed on a `.choice-tiles`
+   container that no component renders, so the class only ever existed in a
+   consumer's markup and the package was styling itself through it. */
+.choice-tile .choice-body { padding-right: var(--space-6); }
 
 /* The floor is 220px and not 150px because of what four items do at the widths
    in between. The settings pane gives this group 514px: at a 150px floor that

package/dist/valet.css

@@ -1826,10 +1826,6 @@ input:active, textarea:active, select:active { transform: none; }
   40% { opacity: 1; transform: translateY(-3px); }
 }
 
-/* The top bar carries the title, the views and the way into settings. Nothing
-   that belongs to a conversation lives here any more, so it can breathe. */
-.topbar .ctl-grow { flex: 1; min-width: 0; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -2098,23 +2094,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-color: var(--bad);
 }
 
-/* Three fields on one line, and their inputs on one line too.
-   
-   `Field` puts the description *above* the control, which is the house rule and
-   right -- but only `Arguments` has one here, so as a flex row the other two
-   inputs floated a description's height above it and the row read as broken.
-   Aligned to the end instead: the labels sit where their text needs them and
-   the three boxes share a baseline, which is the edge the eye actually follows.
-   
-   A grid rather than flex, so `Arguments` gets the room it needs by declaration
-   instead of by an inline pixel width on each of its neighbours. */
-.mcp-local .field-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  align-items: end;
-  gap: var(--space-3);
-}
-
 /* How an applet's polling is going, said the same way on every tile. Muted
    when it is going fine -- this is a fact you glance at, not one you are being
    told. */
@@ -3297,11 +3276,6 @@ input[type='radio']:active:not(:disabled) {
   width: min(760px, 100%);
 }
 
-/* Settings is wider than the others: the rail carries group headings with a
-   hint each and indented tabs under them, and a pane beside it that draws
-   cards with a control on the right -- 760 gave one or the other room. */
-.modal.modal-settings { width: min(880px, 100%); }
-
 .modal {
   /* The window, less the backdrop's padding at each end -- `--space-15` is 60px
      and there are two of them, above and below.
@@ -3736,25 +3710,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-/* The same choice, laid out as tiles instead of a column.
-   
-   Four short names down the full width of a card is four wide bands for four
-   words -- the row is sized by the card, not by anything in it, so `Read` gets
-   the same 1000px as a sentence would. As tiles they are sized by their
-   content and the group reads as one set of four rather than a stack of four
-   settings.
-   
-   `auto-fit` with a floor rather than a fixed four: the pane is a modal that
-   narrows with the window, and four columns of 40px is worse than two of 160.
-   The floor is the width at which a two-word name still fits on one line. */
-.choice-tiles {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--space-2);
-}
-
 /* Room for the tick, which is absolutely positioned at the top right. In a
-   full-width row the text never reached it; in a tile it would run underneath. */
-.choice-tiles .choice-body { padding-right: var(--space-6); }
+   full-width row the text never reaches it; in a tile it would run underneath.
+   `tile` is a prop on the component now: this was keyed on a `.choice-tiles`
+   container that no component renders, so the class only ever existed in a
+   consumer's markup and the package was styling itself through it. */
+.choice-tile .choice-body { padding-right: var(--space-6); }
 
 /* The floor is 220px and not 150px because of what four items do at the widths
    in between. The settings pane gives this group 514px: at a 150px floor that

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",