@datavac/ui-kit 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export { Input, SearchBar } from './components/Input';
 export { Tooltip } from './components/Tooltip';
 export { Drawer } from './components/Drawer';
 export { Accordion, AccordionItem } from './components/Accordion';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
 export { Spinner, Skeleton } from './components/Spinner';
 export { EmptyState, ErrorState } from './components/States';
 export { ThemeToggle } from './components/ThemeToggle';

package/dist/index.js

@@ -6330,21 +6330,35 @@ function Eu({ title: e, children: t, value: n }) {
 	});
 }
 //#endregion
-//#region src/components/Spinner/Spinner.tsx
+//#region src/components/Card/Card.tsx
 var Du = {
+	none: "",
+	sm: "p-4",
+	md: "p-5",
+	lg: "px-8 py-6"
+}, Ou = r(({ className: e, padding: t = "md", shadow: n = !0, children: r, ...i }, a) => /* @__PURE__ */ d("div", {
+	ref: a,
+	className: G("bg-card rounded-card", n && "shadow-[0_4px_50px_rgba(0,0,0,0.03)]", Du[t], e),
+	...i,
+	children: r
+}));
+Ou.displayName = "Card";
+//#endregion
+//#region src/components/Spinner/Spinner.tsx
+var ku = {
 	sm: "w-4 h-4 border-[1.5px]",
 	md: "w-6 h-6 border-2",
 	lg: "w-10 h-10 border-[3px]"
 };
-function Ou({ size: e = "md", className: t }) {
+function Au({ size: e = "md", className: t }) {
 	return /* @__PURE__ */ d("div", {
 		role: "status",
 		"aria-label": "Загрузка",
 		className: G("flex items-center justify-center", t),
-		children: /* @__PURE__ */ d("div", { className: G("rounded-full border-subtle border-t-accent animate-spin", Du[e]) })
+		children: /* @__PURE__ */ d("div", { className: G("rounded-full border-subtle border-t-accent animate-spin", ku[e]) })
 	});
 }
-function ku({ className: e, ...t }) {
+function ju({ className: e, ...t }) {
 	return /* @__PURE__ */ d("div", {
 		className: G("rounded-input bg-subtle animate-pulse", e),
 		...t
@@ -6352,7 +6366,7 @@ function ku({ className: e, ...t }) {
 }
 //#endregion
 //#region src/components/States/States.tsx
-function Au({ message: e = "Ничего не найдено", className: t }) {
+function Mu({ message: e = "Ничего не найдено", className: t }) {
 	return /* @__PURE__ */ d("div", {
 		className: G("flex flex-col items-center justify-center py-16 text-center", t),
 		children: /* @__PURE__ */ d("p", {
@@ -6361,7 +6375,7 @@ function Au({ message: e = "Ничего не найдено", className: t }) {
 		})
 	});
 }
-function ju({ message: e = "Произошла ошибка", className: t }) {
+function Nu({ message: e = "Произошла ошибка", className: t }) {
 	return /* @__PURE__ */ d("div", {
 		className: G("flex flex-col items-center justify-center py-16 text-center", t),
 		children: /* @__PURE__ */ d("p", {
@@ -6372,7 +6386,7 @@ function ju({ message: e = "Произошла ошибка", className: t }) {
 }
 //#endregion
 //#region src/icons/index.tsx
-function Mu({ width: e = 12, height: t = 12, ...n }) {
+function Pu({ width: e = 12, height: t = 12, ...n }) {
 	return /* @__PURE__ */ d("svg", {
 		viewBox: "0 0 12 12",
 		width: e,
@@ -6388,7 +6402,7 @@ function Mu({ width: e = 12, height: t = 12, ...n }) {
 		})
 	});
 }
-function Nu({ width: e = 17, height: t = 17, ...n }) {
+function Fu({ width: e = 17, height: t = 17, ...n }) {
 	return /* @__PURE__ */ d("svg", {
 		viewBox: "0 0 17 17",
 		width: e,
@@ -6404,7 +6418,7 @@ function Nu({ width: e = 17, height: t = 17, ...n }) {
 		})
 	});
 }
-function Pu({ width: e = 14, height: t = 10, ...n }) {
+function Iu({ width: e = 14, height: t = 10, ...n }) {
 	return /* @__PURE__ */ f("svg", {
 		viewBox: "0 0 14 10",
 		width: e,
@@ -6436,7 +6450,7 @@ function Pu({ width: e = 14, height: t = 10, ...n }) {
 		]
 	});
 }
-function Fu({ width: e = 16, height: t = 16, ...n }) {
+function Lu({ width: e = 16, height: t = 16, ...n }) {
 	return /* @__PURE__ */ d("svg", {
 		viewBox: "0 0 16 16",
 		width: e,
@@ -6452,7 +6466,7 @@ function Fu({ width: e = 16, height: t = 16, ...n }) {
 		})
 	});
 }
-function Iu({ width: e = 24, height: t = 24, ...n }) {
+function Ru({ width: e = 24, height: t = 24, ...n }) {
 	return /* @__PURE__ */ d("svg", {
 		viewBox: "0 0 24 24",
 		width: e,
@@ -6468,7 +6482,7 @@ function Iu({ width: e = 24, height: t = 24, ...n }) {
 		})
 	});
 }
-function Lu({ width: e = 16, height: t = 16, ...n }) {
+function zu({ width: e = 16, height: t = 16, ...n }) {
 	return /* @__PURE__ */ d("svg", {
 		viewBox: "0 0 16 16",
 		width: e,
@@ -6486,7 +6500,7 @@ function Lu({ width: e = 16, height: t = 16, ...n }) {
 }
 //#endregion
 //#region src/components/Switch/Switch.tsx
-var Ru = {
+var Bu = {
 	sm: {
 		track: "w-8 h-5",
 		thumb: "top-0.5 w-4 h-4",
@@ -6500,8 +6514,8 @@ var Ru = {
 		off: "left-[3px]"
 	}
 };
-function zu({ checked: e, onChange: t, size: n = "md", trackClassName: r, thumbClassName: i, id: a, disabled: o, className: s, "aria-label": c, "aria-labelledby": l }) {
-	let { track: u, thumb: p, on: m, off: h } = Ru[n];
+function Vu({ checked: e, onChange: t, size: n = "md", trackClassName: r, thumbClassName: i, id: a, disabled: o, className: s, "aria-label": c, "aria-labelledby": l }) {
+	let { track: u, thumb: p, on: m, off: h } = Bu[n];
 	return /* @__PURE__ */ f("label", {
 		className: G("inline-flex items-center cursor-pointer", o && "opacity-40 cursor-not-allowed", s),
 		children: [/* @__PURE__ */ d("input", {
@@ -6520,7 +6534,7 @@ function zu({ checked: e, onChange: t, size: n = "md", trackClassName: r, thumbC
 		})]
 	});
 }
-var Bu = {
+var Hu = {
 	colors: {
 		accent: "#E30C5C",
 		accentHover: "#B40A49",
@@ -6546,7 +6560,7 @@ var Bu = {
 		button: "40px"
 	},
 	font: { sans: "'Inter Tight', sans-serif" }
-}, Vu = {
+}, Uu = {
 	colors: {
 		accent: "#F31667",
 		accentHover: "#B40A49",
@@ -6572,7 +6586,7 @@ var Bu = {
 		button: "40px"
 	},
 	font: { sans: "'Inter Tight', sans-serif" }
-}, Hu = [
+}, Wu = [
 	{
 		path: "colors.accent",
 		cssVar: "--color-accent"
@@ -6657,24 +6671,24 @@ var Bu = {
 		path: "font.sans",
 		cssVar: "--font-sans"
 	}
-], Uu = {
-	light: Bu,
-	dark: Vu
+], Gu = {
+	light: Hu,
+	dark: Uu
 };
-function Wu(e, t) {
+function Ku(e, t) {
 	return t.split(".").reduce((e, t) => e[t], e);
 }
-function Gu(e) {
-	return Object.fromEntries(Hu.map(({ path: t, cssVar: n }) => [n, Wu(e, t)]));
+function qu(e) {
+	return Object.fromEntries(Wu.map(({ path: t, cssVar: n }) => [n, Ku(e, t)]));
 }
 //#endregion
 //#region src/components/ThemeProvider/ThemeProvider.tsx
-var Ku = n(null);
-function qu({ children: e, defaultTheme: t, customThemes: n, applyToRoot: r = !0 }) {
+var Ju = n(null);
+function Yu({ children: e, defaultTheme: t, customThemes: n, applyToRoot: r = !0 }) {
 	let a = c(() => ({
-		...Uu,
+		...Gu,
 		...n
-	}), [n]), [s, u] = l(t ?? "light"), f = a[s] ?? Bu;
+	}), [n]), [s, u] = l(t ?? "light"), f = a[s] ?? Hu;
 	o(() => {
 		let e = localStorage.getItem("datavac-theme");
 		!e || !a[e] || u(e);
@@ -6686,7 +6700,7 @@ function qu({ children: e, defaultTheme: t, customThemes: n, applyToRoot: r = !0
 	}, [a]), m = i(() => {
 		u((e) => e === "dark" ? "light" : "dark");
 	}, []);
-	return /* @__PURE__ */ d(Ku.Provider, {
+	return /* @__PURE__ */ d(Ju.Provider, {
 		value: {
 			themeName: s,
 			tokens: f,
@@ -6696,23 +6710,25 @@ function qu({ children: e, defaultTheme: t, customThemes: n, applyToRoot: r = !0
 		children: e
 	});
 }
-function Ju() {
-	let e = a(Ku);
+function Xu() {
+	let e = a(Ju);
 	if (!e) throw Error("useTheme must be used within <ThemeProvider>");
 	return e;
 }
 //#endregion
 //#region src/components/ThemeToggle/ThemeToggle.tsx
-function Yu({ className: e }) {
-	let { themeName: t, toggleTheme: n } = Ju(), r = t === "dark";
-	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
+function Zu({ className: e }) {
+	let { themeName: t, toggleTheme: n } = Xu(), r = t === "dark", [i, a] = l(!1);
+	return o(() => {
+		a(!0);
+	}, []), i ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
 		className: G("hidden md:flex items-center gap-2", e),
 		children: [
 			/* @__PURE__ */ d("span", {
 				className: G("text-xs font-sans", r ? "text-fg-muted" : "text-fg"),
 				children: "День"
 			}),
-			/* @__PURE__ */ d(zu, {
+			/* @__PURE__ */ d(Vu, {
 				checked: r,
 				onChange: () => n(),
 				size: "sm",
@@ -6735,14 +6751,14 @@ function Yu({ className: e }) {
 			/* @__PURE__ */ d("span", { className: G("absolute top-[3px] w-[26px] h-[26px] bg-white rounded-full shadow transition-all duration-200", r ? "left-[29px]" : "left-[3px]") }),
 			/* @__PURE__ */ d("span", {
 				className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none text-white",
-				children: /* @__PURE__ */ d(Lu, {})
+				children: /* @__PURE__ */ d(zu, {})
 			}),
 			/* @__PURE__ */ d("span", {
 				className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-fg",
-				children: /* @__PURE__ */ d(Fu, {})
+				children: /* @__PURE__ */ d(Lu, {})
 			})
 		]
-	})] });
+	})] }) : null;
 }
 //#endregion
-export { Tu as Accordion, Eu as AccordionItem, Mu as ArrowsIcon, yt as Badge, vt as Button, tt as Caption, bt as Chip, xt as Counter, bl as Drawer, Au as EmptyState, ju as ErrorState, Qe as Heading, Nu as InfoCircleIcon, St as Input, et as Label, Pu as MenuIcon, Fu as MoonStarsIcon, Iu as PlusIcon, Ct as SearchBar, ku as Skeleton, Ou as Spinner, Lu as SunIcon, zu as Switch, $e as Text, qu as ThemeProvider, Yu as ThemeToggle, za as Tooltip, G as cn, Vu as darkTheme, Bu as defaultTheme, Uu as themes, Gu as tokensToCssVars, Ju as useTheme };
+export { Tu as Accordion, Eu as AccordionItem, Pu as ArrowsIcon, yt as Badge, vt as Button, tt as Caption, Ou as Card, bt as Chip, xt as Counter, bl as Drawer, Mu as EmptyState, Nu as ErrorState, Qe as Heading, Fu as InfoCircleIcon, St as Input, et as Label, Iu as MenuIcon, Lu as MoonStarsIcon, Ru as PlusIcon, Ct as SearchBar, ju as Skeleton, Au as Spinner, zu as SunIcon, Vu as Switch, $e as Text, Yu as ThemeProvider, Zu as ThemeToggle, za as Tooltip, G as cn, Uu as darkTheme, Hu as defaultTheme, Gu as themes, qu as tokensToCssVars, Xu as useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datavac/ui-kit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",