@pstdio/ui 0.5.0 → 0.5.2

package/dist/{theme-D0VvFB1Y.js → theme-Dq4r3aRE.js}

@@ -1,7 +1,11 @@
-import { defineSlotRecipe as l, defineRecipe as a, defineLayerStyles as r, defineTextStyles as s, defineConfig as t, createSystem as i, defaultConfig as u } from "@chakra-ui/react";
-import { alertAnatomy as n, dialogAnatomy as c, drawerAnatomy as d, fieldsetAnatomy as b, menuAnatomy as v, popoverAnatomy as g, tooltipAnatomy as p } from "@chakra-ui/react/anatomy";
-import { progressCircleSlotRecipe as o } from "@chakra-ui/react/theme";
-const m = {
+import { defineSlotRecipe as l, defineRecipe as o, defineLayerStyles as r, defineTextStyles as s, defineConfig as t, createSystem as c, defaultConfig as i } from "@chakra-ui/react";
+import { alertAnatomy as n, dialogAnatomy as u, drawerAnatomy as d, fieldsetAnatomy as b, menuAnatomy as g, popoverAnatomy as v, tooltipAnatomy as m } from "@chakra-ui/react/anatomy";
+import { progressCircleSlotRecipe as a } from "@chakra-ui/react/theme";
+const p = "monokai", F = "dark", h = { "colors.fg": "#F8F8F2", "colors.fg.muted": "#75715E", "colors.fg.subtle": "#A59F85", "colors.fg.inverted": "#272822", "colors.fg.blue-dark": "#66D9EF", "colors.bg": "#272822", "colors.bg.muted": "#34352E", "colors.bg.subtle": "#1F201B", "colors.bg.hover": "#3E3D32", "colors.bg.active": "#49483E", "colors.bg.code": "#1F201B", "colors.bg.emphasized": "#49483E", "colors.bg.inverted": "#F8F8F2", "colors.bg.panel": "#1F201B", "colors.bg.dark": "#1F201B", "colors.bg.button.primary.default": "#E6DB74", "colors.bg.button.primary.hover": "#F4E98A", "colors.bg.button.primary.pressed": "#CFC25F", "colors.bg.menu-item.hover": "#3E3D32", "colors.bg.menu-item.focus": "#3E3D32", "colors.bg.menu-item.selected": "#49483E", "colors.bg.accent-primary.default": "#E6DB74", "colors.bg.accent-primary.hover": "#F4E98A", "colors.bg.accent-primary.pressed": "#CFC25F", "colors.bg.accent-primary.very-light": "#3B3A2B", "colors.bg.accent-primary.light": "#494531", "colors.bg.accent-primary.medium": "#E6DB74", "colors.bg.accent-primary.dark": "#F4E98A", "colors.bg.accent-secondary.grey-dark": "#272822", "colors.bg.accent-secondary.grey-light": "#34352E", "colors.bg.accent-secondary.red-very-light": "#3A1F1F", "colors.bg.accent-secondary.red-light": "#4A2424", "colors.bg.accent-secondary.pink-light": "#4A2039", "colors.bg.accent-secondary.pink-medium": "#F92672", "colors.bg.accent-secondary.blue-very-light": "#243A3D", "colors.bg.accent-secondary.blue-light": "#26464A", "colors.bg.accent-secondary.blue-medium": "#66D9EF", "colors.bg.accent-secondary.blue-dark": "#66D9EF", "colors.bg.accent-secondary.cyan-light": "#26464A", "colors.bg.accent-secondary.green-light": "#33401F", "colors.bg.accent-secondary.yellow-light": "#494531", "colors.bg.accent-secondary.yellow-medium": "#E6DB74", "colors.bg.accent-secondary.yellow-dark": "#F4E98A", "colors.bg.accent-secondary.sand-light": "#3E3D32", "colors.border": "#5B594A", "colors.border.muted": "#49483E", "colors.border.subtle": "#3E3D32", "colors.border.inverted": "#CFCFC2", "colors.border.accent-light": "#66D9EF", "colors.border.accent": "#66D9EF", "colors.blue.border": "#66D9EF", "colors.orange.contrast": "#272822", "colors.orange.fg": "#FD971F", "colors.orange.subtle": "#493522", "colors.orange.muted": "#5A3C20", "colors.orange.emphasized": "#7A4D1D", "colors.orange.solid": "#FD971F", "colors.orange.focusRing": "#FD971F", "colors.orange.border": "#FD971F", "colors.vis.text.primary": "#F8F8F2", "colors.vis.text.secondary": "#CFCFC2", "colors.vis.grid": "#49483E", "colors.vis.axis": "#A59F85", "colors.vis.categorical.1": "#66D9EF", "colors.vis.categorical.2": "#FD971F", "colors.vis.categorical.3": "#AE81FF", "colors.vis.categorical.4": "#F92672", "colors.vis.categorical.5": "#E6DB74", "colors.vis.categorical.6": "#A6E22E", "colors.vis.categorical.7": "#75715E", "colors.text.selectable.primary": "#272822" }, k = {
+  id: p,
+  mode: F,
+  tokens: h
+}, x = k, fe = [x], y = {
   "*::selection": {
     bg: {
       base: "bg.accent-secondary.blue-medium",
@@ -59,7 +63,7 @@ const m = {
       fontSize: "1.5rem"
     }
   }
-}, h = {
+}, f = {
   DEFAULT: {
     value: "#0A0D15"
   },
@@ -81,6 +85,9 @@ const m = {
   400: {
     value: "#C5C5C7"
   },
+  450: {
+    value: "#9DA0A6"
+  },
   500: {
     value: "#797D83"
   },
@@ -105,7 +112,7 @@ const m = {
   1e3: {
     value: "#000000"
   }
-}, F = {
+}, _ = {
   DEFAULT: {
     value: "#5098FF"
   },
@@ -139,7 +146,7 @@ const m = {
   900: {
     value: "#002862"
   }
-}, k = {
+}, E = {
   DEFAULT: {
     value: "#3A4BE4"
   },
@@ -176,7 +183,7 @@ const m = {
   900: {
     value: "#0A125A"
   }
-}, x = {
+}, C = {
   DEFAULT: {
     value: "#E054EC"
   },
@@ -213,7 +220,7 @@ const m = {
   900: {
     value: "#520659"
   }
-}, f = {
+}, S = {
   DEFAULT: {
     value: "#FBD8CE"
   },
@@ -247,7 +254,7 @@ const m = {
   900: {
     value: "#522923"
   }
-}, y = {
+}, D = {
   DEFAULT: {
     value: "#FF3232"
   },
@@ -281,7 +288,7 @@ const m = {
   900: {
     value: "#580707"
   }
-}, _ = {
+}, A = {
   DEFAULT: {
     value: "#F78C25"
   },
@@ -315,7 +322,7 @@ const m = {
   900: {
     value: "#552107"
   }
-}, E = {
+}, w = {
   DEFAULT: {
     value: "#FFD643"
   },
@@ -355,7 +362,7 @@ const m = {
   900: {
     value: "#644E00"
   }
-}, C = {
+}, B = {
   DEFAULT: {
     value: "#2DD665"
   },
@@ -389,7 +396,7 @@ const m = {
   900: {
     value: "#003110"
   }
-}, S = {
+}, z = {
   DEFAULT: {
     value: "#3EECC4"
   },
@@ -423,7 +430,7 @@ const m = {
   900: {
     value: "#024F3D"
   }
-}, w = {
+}, R = {
   DEFAULT: {
     value: "#5CDCFF"
   },
@@ -457,7 +464,7 @@ const m = {
   900: {
     value: "#005B73"
   }
-}, D = {
+}, W = {
   DEFAULT: {
     value: "#8B47FF"
   },
@@ -491,7 +498,7 @@ const m = {
   900: {
     value: "#1E0050"
   }
-}, A = {
+}, L = {
   DEFAULT: {
     value: "#F4F2EC"
   },
@@ -525,7 +532,7 @@ const m = {
   900: {
     value: "#E8CECE"
   }
-}, z = {
+}, H = {
   50: {
     value: "#FCFDFC"
   },
@@ -568,30 +575,30 @@ const m = {
   950: {
     value: "#10141B"
   }
-}, B = {
+}, T = {
   100: {
     value: "#D3ECEE"
   },
   200: {
     value: "#B3DEE2"
   }
-}, L = {
-  sand: A,
-  blacks: h,
-  blue: F,
-  sapphire: k,
-  pink: x,
-  peach: f,
-  red: y,
-  orange: _,
-  yellow: E,
-  green: C,
-  teal: S,
-  cyan: w,
-  purple: D,
-  neutral: z,
-  mint: B
-}, R = {
+}, U = {
+  sand: L,
+  blacks: f,
+  blue: _,
+  sapphire: E,
+  pink: C,
+  peach: S,
+  red: D,
+  orange: A,
+  yellow: w,
+  green: B,
+  teal: z,
+  cyan: R,
+  purple: W,
+  neutral: H,
+  mint: T
+}, M = {
   display: {
     value: "'Playfair Display', serif"
   },
@@ -607,7 +614,7 @@ const m = {
   body: {
     value: "Inter, sans-serif"
   }
-}, W = {
+}, X = {
   xs: {
     value: "0.625rem"
   },
@@ -672,7 +679,7 @@ const m = {
     value: "1.25rem"
   }
   // 20px
-}, H = {
+}, V = {
   regular: {
     value: 400
   },
@@ -712,7 +719,7 @@ const m = {
   900: "4.5rem",
   // 96px
   1600: "8rem"
-}, T = {
+}, P = {
   none: {
     value: "0"
   },
@@ -752,7 +759,7 @@ const m = {
   "5xl": {
     value: e[1600]
   }
-}, U = {
+}, I = {
   none: {
     value: "0"
   },
@@ -777,7 +784,7 @@ const m = {
   full: {
     value: "100%"
   }
-}, M = l({
+}, O = l({
   slots: n.keys(),
   base: {
     root: {
@@ -785,7 +792,7 @@ const m = {
       pb: "xs"
     }
   }
-}), V = a({
+}), Y = o({
   base: {
     borderRadius: "sm",
     transition: "all 0.1s ease-in-out",
@@ -895,6 +902,9 @@ const m = {
         _active: {
           bg: "bg.active"
         },
+        _expanded: {
+          bg: "bg.active"
+        },
         _disabled: {
           opacity: 1,
           color: "fg.subtle",
@@ -911,15 +921,46 @@ const m = {
         _active: {
           bg: "bg.active"
         },
+        _expanded: {
+          bg: "bg.active"
+        },
         _disabled: {
           bg: "transparent",
           _hover: {
             bg: "transparent"
           }
         }
+      },
+      subtle: {
+        color: "fg",
+        bg: "bg.subtle",
+        border: "none",
+        _hover: {
+          bg: "bg.hover"
+        },
+        _active: {
+          bg: "bg.active"
+        },
+        _expanded: {
+          bg: "bg.active"
+        },
+        _disabled: {
+          opacity: 1,
+          color: "fg.subtle",
+          bg: "bg.muted",
+          _hover: {
+            bg: "bg.muted"
+          }
+        }
       }
     },
     size: {
+      xs: {
+        _icon: {
+          width: "0.875rem",
+          height: "0.875rem"
+        }
+      },
       "2xl": {
         px: "1.5rem",
         h: "3.5rem",
@@ -944,18 +985,18 @@ const m = {
     size: "md",
     variant: "outline"
   }
-}), X = l({
-  slots: c.keys(),
+}), $ = l({
+  slots: u.keys(),
   base: {
     content: {
       bg: "bg"
     }
   }
-}), I = a({
+}), j = o({
   base: {
     borderColor: "border"
   }
-}), P = l({
+}), q = l({
   slots: d.keys(),
   base: {
     header: {
@@ -967,7 +1008,7 @@ const m = {
       bg: "bg"
     }
   }
-}), O = l({
+}), G = l({
   slots: ["preview", "input", "textarea"],
   base: {
     preview: {
@@ -1016,18 +1057,17 @@ const m = {
       }
     }
   }
-}), Y = l({
+}), J = l({
   slots: b.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), $ = a({
+}), K = o({
   base: {
     px: "sm",
     borderRadius: "sm",
-    border: "1px solid",
     transition: "border-color 0.2s ease-in-out",
     bg: "bg",
     color: "fg",
@@ -1042,7 +1082,8 @@ const m = {
       borderColor: "blue.border"
     },
     _focusVisible: {
-      borderColor: "blue.border"
+      borderColor: "blue.border",
+      outline: "none"
     },
     _placeholder: {
       color: "fg.subtle"
@@ -1055,8 +1096,71 @@ const m = {
       }
     }
   }
-}), q = l({
-  slots: v.keys(),
+}), N = o({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: "0",
+    minW: "1.25rem",
+    px: "1",
+    borderRadius: "0",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    fontFamily: "mono",
+    fontWeight: "medium",
+    lineHeight: "1",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    wordSpacing: "normal"
+  },
+  variants: {
+    variant: {
+      raised: {
+        color: "fg.muted",
+        bg: "bg.subtle",
+        borderColor: "border.muted",
+        borderBottomWidth: "2px"
+      },
+      outline: {
+        color: "fg.muted",
+        bg: "transparent",
+        borderColor: "border.muted"
+      },
+      subtle: {
+        color: "fg",
+        bg: "bg.muted",
+        borderColor: "border.subtle"
+      },
+      plain: {
+        color: "fg.muted",
+        bg: "transparent",
+        borderColor: "transparent",
+        minW: "auto",
+        px: "0"
+      }
+    },
+    size: {
+      sm: {
+        height: "1rem",
+        textStyle: "label/XS/medium"
+      },
+      md: {
+        height: "1.25rem",
+        textStyle: "label/XS/medium"
+      },
+      lg: {
+        height: "1.5rem",
+        textStyle: "label/S/medium"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "raised"
+  }
+}), Q = l({
+  slots: g.keys(),
   base: {
     itemGroupLabel: {
       ml: "{2xs}",
@@ -1068,24 +1172,21 @@ const m = {
       bg: "bg.menu-item.default",
       color: "fg.menu-item.default",
       textStyle: "label/M/regular",
-      px: "0.5rem",
-      h: "2.25rem",
-      _hover: {
-        bg: "bg.menu-item.hover"
-      },
-      _focus: {
-        bg: "bg.menu-item.focus"
-      },
-      _active: {
-        bg: "bg.menu-item.selected"
-      }
+      px: "0",
+      h: "auto"
+    },
+    separator: {
+      my: "2xs",
+      borderColor: "border.muted"
     },
     content: {
       display: "flex",
       flexDirection: "column",
-      gap: "2xs",
+      gap: "0",
       borderRadius: "sm",
-      py: "xs",
+      p: "0",
+      px: "0",
+      py: "0",
       bg: "bg",
       borderWidth: "1px",
       borderStyle: "solid",
@@ -1095,8 +1196,8 @@ const m = {
       textStyle: "label/M/regular"
     }
   }
-}), G = l({
-  slots: g.keys(),
+}), Z = l({
+  slots: v.keys(),
   base: {
     positioner: {
       _focus: {
@@ -1114,9 +1215,11 @@ const m = {
     content: {
       gap: "8px",
       py: "xs",
-      borderRadius: "12px",
+      borderRadius: "xs",
       bg: "bg",
-      borderColor: "border",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "border.muted",
       _focus: {
         boxShadow: "none !important"
       }
@@ -1147,12 +1250,12 @@ const m = {
       }
     }
   }
-}), j = o.variants?.size ?? {}, J = {
-  ...o,
+}), ee = a.variants?.size ?? {}, le = {
+  ...a,
   variants: {
-    ...o.variants,
+    ...a.variants,
     size: {
-      ...j,
+      ...ee,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -1164,12 +1267,12 @@ const m = {
       }
     }
   }
-}, K = a({
+}, oe = o({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
   }
-}), N = a({
+}), ae = o({
   base: {
     paddingX: "sm",
     paddingY: "xs",
@@ -1195,8 +1298,8 @@ const m = {
       color: "fg.subtle"
     }
   }
-}), Q = l({
-  slots: p.keys(),
+}), re = l({
+  slots: m.keys(),
   base: {
     content: {
       bg: "bg.inverted",
@@ -1206,7 +1309,7 @@ const m = {
       bg: "bg.inverted"
     }
   }
-}), Z = {
+}), se = {
   DEFAULT: {
     value: {
       base: "1px solid {colors.blacks.400}",
@@ -1243,7 +1346,7 @@ const m = {
       _dark: "1px solid {colors.blue.900}"
     }
   }
-}, ee = {
+}, te = {
   DEFAULT: {
     value: {
       base: "{colors.blacks.800}",
@@ -1252,7 +1355,7 @@ const m = {
   },
   muted: {
     value: {
-      base: "{colors.blacks.500}",
+      base: "{colors.blacks.450}",
       _dark: "{colors.blacks.500}"
     }
   },
@@ -1327,7 +1430,7 @@ const m = {
       value: "{colors.fg.muted}"
     }
   }
-}, le = {
+}, ce = {
   DEFAULT: {
     value: {
       base: "{colors.blacks.50}",
@@ -1424,13 +1527,19 @@ const m = {
       value: "{colors.bg}"
     },
     hover: {
-      value: "{colors.bg.hover}"
+      value: {
+        base: "{colors.bg.muted}"
+      }
     },
     focus: {
-      value: "{colors.bg.hover}"
+      value: {
+        base: "{colors.bg.muted}"
+      }
     },
     selected: {
-      value: "{colors.bg.active}"
+      value: {
+        base: "{colors.bg.active}"
+      }
     }
   },
   display: {
@@ -1583,7 +1692,7 @@ const m = {
       }
     }
   }
-}, ae = {
+}, ie = {
   DEFAULT: {
     value: {
       base: "{colors.neutral.500}",
@@ -1592,13 +1701,13 @@ const m = {
   },
   muted: {
     value: {
-      base: "{colors.neutral.400}",
+      base: "{colors.neutral.500}",
       _dark: "{colors.neutral.700}"
     }
   },
   subtle: {
     value: {
-      base: "{colors.neutral.300}",
+      base: "{colors.neutral.400}",
       _dark: "{colors.neutral.750}"
     }
   },
@@ -1625,14 +1734,14 @@ const m = {
       value: "{colors.border.muted}"
     }
   }
-}, oe = {
+}, ne = {
   border: {
     value: {
       _light: "{colors.mint.200}",
       _dark: "{colors.mint.200}"
     }
   }
-}, re = {
+}, ue = {
   contrast: {
     value: {
       _light: "black",
@@ -1681,7 +1790,7 @@ const m = {
       _dark: "{colors.orange.500}"
     }
   }
-}, se = {
+}, de = {
   text: {
     primary: {
       value: {
@@ -1842,7 +1951,7 @@ const m = {
       }
     }
   }
-}, te = {
+}, be = {
   selectable: {
     primary: {
       value: {
@@ -1851,15 +1960,15 @@ const m = {
       }
     }
   }
-}, ie = {
-  fg: ee,
-  bg: le,
-  border: ae,
-  blue: oe,
-  orange: re,
-  vis: se,
-  text: te
-}, ue = r({
+}, ge = {
+  fg: te,
+  bg: ce,
+  border: ie,
+  blue: ne,
+  orange: ue,
+  vis: de,
+  text: be
+}, ve = r({
   modal: {
     value: {
       paddingInline: "xs",
@@ -1871,7 +1980,7 @@ const m = {
       boxShadow: "mid"
     }
   }
-}), ne = {
+}), me = {
   "low-light": {
     value: "0px 2px 4px 0px rgba(0, 0, 0, 0.10)"
   },
@@ -1902,7 +2011,7 @@ const m = {
   "desktop-icon-label-text-selected-dark": {
     value: "0px 2px 4px rgba(37, 99, 235, 0.75)"
   }
-}, ce = {
+}, pe = {
   low: {
     value: {
       base: "{shadows.low-light}",
@@ -1933,7 +2042,7 @@ const m = {
       _dark: "{shadows.desktop-icon-label-text-selected-dark}"
     }
   }
-}, de = s({
+}, Fe = s({
   brand: {
     value: {
       fontFamily: "brand",
@@ -2166,50 +2275,53 @@ const m = {
       letterSpacing: "0.14px"
     }
   }
-}), be = t({
-  globalCss: m,
+}), he = t({
+  globalCss: y,
   theme: {
     breakpoints: {
       "3xl": "2560px",
       "4xl": "3840px"
     },
-    textStyles: de,
-    layerStyles: ue,
+    textStyles: Fe,
+    layerStyles: ve,
     recipes: {
-      button: V,
-      divider: I,
-      input: $,
-      skeleton: K,
-      textarea: N
+      button: Y,
+      divider: j,
+      input: K,
+      kbd: N,
+      skeleton: oe,
+      textarea: ae
     },
     tokens: {
-      colors: L,
-      fonts: R,
-      fontSizes: W,
-      fontWeights: H,
-      radii: U,
-      shadows: ne,
-      spacing: T
+      colors: U,
+      fonts: M,
+      fontSizes: X,
+      fontWeights: V,
+      radii: I,
+      shadows: me,
+      spacing: P
     },
     semanticTokens: {
-      colors: ie,
-      borders: Z,
-      shadows: ce
+      colors: ge,
+      borders: se,
+      shadows: pe
     },
     slotRecipes: {
-      alert: M,
-      drawer: P,
-      tooltip: Q,
-      popover: G,
-      menu: q,
-      editable: O,
-      form: Y,
-      dialog: X,
-      progressCircle: J
+      alert: O,
+      drawer: q,
+      tooltip: re,
+      popover: Z,
+      menu: Q,
+      editable: G,
+      form: J,
+      dialog: $,
+      progressCircle: le
     }
   }
-}), me = i(u, be);
+}), _e = c(i, he);
 export {
-  me as t
+  fe as c,
+  x as m,
+  _e as t
 };
-//# sourceMappingURL=theme-D0VvFB1Y.js.map
+//# sourceMappingURL=theme-Dq4r3aRE.js.map