@pstdio/ui 0.18.0 → 0.19.0

package/dist/{theme-poQlUgt0.js → theme-7PDdD9OD.js}

@@ -35,13 +35,13 @@ const X = {
   disabledForeground: ["colors.fg.subtle"],
   border: ["colors.border", "colors.border.subtle"]
 }, M = (e) => `colors.vscode.${e}`, P = (e) => e.replace(/^#/, ""), j = (e) => {
-  const l = (e.theme.tokenColors ?? []).flatMap((o) => (Array.isArray(o.scope) ? o.scope : o.scope ? [o.scope] : []).map((s) => ({
+  const l = (e.theme.tokenColors ?? []).flatMap((r) => (Array.isArray(r.scope) ? r.scope : r.scope ? [r.scope] : []).map((s) => ({
     token: s,
-    ...o.settings?.foreground ? {
-      foreground: P(o.settings.foreground)
+    ...r.settings?.foreground ? {
+      foreground: P(r.settings.foreground)
     } : {},
-    ...o.settings?.fontStyle ? {
-      fontStyle: o.settings.fontStyle
+    ...r.settings?.fontStyle ? {
+      fontStyle: r.settings.fontStyle
     } : {}
   })));
   return {
@@ -50,12 +50,12 @@ const X = {
     rules: l,
     colors: e.theme.colors ?? {}
   };
-}, oo = (e) => {
-  const l = {}, o = e.theme.colors ?? {};
-  for (const [n, s] of Object.entries(o))
+}, ro = (e) => {
+  const l = {}, r = e.theme.colors ?? {};
+  for (const [n, s] of Object.entries(r))
     l[M(n)] = s;
   for (const [n, s] of Object.entries(X)) {
-    const g = o[n];
+    const g = r[n];
     if (g)
       for (const m of s) l[m] = g;
   }
@@ -762,7 +762,7 @@ const X = {
   bold: {
     value: 700
   }
-}, r = {
+}, o = {
   // 0px
   25: "0.125rem",
   // 2px
@@ -773,6 +773,8 @@ const X = {
   150: "0.75rem",
   // 12px
   200: "1rem",
+  // 16px
+  250: "1.25rem",
   // 20px
   300: "1.5rem",
   // 24px
@@ -788,95 +790,155 @@ const X = {
   // 64px
   900: "4.5rem",
   // 96px
-  1600: "8rem"
+  1600: "8rem",
+  // 128px
+  2e3: "10rem"
 }, de = {
   none: {
     value: "0"
   },
+  "3xs": {
+    value: o[25]
+  },
   "2xs": {
-    value: r[50]
+    value: o[50]
   },
   xs: {
-    value: r[100]
+    value: o[100]
   },
   compact: {
     value: "0.625rem"
   },
   sm: {
-    value: r[150]
+    value: o[150]
   },
   comfortable: {
     value: "0.875rem"
   },
   md: {
-    value: r[200]
+    value: o[200]
   },
   lg: {
-    value: r[300]
+    value: o[300]
   },
   xl: {
-    value: r[400]
+    value: o[400]
   },
   "2xl": {
-    value: r[500]
+    value: o[500]
   },
   "3xl": {
-    value: r[600]
+    value: o[600]
   },
   "3.5xl": {
-    value: r[700]
+    value: o[700]
   },
   "4xl": {
-    value: r[800]
+    value: o[800]
   },
   "4.5xl": {
-    value: r[900]
+    value: o[900]
   },
   "5xl": {
-    value: r[1600]
+    value: o[1600]
   }
 }, ce = {
   "collection-row": {
     value: "2.125rem"
   },
   "filter-pill": {
-    value: r[300]
+    value: o[300]
+  },
+  "icon-2xs": {
+    value: o[150]
+  },
+  "icon-xs": {
+    value: "0.875rem"
+  },
+  "icon-sm": {
+    value: o[200]
+  },
+  "icon-md": {
+    value: o[250]
+  },
+  "tag-color-dot": {
+    value: o[250]
+  },
+  "tag-icon-cell": {
+    value: "1.75rem"
+  },
+  "tag-picker": {
+    value: "16.75rem"
+  },
+  "tag-picker-color-only": {
+    value: "13.75rem"
+  },
+  "tag-swatch": {
+    value: "1.625rem"
+  },
+  "tag-swatch-dot": {
+    value: "0.625rem"
+  },
+  "tag-editor-row": {
+    value: o[500]
+  },
+  "tag-editor-add-row": {
+    value: "2.25rem"
+  },
+  "segmented-control-sm": {
+    value: "1.75rem"
+  },
+  "segmented-control-xs": {
+    value: o[300]
+  },
+  "segmented-control-item-sm": {
+    value: o[300]
+  },
+  "segmented-control-item-xs": {
+    value: o[250]
+  },
+  "tag-action-menu": {
+    value: o[2e3]
   },
   "view-bar": {
-    value: r[500]
+    value: o[500]
   },
   "view-subheader": {
     value: "2.25rem"
   }
 }, ue = {
+  selection: {
+    value: "0.09375rem"
+  }
+}, be = {
   none: {
     value: "0"
   },
   "2xs": {
-    value: r[25]
+    value: o[25]
   },
   xs: {
-    value: r[50]
+    value: o[50]
   },
   compact: {
     value: "0.375rem"
   },
   sm: {
-    value: r[100]
+    value: o[100]
   },
   md: {
-    value: r[150]
+    value: o[150]
   },
   lg: {
-    value: r[200]
+    value: o[200]
   },
   xl: {
-    value: r[400]
+    value: o[400]
   },
   full: {
     value: "100%"
   }
-}, be = t({
+}, ge = t({
   slots: w.keys(),
   base: {
     root: {
@@ -949,7 +1011,7 @@ const X = {
       }
     }
   }]
-}), ge = c({
+}), me = c({
   className: "chakra-badge",
   base: {
     display: "inline-flex",
@@ -1023,7 +1085,7 @@ const X = {
     variant: "subtle",
     size: "sm"
   }
-}), me = c({
+}), ve = c({
   base: {
     borderRadius: "xs",
     transition: "all 0.1s ease-in-out",
@@ -1228,7 +1290,7 @@ const X = {
     size: "sm",
     variant: "outline"
   }
-}), u = "border.accent-light", ve = t({
+}), u = "border.accent-light", he = t({
   slots: A.keys(),
   base: {
     control: {
@@ -1348,7 +1410,7 @@ const X = {
   defaultVariants: {
     size: "sm"
   }
-}), he = t({
+}), pe = t({
   slots: z.keys(),
   base: {
     content: {
@@ -1359,11 +1421,11 @@ const X = {
       overflow: "hidden"
     }
   }
-}), pe = c({
+}), fe = c({
   base: {
     borderColor: "border.subtle"
   }
-}), fe = t({
+}), xe = t({
   slots: D.keys(),
   base: {
     header: {
@@ -1375,7 +1437,7 @@ const X = {
       bg: "bg"
     }
   }
-}), xe = t({
+}), _e = t({
   slots: ["preview", "input", "textarea"],
   base: {
     preview: {
@@ -1474,14 +1536,14 @@ const X = {
       }
     }
   }
-}), _e = t({
+}), ye = t({
   slots: W.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), a = "border.accent-light", ye = c({
+}), a = "border.accent-light", Se = c({
   base: {
     px: "sm",
     borderRadius: "xs",
@@ -1586,7 +1648,7 @@ const X = {
     size: "sm",
     variant: "outline"
   }
-}), Se = c({
+}), Fe = c({
   base: {
     display: "inline-flex",
     alignItems: "center",
@@ -1649,7 +1711,7 @@ const X = {
     size: "md",
     variant: "raised"
   }
-}), Fe = t({
+}), ke = t({
   slots: R.keys(),
   base: {
     itemGroupLabel: {
@@ -1726,11 +1788,10 @@ const X = {
       borderWidth: "1px",
       borderStyle: "solid",
       borderColor: "border",
-      zIndex: "dropdown",
       textStyle: "label/M/regular"
     }
   }
-}), ke = "var(--chakra-colors-border)", v = "var(--chakra-colors-border-accent-light)", Ce = t({
+}), Ce = "var(--chakra-colors-border)", v = "var(--chakra-colors-border-accent-light)", Ee = t({
   slots: B.keys(),
   base: {
     root: {
@@ -1738,7 +1799,7 @@ const X = {
       zIndex: "0",
       isolation: "isolate",
       boxShadow: "none",
-      "--number-input-border-color": ke,
+      "--number-input-border-color": Ce,
       "&:is(:hover, [data-hover])": {
         "--number-input-border-color": v
       },
@@ -1943,7 +2004,7 @@ const X = {
     size: "sm",
     variant: "outline"
   }
-}), Ee = t({
+}), we = t({
   slots: H.keys(),
   base: {
     positioner: {
@@ -1997,12 +2058,12 @@ const X = {
       }
     }
   }
-}), we = h.variants?.size ?? {}, Ae = {
+}), Ae = h.variants?.size ?? {}, ze = {
   ...h,
   variants: {
     ...h.variants,
     size: {
-      ...we,
+      ...Ae,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -2014,12 +2075,12 @@ const X = {
       }
     }
   }
-}, ze = c({
+}, De = c({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
   }
-}), De = t({
+}), We = t({
   slots: T.keys(),
   base: {
     control: {
@@ -2066,6 +2127,10 @@ const X = {
     variant: {
       solid: {
         control: {
+          // The switch track radius is "md" — never "full", which breaks the look.
+          // Chakra's default solid variant pins "full", so the design radius must
+          // be restated here for the merge to keep it.
+          borderRadius: "md",
           _checked: {
             bg: "bg.inverted",
             borderColor: "bg.inverted"
@@ -2079,7 +2144,7 @@ const X = {
       }
     }
   }
-}), We = t({
+}), Re = t({
   slots: L.keys(),
   base: {
     root: {
@@ -2166,6 +2231,20 @@ const X = {
         }
       }
     },
+    // Full-width strip with a bottom hairline holding the triggers, per the
+    // design's Tab Strip bars.
+    tray: {
+      true: {
+        list: {
+          width: "100%",
+          paddingX: "lg",
+          paddingBottom: "xs",
+          // Restate the base's shorthand key so the hairline survives the merge.
+          borderBottom: "1px solid",
+          borderBottomColor: "border.subtle"
+        }
+      }
+    },
     variant: {
       subtle: {
         trigger: {
@@ -2200,7 +2279,7 @@ const X = {
     size: "xs",
     variant: "subtle"
   }
-}), i = "border.accent-light", Re = c({
+}), i = "border.accent-light", Be = c({
   base: {
     paddingX: "sm",
     paddingY: "xs",
@@ -2306,7 +2385,7 @@ const X = {
     size: "sm",
     variant: "outline"
   }
-}), Be = t({
+}), He = t({
   slots: V.keys(),
   base: {
     root: {
@@ -2355,11 +2434,11 @@ const X = {
       position: "relative"
     },
     content: {
-      pb: "var(--timeline-content-gap)",
       display: "flex",
       flexDirection: "column",
       width: "full",
-      gap: "2"
+      gap: "0",
+      paddingBottom: "0"
     },
     title: {
       display: "flex",
@@ -2453,7 +2532,7 @@ const X = {
     variant: "solid",
     showLastSeparator: !1
   }
-}), He = t({
+}), Te = t({
   slots: I.keys(),
   base: {
     content: {
@@ -2462,35 +2541,35 @@ const X = {
       color: "fg.inverted"
     }
   }
-}), Te = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), p = /shadow/i, Le = (e) => {
+}), Le = /* @__PURE__ */ new Set(["boxShadow", "boxShadowColor", "textShadow"]), p = /shadow/i, Ve = (e) => {
   if (!p.test(e)) return e;
-  const l = e.split(",").map((o) => o.trim()).filter((o) => !p.test(o));
+  const l = e.split(",").map((r) => r.trim()).filter((r) => !p.test(r));
   if (l.length !== 0)
     return l.join(", ");
-}, b = (e) => Array.isArray(e) ? e.map(b).filter((l) => l !== void 0) : typeof e == "string" ? Le(e) : !e || typeof e != "object" ? e : Object.fromEntries(Object.entries(e).flatMap(([l, o]) => {
-  if (Te.has(l) || p.test(l)) return [];
-  const n = b(o);
+}, b = (e) => Array.isArray(e) ? e.map(b).filter((l) => l !== void 0) : typeof e == "string" ? Ve(e) : !e || typeof e != "object" ? e : Object.fromEntries(Object.entries(e).flatMap(([l, r]) => {
+  if (Le.has(l) || p.test(l)) return [];
+  const n = b(r);
   return n === void 0 ? [] : [[l, n]];
 })), x = (e) => {
   const {
     shadows: l,
-    ...o
+    ...r
   } = e ?? {};
-  return o;
-}, Ve = {
+  return r;
+}, Ie = {
   badge: ["surface"],
   button: ["secondary", "surface"]
-}, Ie = (e) => {
+}, Xe = (e) => {
   const l = {
     ...e ?? {}
   };
-  for (const [o, n] of Object.entries(Ve)) {
-    const s = l[o];
+  for (const [r, n] of Object.entries(Ie)) {
+    const s = l[r];
     if (!s || typeof s != "object") continue;
     const g = s, m = g.variants, f = m?.variant;
     if (!f) continue;
     const _ = new Set(n), y = Object.fromEntries(Object.entries(f).filter(([S]) => !_.has(S)));
-    l[o] = {
+    l[r] = {
       ...g,
       variants: {
         ...m,
@@ -2499,18 +2578,18 @@ const X = {
     };
   }
   return l;
-}, Xe = {
+}, Me = {
   ...d,
   theme: {
     ...d.theme,
     tokens: x(d.theme?.tokens),
     semanticTokens: x(d.theme?.semanticTokens),
-    recipes: Ie(b(d.theme?.recipes)),
+    recipes: Xe(b(d.theme?.recipes)),
     slotRecipes: b(d.theme?.slotRecipes),
     layerStyles: b(d.theme?.layerStyles),
     animationStyles: b(d.theme?.animationStyles)
   }
-}, Me = {
+}, Pe = {
   DEFAULT: {
     value: "1px solid {colors.border}"
   },
@@ -2526,7 +2605,7 @@ const X = {
   "accent-light": {
     value: "1px solid {colors.border.accent-light}"
   }
-}, Pe = {
+}, je = {
   DEFAULT: {
     value: {
       _light: "{colors.blacks.800}",
@@ -2622,7 +2701,7 @@ const X = {
       value: "{colors.fg.muted}"
     }
   }
-}, je = {
+}, Ue = {
   DEFAULT: {
     value: {
       _light: "{colors.blacks.50}",
@@ -2881,7 +2960,7 @@ const X = {
       }
     }
   }
-}, Ue = {
+}, Oe = {
   DEFAULT: {
     value: {
       _light: "#EAF0EB",
@@ -2941,14 +3020,14 @@ const X = {
       value: "{colors.border.subtle}"
     }
   }
-}, Oe = {
+}, Ye = {
   border: {
     value: {
       _light: "{colors.mint.200}",
       _dark: "{colors.mint.200}"
     }
   }
-}, Ye = {
+}, $e = {
   contrast: {
     value: {
       _light: "black",
@@ -2997,7 +3076,7 @@ const X = {
       _dark: "{colors.orange.500}"
     }
   }
-}, $e = {
+}, Ne = {
   text: {
     primary: {
       value: {
@@ -3158,7 +3237,7 @@ const X = {
       }
     }
   }
-}, Ne = {
+}, qe = {
   selectable: {
     primary: {
       value: {
@@ -3167,15 +3246,15 @@ const X = {
       }
     }
   }
-}, qe = {
-  fg: Pe,
-  bg: je,
-  border: Ue,
-  blue: Oe,
-  orange: Ye,
-  vis: $e,
-  text: Ne
-}, Ge = F({
+}, Ge = {
+  fg: je,
+  bg: Ue,
+  border: Oe,
+  blue: Ye,
+  orange: $e,
+  vis: Ne,
+  text: qe
+}, Ke = F({
   floatingBar: {
     value: {
       paddingInline: "sm",
@@ -3197,7 +3276,7 @@ const X = {
       borderColor: "border"
     }
   }
-}), Ke = k({
+}), Je = k({
   brand: {
     value: {
       fontFamily: "brand",
@@ -3474,58 +3553,59 @@ const X = {
       letterSpacing: "0.14px"
     }
   }
-}), Je = E({
+}), Qe = E({
   globalCss: U,
   theme: {
     breakpoints: {
       "3xl": "2560px",
       "4xl": "3840px"
     },
-    textStyles: Ke,
-    layerStyles: Ge,
+    textStyles: Je,
+    layerStyles: Ke,
     recipes: {
-      badge: ge,
-      button: me,
-      divider: pe,
-      input: ye,
-      kbd: Se,
-      skeleton: ze,
-      textarea: Re
+      badge: me,
+      button: ve,
+      divider: fe,
+      input: Se,
+      kbd: Fe,
+      skeleton: De,
+      textarea: Be
     },
     tokens: {
       colors: ae,
+      borderWidths: ue,
       fonts: ie,
       fontSizes: ne,
       fontWeights: se,
-      radii: ue,
+      radii: be,
       sizes: ce,
       spacing: de
     },
     semanticTokens: {
-      colors: qe,
-      borders: Me
+      colors: Ge,
+      borders: Pe
     },
     slotRecipes: {
-      alert: be,
-      colorPicker: ve,
-      drawer: fe,
-      tooltip: He,
-      popover: Ee,
-      menu: Fe,
-      numberInput: Ce,
-      editable: xe,
-      form: _e,
-      dialog: he,
-      progressCircle: Ae,
-      switch: De,
-      tabs: We,
-      timeline: Be
+      alert: ge,
+      colorPicker: he,
+      drawer: xe,
+      tooltip: Te,
+      popover: we,
+      menu: ke,
+      numberInput: Ee,
+      editable: _e,
+      form: ye,
+      dialog: pe,
+      progressCircle: ze,
+      switch: We,
+      tabs: Re,
+      timeline: He
     }
   }
-}), ro = C(Xe, Je);
+}), lo = C(Me, Qe);
 export {
-  oo as a,
+  ro as a,
   j as c,
-  ro as t
+  lo as t
 };
-//# sourceMappingURL=theme-poQlUgt0.js.map
+//# sourceMappingURL=theme-7PDdD9OD.js.map