npm - @dmitriikapustin/ui - Versions diffs - 0.2.6 → 0.2.8 - Mend

@dmitriikapustin/ui 0.2.6 → 0.2.8

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.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -10,14 +10,23 @@ npm install @dmitriikapustin/ui
 ## Usage
+**Step 1.** Import design tokens stylesheet **once** in your app's root layout (e.g. `app/layout.tsx` for Next.js, or `main.tsx` for Vite):
 ```tsx
-import { Button, Input, Badge } from '@dmitriikapustin/ui';
 import '@dmitriikapustin/ui/styles.css';
+```
+This registers all CSS custom properties (`--bg`, `--fg`, `--brand-primary`, `--radius-lg`, etc.) on `:root`. Components reference these tokens — without this import, components render without colors / typography / spacing.
+**Step 2.** Use components anywhere:
+```tsx
+import { Button, Input, Badge } from '@dmitriikapustin/ui';
 export function App() {
   return (
     <div>
-      <Button variant="primary">Get Started</Button>
+      <Button variant="primary" size="hero">Get Started</Button>
       <Input label="Email" placeholder="you@example.com" />
       <Badge color="success">Active</Badge>
     </div>
@@ -41,10 +50,10 @@ Dark mode activates via `[data-theme="dark"]` on `<html>`.
 Button, Input, Badge, Tag, Toggle, Avatar, Spinner, Divider, MenuItem, IconButton, Logo, StatBadge, Textarea, Select, Checkbox, Radio, Link, Tooltip, Skeleton, Icons
 ### Molecules
-Card, FormField, SearchBar, Stat, Alert, Tabs, ChatInput, ChatMessage, TopPromo, ProfileNav, IconWithText, StampCard, PasswordInput, Breadcrumbs, Toast, Pagination, CodeInput, Modal, DropdownMenu
+Card, IconBadge, Gallery, FormField, SearchBar, Stat, Alert, Tabs, ChatInput, ChatMessage, TopPromo, ProfileNav, IconWithText, StampCard, PasswordInput, Breadcrumbs, Toast, Pagination, CodeInput, Modal, DropdownMenu
 ### Organisms
-Header, Footer, PricingCard, TestimonialCard, FeatureGrid, Sidebar, AppCard, AppTopLine, EmptyState, HeroSection, LogoCloud, StatsBar, CTASection, BentoGrid, FAQSection, ComparisonTable, PromoBento, PromoShowcase, PromoSplit, PromoTrustGrid, PromoDevicesCTA, PromoTestimonials, PromoHero, PromoPricing, PromoActionCards
+Header, Footer, PricingCard, TestimonialCard, FeatureGrid, Sidebar, AppCard, AppTopLine, EmptyState, HeroSection, LogoCloud, StatsBar, CTASection, BentoGrid, FAQSection, ComparisonTable, PromoBento, PromoShowcase, PromoSplit, PromoTrustGrid, PromoDevicesCTA, PromoTestimonials, PromoHero, PromoHeroForm, PromoPricing, PromoActionCards
 ### Templates
 ArticleHero, ArticleBody, ArticleHeading, ArticleFigure, ArticleTable, ArticleList, ArticleNote, ArticleChatBlock, ArticleLinkButton, ArticleFooter, ArticleLayout, LandingLayout, ArticleLineChart, ArticleBarChart, ArticleScatterChart

package/dist/index.cjs CHANGED Viewed

@@ -915,40 +915,61 @@ function IconButton(_a) {
 }
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/Logo.module.scss
-__styleInject(`.Logo-module_short {
-  width: 19px;
-  height: 20px;
-}
-.Logo-module_full {
-  height: 20px;
-  width: 130px;
-}
-.Logo-module_third {
-  display: flex;
+__styleInject(`.Logo-module_root {
+  display: inline-flex;
   align-items: center;
   gap: 0.375rem;
 }
-.Logo-module_thirdText {
-  font-size: 13px;
-  font-weight: 500;
+.Logo-module_image {
+  display: block;
+}
+.Logo-module_text {
+  font-size: 16px;
+  font-weight: 600;
   color: var(--fg);
   letter-spacing: -0.25px;
+  line-height: 1;
+}
+.Logo-module_accent {
+  color: var(--brand-primary);
 }`);
-var __default11 = { "short": "Logo-module_short", "full": "Logo-module_full", "third": "Logo-module_third", "thirdText": "Logo-module_thirdText" };
-function Logo({ version = "short", className = "" }) {
-  if (version === "short") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${__default11.short}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: "logo-img", src: "/assets/logos/logo-short.svg", alt: "aiacade.me", width: 19, height: 20 }) });
-  }
-  if (version === "third") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${__default11.third}${className ? ` ${className}` : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("img", { className: "logo-img", src: "/assets/logos/logo-icon.svg", alt: "", width: 20, height: 20 }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default11.thirdText, children: "aiacade.me" })
-    ] });
+var __default11 = { "root": "Logo-module_root", "image": "Logo-module_image", "text": "Logo-module_text", "accent": "Logo-module_accent" };
+function Logo({
+  children,
+  src,
+  alt = "",
+  width,
+  height,
+  text,
+  accent,
+  className = ""
+}) {
+  const rootClass = `${__default11.root}${className ? ` ${className}` : ""}`;
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children });
+  }
+  if (src) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: __default11.image, src, alt, width, height }) });
+  }
+  if (text) {
+    const accentText = accent != null ? accent : text.charAt(0);
+    const idx = accent ? text.indexOf(accent) : 0;
+    if (idx >= 0 && accentText) {
+      const before = text.slice(0, idx);
+      const middle = text.slice(idx, idx + accentText.length);
+      const after = text.slice(idx + accentText.length);
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default11.text, children: [
+        before,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default11.accent, children: middle }),
+        after
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default11.text, children: text }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${__default11.full}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: "logo-img", src: "/assets/logos/logo-full.svg", alt: "aiacade.me", width: 130, height: 20 }) });
+  return null;
 }
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/StatBadge.module.scss
@@ -3540,16 +3561,13 @@ __styleInject(`.Header-module_root {
   padding-top: 1rem;
   border-top: 1px solid var(--border-color);
 }`);
-var __default42 = { "root": "Header-module_root", "container": "Header-module_container", "bar": "Header-module_bar", "leftGroup": "Header-module_leftGroup", "logoFallback": "Header-module_logoFallback", "logoBrand": "Header-module_logoBrand", "desktopNav": "Header-module_desktopNav", "navLink": "Header-module_navLink", "desktopActions": "Header-module_desktopActions", "mobileToggle": "Header-module_mobileToggle", "mobileMenu": "Header-module_mobileMenu", "mobileNav": "Header-module_mobileNav", "mobileActions": "Header-module_mobileActions" };
-function Header({ logo, navItems = [], className = "" }) {
+var __default42 = { "root": "Header-module_root", "container": "Header-module_container", "bar": "Header-module_bar", "leftGroup": "Header-module_leftGroup", "desktopNav": "Header-module_desktopNav", "navLink": "Header-module_navLink", "desktopActions": "Header-module_desktopActions", "mobileToggle": "Header-module_mobileToggle", "mobileMenu": "Header-module_mobileMenu", "mobileNav": "Header-module_mobileNav", "mobileActions": "Header-module_mobileActions" };
+function Header({ logo, navItems = [], actions, className = "" }) {
   const [mobileOpen, setMobileOpen] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `${__default42.root}${className ? ` ${className}` : ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.container, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.bar, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.leftGroup, children: [
-        logo || /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default42.logoFallback, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default42.logoBrand, children: "K" }),
-          "apustin"
-        ] }),
+        logo,
         /* @__PURE__ */ jsxRuntime.jsx("nav", { className: __default42.desktopNav, children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           "a",
           {
@@ -3560,10 +3578,7 @@ function Header({ logo, navItems = [], className = "" }) {
           item.label
         )) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.desktopActions, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", children: "Get started" })
-      ] }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.desktopActions, children: actions }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.mobileToggle, children: /* @__PURE__ */ jsxRuntime.jsx(
         IconButton,
         {
@@ -3584,10 +3599,7 @@ function Header({ logo, navItems = [], className = "" }) {
         },
         item.label
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.mobileActions, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", children: "Get started" })
-      ] })
+      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.mobileActions, children: actions })
     ] })
   ] });
 }
@@ -3706,72 +3718,34 @@ __styleInject(`.Footer-module_root {
 .Footer-module_socialLink:hover {
   color: var(--fg);
 }`);
-var __default43 = { "root": "Footer-module_root", "container": "Footer-module_container", "grid": "Footer-module_grid", "brand": "Footer-module_brand", "brandAccent": "Footer-module_brandAccent", "tagline": "Footer-module_tagline", "columnTitle": "Footer-module_columnTitle", "linkList": "Footer-module_linkList", "link": "Footer-module_link", "bottom": "Footer-module_bottom", "copyright": "Footer-module_copyright", "socials": "Footer-module_socials", "socialLink": "Footer-module_socialLink" };
-var defaultColumns = [
-  {
-    title: "Product",
-    links: [
-      { label: "Components", href: "#" },
-      { label: "Templates", href: "#" },
-      { label: "Pricing", href: "#" },
-      { label: "Changelog", href: "#" }
-    ]
-  },
-  {
-    title: "Resources",
-    links: [
-      { label: "Documentation", href: "#" },
-      { label: "Guides", href: "#" },
-      { label: "API Reference", href: "#" },
-      { label: "Blog", href: "#" }
-    ]
-  },
-  {
-    title: "Company",
-    links: [
-      { label: "About", href: "#" },
-      { label: "Careers", href: "#" },
-      { label: "Contact", href: "#" },
-      { label: "Legal", href: "#" }
-    ]
-  }
-];
-function Footer({ columns = defaultColumns, className = "" }) {
+var __default43 = { "root": "Footer-module_root", "container": "Footer-module_container", "grid": "Footer-module_grid", "columnTitle": "Footer-module_columnTitle", "linkList": "Footer-module_linkList", "link": "Footer-module_link", "bottom": "Footer-module_bottom", "copyright": "Footer-module_copyright", "socials": "Footer-module_socials", "socialLink": "Footer-module_socialLink" };
+function Footer({
+  brand,
+  columns,
+  socials,
+  copyright,
+  className = ""
+}) {
+  const hasGrid = !!brand || columns && columns.length > 0;
+  const hasBottom = !!copyright || socials && socials.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: `${__default43.root}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.grid, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default43.brand, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default43.brandAccent, children: "K" }),
-          "apustin"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: __default43.tagline, children: "A modern design system for building beautiful interfaces." })
-      ] }),
-      columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    hasGrid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.grid, children: [
+      brand && /* @__PURE__ */ jsxRuntime.jsx("div", { children: brand }),
+      columns == null ? void 0 : columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: __default43.columnTitle, children: col.title }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: __default43.linkList, children: col.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: link.href,
-            className: __default43.link,
-            children: link.label
-          }
-        ) }, link.label)) })
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: __default43.linkList, children: col.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, className: __default43.link, children: link.label }) }, link.label)) })
       ] }, col.title))
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.bottom, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: __default43.copyright, children: [
-        "\xA9 ",
-        (/* @__PURE__ */ new Date()).getFullYear(),
-        " Kapustin Team. All rights reserved."
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default43.socials, children: ["Twitter", "GitHub", "Discord"].map((social) => /* @__PURE__ */ jsxRuntime.jsx(
+    hasBottom && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.bottom, children: [
+      copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { className: __default43.copyright, children: copyright }),
+      socials && socials.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default43.socials, children: socials.map((social) => /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
-          href: "#",
+          href: social.href,
           className: __default43.socialLink,
-          children: social
+          children: social.label
         },
-        social
+        social.label
       )) })
     ] })
   ] }) });
@@ -3865,6 +3839,7 @@ function PricingCard({
   features,
   highlighted = false,
   badge,
+  cta,
   className = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3885,7 +3860,15 @@ function PricingCard({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default44.featureIcon, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 16 }) }),
           feature
         ] }, i)) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: highlighted ? "primary" : "outline", className: __default44.cta, children: "Get started" })
+        cta && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: highlighted ? "primary" : "outline",
+            className: __default44.cta,
+            onClick: cta.onClick,
+            children: cta.label
+          }
+        )
       ]
     }
   );

package/dist/index.css ADDED Viewed

@@ -0,0 +1,161 @@
+/* css-inject-plain:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/styles.css */
+:root {
+  --neutral-50: #fafafa;
+  --neutral-100: #f7f7f7;
+  --neutral-200: #f3f3f3;
+  --neutral-300: #e0e0e0;
+  --neutral-400: #babbbd;
+  --neutral-500: #737373;
+  --neutral-600: #4c4c4c;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #18181b;
+  --neutral-950: #0a0a0a;
+  --brand-primary: #18181b;
+  --brand-primary-light: #4c4c4c;
+  --brand-primary-dark: #0a0a0a;
+  --brand-secondary: #f3f3f3;
+  --brand-secondary-light: #f7f7f7;
+  --brand-secondary-dark: #e0e0e0;
+  --brand-accent: #18181b;
+  --brand-accent-light: #4c4c4c;
+  --brand-accent-dark: #0a0a0a;
+  --color-accent: #02ad41;
+  --color-accent-light: #34c759;
+  --color-accent-dark: #029236;
+  --color-success: #22c55e;
+  --color-success-light: #86efac;
+  --color-success-dark: #16a34a;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fcd34d;
+  --color-warning-dark: #d97706;
+  --color-error: #ef4444;
+  --color-error-light: #fca5a5;
+  --color-error-dark: #dc2626;
+  --color-info: #3b82f6;
+  --color-info-light: #93c5fd;
+  --color-info-dark: #2563eb;
+  --bg: #ffffff;
+  --bg-secondary: #f7f7f7;
+  --bg-tertiary: #f3f3f3;
+  --fg: #18181b;
+  --fg-secondary: #4c4c4c;
+  --fg-muted: #babbbd;
+  --border-color: #e0e0e0;
+  --border-color-strong: #babbbd;
+  --font-sans:
+    var(--font-onest),
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --font-mono:
+    "Geist Mono",
+    "SF Mono",
+    "Fira Code",
+    monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 3.75rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 7px 7px 0 rgb(0 0 0 / 0.07);
+  --shadow-md: 0 7px 13px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --button-primary-border-gradient:
+    linear-gradient(
+      275.38deg,
+      rgba(255, 255, 255, 0.07) 1.53%,
+      rgba(255, 255, 255, 0.028) 94.58%);
+}
+[data-theme=dark] {
+  --bg: #09090b;
+  --bg-secondary: #18181b;
+  --bg-tertiary: #27272a;
+  --fg: #fafafa;
+  --fg-secondary: #a1a1aa;
+  --fg-muted: #71717a;
+  --border-color: #27272a;
+  --border-color-strong: #3f3f46;
+  --brand-primary: #818cf8;
+  --brand-primary-light: #a5b4fc;
+  --brand-primary-dark: #6366f1;
+  --brand-secondary: #f472b6;
+  --brand-secondary-light: #f9a8d4;
+  --brand-secondary-dark: #ec4899;
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+  --button-primary-border-gradient:
+    linear-gradient(
+      275.38deg,
+      rgba(255, 255, 255, 0.04) 1.53%,
+      rgba(255, 255, 255, 0.02) 94.58%);
+}
+[data-theme=dark] .logo-img {
+  filter: invert(1);
+}
+:root,
+:host {
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+* {
+  border-color: var(--border-color);
+}
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+::selection {
+  background: var(--brand-primary);
+  color: white;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--fg-muted);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--fg-secondary);
+}
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */

package/dist/index.d.cts CHANGED Viewed

@@ -89,12 +89,24 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare function IconButton({ icon, variant, className, disabled, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
-type LogoVersion = 'short' | 'full' | 'third';
 interface LogoProps {
-    version?: LogoVersion;
+    /** Полный override через произвольный JSX. Имеет приоритет над text/src. */
+    children?: ReactNode;
+    /** URL картинки-логотипа. */
+    src?: string;
+    /** alt для картинки. */
+    alt?: string;
+    /** Ширина картинки. */
+    width?: number;
+    /** Высота картинки. */
+    height?: number;
+    /** Текстовый brand-name. */
+    text?: string;
+    /** Подстрока внутри text, выделяемая accent-цветом (первое вхождение). По умолчанию — первая буква text. */
+    accent?: string;
     className?: string;
 }
-declare function Logo({ version, className }: LogoProps): react_jsx_runtime.JSX.Element;
+declare function Logo({ children, src, alt, width, height, text, accent, className, }: LogoProps): react_jsx_runtime.JSX.Element | null;
 interface StatBadgeProps {
     value: string;
@@ -440,11 +452,13 @@ interface NavItem {
     href: string;
 }
 interface HeaderProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     navItems?: NavItem[];
+    /** Кнопки/контент справа (CTA). Если undefined — блок не рендерится. */
+    actions?: ReactNode;
     className?: string;
 }
-declare function Header({ logo, navItems, className }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header({ logo, navItems, actions, className }: HeaderProps): react_jsx_runtime.JSX.Element;
 interface FooterColumn {
     title: string;
@@ -453,11 +467,22 @@ interface FooterColumn {
         href: string;
     }[];
 }
+interface FooterSocial {
+    label: string;
+    href: string;
+}
 interface FooterProps {
+    /** Brand-cell слева в grid. Если undefined — ячейка не рендерится. */
+    brand?: ReactNode;
+    /** Колонки навигации. */
     columns?: FooterColumn[];
+    /** Соц-ссылки в нижнем баре. Если undefined / [] — не рендерится. */
+    socials?: FooterSocial[];
+    /** Copyright-строка. Если undefined / null — не рендерится. */
+    copyright?: string | null;
     className?: string;
 }
-declare function Footer({ columns, className }: FooterProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ brand, columns, socials, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
 interface PricingCardProps {
     plan: string;
@@ -467,9 +492,15 @@ interface PricingCardProps {
     features: string[];
     highlighted?: boolean;
     badge?: string;
+    /** CTA-кнопка. Если undefined — кнопка не рендерится. */
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
     className?: string;
 }
-declare function PricingCard({ plan, price, period, description, features, highlighted, badge, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
+declare function PricingCard({ plan, price, period, description, features, highlighted, badge, cta, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
 interface TestimonialCardProps {
     quote: string;

package/dist/index.d.ts CHANGED Viewed

@@ -89,12 +89,24 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare function IconButton({ icon, variant, className, disabled, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
-type LogoVersion = 'short' | 'full' | 'third';
 interface LogoProps {
-    version?: LogoVersion;
+    /** Полный override через произвольный JSX. Имеет приоритет над text/src. */
+    children?: ReactNode;
+    /** URL картинки-логотипа. */
+    src?: string;
+    /** alt для картинки. */
+    alt?: string;
+    /** Ширина картинки. */
+    width?: number;
+    /** Высота картинки. */
+    height?: number;
+    /** Текстовый brand-name. */
+    text?: string;
+    /** Подстрока внутри text, выделяемая accent-цветом (первое вхождение). По умолчанию — первая буква text. */
+    accent?: string;
     className?: string;
 }
-declare function Logo({ version, className }: LogoProps): react_jsx_runtime.JSX.Element;
+declare function Logo({ children, src, alt, width, height, text, accent, className, }: LogoProps): react_jsx_runtime.JSX.Element | null;
 interface StatBadgeProps {
     value: string;
@@ -440,11 +452,13 @@ interface NavItem {
     href: string;
 }
 interface HeaderProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     navItems?: NavItem[];
+    /** Кнопки/контент справа (CTA). Если undefined — блок не рендерится. */
+    actions?: ReactNode;
     className?: string;
 }
-declare function Header({ logo, navItems, className }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header({ logo, navItems, actions, className }: HeaderProps): react_jsx_runtime.JSX.Element;
 interface FooterColumn {
     title: string;
@@ -453,11 +467,22 @@ interface FooterColumn {
         href: string;
     }[];
 }
+interface FooterSocial {
+    label: string;
+    href: string;
+}
 interface FooterProps {
+    /** Brand-cell слева в grid. Если undefined — ячейка не рендерится. */
+    brand?: ReactNode;
+    /** Колонки навигации. */
     columns?: FooterColumn[];
+    /** Соц-ссылки в нижнем баре. Если undefined / [] — не рендерится. */
+    socials?: FooterSocial[];
+    /** Copyright-строка. Если undefined / null — не рендерится. */
+    copyright?: string | null;
     className?: string;
 }
-declare function Footer({ columns, className }: FooterProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ brand, columns, socials, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
 interface PricingCardProps {
     plan: string;
@@ -467,9 +492,15 @@ interface PricingCardProps {
     features: string[];
     highlighted?: boolean;
     badge?: string;
+    /** CTA-кнопка. Если undefined — кнопка не рендерится. */
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
     className?: string;
 }
-declare function PricingCard({ plan, price, period, description, features, highlighted, badge, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
+declare function PricingCard({ plan, price, period, description, features, highlighted, badge, cta, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
 interface TestimonialCardProps {
     quote: string;

package/dist/index.js CHANGED Viewed

@@ -909,40 +909,61 @@ function IconButton(_a) {
 }
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/Logo.module.scss
-__styleInject(`.Logo-module_short {
-  width: 19px;
-  height: 20px;
-}
-.Logo-module_full {
-  height: 20px;
-  width: 130px;
-}
-.Logo-module_third {
-  display: flex;
+__styleInject(`.Logo-module_root {
+  display: inline-flex;
   align-items: center;
   gap: 0.375rem;
 }
-.Logo-module_thirdText {
-  font-size: 13px;
-  font-weight: 500;
+.Logo-module_image {
+  display: block;
+}
+.Logo-module_text {
+  font-size: 16px;
+  font-weight: 600;
   color: var(--fg);
   letter-spacing: -0.25px;
+  line-height: 1;
+}
+.Logo-module_accent {
+  color: var(--brand-primary);
 }`);
-var __default11 = { "short": "Logo-module_short", "full": "Logo-module_full", "third": "Logo-module_third", "thirdText": "Logo-module_thirdText" };
-function Logo({ version = "short", className = "" }) {
-  if (version === "short") {
-    return /* @__PURE__ */ jsx("div", { className: `${__default11.short}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx("img", { className: "logo-img", src: "/assets/logos/logo-short.svg", alt: "aiacade.me", width: 19, height: 20 }) });
-  }
-  if (version === "third") {
-    return /* @__PURE__ */ jsxs("div", { className: `${__default11.third}${className ? ` ${className}` : ""}`, children: [
-      /* @__PURE__ */ jsx("img", { className: "logo-img", src: "/assets/logos/logo-icon.svg", alt: "", width: 20, height: 20 }),
-      /* @__PURE__ */ jsx("span", { className: __default11.thirdText, children: "aiacade.me" })
-    ] });
+var __default11 = { "root": "Logo-module_root", "image": "Logo-module_image", "text": "Logo-module_text", "accent": "Logo-module_accent" };
+function Logo({
+  children,
+  src,
+  alt = "",
+  width,
+  height,
+  text,
+  accent,
+  className = ""
+}) {
+  const rootClass = `${__default11.root}${className ? ` ${className}` : ""}`;
+  if (children) {
+    return /* @__PURE__ */ jsx("span", { className: rootClass, children });
+  }
+  if (src) {
+    return /* @__PURE__ */ jsx("span", { className: rootClass, children: /* @__PURE__ */ jsx("img", { className: __default11.image, src, alt, width, height }) });
+  }
+  if (text) {
+    const accentText = accent != null ? accent : text.charAt(0);
+    const idx = accent ? text.indexOf(accent) : 0;
+    if (idx >= 0 && accentText) {
+      const before = text.slice(0, idx);
+      const middle = text.slice(idx, idx + accentText.length);
+      const after = text.slice(idx + accentText.length);
+      return /* @__PURE__ */ jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxs("span", { className: __default11.text, children: [
+        before,
+        /* @__PURE__ */ jsx("span", { className: __default11.accent, children: middle }),
+        after
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx("span", { className: rootClass, children: /* @__PURE__ */ jsx("span", { className: __default11.text, children: text }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: `${__default11.full}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx("img", { className: "logo-img", src: "/assets/logos/logo-full.svg", alt: "aiacade.me", width: 130, height: 20 }) });
+  return null;
 }
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/StatBadge.module.scss
@@ -3534,16 +3555,13 @@ __styleInject(`.Header-module_root {
   padding-top: 1rem;
   border-top: 1px solid var(--border-color);
 }`);
-var __default42 = { "root": "Header-module_root", "container": "Header-module_container", "bar": "Header-module_bar", "leftGroup": "Header-module_leftGroup", "logoFallback": "Header-module_logoFallback", "logoBrand": "Header-module_logoBrand", "desktopNav": "Header-module_desktopNav", "navLink": "Header-module_navLink", "desktopActions": "Header-module_desktopActions", "mobileToggle": "Header-module_mobileToggle", "mobileMenu": "Header-module_mobileMenu", "mobileNav": "Header-module_mobileNav", "mobileActions": "Header-module_mobileActions" };
-function Header({ logo, navItems = [], className = "" }) {
+var __default42 = { "root": "Header-module_root", "container": "Header-module_container", "bar": "Header-module_bar", "leftGroup": "Header-module_leftGroup", "desktopNav": "Header-module_desktopNav", "navLink": "Header-module_navLink", "desktopActions": "Header-module_desktopActions", "mobileToggle": "Header-module_mobileToggle", "mobileMenu": "Header-module_mobileMenu", "mobileNav": "Header-module_mobileNav", "mobileActions": "Header-module_mobileActions" };
+function Header({ logo, navItems = [], actions, className = "" }) {
   const [mobileOpen, setMobileOpen] = useState(false);
   return /* @__PURE__ */ jsxs("header", { className: `${__default42.root}${className ? ` ${className}` : ""}`, children: [
     /* @__PURE__ */ jsx("div", { className: __default42.container, children: /* @__PURE__ */ jsxs("div", { className: __default42.bar, children: [
       /* @__PURE__ */ jsxs("div", { className: __default42.leftGroup, children: [
-        logo || /* @__PURE__ */ jsxs("span", { className: __default42.logoFallback, children: [
-          /* @__PURE__ */ jsx("span", { className: __default42.logoBrand, children: "K" }),
-          "apustin"
-        ] }),
+        logo,
         /* @__PURE__ */ jsx("nav", { className: __default42.desktopNav, children: navItems.map((item) => /* @__PURE__ */ jsx(
           "a",
           {
@@ -3554,10 +3572,7 @@ function Header({ logo, navItems = [], className = "" }) {
           item.label
         )) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: __default42.desktopActions, children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
-        /* @__PURE__ */ jsx(Button, { size: "md", children: "Get started" })
-      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: __default42.desktopActions, children: actions }),
       /* @__PURE__ */ jsx("div", { className: __default42.mobileToggle, children: /* @__PURE__ */ jsx(
         IconButton,
         {
@@ -3578,10 +3593,7 @@ function Header({ logo, navItems = [], className = "" }) {
         },
         item.label
       )) }),
-      /* @__PURE__ */ jsxs("div", { className: __default42.mobileActions, children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
-        /* @__PURE__ */ jsx(Button, { size: "md", children: "Get started" })
-      ] })
+      actions && /* @__PURE__ */ jsx("div", { className: __default42.mobileActions, children: actions })
     ] })
   ] });
 }
@@ -3700,72 +3712,34 @@ __styleInject(`.Footer-module_root {
 .Footer-module_socialLink:hover {
   color: var(--fg);
 }`);
-var __default43 = { "root": "Footer-module_root", "container": "Footer-module_container", "grid": "Footer-module_grid", "brand": "Footer-module_brand", "brandAccent": "Footer-module_brandAccent", "tagline": "Footer-module_tagline", "columnTitle": "Footer-module_columnTitle", "linkList": "Footer-module_linkList", "link": "Footer-module_link", "bottom": "Footer-module_bottom", "copyright": "Footer-module_copyright", "socials": "Footer-module_socials", "socialLink": "Footer-module_socialLink" };
-var defaultColumns = [
-  {
-    title: "Product",
-    links: [
-      { label: "Components", href: "#" },
-      { label: "Templates", href: "#" },
-      { label: "Pricing", href: "#" },
-      { label: "Changelog", href: "#" }
-    ]
-  },
-  {
-    title: "Resources",
-    links: [
-      { label: "Documentation", href: "#" },
-      { label: "Guides", href: "#" },
-      { label: "API Reference", href: "#" },
-      { label: "Blog", href: "#" }
-    ]
-  },
-  {
-    title: "Company",
-    links: [
-      { label: "About", href: "#" },
-      { label: "Careers", href: "#" },
-      { label: "Contact", href: "#" },
-      { label: "Legal", href: "#" }
-    ]
-  }
-];
-function Footer({ columns = defaultColumns, className = "" }) {
+var __default43 = { "root": "Footer-module_root", "container": "Footer-module_container", "grid": "Footer-module_grid", "columnTitle": "Footer-module_columnTitle", "linkList": "Footer-module_linkList", "link": "Footer-module_link", "bottom": "Footer-module_bottom", "copyright": "Footer-module_copyright", "socials": "Footer-module_socials", "socialLink": "Footer-module_socialLink" };
+function Footer({
+  brand,
+  columns,
+  socials,
+  copyright,
+  className = ""
+}) {
+  const hasGrid = !!brand || columns && columns.length > 0;
+  const hasBottom = !!copyright || socials && socials.length > 0;
   return /* @__PURE__ */ jsx("footer", { className: `${__default43.root}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxs("div", { className: __default43.container, children: [
-    /* @__PURE__ */ jsxs("div", { className: __default43.grid, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("span", { className: __default43.brand, children: [
-          /* @__PURE__ */ jsx("span", { className: __default43.brandAccent, children: "K" }),
-          "apustin"
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: __default43.tagline, children: "A modern design system for building beautiful interfaces." })
-      ] }),
-      columns.map((col) => /* @__PURE__ */ jsxs("div", { children: [
+    hasGrid && /* @__PURE__ */ jsxs("div", { className: __default43.grid, children: [
+      brand && /* @__PURE__ */ jsx("div", { children: brand }),
+      columns == null ? void 0 : columns.map((col) => /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h4", { className: __default43.columnTitle, children: col.title }),
-        /* @__PURE__ */ jsx("ul", { className: __default43.linkList, children: col.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: link.href,
-            className: __default43.link,
-            children: link.label
-          }
-        ) }, link.label)) })
+        /* @__PURE__ */ jsx("ul", { className: __default43.linkList, children: col.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: __default43.link, children: link.label }) }, link.label)) })
       ] }, col.title))
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: __default43.bottom, children: [
-      /* @__PURE__ */ jsxs("p", { className: __default43.copyright, children: [
-        "\xA9 ",
-        (/* @__PURE__ */ new Date()).getFullYear(),
-        " Kapustin Team. All rights reserved."
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: __default43.socials, children: ["Twitter", "GitHub", "Discord"].map((social) => /* @__PURE__ */ jsx(
+    hasBottom && /* @__PURE__ */ jsxs("div", { className: __default43.bottom, children: [
+      copyright && /* @__PURE__ */ jsx("p", { className: __default43.copyright, children: copyright }),
+      socials && socials.length > 0 && /* @__PURE__ */ jsx("div", { className: __default43.socials, children: socials.map((social) => /* @__PURE__ */ jsx(
         "a",
         {
-          href: "#",
+          href: social.href,
           className: __default43.socialLink,
-          children: social
+          children: social.label
         },
-        social
+        social.label
       )) })
     ] })
   ] }) });
@@ -3859,6 +3833,7 @@ function PricingCard({
   features,
   highlighted = false,
   badge,
+  cta,
   className = ""
 }) {
   return /* @__PURE__ */ jsxs(
@@ -3879,7 +3854,15 @@ function PricingCard({
           /* @__PURE__ */ jsx("span", { className: __default44.featureIcon, children: /* @__PURE__ */ jsx(IconlyCheck, { size: 16 }) }),
           feature
         ] }, i)) }),
-        /* @__PURE__ */ jsx(Button, { variant: highlighted ? "primary" : "outline", className: __default44.cta, children: "Get started" })
+        cta && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: highlighted ? "primary" : "outline",
+            className: __default44.cta,
+            onClick: cta.onClick,
+            children: cta.label
+          }
+        )
       ]
     }
   );

package/dist/styles.css ADDED Viewed

@@ -0,0 +1,180 @@
+/* ─── Design Tokens ─── */
+:root {
+  /* Neutral Palette */
+  --neutral-50: #fafafa;
+  --neutral-100: #f7f7f7;
+  --neutral-200: #f3f3f3;
+  --neutral-300: #e0e0e0;
+  --neutral-400: #babbbd;
+  --neutral-500: #737373;
+  --neutral-600: #4c4c4c;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #18181b;
+  --neutral-950: #0a0a0a;
+  /* Brand Colors */
+  --brand-primary: #18181b;
+  --brand-primary-light: #4c4c4c;
+  --brand-primary-dark: #0a0a0a;
+  --brand-secondary: #f3f3f3;
+  --brand-secondary-light: #f7f7f7;
+  --brand-secondary-dark: #e0e0e0;
+  --brand-accent: #18181b;
+  --brand-accent-light: #4c4c4c;
+  --brand-accent-dark: #0a0a0a;
+  /* Accent */
+  --color-accent: #02ad41;
+  --color-accent-light: #34c759;
+  --color-accent-dark: #029236;
+  /* Semantic Colors */
+  --color-success: #22c55e;
+  --color-success-light: #86efac;
+  --color-success-dark: #16a34a;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fcd34d;
+  --color-warning-dark: #d97706;
+  --color-error: #ef4444;
+  --color-error-light: #fca5a5;
+  --color-error-dark: #dc2626;
+  --color-info: #3b82f6;
+  --color-info-light: #93c5fd;
+  --color-info-dark: #2563eb;
+  /* Surfaces */
+  --bg: #ffffff;
+  --bg-secondary: #f7f7f7;
+  --bg-tertiary: #f3f3f3;
+  --fg: #18181b;
+  --fg-secondary: #4c4c4c;
+  --fg-muted: #babbbd;
+  --border-color: #e0e0e0;
+  --border-color-strong: #babbbd;
+  /* Typography */
+  --font-sans: var(--font-onest), system-ui, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 3.75rem;
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  /* Shadows */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 7px 7px 0 rgb(0 0 0 / 0.07);
+  --shadow-md: 0 7px 13px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* Component-specific tokens */
+  --button-primary-border-gradient: linear-gradient(275.38deg, rgba(255, 255, 255, 0.07) 1.53%, rgba(255, 255, 255, 0.028) 94.58%);
+}
+/* Dark Mode */
+[data-theme="dark"] {
+  --bg: #09090b;
+  --bg-secondary: #18181b;
+  --bg-tertiary: #27272a;
+  --fg: #fafafa;
+  --fg-secondary: #a1a1aa;
+  --fg-muted: #71717a;
+  --border-color: #27272a;
+  --border-color-strong: #3f3f46;
+  --brand-primary: #818cf8;
+  --brand-primary-light: #a5b4fc;
+  --brand-primary-dark: #6366f1;
+  --brand-secondary: #f472b6;
+  --brand-secondary-light: #f9a8d4;
+  --brand-secondary-dark: #ec4899;
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+  --button-primary-border-gradient: linear-gradient(275.38deg, rgba(255, 255, 255, 0.04) 1.53%, rgba(255, 255, 255, 0.02) 94.58%);
+}
+/* Logo dark-mode: invert dark SVG fills to light when loaded via <img> */
+[data-theme="dark"] .logo-img {
+  filter: invert(1);
+}
+@theme inline {
+  --color-background: var(--bg);
+  --color-foreground: var(--fg);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+/* ─── Base Styles ─── */
+* {
+  border-color: var(--border-color);
+}
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+::selection {
+  background: var(--brand-primary);
+  color: white;
+}
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--fg-muted);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--fg-secondary);
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dmitriikapustin/ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
   "author": "Kapustin Team",
   "license": "MIT",
@@ -18,7 +18,8 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",
@@ -26,7 +27,7 @@
   ],
   "sideEffects": true,
   "scripts": {
-    "build": "tsup && rm -f dist/index.css",
+    "build": "tsup && cp src/styles.css dist/styles.css",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist"