@discourser/design-system 0.9.2 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ import { Progress } from '@ark-ui/react/progress';
22
22
  import { Popover, PopoverContext } from '@ark-ui/react/popover';
23
23
  import { Tooltip as Tooltip$1, TooltipContext } from '@ark-ui/react/tooltip';
24
24
  import { clsx } from 'clsx';
25
+ import { fieldAnatomy, accordionAnatomy, dialogAnatomy, tabsAnatomy, switchAnatomy, checkboxAnatomy, radioGroupAnatomy, selectAnatomy, sliderAnatomy, avatarAnatomy, progressAnatomy, toastAnatomy, popoverAnatomy, tooltipAnatomy } from '@ark-ui/react/anatomy';
25
26
 
26
27
  var __defProp = Object.defineProperty;
27
28
  var __export = (target, all) => {
@@ -46,7 +47,7 @@ var Spinner = styled(ark$1.span, spinner);
46
47
  var Span = styled("span");
47
48
  var Loader = forwardRef(function Loader2(props, ref) {
48
49
  const {
49
- spinner: spinner2 = /* @__PURE__ */ jsx(Spinner, { size: "inherit", borderWidth: "0.125em", color: "inherit" }),
50
+ spinner: spinner3 = /* @__PURE__ */ jsx(Spinner, { size: "inherit", borderWidth: "0.125em", color: "inherit" }),
50
51
  spinnerPlacement = "start",
51
52
  children,
52
53
  text,
@@ -56,14 +57,14 @@ var Loader = forwardRef(function Loader2(props, ref) {
56
57
  if (!visible) return children;
57
58
  if (text) {
58
59
  return /* @__PURE__ */ jsxs(Span, { ref, display: "contents", ...rest, children: [
59
- spinnerPlacement === "start" && spinner2,
60
+ spinnerPlacement === "start" && spinner3,
60
61
  text,
61
- spinnerPlacement === "end" && spinner2
62
+ spinnerPlacement === "end" && spinner3
62
63
  ] });
63
64
  }
64
- if (spinner2) {
65
+ if (spinner3) {
65
66
  return /* @__PURE__ */ jsxs(Span, { ref, display: "contents", ...rest, children: [
66
- /* @__PURE__ */ jsx(AbsoluteCenter, { display: "inline-flex", children: spinner2 }),
67
+ /* @__PURE__ */ jsx(AbsoluteCenter, { display: "inline-flex", children: spinner3 }),
67
68
  /* @__PURE__ */ jsx(Span, { visibility: "hidden", display: "contents", children })
68
69
  ] });
69
70
  }
@@ -81,7 +82,7 @@ var Button = forwardRef(
81
82
  loading,
82
83
  loadingText,
83
84
  children,
84
- spinner: spinner2,
85
+ spinner: spinner3,
85
86
  spinnerPlacement,
86
87
  colorPalette = "primary",
87
88
  className,
@@ -101,7 +102,7 @@ var Button = forwardRef(
101
102
  children: !props.asChild && loading ? /* @__PURE__ */ jsx(
102
103
  Loader,
103
104
  {
104
- spinner: spinner2,
105
+ spinner: spinner3,
105
106
  text: loadingText,
106
107
  spinnerPlacement,
107
108
  children
@@ -210,10 +211,10 @@ var iconMap = {
210
211
  error: CircleXIcon
211
212
  };
212
213
  var Indicator = forwardRef(function ToastIndicator(props, ref) {
213
- const toast2 = useToastContext();
214
- const StatusIcon = iconMap[toast2.type];
214
+ const toast3 = useToastContext();
215
+ const StatusIcon = iconMap[toast3.type];
215
216
  if (!StatusIcon) return null;
216
- return /* @__PURE__ */ jsx(Icon, { ref, "data-type": toast2.type, ...props, children: /* @__PURE__ */ jsx(StatusIcon, {}) });
217
+ return /* @__PURE__ */ jsx(Icon, { ref, "data-type": toast3.type, ...props, children: /* @__PURE__ */ jsx(StatusIcon, {}) });
217
218
  });
218
219
  var toaster = createToaster({
219
220
  placement: "bottom-end",
@@ -222,16 +223,16 @@ var toaster = createToaster({
222
223
  max: 5
223
224
  });
224
225
  var Toaster = () => {
225
- return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxs(Root2, { children: [
226
- toast2.type === "loading" ? /* @__PURE__ */ jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsx(Indicator, {}),
226
+ return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast3) => /* @__PURE__ */ jsxs(Root2, { children: [
227
+ toast3.type === "loading" ? /* @__PURE__ */ jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsx(Indicator, {}),
227
228
  /* @__PURE__ */ jsxs(Stack, { gap: "3", alignItems: "start", children: [
228
229
  /* @__PURE__ */ jsxs(Stack, { gap: "1", children: [
229
- toast2.title && /* @__PURE__ */ jsx(Title, { children: toast2.title }),
230
- toast2.description && /* @__PURE__ */ jsx(Description, { children: toast2.description })
230
+ toast3.title && /* @__PURE__ */ jsx(Title, { children: toast3.title }),
231
+ toast3.description && /* @__PURE__ */ jsx(Description, { children: toast3.description })
231
232
  ] }),
232
- toast2.action && /* @__PURE__ */ jsx(ActionTrigger, { children: toast2.action.label })
233
+ toast3.action && /* @__PURE__ */ jsx(ActionTrigger, { children: toast3.action.label })
233
234
  ] }),
234
- toast2.closable && /* @__PURE__ */ jsx(CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm" }) })
235
+ toast3.closable && /* @__PURE__ */ jsx(CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm" }) })
235
236
  ] }) }) });
236
237
  };
237
238
 
@@ -623,8 +624,8 @@ var Marks = forwardRef(function Marks2(props, ref) {
623
624
  }) });
624
625
  });
625
626
  var Thumbs = (props) => {
626
- const slider2 = useSliderContext();
627
- return slider2.value.map((_, index) => /* @__PURE__ */ jsx(Thumb2, { index, ...props, children: /* @__PURE__ */ jsx(HiddenInput3, {}) }, index));
627
+ const slider3 = useSliderContext();
628
+ return slider3.value.map((_, index) => /* @__PURE__ */ jsx(Thumb2, { index, ...props, children: /* @__PURE__ */ jsx(HiddenInput3, {}) }, index));
628
629
  };
629
630
 
630
631
  // src/components/Avatar.tsx
@@ -798,6 +799,21 @@ function defineRecipe(config) {
798
799
  function defineSlotRecipe(config) {
799
800
  return config;
800
801
  }
802
+ function createProxy() {
803
+ const identity = (v) => v;
804
+ return new Proxy(identity, {
805
+ get() {
806
+ return identity;
807
+ }
808
+ });
809
+ }
810
+ var defineSemanticTokens = /* @__PURE__ */ createProxy();
811
+ function defineTextStyles(definition) {
812
+ return definition;
813
+ }
814
+ function defineLayerStyles(definition) {
815
+ return definition;
816
+ }
801
817
 
802
818
  // src/recipes/button.recipe.ts
803
819
  var buttonRecipe = defineRecipe({
@@ -1871,6 +1887,3004 @@ function cn(...inputs) {
1871
1887
  return clsx(inputs);
1872
1888
  }
1873
1889
 
1874
- export { AbsoluteCenter_exports as AbsoluteCenter, Accordion_exports as Accordion, Avatar_exports as Avatar, Badge, Button, ButtonGroup, Card_exports as Card, Checkbox_exports as Checkbox, CloseButton_exports as CloseButton, Dialog_exports as Dialog, Drawer_exports as Drawer, Group_exports as Group, Heading, Icon_exports as Icon, IconButton, Input, InputAddon, InputGroup2 as InputGroup, Popover_exports as Popover, Progress_exports as Progress, RadioGroup_exports as RadioGroup, Select_exports as Select, Skeleton_exports as Skeleton, Slider_exports as Slider, Spinner, Switch_exports as Switch, Tabs_exports as Tabs, Textarea, Toaster, Tooltip_exports as Tooltip, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
1890
+ // src/preset/colors/m3-primary.ts
1891
+ var m3 = material3Language.colors.primary;
1892
+ var primary = defineSemanticTokens.colors({
1893
+ // Base scale mapping M3 tonal to Radix
1894
+ "1": { value: { base: m3[99], _dark: m3[10] } },
1895
+ "2": { value: { base: m3[95], _dark: m3[20] } },
1896
+ "3": { value: { base: m3[90], _dark: m3[30] } },
1897
+ "4": { value: { base: m3[80], _dark: m3[30] } },
1898
+ "5": { value: { base: m3[70], _dark: m3[40] } },
1899
+ "6": { value: { base: m3[60], _dark: m3[40] } },
1900
+ "7": { value: { base: m3[50], _dark: m3[50] } },
1901
+ "8": { value: { base: m3[40], _dark: m3[60] } },
1902
+ "9": { value: { base: m3[40], _dark: m3[80] } },
1903
+ // Primary action color
1904
+ "10": { value: { base: m3[30], _dark: m3[70] } },
1905
+ // Hover state
1906
+ "11": { value: { base: m3[30], _dark: m3[90] } },
1907
+ // Low-contrast text
1908
+ "12": { value: { base: m3[10], _dark: m3[95] } },
1909
+ // High-contrast text
1910
+ // Alpha variants (for overlays/transparency)
1911
+ a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
1912
+ a2: { value: { base: `${m3[40]}10`, _dark: `${m3[80]}10` } },
1913
+ a3: { value: { base: `${m3[40]}18`, _dark: `${m3[80]}18` } },
1914
+ a4: { value: { base: `${m3[40]}24`, _dark: `${m3[80]}24` } },
1915
+ a5: { value: { base: `${m3[40]}32`, _dark: `${m3[80]}32` } },
1916
+ a6: { value: { base: `${m3[40]}48`, _dark: `${m3[80]}48` } },
1917
+ a7: { value: { base: `${m3[40]}64`, _dark: `${m3[80]}64` } },
1918
+ a8: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } },
1919
+ a9: { value: { base: `${m3[40]}96`, _dark: `${m3[80]}96` } },
1920
+ a10: { value: { base: `${m3[40]}AA`, _dark: `${m3[80]}AA` } },
1921
+ a11: { value: { base: `${m3[40]}CC`, _dark: `${m3[80]}CC` } },
1922
+ a12: { value: { base: `${m3[40]}EE`, _dark: `${m3[80]}EE` } },
1923
+ // Semantic variants (Park UI component styling)
1924
+ solid: {
1925
+ bg: {
1926
+ DEFAULT: { value: { base: "{colors.primary.9}", _dark: "{colors.primary.9}" } },
1927
+ hover: { value: { base: "{colors.primary.10}", _dark: "{colors.primary.10}" } }
1928
+ },
1929
+ fg: {
1930
+ DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.primary.1}" } }
1931
+ }
1932
+ },
1933
+ subtle: {
1934
+ bg: {
1935
+ DEFAULT: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
1936
+ hover: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } },
1937
+ active: { value: { base: "{colors.primary.a5}", _dark: "{colors.primary.a5}" } }
1938
+ },
1939
+ fg: {
1940
+ DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
1941
+ }
1942
+ },
1943
+ surface: {
1944
+ bg: {
1945
+ DEFAULT: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
1946
+ active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
1947
+ },
1948
+ border: {
1949
+ DEFAULT: { value: { base: "{colors.primary.a6}", _dark: "{colors.primary.a6}" } },
1950
+ hover: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
1951
+ },
1952
+ fg: {
1953
+ DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
1954
+ }
1955
+ },
1956
+ outline: {
1957
+ bg: {
1958
+ hover: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
1959
+ active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
1960
+ },
1961
+ border: {
1962
+ DEFAULT: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
1963
+ },
1964
+ fg: {
1965
+ DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
1966
+ }
1967
+ },
1968
+ plain: {
1969
+ bg: {
1970
+ hover: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
1971
+ active: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } }
1972
+ },
1973
+ fg: {
1974
+ DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
1975
+ }
1976
+ }
1977
+ });
1978
+
1979
+ // src/preset/colors/m3-neutral.ts
1980
+ var m32 = material3Language.colors.neutral;
1981
+ var neutral = defineSemanticTokens.colors({
1982
+ "1": { value: { base: m32[99], _dark: m32[10] } },
1983
+ "2": { value: { base: m32[95], _dark: m32[20] } },
1984
+ "3": { value: { base: m32[90], _dark: m32[20] } },
1985
+ "4": { value: { base: m32[80], _dark: m32[30] } },
1986
+ "5": { value: { base: m32[70], _dark: m32[30] } },
1987
+ "6": { value: { base: m32[60], _dark: m32[40] } },
1988
+ "7": { value: { base: m32[50], _dark: m32[50] } },
1989
+ "8": { value: { base: m32[40], _dark: m32[60] } },
1990
+ "9": { value: { base: m32[40], _dark: m32[60] } },
1991
+ "10": { value: { base: m32[30], _dark: m32[70] } },
1992
+ "11": { value: { base: m32[30], _dark: m32[80] } },
1993
+ "12": { value: { base: m32[10], _dark: m32[90] } },
1994
+ // Alpha variants
1995
+ a1: { value: { base: "#00000003", _dark: "#ffffff05" } },
1996
+ a2: { value: { base: "#00000006", _dark: "#ffffff09" } },
1997
+ a3: { value: { base: "#0000000f", _dark: "#ffffff12" } },
1998
+ a4: { value: { base: "#00000017", _dark: "#ffffff1b" } },
1999
+ a5: { value: { base: "#0000001f", _dark: "#ffffff22" } },
2000
+ a6: { value: { base: "#00000026", _dark: "#ffffff2c" } },
2001
+ a7: { value: { base: "#00000031", _dark: "#ffffff3b" } },
2002
+ a8: { value: { base: "#00000044", _dark: "#ffffff55" } },
2003
+ a9: { value: { base: "#00000072", _dark: "#ffffff64" } },
2004
+ a10: { value: { base: "#0000007c", _dark: "#ffffff72" } },
2005
+ a11: { value: { base: "#0000009b", _dark: "#ffffffaf" } },
2006
+ a12: { value: { base: "#000000df", _dark: "#ffffffed" } },
2007
+ // Semantic variants
2008
+ solid: {
2009
+ bg: {
2010
+ DEFAULT: { value: { base: "{colors.black}", _dark: "{colors.white}" } },
2011
+ hover: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
2012
+ },
2013
+ fg: {
2014
+ DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.black}" } }
2015
+ }
2016
+ },
2017
+ subtle: {
2018
+ bg: {
2019
+ DEFAULT: { value: { base: "{colors.neutral.a3}", _dark: "{colors.neutral.a3}" } },
2020
+ hover: { value: { base: "{colors.neutral.a4}", _dark: "{colors.neutral.a4}" } },
2021
+ active: { value: { base: "{colors.neutral.a5}", _dark: "{colors.neutral.a5}" } }
2022
+ },
2023
+ fg: {
2024
+ DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
2025
+ }
2026
+ },
2027
+ surface: {
2028
+ bg: {
2029
+ DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.neutral.1}" } },
2030
+ hover: { value: { base: "{colors.neutral.2}", _dark: "{colors.neutral.2}" } },
2031
+ active: { value: { base: "{colors.neutral.3}", _dark: "{colors.neutral.3}" } }
2032
+ },
2033
+ border: {
2034
+ DEFAULT: { value: { base: "{colors.neutral.6}", _dark: "{colors.neutral.6}" } },
2035
+ hover: { value: { base: "{colors.neutral.7}", _dark: "{colors.neutral.7}" } }
2036
+ },
2037
+ fg: {
2038
+ DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
2039
+ }
2040
+ },
2041
+ outline: {
2042
+ bg: {
2043
+ hover: { value: { base: "{colors.neutral.a2}", _dark: "{colors.neutral.a2}" } },
2044
+ active: { value: { base: "{colors.neutral.a3}", _dark: "{colors.neutral.a3}" } }
2045
+ },
2046
+ border: {
2047
+ DEFAULT: { value: { base: "{colors.neutral.6}", _dark: "{colors.neutral.6}" } }
2048
+ },
2049
+ fg: {
2050
+ DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
2051
+ }
2052
+ },
2053
+ plain: {
2054
+ bg: {
2055
+ hover: { value: { base: "{colors.neutral.a3}", _dark: "{colors.neutral.a3}" } },
2056
+ active: { value: { base: "{colors.neutral.a4}", _dark: "{colors.neutral.a4}" } }
2057
+ },
2058
+ fg: {
2059
+ DEFAULT: { value: { base: "{colors.neutral.12}", _dark: "{colors.neutral.12}" } }
2060
+ }
2061
+ }
2062
+ });
2063
+
2064
+ // src/preset/colors/m3-error.ts
2065
+ var m33 = material3Language.colors.error;
2066
+ var error = defineSemanticTokens.colors({
2067
+ "1": { value: { base: m33[99], _dark: m33[10] } },
2068
+ "2": { value: { base: m33[95], _dark: m33[20] } },
2069
+ "3": { value: { base: m33[90], _dark: m33[30] } },
2070
+ "4": { value: { base: m33[80], _dark: m33[30] } },
2071
+ "5": { value: { base: m33[70], _dark: m33[40] } },
2072
+ "6": { value: { base: m33[60], _dark: m33[40] } },
2073
+ "7": { value: { base: m33[50], _dark: m33[50] } },
2074
+ "8": { value: { base: m33[40], _dark: m33[60] } },
2075
+ "9": { value: { base: m33[40], _dark: m33[80] } },
2076
+ "10": { value: { base: m33[30], _dark: m33[70] } },
2077
+ "11": { value: { base: m33[30], _dark: m33[90] } },
2078
+ "12": { value: { base: m33[10], _dark: m33[95] } },
2079
+ // Alpha variants
2080
+ a1: { value: { base: `${m33[40]}08`, _dark: `${m33[80]}08` } },
2081
+ a2: { value: { base: `${m33[40]}10`, _dark: `${m33[80]}10` } },
2082
+ a3: { value: { base: `${m33[40]}18`, _dark: `${m33[80]}18` } },
2083
+ a4: { value: { base: `${m33[40]}24`, _dark: `${m33[80]}24` } },
2084
+ a5: { value: { base: `${m33[40]}32`, _dark: `${m33[80]}32` } },
2085
+ a6: { value: { base: `${m33[40]}48`, _dark: `${m33[80]}48` } },
2086
+ a7: { value: { base: `${m33[40]}64`, _dark: `${m33[80]}64` } },
2087
+ a8: { value: { base: `${m33[40]}80`, _dark: `${m33[80]}80` } },
2088
+ a9: { value: { base: `${m33[40]}96`, _dark: `${m33[80]}96` } },
2089
+ a10: { value: { base: `${m33[40]}AA`, _dark: `${m33[80]}AA` } },
2090
+ a11: { value: { base: `${m33[40]}CC`, _dark: `${m33[80]}CC` } },
2091
+ a12: { value: { base: `${m33[40]}EE`, _dark: `${m33[80]}EE` } },
2092
+ // Semantic variants
2093
+ solid: {
2094
+ bg: {
2095
+ DEFAULT: { value: { base: "{colors.error.9}", _dark: "{colors.error.9}" } },
2096
+ hover: { value: { base: "{colors.error.10}", _dark: "{colors.error.10}" } }
2097
+ },
2098
+ fg: { DEFAULT: { value: { base: "white", _dark: "white" } } }
2099
+ },
2100
+ subtle: {
2101
+ bg: {
2102
+ DEFAULT: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
2103
+ hover: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } },
2104
+ active: { value: { base: "{colors.error.a5}", _dark: "{colors.error.a5}" } }
2105
+ },
2106
+ fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
2107
+ },
2108
+ surface: {
2109
+ bg: {
2110
+ DEFAULT: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
2111
+ active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
2112
+ },
2113
+ border: {
2114
+ DEFAULT: { value: { base: "{colors.error.a6}", _dark: "{colors.error.a6}" } },
2115
+ hover: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } }
2116
+ },
2117
+ fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
2118
+ },
2119
+ outline: {
2120
+ bg: {
2121
+ hover: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
2122
+ active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
2123
+ },
2124
+ border: { DEFAULT: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } } },
2125
+ fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
2126
+ },
2127
+ plain: {
2128
+ bg: {
2129
+ hover: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
2130
+ active: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } }
2131
+ },
2132
+ fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
2133
+ }
2134
+ });
2135
+
2136
+ // src/preset/colors/index.ts
2137
+ var colors = {
2138
+ primary,
2139
+ neutral,
2140
+ error,
2141
+ // Alias gray to neutral (Park UI expects this)
2142
+ gray: neutral,
2143
+ // Map red to error for Park UI compatibility
2144
+ red: error
2145
+ };
2146
+
2147
+ // src/preset/semantic-tokens.ts
2148
+ var semantic = material3Language.semantic;
2149
+ var semanticDark = material3Language.semanticDark;
2150
+ var m3SemanticTokens = defineSemanticTokens.colors({
2151
+ // M3 Surface System
2152
+ surface: {
2153
+ DEFAULT: { value: { base: semantic.surface, _dark: semanticDark.surface } },
2154
+ dim: { value: { base: semantic.surfaceContainerLow, _dark: semanticDark.surfaceContainerLow } },
2155
+ bright: { value: { base: semantic.surfaceContainerHigh, _dark: semanticDark.surfaceContainerHigh } },
2156
+ container: {
2157
+ DEFAULT: { value: { base: semantic.surfaceContainer, _dark: semanticDark.surfaceContainer } },
2158
+ low: { value: { base: semantic.surfaceContainerLow, _dark: semanticDark.surfaceContainerLow } },
2159
+ lowest: { value: { base: semantic.surfaceContainerLowest, _dark: semanticDark.surfaceContainerLowest } },
2160
+ high: { value: { base: semantic.surfaceContainerHigh, _dark: semanticDark.surfaceContainerHigh } },
2161
+ highest: { value: { base: semantic.surfaceContainerHighest, _dark: semanticDark.surfaceContainerHighest } }
2162
+ }
2163
+ },
2164
+ onSurface: {
2165
+ DEFAULT: { value: { base: semantic.onSurface, _dark: semanticDark.onSurface } },
2166
+ variant: { value: { base: semantic.onSurfaceVariant, _dark: semanticDark.onSurfaceVariant } }
2167
+ },
2168
+ // M3 Primary tokens (for explicit M3 usage)
2169
+ m3Primary: {
2170
+ DEFAULT: { value: { base: semantic.primary, _dark: semanticDark.primary } },
2171
+ container: { value: { base: semantic.primaryContainer, _dark: semanticDark.primaryContainer } }
2172
+ },
2173
+ onM3Primary: {
2174
+ DEFAULT: { value: { base: semantic.onPrimary, _dark: semanticDark.onPrimary } },
2175
+ container: { value: { base: semantic.onPrimaryContainer, _dark: semanticDark.onPrimaryContainer } }
2176
+ },
2177
+ // M3 Secondary
2178
+ secondary: {
2179
+ DEFAULT: { value: { base: semantic.secondary, _dark: semanticDark.secondary } },
2180
+ container: { value: { base: semantic.secondaryContainer, _dark: semanticDark.secondaryContainer } }
2181
+ },
2182
+ onSecondary: {
2183
+ DEFAULT: { value: { base: semantic.onSecondary, _dark: semanticDark.onSecondary } },
2184
+ container: { value: { base: semantic.onSecondaryContainer, _dark: semanticDark.onSecondaryContainer } }
2185
+ },
2186
+ // M3 Tertiary
2187
+ tertiary: {
2188
+ DEFAULT: { value: { base: semantic.tertiary, _dark: semanticDark.tertiary } },
2189
+ container: { value: { base: semantic.tertiaryContainer, _dark: semanticDark.tertiaryContainer } }
2190
+ },
2191
+ onTertiary: {
2192
+ DEFAULT: { value: { base: semantic.onTertiary, _dark: semanticDark.onTertiary } },
2193
+ container: { value: { base: semantic.onTertiaryContainer, _dark: semanticDark.onTertiaryContainer } }
2194
+ },
2195
+ // M3 Outline
2196
+ outline: {
2197
+ DEFAULT: { value: { base: semantic.outline, _dark: semanticDark.outline } },
2198
+ variant: { value: { base: semantic.outlineVariant, _dark: semanticDark.outlineVariant } }
2199
+ },
2200
+ // M3 Inverse
2201
+ inverseSurface: { value: { base: semantic.inverseSurface, _dark: semanticDark.inverseSurface } },
2202
+ inverseOnSurface: { value: { base: semantic.inverseOnSurface, _dark: semanticDark.inverseOnSurface } },
2203
+ inversePrimary: { value: { base: semantic.inversePrimary, _dark: semanticDark.inversePrimary } },
2204
+ // Scrim/Shadow
2205
+ scrim: { value: { base: semantic.scrim, _dark: semanticDark.scrim } }
2206
+ });
2207
+
2208
+ // src/preset/recipes/button.ts
2209
+ var button2 = defineRecipe({
2210
+ className: "button",
2211
+ jsx: ["Button", "IconButton", "CloseButton", "ButtonGroup"],
2212
+ base: {
2213
+ alignItems: "center",
2214
+ appearance: "none",
2215
+ borderRadius: "l2",
2216
+ cursor: "pointer",
2217
+ display: "inline-flex",
2218
+ flexShrink: "0",
2219
+ fontWeight: "semibold",
2220
+ gap: "2",
2221
+ isolation: "isolate",
2222
+ justifyContent: "center",
2223
+ outline: "0",
2224
+ position: "relative",
2225
+ transition: "colors",
2226
+ transitionProperty: "background-color, border-color, color, box-shadow",
2227
+ userSelect: "none",
2228
+ verticalAlign: "middle",
2229
+ whiteSpace: "nowrap",
2230
+ _icon: {
2231
+ flexShrink: "0"
2232
+ },
2233
+ _disabled: {
2234
+ layerStyle: "disabled"
2235
+ },
2236
+ focusVisibleRing: "outside"
2237
+ },
2238
+ defaultVariants: {
2239
+ variant: "solid",
2240
+ size: "md"
2241
+ },
2242
+ variants: {
2243
+ variant: {
2244
+ solid: {
2245
+ bg: "colorPalette.solid.bg",
2246
+ color: "colorPalette.solid.fg",
2247
+ _hover: {
2248
+ bg: "colorPalette.solid.bg.hover"
2249
+ }
2250
+ },
2251
+ surface: {
2252
+ bg: "colorPalette.surface.bg",
2253
+ borderWidth: "1px",
2254
+ borderColor: "colorPalette.surface.border",
2255
+ color: "colorPalette.surface.fg",
2256
+ _hover: {
2257
+ borderColor: "colorPalette.surface.border.hover"
2258
+ },
2259
+ _active: {
2260
+ bg: "colorPalette.surface.bg.active"
2261
+ },
2262
+ _on: {
2263
+ bg: "colorPalette.surface.bg.active"
2264
+ }
2265
+ },
2266
+ subtle: {
2267
+ bg: "colorPalette.subtle.bg",
2268
+ color: "colorPalette.subtle.fg",
2269
+ _hover: {
2270
+ bg: "colorPalette.subtle.bg.hover"
2271
+ },
2272
+ _active: {
2273
+ bg: "colorPalette.subtle.bg.active"
2274
+ },
2275
+ _on: {
2276
+ bg: "colorPalette.subtle.bg.active"
2277
+ }
2278
+ },
2279
+ outline: {
2280
+ borderWidth: "1px",
2281
+ borderColor: "colorPalette.outline.border",
2282
+ color: "colorPalette.outline.fg",
2283
+ _hover: {
2284
+ bg: "colorPalette.outline.bg.hover"
2285
+ },
2286
+ _active: {
2287
+ bg: "colorPalette.outline.bg.active"
2288
+ },
2289
+ _on: {
2290
+ bg: "colorPalette.outline.bg.active"
2291
+ }
2292
+ },
2293
+ plain: {
2294
+ color: "colorPalette.plain.fg",
2295
+ _hover: {
2296
+ bg: "colorPalette.plain.bg.hover"
2297
+ },
2298
+ _active: {
2299
+ bg: "colorPalette.plain.bg.active"
2300
+ },
2301
+ _on: {
2302
+ bg: "colorPalette.plain.bg.active"
2303
+ }
2304
+ }
2305
+ },
2306
+ size: {
2307
+ "2xs": { h: "6", minW: "6", textStyle: "xs", px: "2", _icon: { boxSize: "3.5" } },
2308
+ xs: { h: "8", minW: "8", textStyle: "sm", px: "2.5", _icon: { boxSize: "4" } },
2309
+ sm: { h: "9", minW: "9", textStyle: "sm", px: "3", _icon: { boxSize: "4" } },
2310
+ md: { h: "10", minW: "10", textStyle: "sm", px: "3.5", _icon: { boxSize: "5" } },
2311
+ lg: { h: "11", minW: "11", textStyle: "md", px: "4", _icon: { boxSize: "5" } },
2312
+ xl: { h: "12", minW: "12", textStyle: "md", px: "4.5", _icon: { boxSize: "5.5" } },
2313
+ "2xl": { h: "16", minW: "16", textStyle: "xl", px: "6", _icon: { boxSize: "6" } }
2314
+ }
2315
+ }
2316
+ });
2317
+
2318
+ // src/preset/recipes/input.ts
2319
+ var input2 = {
2320
+ className: "input",
2321
+ jsx: ["Input", "Field.Input"],
2322
+ base: {
2323
+ appearance: "none",
2324
+ borderRadius: "l2",
2325
+ height: "var(--input-height)",
2326
+ minHeight: "var(--input-height)",
2327
+ minW: "var(--input-height)",
2328
+ outline: "0",
2329
+ position: "relative",
2330
+ textAlign: "start",
2331
+ transition: "colors",
2332
+ width: "100%",
2333
+ _disabled: {
2334
+ layerStyle: "disabled"
2335
+ }
2336
+ },
2337
+ defaultVariants: {
2338
+ size: "md",
2339
+ variant: "outline"
2340
+ },
2341
+ variants: {
2342
+ variant: {
2343
+ outline: {
2344
+ borderWidth: "1px",
2345
+ borderColor: "neutral.outline.border",
2346
+ focusVisibleRing: "inside",
2347
+ _invalid: {
2348
+ focusRingColor: "error",
2349
+ borderColor: "error"
2350
+ }
2351
+ },
2352
+ surface: {
2353
+ bg: "neutral.surface.bg",
2354
+ borderWidth: "1px",
2355
+ borderColor: "neutral.surface.border",
2356
+ focusVisibleRing: "inside",
2357
+ _invalid: {
2358
+ focusRingColor: "error",
2359
+ borderColor: "error"
2360
+ }
2361
+ },
2362
+ subtle: {
2363
+ borderWidth: "1px",
2364
+ borderColor: "transparent",
2365
+ bg: "neutral.subtle.bg",
2366
+ color: "neutral.subtle.fg",
2367
+ focusVisibleRing: "inside",
2368
+ _invalid: {
2369
+ focusRingColor: "error",
2370
+ borderColor: "error"
2371
+ }
2372
+ },
2373
+ flushed: {
2374
+ borderBottomWidth: "1px",
2375
+ borderBottomColor: "neutral.outline.border",
2376
+ borderRadius: "0",
2377
+ color: "fg.default",
2378
+ px: "0",
2379
+ _invalid: {
2380
+ borderColor: "error"
2381
+ },
2382
+ _focus: {
2383
+ borderColor: "colorPalette.solid.bg",
2384
+ boxShadowColor: "colorPalette.solid.bg",
2385
+ boxShadow: "0 1px 0 0 var(--shadow-color)",
2386
+ _invalid: {
2387
+ borderColor: "error",
2388
+ boxShadowColor: "error"
2389
+ }
2390
+ }
2391
+ }
2392
+ },
2393
+ size: {
2394
+ "2xs": { textStyle: "xs", px: "1.5", "--input-height": "sizes.7" },
2395
+ xs: { textStyle: "sm", px: "2", "--input-height": "sizes.8" },
2396
+ sm: { textStyle: "sm", px: "2.5", "--input-height": "sizes.9" },
2397
+ md: { textStyle: "md", px: "3", "--input-height": "sizes.10" },
2398
+ lg: { textStyle: "md", px: "3.5", "--input-height": "sizes.11" },
2399
+ xl: { textStyle: "lg", px: "4", "--input-height": "sizes.12" },
2400
+ "2xl": { textStyle: "3xl", px: "4.5", "--input-height": "sizes.16" }
2401
+ }
2402
+ }
2403
+ };
2404
+
2405
+ // src/preset/recipes/input-addon.ts
2406
+ var inputAddon2 = defineRecipe({
2407
+ className: "input-addon",
2408
+ base: {
2409
+ alignItems: "center",
2410
+ alignSelf: "stretch",
2411
+ borderRadius: "l2",
2412
+ color: "fg.muted",
2413
+ display: "flex",
2414
+ flex: "0 0 auto",
2415
+ whiteSpace: "nowrap",
2416
+ width: "auto"
2417
+ },
2418
+ defaultVariants: {
2419
+ size: "md",
2420
+ variant: "outline"
2421
+ },
2422
+ variants: {
2423
+ variant: {
2424
+ outline: {
2425
+ borderWidth: "thin",
2426
+ borderColor: "neutral.outline.border"
2427
+ },
2428
+ surface: {
2429
+ bg: "neutral.surface.bg",
2430
+ borderWidth: "thin",
2431
+ borderColor: "neutral.surface.border"
2432
+ },
2433
+ subtle: {
2434
+ bg: "neutral.subtle.bg"
2435
+ }
2436
+ },
2437
+ size: {
2438
+ xs: { textStyle: "sm", px: "2", _icon: { boxSize: "4" } },
2439
+ sm: { textStyle: "sm", px: "2.5", _icon: { boxSize: "4.5" } },
2440
+ md: { textStyle: "md", px: "3", _icon: { boxSize: "5" } },
2441
+ lg: { textStyle: "md", px: "3.5", _icon: { boxSize: "5" } },
2442
+ xl: { textStyle: "lg", px: "4", _icon: { boxSize: "5.5" } }
2443
+ }
2444
+ }
2445
+ });
2446
+
2447
+ // src/preset/recipes/input-group.ts
2448
+ var inputGroup2 = defineSlotRecipe({
2449
+ className: "input-group",
2450
+ slots: ["root", "element"],
2451
+ base: {
2452
+ root: {
2453
+ position: "relative",
2454
+ width: "full"
2455
+ },
2456
+ element: {
2457
+ alignItems: "center",
2458
+ color: "fg.muted",
2459
+ display: "flex",
2460
+ height: "full",
2461
+ justifyContent: "center",
2462
+ position: "absolute",
2463
+ zIndex: "2",
2464
+ _icon: {
2465
+ color: "fg.subtle"
2466
+ }
2467
+ }
2468
+ },
2469
+ defaultVariants: {
2470
+ size: "md"
2471
+ },
2472
+ variants: {
2473
+ size: {
2474
+ xs: {
2475
+ element: { minW: "8", _icon: { boxSize: "4" } },
2476
+ root: {
2477
+ "& > input:not(:first-child)": { ps: "7!" },
2478
+ "& > input:not(:last-child)": { pe: "7!" }
2479
+ }
2480
+ },
2481
+ sm: {
2482
+ root: {
2483
+ "& > input:not(:first-child)": { ps: "8!" },
2484
+ "& > input:not(:last-child)": { pe: "8!" }
2485
+ },
2486
+ element: { minW: "9", _icon: { boxSize: "4.5" } }
2487
+ },
2488
+ md: {
2489
+ root: {
2490
+ "& > input:not(:first-child)": { ps: "9!" },
2491
+ "& > input:not(:last-child)": { pe: "9!" }
2492
+ },
2493
+ element: { minW: "10", _icon: { boxSize: "5" } }
2494
+ },
2495
+ lg: {
2496
+ root: {
2497
+ "& > input:not(:first-child)": { ps: "10!" },
2498
+ "& > input:not(:last-child)": { pe: "10!" }
2499
+ },
2500
+ element: { minW: "11", _icon: { boxSize: "5" } }
2501
+ },
2502
+ xl: {
2503
+ root: {
2504
+ "& > input:not(:first-child)": { ps: "11!" },
2505
+ "& > input:not(:last-child)": { pe: "11!" }
2506
+ },
2507
+ element: { minW: "11", _icon: { boxSize: "5.5" } }
2508
+ }
2509
+ }
2510
+ }
2511
+ });
2512
+ var field = defineSlotRecipe({
2513
+ className: "field",
2514
+ slots: fieldAnatomy.keys(),
2515
+ base: {
2516
+ root: {
2517
+ display: "flex",
2518
+ flexDirection: "column",
2519
+ gap: "1.5"
2520
+ },
2521
+ label: {
2522
+ alignItems: "center",
2523
+ color: "fg.default",
2524
+ display: "flex",
2525
+ gap: "0.5",
2526
+ textAlign: "start",
2527
+ userSelect: "none",
2528
+ textStyle: "label",
2529
+ _disabled: {
2530
+ layerStyle: "disabled"
2531
+ }
2532
+ },
2533
+ requiredIndicator: {
2534
+ color: "colorPalette.solid"
2535
+ },
2536
+ helperText: {
2537
+ color: "fg.muted",
2538
+ textStyle: "sm",
2539
+ _disabled: {
2540
+ layerStyle: "disabled"
2541
+ }
2542
+ },
2543
+ errorText: {
2544
+ color: "error",
2545
+ textStyle: "sm"
2546
+ }
2547
+ }
2548
+ });
2549
+
2550
+ // src/preset/recipes/group.ts
2551
+ var group2 = defineRecipe({
2552
+ className: "group",
2553
+ base: {
2554
+ display: "inline-flex",
2555
+ position: "relative",
2556
+ gap: "2",
2557
+ "& > *": {
2558
+ _focusVisible: {
2559
+ zIndex: 1
2560
+ }
2561
+ }
2562
+ },
2563
+ defaultVariants: {
2564
+ orientation: "horizontal"
2565
+ },
2566
+ variants: {
2567
+ orientation: {
2568
+ horizontal: {
2569
+ flexDirection: "row"
2570
+ },
2571
+ vertical: {
2572
+ flexDirection: "column"
2573
+ }
2574
+ },
2575
+ attached: {
2576
+ true: {
2577
+ gap: "0"
2578
+ }
2579
+ },
2580
+ grow: {
2581
+ true: {
2582
+ display: "flex",
2583
+ "& > *": {
2584
+ flex: 1
2585
+ }
2586
+ }
2587
+ }
2588
+ },
2589
+ compoundVariants: [
2590
+ {
2591
+ orientation: "horizontal",
2592
+ attached: true,
2593
+ css: {
2594
+ "& > *:first-child": {
2595
+ borderEndRadius: "0",
2596
+ marginEnd: "-1px"
2597
+ },
2598
+ "& > *:last-child": {
2599
+ borderStartRadius: "0"
2600
+ },
2601
+ "& > *:not(:first-child):not(:last-child)": {
2602
+ borderRadius: "0",
2603
+ marginEnd: "-1px"
2604
+ }
2605
+ }
2606
+ },
2607
+ {
2608
+ orientation: "vertical",
2609
+ attached: true,
2610
+ css: {
2611
+ "& > *:first-child": {
2612
+ borderBottomRadius: "0",
2613
+ marginBottom: "-1px"
2614
+ },
2615
+ "& > *:last-child": {
2616
+ borderTopRadius: "0"
2617
+ },
2618
+ "& > *:not(:first-child):not(:last-child)": {
2619
+ borderRadius: "0",
2620
+ marginBottom: "-1px"
2621
+ }
2622
+ }
2623
+ }
2624
+ ]
2625
+ });
2626
+
2627
+ // src/preset/recipes/spinner.ts
2628
+ var spinner2 = defineRecipe({
2629
+ className: "spinner",
2630
+ base: {
2631
+ "--spinner-track-color": "transparent",
2632
+ animation: "spin",
2633
+ animationDuration: "slowest",
2634
+ borderBottomColor: "var(--spinner-track-color)",
2635
+ borderColor: "currentColor",
2636
+ borderInlineStartColor: "var(--spinner-track-color)",
2637
+ borderRadius: "full",
2638
+ borderStyle: "solid",
2639
+ borderWidth: "medium",
2640
+ display: "inline-block",
2641
+ height: "var(--spinner-size)",
2642
+ width: "var(--spinner-size)"
2643
+ },
2644
+ defaultVariants: {
2645
+ size: "md"
2646
+ },
2647
+ variants: {
2648
+ size: {
2649
+ inherit: { "--spinner-size": "1em" },
2650
+ xs: { "--spinner-size": "sizes.3" },
2651
+ sm: { "--spinner-size": "sizes.4" },
2652
+ md: { "--spinner-size": "sizes.5" },
2653
+ lg: { "--spinner-size": "sizes.6" },
2654
+ xl: { "--spinner-size": "sizes.7" },
2655
+ "2xl": { "--spinner-size": "sizes.8" }
2656
+ }
2657
+ }
2658
+ });
2659
+
2660
+ // src/preset/recipes/absolute-center.ts
2661
+ var absoluteCenter2 = defineRecipe({
2662
+ className: "absolute-center",
2663
+ base: {
2664
+ position: "absolute",
2665
+ display: "flex",
2666
+ alignItems: "center",
2667
+ justifyContent: "center"
2668
+ },
2669
+ defaultVariants: {
2670
+ axis: "both"
2671
+ },
2672
+ variants: {
2673
+ axis: {
2674
+ horizontal: {
2675
+ insetStart: "50%",
2676
+ translate: "-50%",
2677
+ _rtl: {
2678
+ translate: "50%"
2679
+ }
2680
+ },
2681
+ vertical: {
2682
+ top: "50%",
2683
+ translate: "0 -50%"
2684
+ },
2685
+ both: {
2686
+ insetStart: "50%",
2687
+ top: "50%",
2688
+ translate: "-50% -50%",
2689
+ _rtl: {
2690
+ translate: "50% -50%"
2691
+ }
2692
+ }
2693
+ }
2694
+ }
2695
+ });
2696
+
2697
+ // src/preset/recipes/card.ts
2698
+ var card2 = defineSlotRecipe({
2699
+ className: "card",
2700
+ slots: ["root", "header", "body", "footer", "title", "description"],
2701
+ base: {
2702
+ root: {
2703
+ borderRadius: "l3",
2704
+ display: "flex",
2705
+ flexDirection: "column",
2706
+ overflow: "hidden",
2707
+ position: "relative"
2708
+ },
2709
+ header: {
2710
+ display: "flex",
2711
+ flexDirection: "column",
2712
+ gap: "1",
2713
+ p: "6"
2714
+ },
2715
+ body: {
2716
+ display: "flex",
2717
+ flex: "1",
2718
+ flexDirection: "column",
2719
+ pb: "6",
2720
+ px: "6"
2721
+ },
2722
+ footer: {
2723
+ display: "flex",
2724
+ justifyContent: "flex-end",
2725
+ gap: "3",
2726
+ pb: "6",
2727
+ pt: "2",
2728
+ px: "6"
2729
+ },
2730
+ title: {
2731
+ textStyle: "lg",
2732
+ fontWeight: "semibold"
2733
+ },
2734
+ description: {
2735
+ color: "fg.muted",
2736
+ textStyle: "sm"
2737
+ }
2738
+ },
2739
+ defaultVariants: {
2740
+ variant: "outline"
2741
+ },
2742
+ variants: {
2743
+ variant: {
2744
+ elevated: {
2745
+ root: {
2746
+ bg: "neutral.surface.bg",
2747
+ boxShadow: "lg"
2748
+ }
2749
+ },
2750
+ outline: {
2751
+ root: {
2752
+ bg: "neutral.surface.bg",
2753
+ borderWidth: "1px",
2754
+ borderColor: "border.default"
2755
+ }
2756
+ },
2757
+ subtle: {
2758
+ root: {
2759
+ bg: "neutral.subtle.bg"
2760
+ }
2761
+ }
2762
+ }
2763
+ }
2764
+ });
2765
+ var accordion2 = defineSlotRecipe({
2766
+ className: "accordion",
2767
+ slots: accordionAnatomy.extendWith("itemBody").keys(),
2768
+ base: {
2769
+ root: {
2770
+ width: "full",
2771
+ "--accordion-radius": "radii.l2"
2772
+ },
2773
+ item: {
2774
+ overflowAnchor: "none"
2775
+ },
2776
+ itemTrigger: {
2777
+ alignItems: "center",
2778
+ borderRadius: "var(--accordion-radius)",
2779
+ color: "fg.default",
2780
+ cursor: "pointer",
2781
+ display: "flex",
2782
+ fontWeight: "semibold",
2783
+ gap: "3",
2784
+ justifyContent: "space-between",
2785
+ textAlign: "start",
2786
+ textStyle: "lg",
2787
+ width: "full",
2788
+ _focusVisible: {
2789
+ outlineWidth: "medium",
2790
+ outlineStyle: "solid",
2791
+ outlineColor: "colorPalette.focusRing"
2792
+ },
2793
+ _disabled: {
2794
+ layerStyle: "disabled"
2795
+ }
2796
+ },
2797
+ itemIndicator: {
2798
+ transition: "rotate 0.2s",
2799
+ transformOrigin: "center",
2800
+ color: "fg.subtle",
2801
+ _open: {
2802
+ rotate: "180deg"
2803
+ },
2804
+ _icon: {
2805
+ width: "1.2em",
2806
+ height: "1.2em"
2807
+ }
2808
+ },
2809
+ itemBody: {
2810
+ pb: "calc(var(--accordion-padding-y) * 2)",
2811
+ color: "fg.muted"
2812
+ },
2813
+ itemContent: {
2814
+ overflow: "hidden",
2815
+ borderRadius: "var(--accordion-radius)",
2816
+ _open: {
2817
+ animationName: "expand-height, fade-in",
2818
+ animationDuration: "normal"
2819
+ },
2820
+ _closed: {
2821
+ animationName: "collapse-height, fade-out",
2822
+ animationDuration: "normal",
2823
+ display: "none"
2824
+ }
2825
+ }
2826
+ },
2827
+ defaultVariants: {
2828
+ size: "md",
2829
+ variant: "outline"
2830
+ },
2831
+ variants: {
2832
+ variant: {
2833
+ outline: {
2834
+ item: {
2835
+ borderBottomWidth: "1px"
2836
+ }
2837
+ },
2838
+ plain: {}
2839
+ },
2840
+ size: {
2841
+ md: {
2842
+ root: {
2843
+ "--accordion-padding-x": "spacing.4",
2844
+ "--accordion-padding-y": "spacing.3"
2845
+ },
2846
+ itemTrigger: {
2847
+ textStyle: "md",
2848
+ py: "var(--accordion-padding-y)"
2849
+ }
2850
+ }
2851
+ }
2852
+ }
2853
+ });
2854
+ var drawer2 = defineSlotRecipe({
2855
+ className: "drawer",
2856
+ slots: dialogAnatomy.extendWith("header", "body", "footer").keys(),
2857
+ base: {
2858
+ backdrop: {
2859
+ background: "black.a7",
2860
+ position: "fixed",
2861
+ insetInlineStart: "0",
2862
+ top: "0",
2863
+ width: "100vw",
2864
+ height: "100dvh",
2865
+ zIndex: "overlay",
2866
+ _open: {
2867
+ animationName: "fade-in",
2868
+ animationTimingFunction: "emphasized-in",
2869
+ animationDuration: "slow"
2870
+ },
2871
+ _closed: {
2872
+ animationName: "fade-out",
2873
+ animationTimingFunction: "emphasized-out",
2874
+ animationDuration: "normal"
2875
+ }
2876
+ },
2877
+ positioner: {
2878
+ display: "flex",
2879
+ width: "100vw",
2880
+ height: "100dvh",
2881
+ position: "fixed",
2882
+ insetInlineStart: "0",
2883
+ top: "0",
2884
+ zIndex: "modal",
2885
+ overscrollBehaviorY: "none"
2886
+ },
2887
+ content: {
2888
+ display: "flex",
2889
+ flexDirection: "column",
2890
+ position: "relative",
2891
+ width: "100%",
2892
+ outline: 0,
2893
+ zIndex: "modal",
2894
+ maxH: "100dvh",
2895
+ color: "inherit",
2896
+ bg: "gray.surface.bg",
2897
+ boxShadow: "lg",
2898
+ _open: {
2899
+ animationDuration: "slowest",
2900
+ animationTimingFunction: "cubic-bezier(0.05, 0.7, 0.1, 1.0)"
2901
+ },
2902
+ _closed: {
2903
+ animationDuration: "normal",
2904
+ animationTimingFunction: "cubic-bezier(0.3, 0.0, 0.8, 0.15)",
2905
+ display: "none"
2906
+ }
2907
+ },
2908
+ header: {
2909
+ display: "flex",
2910
+ flexDirection: "column",
2911
+ gap: "1",
2912
+ pt: { base: "4", md: "6" },
2913
+ pb: "4",
2914
+ px: { base: "4", md: "6" },
2915
+ flex: "0"
2916
+ },
2917
+ body: {
2918
+ display: "flex",
2919
+ flexDirection: "column",
2920
+ alignItems: "flex-start",
2921
+ flex: "1",
2922
+ overflow: "auto",
2923
+ p: { base: "4", md: "6" }
2924
+ },
2925
+ footer: {
2926
+ display: "flex",
2927
+ alignItems: "center",
2928
+ justifyContent: "flex-end",
2929
+ flex: "0",
2930
+ gap: "3",
2931
+ py: "4",
2932
+ px: { base: "4", md: "6" }
2933
+ },
2934
+ title: {
2935
+ color: "fg.default",
2936
+ fontWeight: "semibold",
2937
+ textStyle: "xl"
2938
+ },
2939
+ description: {
2940
+ color: "fg.muted",
2941
+ textStyle: "sm"
2942
+ },
2943
+ closeTrigger: {
2944
+ pos: "absolute",
2945
+ top: "3",
2946
+ insetEnd: "3"
2947
+ }
2948
+ },
2949
+ defaultVariants: {
2950
+ placement: "end",
2951
+ size: "sm"
2952
+ },
2953
+ variants: {
2954
+ size: {
2955
+ xs: {
2956
+ content: {
2957
+ maxW: "xs"
2958
+ }
2959
+ },
2960
+ sm: {
2961
+ content: {
2962
+ maxW: "sm"
2963
+ }
2964
+ },
2965
+ md: {
2966
+ content: {
2967
+ maxW: "md"
2968
+ }
2969
+ },
2970
+ lg: {
2971
+ content: {
2972
+ maxW: "lg"
2973
+ }
2974
+ },
2975
+ xl: {
2976
+ content: {
2977
+ maxW: "xl"
2978
+ }
2979
+ },
2980
+ full: {
2981
+ content: {
2982
+ maxW: "100vw",
2983
+ h: "100dvh"
2984
+ }
2985
+ }
2986
+ },
2987
+ placement: {
2988
+ start: {
2989
+ positioner: {
2990
+ justifyContent: "flex-start",
2991
+ alignItems: "stretch"
2992
+ },
2993
+ content: {
2994
+ _open: {
2995
+ animationName: {
2996
+ base: "slide-from-left-full, fade-in",
2997
+ _rtl: "slide-from-right-full, fade-in"
2998
+ }
2999
+ },
3000
+ _closed: {
3001
+ animationName: {
3002
+ base: "slide-to-left-full, fade-out",
3003
+ _rtl: "slide-to-right-full, fade-out"
3004
+ }
3005
+ }
3006
+ }
3007
+ },
3008
+ end: {
3009
+ positioner: {
3010
+ justifyContent: "flex-end",
3011
+ alignItems: "stretch"
3012
+ },
3013
+ content: {
3014
+ _open: {
3015
+ animationName: {
3016
+ base: "slide-from-right-full, fade-in",
3017
+ _rtl: "slide-from-left-full, fade-in"
3018
+ }
3019
+ },
3020
+ _closed: {
3021
+ animationName: {
3022
+ base: "slide-to-right-full, fade-out",
3023
+ _rtl: "slide-to-left-full, fade-out"
3024
+ }
3025
+ }
3026
+ }
3027
+ },
3028
+ top: {
3029
+ positioner: {
3030
+ justifyContent: "stretch",
3031
+ alignItems: "flex-start"
3032
+ },
3033
+ content: {
3034
+ maxW: "100%",
3035
+ _open: { animationName: "slide-from-top-full, fade-in" },
3036
+ _closed: { animationName: "slide-to-top-full, fade-out" }
3037
+ }
3038
+ },
3039
+ bottom: {
3040
+ positioner: {
3041
+ justifyContent: "stretch",
3042
+ alignItems: "flex-end"
3043
+ },
3044
+ content: {
3045
+ maxW: "100%",
3046
+ _open: { animationName: "slide-from-bottom-full, fade-in" },
3047
+ _closed: { animationName: "slide-to-bottom-full, fade-out" }
3048
+ }
3049
+ }
3050
+ }
3051
+ }
3052
+ });
3053
+ var tabs2 = defineSlotRecipe({
3054
+ slots: tabsAnatomy.keys(),
3055
+ className: "tabs",
3056
+ base: {
3057
+ root: {
3058
+ position: "relative",
3059
+ display: "flex",
3060
+ alignItems: "start",
3061
+ _horizontal: {
3062
+ flexDirection: "column",
3063
+ gap: "2"
3064
+ },
3065
+ _vertical: {
3066
+ flexDirection: "row",
3067
+ gap: "4"
3068
+ }
3069
+ },
3070
+ list: {
3071
+ display: "flex",
3072
+ position: "relative",
3073
+ isolation: "isolate",
3074
+ _horizontal: {
3075
+ flexDirection: "row"
3076
+ },
3077
+ _vertical: {
3078
+ flexDirection: "column"
3079
+ }
3080
+ },
3081
+ trigger: {
3082
+ alignItems: "center",
3083
+ cursor: "pointer",
3084
+ display: "flex",
3085
+ fontWeight: "semibold",
3086
+ outline: "0",
3087
+ position: "relative",
3088
+ _focusVisible: {
3089
+ zIndex: 1,
3090
+ focusVisibleRing: "outside"
3091
+ },
3092
+ _disabled: {
3093
+ layerStyle: "disabled"
3094
+ }
3095
+ },
3096
+ content: {
3097
+ focusVisibleRing: "inside",
3098
+ _horizontal: {
3099
+ width: "100%"
3100
+ },
3101
+ _vertical: {
3102
+ height: "100%"
3103
+ }
3104
+ },
3105
+ indicator: {
3106
+ width: "var(--width)",
3107
+ height: "var(--height)",
3108
+ zIndex: -1
3109
+ }
3110
+ },
3111
+ variants: {
3112
+ size: {
3113
+ xs: {
3114
+ list: { gap: "1" },
3115
+ trigger: { h: "8", minW: "8", textStyle: "xs", px: "3", gap: "2" }
3116
+ },
3117
+ sm: {
3118
+ list: { gap: "1" },
3119
+ trigger: { h: "9", minW: "9", textStyle: "sm", px: "3.5", gap: "2" }
3120
+ },
3121
+ md: {
3122
+ list: { gap: "1" },
3123
+ trigger: { h: "10", minW: "10", textStyle: "sm", px: "4", gap: "2" }
3124
+ },
3125
+ lg: {
3126
+ list: { gap: "1" },
3127
+ trigger: { h: "11", minW: "11", textStyle: "md", px: "4.5", gap: "2" }
3128
+ }
3129
+ },
3130
+ variant: {
3131
+ line: {
3132
+ root: {
3133
+ alignItems: "stretch"
3134
+ },
3135
+ list: {
3136
+ _horizontal: {
3137
+ borderBottomWidth: "thin"
3138
+ },
3139
+ _vertical: {
3140
+ borderStartWidth: "thin"
3141
+ }
3142
+ },
3143
+ indicator: {
3144
+ background: "colorPalette.solid.bg",
3145
+ _horizontal: {
3146
+ bottom: "0",
3147
+ height: "xxs",
3148
+ transform: "translateY(1px)"
3149
+ },
3150
+ _vertical: {
3151
+ left: "0",
3152
+ width: "xxs",
3153
+ transform: "translateX(-1px)"
3154
+ }
3155
+ },
3156
+ trigger: {
3157
+ color: "fg.muted",
3158
+ _selected: {
3159
+ color: "colorPalette.plain.fg"
3160
+ }
3161
+ }
3162
+ },
3163
+ subtle: {
3164
+ trigger: {
3165
+ color: "fg.muted",
3166
+ _selected: {
3167
+ color: "colorPalette.subtle.fg"
3168
+ }
3169
+ },
3170
+ indicator: {
3171
+ bg: "colorPalette.subtle.bg",
3172
+ color: "colorPalette.subtle.fg",
3173
+ borderRadius: "l2"
3174
+ }
3175
+ },
3176
+ enclosed: {
3177
+ list: {
3178
+ bg: {
3179
+ _light: "gray.2",
3180
+ _dark: "gray.1"
3181
+ },
3182
+ boxShadow: "inset 0 0 0px 1px var(--shadow-color)",
3183
+ boxShadowColor: "border",
3184
+ borderRadius: "l3",
3185
+ p: "1"
3186
+ },
3187
+ trigger: {
3188
+ color: "fg.muted",
3189
+ _selected: {
3190
+ color: "colorPalette.surface.fg"
3191
+ }
3192
+ },
3193
+ indicator: {
3194
+ borderRadius: "l2",
3195
+ boxShadow: {
3196
+ _light: "xs",
3197
+ _dark: "none"
3198
+ },
3199
+ bg: {
3200
+ _light: "white",
3201
+ _dark: "gray.2"
3202
+ }
3203
+ }
3204
+ }
3205
+ },
3206
+ fitted: {
3207
+ true: {
3208
+ root: {
3209
+ alignItems: "stretch"
3210
+ },
3211
+ trigger: {
3212
+ flex: 1,
3213
+ textAlign: "center",
3214
+ justifyContent: "center"
3215
+ }
3216
+ }
3217
+ }
3218
+ },
3219
+ defaultVariants: {
3220
+ size: "md",
3221
+ variant: "line"
3222
+ }
3223
+ });
3224
+ var switchRecipe2 = defineSlotRecipe({
3225
+ className: "switchComponent",
3226
+ jsx: ["Switch", /Switch\.+/],
3227
+ slots: switchAnatomy.extendWith("indicator").keys(),
3228
+ base: {
3229
+ root: {
3230
+ display: "inline-flex",
3231
+ alignItems: "center",
3232
+ position: "relative",
3233
+ verticalAlign: "middle",
3234
+ "--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
3235
+ "--switch-x": {
3236
+ base: "var(--switch-diff)",
3237
+ _rtl: "calc(var(--switch-diff) * -1)"
3238
+ }
3239
+ },
3240
+ label: {
3241
+ fontWeight: "medium",
3242
+ userSelect: "none",
3243
+ lineHeight: "1"
3244
+ },
3245
+ indicator: {
3246
+ position: "absolute",
3247
+ height: "var(--switch-height)",
3248
+ width: "var(--switch-height)",
3249
+ fontSize: "var(--switch-indicator-font-size)",
3250
+ fontWeight: "medium",
3251
+ flexShrink: 0,
3252
+ userSelect: "none",
3253
+ display: "grid",
3254
+ placeContent: "center",
3255
+ transition: "inset-inline-start 0.12s ease",
3256
+ insetInlineStart: "calc(var(--switch-x) - {spacing.xxs})",
3257
+ _checked: {
3258
+ insetInlineStart: "xxs"
3259
+ }
3260
+ },
3261
+ control: {
3262
+ display: "inline-flex",
3263
+ gap: "sm",
3264
+ flexShrink: 0,
3265
+ justifyContent: "flex-start",
3266
+ cursor: "pointer",
3267
+ borderRadius: "full",
3268
+ position: "relative",
3269
+ width: "var(--switch-width)",
3270
+ height: "var(--switch-height)",
3271
+ transition: "backgrounds",
3272
+ focusVisibleRing: "outside",
3273
+ _disabled: {
3274
+ layerStyle: "disabled"
3275
+ }
3276
+ },
3277
+ thumb: {
3278
+ display: "flex",
3279
+ alignItems: "center",
3280
+ justifyContent: "center",
3281
+ flexShrink: 0,
3282
+ transitionProperty: "translate",
3283
+ transitionDuration: "fast",
3284
+ borderRadius: "inherit",
3285
+ _checked: {
3286
+ translate: "var(--switch-x) 0"
3287
+ }
3288
+ }
3289
+ },
3290
+ defaultVariants: {
3291
+ variant: "solid",
3292
+ size: "md"
3293
+ },
3294
+ variants: {
3295
+ variant: {
3296
+ solid: {
3297
+ control: {
3298
+ borderRadius: "full",
3299
+ bg: "neutral.subtle.bg",
3300
+ focusVisibleRing: "outside",
3301
+ _checked: {
3302
+ bg: "colorPalette.solid.bg"
3303
+ }
3304
+ },
3305
+ thumb: {
3306
+ bg: "white",
3307
+ _checked: {
3308
+ bg: "colorPalette.solid.fg"
3309
+ },
3310
+ width: "var(--switch-height)",
3311
+ height: "var(--switch-height)",
3312
+ scale: "0.8",
3313
+ boxShadow: "xs"
3314
+ }
3315
+ }
3316
+ },
3317
+ size: {
3318
+ xs: {
3319
+ root: {
3320
+ gap: "2",
3321
+ "--switch-width": "sizes.8",
3322
+ "--switch-height": "sizes.4",
3323
+ "--switch-indicator-font-size": "fontSizes.xs"
3324
+ },
3325
+ label: { fontSize: "sm" }
3326
+ },
3327
+ sm: {
3328
+ root: {
3329
+ gap: "2",
3330
+ "--switch-width": "sizes.9",
3331
+ "--switch-height": "sizes.4.5",
3332
+ "--switch-indicator-font-size": "fontSizes.xs"
3333
+ },
3334
+ label: { fontSize: "sm" }
3335
+ },
3336
+ md: {
3337
+ root: {
3338
+ gap: "3",
3339
+ "--switch-width": "sizes.10",
3340
+ "--switch-height": "sizes.5",
3341
+ "--switch-indicator-font-size": "fontSizes.sm"
3342
+ },
3343
+ label: { fontSize: "md" }
3344
+ },
3345
+ lg: {
3346
+ root: {
3347
+ gap: "3",
3348
+ "--switch-width": "sizes.11",
3349
+ "--switch-height": "sizes.5.5",
3350
+ "--switch-indicator-font-size": "fontSizes.md"
3351
+ },
3352
+ label: { fontSize: "lg" }
3353
+ }
3354
+ }
3355
+ }
3356
+ });
3357
+ var checkbox2 = defineSlotRecipe({
3358
+ slots: checkboxAnatomy.keys(),
3359
+ className: "checkbox",
3360
+ base: {
3361
+ root: {
3362
+ display: "inline-flex",
3363
+ gap: "2",
3364
+ alignItems: "center",
3365
+ verticalAlign: "top",
3366
+ position: "relative",
3367
+ _disabled: {
3368
+ layerStyle: "disabled"
3369
+ }
3370
+ },
3371
+ control: {
3372
+ display: "inline-flex",
3373
+ alignItems: "center",
3374
+ justifyContent: "center",
3375
+ flexShrink: "0",
3376
+ borderWidth: "1px",
3377
+ borderColor: "border",
3378
+ borderRadius: "l1",
3379
+ cursor: "pointer",
3380
+ focusVisibleRing: "outside",
3381
+ bg: "canvas",
3382
+ _icon: {
3383
+ boxSize: "full"
3384
+ }
3385
+ },
3386
+ label: {
3387
+ fontWeight: "medium",
3388
+ userSelect: "none"
3389
+ }
3390
+ },
3391
+ variants: {
3392
+ size: {
3393
+ sm: {
3394
+ root: { gap: "2" },
3395
+ label: { textStyle: "sm" },
3396
+ control: { boxSize: "4.5", _icon: { boxSize: "3" } }
3397
+ },
3398
+ md: {
3399
+ root: { gap: "3" },
3400
+ label: { textStyle: "md" },
3401
+ control: { boxSize: "5", _icon: { boxSize: "3.5" } }
3402
+ },
3403
+ lg: {
3404
+ root: { gap: "3" },
3405
+ label: { textStyle: "lg" },
3406
+ control: { boxSize: "5.5", _icon: { boxSize: "4" } }
3407
+ }
3408
+ },
3409
+ variant: {
3410
+ solid: {
3411
+ control: {
3412
+ borderColor: "border",
3413
+ _checked: {
3414
+ bg: "colorPalette.solid.bg",
3415
+ borderColor: "colorPalette.solid.bg",
3416
+ color: "colorPalette.solid.fg"
3417
+ },
3418
+ _invalid: {
3419
+ background: "error"
3420
+ }
3421
+ }
3422
+ },
3423
+ surface: {
3424
+ control: {
3425
+ bg: "colorPalette.surface.bg",
3426
+ borderWidth: "1px",
3427
+ borderColor: "colorPalette.surface.border",
3428
+ color: "colorPalette.surface.fg"
3429
+ }
3430
+ },
3431
+ subtle: {
3432
+ control: {
3433
+ bg: "colorPalette.subtle.bg",
3434
+ color: "colorPalette.subtle.fg"
3435
+ }
3436
+ },
3437
+ outline: {
3438
+ control: {
3439
+ borderWidth: "1px",
3440
+ borderColor: "colorPalette.outline.border",
3441
+ color: "colorPalette.outline.fg",
3442
+ _checked: {
3443
+ borderColor: "colorPalette.solid.bg"
3444
+ }
3445
+ }
3446
+ },
3447
+ plain: {
3448
+ control: {
3449
+ color: "colorPalette.plain.fg"
3450
+ }
3451
+ }
3452
+ }
3453
+ },
3454
+ defaultVariants: {
3455
+ variant: "solid",
3456
+ size: "md"
3457
+ }
3458
+ });
3459
+ var radioGroup2 = defineSlotRecipe({
3460
+ className: "radio-group",
3461
+ slots: radioGroupAnatomy.keys(),
3462
+ base: {
3463
+ root: {
3464
+ display: "flex",
3465
+ flexDirection: "column",
3466
+ gap: "3"
3467
+ },
3468
+ itemControl: {
3469
+ alignItems: "center",
3470
+ borderRadius: "full",
3471
+ display: "inline-flex",
3472
+ flexShrink: 0,
3473
+ justifyContent: "center",
3474
+ verticalAlign: "top",
3475
+ boxShadow: "inset 0 0 0 1px var(--shadow-color)",
3476
+ boxShadowColor: "gray.surface.border",
3477
+ _after: {
3478
+ content: '""',
3479
+ display: "block",
3480
+ borderRadius: "full",
3481
+ boxSize: "40%"
3482
+ },
3483
+ _focusVisible: {
3484
+ focusVisibleRing: "outside"
3485
+ },
3486
+ _checked: {
3487
+ bg: "colorPalette.solid.bg",
3488
+ color: "colorPalette.solid.fg",
3489
+ boxShadowColor: "colorPalette.solid.bg",
3490
+ _after: {
3491
+ background: "colorPalette.solid.fg"
3492
+ }
3493
+ }
3494
+ },
3495
+ item: {
3496
+ alignItems: "center",
3497
+ cursor: "pointer",
3498
+ display: "flex",
3499
+ _disabled: {
3500
+ layerStyle: "disabled"
3501
+ }
3502
+ },
3503
+ itemText: {
3504
+ fontWeight: "medium",
3505
+ userSelect: "none"
3506
+ },
3507
+ label: {
3508
+ fontWeight: "semibold",
3509
+ textStyle: "sm",
3510
+ mb: "1"
3511
+ }
3512
+ },
3513
+ defaultVariants: {
3514
+ variant: "solid",
3515
+ size: "md",
3516
+ orientation: "vertical"
3517
+ },
3518
+ variants: {
3519
+ variant: {
3520
+ solid: {
3521
+ itemControl: {}
3522
+ }
3523
+ },
3524
+ size: {
3525
+ sm: {
3526
+ item: { gap: "2" },
3527
+ itemControl: { boxSize: "4.5" },
3528
+ itemText: { textStyle: "sm" }
3529
+ },
3530
+ md: {
3531
+ item: { gap: "3" },
3532
+ itemControl: { boxSize: "5" },
3533
+ itemText: { textStyle: "md" }
3534
+ },
3535
+ lg: {
3536
+ item: { gap: "3" },
3537
+ itemControl: { boxSize: "5.5" },
3538
+ itemText: { textStyle: "lg" }
3539
+ }
3540
+ },
3541
+ orientation: {
3542
+ horizontal: {
3543
+ root: {
3544
+ flexDirection: "row"
3545
+ }
3546
+ },
3547
+ vertical: {
3548
+ root: {
3549
+ flexDirection: "column"
3550
+ }
3551
+ }
3552
+ }
3553
+ }
3554
+ });
3555
+ var select2 = defineSlotRecipe({
3556
+ className: "select",
3557
+ slots: selectAnatomy.extendWith("indicatorGroup").keys(),
3558
+ base: {
3559
+ root: {
3560
+ display: "flex",
3561
+ flexDirection: "column",
3562
+ gap: "1.5",
3563
+ width: "full"
3564
+ },
3565
+ content: {
3566
+ background: "gray.surface.bg",
3567
+ borderRadius: "l2",
3568
+ boxShadow: "md",
3569
+ display: "flex",
3570
+ flexDirection: "column",
3571
+ maxH: "min(var(--available-height), {sizes.96})",
3572
+ minWidth: "max(var(--reference-width), {sizes.40})",
3573
+ outline: 0,
3574
+ overflowY: "auto",
3575
+ zIndex: "dropdown",
3576
+ _open: {
3577
+ animationStyle: "slide-fade-in",
3578
+ animationDuration: "slow"
3579
+ },
3580
+ _closed: {
3581
+ animationStyle: "slide-fade-out",
3582
+ animationDuration: "fastest"
3583
+ }
3584
+ },
3585
+ item: {
3586
+ alignItems: "center",
3587
+ borderRadius: "l1",
3588
+ cursor: "pointer",
3589
+ display: "flex",
3590
+ justifyContent: "space-between",
3591
+ userSelect: "none",
3592
+ _hover: {
3593
+ background: "gray.surface.bg.hover"
3594
+ },
3595
+ _highlighted: {
3596
+ background: "gray.surface.bg.hover"
3597
+ },
3598
+ _selected: {},
3599
+ _disabled: {
3600
+ layerStyle: "disabled"
3601
+ }
3602
+ },
3603
+ indicatorGroup: {
3604
+ display: "flex",
3605
+ alignItems: "center",
3606
+ gap: "1",
3607
+ pointerEvents: "none"
3608
+ },
3609
+ indicator: {
3610
+ display: "flex",
3611
+ alignItems: "center",
3612
+ justifyContent: "center",
3613
+ color: { base: "fg.subtle" }
3614
+ },
3615
+ itemGroupLabel: {
3616
+ alignItems: "flex-start",
3617
+ color: "fg.subtle",
3618
+ display: "flex",
3619
+ flexDirection: "column",
3620
+ fontWeight: "medium",
3621
+ gap: "1px",
3622
+ justifyContent: "center",
3623
+ _after: {
3624
+ content: '""',
3625
+ width: "100%",
3626
+ height: "1px",
3627
+ bg: "gray.4"
3628
+ }
3629
+ },
3630
+ itemIndicator: {
3631
+ color: "colorPalette.plain.fg"
3632
+ },
3633
+ label: {
3634
+ fontWeight: "medium",
3635
+ userSelect: "none",
3636
+ textStyle: "sm"
3637
+ },
3638
+ trigger: {
3639
+ alignItems: "center",
3640
+ borderRadius: "l2",
3641
+ cursor: "pointer",
3642
+ display: "flex",
3643
+ justifyContent: "space-between",
3644
+ minWidth: "0",
3645
+ outline: "0",
3646
+ textAlign: "start",
3647
+ transition: "common",
3648
+ userSelect: "none",
3649
+ width: "full",
3650
+ _placeholderShown: {
3651
+ color: "fg.subtle"
3652
+ },
3653
+ _disabled: {
3654
+ layerStyle: "disabled"
3655
+ }
3656
+ },
3657
+ valueText: {
3658
+ overflow: "hidden",
3659
+ textOverflow: "ellipsis",
3660
+ whiteSpace: "nowrap",
3661
+ color: "fg.default"
3662
+ }
3663
+ },
3664
+ defaultVariants: {
3665
+ size: "md",
3666
+ variant: "outline"
3667
+ },
3668
+ variants: {
3669
+ variant: {
3670
+ outline: {
3671
+ trigger: {
3672
+ borderWidth: "thin",
3673
+ borderColor: "gray.outline.border",
3674
+ focusVisibleRing: "inside"
3675
+ }
3676
+ },
3677
+ surface: {
3678
+ trigger: {
3679
+ bg: "gray.surface.bg",
3680
+ borderWidth: "thin",
3681
+ borderColor: "gray.surface.border",
3682
+ focusVisibleRing: "inside"
3683
+ }
3684
+ }
3685
+ },
3686
+ size: {
3687
+ xs: {
3688
+ content: { p: "1", gap: "0.5", textStyle: "sm" },
3689
+ item: { px: "1", minH: "8", gap: "2", _icon: { boxSize: "3.5" } },
3690
+ itemGroup: { gap: "0.5" },
3691
+ itemGroupLabel: { px: "1", height: "8" },
3692
+ trigger: { px: "2", h: "8", textStyle: "sm", gap: "2", _icon: { boxSize: "3.5" } }
3693
+ },
3694
+ sm: {
3695
+ content: { p: "1", gap: "0.5", textStyle: "sm" },
3696
+ item: { px: "1.5", minH: "9", gap: "2", _icon: { boxSize: "4" } },
3697
+ itemGroup: { gap: "0.5" },
3698
+ itemGroupLabel: { px: "1.5", height: "9" },
3699
+ trigger: { px: "2.5", h: "9", textStyle: "sm", gap: "2", _icon: { boxSize: "4" } }
3700
+ },
3701
+ md: {
3702
+ content: { p: "1", gap: "0.5", textStyle: "md" },
3703
+ item: { px: "2", minH: "10", gap: "2", _icon: { boxSize: "4" } },
3704
+ itemGroup: { gap: "0.5" },
3705
+ itemGroupLabel: { px: "2", height: "10" },
3706
+ trigger: { px: "3", h: "10", textStyle: "md", gap: "2", _icon: { boxSize: "4" } }
3707
+ },
3708
+ lg: {
3709
+ content: { p: "1", gap: "0.5", textStyle: "md" },
3710
+ item: { px: "2.5", minH: "11", gap: "2", _icon: { boxSize: "4.5" } },
3711
+ itemGroup: { gap: "0.5" },
3712
+ itemGroupLabel: { px: "2.5", height: "11" },
3713
+ trigger: { px: "3.5", h: "11", textStyle: "md", gap: "2", _icon: { boxSize: "4.5" } }
3714
+ },
3715
+ xl: {
3716
+ content: { p: "1", gap: "1", textStyle: "lg" },
3717
+ item: { px: "3", minH: "12", gap: "3", _icon: { boxSize: "5" } },
3718
+ itemGroup: { gap: "1" },
3719
+ itemGroupLabel: { px: "3", height: "12" },
3720
+ trigger: { px: "4", h: "12", textStyle: "lg", gap: "3", _icon: { boxSize: "5" } }
3721
+ }
3722
+ }
3723
+ }
3724
+ });
3725
+
3726
+ // src/preset/recipes/textarea.ts
3727
+ var textarea2 = defineRecipe({
3728
+ className: "textarea",
3729
+ base: {
3730
+ appearance: "none",
3731
+ borderRadius: "l2",
3732
+ minWidth: "0",
3733
+ outline: "0",
3734
+ position: "relative",
3735
+ transition: "colors",
3736
+ transitionProperty: "box-shadow, border-color",
3737
+ width: "100%",
3738
+ _disabled: {
3739
+ layerStyle: "disabled"
3740
+ }
3741
+ },
3742
+ defaultVariants: {
3743
+ size: "md",
3744
+ variant: "surface"
3745
+ },
3746
+ variants: {
3747
+ variant: {
3748
+ outline: {
3749
+ borderWidth: "thin",
3750
+ borderColor: "gray.outline.border",
3751
+ focusVisibleRing: "inside",
3752
+ _invalid: {
3753
+ borderColor: "error",
3754
+ focusRingColor: "error"
3755
+ }
3756
+ },
3757
+ surface: {
3758
+ bg: "gray.surface.bg",
3759
+ borderWidth: "thin",
3760
+ borderColor: "gray.surface.border",
3761
+ focusVisibleRing: "inside",
3762
+ _invalid: {
3763
+ borderColor: "error",
3764
+ focusRingColor: "error"
3765
+ }
3766
+ },
3767
+ subtle: {
3768
+ borderWidth: "thin",
3769
+ borderColor: "transparent",
3770
+ bg: "gray.subtle.bg",
3771
+ color: "gray.subtle.fg",
3772
+ focusVisibleRing: "inside",
3773
+ _invalid: {
3774
+ borderColor: "error",
3775
+ focusRingColor: "error"
3776
+ }
3777
+ },
3778
+ flushed: {
3779
+ borderBottomWidth: "thin",
3780
+ borderBottomColor: "gray.outline.border",
3781
+ borderRadius: "0",
3782
+ color: "fg.default",
3783
+ px: "0",
3784
+ _invalid: {
3785
+ borderColor: "error"
3786
+ },
3787
+ _focus: {
3788
+ borderColor: "colorPalette.solid.bg",
3789
+ boxShadowColor: "colorPalette.solid.bg",
3790
+ boxShadow: "0 1px 0 0 var(--shadow-color)",
3791
+ _invalid: {
3792
+ borderColor: "error",
3793
+ boxShadowColor: "error"
3794
+ }
3795
+ }
3796
+ }
3797
+ },
3798
+ size: {
3799
+ xs: { textStyle: "sm", px: "2", py: "sm", scrollPaddingBottom: "sm" },
3800
+ sm: { textStyle: "sm", px: "2.5", py: "sm", scrollPaddingBottom: "sm" },
3801
+ md: { textStyle: "md", px: "3", py: "sm", scrollPaddingBottom: "sm" },
3802
+ lg: { textStyle: "md", px: "3.5", py: "sm", scrollPaddingBottom: "sm" },
3803
+ xl: { textStyle: "lg", px: "4", py: "sm", scrollPaddingBottom: "sm" }
3804
+ }
3805
+ }
3806
+ });
3807
+ var slider2 = defineSlotRecipe({
3808
+ className: "slider",
3809
+ slots: sliderAnatomy.extendWith("markerIndicator").keys(),
3810
+ base: {
3811
+ root: {
3812
+ display: "flex",
3813
+ flexDirection: "column",
3814
+ gap: "1",
3815
+ textStyle: "sm",
3816
+ position: "relative",
3817
+ isolation: "isolate",
3818
+ touchAction: "none",
3819
+ width: "full"
3820
+ },
3821
+ label: {
3822
+ fontWeight: "medium",
3823
+ textStyle: "sm"
3824
+ },
3825
+ control: {
3826
+ display: "inline-flex",
3827
+ alignItems: "center"
3828
+ },
3829
+ track: {
3830
+ overflow: "hidden",
3831
+ borderRadius: "full",
3832
+ flex: "1"
3833
+ },
3834
+ range: {
3835
+ width: "inherit",
3836
+ height: "inherit"
3837
+ },
3838
+ markerGroup: {
3839
+ position: "absolute!",
3840
+ zIndex: "1"
3841
+ },
3842
+ marker: {
3843
+ display: "flex",
3844
+ alignItems: "center",
3845
+ gap: "calc(var(--slider-thumb-size) / 2)",
3846
+ color: "fg.muted",
3847
+ textStyle: "xs"
3848
+ },
3849
+ markerIndicator: {
3850
+ width: "var(--slider-marker-size)",
3851
+ height: "var(--slider-marker-size)",
3852
+ borderRadius: "full",
3853
+ bg: "colorPalette.solid.fg"
3854
+ },
3855
+ thumb: {
3856
+ width: "var(--slider-thumb-size)",
3857
+ height: "var(--slider-thumb-size)",
3858
+ display: "flex",
3859
+ alignItems: "center",
3860
+ justifyContent: "center",
3861
+ outline: 0,
3862
+ zIndex: "2",
3863
+ borderRadius: "full",
3864
+ _focusVisible: {
3865
+ ring: "2px",
3866
+ ringColor: "colorPalette.solid",
3867
+ ringOffset: "2px",
3868
+ ringOffsetColor: "bg"
3869
+ }
3870
+ }
3871
+ },
3872
+ defaultVariants: {
3873
+ size: "md",
3874
+ variant: "outline",
3875
+ orientation: "horizontal"
3876
+ },
3877
+ variants: {
3878
+ size: {
3879
+ sm: {
3880
+ root: {
3881
+ "--slider-thumb-size": "sizes.5",
3882
+ "--slider-track-size": "sizes.2",
3883
+ "--slider-marker-center": "{spacing.sm}",
3884
+ "--slider-marker-size": "sizes.1",
3885
+ "--slider-marker-inset": "{spacing.xs}"
3886
+ }
3887
+ },
3888
+ md: {
3889
+ root: {
3890
+ "--slider-thumb-size": "sizes.5",
3891
+ "--slider-track-size": "sizes.2",
3892
+ "--slider-marker-center": "{spacing.sm}",
3893
+ "--slider-marker-size": "sizes.1",
3894
+ "--slider-marker-inset": "{spacing.xs}"
3895
+ }
3896
+ },
3897
+ lg: {
3898
+ root: {
3899
+ "--slider-thumb-size": "sizes.5",
3900
+ "--slider-track-size": "sizes.2",
3901
+ "--slider-marker-center": "{spacing.sm}",
3902
+ "--slider-marker-size": "sizes.1",
3903
+ "--slider-marker-inset": "{spacing.xs}"
3904
+ }
3905
+ }
3906
+ },
3907
+ variant: {
3908
+ outline: {
3909
+ thumb: {
3910
+ bg: "gray.surface.bg",
3911
+ borderWidth: "medium",
3912
+ borderColor: "colorPalette.solid.bg",
3913
+ boxShadow: "xs"
3914
+ },
3915
+ range: {
3916
+ bg: "colorPalette.solid.bg"
3917
+ },
3918
+ track: {
3919
+ bg: "border"
3920
+ }
3921
+ }
3922
+ },
3923
+ orientation: {
3924
+ vertical: {
3925
+ root: {
3926
+ display: "inline-flex"
3927
+ },
3928
+ control: {
3929
+ flexDirection: "column",
3930
+ height: "100%",
3931
+ minWidth: "var(--slider-thumb-size)",
3932
+ "&[data-has-mark-label]": {
3933
+ marginEnd: "4"
3934
+ }
3935
+ },
3936
+ track: {
3937
+ width: "var(--slider-track-size)"
3938
+ },
3939
+ thumb: {
3940
+ left: "50%",
3941
+ translate: "-50% 0"
3942
+ },
3943
+ markerGroup: {
3944
+ insetStart: "var(--slider-marker-center)",
3945
+ insetBlock: "var(--slider-marker-inset)"
3946
+ },
3947
+ marker: {
3948
+ flexDirection: "row"
3949
+ }
3950
+ },
3951
+ horizontal: {
3952
+ control: {
3953
+ flexDirection: "row",
3954
+ width: "100%",
3955
+ minHeight: "var(--slider-thumb-size)",
3956
+ "&[data-has-mark-label]": {
3957
+ marginBottom: "4"
3958
+ }
3959
+ },
3960
+ track: {
3961
+ height: "var(--slider-track-size)"
3962
+ },
3963
+ thumb: {
3964
+ top: "50%",
3965
+ translate: "0 -50%"
3966
+ },
3967
+ markerGroup: {
3968
+ top: "var(--slider-marker-center)",
3969
+ insetInline: "var(--slider-marker-inset)"
3970
+ },
3971
+ marker: {
3972
+ flexDirection: "column"
3973
+ }
3974
+ }
3975
+ }
3976
+ }
3977
+ });
3978
+ var avatar2 = defineSlotRecipe({
3979
+ className: "avatar",
3980
+ slots: avatarAnatomy.keys(),
3981
+ base: {
3982
+ root: {
3983
+ display: "inline-flex",
3984
+ alignItems: "center",
3985
+ justifyContent: "center",
3986
+ fontWeight: "medium",
3987
+ position: "relative",
3988
+ verticalAlign: "top",
3989
+ flexShrink: "0",
3990
+ userSelect: "none",
3991
+ width: "var(--avatar-size)",
3992
+ height: "var(--avatar-size)",
3993
+ fontSize: "var(--avatar-font-size)",
3994
+ borderRadius: "var(--avatar-radius)"
3995
+ },
3996
+ fallback: {
3997
+ lineHeight: "1",
3998
+ textTransform: "uppercase",
3999
+ fontWeight: "medium",
4000
+ fontSize: "var(--avatar-font-size)",
4001
+ borderRadius: "var(--avatar-radius)"
4002
+ },
4003
+ image: {
4004
+ width: "100%",
4005
+ height: "100%",
4006
+ objectFit: "cover",
4007
+ borderRadius: "var(--avatar-radius)"
4008
+ }
4009
+ },
4010
+ defaultVariants: {
4011
+ size: "md",
4012
+ shape: "full",
4013
+ variant: "subtle"
4014
+ },
4015
+ variants: {
4016
+ size: {
4017
+ full: {
4018
+ root: {
4019
+ "--avatar-size": "100%",
4020
+ "--avatar-font-size": "100%"
4021
+ }
4022
+ },
4023
+ "2xs": {
4024
+ root: {
4025
+ "--avatar-font-size": "fontSizes.2xs",
4026
+ "--avatar-size": "sizes.6"
4027
+ },
4028
+ fallback: {
4029
+ _icon: { width: "3", height: "3" }
4030
+ }
4031
+ },
4032
+ xs: {
4033
+ root: {
4034
+ "--avatar-font-size": "fontSizes.xs",
4035
+ "--avatar-size": "sizes.8"
4036
+ },
4037
+ fallback: {
4038
+ _icon: { width: "4", height: "4" }
4039
+ }
4040
+ },
4041
+ sm: {
4042
+ root: {
4043
+ "--avatar-font-size": "fontSizes.sm",
4044
+ "--avatar-size": "sizes.9"
4045
+ },
4046
+ fallback: {
4047
+ _icon: { width: "4.5", height: "4.5" }
4048
+ }
4049
+ },
4050
+ md: {
4051
+ root: {
4052
+ "--avatar-font-size": "fontSizes.md",
4053
+ "--avatar-size": "sizes.10"
4054
+ },
4055
+ fallback: {
4056
+ _icon: { width: "5", height: "5" }
4057
+ }
4058
+ },
4059
+ lg: {
4060
+ root: {
4061
+ "--avatar-font-size": "fontSizes.md",
4062
+ "--avatar-size": "sizes.11"
4063
+ },
4064
+ fallback: {
4065
+ _icon: { width: "5.5", height: "5.5" }
4066
+ }
4067
+ },
4068
+ xl: {
4069
+ root: {
4070
+ "--avatar-font-size": "fontSizes.lg",
4071
+ "--avatar-size": "sizes.12"
4072
+ },
4073
+ fallback: {
4074
+ _icon: { width: "6", height: "6" }
4075
+ }
4076
+ },
4077
+ "2xl": {
4078
+ root: {
4079
+ "--avatar-font-size": "fontSizes.xl",
4080
+ "--avatar-size": "sizes.16"
4081
+ },
4082
+ fallback: {
4083
+ _icon: { width: "8", height: "8" }
4084
+ }
4085
+ }
4086
+ },
4087
+ variant: {
4088
+ solid: {
4089
+ root: {
4090
+ bg: "colorPalette.solid.bg",
4091
+ color: "colorPalette.solid.fg"
4092
+ }
4093
+ },
4094
+ surface: {
4095
+ root: {
4096
+ bg: "colorPalette.surface.bg",
4097
+ borderWidth: "1px",
4098
+ borderColor: "colorPalette.surface.border",
4099
+ color: "colorPalette.surface.fg"
4100
+ }
4101
+ },
4102
+ subtle: {
4103
+ root: {
4104
+ bg: "colorPalette.subtle.bg",
4105
+ color: "colorPalette.subtle.fg"
4106
+ }
4107
+ },
4108
+ outline: {
4109
+ root: {
4110
+ borderWidth: "1px",
4111
+ borderColor: "colorPalette.outline.border",
4112
+ color: "colorPalette.outline.fg"
4113
+ }
4114
+ }
4115
+ },
4116
+ shape: {
4117
+ square: {},
4118
+ rounded: {
4119
+ root: { "--avatar-radius": "radii.l3" }
4120
+ },
4121
+ full: {
4122
+ root: { "--avatar-radius": "radii.full" }
4123
+ }
4124
+ }
4125
+ }
4126
+ });
4127
+
4128
+ // src/preset/recipes/badge.ts
4129
+ var badge2 = defineRecipe({
4130
+ className: "badge",
4131
+ base: {
4132
+ display: "inline-flex",
4133
+ alignItems: "center",
4134
+ borderRadius: "l2",
4135
+ lineHeight: "1",
4136
+ fontWeight: "medium",
4137
+ fontVariantNumeric: "tabular-nums",
4138
+ whiteSpace: "nowrap",
4139
+ userSelect: "none"
4140
+ },
4141
+ defaultVariants: {
4142
+ variant: "subtle",
4143
+ size: "md"
4144
+ },
4145
+ variants: {
4146
+ variant: {
4147
+ solid: {
4148
+ bg: "colorPalette.solid.bg",
4149
+ color: "colorPalette.solid.fg"
4150
+ },
4151
+ surface: {
4152
+ bg: "colorPalette.surface.bg",
4153
+ borderWidth: "1px",
4154
+ borderColor: "colorPalette.surface.border",
4155
+ color: "colorPalette.surface.fg"
4156
+ },
4157
+ subtle: {
4158
+ bg: "colorPalette.subtle.bg",
4159
+ color: "colorPalette.subtle.fg"
4160
+ },
4161
+ outline: {
4162
+ borderWidth: "1px",
4163
+ borderColor: "colorPalette.outline.border",
4164
+ color: "colorPalette.outline.fg"
4165
+ }
4166
+ },
4167
+ size: {
4168
+ sm: { fontSize: "xs", px: "1.5", h: "4.5", gap: "0.5", _icon: { boxSize: "2.5" } },
4169
+ md: { fontSize: "xs", px: "2", h: "5", gap: "1", _icon: { boxSize: "3" } },
4170
+ lg: { fontSize: "xs", px: "2.5", h: "5.5", gap: "1", _icon: { boxSize: "3.5" } },
4171
+ xl: { fontSize: "sm", px: "2.5", h: "6", gap: "1.5", _icon: { boxSize: "4" } },
4172
+ "2xl": { fontSize: "md", px: "3", h: "7", gap: "1.5", _icon: { boxSize: "4.5" } }
4173
+ }
4174
+ }
4175
+ });
4176
+ var progress2 = defineSlotRecipe({
4177
+ slots: progressAnatomy.keys(),
4178
+ className: "progress",
4179
+ base: {
4180
+ root: {
4181
+ textStyle: "sm",
4182
+ position: "relative"
4183
+ },
4184
+ track: {
4185
+ overflow: "hidden",
4186
+ position: "relative"
4187
+ },
4188
+ range: {
4189
+ display: "flex",
4190
+ alignItems: "center",
4191
+ justifyContent: "center",
4192
+ transitionProperty: "width, height",
4193
+ transitionDuration: "slow",
4194
+ height: "100%",
4195
+ bgColor: "var(--track-color)",
4196
+ _indeterminate: {
4197
+ "--animate-from-x": "-40%",
4198
+ "--animate-to-x": "100%",
4199
+ position: "absolute",
4200
+ willChange: "left",
4201
+ minWidth: "50%",
4202
+ animation: "position 1s ease infinite normal none running",
4203
+ backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`
4204
+ }
4205
+ },
4206
+ label: {
4207
+ display: "inline-flex",
4208
+ fontWeight: "medium",
4209
+ alignItems: "center",
4210
+ gap: "1"
4211
+ },
4212
+ valueText: {
4213
+ textStyle: "xs",
4214
+ lineHeight: "1",
4215
+ fontWeight: "medium"
4216
+ }
4217
+ },
4218
+ variants: {
4219
+ variant: {
4220
+ solid: {
4221
+ track: {
4222
+ bgColor: "gray.subtle.bg"
4223
+ },
4224
+ range: {
4225
+ bgColor: "colorPalette.solid.bg",
4226
+ color: "colorPalette.solid.fg"
4227
+ }
4228
+ },
4229
+ subtle: {
4230
+ track: {
4231
+ bgColor: "colorPalette.subtle.bg.active"
4232
+ },
4233
+ range: {
4234
+ bgColor: "colorPalette.solid.bg",
4235
+ color: "colorPalette.solid.fg"
4236
+ }
4237
+ }
4238
+ },
4239
+ shape: {
4240
+ square: {},
4241
+ rounded: {
4242
+ track: {
4243
+ borderRadius: "l1"
4244
+ }
4245
+ },
4246
+ full: {
4247
+ track: {
4248
+ borderRadius: "full"
4249
+ }
4250
+ }
4251
+ },
4252
+ striped: {
4253
+ true: {
4254
+ range: {
4255
+ backgroundImage: `linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)`,
4256
+ backgroundSize: `var(--stripe-size) var(--stripe-size)`,
4257
+ "--stripe-size": "1rem",
4258
+ "--stripe-color": {
4259
+ _light: "rgba(255, 255, 255, 0.3)",
4260
+ _dark: "rgba(0, 0, 0, 0.3)"
4261
+ }
4262
+ }
4263
+ }
4264
+ },
4265
+ animated: {
4266
+ true: {
4267
+ range: {
4268
+ "--animate-from": "var(--stripe-size)",
4269
+ animation: "bg-position 1s linear infinite"
4270
+ }
4271
+ }
4272
+ },
4273
+ size: {
4274
+ xs: { track: { h: "1.5" } },
4275
+ sm: { track: { h: "2" } },
4276
+ md: { track: { h: "2.5" } },
4277
+ lg: { track: { h: "3" } },
4278
+ xl: { track: { h: "3.5" } }
4279
+ }
4280
+ },
4281
+ defaultVariants: {
4282
+ variant: "solid",
4283
+ size: "md",
4284
+ shape: "rounded"
4285
+ }
4286
+ });
4287
+
4288
+ // src/preset/recipes/skeleton.ts
4289
+ var skeleton2 = defineRecipe({
4290
+ className: "skeleton",
4291
+ jsx: ["Skeleton", "SkeletonCircle", "SkeletonText"],
4292
+ base: {},
4293
+ variants: {
4294
+ loading: {
4295
+ true: {
4296
+ borderRadius: "l2",
4297
+ boxShadow: "none",
4298
+ backgroundClip: "padding-box",
4299
+ cursor: "default",
4300
+ color: "transparent",
4301
+ pointerEvents: "none",
4302
+ userSelect: "none",
4303
+ flexShrink: "0",
4304
+ "&::before, &::after, *": {
4305
+ visibility: "hidden"
4306
+ }
4307
+ },
4308
+ false: {
4309
+ background: "unset",
4310
+ animation: "fade-in var(--fade-duration, 0.1s) ease-out !important"
4311
+ }
4312
+ },
4313
+ circle: {
4314
+ true: {
4315
+ display: "flex",
4316
+ alignItems: "center",
4317
+ justifyContent: "center",
4318
+ flex: "0 0 auto",
4319
+ borderRadius: "9999px"
4320
+ }
4321
+ },
4322
+ variant: {
4323
+ pulse: {
4324
+ background: "gray.subtle.bg.active",
4325
+ animation: "pulse",
4326
+ animationDuration: "var(--duration, 1.2s)"
4327
+ },
4328
+ shine: {
4329
+ "--animate-from": "200%",
4330
+ "--animate-to": "-200%",
4331
+ "--start-color": "colors.gray.subtle.bg",
4332
+ "--end-color": "colors.gray.subtle.bg.active",
4333
+ backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
4334
+ backgroundSize: "400% 100%",
4335
+ animation: "bg-position var(--duration, 5s) ease-in-out infinite"
4336
+ },
4337
+ none: {
4338
+ animation: "none"
4339
+ }
4340
+ }
4341
+ },
4342
+ defaultVariants: {
4343
+ variant: "pulse",
4344
+ loading: true
4345
+ }
4346
+ });
4347
+ var toast2 = defineSlotRecipe({
4348
+ className: "toast",
4349
+ slots: toastAnatomy.keys(),
4350
+ base: {
4351
+ root: {
4352
+ alignItems: "start",
4353
+ background: "gray.surface.bg",
4354
+ borderRadius: "l3",
4355
+ boxShadow: "lg",
4356
+ display: "flex",
4357
+ gap: "4",
4358
+ height: "var(--height)",
4359
+ minWidth: "sm",
4360
+ opacity: "var(--opacity)",
4361
+ overflowWrap: "anywhere",
4362
+ p: "4",
4363
+ position: "relative",
4364
+ scale: "var(--scale)",
4365
+ transitionDuration: "slow",
4366
+ transitionProperty: "translate, scale, opacity, height",
4367
+ transitionTimingFunction: "default",
4368
+ translate: "var(--x) var(--y)",
4369
+ width: "full",
4370
+ willChange: "translate, opacity, scale",
4371
+ zIndex: "var(--z-index)"
4372
+ },
4373
+ title: {
4374
+ color: "fg.default",
4375
+ fontWeight: "medium",
4376
+ textStyle: "sm"
4377
+ },
4378
+ description: {
4379
+ color: "fg.muted",
4380
+ textStyle: "sm"
4381
+ },
4382
+ actionTrigger: {
4383
+ color: "colorPalette.plain.fg",
4384
+ cursor: "pointer",
4385
+ fontWeight: "semibold",
4386
+ textStyle: "sm"
4387
+ },
4388
+ closeTrigger: {
4389
+ position: "absolute",
4390
+ top: "2",
4391
+ insetEnd: "2"
4392
+ }
4393
+ }
4394
+ });
4395
+ var dialog2 = defineSlotRecipe({
4396
+ className: "dialog",
4397
+ slots: dialogAnatomy.extendWith("header", "body", "footer").keys(),
4398
+ base: {
4399
+ backdrop: {
4400
+ background: "neutral.a7",
4401
+ height: "100dvh",
4402
+ left: "0",
4403
+ position: "fixed",
4404
+ top: "0",
4405
+ width: "100dvw",
4406
+ zIndex: "overlay",
4407
+ _open: {
4408
+ animationDuration: "normal"
4409
+ },
4410
+ _closed: {
4411
+ animationDuration: "fast"
4412
+ }
4413
+ },
4414
+ positioner: {
4415
+ display: "flex",
4416
+ height: "100dvh",
4417
+ justifyContent: "center",
4418
+ left: 0,
4419
+ overscrollBehaviorY: "none",
4420
+ position: "fixed",
4421
+ top: 0,
4422
+ width: "100dvw",
4423
+ zIndex: "modal"
4424
+ },
4425
+ title: {
4426
+ fontWeight: "semibold",
4427
+ textStyle: "lg"
4428
+ },
4429
+ description: {
4430
+ color: "fg.muted",
4431
+ textStyle: "sm"
4432
+ },
4433
+ closeTrigger: {},
4434
+ content: {
4435
+ bg: "neutral.surface.bg",
4436
+ borderRadius: "l3",
4437
+ boxShadow: "lg",
4438
+ display: "flex",
4439
+ flexDirection: "column",
4440
+ my: "auto",
4441
+ outline: 0,
4442
+ position: "relative",
4443
+ textStyle: "sm",
4444
+ width: "100%",
4445
+ zIndex: "modal",
4446
+ py: { base: "4", md: "6" },
4447
+ gap: { base: "4", md: "6" },
4448
+ _open: {
4449
+ animationDuration: "slowest"
4450
+ },
4451
+ _closed: {
4452
+ animationDuration: "normal",
4453
+ display: "none"
4454
+ }
4455
+ },
4456
+ header: {
4457
+ display: "flex",
4458
+ flexDirection: "column",
4459
+ gap: "0.5",
4460
+ px: { base: "4", md: "6" },
4461
+ flex: "0"
4462
+ },
4463
+ body: {
4464
+ display: "flex",
4465
+ flex: "1",
4466
+ flexDirection: "column",
4467
+ alignItems: "flex-start",
4468
+ px: { base: "4", md: "6" }
4469
+ },
4470
+ footer: {
4471
+ display: "flex",
4472
+ alignItems: "center",
4473
+ justifyContent: "flex-end",
4474
+ flex: "0",
4475
+ gap: "3",
4476
+ px: { base: "4", md: "6" }
4477
+ }
4478
+ },
4479
+ defaultVariants: {
4480
+ size: "md",
4481
+ scrollBehavior: "outside",
4482
+ placement: "center"
4483
+ },
4484
+ variants: {
4485
+ size: {
4486
+ xs: { content: { maxW: "xs" } },
4487
+ sm: { content: { maxW: "sm" } },
4488
+ md: { content: { maxW: "md" } },
4489
+ lg: { content: { maxW: "lg" } },
4490
+ xl: { content: { maxW: "xl" } },
4491
+ full: {
4492
+ content: {
4493
+ maxW: "100dvw",
4494
+ minH: "100dvh",
4495
+ borderRadius: "0"
4496
+ }
4497
+ }
4498
+ },
4499
+ placement: {
4500
+ center: {
4501
+ positioner: {
4502
+ alignItems: "center"
4503
+ },
4504
+ content: {
4505
+ mx: "auto"
4506
+ }
4507
+ },
4508
+ top: {
4509
+ positioner: {
4510
+ alignItems: "flex-start"
4511
+ },
4512
+ content: {
4513
+ mt: "16",
4514
+ mx: "auto"
4515
+ }
4516
+ },
4517
+ bottom: {
4518
+ positioner: {
4519
+ alignItems: "flex-end"
4520
+ },
4521
+ content: {
4522
+ mb: "16",
4523
+ mx: "auto"
4524
+ }
4525
+ }
4526
+ },
4527
+ scrollBehavior: {
4528
+ inside: {
4529
+ positioner: {
4530
+ overflow: "hidden"
4531
+ },
4532
+ content: {
4533
+ maxH: "calc(100% - 7.5rem)"
4534
+ },
4535
+ body: {
4536
+ overflow: "auto"
4537
+ }
4538
+ },
4539
+ outside: {
4540
+ positioner: {
4541
+ overflow: "auto",
4542
+ pointerEvents: "auto"
4543
+ }
4544
+ }
4545
+ }
4546
+ }
4547
+ });
4548
+ var popover2 = defineSlotRecipe({
4549
+ className: "popover",
4550
+ slots: popoverAnatomy.extendWith("header", "body", "footer").keys(),
4551
+ base: {
4552
+ positioner: {
4553
+ position: "absolute",
4554
+ top: "0",
4555
+ left: "0",
4556
+ zIndex: "popover"
4557
+ },
4558
+ content: {
4559
+ "--popover-bg": "colors.gray.surface.bg",
4560
+ "--popover-padding": "spacing.md",
4561
+ background: "var(--popover-bg)",
4562
+ borderRadius: "l3",
4563
+ boxShadow: "lg",
4564
+ display: "flex",
4565
+ flexDirection: "column",
4566
+ maxHeight: "var(--available-height)",
4567
+ outline: "0",
4568
+ position: "relative",
4569
+ textStyle: "sm",
4570
+ transformOrigin: "var(--transform-origin)",
4571
+ width: "sm",
4572
+ zIndex: "calc(var(--z-index-popover) + var(--layer-index, 0))",
4573
+ _open: {
4574
+ animationStyle: "scale-fade-in",
4575
+ animationDuration: "fast"
4576
+ },
4577
+ _closed: {
4578
+ animationStyle: "scale-fade-out",
4579
+ animationDuration: "faster"
4580
+ }
4581
+ },
4582
+ title: {
4583
+ color: "fg.default",
4584
+ fontWeight: "medium",
4585
+ textStyle: "md"
4586
+ },
4587
+ description: {
4588
+ color: "fg.muted",
4589
+ textStyle: "sm"
4590
+ },
4591
+ closeTrigger: {
4592
+ position: "absolute",
4593
+ top: "1",
4594
+ right: "1"
4595
+ },
4596
+ header: {
4597
+ display: "flex",
4598
+ flexDirection: "column",
4599
+ p: "var(--popover-padding)"
4600
+ },
4601
+ body: { p: "var(--popover-padding)", display: "flex", flex: "1", flexDirection: "column" },
4602
+ footer: {
4603
+ display: "flex",
4604
+ alignItems: "center",
4605
+ justifyContent: "flex-end",
4606
+ gap: "3",
4607
+ paddingInline: "var(--popover-padding)",
4608
+ paddingBottom: "var(--popover-padding)"
4609
+ },
4610
+ arrow: {
4611
+ "--arrow-size": "sizes.3",
4612
+ "--arrow-background": "var(--popover-bg)"
4613
+ },
4614
+ arrowTip: {
4615
+ borderTopWidth: "thin",
4616
+ borderInlineStartWidth: "thin",
4617
+ borderColor: "var(--popover-bg)"
4618
+ }
4619
+ }
4620
+ });
4621
+ var tooltip2 = defineSlotRecipe({
4622
+ className: "tooltip",
4623
+ slots: tooltipAnatomy.keys(),
4624
+ base: {
4625
+ content: {
4626
+ "--tooltip-bg": "colors.gray.solid.bg",
4627
+ bg: "var(--tooltip-bg)",
4628
+ color: "gray.solid.fg",
4629
+ borderRadius: "l2",
4630
+ boxShadow: "sm",
4631
+ fontWeight: "semibold",
4632
+ px: "2",
4633
+ py: "1.5",
4634
+ textStyle: "xs",
4635
+ maxWidth: "xs",
4636
+ _open: {
4637
+ animationStyle: "scale-fade-in",
4638
+ animationDuration: "fast"
4639
+ },
4640
+ _closed: {
4641
+ animationStyle: "scale-fade-out",
4642
+ animationDuration: "faster"
4643
+ }
4644
+ },
4645
+ arrow: {
4646
+ "--arrow-size": "sizes.2",
4647
+ "--arrow-background": "var(--tooltip-bg)"
4648
+ },
4649
+ arrowTip: {
4650
+ borderTopWidth: "thin",
4651
+ borderInlineStartWidth: "thin",
4652
+ borderColor: "var(--tooltip-bg)"
4653
+ }
4654
+ }
4655
+ });
4656
+
4657
+ // src/preset/recipes/heading.ts
4658
+ var heading2 = defineRecipe({
4659
+ className: "heading",
4660
+ base: {
4661
+ color: "fg.default"
4662
+ },
4663
+ defaultVariants: {
4664
+ size: "xl"
4665
+ },
4666
+ variants: {
4667
+ size: {
4668
+ xs: { textStyle: "labelLarge" },
4669
+ sm: { textStyle: "titleSmall" },
4670
+ md: { textStyle: "titleMedium" },
4671
+ lg: { textStyle: "titleLarge" },
4672
+ xl: { textStyle: "headlineSmall" },
4673
+ "2xl": { textStyle: "headlineMedium" },
4674
+ "3xl": { textStyle: "headlineLarge" },
4675
+ "4xl": { textStyle: "displaySmall" },
4676
+ "5xl": { textStyle: "displayMedium" },
4677
+ "6xl": { textStyle: "displayLarge" },
4678
+ "7xl": { textStyle: "displayLarge" }
4679
+ }
4680
+ }
4681
+ });
4682
+
4683
+ // src/preset/layer-styles.ts
4684
+ var layerStyles = defineLayerStyles({
4685
+ disabled: {
4686
+ value: {
4687
+ cursor: "not-allowed",
4688
+ opacity: "0.5"
4689
+ }
4690
+ }
4691
+ });
4692
+
4693
+ // src/preset/text-styles.ts
4694
+ var textStyles = defineTextStyles({
4695
+ xs: { value: { fontSize: "xs", lineHeight: "1.125rem" } },
4696
+ sm: { value: { fontSize: "sm", lineHeight: "1.25rem" } },
4697
+ md: { value: { fontSize: "md", lineHeight: "1.5rem" } },
4698
+ lg: { value: { fontSize: "lg", lineHeight: "1.75rem" } },
4699
+ xl: { value: { fontSize: "xl", lineHeight: "1.875rem" } },
4700
+ "2xl": { value: { fontSize: "2xl", lineHeight: "2rem" } },
4701
+ "3xl": { value: { fontSize: "3xl", lineHeight: "2.375rem" } },
4702
+ "4xl": { value: { fontSize: "4xl", lineHeight: "2.75rem", letterSpacing: "-0.02em" } },
4703
+ "5xl": { value: { fontSize: "5xl", lineHeight: "3.75rem", letterSpacing: "-0.02em" } },
4704
+ "6xl": { value: { fontSize: "6xl", lineHeight: "4.5rem", letterSpacing: "-0.02em" } },
4705
+ "7xl": { value: { fontSize: "7xl", lineHeight: "5.75rem", letterSpacing: "-0.02em" } },
4706
+ label: { value: { fontSize: "sm", lineHeight: "1.25rem", fontWeight: "medium" } }
4707
+ });
4708
+
4709
+ // src/preset/shadows.ts
4710
+ var shadows = defineSemanticTokens.shadows({
4711
+ xs: {
4712
+ value: {
4713
+ base: "0px 1px 2px {colors.neutral.a6}, 0px 0px 1px {colors.neutral.a7}",
4714
+ _dark: "0px 1px 1px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
4715
+ }
4716
+ },
4717
+ sm: {
4718
+ value: {
4719
+ base: "0px 2px 4px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
4720
+ _dark: "0px 2px 4px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
4721
+ }
4722
+ },
4723
+ md: {
4724
+ value: {
4725
+ base: "0px 4px 8px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
4726
+ _dark: "0px 4px 8px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
4727
+ }
4728
+ },
4729
+ lg: {
4730
+ value: {
4731
+ base: "0px 8px 16px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
4732
+ _dark: "0px 8px 16px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
4733
+ }
4734
+ },
4735
+ xl: {
4736
+ value: {
4737
+ base: "0px 16px 24px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
4738
+ _dark: "0px 16px 24px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
4739
+ }
4740
+ },
4741
+ "2xl": {
4742
+ value: {
4743
+ base: "0px 24px 40px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
4744
+ _dark: "0px 24px 40px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
4745
+ }
4746
+ },
4747
+ inset: {
4748
+ value: {
4749
+ base: "inset 8px 0 12px -8px {colors.neutral.a4}",
4750
+ _dark: "inset 8px 0 12px -8px {colors.neutral.a6}"
4751
+ }
4752
+ }
4753
+ });
4754
+
4755
+ // src/preset/index.ts
4756
+ var theme = transformToPandaTheme(material3Language);
4757
+ var discourserPandaPreset = {
4758
+ name: "discourser-design-system-preset",
4759
+ theme: {
4760
+ extend: {
4761
+ // Add M3 tokens to Panda preset (colors, fonts, spacing, etc.)
4762
+ tokens: {
4763
+ colors: theme.tokens.colors,
4764
+ fonts: theme.tokens.fonts,
4765
+ fontSizes: theme.tokens.fontSizes,
4766
+ lineHeights: theme.tokens.lineHeights,
4767
+ fontWeights: theme.tokens.fontWeights,
4768
+ letterSpacings: theme.tokens.letterSpacings,
4769
+ spacing: theme.tokens.spacing,
4770
+ radii: theme.tokens.radii,
4771
+ shadows: theme.tokens.shadows,
4772
+ durations: theme.tokens.durations,
4773
+ easings: theme.tokens.easings,
4774
+ borderWidths: theme.tokens.borderWidths
4775
+ },
4776
+ // Park UI layer styles for common UI patterns (disabled, etc.)
4777
+ layerStyles,
4778
+ // Combined text styles: M3 + Park UI
4779
+ textStyles: {
4780
+ ...theme.textStyles,
4781
+ ...textStyles
4782
+ },
4783
+ // Semantic tokens: M3 colors + Park UI aliases + shadows + radii
4784
+ semanticTokens: {
4785
+ colors: {
4786
+ // M3-to-Radix color bridges
4787
+ ...colors,
4788
+ // Park UI-style aliases for component compatibility
4789
+ fg: {
4790
+ default: {
4791
+ value: { base: "{colors.gray.12}", _dark: "{colors.gray.12}" }
4792
+ },
4793
+ muted: {
4794
+ value: { base: "{colors.gray.11}", _dark: "{colors.gray.11}" }
4795
+ },
4796
+ subtle: {
4797
+ value: { base: "{colors.gray.10}", _dark: "{colors.gray.10}" }
4798
+ }
4799
+ },
4800
+ canvas: {
4801
+ value: { base: "{colors.gray.1}", _dark: "{colors.gray.1}" }
4802
+ },
4803
+ border: {
4804
+ default: {
4805
+ value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
4806
+ },
4807
+ muted: {
4808
+ value: { base: "{colors.gray.4}", _dark: "{colors.gray.4}" }
4809
+ }
4810
+ },
4811
+ // M3 semantic tokens (surface, onSurface, etc.)
4812
+ ...m3SemanticTokens,
4813
+ // Base colors
4814
+ white: { value: "#FFFFFF" },
4815
+ black: { value: "#000000" }
4816
+ },
4817
+ // Park UI shadow tokens
4818
+ shadows,
4819
+ // Park UI radii tokens (l1, l2, l3 for consistent border radius)
4820
+ radii: {
4821
+ l1: { value: "0.125rem" },
4822
+ // 2px (xs)
4823
+ l2: { value: "0.375rem" },
4824
+ // 6px (sm)
4825
+ l3: { value: "0.5rem" }
4826
+ // 8px (md)
4827
+ }
4828
+ },
4829
+ // Recipes: Park UI components (simple recipes)
4830
+ recipes: {
4831
+ // Core
4832
+ button: button2,
4833
+ input: input2,
4834
+ inputAddon: inputAddon2,
4835
+ group: group2,
4836
+ spinner: spinner2,
4837
+ absoluteCenter: absoluteCenter2,
4838
+ // Typography
4839
+ heading: heading2,
4840
+ // Feedback & Status
4841
+ badge: badge2,
4842
+ skeleton: skeleton2,
4843
+ textarea: textarea2
4844
+ },
4845
+ slotRecipes: {
4846
+ // Core
4847
+ field,
4848
+ inputGroup: inputGroup2,
4849
+ // Layout & Containers
4850
+ card: card2,
4851
+ accordion: accordion2,
4852
+ drawer: drawer2,
4853
+ tabs: tabs2,
4854
+ // Form Elements
4855
+ switchComponent: switchRecipe2,
4856
+ checkbox: checkbox2,
4857
+ radioGroup: radioGroup2,
4858
+ select: select2,
4859
+ slider: slider2,
4860
+ // Feedback & Status
4861
+ avatar: avatar2,
4862
+ progress: progress2,
4863
+ toast: toast2,
4864
+ // Overlays
4865
+ dialog: dialog2,
4866
+ popover: popover2,
4867
+ tooltip: tooltip2
4868
+ }
4869
+ }
4870
+ },
4871
+ conditions: {
4872
+ light: "[data-theme=light] &, .light &",
4873
+ dark: "[data-theme=dark] &, .dark &"
4874
+ },
4875
+ globalCss: {
4876
+ html: {
4877
+ colorScheme: "light dark",
4878
+ bg: "canvas",
4879
+ color: "fg.default"
4880
+ },
4881
+ body: {
4882
+ fontFamily: "body",
4883
+ textStyle: "bodyMedium"
4884
+ }
4885
+ }
4886
+ };
4887
+
4888
+ export { AbsoluteCenter_exports as AbsoluteCenter, Accordion_exports as Accordion, Avatar_exports as Avatar, Badge, Button, ButtonGroup, Card_exports as Card, Checkbox_exports as Checkbox, CloseButton_exports as CloseButton, Dialog_exports as Dialog, Drawer_exports as Drawer, Group_exports as Group, Heading, Icon_exports as Icon, IconButton, Input, InputAddon, InputGroup2 as InputGroup, Popover_exports as Popover, Progress_exports as Progress, RadioGroup_exports as RadioGroup, Select_exports as Select, Skeleton_exports as Skeleton, Slider_exports as Slider, Spinner, Switch_exports as Switch, Tabs_exports as Tabs, Textarea, Toaster, Tooltip_exports as Tooltip, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, discourserPandaPreset, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
1875
4889
  //# sourceMappingURL=index.js.map
1876
4890
  //# sourceMappingURL=index.js.map