@jonmilner/ui 0.10.0 → 0.10.1

package/dist/Text/Text.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms.base, atoms.sm, atoms.med, atoms.lg, atoms.xl, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
-@layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqq{white-space:normal;text-overflow:clip}}
+@layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{white-space:pre-wrap;overflow-wrap:anywhere}._1mgdisqr{white-space:pre}._1mgdisqs{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqs{white-space:normal;text-overflow:clip}}

package/dist/Text/Text.css.mjs

@@ -27,6 +27,10 @@ var e = "_1mgdisq3", t = "_1mgdisq4", n = {
 	sm: "_1mgdisqm",
 	med: "_1mgdisqn",
 	lg: "_1mgdisqo"
-}, o = { nowrap: "_1mgdisqp" }, s = "_1mgdisqq";
+}, o = {
+	nowrap: "_1mgdisqp",
+	"pre-wrap": "_1mgdisqq",
+	pre: "_1mgdisqr"
+}, s = "_1mgdisqs";
 //#endregion
 export { n as font, a as leading, e as root, r as size, s as truncate, t as truncateBox, i as weight, o as wrap };

package/dist/Text/index.d.mts

@@ -10,7 +10,7 @@ export type TextOwnProps = {
   size?: keyof typeof tokens.fontSize;
   truncate?: boolean | "box";
   weight?: keyof typeof tokens.fontWeight;
-  wrap?: "nowrap";
+  wrap?: "nowrap" | "pre-wrap" | "pre";
 };
 export type TextProps<T extends ElementType = "p"> = PolymorphicProps<T, StyleProps & TextOwnProps>;
 export declare function Text<T extends ElementType = "p">({ as, size, font, weight, leading, truncate, wrap, display, overflow, className, ...props }: TextProps<T>): import("react").JSX.Element;

package/dist/Text/index.mjs

@@ -11,8 +11,8 @@ function l({ as: l, size: u, font: d, weight: f, leading: p, truncate: m, wrap:
 		u && a[u],
 		f && o[f],
 		p && r[p],
-		h && s[h],
-		m === !0 && "_1mgdisqq",
+		h && !m && s[h],
+		m === !0 && "_1mgdisqs",
 		v
 	];
 	return /* @__PURE__ */ c(t, {

package/dist/docs/Field.md

@@ -113,7 +113,7 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).
 
@@ -127,7 +127,7 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).
 
@@ -141,6 +141,6 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/Heading.md

@@ -65,6 +65,6 @@ Generated from the TypeScript types.
 | `size` | `"2xl" \| "lg" \| "med" \| "sm" \| "xl"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts every `<h2>` attribute (change the element with `as`) and the style props (see `manifest.json` `styleProps`).

package/dist/docs/Tabs.md

@@ -126,6 +126,6 @@ Also accepts the style props (see `manifest.json` `styleProps`).
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `value` | `any` | yes | The value of the Tab. |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/Text.md

@@ -29,6 +29,10 @@ The base of all visible text, and the primitive every text component builds on.
 - `truncate` keeps one line and cuts it with an ellipsis, without clipping ascenders or descenders. It sets the block margins, so do not combine it with margin props.
 - `truncate="box"` cuts a part of another Text's line (a field's summary inside a button's label) at its own box: untrimmed, in the outer Text's font until its own props say otherwise. Use it only inside another Text, below a Box or element that is not a Text run.
 - `wrap="nowrap"` keeps the text on one line, uncut: a short label that must never break. A long string overflows its box, so cap it with `truncate` instead.
+- `wrap="pre-wrap"` keeps newlines and runs of spaces and wraps, breaking a long unbroken string (a path, a URL, a hash) anywhere so it stays in its box: logs, commit messages, user-entered text.
+- `wrap="pre"` keeps newlines and runs of spaces on unwrapped lines, so a long line overflows its box: aligned output whose columns must not reflow. Text is not a scroll container; where the box cannot grow, use `pre-wrap`.
+- `truncate` wins over `wrap`: a Text with both keeps one line, collapses whitespace and ignores `wrap`.
+- Plain wrapped text with a long unbroken string and no whitespace to keep has no `wrap` value; its component sets `overflow-wrap` in its own styles.
 - The trim is two pseudo-elements; do not style `::before` or `::after` on a Text.
 - No native `text-box`; capsize only (ADR 0016).
 
@@ -55,6 +59,12 @@ The base of all visible text, and the primitive every text component builds on.
 </Text>
 ```
 
+```tsx
+<Text as="pre" font="mono" size="sm" wrap="pre-wrap">
+  {commitMessage}
+</Text>
+```
+
 ## Don't
 
 ```tsx
@@ -94,6 +104,6 @@ Generated from the TypeScript types.
 | `size` | `"2xl" \| "3xl" \| "4xl" \| "lg" \| "med" \| "sm" \| "xl" \| "xs"` | no |  |
 | `truncate` | `"box" \| boolean` | no |  |
 | `weight` | `"bold" \| "medium" \| "regular" \| "semibold"` | no |  |
-| `wrap` | `"nowrap"` | no |  |
+| `wrap` | `"nowrap" \| "pre" \| "pre-wrap"` | no |  |
 
 Also accepts every `<p>` attribute (change the element with `as`) and the style props (see `manifest.json` `styleProps`).

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "components": [
     {
       "name": "AlertDialog",
@@ -824,10 +824,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -897,10 +899,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -970,10 +974,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -1050,10 +1056,12 @@
         },
         {
           "name": "wrap",
-          "type": "\"nowrap\"",
+          "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
           "required": false,
           "values": [
-            "nowrap"
+            "nowrap",
+            "pre",
+            "pre-wrap"
           ]
         }
       ],
@@ -1944,10 +1952,12 @@
             },
             {
               "name": "wrap",
-              "type": "\"nowrap\"",
+              "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
               "required": false,
               "values": [
-                "nowrap"
+                "nowrap",
+                "pre",
+                "pre-wrap"
               ]
             }
           ]
@@ -2064,10 +2074,12 @@
         },
         {
           "name": "wrap",
-          "type": "\"nowrap\"",
+          "type": "\"nowrap\" | \"pre\" | \"pre-wrap\"",
           "required": false,
           "values": [
-            "nowrap"
+            "nowrap",
+            "pre",
+            "pre-wrap"
           ]
         }
       ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"