@tydavidson/design-system 1.1.15 → 1.1.16
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 +65 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +65 -2
- package/dist/index.mjs.map +1 -1
- package/dist/themes/index.d.mts +6 -2
- package/dist/themes/index.d.ts +6 -2
- package/dist/themes/index.js +65 -2
- package/dist/themes/index.js.map +1 -1
- package/dist/themes/index.mjs +65 -2
- package/dist/themes/index.mjs.map +1 -1
- package/docs/troubleshooting.md +147 -99
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -149,12 +149,43 @@ function ThemeToggle({
|
|
|
149
149
|
size = "md",
|
|
150
150
|
...props
|
|
151
151
|
}) {
|
|
152
|
+
if (typeof window === "undefined") {
|
|
153
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
154
|
+
"button",
|
|
155
|
+
{
|
|
156
|
+
type: "button",
|
|
157
|
+
className: cn(
|
|
158
|
+
"inline-flex items-center justify-center rounded-md border border-input bg-background",
|
|
159
|
+
size === "sm" ? "h-8 w-8" : size === "lg" ? "h-12 w-12" : "h-10 w-10",
|
|
160
|
+
className
|
|
161
|
+
),
|
|
162
|
+
"aria-label": "Toggle theme",
|
|
163
|
+
...props,
|
|
164
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: size === "sm" ? 16 : size === "lg" ? 24 : 20, stroke: 1.5 })
|
|
165
|
+
}
|
|
166
|
+
);
|
|
167
|
+
}
|
|
152
168
|
const { theme, setTheme, resolvedTheme } = useTheme();
|
|
153
169
|
const [mounted, setMounted] = React2__namespace.useState(false);
|
|
154
170
|
React2__namespace.useEffect(() => {
|
|
155
171
|
setMounted(true);
|
|
156
172
|
}, []);
|
|
157
|
-
if (!mounted)
|
|
173
|
+
if (!mounted) {
|
|
174
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
175
|
+
"button",
|
|
176
|
+
{
|
|
177
|
+
type: "button",
|
|
178
|
+
className: cn(
|
|
179
|
+
"inline-flex items-center justify-center rounded-md border border-input bg-background",
|
|
180
|
+
size === "sm" ? "h-8 w-8" : size === "lg" ? "h-12 w-12" : "h-10 w-10",
|
|
181
|
+
className
|
|
182
|
+
),
|
|
183
|
+
"aria-label": "Toggle theme",
|
|
184
|
+
...props,
|
|
185
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: size === "sm" ? 16 : size === "lg" ? 24 : 20, stroke: 1.5 })
|
|
186
|
+
}
|
|
187
|
+
);
|
|
188
|
+
}
|
|
158
189
|
const toggleTheme = () => {
|
|
159
190
|
setTheme(resolvedTheme === "dark" ? "light" : "dark");
|
|
160
191
|
};
|
|
@@ -1926,7 +1957,39 @@ function ClientThemeToggle(props) {
|
|
|
1926
1957
|
});
|
|
1927
1958
|
}, []);
|
|
1928
1959
|
if (!mounted || !ThemeToggleComponent) {
|
|
1929
|
-
return
|
|
1960
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1961
|
+
"button",
|
|
1962
|
+
{
|
|
1963
|
+
type: "button",
|
|
1964
|
+
className: "inline-flex items-center justify-center rounded-md border border-input bg-background h-10 w-10",
|
|
1965
|
+
"aria-label": "Toggle theme",
|
|
1966
|
+
...props,
|
|
1967
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1968
|
+
"svg",
|
|
1969
|
+
{
|
|
1970
|
+
width: "20",
|
|
1971
|
+
height: "20",
|
|
1972
|
+
viewBox: "0 0 24 24",
|
|
1973
|
+
fill: "none",
|
|
1974
|
+
stroke: "currentColor",
|
|
1975
|
+
strokeWidth: "2",
|
|
1976
|
+
strokeLinecap: "round",
|
|
1977
|
+
strokeLinejoin: "round",
|
|
1978
|
+
children: [
|
|
1979
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
|
|
1980
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v2" }),
|
|
1981
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 20v2" }),
|
|
1982
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
|
|
1983
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
|
|
1984
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h2" }),
|
|
1985
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 12h2" }),
|
|
1986
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
|
|
1987
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m19.07 4.93-1.41 1.41" })
|
|
1988
|
+
]
|
|
1989
|
+
}
|
|
1990
|
+
)
|
|
1991
|
+
}
|
|
1992
|
+
);
|
|
1930
1993
|
}
|
|
1931
1994
|
return /* @__PURE__ */ jsxRuntime.jsx(ThemeToggleComponent, { ...props });
|
|
1932
1995
|
}
|