@pipelex/mthds-form 0.7.0 → 0.8.0

package/dist/react/index.js

@@ -75,7 +75,7 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     ),
     ...props,
@@ -247,9 +247,9 @@ function FieldShell({
 var fieldControlClass = cn(
   "w-full rounded-md border border-border bg-input text-sm text-foreground",
   "placeholder:text-muted-foreground/70 transition-colors",
-  "focus-visible:outline-none focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary/40",
+  "focus-visible:outline-hidden focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary/40",
   "disabled:cursor-not-allowed disabled:opacity-50",
-  "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/30"
+  "aria-invalid:border-destructive aria-invalid:ring-destructive/30"
 );
 function DateField({ field, value, onChange, id, error, disabled }) {
   const domId = useFieldDomId(id);
@@ -478,7 +478,7 @@ function FileField({
             type: "button",
             disabled: busy,
             onClick: () => setShowUrl(true),
-            className: "inline-flex items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
             children: [
               /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
               s.pasteUrlInstead
@@ -588,7 +588,7 @@ var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) =
       // Adapted from the registry to DESIGN.md ("Inputs"): the `--input` surface,
       // a hairline `--border`, and a border-color focus signal instead of the
       // upstream 2px focus ring ("No focus glow by default").
-      "flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm transition-colors data-[placeholder]:text-muted-foreground focus:border-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm transition-colors data-placeholder:text-muted-foreground focus:border-ring focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -624,7 +624,7 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -637,7 +637,7 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
         {
           className: cn(
             "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
           ),
           children
         }
@@ -661,7 +661,7 @@ var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -682,7 +682,7 @@ var SelectSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 var toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
   {
     variants: {
       variant: {
@@ -932,7 +932,7 @@ function ProseField({ field, value, onChange, id, error, disabled }) {
           onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
           className: cn(
             fieldControlClass,
-            "min-h-[88px] resize-y px-3 py-2.5 leading-relaxed [field-sizing:content]"
+            "min-h-[88px] resize-y px-3 py-2.5 leading-relaxed field-sizing-content"
           )
         }
       )
@@ -946,7 +946,7 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
     {
       type: "button",
       onClick: onToggle,
-      className: "inline-flex items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground",
+      className: "flex w-fit items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground",
       children: [
         expanded ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
         expanded ? noun === "field" ? s.hideOptionalFields : s.hideOptionalInputs : noun === "field" ? s.optionalFieldsCount(count) : s.optionalInputsCount(count)
@@ -1533,7 +1533,7 @@ function Block({ token }) {
         // for no gain — the lines are prose, and prose wraps. Real code loses
         // its column alignment and keeps every character, which is the better
         // half of that trade at this width.
-        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words rounded-md border border-border bg-card/40 p-2.5 text-[12px]", children: /* @__PURE__ */ jsx("code", { children: code.text }) })
+        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-md border border-border bg-card/40 p-2.5 text-[12px]", children: /* @__PURE__ */ jsx("code", { children: code.text }) })
       );
     }
     case "blockquote":
@@ -1659,7 +1659,7 @@ function Described({ description, children }) {
       "span",
       {
         tabIndex: 0,
-        className: "-mx-1 cursor-help rounded px-1 outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+        className: "-mx-1 cursor-help rounded px-1 outline-hidden transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
         children
       }
     ) }),
@@ -1713,7 +1713,7 @@ function stringifyValue(value) {
 function RawValue({ value, compact }) {
   const text = stringifyValue(value);
   if (text === void 0) return /* @__PURE__ */ jsx(Absent, {});
-  return compact ? /* @__PURE__ */ jsx("span", { title: text, className: "truncate font-mono text-[12px] text-foreground", children: text }) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-card/40 px-2.5 py-1.5 font-mono text-[12px] leading-relaxed text-foreground", children: text });
+  return compact ? /* @__PURE__ */ jsx("span", { title: text, className: "truncate font-mono text-[12px] text-foreground", children: text }) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap wrap-break-word rounded-md border border-border bg-card/40 px-2.5 py-1.5 font-mono text-[12px] leading-relaxed text-foreground", children: text });
 }
 function Scalar({ value, compact = false }) {
   if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx(Absent, {});
@@ -1780,7 +1780,7 @@ function CopyButton({
       },
       ...title ? { title } : {},
       "aria-label": label,
-      className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+      className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
       children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
     }
   );
@@ -1854,7 +1854,7 @@ function DocumentPreview({ url, name }) {
       title: name,
       loading: "lazy",
       referrerPolicy: "no-referrer",
-      className: "h-[28rem] w-full rounded-lg border border-border bg-card/40"
+      className: "h-112 w-full rounded-lg border border-border bg-card/40"
     }
   );
 }
@@ -1888,7 +1888,7 @@ function DocumentValue({ value }) {
           type: "button",
           onClick: () => setOpen((current) => !current),
           "aria-expanded": open,
-          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
           children: [
             open ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true, className: "size-3.5" }),
             s.preview
@@ -1941,7 +1941,7 @@ function ImageValue({
                 // times that tall — a generated report image is the RESULT here,
                 // not a decoration beside one, and it was unreadable at that size.
                 // `object-contain` keeps the aspect ratio when the cap bites.
-                !inGallery && !compact && "max-h-[44rem] w-full rounded-lg border border-border object-contain"
+                !inGallery && !compact && "max-h-176 w-full rounded-lg border border-border object-contain"
               )
             }
           )
@@ -2176,14 +2176,14 @@ function ObjectTable({
           /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => {
             const isOpen = expanded.has(index);
             return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60 last:border-b-0", children: [
-              canExpand && /* @__PURE__ */ jsx("td", { className: "px-1 align-top", children: /* @__PURE__ */ jsx(
+              canExpand && /* @__PURE__ */ jsx("td", { className: "px-1 pt-px align-top", children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => toggle(index),
                   "aria-expanded": isOpen,
                   "aria-label": s.toggleRowDetails(index + 1),
-                  className: "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+                  className: "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
                   children: isOpen ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5" })
                 }
               ) }),
@@ -2343,7 +2343,7 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
                 // longest label left over.
                 isInlineColumn(child) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
                   /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(Label2, { field: child, describe: true }) }),
-                  /* @__PURE__ */ jsx("div", { className: "min-w-0 text-right [&_[data-chips]]:justify-end", children: /* @__PURE__ */ jsx(LeafValue, { field: child, value: memberValue(child) }) })
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 text-right **:data-chips:justify-end", children: /* @__PURE__ */ jsx(LeafValue, { field: child, value: memberValue(child) }) })
                 ] }, child.name) : /* @__PURE__ */ jsx("div", { className: "col-span-2 min-w-0", children: /* @__PURE__ */ jsx(ResultField, { field: child, value: memberValue(child), depth: depth + 1 }) }, child.name)
               )
             )
@@ -2528,7 +2528,7 @@ function JsonView({ value }) {
           });
         },
         "aria-label": s.copyJson,
-        className: "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+        className: "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
         children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
       }
     ),
@@ -2577,7 +2577,7 @@ function StuffViewer({
             onClick: () => void handleDownload(),
             disabled: saving,
             "aria-label": s.download,
-            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
             children: [
               saving ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }),
               saving ? s.downloading : s.download
@@ -2597,7 +2597,7 @@ function StuffViewer({
                 onClick: () => setView(id),
                 "aria-pressed": view === id,
                 className: cn(
-                  "rounded px-2 py-0.5 text-[12px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+                  "rounded px-2 py-0.5 text-[12px] focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
                   view === id ? "bg-card font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
                 ),
                 children: label