@ugurdemirel/landcraft 0.1.22 → 0.1.24

package/dist/es/components/Stats/variants/Stacked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stacked.js","sources":["../../../../../src/components/Stats/variants/Stacked.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, gridCols, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface StackedProps extends HTMLAttributes<HTMLDListElement> {\n  stats: Stat[];\n  columns?: 2 | 3 | 4;\n}\n\n/** stacked — a ruled ledger: label on the rule, oversized numeral, typed meta. */\nexport const StatsStacked = forwardRef<HTMLDListElement, StackedProps>(\n  ({ className, stats, columns = 4, ...props }, ref) => (\n    <dl\n      ref={ref}\n      className={cn(\"grid grid-cols-1 gap-x-10 gap-y-10\", gridCols[columns], className)}\n      {...props}\n    >\n      {stats.map((stat) => (\n        <div key={stat.label} className=\"border-t border-border pt-5\">\n          <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n          <dd\n            className={cn(\n              valueBase,\n              \"mt-3 text-5xl sm:text-6xl\",\n              stat.accent ? \"text-primary\" : undefined,\n            )}\n          >\n            {stat.value}\n            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n          </dd>\n          {typeof stat.delta === \"number\" || stat.sub ? (\n            <div className=\"mt-4 flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n              {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n              {stat.sub ? (\n                <p className=\"text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      ))}\n    </dl>\n  ),\n);\nStatsStacked.displayName = \"StatsStacked\";\n"],"names":["StatsStacked","forwardRef","className","stats","columns","props","ref","jsx","cn","gridCols","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":";;;;AAWO,MAAMA,IAAeC;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,IAAU,GAAG,GAAGC,EAAA,GAASC,MAC5C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,sCAAsCC,EAASL,CAAO,GAAGF,CAAS;AAAA,MAC/E,GAAGG;AAAA,MAEH,YAAM,IAAI,CAACK,MACV,gBAAAC,EAAC,OAAA,EAAqB,WAAU,+BAC9B,UAAA;AAAA,QAAA,gBAAAJ,EAAC,MAAA,EAAG,WAAU,2CAA2C,UAAAG,EAAK,OAAM;AAAA,QACpE,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWH;AAAA,cACTI;AAAA,cACA;AAAA,cACAF,EAAK,SAAS,iBAAiB;AAAA,YAAA;AAAA,YAGhC,UAAA;AAAA,cAAAA,EAAK;AAAA,cACLA,EAAK,SAAS,gBAAAH,EAAC,QAAA,EAAK,WAAWM,GAAa,UAAAH,EAAK,QAAO,IAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpE,OAAOA,EAAK,SAAU,YAAYA,EAAK,MACtC,gBAAAC,EAAC,OAAA,EAAI,WAAU,sDACZ,UAAA;AAAA,UAAA,OAAOD,EAAK,SAAU,WAAW,gBAAAH,EAACO,KAAU,OAAOJ,EAAK,OAAO,IAAK;AAAA,UACpEA,EAAK,MACJ,gBAAAH,EAAC,KAAA,EAAE,WAAU,+CAA+C,UAAAG,EAAK,KAAI,IACnE;AAAA,QAAA,EAAA,CACN,IACE;AAAA,MAAA,EAAA,GAnBIA,EAAK,KAoBf,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AACAV,EAAa,cAAc;"}

package/dist/es/components/Stats/variants/Ticker.js

@@ -1,29 +1,50 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
+import { jsx as l, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
 import { cn as d } from "../../../utils/cn.js";
-import { DeltaBadge as f, suffixBase as n, valueBase as t } from "../parts.js";
-const x = c(
-  ({ className: a, stats: o, ...i }, s) => /* @__PURE__ */ r("dl", { ref: s, className: d("flex w-full items-stretch overflow-x-auto rounded-2xl border border-border bg-surface", a), ...i, children: o.map((e, m) => /* @__PURE__ */ l(
-    "div",
+import { suffixBase as f, valueBase as o, DeltaMark as c } from "../parts.js";
+const n = x(
+  ({ className: i, stats: a, ...m }, s) => /* @__PURE__ */ l(
+    "dl",
     {
-      className: d("flex min-w-[11rem] flex-1 flex-col gap-3 p-6", m > 0 && "border-l border-border"),
-      children: [
-        /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ r("dt", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: e.label }),
-          typeof e.delta == "number" ? /* @__PURE__ */ r(f, { delta: e.delta }) : null
-        ] }),
-        /* @__PURE__ */ l("dd", { className: d(t, "text-3xl", e.accent ? "text-primary" : void 0), children: [
-          e.value,
-          e.suffix ? /* @__PURE__ */ r("span", { className: n, children: e.suffix }) : null
-        ] }),
-        e.sub ? /* @__PURE__ */ r("p", { className: "text-[13px] leading-5 text-muted-foreground", children: e.sub }) : null
-      ]
-    },
-    e.label
-  )) })
+      ref: s,
+      className: d(
+        "flex flex-col divide-y divide-border border-y border-border sm:flex-row sm:divide-x sm:divide-y-0",
+        i
+      ),
+      ...m,
+      children: a.map((e) => /* @__PURE__ */ r(
+        "div",
+        {
+          className: "flex min-w-0 flex-1 flex-col gap-2.5 py-5 sm:px-6 sm:first:pl-0 sm:last:pr-0",
+          children: [
+            /* @__PURE__ */ l("dt", { className: "text-sm leading-5 text-muted-foreground", children: e.label }),
+            /* @__PURE__ */ r("div", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [
+              /* @__PURE__ */ r(
+                "dd",
+                {
+                  className: d(
+                    o,
+                    "text-3xl",
+                    e.accent ? "text-primary" : void 0
+                  ),
+                  children: [
+                    e.value,
+                    e.suffix ? /* @__PURE__ */ l("span", { className: f, children: e.suffix }) : null
+                  ]
+                }
+              ),
+              typeof e.delta == "number" ? /* @__PURE__ */ l(c, { delta: e.delta }) : null
+            ] }),
+            e.sub ? /* @__PURE__ */ l("p", { className: "max-w-[32ch] text-[13px] leading-5 text-muted-foreground", children: e.sub }) : null
+          ]
+        },
+        e.label
+      ))
+    }
+  )
 );
-x.displayName = "StatsTicker";
+n.displayName = "StatsTicker";
 export {
-  x as StatsTicker
+  n as StatsTicker
 };
 //# sourceMappingURL=Ticker.js.map

package/dist/es/components/Stats/variants/Ticker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ticker.js","sources":["../../../../../src/components/Stats/variants/Ticker.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, DeltaBadge } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface TickerProps extends HTMLAttributes<HTMLDListElement> {\n  stats: Stat[];\n}\n\nexport const StatsTicker = forwardRef<HTMLDListElement, TickerProps>(\n  ({ className, stats, ...props }, ref) => (\n    <dl ref={ref} className={cn(\"flex w-full items-stretch overflow-x-auto rounded-2xl border border-border bg-surface\", className)} {...props}>\n      {stats.map((stat, i) => (\n        <div\n          key={stat.label}\n          className={cn(\"flex min-w-[11rem] flex-1 flex-col gap-3 p-6\", i > 0 && \"border-l border-border\")}\n        >\n          <div className=\"flex items-center justify-between gap-3\">\n            <dt className=\"text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground\">\n              {stat.label}\n            </dt>\n            {typeof stat.delta === \"number\" ? <DeltaBadge delta={stat.delta} /> : null}\n          </div>\n          <dd className={cn(valueBase, \"text-3xl\", stat.accent ? \"text-primary\" : undefined)}>\n            {stat.value}\n            {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n          </dd>\n          {stat.sub ? (\n            <p className=\"text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n          ) : null}\n        </div>\n      ))}\n    </dl>\n  ),\n);\nStatsTicker.displayName = \"StatsTicker\";"],"names":["StatsTicker","forwardRef","className","stats","props","ref","jsx","cn","stat","i","jsxs","DeltaBadge","valueBase","suffixBase"],"mappings":";;;;AASO,MAAMA,IAAcC;AAAA,EACzB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAC/B,gBAAAC,EAAC,MAAA,EAAG,KAAAD,GAAU,WAAWE,EAAG,yFAAyFL,CAAS,GAAI,GAAGE,GAClI,UAAAD,EAAM,IAAI,CAACK,GAAMC,MAChB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAWH,EAAG,gDAAgDE,IAAI,KAAK,wBAAwB;AAAA,MAE/F,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAJ,EAAC,MAAA,EAAG,WAAU,2EACX,UAAAE,EAAK,OACR;AAAA,UACC,OAAOA,EAAK,SAAU,6BAAYG,GAAA,EAAW,OAAOH,EAAK,MAAA,CAAO,IAAK;AAAA,QAAA,GACxE;AAAA,QACA,gBAAAE,EAAC,MAAA,EAAG,WAAWH,EAAGK,GAAW,YAAYJ,EAAK,SAAS,iBAAiB,MAAS,GAC9E,UAAA;AAAA,UAAAA,EAAK;AAAA,UACLA,EAAK,SAAS,gBAAAF,EAAC,QAAA,EAAK,WAAWO,GAAa,UAAAL,EAAK,QAAO,IAAU;AAAA,QAAA,GACrE;AAAA,QACCA,EAAK,MACJ,gBAAAF,EAAC,KAAA,EAAE,WAAU,+CAA+C,UAAAE,EAAK,KAAI,IACnE;AAAA,MAAA;AAAA,IAAA;AAAA,IAfCA,EAAK;AAAA,EAAA,CAiBb,EAAA,CACH;AAEJ;AACAR,EAAY,cAAc;"}
+{"version":3,"file":"Ticker.js","sources":["../../../../../src/components/Stats/variants/Ticker.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { valueBase, suffixBase, DeltaMark } from \"../parts\";\nimport type { Stat } from \"../types\";\n\ninterface TickerProps extends HTMLAttributes<HTMLDListElement> {\n  stats: Stat[];\n}\n\n/**\n * ticker — one horizontal readout band. Edge-to-edge top and bottom rules with\n * hairline dividers between entries; stacks into a ruled list on small screens.\n */\nexport const StatsTicker = forwardRef<HTMLDListElement, TickerProps>(\n  ({ className, stats, ...props }, ref) => (\n    <dl\n      ref={ref}\n      className={cn(\n        \"flex flex-col divide-y divide-border border-y border-border sm:flex-row sm:divide-x sm:divide-y-0\",\n        className,\n      )}\n      {...props}\n    >\n      {stats.map((stat) => (\n        <div\n          key={stat.label}\n          className=\"flex min-w-0 flex-1 flex-col gap-2.5 py-5 sm:px-6 sm:first:pl-0 sm:last:pr-0\"\n        >\n          <dt className=\"text-sm leading-5 text-muted-foreground\">{stat.label}</dt>\n          <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n            <dd\n              className={cn(\n                valueBase,\n                \"text-3xl\",\n                stat.accent ? \"text-primary\" : undefined,\n              )}\n            >\n              {stat.value}\n              {stat.suffix ? <span className={suffixBase}>{stat.suffix}</span> : null}\n            </dd>\n            {typeof stat.delta === \"number\" ? <DeltaMark delta={stat.delta} /> : null}\n          </div>\n          {stat.sub ? (\n            <p className=\"max-w-[32ch] text-[13px] leading-5 text-muted-foreground\">{stat.sub}</p>\n          ) : null}\n        </div>\n      ))}\n    </dl>\n  ),\n);\nStatsTicker.displayName = \"StatsTicker\";\n"],"names":["StatsTicker","forwardRef","className","stats","props","ref","jsx","cn","stat","jsxs","valueBase","suffixBase","DeltaMark"],"mappings":";;;;AAaO,MAAMA,IAAcC;AAAA,EACzB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAC/B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAD,EAAM,IAAI,CAACK,MACV,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAH,EAAC,MAAA,EAAG,WAAU,2CAA2C,UAAAE,EAAK,OAAM;AAAA,YACpE,gBAAAC,EAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF;AAAA,oBACTG;AAAA,oBACA;AAAA,oBACAF,EAAK,SAAS,iBAAiB;AAAA,kBAAA;AAAA,kBAGhC,UAAA;AAAA,oBAAAA,EAAK;AAAA,oBACLA,EAAK,SAAS,gBAAAF,EAAC,QAAA,EAAK,WAAWK,GAAa,UAAAH,EAAK,QAAO,IAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEpE,OAAOA,EAAK,SAAU,6BAAYI,GAAA,EAAU,OAAOJ,EAAK,MAAA,CAAO,IAAK;AAAA,YAAA,GACvE;AAAA,YACCA,EAAK,MACJ,gBAAAF,EAAC,KAAA,EAAE,WAAU,4DAA4D,UAAAE,EAAK,KAAI,IAChF;AAAA,UAAA;AAAA,QAAA;AAAA,QAnBCA,EAAK;AAAA,MAAA,CAqBb;AAAA,IAAA;AAAA,EAAA;AAGP;AACAR,EAAY,cAAc;"}

package/dist/es/utils/surface.js

@@ -0,0 +1,16 @@
+const o = "radial-gradient(120% 160% at 0% 0%, rgb(var(--color-primary)), rgb(var(--color-primary-hover)) 55%, rgb(var(--color-primary) / 0.85))";
+function a(r) {
+  return r ? {
+    "--lc-bg": r,
+    backgroundColor: "var(--lc-bg)",
+    color: "contrast-color(var(--lc-bg))"
+  } : {
+    background: o,
+    color: "contrast-color(rgb(var(--color-primary)))"
+  };
+}
+export {
+  o as emphasisGradient,
+  a as emphasisSurfaceStyle
+};
+//# sourceMappingURL=surface.js.map

package/dist/es/utils/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sources":["../../../src/utils/surface.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * Default brand fill for \"emphasis\" (bold) sections. Defined once so every\n * emphasis surface — CTA panels, Hero statements, and any future band — paints\n * the exact same gradient and reads as one design language.\n */\nexport const emphasisGradient =\n  \"radial-gradient(120% 160% at 0% 0%, rgb(var(--color-primary)), rgb(var(--color-primary-hover)) 55%, rgb(var(--color-primary) / 0.85))\";\n\n/**\n * Inline style for an emphasis surface.\n *\n * - Without a `background`, the surface is painted with the brand gradient and\n *   the text color is derived from `--color-primary` via CSS `contrast-color()`.\n * - With a `background` (any CSS color), it binds `--lc-bg` so the background\n *   and its text color share one source; `contrast-color(var(--lc-bg))` picks\n *   white/black and re-evaluates automatically when the value changes.\n *\n * This is the CSS-only contrast path mandated by AGENTS.md — no JS luminance\n * helpers.\n */\nexport function emphasisSurfaceStyle(background?: string): CSSProperties {\n  if (background) {\n    return {\n      \"--lc-bg\": background,\n      backgroundColor: \"var(--lc-bg)\",\n      color: \"contrast-color(var(--lc-bg))\",\n    } as CSSProperties;\n  }\n\n  return {\n    background: emphasisGradient,\n    color: \"contrast-color(rgb(var(--color-primary)))\",\n  };\n}\n"],"names":["emphasisGradient","emphasisSurfaceStyle","background"],"mappings":"AAOO,MAAMA,IACX;AAcK,SAASC,EAAqBC,GAAoC;AACvE,SAAIA,IACK;AAAA,IACL,WAAWA;AAAA,IACX,iBAAiB;AAAA,IACjB,OAAO;AAAA,EAAA,IAIJ;AAAA,IACL,YAAYF;AAAA,IACZ,OAAO;AAAA,EAAA;AAEX;"}

package/dist/index.d.ts

@@ -186,7 +186,7 @@ export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
 
 export declare type ButtonSize = "sm" | "md" | "lg";
 
-export declare type ButtonVariant = "primary" | "dark" | "outline" | "ghost" | "link";
+export declare type ButtonVariant = "primary" | "outline" | "ghost" | "link";
 
 export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
 
@@ -251,7 +251,8 @@ export declare const Cpu: (props: IconProps) => JSX_2.Element;
 
 export declare const CTA: ForwardRefExoticComponent<CTAProps & RefAttributes<HTMLElement>>;
 
-declare type CTAOption = "panel" | "surface" | "inverse";
+/** Layout options — arrangement only. Emphasis tone is the `background` prop. */
+declare type CTAOption = "panel" | "surface";
 
 export declare interface CTAProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     title: ReactNode;
@@ -260,6 +261,12 @@ export declare interface CTAProps extends Omit<HTMLAttributes<HTMLElement>, "tit
     secondaryAction?: ReactNode;
     option?: CTAOption;
     align?: "left" | "center";
+    /**
+     * Overrides the emphasis (`panel`) surface with any CSS color; the text color
+     * is derived for contrast via CSS `contrast-color()`. Ignored by `surface`,
+     * which sits on the page background.
+     */
+    background?: string;
 }
 
 export declare const Database: (props: IconProps) => JSX_2.Element;
@@ -382,8 +389,15 @@ export declare interface FooterProps extends Omit<HTMLAttributes<HTMLElement>, "
     bottom?: ReactNode;
     /** Optional language switcher rendered in the footer's bottom bar. */
     languageSwitcher?: ReactNode;
-    option?: "classic" | "minimal" | "editorial";
+    /** Layout options — arrangement only. Tone is the `background` prop. */
+    option?: "columns" | "minimal" | "editorial";
     badge?: ReactNode;
+    /**
+     * Overrides the footer surface with any CSS color; text colors are derived for
+     * contrast via CSS `contrast-color()`. Use it to tint the footer to a brand or
+     * dark color.
+     */
+    background?: string;
     /** Component used to render footer links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
     LinkComponent?: ElementType;
 }
@@ -427,6 +441,12 @@ export declare interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, "ti
     meta?: HeroMeta[];
     /** Floating logo tiles with a mouse parallax effect (`parallax` variant). */
     logos?: HeroLogo[];
+    /**
+     * Overrides the emphasis (`statement`) band with any CSS color; the text color
+     * is derived for contrast via CSS `contrast-color()`. Layouts on the page
+     * background are unaffected.
+     */
+    background?: string;
 }
 
 declare type HeroVariant = "split" | "centered" | "statement" | "parallax";
@@ -473,7 +493,11 @@ export declare interface LanguageSwitcherProps extends Omit<HTMLAttributes<HTMLD
     modalTitle?: ReactNode;
     /** Replace the globe icon with the selected language's flag emoji (and show flags in options). */
     showFlag?: boolean;
-    /** Adapts colors for dark surfaces (inverse Navbar, classic Footer). */
+    /**
+     * Adapts the trigger to a custom/emphasis surface (Navbar `background`,
+     * Footer `background`): the trigger inherits `currentColor` instead of the
+     * page tokens. Dropdown options keep paper-surface colors.
+     */
     inverse?: boolean;
 }
 
@@ -502,7 +526,7 @@ export declare interface LogoItem {
 export declare const Mail: (props: IconProps) => JSX_2.Element;
 
 export declare const MegaMenu: {
-    ({ className, variant, brand, logo, logoSrc, logoAlt, logoClassName, brandHref, items, actions, cta, languageSwitcher, sticky, LinkComponent, onKeyDown, ...props }: MegaMenuProps): JSX_2.Element;
+    ({ className, variant, brand, logo, logoSrc, logoAlt, logoClassName, brandHref, items, actions, cta, languageSwitcher, sticky, background, LinkComponent, onKeyDown, style, ...props }: MegaMenuProps): JSX_2.Element;
     displayName: string;
 };
 
@@ -561,11 +585,18 @@ export declare interface MegaMenuProps extends Omit<HTMLAttributes<HTMLElement>,
     /** Optional language switcher rendered on the right (desktop) and beside the menu button (mobile). */
     languageSwitcher?: ReactNode;
     sticky?: boolean;
+    /**
+     * Overrides the bar's surface with any CSS color; the text color (and the
+     * text/border of outline/ghost buttons inside it) is derived for contrast via
+     * CSS `contrast-color()`. Use it to tint the bar to a brand or dark color.
+     */
+    background?: string;
     /** Component used to render brand, trigger and panel links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
     LinkComponent?: ElementType;
 }
 
-declare type MegaMenuVariant = "classic" | "floating" | "inverse";
+/** Layout options — arrangement only. Tone is the `background` prop. */
+declare type MegaMenuVariant = "classic" | "floating";
 
 export declare const Menu: (props: IconProps) => JSX_2.Element;
 
@@ -592,7 +623,7 @@ export declare interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 
 export declare const Navbar: {
-    ({ className, variant, brand, logo, logoSrc, logoAlt, logoClassName, brandHref, links, actions, cta, languageSwitcher, sticky, LinkComponent, ...props }: NavbarProps): JSX_2.Element;
+    ({ className, variant, brand, logo, logoSrc, logoAlt, logoClassName, brandHref, links, actions, cta, languageSwitcher, sticky, background, LinkComponent, style, ...props }: NavbarProps): JSX_2.Element;
     displayName: string;
 };
 
@@ -614,11 +645,18 @@ export declare interface NavbarProps extends Omit<HTMLAttributes<HTMLElement>, "
     /** Optional language switcher rendered on the right (desktop) and beside the menu button (mobile). */
     languageSwitcher?: ReactNode;
     sticky?: boolean;
+    /**
+     * Overrides the bar's surface with any CSS color; the text color (and the
+     * text/border of outline/ghost buttons inside it) is derived for contrast via
+     * CSS `contrast-color()`. Use it to tint the bar to a brand or dark color.
+     */
+    background?: string;
     /** Component used to render the brand and nav links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
     LinkComponent?: ElementType;
 }
 
-declare type NavbarVariant = "classic" | "floating" | "inverse";
+/** Layout options — arrangement only. Tone is the `background` prop. */
+declare type NavbarVariant = "classic" | "floating";
 
 export declare interface NavLink {
     label: string;
@@ -765,7 +803,7 @@ export declare interface Stat {
     label: string;
     /** Small unit rendered inline with the value, e.g. "ms" or "₺". */
     suffix?: string;
-    /** Trend change in percent — renders an up/down badge. */
+    /** Trend change in percent — renders a directional delta mark. */
     delta?: number;
     /** Optional supporting copy. */
     sub?: string;
@@ -776,7 +814,8 @@ export declare interface Stat {
 
 export declare const Stats: ForwardRefExoticComponent<StatsProps & RefAttributes<HTMLDListElement>>;
 
-declare type StatsOption = "editorial" | "hairline" | "cells" | "ticker";
+/** Layout options — arrangement only. */
+declare type StatsOption = "stacked" | "divided" | "cells" | "ticker";
 
 export declare interface StatsProps extends HTMLAttributes<HTMLDListElement> {
     stats: Stat[];