@pipelex/mthds-form 0.29.0 → 0.30.0

package/dist/generative/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { cn, checkedAccentClass, focusOutlineClass, linkTextClass, selectedBorderClass, selectedFillClass, fieldControlClass, ResultRoot, ResultField, FieldRenderer, enumLabeler, useFieldPresentation, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../chunk-RHX7LQRL.js';
+import { cn, headingClass, checkedAccentClass, focusOutlineClass, actionShadowClass, panelSurfaceClass, panelRaisedShadowClass, linkTextClass, selectedBorderClass, selectedFillClass, fieldControlClass, ResultRoot, ResultField, FieldRenderer, enumLabeler, useFieldPresentation, ToggleGroup, ToggleGroupItem, selectedFillStrongClass, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, panelFlatShadowClass } from '../chunk-JCFALTTY.js';
 import '../chunk-4VAO6BDE.js';
 export { seedInputs } from '../chunk-VH5CDQDR.js';
 import '../chunk-L23R3JNQ.js';
@@ -1843,13 +1843,24 @@ function Card({
   props,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-6 text-card-foreground", children: [
-    props.title || props.description ? /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
-      props.title ? /* @__PURE__ */ jsx("h3", { className: "text-lg leading-none font-semibold", children: props.title }) : null,
-      props.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: props.description }) : null
-    ] }) : null,
-    children
-  ] });
+  return (
+    // A style's panel: a host writes the style's field fill onto `--input`
+    // here, as on its own panel, so the fields inside do not sink into it.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-style-panel": "",
+        className: cn("rounded-lg p-6 text-card-foreground", panelSurfaceClass, panelFlatShadowClass),
+        children: [
+          props.title || props.description ? /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+            props.title ? /* @__PURE__ */ jsx("h3", { className: cn("text-lg leading-none", headingClass(600)), children: props.title }) : null,
+            props.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: props.description }) : null
+          ] }) : null,
+          children
+        ]
+      }
+    )
+  );
 }
 var GAP = {
   none: "gap-0",
@@ -1936,10 +1947,10 @@ function Collapsible({
   );
 }
 var HEADING = {
-  h1: "text-3xl font-bold tracking-tight",
-  h2: "text-2xl font-semibold tracking-tight",
-  h3: "text-lg font-semibold",
-  h4: "text-base font-semibold"
+  h1: cn("text-3xl", headingClass(700, true)),
+  h2: cn("text-2xl", headingClass(600, true)),
+  h3: cn("text-lg", headingClass(600)),
+  h4: cn("text-base", headingClass(600))
 };
 function Heading({
   props
@@ -2116,7 +2127,8 @@ function Textarea({
     /* @__PURE__ */ jsx(FieldError, { message: field.error })
   ] });
 }
-var NATIVE_CHECK = cn("size-4", checkedAccentClass, focusOutlineClass);
+var NATIVE_CHECK = cn("size-4 shrink-0", checkedAccentClass, focusOutlineClass);
+var NATIVE_CHECK_ROW = "flex items-center gap-2 text-sm max-sm:min-h-11";
 function Radio({
   props,
   bindings,
@@ -2127,7 +2139,7 @@ function Radio({
   const labelOf = enumLabeler(props.options ?? [], useFieldPresentation());
   return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", "aria-invalid": field.error ? true : void 0, children: [
     /* @__PURE__ */ jsx("legend", { className: LABEL, children: props.label }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 max-sm:space-y-0", children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsxs("label", { className: NATIVE_CHECK_ROW, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2156,7 +2168,7 @@ function Checkbox({
   const id = useControlId(props.name);
   const field = useBoundField(props.checked, bindings?.checked, false, props);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: NATIVE_CHECK_ROW, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2337,7 +2349,7 @@ function AccessibleSelect({ props, bindings, emit }) {
           emit("change");
         },
         children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "h-11 w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
           /* @__PURE__ */ jsx(SelectContent, { children: (props.options ?? []).map((option, index) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: labelOf(option) }, `${index}-${option}`)) })
         ]
       }
@@ -2431,11 +2443,11 @@ function Tabs({ props, children }) {
   const panels = React3.Children.toArray(children);
   const [value, setValue] = React3.useState(tabs[0]?.value ?? "");
   return /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange: setValue, className: "w-full", children: [
-    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TabsPrimitive.List, { className: "inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground max-sm:h-auto max-sm:flex-wrap", children: tabs.map((tab) => /* @__PURE__ */ jsx(
       TabsPrimitive.Trigger,
       {
         value: tab.value,
-        className: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm max-sm:min-h-11 max-sm:min-w-11",
         children: tab.label
       },
       tab.value
@@ -2451,7 +2463,7 @@ function Tabs({ props, children }) {
     ))
   ] });
 }
-var BUTTON_BASE = "inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
+var BUTTON_BASE = "inline-flex min-h-11 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
 var PRIMARY_BUTTON = cn(BUTTON_BASE, "bg-primary text-primary-foreground hover:bg-primary/90");
 var SECONDARY_BUTTON = cn(
   BUTTON_BASE,
@@ -2615,7 +2627,7 @@ function Segmented({ props, bindings, emit }) {
             value: option,
             variant: "outline",
             size: "sm",
-            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+            className: "rounded-full px-3.5 data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground max-sm:h-11 max-sm:min-w-11",
             children: labelOf(option)
           },
           option
@@ -2655,7 +2667,7 @@ function NumberInput({ props, bindings, emit }) {
           },
           className: cn(
             fieldControlClass,
-            "h-10 px-3 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+            "h-11 px-3 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
           )
         }
       ),
@@ -2773,7 +2785,16 @@ function Hero({ props }) {
         children: props.eyebrow
       }
     ) : null,
-    /* @__PURE__ */ jsx("h1", { className: "max-w-2xl text-4xl font-bold tracking-tight text-foreground sm:text-[44px] sm:leading-[1.15]", children: props.headline }),
+    /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: cn(
+          "max-w-2xl text-4xl text-foreground sm:text-[44px] sm:leading-[1.15]",
+          headingClass(700, true)
+        ),
+        children: props.headline
+      }
+    ),
     props.lede ? /* @__PURE__ */ jsx("p", { className: "mt-4 max-w-2xl text-[17px] leading-relaxed text-muted-foreground", children: props.lede }) : null
   ] });
 }
@@ -2811,7 +2832,7 @@ function ResultPanel() {
   const slot = useResultSlot();
   if (!slot?.content) return null;
   return /* @__PURE__ */ jsxs("section", { className: "border-t border-border py-9", "data-testid": "result-panel", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx("h2", { className: "mb-6 text-xl font-semibold tracking-tight text-foreground", children: slot.title ?? "Result" }),
+    /* @__PURE__ */ jsx("h2", { className: cn("mb-6 text-xl text-foreground", headingClass(600, true)), children: slot.title ?? "Result" }),
     slot.content
   ] });
 }
@@ -2820,7 +2841,7 @@ function Section({ props, children }) {
     /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3", children: [
         props.number ? /* @__PURE__ */ jsx("span", { className: cn("font-mono text-[12px]", linkTextClass), children: props.number }) : null,
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: props.title })
+        /* @__PURE__ */ jsx("h2", { className: cn("text-xl text-foreground", headingClass(600, true)), children: props.title })
       ] }),
       props.lede ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground", children: props.lede }) : null
     ] }),
@@ -2833,10 +2854,21 @@ function Rail({ props, children }) {
     // the `@theme inline` mapping and does not inherit its fallback - it has to
     // carry its own, or a host that defines no tokens loses the declaration
     // outright. See src/styles/tailwind-entry.css.
-    /* @__PURE__ */ jsxs("div", { className: "rounded-[calc(var(--radius,0.5rem)*1.5)] border border-border bg-card p-7 text-card-foreground shadow-xl", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold tracking-[0.15em] text-muted-foreground uppercase", children: props.title }),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-style-panel": "",
+        className: cn(
+          "rounded-[calc(var(--radius,0.5rem)*1.5)] p-7 text-card-foreground",
+          panelSurfaceClass,
+          panelRaisedShadowClass
+        ),
+        children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold tracking-[0.15em] text-muted-foreground uppercase", children: props.title }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col", children })
+        ]
+      }
+    )
   );
 }
 function present(value) {
@@ -2857,10 +2889,12 @@ function Cta({ props, emit }) {
         type: "button",
         onClick: () => emit("press"),
         className: cn(
-          "inline-flex h-12 w-full items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground",
-          // The fallback is not decoration here either - see Rail above.
-          "shadow-[0_0_28px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_35%,transparent)] transition-all hover:bg-primary/90 hover:shadow-[0_0_44px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_50%,transparent)]",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
+          "inline-flex h-12 w-full items-center justify-center rounded-lg bg-primary px-6 text-sm font-semibold text-primary-foreground transition-all hover:bg-primary/90",
+          // The page's call-to-action shadow, or the glow in the button colour
+          // it had. Focus is an outline, which no shadow a style sets can
+          // replace or hide.
+          actionShadowClass,
+          focusOutlineClass
         ),
         children: props.label
       }