@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/List/List.styles.js

@@ -4,7 +4,7 @@ const listVariants = cva("w-full font-sans text-foreground", {
   variants: {
     variant: {
       default: "",
-      bordered: "border border-grey-200 dark:border-grey-800 rounded-lg overflow-hidden",
+      bordered: "border border-grey-200 dark:border-grey-800 rounded-lg overflow-hidden bg-card",
       divided: "divide-y divide-grey-200 dark:divide-grey-800"
     }
   },
@@ -12,17 +12,18 @@ const listVariants = cva("w-full font-sans text-foreground", {
     variant: "default"
   }
 });
+const listDividedClass = "divide-y divide-border";
 const listItemVariants = cva(
   "relative flex items-center gap-3 transition-colors font-sans select-none",
   {
     variants: {
       density: {
-        sm: "py-2 px-3 text-xs",
-        default: "py-3 px-4 text-sm",
-        lg: "py-4 px-5 text-base"
+        sm: "py-2 px-3 text-body-3",
+        default: "py-3 px-4 text-body-2",
+        lg: "py-4 px-5 text-body-1"
       },
       interactive: {
-        true: "cursor-pointer hover:bg-grey-100/70 dark:hover:bg-grey-800/60 active:bg-grey-200/50",
+        true: "cursor-pointer hover:bg-grey-100/70 dark:hover:bg-grey-800/60 active:bg-grey-200/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
         false: ""
       }
     },
@@ -38,4 +39,4 @@ const listItemIconVariants = cva(
 const listItemTextVariants = cva("flex-1 min-w-0");
 const listItemActionVariants = cva("shrink-0 ml-auto flex items-center gap-2");
 
-export { listItemActionVariants, listItemIconVariants, listItemTextVariants, listItemVariants, listVariants };
+export { listDividedClass, listItemActionVariants, listItemIconVariants, listItemTextVariants, listItemVariants, listVariants };

package/dist/components/List/List.types.d.ts

@@ -1,9 +1,16 @@
 import type * as React from 'react';
 import type { ListVariants, ListItemVariants } from './List.styles';
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement>, ListVariants {
+    /** Lines between items (works with every variant, e.g. bordered). */
+    divided?: boolean;
 }
 export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement>, ListItemVariants {
     clickable?: boolean;
+    /**
+     * Render the row as its child (e.g. a link) inside the `<li>`: the child
+     * gets the row and interactive styles, with no button role.
+     */
+    asChild?: boolean;
 }
 export type ListItemIconProps = React.HTMLAttributes<HTMLDivElement>;
 export interface ListItemTextProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/components/List/List.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.types.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,YAAY;CAAG;AAEnB,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAC3C,gBAAgB;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAErE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"List.types.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,YAAY;IACd,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAC3C,gBAAgB;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAErE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/components/MediaCard/MediaCard.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { MediaCardProps } from './MediaCard.types';
+/**
+ * Generic media + content card template.
+ *
+ * - `vertical`: media on top (grids of items).
+ * - `horizontal`: media on the left, `aside` on the right (lists, line items).
+ *
+ * Pass `href` to make the whole card a link (a stretched title link);
+ * overlays and `footer` stay clickable above it.
+ */
+export declare const MediaCard: React.ForwardRefExoticComponent<MediaCardProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=MediaCard.d.ts.map

package/dist/components/MediaCard/MediaCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/components/MediaCard/MediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAc5E;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,oFA8IrB,CAAC"}

package/dist/components/MediaCard/MediaCard.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { mediaCardOverlayVariants, mediaCardMediaVariants, mediaCardVariants } from './MediaCard.styles.js';
+import { Text } from '../Text/Text.js';
+
+const PRESET_RATIOS = ["square", "portrait", "landscape"];
+const DefaultLink = ({ href, className, children }) => /* @__PURE__ */ jsx("a", { href, className, children });
+const STRETCHED_LINK = "rounded-sm after:absolute after:inset-0 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+const MediaCard = React.forwardRef(
+  ({
+    media,
+    mediaTopStart,
+    mediaTopEnd,
+    mediaZoom = false,
+    mediaClassName,
+    mediaFallback,
+    href,
+    linkComponent: Link = DefaultLink,
+    titleSize,
+    spacing = "compact",
+    eyebrow,
+    title,
+    subtitle,
+    meta,
+    aside,
+    footer,
+    orientation = "vertical",
+    variant = "plain",
+    size = "md",
+    ratio = "square",
+    titleClassName,
+    titleAs: Title = "h3",
+    as: Root = "article",
+    className,
+    ...props
+  }, ref) => {
+    const horizontal = orientation === "horizontal";
+    const relaxed = spacing === "relaxed";
+    const presetRatio = PRESET_RATIOS.includes(ratio) ? ratio : void 0;
+    const resolvedTitleSize = titleSize ?? (size === "sm" ? "sm" : "md");
+    const showMedia = media || mediaFallback;
+    return /* @__PURE__ */ jsxs(
+      Root,
+      {
+        ref,
+        "data-slot": "media-card",
+        "data-orientation": orientation,
+        className: cn(mediaCardVariants({ orientation, variant, size }), "relative", className),
+        ...props,
+        children: [
+          showMedia && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                mediaCardMediaVariants({ orientation, size, ratio: presetRatio }),
+                mediaZoom && "group-hover/media-card:[&>img]:scale-105",
+                mediaClassName
+              ),
+              style: presetRatio ? void 0 : { aspectRatio: ratio },
+              "data-slot": "media-card-media",
+              children: [
+                media ?? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex h-full w-full items-center justify-center text-muted-foreground",
+                    "data-slot": "media-card-fallback",
+                    children: mediaFallback
+                  }
+                ),
+                mediaTopStart && /* @__PURE__ */ jsx("div", { className: mediaCardOverlayVariants({ position: "start" }), "data-slot": "media-card-top-start", children: mediaTopStart }),
+                mediaTopEnd && /* @__PURE__ */ jsx("div", { className: mediaCardOverlayVariants({ position: "end" }), "data-slot": "media-card-top-end", children: mediaTopEnd })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", horizontal ? "gap-1" : "gap-1.5"), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex min-w-0 gap-3",
+                  horizontal ? "items-start justify-between" : cn("flex-col", relaxed ? "gap-2" : "gap-1.5")
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    eyebrow && /* @__PURE__ */ jsx(Text, { asChild: true, variant: "body-3", foreground: "muted", children: /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center gap-1.5", "data-slot": "media-card-eyebrow", children: eyebrow }) }),
+                    /* @__PURE__ */ jsx(
+                      Title,
+                      {
+                        className: cn(
+                          "font-medium text-foreground",
+                          resolvedTitleSize === "sm" ? "text-body-2" : "text-body-1",
+                          "line-clamp-2",
+                          titleClassName
+                        ),
+                        "data-slot": "media-card-title",
+                        children: href ? /* @__PURE__ */ jsx(Link, { href, className: STRETCHED_LINK, children: title }) : title
+                      }
+                    ),
+                    subtitle && /* @__PURE__ */ jsx(Text, { asChild: true, variant: "body-2", foreground: "muted", children: /* @__PURE__ */ jsx("div", { className: "mt-0.5", "data-slot": "media-card-subtitle", children: subtitle }) }),
+                    meta && /* @__PURE__ */ jsx(Text, { asChild: true, variant: "body-3", foreground: "muted", children: /* @__PURE__ */ jsx("div", { className: relaxed ? "mt-4" : "mt-1", "data-slot": "media-card-meta", children: meta }) })
+                  ] }),
+                  aside && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn("text-body-1 font-medium", horizontal ? "shrink-0 text-right" : ""),
+                      "data-slot": "media-card-aside",
+                      children: aside
+                    }
+                  )
+                ]
+              }
+            ),
+            footer && /* @__PURE__ */ jsx("div", { className: "relative z-10 mt-2 flex flex-wrap items-center gap-2", "data-slot": "media-card-footer", children: footer })
+          ] })
+        ]
+      }
+    );
+  }
+);
+MediaCard.displayName = "MediaCard";
+
+export { MediaCard };

package/dist/components/MediaCard/MediaCard.styles.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const mediaCardVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "outline" | "plain" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const mediaCardMediaVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    ratio?: "square" | "portrait" | "landscape" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const mediaCardOverlayVariants: (props?: ({
+    position?: "start" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MediaCardVariants = VariantProps<typeof mediaCardVariants>;
+export type MediaCardMediaVariants = Pick<VariantProps<typeof mediaCardMediaVariants>, 'ratio'>;
+//# sourceMappingURL=MediaCard.styles.d.ts.map

package/dist/components/MediaCard/MediaCard.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MediaCard/MediaCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,iBAAiB;;;;8EAiB5B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;8EA0BlC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;8EAOnC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACvE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,sBAAsB,CAAC,EAAE,OAAO,CAAC,CAAC"}

package/dist/components/MediaCard/MediaCard.styles.js

@@ -0,0 +1,57 @@
+import { cva } from 'class-variance-authority';
+
+const mediaCardVariants = cva("group/media-card flex min-w-0 font-sans text-foreground", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row items-start"
+    },
+    variant: {
+      plain: "",
+      outline: "rounded-lg border border-border bg-card p-3"
+    },
+    size: {
+      sm: "gap-3",
+      md: "gap-4",
+      lg: "gap-5"
+    }
+  },
+  defaultVariants: { orientation: "vertical", variant: "plain", size: "md" }
+});
+const mediaCardMediaVariants = cva(
+  "relative shrink-0 overflow-hidden rounded-md bg-muted [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>img]:transition-transform [&>img]:duration-500 [&>img]:ease-out",
+  {
+    variants: {
+      orientation: {
+        vertical: "w-full",
+        horizontal: ""
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      ratio: {
+        square: "aspect-square",
+        portrait: "aspect-[4/5]",
+        landscape: "aspect-[4/3]"
+      }
+    },
+    compoundVariants: [
+      { orientation: "horizontal", size: "sm", className: "w-16" },
+      { orientation: "horizontal", size: "md", className: "w-20 sm:w-24" },
+      { orientation: "horizontal", size: "lg", className: "w-28 sm:w-32" }
+    ],
+    defaultVariants: { orientation: "vertical", size: "md", ratio: "square" }
+  }
+);
+const mediaCardOverlayVariants = cva("absolute top-2 z-10 flex items-center gap-1", {
+  variants: {
+    position: {
+      start: "start-2",
+      end: "end-2"
+    }
+  }
+});
+
+export { mediaCardMediaVariants, mediaCardOverlayVariants, mediaCardVariants };

package/dist/components/MediaCard/MediaCard.types.d.ts

@@ -0,0 +1,73 @@
+import type * as React from 'react';
+import type { MediaCardMediaVariants, MediaCardVariants } from './MediaCard.styles';
+/**
+ * Layout template: media + text + optional aside and footer. It holds no
+ * domain knowledge; build feature cards (products, line items, articles…)
+ * on top of it by passing nodes into the slots.
+ */
+/** Props the `linkComponent` receives (e.g. next/link). */
+export interface MediaCardLinkProps {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export interface MediaCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>, MediaCardVariants, Omit<MediaCardMediaVariants, 'ratio'> {
+    /**
+     * Media aspect ratio: a preset, or any CSS ratio such as `"171/147"`.
+     * @default 'square'
+     */
+    ratio?: 'square' | 'portrait' | 'landscape' | (string & {});
+    /**
+     * Makes the whole card a link: the title becomes a link stretched over the
+     * card. Overlays and `footer` stay clickable above it.
+     */
+    href?: string;
+    /**
+     * Link to render `href` with (e.g. next/link for same-app pages).
+     * Defaults to a plain `<a>` (full navigation, safe across apps).
+     */
+    linkComponent?: React.ComponentType<MediaCardLinkProps>;
+    /** Shown centred in the media box when there is no `media` (e.g. an icon). */
+    mediaFallback?: React.ReactNode;
+    /**
+     * Title text size; defaults to the card `size` (sm → body-2, otherwise body-1).
+     */
+    titleSize?: 'sm' | 'md';
+    /**
+     * `relaxed`: more room between title, meta and aside (product grids).
+     * @default 'compact'
+     */
+    spacing?: 'compact' | 'relaxed';
+    /** Image (or any node) shown in the media slot; fills it with object-cover. */
+    media?: React.ReactNode;
+    /**
+     * Overlays on the media corners (badges, a wishlist toggle…). They sit above
+     * a stretched title link, so interactive content stays clickable.
+     */
+    mediaTopStart?: React.ReactNode;
+    mediaTopEnd?: React.ReactNode;
+    /** Gently zooms the media on hover (for clickable cards). */
+    mediaZoom?: boolean;
+    /** Extra classes for the media box (e.g. a custom `aspect-*`). */
+    mediaClassName?: string;
+    /** Small line above the title (category, options, brand…). */
+    eyebrow?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    /** Small details under the title (attributes, quantity, dates…). */
+    meta?: React.ReactNode;
+    /**
+     * Trailing content: to the right in `horizontal` (e.g. a price), under the
+     * meta in `vertical`.
+     */
+    aside?: React.ReactNode;
+    /** Actions row at the bottom (buttons). Keep it outside any title link. */
+    footer?: React.ReactNode;
+    /** Extra classes for the title (e.g. a different text size). */
+    titleClassName?: string;
+    /** Heading element for the title (default `h3`). */
+    titleAs?: 'h2' | 'h3' | 'h4' | 'p';
+    /** Root element (e.g. `li` inside a list). */
+    as?: 'article' | 'div' | 'li';
+}
+//# sourceMappingURL=MediaCard.types.d.ts.map

package/dist/components/MediaCard/MediaCard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/MediaCard/MediaCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEpF;;;;GAIG;AACH,2DAA2D;AAC3D,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,iBAAiB,EACjB,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5D;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACxD,8EAA8E;IAC9E,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oEAAoE;IACpE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;IACnC,8CAA8C;IAC9C,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CAC/B"}

package/dist/components/MediaCard/index.d.ts

@@ -0,0 +1,4 @@
+export * from './MediaCard';
+export * from './MediaCard.types';
+export * from './MediaCard.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MediaCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MediaCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/dist/components/NavFooter/NavFooter.styles.d.ts

@@ -8,7 +8,7 @@ export declare const navFooterRootVariants: (props?: ({
  * Inner container width and responsive padding variants.
  */
 export declare const navFooterContainerVariants: (props?: ({
-    maxWidth?: "sm" | "lg" | "md" | "xl" | "2xl" | "full" | null | undefined;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Navigation column title styles.

package/dist/components/NavFooter/NavFooter.styles.js

@@ -1,12 +1,12 @@
 import { cva } from 'class-variance-authority';
 
 const navFooterRootVariants = cva(
-  "w-full bg-[#1A1714] text-[#F7F1E6] relative border-t border-black/20 transition-colors select-text",
+  "w-full bg-surface-dark text-bg-2 relative border-t border-grey-1000/20 transition-colors select-text",
   {
     variants: {
       tone: {
-        dark: "bg-[#1A1714] text-[#F7F1E6]",
-        light: "bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-t border-[#E7DFD3]"
+        dark: "bg-surface-dark text-bg-2",
+        light: "bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-t border-border-warm"
       }
     },
     defaultVariants: {
@@ -33,22 +33,22 @@ const navFooterContainerVariants = cva(
   }
 );
 const footerSectionTitleVariants = cva(
-  "font-title text-xs font-semibold text-[#D39375] uppercase tracking-[0.14em] select-none flex items-center justify-between w-full"
+  "font-title! text-body-3 font-semibold text-primary-200 uppercase tracking-[0.14em] select-none flex items-center justify-between w-full"
 );
 const footerNavLinkVariants = cva(
-  "font-sans text-sm text-[#F7F1E6]/85 hover:text-[#D39375] hover:opacity-100 transition-colors inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/60 rounded py-0.5 select-none"
+  "text-body-2 text-bg-2/85 hover:text-primary-200 hover:opacity-100 transition-colors inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/60 rounded py-0.5 select-none"
 );
 const footerSocialButtonVariants = cva(
-  "inline-flex items-center justify-center text-[#D39375] hover:text-[#F7F1E6] hover:bg-white/5 p-2 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/60 active:scale-95"
+  "inline-flex items-center justify-center text-primary-200 hover:text-bg-2 hover:bg-grey-50/5 p-2 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/60 active:scale-95"
 );
 const footerOfficeBlockVariants = cva(
-  "flex flex-col gap-1.5 text-sm text-[#F7F1E6]/85 font-sans leading-relaxed"
+  "flex flex-col gap-1.5 text-body-2 text-bg-2/85 leading-relaxed"
 );
 const footerLegalBarVariants = cva(
-  "border-t border-white/10 py-5 sm:py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs font-sans text-[#B7AEA2]"
+  "border-t border-grey-50/10 py-5 sm:py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-body-3 text-sand-muted"
 );
 const footerLegalLinkVariants = cva(
-  "text-xs font-sans text-[#B7AEA2] hover:text-white transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#D39375]/60 rounded px-1"
+  "text-body-3 text-sand-muted hover:text-grey-50 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-200/60 rounded px-1"
 );
 
 export { footerLegalBarVariants, footerLegalLinkVariants, footerNavLinkVariants, footerOfficeBlockVariants, footerSectionTitleVariants, footerSocialButtonVariants, navFooterContainerVariants, navFooterRootVariants };

package/dist/components/NavFooter/subcomponents/FooterBrand.js

@@ -60,7 +60,7 @@ const FooterBrand = ({
       href: resolvedHref,
       "aria-label": alt,
       onClick,
-      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/50 rounded-md transition-opacity hover:opacity-90",
+      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/50 rounded-md transition-opacity hover:opacity-90",
       "data-slot": "footer-brand-link",
       children: logoContent
     }
@@ -71,7 +71,7 @@ const FooterBrand = ({
       "aria-label": alt,
       onClick,
       "data-cross-zone": requiresCrossZone ? "true" : void 0,
-      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/50 rounded-md transition-opacity hover:opacity-90",
+      className: "inline-flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/50 rounded-md transition-opacity hover:opacity-90",
       "data-slot": "footer-brand-link",
       children: logoContent
     }
@@ -86,7 +86,7 @@ const FooterBrand = ({
         description && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "text-sm font-sans text-[#B7AEA2] leading-relaxed select-text",
+            className: "text-body-2 text-sand-muted leading-relaxed select-text",
             "data-slot": "footer-brand-description",
             children: typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line m-0", children: description }) : description
           }

package/dist/components/NavFooter/subcomponents/FooterLegalBar.js

@@ -43,7 +43,7 @@ const FooterLegalBar = ({
       "data-slot": "footer-legal-bar",
       children: [
         /* @__PURE__ */ jsx("div", { className: "select-text", "data-slot": "footer-copyright", children: typeof copyright === "string" ? /* @__PURE__ */ jsx("span", { children: copyright }) : copyright }),
-        extra && /* @__PURE__ */ jsx("div", { className: "text-xs text-[#B7AEA2]", children: extra }),
+        extra && /* @__PURE__ */ jsx("div", { className: "text-body-3 text-sand-muted", children: extra }),
         links && links.length > 0 && /* @__PURE__ */ jsx(
           "ul",
           {

package/dist/components/NavFooter/subcomponents/FooterNavSection.js

@@ -31,7 +31,7 @@ const FooterNavSection = ({
     const linkContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
       /* @__PURE__ */ jsx("span", { children: item.label }),
-      item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.2 rounded text-[10px] font-bold bg-[#D39375] text-[#1A1714] uppercase tracking-wider", children: item.badge })
+      item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.2 rounded text-caption font-bold bg-primary-200 text-surface-dark uppercase tracking-wider", children: item.badge })
     ] });
     const linkProps = {
       href: resolvedHref,
@@ -59,7 +59,7 @@ const FooterNavSection = ({
     "div",
     {
       className: cn(
-        "flex flex-col border-b border-white/10 md:border-b-0 py-3 md:py-0 transition-colors",
+        "flex flex-col border-b border-grey-50/10 md:border-b-0 py-3 md:py-0 transition-colors",
         sectionClass,
         className
       ),
@@ -77,7 +77,7 @@ const FooterNavSection = ({
               onClick: onToggle,
               className: cn(
                 footerSectionTitleVariants(),
-                "py-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/50 rounded"
+                "py-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200/50 rounded"
               ),
               "data-slot": "footer-section-accordion-trigger",
               children: [
@@ -89,7 +89,7 @@ const FooterNavSection = ({
                     initial: false,
                     animate: shouldAnimate ? isOpen ? "expanded" : "collapsed" : void 0,
                     className: cn(
-                      "shrink-0 text-[#D39375] transition-transform duration-200",
+                      "shrink-0 text-primary-200 transition-transform duration-200",
                       !shouldAnimate && (isOpen ? "rotate-180" : "rotate-0"),
                       motionClass
                     ),

package/dist/components/NavFooter/subcomponents/FooterNewsletter.js

@@ -45,13 +45,13 @@ const FooterNewsletter = ({
       className: cn("flex flex-col gap-3 max-w-[420px]", newsletterClass, className),
       "data-slot": "footer-newsletter",
       children: [
-        title && /* @__PURE__ */ jsx("div", { className: "font-title text-xs font-semibold text-[#D39375] uppercase tracking-[0.14em]", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-sm font-sans text-[#B7AEA2] m-0 leading-relaxed", children: description }),
-        currentStatus === "success" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg bg-[#4E8752]/20 border border-[#4E8752]/40 text-[#4E8752] text-sm font-sans", children: [
+        title && /* @__PURE__ */ jsx("div", { className: "font-title! text-body-3 font-semibold text-primary-200 uppercase tracking-[0.14em]", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-body-2 text-sand-muted m-0 leading-relaxed", children: description }),
+        currentStatus === "success" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg bg-success/20 border border-success/40 text-success text-body-2", children: [
           /* @__PURE__ */ jsx(CheckCircle, { size: 18, className: "shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: successMessage })
         ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-lg bg-black/40 border border-white/15 focus-within:border-[#D39375] focus-within:ring-2 focus-within:ring-[#D39375]/30 transition-all p-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-lg bg-grey-1000/40 border border-grey-50/15 focus-within:border-primary-200 focus-within:ring-2 focus-within:ring-primary-200/30 transition-all p-1", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -64,7 +64,7 @@ const FooterNewsletter = ({
                 placeholder,
                 required: true,
                 disabled: currentStatus === "loading",
-                className: "flex-1 bg-transparent px-3 py-2 text-sm text-[#F7F1E6] placeholder-[#B7AEA2]/60 focus:outline-none disabled:opacity-50",
+                className: "flex-1 bg-transparent px-3 py-2 text-body-2 text-bg-2 placeholder:text-sand-muted/60 focus:outline-none disabled:opacity-50",
                 "data-slot": "footer-newsletter-input"
               }
             ),
@@ -73,7 +73,7 @@ const FooterNewsletter = ({
               {
                 type: "submit",
                 disabled: currentStatus === "loading" || !email,
-                className: "inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-md bg-[#D39375] text-[#1A1714] font-title text-xs font-semibold uppercase tracking-wider hover:bg-[#D39375]/90 transition-all disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0",
+                className: "inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-md bg-primary-200 text-surface-dark font-title! text-body-3 font-semibold uppercase tracking-wider hover:bg-primary-200/90 transition-all disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0",
                 "data-slot": "footer-newsletter-button",
                 children: currentStatus === "loading" ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("span", { children: buttonText }),
@@ -82,7 +82,7 @@ const FooterNewsletter = ({
               }
             )
           ] }),
-          currentStatus === "error" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-red-400", children: [
+          currentStatus === "error" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-body-3 text-destructive", children: [
             /* @__PURE__ */ jsx(AlertCircle, { size: 14, className: "shrink-0" }),
             /* @__PURE__ */ jsx("span", { children: errorMessage })
           ] })

package/dist/components/NavFooter/subcomponents/FooterOffice.js

@@ -21,7 +21,7 @@ const FooterOffice = ({ office, className }) => {
         title && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "font-bold text-sm text-[#F7F1E6]/90 font-sans select-text",
+            className: "font-bold text-body-2 text-bg-2/90 select-text",
             "data-slot": "footer-office-title",
             children: title
           }
@@ -29,17 +29,17 @@ const FooterOffice = ({ office, className }) => {
         address && /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(footerOfficeBlockVariants(), "select-text text-sm"),
+            className: cn(footerOfficeBlockVariants(), "select-text text-body-2"),
             "data-slot": "footer-office-address",
             children: typeof address === "string" ? /* @__PURE__ */ jsx("p", { className: "m-0 leading-relaxed whitespace-pre-line", children: address }) : address
           }
         ),
-        (email || phone) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 pt-1 text-xs text-[#B7AEA2] font-sans", children: [
+        (email || phone) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 pt-1 text-body-3 text-sand-muted", children: [
           email && /* @__PURE__ */ jsx(
             "a",
             {
               href: `mailto:${email}`,
-              className: "hover:text-[#D39375] transition-colors inline-block select-text",
+              className: "hover:text-primary-200 transition-colors inline-block select-text",
               "data-slot": "footer-office-email",
               children: email
             }
@@ -48,7 +48,7 @@ const FooterOffice = ({ office, className }) => {
             "a",
             {
               href: `tel:${phone.replace(/\s+/g, "")}`,
-              className: "hover:text-[#D39375] transition-colors inline-block select-text",
+              className: "hover:text-primary-200 transition-colors inline-block select-text",
               "data-slot": "footer-office-phone",
               children: phone
             }

package/dist/components/NavFooter/subcomponents/FooterSocial.js

@@ -14,10 +14,10 @@ const FooterSocial = ({
 }) => {
   if (!links || links.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), "data-slot": "footer-social", children: [
-    title && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-[#D39375] uppercase tracking-[0.14em] font-title", children: title }),
+    title && /* @__PURE__ */ jsx("div", { className: "text-body-3 font-semibold text-primary-200 uppercase tracking-[0.14em] font-title!", children: title }),
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 sm:gap-6 flex-wrap", "data-slot": "footer-social-icons", children: links.map((link) => {
       const platformKey = link.name.toLowerCase();
-      const iconElement = link.icon ?? DefaultSocialIcons[platformKey] ?? /* @__PURE__ */ jsx("span", { className: "text-sm uppercase font-bold", children: link.name.slice(0, 2) });
+      const iconElement = link.icon ?? DefaultSocialIcons[platformKey] ?? /* @__PURE__ */ jsx("span", { className: "text-body-2 uppercase font-bold", children: link.name.slice(0, 2) });
       const defaultAria = `Follow us on ${link.name.charAt(0).toUpperCase() + link.name.slice(1)}`;
       return /* @__PURE__ */ jsx(
         motion.a,
@@ -33,7 +33,7 @@ const FooterSocial = ({
           whileTap: shouldAnimate ? "tap" : void 0,
           className: cn(
             footerSocialButtonVariants(),
-            "relative p-1.5 text-[#D39375] hover:text-[#F7F1E6] transition-colors",
+            "relative p-1.5 text-primary-200 hover:text-bg-2 transition-colors",
             motionClass,
             link.className
           ),

package/dist/components/NavHeader/NavHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavHeader.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,cAAc,EAMf,MAAM,mBAAmB,CAAC;AAa3B,eAAO,MAAM,SAAS,oFAqpBrB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,MAAM,oFAAY,CAAC"}
+{"version":3,"file":"NavHeader.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,cAAc,EAMf,MAAM,mBAAmB,CAAC;AAa3B,eAAO,MAAM,SAAS,oFA8pBrB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,MAAM,oFAAY,CAAC"}