@dmitriikapustin/ui 0.2.7 → 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 (5) hide show
  1. package/dist/index.cjs +82 -99
  2. package/dist/index.d.cts +38 -7
  3. package/dist/index.d.ts +38 -7
  4. package/dist/index.js +82 -99
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -915,40 +915,61 @@ function IconButton(_a) {
915
915
  }
916
916
 
917
917
  // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/Logo.module.scss
918
- __styleInject(`.Logo-module_short {
919
- width: 19px;
920
- height: 20px;
921
- }
922
-
923
- .Logo-module_full {
924
- height: 20px;
925
- width: 130px;
926
- }
927
-
928
- .Logo-module_third {
929
- display: flex;
918
+ __styleInject(`.Logo-module_root {
919
+ display: inline-flex;
930
920
  align-items: center;
931
921
  gap: 0.375rem;
932
922
  }
933
923
 
934
- .Logo-module_thirdText {
935
- font-size: 13px;
936
- font-weight: 500;
924
+ .Logo-module_image {
925
+ display: block;
926
+ }
927
+
928
+ .Logo-module_text {
929
+ font-size: 16px;
930
+ font-weight: 600;
937
931
  color: var(--fg);
938
932
  letter-spacing: -0.25px;
933
+ line-height: 1;
934
+ }
935
+
936
+ .Logo-module_accent {
937
+ color: var(--brand-primary);
939
938
  }`);
940
- var __default11 = { "short": "Logo-module_short", "full": "Logo-module_full", "third": "Logo-module_third", "thirdText": "Logo-module_thirdText" };
941
- function Logo({ version = "short", className = "" }) {
942
- if (version === "short") {
943
- 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 }) });
944
- }
945
- if (version === "third") {
946
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${__default11.third}${className ? ` ${className}` : ""}`, children: [
947
- /* @__PURE__ */ jsxRuntime.jsx("img", { className: "logo-img", src: "/assets/logos/logo-icon.svg", alt: "", width: 20, height: 20 }),
948
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default11.thirdText, children: "aiacade.me" })
949
- ] });
939
+ var __default11 = { "root": "Logo-module_root", "image": "Logo-module_image", "text": "Logo-module_text", "accent": "Logo-module_accent" };
940
+ function Logo({
941
+ children,
942
+ src,
943
+ alt = "",
944
+ width,
945
+ height,
946
+ text,
947
+ accent,
948
+ className = ""
949
+ }) {
950
+ const rootClass = `${__default11.root}${className ? ` ${className}` : ""}`;
951
+ if (children) {
952
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children });
953
+ }
954
+ if (src) {
955
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: __default11.image, src, alt, width, height }) });
956
+ }
957
+ if (text) {
958
+ const accentText = accent != null ? accent : text.charAt(0);
959
+ const idx = accent ? text.indexOf(accent) : 0;
960
+ if (idx >= 0 && accentText) {
961
+ const before = text.slice(0, idx);
962
+ const middle = text.slice(idx, idx + accentText.length);
963
+ const after = text.slice(idx + accentText.length);
964
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default11.text, children: [
965
+ before,
966
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default11.accent, children: middle }),
967
+ after
968
+ ] }) });
969
+ }
970
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default11.text, children: text }) });
950
971
  }
951
- 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 }) });
972
+ return null;
952
973
  }
953
974
 
954
975
  // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/StatBadge.module.scss
@@ -3540,16 +3561,13 @@ __styleInject(`.Header-module_root {
3540
3561
  padding-top: 1rem;
3541
3562
  border-top: 1px solid var(--border-color);
3542
3563
  }`);
3543
- 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" };
3544
- function Header({ logo, navItems = [], className = "" }) {
3564
+ 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" };
3565
+ function Header({ logo, navItems = [], actions, className = "" }) {
3545
3566
  const [mobileOpen, setMobileOpen] = react.useState(false);
3546
3567
  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `${__default42.root}${className ? ` ${className}` : ""}`, children: [
3547
3568
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.container, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.bar, children: [
3548
3569
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.leftGroup, children: [
3549
- logo || /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default42.logoFallback, children: [
3550
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default42.logoBrand, children: "K" }),
3551
- "apustin"
3552
- ] }),
3570
+ logo,
3553
3571
  /* @__PURE__ */ jsxRuntime.jsx("nav", { className: __default42.desktopNav, children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
3554
3572
  "a",
3555
3573
  {
@@ -3560,10 +3578,7 @@ function Header({ logo, navItems = [], className = "" }) {
3560
3578
  item.label
3561
3579
  )) })
3562
3580
  ] }),
3563
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.desktopActions, children: [
3564
- /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
3565
- /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", children: "Get started" })
3566
- ] }),
3581
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.desktopActions, children: actions }),
3567
3582
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.mobileToggle, children: /* @__PURE__ */ jsxRuntime.jsx(
3568
3583
  IconButton,
3569
3584
  {
@@ -3584,10 +3599,7 @@ function Header({ logo, navItems = [], className = "" }) {
3584
3599
  },
3585
3600
  item.label
3586
3601
  )) }),
3587
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default42.mobileActions, children: [
3588
- /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
3589
- /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", children: "Get started" })
3590
- ] })
3602
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default42.mobileActions, children: actions })
3591
3603
  ] })
3592
3604
  ] });
3593
3605
  }
@@ -3706,72 +3718,34 @@ __styleInject(`.Footer-module_root {
3706
3718
  .Footer-module_socialLink:hover {
3707
3719
  color: var(--fg);
3708
3720
  }`);
3709
- 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" };
3710
- var defaultColumns = [
3711
- {
3712
- title: "Product",
3713
- links: [
3714
- { label: "Components", href: "#" },
3715
- { label: "Templates", href: "#" },
3716
- { label: "Pricing", href: "#" },
3717
- { label: "Changelog", href: "#" }
3718
- ]
3719
- },
3720
- {
3721
- title: "Resources",
3722
- links: [
3723
- { label: "Documentation", href: "#" },
3724
- { label: "Guides", href: "#" },
3725
- { label: "API Reference", href: "#" },
3726
- { label: "Blog", href: "#" }
3727
- ]
3728
- },
3729
- {
3730
- title: "Company",
3731
- links: [
3732
- { label: "About", href: "#" },
3733
- { label: "Careers", href: "#" },
3734
- { label: "Contact", href: "#" },
3735
- { label: "Legal", href: "#" }
3736
- ]
3737
- }
3738
- ];
3739
- function Footer({ columns = defaultColumns, className = "" }) {
3721
+ 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" };
3722
+ function Footer({
3723
+ brand,
3724
+ columns,
3725
+ socials,
3726
+ copyright,
3727
+ className = ""
3728
+ }) {
3729
+ const hasGrid = !!brand || columns && columns.length > 0;
3730
+ const hasBottom = !!copyright || socials && socials.length > 0;
3740
3731
  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: `${__default43.root}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.container, children: [
3741
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.grid, children: [
3742
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3743
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default43.brand, children: [
3744
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default43.brandAccent, children: "K" }),
3745
- "apustin"
3746
- ] }),
3747
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: __default43.tagline, children: "A modern design system for building beautiful interfaces." })
3748
- ] }),
3749
- columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3732
+ hasGrid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.grid, children: [
3733
+ brand && /* @__PURE__ */ jsxRuntime.jsx("div", { children: brand }),
3734
+ columns == null ? void 0 : columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3750
3735
  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: __default43.columnTitle, children: col.title }),
3751
- /* @__PURE__ */ jsxRuntime.jsx("ul", { className: __default43.linkList, children: col.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
3752
- "a",
3753
- {
3754
- href: link.href,
3755
- className: __default43.link,
3756
- children: link.label
3757
- }
3758
- ) }, link.label)) })
3736
+ /* @__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)) })
3759
3737
  ] }, col.title))
3760
3738
  ] }),
3761
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.bottom, children: [
3762
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: __default43.copyright, children: [
3763
- "\xA9 ",
3764
- (/* @__PURE__ */ new Date()).getFullYear(),
3765
- " Kapustin Team. All rights reserved."
3766
- ] }),
3767
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default43.socials, children: ["Twitter", "GitHub", "Discord"].map((social) => /* @__PURE__ */ jsxRuntime.jsx(
3739
+ hasBottom && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default43.bottom, children: [
3740
+ copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { className: __default43.copyright, children: copyright }),
3741
+ socials && socials.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default43.socials, children: socials.map((social) => /* @__PURE__ */ jsxRuntime.jsx(
3768
3742
  "a",
3769
3743
  {
3770
- href: "#",
3744
+ href: social.href,
3771
3745
  className: __default43.socialLink,
3772
- children: social
3746
+ children: social.label
3773
3747
  },
3774
- social
3748
+ social.label
3775
3749
  )) })
3776
3750
  ] })
3777
3751
  ] }) });
@@ -3865,6 +3839,7 @@ function PricingCard({
3865
3839
  features,
3866
3840
  highlighted = false,
3867
3841
  badge,
3842
+ cta,
3868
3843
  className = ""
3869
3844
  }) {
3870
3845
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3885,7 +3860,15 @@ function PricingCard({
3885
3860
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default44.featureIcon, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 16 }) }),
3886
3861
  feature
3887
3862
  ] }, i)) }),
3888
- /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: highlighted ? "primary" : "outline", className: __default44.cta, children: "Get started" })
3863
+ cta && /* @__PURE__ */ jsxRuntime.jsx(
3864
+ Button,
3865
+ {
3866
+ variant: highlighted ? "primary" : "outline",
3867
+ className: __default44.cta,
3868
+ onClick: cta.onClick,
3869
+ children: cta.label
3870
+ }
3871
+ )
3889
3872
  ]
3890
3873
  }
3891
3874
  );
package/dist/index.d.cts CHANGED
@@ -89,12 +89,24 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
89
89
  }
90
90
  declare function IconButton({ icon, variant, className, disabled, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
91
91
 
92
- type LogoVersion = 'short' | 'full' | 'third';
93
92
  interface LogoProps {
94
- version?: LogoVersion;
93
+ /** Полный override через произвольный JSX. Имеет приоритет над text/src. */
94
+ children?: ReactNode;
95
+ /** URL картинки-логотипа. */
96
+ src?: string;
97
+ /** alt для картинки. */
98
+ alt?: string;
99
+ /** Ширина картинки. */
100
+ width?: number;
101
+ /** Высота картинки. */
102
+ height?: number;
103
+ /** Текстовый brand-name. */
104
+ text?: string;
105
+ /** Подстрока внутри text, выделяемая accent-цветом (первое вхождение). По умолчанию — первая буква text. */
106
+ accent?: string;
95
107
  className?: string;
96
108
  }
97
- declare function Logo({ version, className }: LogoProps): react_jsx_runtime.JSX.Element;
109
+ declare function Logo({ children, src, alt, width, height, text, accent, className, }: LogoProps): react_jsx_runtime.JSX.Element | null;
98
110
 
99
111
  interface StatBadgeProps {
100
112
  value: string;
@@ -440,11 +452,13 @@ interface NavItem {
440
452
  href: string;
441
453
  }
442
454
  interface HeaderProps {
443
- logo?: React.ReactNode;
455
+ logo?: ReactNode;
444
456
  navItems?: NavItem[];
457
+ /** Кнопки/контент справа (CTA). Если undefined — блок не рендерится. */
458
+ actions?: ReactNode;
445
459
  className?: string;
446
460
  }
447
- declare function Header({ logo, navItems, className }: HeaderProps): react_jsx_runtime.JSX.Element;
461
+ declare function Header({ logo, navItems, actions, className }: HeaderProps): react_jsx_runtime.JSX.Element;
448
462
 
449
463
  interface FooterColumn {
450
464
  title: string;
@@ -453,11 +467,22 @@ interface FooterColumn {
453
467
  href: string;
454
468
  }[];
455
469
  }
470
+ interface FooterSocial {
471
+ label: string;
472
+ href: string;
473
+ }
456
474
  interface FooterProps {
475
+ /** Brand-cell слева в grid. Если undefined — ячейка не рендерится. */
476
+ brand?: ReactNode;
477
+ /** Колонки навигации. */
457
478
  columns?: FooterColumn[];
479
+ /** Соц-ссылки в нижнем баре. Если undefined / [] — не рендерится. */
480
+ socials?: FooterSocial[];
481
+ /** Copyright-строка. Если undefined / null — не рендерится. */
482
+ copyright?: string | null;
458
483
  className?: string;
459
484
  }
460
- declare function Footer({ columns, className }: FooterProps): react_jsx_runtime.JSX.Element;
485
+ declare function Footer({ brand, columns, socials, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
461
486
 
462
487
  interface PricingCardProps {
463
488
  plan: string;
@@ -467,9 +492,15 @@ interface PricingCardProps {
467
492
  features: string[];
468
493
  highlighted?: boolean;
469
494
  badge?: string;
495
+ /** CTA-кнопка. Если undefined — кнопка не рендерится. */
496
+ cta?: {
497
+ label: string;
498
+ href?: string;
499
+ onClick?: () => void;
500
+ };
470
501
  className?: string;
471
502
  }
472
- declare function PricingCard({ plan, price, period, description, features, highlighted, badge, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
503
+ declare function PricingCard({ plan, price, period, description, features, highlighted, badge, cta, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
473
504
 
474
505
  interface TestimonialCardProps {
475
506
  quote: string;
package/dist/index.d.ts CHANGED
@@ -89,12 +89,24 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
89
89
  }
90
90
  declare function IconButton({ icon, variant, className, disabled, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
91
91
 
92
- type LogoVersion = 'short' | 'full' | 'third';
93
92
  interface LogoProps {
94
- version?: LogoVersion;
93
+ /** Полный override через произвольный JSX. Имеет приоритет над text/src. */
94
+ children?: ReactNode;
95
+ /** URL картинки-логотипа. */
96
+ src?: string;
97
+ /** alt для картинки. */
98
+ alt?: string;
99
+ /** Ширина картинки. */
100
+ width?: number;
101
+ /** Высота картинки. */
102
+ height?: number;
103
+ /** Текстовый brand-name. */
104
+ text?: string;
105
+ /** Подстрока внутри text, выделяемая accent-цветом (первое вхождение). По умолчанию — первая буква text. */
106
+ accent?: string;
95
107
  className?: string;
96
108
  }
97
- declare function Logo({ version, className }: LogoProps): react_jsx_runtime.JSX.Element;
109
+ declare function Logo({ children, src, alt, width, height, text, accent, className, }: LogoProps): react_jsx_runtime.JSX.Element | null;
98
110
 
99
111
  interface StatBadgeProps {
100
112
  value: string;
@@ -440,11 +452,13 @@ interface NavItem {
440
452
  href: string;
441
453
  }
442
454
  interface HeaderProps {
443
- logo?: React.ReactNode;
455
+ logo?: ReactNode;
444
456
  navItems?: NavItem[];
457
+ /** Кнопки/контент справа (CTA). Если undefined — блок не рендерится. */
458
+ actions?: ReactNode;
445
459
  className?: string;
446
460
  }
447
- declare function Header({ logo, navItems, className }: HeaderProps): react_jsx_runtime.JSX.Element;
461
+ declare function Header({ logo, navItems, actions, className }: HeaderProps): react_jsx_runtime.JSX.Element;
448
462
 
449
463
  interface FooterColumn {
450
464
  title: string;
@@ -453,11 +467,22 @@ interface FooterColumn {
453
467
  href: string;
454
468
  }[];
455
469
  }
470
+ interface FooterSocial {
471
+ label: string;
472
+ href: string;
473
+ }
456
474
  interface FooterProps {
475
+ /** Brand-cell слева в grid. Если undefined — ячейка не рендерится. */
476
+ brand?: ReactNode;
477
+ /** Колонки навигации. */
457
478
  columns?: FooterColumn[];
479
+ /** Соц-ссылки в нижнем баре. Если undefined / [] — не рендерится. */
480
+ socials?: FooterSocial[];
481
+ /** Copyright-строка. Если undefined / null — не рендерится. */
482
+ copyright?: string | null;
458
483
  className?: string;
459
484
  }
460
- declare function Footer({ columns, className }: FooterProps): react_jsx_runtime.JSX.Element;
485
+ declare function Footer({ brand, columns, socials, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
461
486
 
462
487
  interface PricingCardProps {
463
488
  plan: string;
@@ -467,9 +492,15 @@ interface PricingCardProps {
467
492
  features: string[];
468
493
  highlighted?: boolean;
469
494
  badge?: string;
495
+ /** CTA-кнопка. Если undefined — кнопка не рендерится. */
496
+ cta?: {
497
+ label: string;
498
+ href?: string;
499
+ onClick?: () => void;
500
+ };
470
501
  className?: string;
471
502
  }
472
- declare function PricingCard({ plan, price, period, description, features, highlighted, badge, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
503
+ declare function PricingCard({ plan, price, period, description, features, highlighted, badge, cta, className, }: PricingCardProps): react_jsx_runtime.JSX.Element;
473
504
 
474
505
  interface TestimonialCardProps {
475
506
  quote: string;
package/dist/index.js CHANGED
@@ -909,40 +909,61 @@ function IconButton(_a) {
909
909
  }
910
910
 
911
911
  // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/Logo.module.scss
912
- __styleInject(`.Logo-module_short {
913
- width: 19px;
914
- height: 20px;
915
- }
916
-
917
- .Logo-module_full {
918
- height: 20px;
919
- width: 130px;
920
- }
921
-
922
- .Logo-module_third {
923
- display: flex;
912
+ __styleInject(`.Logo-module_root {
913
+ display: inline-flex;
924
914
  align-items: center;
925
915
  gap: 0.375rem;
926
916
  }
927
917
 
928
- .Logo-module_thirdText {
929
- font-size: 13px;
930
- font-weight: 500;
918
+ .Logo-module_image {
919
+ display: block;
920
+ }
921
+
922
+ .Logo-module_text {
923
+ font-size: 16px;
924
+ font-weight: 600;
931
925
  color: var(--fg);
932
926
  letter-spacing: -0.25px;
927
+ line-height: 1;
928
+ }
929
+
930
+ .Logo-module_accent {
931
+ color: var(--brand-primary);
933
932
  }`);
934
- var __default11 = { "short": "Logo-module_short", "full": "Logo-module_full", "third": "Logo-module_third", "thirdText": "Logo-module_thirdText" };
935
- function Logo({ version = "short", className = "" }) {
936
- if (version === "short") {
937
- 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 }) });
938
- }
939
- if (version === "third") {
940
- return /* @__PURE__ */ jsxs("div", { className: `${__default11.third}${className ? ` ${className}` : ""}`, children: [
941
- /* @__PURE__ */ jsx("img", { className: "logo-img", src: "/assets/logos/logo-icon.svg", alt: "", width: 20, height: 20 }),
942
- /* @__PURE__ */ jsx("span", { className: __default11.thirdText, children: "aiacade.me" })
943
- ] });
933
+ var __default11 = { "root": "Logo-module_root", "image": "Logo-module_image", "text": "Logo-module_text", "accent": "Logo-module_accent" };
934
+ function Logo({
935
+ children,
936
+ src,
937
+ alt = "",
938
+ width,
939
+ height,
940
+ text,
941
+ accent,
942
+ className = ""
943
+ }) {
944
+ const rootClass = `${__default11.root}${className ? ` ${className}` : ""}`;
945
+ if (children) {
946
+ return /* @__PURE__ */ jsx("span", { className: rootClass, children });
947
+ }
948
+ if (src) {
949
+ return /* @__PURE__ */ jsx("span", { className: rootClass, children: /* @__PURE__ */ jsx("img", { className: __default11.image, src, alt, width, height }) });
950
+ }
951
+ if (text) {
952
+ const accentText = accent != null ? accent : text.charAt(0);
953
+ const idx = accent ? text.indexOf(accent) : 0;
954
+ if (idx >= 0 && accentText) {
955
+ const before = text.slice(0, idx);
956
+ const middle = text.slice(idx, idx + accentText.length);
957
+ const after = text.slice(idx + accentText.length);
958
+ return /* @__PURE__ */ jsx("span", { className: rootClass, children: /* @__PURE__ */ jsxs("span", { className: __default11.text, children: [
959
+ before,
960
+ /* @__PURE__ */ jsx("span", { className: __default11.accent, children: middle }),
961
+ after
962
+ ] }) });
963
+ }
964
+ return /* @__PURE__ */ jsx("span", { className: rootClass, children: /* @__PURE__ */ jsx("span", { className: __default11.text, children: text }) });
944
965
  }
945
- 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 }) });
966
+ return null;
946
967
  }
947
968
 
948
969
  // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/StatBadge.module.scss
@@ -3534,16 +3555,13 @@ __styleInject(`.Header-module_root {
3534
3555
  padding-top: 1rem;
3535
3556
  border-top: 1px solid var(--border-color);
3536
3557
  }`);
3537
- 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" };
3538
- function Header({ logo, navItems = [], className = "" }) {
3558
+ 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" };
3559
+ function Header({ logo, navItems = [], actions, className = "" }) {
3539
3560
  const [mobileOpen, setMobileOpen] = useState(false);
3540
3561
  return /* @__PURE__ */ jsxs("header", { className: `${__default42.root}${className ? ` ${className}` : ""}`, children: [
3541
3562
  /* @__PURE__ */ jsx("div", { className: __default42.container, children: /* @__PURE__ */ jsxs("div", { className: __default42.bar, children: [
3542
3563
  /* @__PURE__ */ jsxs("div", { className: __default42.leftGroup, children: [
3543
- logo || /* @__PURE__ */ jsxs("span", { className: __default42.logoFallback, children: [
3544
- /* @__PURE__ */ jsx("span", { className: __default42.logoBrand, children: "K" }),
3545
- "apustin"
3546
- ] }),
3564
+ logo,
3547
3565
  /* @__PURE__ */ jsx("nav", { className: __default42.desktopNav, children: navItems.map((item) => /* @__PURE__ */ jsx(
3548
3566
  "a",
3549
3567
  {
@@ -3554,10 +3572,7 @@ function Header({ logo, navItems = [], className = "" }) {
3554
3572
  item.label
3555
3573
  )) })
3556
3574
  ] }),
3557
- /* @__PURE__ */ jsxs("div", { className: __default42.desktopActions, children: [
3558
- /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
3559
- /* @__PURE__ */ jsx(Button, { size: "md", children: "Get started" })
3560
- ] }),
3575
+ actions && /* @__PURE__ */ jsx("div", { className: __default42.desktopActions, children: actions }),
3561
3576
  /* @__PURE__ */ jsx("div", { className: __default42.mobileToggle, children: /* @__PURE__ */ jsx(
3562
3577
  IconButton,
3563
3578
  {
@@ -3578,10 +3593,7 @@ function Header({ logo, navItems = [], className = "" }) {
3578
3593
  },
3579
3594
  item.label
3580
3595
  )) }),
3581
- /* @__PURE__ */ jsxs("div", { className: __default42.mobileActions, children: [
3582
- /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", children: "Sign in" }),
3583
- /* @__PURE__ */ jsx(Button, { size: "md", children: "Get started" })
3584
- ] })
3596
+ actions && /* @__PURE__ */ jsx("div", { className: __default42.mobileActions, children: actions })
3585
3597
  ] })
3586
3598
  ] });
3587
3599
  }
@@ -3700,72 +3712,34 @@ __styleInject(`.Footer-module_root {
3700
3712
  .Footer-module_socialLink:hover {
3701
3713
  color: var(--fg);
3702
3714
  }`);
3703
- 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" };
3704
- var defaultColumns = [
3705
- {
3706
- title: "Product",
3707
- links: [
3708
- { label: "Components", href: "#" },
3709
- { label: "Templates", href: "#" },
3710
- { label: "Pricing", href: "#" },
3711
- { label: "Changelog", href: "#" }
3712
- ]
3713
- },
3714
- {
3715
- title: "Resources",
3716
- links: [
3717
- { label: "Documentation", href: "#" },
3718
- { label: "Guides", href: "#" },
3719
- { label: "API Reference", href: "#" },
3720
- { label: "Blog", href: "#" }
3721
- ]
3722
- },
3723
- {
3724
- title: "Company",
3725
- links: [
3726
- { label: "About", href: "#" },
3727
- { label: "Careers", href: "#" },
3728
- { label: "Contact", href: "#" },
3729
- { label: "Legal", href: "#" }
3730
- ]
3731
- }
3732
- ];
3733
- function Footer({ columns = defaultColumns, className = "" }) {
3715
+ 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" };
3716
+ function Footer({
3717
+ brand,
3718
+ columns,
3719
+ socials,
3720
+ copyright,
3721
+ className = ""
3722
+ }) {
3723
+ const hasGrid = !!brand || columns && columns.length > 0;
3724
+ const hasBottom = !!copyright || socials && socials.length > 0;
3734
3725
  return /* @__PURE__ */ jsx("footer", { className: `${__default43.root}${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxs("div", { className: __default43.container, children: [
3735
- /* @__PURE__ */ jsxs("div", { className: __default43.grid, children: [
3736
- /* @__PURE__ */ jsxs("div", { children: [
3737
- /* @__PURE__ */ jsxs("span", { className: __default43.brand, children: [
3738
- /* @__PURE__ */ jsx("span", { className: __default43.brandAccent, children: "K" }),
3739
- "apustin"
3740
- ] }),
3741
- /* @__PURE__ */ jsx("p", { className: __default43.tagline, children: "A modern design system for building beautiful interfaces." })
3742
- ] }),
3743
- columns.map((col) => /* @__PURE__ */ jsxs("div", { children: [
3726
+ hasGrid && /* @__PURE__ */ jsxs("div", { className: __default43.grid, children: [
3727
+ brand && /* @__PURE__ */ jsx("div", { children: brand }),
3728
+ columns == null ? void 0 : columns.map((col) => /* @__PURE__ */ jsxs("div", { children: [
3744
3729
  /* @__PURE__ */ jsx("h4", { className: __default43.columnTitle, children: col.title }),
3745
- /* @__PURE__ */ jsx("ul", { className: __default43.linkList, children: col.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
3746
- "a",
3747
- {
3748
- href: link.href,
3749
- className: __default43.link,
3750
- children: link.label
3751
- }
3752
- ) }, link.label)) })
3730
+ /* @__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)) })
3753
3731
  ] }, col.title))
3754
3732
  ] }),
3755
- /* @__PURE__ */ jsxs("div", { className: __default43.bottom, children: [
3756
- /* @__PURE__ */ jsxs("p", { className: __default43.copyright, children: [
3757
- "\xA9 ",
3758
- (/* @__PURE__ */ new Date()).getFullYear(),
3759
- " Kapustin Team. All rights reserved."
3760
- ] }),
3761
- /* @__PURE__ */ jsx("div", { className: __default43.socials, children: ["Twitter", "GitHub", "Discord"].map((social) => /* @__PURE__ */ jsx(
3733
+ hasBottom && /* @__PURE__ */ jsxs("div", { className: __default43.bottom, children: [
3734
+ copyright && /* @__PURE__ */ jsx("p", { className: __default43.copyright, children: copyright }),
3735
+ socials && socials.length > 0 && /* @__PURE__ */ jsx("div", { className: __default43.socials, children: socials.map((social) => /* @__PURE__ */ jsx(
3762
3736
  "a",
3763
3737
  {
3764
- href: "#",
3738
+ href: social.href,
3765
3739
  className: __default43.socialLink,
3766
- children: social
3740
+ children: social.label
3767
3741
  },
3768
- social
3742
+ social.label
3769
3743
  )) })
3770
3744
  ] })
3771
3745
  ] }) });
@@ -3859,6 +3833,7 @@ function PricingCard({
3859
3833
  features,
3860
3834
  highlighted = false,
3861
3835
  badge,
3836
+ cta,
3862
3837
  className = ""
3863
3838
  }) {
3864
3839
  return /* @__PURE__ */ jsxs(
@@ -3879,7 +3854,15 @@ function PricingCard({
3879
3854
  /* @__PURE__ */ jsx("span", { className: __default44.featureIcon, children: /* @__PURE__ */ jsx(IconlyCheck, { size: 16 }) }),
3880
3855
  feature
3881
3856
  ] }, i)) }),
3882
- /* @__PURE__ */ jsx(Button, { variant: highlighted ? "primary" : "outline", className: __default44.cta, children: "Get started" })
3857
+ cta && /* @__PURE__ */ jsx(
3858
+ Button,
3859
+ {
3860
+ variant: highlighted ? "primary" : "outline",
3861
+ className: __default44.cta,
3862
+ onClick: cta.onClick,
3863
+ children: cta.label
3864
+ }
3865
+ )
3883
3866
  ]
3884
3867
  }
3885
3868
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dmitriikapustin/ui",
3
- "version": "0.2.7",
3
+ "version": "0.2.8",
4
4
  "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
5
5
  "author": "Kapustin Team",
6
6
  "license": "MIT",