@dmitriikapustin/ui 0.5.1 → 0.5.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.
Files changed (6) hide show
  1. package/dist/index.cjs +39 -30
  2. package/dist/index.d.cts +14 -1
  3. package/dist/index.d.ts +14 -1
  4. package/dist/index.js +39 -30
  5. package/dist/styles.css +3865 -3801
  6. package/package.json +3 -2
package/dist/index.cjs CHANGED
@@ -1747,10 +1747,19 @@ function SegmentedControl({
1747
1747
  }
1748
1748
 
1749
1749
  // css-extract-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/Header.module.scss
1750
- var __default44 = { "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" };
1751
- function Header({ logo, navItems = [], actions, className = "" }) {
1750
+ var __default44 = { "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", "minimal": "Header-module_minimal", "dark": "Header-module_dark" };
1751
+ function Header({
1752
+ logo,
1753
+ navItems = [],
1754
+ actions,
1755
+ variant = "pill",
1756
+ theme = "light",
1757
+ className = ""
1758
+ }) {
1752
1759
  const [mobileOpen, setMobileOpen] = react.useState(false);
1753
- return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `${__default44.root}${className ? ` ${className}` : ""}`, children: [
1760
+ const variantClass = variant === "minimal" ? ` ${__default44.minimal}` : "";
1761
+ const themeClass = variant === "minimal" && theme === "dark" ? ` ${__default44.dark}` : "";
1762
+ return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `${__default44.root}${variantClass}${themeClass}${className ? ` ${className}` : ""}`, children: [
1754
1763
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default44.container, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default44.bar, children: [
1755
1764
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default44.leftGroup, children: [
1756
1765
  logo,
@@ -2663,7 +2672,7 @@ function PromoDevicesCTA({
2663
2672
  }
2664
2673
 
2665
2674
  // css-extract-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/PromoTestimonials.module.scss
2666
- var __default66 = { "root": "PromoTestimonials-module_root", "rootNoVertical": "PromoTestimonials-module_rootNoVertical", "wrapper": "PromoTestimonials-module_wrapper", "avatarSection": "PromoTestimonials-module_avatarSection", "avatarStack": "PromoTestimonials-module_avatarStack", "avatarRing": "PromoTestimonials-module_avatarRing", "overflowBadge": "PromoTestimonials-module_overflowBadge", "overflowCircle": "PromoTestimonials-module_overflowCircle", "headingSection": "PromoTestimonials-module_headingSection", "rating": "PromoTestimonials-module_rating", "cardsSection": "PromoTestimonials-module_cardsSection", "cardsGrid": "PromoTestimonials-module_cardsGrid", "card": "PromoTestimonials-module_card", "quote": "PromoTestimonials-module_quote", "author": "PromoTestimonials-module_author", "authorInfo": "PromoTestimonials-module_authorInfo", "authorName": "PromoTestimonials-module_authorName", "authorRole": "PromoTestimonials-module_authorRole", "mediaSection": "PromoTestimonials-module_mediaSection", "mediaBox": "PromoTestimonials-module_mediaBox" };
2675
+ var __default66 = { "root": "PromoTestimonials-module_root", "rootNoVertical": "PromoTestimonials-module_rootNoVertical", "wrapper": "PromoTestimonials-module_wrapper", "header": "PromoTestimonials-module_header", "avatarStack": "PromoTestimonials-module_avatarStack", "avatarRing": "PromoTestimonials-module_avatarRing", "overflowBadge": "PromoTestimonials-module_overflowBadge", "overflowCircle": "PromoTestimonials-module_overflowCircle", "rating": "PromoTestimonials-module_rating", "cardsSection": "PromoTestimonials-module_cardsSection", "cardsGrid": "PromoTestimonials-module_cardsGrid", "card": "PromoTestimonials-module_card", "quote": "PromoTestimonials-module_quote", "author": "PromoTestimonials-module_author", "authorInfo": "PromoTestimonials-module_authorInfo", "authorName": "PromoTestimonials-module_authorName", "authorRole": "PromoTestimonials-module_authorRole", "mediaSection": "PromoTestimonials-module_mediaSection", "mediaBox": "PromoTestimonials-module_mediaBox" };
2667
2676
  function PromoTestimonials({
2668
2677
  heading,
2669
2678
  subtitle,
@@ -2677,33 +2686,33 @@ function PromoTestimonials({
2677
2686
  const noVerticalClass = verticalPadding === "none" ? ` ${__default66.rootNoVertical}` : "";
2678
2687
  const ratingCountLabel = rating && rating.count !== void 0 && rating.count > 0 ? rating.countLabel ? rating.countLabel(rating.count) : String(rating.count) : null;
2679
2688
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `${__default66.root}${noVerticalClass}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default66.wrapper, children: [
2680
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default66.avatarSection, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default66.avatarStack, children: [
2681
- testimonials.slice(0, 5).map((t, i) => {
2682
- const initials = t.name.split(" ").map((n) => n[0]).join("").toUpperCase();
2683
- return /* @__PURE__ */ jsxRuntime.jsx(
2684
- "div",
2685
- {
2686
- className: __default66.avatarRing,
2687
- style: { zIndex: 10 - i },
2688
- children: /* @__PURE__ */ jsxRuntime.jsx(
2689
- Avatar,
2690
- {
2691
- size: "md",
2692
- src: t.avatarSrc,
2693
- initials
2694
- }
2695
- )
2696
- },
2697
- i
2698
- );
2699
- }),
2700
- testimonials.length > 5 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default66.overflowBadge, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default66.overflowCircle, children: [
2701
- "+",
2702
- testimonials.length - 5
2703
- ] }) })
2704
- ] }) }),
2705
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default66.headingSection, children: [
2689
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default66.header, children: [
2706
2690
  /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { size: headingSize, align: "center", subtitle, children: heading }),
2691
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default66.avatarStack, children: [
2692
+ testimonials.slice(0, 5).map((t, i) => {
2693
+ const initials = t.name.split(" ").map((n) => n[0]).join("").toUpperCase();
2694
+ return /* @__PURE__ */ jsxRuntime.jsx(
2695
+ "div",
2696
+ {
2697
+ className: __default66.avatarRing,
2698
+ style: { zIndex: 10 - i },
2699
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2700
+ Avatar,
2701
+ {
2702
+ size: "md",
2703
+ src: t.avatarSrc,
2704
+ initials
2705
+ }
2706
+ )
2707
+ },
2708
+ i
2709
+ );
2710
+ }),
2711
+ testimonials.length > 5 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default66.overflowBadge, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default66.overflowCircle, children: [
2712
+ "+",
2713
+ testimonials.length - 5
2714
+ ] }) })
2715
+ ] }),
2707
2716
  rating && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: __default66.rating, children: [
2708
2717
  rating.value.toFixed(1),
2709
2718
  " \u2605",
package/dist/index.d.cts CHANGED
@@ -557,9 +557,22 @@ interface HeaderProps {
557
557
  navItems?: NavItem[];
558
558
  /** Кнопки/контент справа (CTA). Если undefined — блок не рендерится. */
559
559
  actions?: ReactNode;
560
+ /**
561
+ * Визуальный вариант шапки.
562
+ * - `'pill'` (default, BC) — закруглённый pill с border и blur background, margin вокруг.
563
+ * - `'minimal'` — solid full-width, без border/margin (openai.com-style). При hover на один nav-link остальные становятся серыми.
564
+ */
565
+ variant?: 'pill' | 'minimal';
566
+ /**
567
+ * Цветовая тема. Применяется только при `variant='minimal'` — переопределяет bg/fg
568
+ * локально, независимо от глобальной темы страницы.
569
+ * - `'light'` (default) — белый фон, тёмный текст.
570
+ * - `'dark'` — тёмный фон (`--neutral-900`), светлый текст.
571
+ */
572
+ theme?: 'light' | 'dark';
560
573
  className?: string;
561
574
  }
562
- declare function Header({ logo, navItems, actions, className }: HeaderProps): react_jsx_runtime.JSX.Element;
575
+ declare function Header({ logo, navItems, actions, variant, theme, className, }: HeaderProps): react_jsx_runtime.JSX.Element;
563
576
 
564
577
  interface FooterColumn {
565
578
  title: string;
package/dist/index.d.ts CHANGED
@@ -557,9 +557,22 @@ interface HeaderProps {
557
557
  navItems?: NavItem[];
558
558
  /** Кнопки/контент справа (CTA). Если undefined — блок не рендерится. */
559
559
  actions?: ReactNode;
560
+ /**
561
+ * Визуальный вариант шапки.
562
+ * - `'pill'` (default, BC) — закруглённый pill с border и blur background, margin вокруг.
563
+ * - `'minimal'` — solid full-width, без border/margin (openai.com-style). При hover на один nav-link остальные становятся серыми.
564
+ */
565
+ variant?: 'pill' | 'minimal';
566
+ /**
567
+ * Цветовая тема. Применяется только при `variant='minimal'` — переопределяет bg/fg
568
+ * локально, независимо от глобальной темы страницы.
569
+ * - `'light'` (default) — белый фон, тёмный текст.
570
+ * - `'dark'` — тёмный фон (`--neutral-900`), светлый текст.
571
+ */
572
+ theme?: 'light' | 'dark';
560
573
  className?: string;
561
574
  }
562
- declare function Header({ logo, navItems, actions, className }: HeaderProps): react_jsx_runtime.JSX.Element;
575
+ declare function Header({ logo, navItems, actions, variant, theme, className, }: HeaderProps): react_jsx_runtime.JSX.Element;
563
576
 
564
577
  interface FooterColumn {
565
578
  title: string;
package/dist/index.js CHANGED
@@ -1741,10 +1741,19 @@ function SegmentedControl({
1741
1741
  }
1742
1742
 
1743
1743
  // css-extract-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/Header.module.scss
1744
- var __default44 = { "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" };
1745
- function Header({ logo, navItems = [], actions, className = "" }) {
1744
+ var __default44 = { "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", "minimal": "Header-module_minimal", "dark": "Header-module_dark" };
1745
+ function Header({
1746
+ logo,
1747
+ navItems = [],
1748
+ actions,
1749
+ variant = "pill",
1750
+ theme = "light",
1751
+ className = ""
1752
+ }) {
1746
1753
  const [mobileOpen, setMobileOpen] = useState(false);
1747
- return /* @__PURE__ */ jsxs("header", { className: `${__default44.root}${className ? ` ${className}` : ""}`, children: [
1754
+ const variantClass = variant === "minimal" ? ` ${__default44.minimal}` : "";
1755
+ const themeClass = variant === "minimal" && theme === "dark" ? ` ${__default44.dark}` : "";
1756
+ return /* @__PURE__ */ jsxs("header", { className: `${__default44.root}${variantClass}${themeClass}${className ? ` ${className}` : ""}`, children: [
1748
1757
  /* @__PURE__ */ jsx("div", { className: __default44.container, children: /* @__PURE__ */ jsxs("div", { className: __default44.bar, children: [
1749
1758
  /* @__PURE__ */ jsxs("div", { className: __default44.leftGroup, children: [
1750
1759
  logo,
@@ -2657,7 +2666,7 @@ function PromoDevicesCTA({
2657
2666
  }
2658
2667
 
2659
2668
  // css-extract-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/PromoTestimonials.module.scss
2660
- var __default66 = { "root": "PromoTestimonials-module_root", "rootNoVertical": "PromoTestimonials-module_rootNoVertical", "wrapper": "PromoTestimonials-module_wrapper", "avatarSection": "PromoTestimonials-module_avatarSection", "avatarStack": "PromoTestimonials-module_avatarStack", "avatarRing": "PromoTestimonials-module_avatarRing", "overflowBadge": "PromoTestimonials-module_overflowBadge", "overflowCircle": "PromoTestimonials-module_overflowCircle", "headingSection": "PromoTestimonials-module_headingSection", "rating": "PromoTestimonials-module_rating", "cardsSection": "PromoTestimonials-module_cardsSection", "cardsGrid": "PromoTestimonials-module_cardsGrid", "card": "PromoTestimonials-module_card", "quote": "PromoTestimonials-module_quote", "author": "PromoTestimonials-module_author", "authorInfo": "PromoTestimonials-module_authorInfo", "authorName": "PromoTestimonials-module_authorName", "authorRole": "PromoTestimonials-module_authorRole", "mediaSection": "PromoTestimonials-module_mediaSection", "mediaBox": "PromoTestimonials-module_mediaBox" };
2669
+ var __default66 = { "root": "PromoTestimonials-module_root", "rootNoVertical": "PromoTestimonials-module_rootNoVertical", "wrapper": "PromoTestimonials-module_wrapper", "header": "PromoTestimonials-module_header", "avatarStack": "PromoTestimonials-module_avatarStack", "avatarRing": "PromoTestimonials-module_avatarRing", "overflowBadge": "PromoTestimonials-module_overflowBadge", "overflowCircle": "PromoTestimonials-module_overflowCircle", "rating": "PromoTestimonials-module_rating", "cardsSection": "PromoTestimonials-module_cardsSection", "cardsGrid": "PromoTestimonials-module_cardsGrid", "card": "PromoTestimonials-module_card", "quote": "PromoTestimonials-module_quote", "author": "PromoTestimonials-module_author", "authorInfo": "PromoTestimonials-module_authorInfo", "authorName": "PromoTestimonials-module_authorName", "authorRole": "PromoTestimonials-module_authorRole", "mediaSection": "PromoTestimonials-module_mediaSection", "mediaBox": "PromoTestimonials-module_mediaBox" };
2661
2670
  function PromoTestimonials({
2662
2671
  heading,
2663
2672
  subtitle,
@@ -2671,33 +2680,33 @@ function PromoTestimonials({
2671
2680
  const noVerticalClass = verticalPadding === "none" ? ` ${__default66.rootNoVertical}` : "";
2672
2681
  const ratingCountLabel = rating && rating.count !== void 0 && rating.count > 0 ? rating.countLabel ? rating.countLabel(rating.count) : String(rating.count) : null;
2673
2682
  return /* @__PURE__ */ jsx("section", { className: `${__default66.root}${noVerticalClass}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxs("div", { className: __default66.wrapper, children: [
2674
- /* @__PURE__ */ jsx("div", { className: __default66.avatarSection, children: /* @__PURE__ */ jsxs("div", { className: __default66.avatarStack, children: [
2675
- testimonials.slice(0, 5).map((t, i) => {
2676
- const initials = t.name.split(" ").map((n) => n[0]).join("").toUpperCase();
2677
- return /* @__PURE__ */ jsx(
2678
- "div",
2679
- {
2680
- className: __default66.avatarRing,
2681
- style: { zIndex: 10 - i },
2682
- children: /* @__PURE__ */ jsx(
2683
- Avatar,
2684
- {
2685
- size: "md",
2686
- src: t.avatarSrc,
2687
- initials
2688
- }
2689
- )
2690
- },
2691
- i
2692
- );
2693
- }),
2694
- testimonials.length > 5 && /* @__PURE__ */ jsx("div", { className: __default66.overflowBadge, children: /* @__PURE__ */ jsxs("div", { className: __default66.overflowCircle, children: [
2695
- "+",
2696
- testimonials.length - 5
2697
- ] }) })
2698
- ] }) }),
2699
- /* @__PURE__ */ jsxs("div", { className: __default66.headingSection, children: [
2683
+ /* @__PURE__ */ jsxs("div", { className: __default66.header, children: [
2700
2684
  /* @__PURE__ */ jsx(SectionHeading, { size: headingSize, align: "center", subtitle, children: heading }),
2685
+ /* @__PURE__ */ jsxs("div", { className: __default66.avatarStack, children: [
2686
+ testimonials.slice(0, 5).map((t, i) => {
2687
+ const initials = t.name.split(" ").map((n) => n[0]).join("").toUpperCase();
2688
+ return /* @__PURE__ */ jsx(
2689
+ "div",
2690
+ {
2691
+ className: __default66.avatarRing,
2692
+ style: { zIndex: 10 - i },
2693
+ children: /* @__PURE__ */ jsx(
2694
+ Avatar,
2695
+ {
2696
+ size: "md",
2697
+ src: t.avatarSrc,
2698
+ initials
2699
+ }
2700
+ )
2701
+ },
2702
+ i
2703
+ );
2704
+ }),
2705
+ testimonials.length > 5 && /* @__PURE__ */ jsx("div", { className: __default66.overflowBadge, children: /* @__PURE__ */ jsxs("div", { className: __default66.overflowCircle, children: [
2706
+ "+",
2707
+ testimonials.length - 5
2708
+ ] }) })
2709
+ ] }),
2701
2710
  rating && /* @__PURE__ */ jsxs("p", { className: __default66.rating, children: [
2702
2711
  rating.value.toFixed(1),
2703
2712
  " \u2605",