@dmitriikapustin/ui 0.2.8 → 0.2.10

package/dist/index.cjs

@@ -3436,12 +3436,16 @@ function DropdownMenu({
 }
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/Header.module.scss
-__styleInject(`.Header-module_root {
-  border-bottom: 1px solid var(--border-color);
+__styleInject(`@charset "UTF-8";
+/* Header \u2014 pill-style (border + radius + margin) by default */
+.Header-module_root {
+  margin: clamp(8px, 2vw, 24px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2xl);
   background: color-mix(in srgb, var(--bg) 80%, transparent);
   backdrop-filter: blur(12px);
   position: sticky;
-  top: 0;
+  top: clamp(8px, 2vw, 24px);
   z-index: 50;
 }
 
@@ -3474,16 +3478,6 @@ __styleInject(`.Header-module_root {
   gap: 2rem;
 }
 
-.Header-module_logoFallback {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--fg);
-}
-
-.Header-module_logoBrand {
-  color: var(--brand-primary);
-}
-
 .Header-module_desktopNav {
   display: none;
   align-items: center;
@@ -3520,14 +3514,6 @@ __styleInject(`.Header-module_root {
 
 .Header-module_mobileToggle {
   display: block;
-  padding: 0.5rem;
-  color: var(--fg-secondary);
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-.Header-module_mobileToggle:hover {
-  color: var(--fg);
 }
 @media (min-width: 768px) {
   .Header-module_mobileToggle {
@@ -3605,9 +3591,14 @@ function Header({ logo, navItems = [], actions, className = "" }) {
 }
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/Footer.module.scss
-__styleInject(`.Footer-module_root {
-  border-top: 1px solid var(--border-color);
+__styleInject(`@charset "UTF-8";
+/* Footer \u2014 pill-style (border + radius + margin) by default */
+.Footer-module_root {
+  margin: clamp(8px, 2vw, 24px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2xl);
   background: var(--bg);
+  overflow: hidden;
 }
 
 .Footer-module_container {
@@ -3637,18 +3628,13 @@ __styleInject(`.Footer-module_root {
   }
 }
 
-.Footer-module_brand {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--fg);
-}
-
-.Footer-module_brandAccent {
-  color: var(--brand-primary);
+.Footer-module_brandCell {
+  display: flex;
+  flex-direction: column;
 }
 
 .Footer-module_tagline {
-  margin-top: 0.75rem;
+  margin: 0.75rem 0 0 0;
   font-size: 13px;
   color: var(--fg-muted);
   line-height: 1.625;
@@ -3702,6 +3688,7 @@ __styleInject(`.Footer-module_root {
   font-size: 13px;
   color: var(--fg-muted);
   letter-spacing: -0.25px;
+  margin: 0;
 }
 
 .Footer-module_socials {
@@ -3718,7 +3705,7 @@ __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", "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 __default43 = { "root": "Footer-module_root", "container": "Footer-module_container", "grid": "Footer-module_grid", "brandCell": "Footer-module_brandCell", "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" };
 function Footer({
   brand,
   columns,
@@ -3726,11 +3713,15 @@ function Footer({
   copyright,
   className = ""
 }) {
-  const hasGrid = !!brand || columns && columns.length > 0;
+  const hasBrand = !!(brand && (brand.logo || brand.tagline));
+  const hasGrid = hasBrand || 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: [
     hasGrid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.grid, children: [
-      brand && /* @__PURE__ */ jsxRuntime.jsx("div", { children: brand }),
+      hasBrand && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.brandCell, children: [
+        brand == null ? void 0 : brand.logo,
+        (brand == null ? void 0 : brand.tagline) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: __default43.tagline, children: brand.tagline })
+      ] }),
       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)) })
@@ -8528,18 +8519,23 @@ var __default80 = { "headerMode": "LandingLayout-module_headerMode", "headerMain
 function LandingLayout({
   mode = "header",
   nav,
+  footer,
   children,
   className = ""
 }) {
   if (mode === "sidebar") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${__default80.sidebarMode}${className ? ` ${className}` : ""}`, children: [
       nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default80.sidebarNav, children: nav }),
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: __default80.sidebarMain, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default80.sidebarContent, children }) })
+      /* @__PURE__ */ jsxRuntime.jsxs("main", { className: __default80.sidebarMain, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default80.sidebarContent, children }),
+        footer
+      ] })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${__default80.headerMode}${className ? ` ${className}` : ""}`, children: [
     nav,
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: __default80.headerMain, children })
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: __default80.headerMain, children }),
+    footer
   ] });
 }
 

package/dist/index.d.cts

@@ -471,9 +471,15 @@ interface FooterSocial {
     label: string;
     href: string;
 }
+interface FooterBrand {
+    /** Логотип / brand-mark — любой JSX. */
+    logo?: ReactNode;
+    /** Tagline под логотипом. Применяется внутренний дизайн-стиль (13px, fg-muted, отступ сверху). */
+    tagline?: string;
+}
 interface FooterProps {
     /** Brand-cell слева в grid. Если undefined — ячейка не рендерится. */
-    brand?: ReactNode;
+    brand?: FooterBrand;
     /** Колонки навигации. */
     columns?: FooterColumn[];
     /** Соц-ссылки в нижнем баре. Если undefined / [] — не рендерится. */
@@ -1035,9 +1041,11 @@ interface LandingLayoutProps {
     mode?: 'header' | 'sidebar';
     /** Navigation element — Header for header mode, Sidebar for sidebar mode */
     nav?: ReactNode;
+    /** Footer element. Rendered sibling to `<main>` (full viewport width, без max-width-обёртки). */
+    footer?: ReactNode;
     children: ReactNode;
     className?: string;
 }
-declare function LandingLayout({ mode, nav, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
+declare function LandingLayout({ mode, nav, footer, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
 
 export { Alert, AppCard, AppTopLine, ArticleBarChart, type ArticleBarChartProps, ArticleBody, type ArticleBodyProps, ArticleChatBlock, type ArticleChatBlockProps, ArticleFigure, type ArticleFigureProps, ArticleFooter, type ArticleFooterProps, ArticleHeading, type ArticleHeadingProps, ArticleHero, type ArticleHeroProps, ArticleLayout, type ArticleLayoutProps, ArticleLineChart, type ArticleLineChartProps, ArticleLinkButton, type ArticleLinkButtonProps, ArticleList, type ArticleListProps, ArticleNarrow, ArticleNote, type ArticleNoteProps, ArticleScatterChart, type ArticleScatterChartProps, ArticleTable, type ArticleTableColumn, type ArticleTableProps, type ArticleTableRow, ArticleWide, Avatar, Badge, BentoGrid, Breadcrumbs, Button, CTASection, Card, type ChartSeries, ChatInput, ChatMessage, Checkbox, CodeInput, ComparisonTable, Divider, DropdownMenu, EmptyState, FAQSection, FeatureGrid, Footer, FormField, Gallery, Header, HeroSection, IconBadge, IconButton, IconWithText, IconlyActivity, IconlyAttach, IconlyBook, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, Select, Sidebar, type SidebarItem, Skeleton, Spinner, StampCard, Stat, StatBadge, StatsBar, Link as StyledLink, Tabs, Tag, TestimonialCard, Textarea, TicketButton, Toast, Toggle, Tooltip, TopPromo };

package/dist/index.d.ts

@@ -471,9 +471,15 @@ interface FooterSocial {
     label: string;
     href: string;
 }
+interface FooterBrand {
+    /** Логотип / brand-mark — любой JSX. */
+    logo?: ReactNode;
+    /** Tagline под логотипом. Применяется внутренний дизайн-стиль (13px, fg-muted, отступ сверху). */
+    tagline?: string;
+}
 interface FooterProps {
     /** Brand-cell слева в grid. Если undefined — ячейка не рендерится. */
-    brand?: ReactNode;
+    brand?: FooterBrand;
     /** Колонки навигации. */
     columns?: FooterColumn[];
     /** Соц-ссылки в нижнем баре. Если undefined / [] — не рендерится. */
@@ -1035,9 +1041,11 @@ interface LandingLayoutProps {
     mode?: 'header' | 'sidebar';
     /** Navigation element — Header for header mode, Sidebar for sidebar mode */
     nav?: ReactNode;
+    /** Footer element. Rendered sibling to `<main>` (full viewport width, без max-width-обёртки). */
+    footer?: ReactNode;
     children: ReactNode;
     className?: string;
 }
-declare function LandingLayout({ mode, nav, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
+declare function LandingLayout({ mode, nav, footer, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
 
 export { Alert, AppCard, AppTopLine, ArticleBarChart, type ArticleBarChartProps, ArticleBody, type ArticleBodyProps, ArticleChatBlock, type ArticleChatBlockProps, ArticleFigure, type ArticleFigureProps, ArticleFooter, type ArticleFooterProps, ArticleHeading, type ArticleHeadingProps, ArticleHero, type ArticleHeroProps, ArticleLayout, type ArticleLayoutProps, ArticleLineChart, type ArticleLineChartProps, ArticleLinkButton, type ArticleLinkButtonProps, ArticleList, type ArticleListProps, ArticleNarrow, ArticleNote, type ArticleNoteProps, ArticleScatterChart, type ArticleScatterChartProps, ArticleTable, type ArticleTableColumn, type ArticleTableProps, type ArticleTableRow, ArticleWide, Avatar, Badge, BentoGrid, Breadcrumbs, Button, CTASection, Card, type ChartSeries, ChatInput, ChatMessage, Checkbox, CodeInput, ComparisonTable, Divider, DropdownMenu, EmptyState, FAQSection, FeatureGrid, Footer, FormField, Gallery, Header, HeroSection, IconBadge, IconButton, IconWithText, IconlyActivity, IconlyAttach, IconlyBook, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, Select, Sidebar, type SidebarItem, Skeleton, Spinner, StampCard, Stat, StatBadge, StatsBar, Link as StyledLink, Tabs, Tag, TestimonialCard, Textarea, TicketButton, Toast, Toggle, Tooltip, TopPromo };

package/dist/index.js

@@ -3430,12 +3430,16 @@ function DropdownMenu({
 }
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/Header.module.scss
-__styleInject(`.Header-module_root {
-  border-bottom: 1px solid var(--border-color);
+__styleInject(`@charset "UTF-8";
+/* Header \u2014 pill-style (border + radius + margin) by default */
+.Header-module_root {
+  margin: clamp(8px, 2vw, 24px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2xl);
   background: color-mix(in srgb, var(--bg) 80%, transparent);
   backdrop-filter: blur(12px);
   position: sticky;
-  top: 0;
+  top: clamp(8px, 2vw, 24px);
   z-index: 50;
 }
 
@@ -3468,16 +3472,6 @@ __styleInject(`.Header-module_root {
   gap: 2rem;
 }
 
-.Header-module_logoFallback {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--fg);
-}
-
-.Header-module_logoBrand {
-  color: var(--brand-primary);
-}
-
 .Header-module_desktopNav {
   display: none;
   align-items: center;
@@ -3514,14 +3508,6 @@ __styleInject(`.Header-module_root {
 
 .Header-module_mobileToggle {
   display: block;
-  padding: 0.5rem;
-  color: var(--fg-secondary);
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-.Header-module_mobileToggle:hover {
-  color: var(--fg);
 }
 @media (min-width: 768px) {
   .Header-module_mobileToggle {
@@ -3599,9 +3585,14 @@ function Header({ logo, navItems = [], actions, className = "" }) {
 }
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/Footer.module.scss
-__styleInject(`.Footer-module_root {
-  border-top: 1px solid var(--border-color);
+__styleInject(`@charset "UTF-8";
+/* Footer \u2014 pill-style (border + radius + margin) by default */
+.Footer-module_root {
+  margin: clamp(8px, 2vw, 24px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2xl);
   background: var(--bg);
+  overflow: hidden;
 }
 
 .Footer-module_container {
@@ -3631,18 +3622,13 @@ __styleInject(`.Footer-module_root {
   }
 }
 
-.Footer-module_brand {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--fg);
-}
-
-.Footer-module_brandAccent {
-  color: var(--brand-primary);
+.Footer-module_brandCell {
+  display: flex;
+  flex-direction: column;
 }
 
 .Footer-module_tagline {
-  margin-top: 0.75rem;
+  margin: 0.75rem 0 0 0;
   font-size: 13px;
   color: var(--fg-muted);
   line-height: 1.625;
@@ -3696,6 +3682,7 @@ __styleInject(`.Footer-module_root {
   font-size: 13px;
   color: var(--fg-muted);
   letter-spacing: -0.25px;
+  margin: 0;
 }
 
 .Footer-module_socials {
@@ -3712,7 +3699,7 @@ __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", "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 __default43 = { "root": "Footer-module_root", "container": "Footer-module_container", "grid": "Footer-module_grid", "brandCell": "Footer-module_brandCell", "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" };
 function Footer({
   brand,
   columns,
@@ -3720,11 +3707,15 @@ function Footer({
   copyright,
   className = ""
 }) {
-  const hasGrid = !!brand || columns && columns.length > 0;
+  const hasBrand = !!(brand && (brand.logo || brand.tagline));
+  const hasGrid = hasBrand || 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: [
     hasGrid && /* @__PURE__ */ jsxs("div", { className: __default43.grid, children: [
-      brand && /* @__PURE__ */ jsx("div", { children: brand }),
+      hasBrand && /* @__PURE__ */ jsxs("div", { className: __default43.brandCell, children: [
+        brand == null ? void 0 : brand.logo,
+        (brand == null ? void 0 : brand.tagline) && /* @__PURE__ */ jsx("p", { className: __default43.tagline, children: brand.tagline })
+      ] }),
       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)) })
@@ -8522,18 +8513,23 @@ var __default80 = { "headerMode": "LandingLayout-module_headerMode", "headerMain
 function LandingLayout({
   mode = "header",
   nav,
+  footer,
   children,
   className = ""
 }) {
   if (mode === "sidebar") {
     return /* @__PURE__ */ jsxs("div", { className: `${__default80.sidebarMode}${className ? ` ${className}` : ""}`, children: [
       nav && /* @__PURE__ */ jsx("div", { className: __default80.sidebarNav, children: nav }),
-      /* @__PURE__ */ jsx("main", { className: __default80.sidebarMain, children: /* @__PURE__ */ jsx("div", { className: __default80.sidebarContent, children }) })
+      /* @__PURE__ */ jsxs("main", { className: __default80.sidebarMain, children: [
+        /* @__PURE__ */ jsx("div", { className: __default80.sidebarContent, children }),
+        footer
+      ] })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: `${__default80.headerMode}${className ? ` ${className}` : ""}`, children: [
     nav,
-    /* @__PURE__ */ jsx("main", { className: __default80.headerMain, children })
+    /* @__PURE__ */ jsx("main", { className: __default80.headerMain, children }),
+    footer
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmitriikapustin/ui",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
   "author": "Kapustin Team",
   "license": "MIT",