@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/NavHeader/subcomponents/NavItems.js

@@ -60,16 +60,16 @@ const NavItems = ({
           };
           const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { children: item.label }),
-            item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center text-xs font-semibold px-1.5 py-0.5 rounded-full bg-primary-100 text-primary-800", children: item.badge }),
+            item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center text-body-3 font-semibold px-1.5 py-0.5 rounded-full bg-primary-100 text-primary-800", children: item.badge }),
             isActive && shouldAnimate && /* @__PURE__ */ jsx(
               motion.div,
               {
                 layoutId: "nav-header-active-indicator",
-                className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full",
+                className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary rounded-full",
                 transition: { type: "spring", stiffness: 500, damping: 35 }
               }
             ),
-            isActive && !shouldAnimate && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full" })
+            isActive && !shouldAnimate && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary rounded-full" })
           ] });
           const className = cn(
             navHeaderItemVariants({ active: isActive, disabled: item.disabled }),

package/dist/components/NavHeader/subcomponents/NavItemsOverflow.js

@@ -59,14 +59,14 @@ const NavItemsOverflow = ({
             onClick: () => setIsOpen((prev) => !prev),
             className: cn(
               navHeaderItemVariants({ active: isOpen || isChildActive }),
-              "px-2 py-2 flex items-center justify-center rounded-lg hover:bg-black/5 transition-colors",
+              "px-2 py-2 flex items-center justify-center rounded-lg hover:bg-grey-1000/5 transition-colors",
               !shouldAnimate && "transition-none",
               motionClass
             ),
             "data-slot": "nav-items-overflow-trigger",
             children: [
               /* @__PURE__ */ jsx(MoreHorizontal, { size: 20, className: "stroke-[2]" }),
-              (isOpen || isChildActive) && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-2 right-2 h-[2.5px] bg-[#C0643A] rounded-full" })
+              (isOpen || isChildActive) && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-2 right-2 h-[2.5px] bg-primary rounded-full" })
             ]
           }
         ),
@@ -78,7 +78,7 @@ const NavItemsOverflow = ({
             exit: shouldAnimate ? { opacity: 0, y: 6, scale: 0.97 } : void 0,
             transition: { duration: 0.18, ease: [0.25, 1, 0.5, 1] },
             className: cn(
-              "absolute top-full left-0 mt-2 w-56 bg-white border border-[#E7DFD3] shadow-2xl rounded-2xl p-2 z-50 text-left overflow-hidden divide-y divide-grey-100",
+              "absolute top-full left-0 mt-2 w-56 bg-grey-50 border border-border-warm shadow-2xl rounded-2xl p-2 z-50 text-left overflow-hidden divide-y divide-grey-100",
               !shouldAnimate && "transition-none",
               motionClass
             ),
@@ -98,13 +98,13 @@ const NavItemsOverflow = ({
                 item.crossZone
               );
               const itemRowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { className: cn("truncate", isActive && "text-[#C0643A] font-bold"), children: item.label }),
-                item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 rounded-full bg-primary-100 text-primary-800 text-[10px] font-bold", children: item.badge })
+                /* @__PURE__ */ jsx("span", { className: cn("truncate", isActive && "text-primary font-bold"), children: item.label }),
+                item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 rounded-full bg-primary-100 text-primary-800 text-caption font-bold", children: item.badge })
               ] });
               const itemClass = cn(
-                "w-full flex items-center justify-between gap-3 px-3 py-2 text-xs font-semibold text-[#3C3C3C] hover:text-[#C0643A] hover:bg-[#F7F1E6]/60 rounded-xl transition-colors cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C0643A]",
+                "w-full flex items-center justify-between gap-3 px-3 py-2 text-body-3 font-semibold text-grey-800 hover:text-primary hover:bg-bg-2/60 rounded-xl transition-colors cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
                 item.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
-                isActive && "bg-[#F7F1E6]/80 text-[#C0643A]",
+                isActive && "bg-bg-2/80 text-primary",
                 item.className
               );
               const handleClick = (e) => {

package/dist/components/NavHeader/subcomponents/NavMobileSearchDrawer.js

@@ -78,14 +78,14 @@ const NavMobileSearchDrawer = ({
       className: cn(mobileSearchDrawerVariants(), motionClass),
       "data-slot": "nav-mobile-search-drawer",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "w-full bg-[var(--color-bg-2,#F7F1E6)] border-b border-[#E7DFD3] px-3 py-3 flex items-center gap-3 shrink-0 shadow-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full bg-[var(--color-bg-2,#F7F1E6)] border-b border-border-warm px-3 py-3 flex items-center gap-3 shrink-0 shadow-xs", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: onClose,
               "aria-label": "Close search and go back",
-              className: "w-10 h-10 rounded-full flex items-center justify-center text-grey-800 hover:text-[#C0643A] hover:bg-black/5 transition-colors cursor-pointer shrink-0",
+              className: "w-10 h-10 rounded-full flex items-center justify-center text-grey-800 hover:text-primary hover:bg-grey-1000/5 transition-colors cursor-pointer shrink-0",
               "data-slot": "nav-mobile-search-back-btn",
               children: /* @__PURE__ */ jsx(ArrowLeft, { size: 22, className: "stroke-[2]" })
             }
@@ -108,7 +108,7 @@ const NavMobileSearchDrawer = ({
                 value,
                 onChange: (e) => onChange(e.target.value),
                 placeholder: searchConfig.placeholder ?? "Search for furniture, decor, and more...",
-                className: "w-full h-11 pl-10 pr-9 rounded-full bg-white border border-[#E7DFD3] text-sm text-grey-900 placeholder:text-grey-400 focus:outline-none focus:border-[#C0643A] focus:ring-2 focus:ring-[#C0643A]/20 transition-all shadow-xs"
+                className: "w-full h-11 pl-10 pr-9 rounded-full bg-grey-50 border border-border-warm text-body-2 text-grey-900 placeholder:text-grey-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all shadow-xs"
               }
             ),
             value.length > 0 && /* @__PURE__ */ jsx(
@@ -125,13 +125,13 @@ const NavMobileSearchDrawer = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 sm:p-6 space-y-6 bg-[var(--color-bg-2,#F7F1E6)]", children: [
           searchConfig.popularSearches && searchConfig.popularSearches.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx("h4", { className: "font-title text-xs font-semibold text-grey-500 uppercase tracking-wider", children: "POPULAR SEARCHES" }),
+            /* @__PURE__ */ jsx("h4", { className: "font-title! text-body-3 font-semibold text-grey-500 uppercase tracking-wider", children: "POPULAR SEARCHES" }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: searchConfig.popularSearches.map((item) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: () => handlePopularSearchClick(item.label),
-                className: "px-3.5 py-1.5 rounded-full bg-white border border-[#E7DFD3] text-xs font-semibold text-grey-700 hover:border-[#C0643A] hover:text-[#C0643A] hover:bg-white transition-colors cursor-pointer shadow-xs",
+                className: "px-3.5 py-1.5 rounded-full bg-grey-50 border border-border-warm text-body-3 font-semibold text-grey-700 hover:border-primary hover:text-primary hover:bg-grey-50 transition-colors cursor-pointer shadow-xs",
                 children: item.label
               },
               item.id

package/dist/components/NavHeader/subcomponents/NavMobileTabSlider.js

@@ -41,10 +41,10 @@ const NavMobileTabSlider = ({
           motion.div,
           {
             layoutId: "active-mobile-tab-indicator",
-            className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full",
+            className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary rounded-full",
             transition: { type: "spring", stiffness: 380, damping: 30 }
           }
-        ) : isActive ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full" }) : null;
+        ) : isActive ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary rounded-full" }) : null;
         if (resolvedHref && !item.content && !item.disabled) {
           if (CustomLink && !requiresCrossZone) {
             return /* @__PURE__ */ jsxs(

package/dist/components/NavHeader/subcomponents/NavSearch.js

@@ -100,7 +100,7 @@ const NavSearch = ({
         "data-slot": "nav-search-trigger",
         children: [
           /* @__PURE__ */ jsx(Search, { size: 22, className: "shrink-0 stroke-[1.8]" }),
-          /* @__PURE__ */ jsx("span", { className: "font-sans font-bold text-[10px] tracking-[0.0926em] uppercase", children: "SEARCH" })
+          /* @__PURE__ */ jsx("span", { className: "font-bold text-caption tracking-[0.0926em] uppercase", children: "SEARCH" })
         ]
       }
     ),
@@ -113,7 +113,7 @@ const NavSearch = ({
         transition: { duration: 0.28, ease: [0.25, 1, 0.5, 1] },
         className: cn("relative flex flex-col", !shouldAnimate && "transition-none", motionClass),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full h-10 bg-white border border-grey-300 rounded-full shadow-sm focus-within:ring-2 focus-within:ring-[#C0643A]/30 focus-within:border-[#C0643A] overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full h-10 bg-grey-50 border border-grey-300 rounded-full shadow-sm focus-within:ring-2 focus-within:ring-primary/30 focus-within:border-primary overflow-hidden", children: [
             /* @__PURE__ */ jsx(
               Search,
               {
@@ -134,7 +134,7 @@ const NavSearch = ({
                 onChange: (e) => onChange(e.target.value),
                 onFocus: () => setShowPopover(true),
                 onKeyDown: handleKeyDown,
-                className: "w-full h-full pl-10 pr-9 bg-transparent text-sm text-[#1A1A1A] placeholder:text-grey-400 border-none focus:outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
+                className: "w-full h-full pl-10 pr-9 bg-transparent text-body-2 text-grey-950 placeholder:text-grey-400 border-none focus:outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
                 "data-slot": "nav-search-input"
               }
             ),
@@ -165,7 +165,7 @@ const NavSearch = ({
               className: cn(searchPopoverCardVariants(), !shouldAnimate && "transition-none", motionClass),
               "data-slot": "nav-search-popover",
               children: popoverContent ? popoverContent : /* @__PURE__ */ jsxs("div", { children: [
-                popularSearchesTitle && /* @__PURE__ */ jsx("h4", { className: "font-sans font-bold text-sm tracking-wide text-[#E11D48] mb-3 uppercase flex items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { children: popularSearchesTitle }) }),
+                popularSearchesTitle && /* @__PURE__ */ jsx("h4", { className: "font-bold text-body-2 tracking-wide text-destructive mb-3 uppercase flex items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { children: popularSearchesTitle }) }),
                 /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: popularSearches.map((tag, idx) => {
                   const resolvedTagHref = resolveNavDestination(tag.href, tag.zone, globalConfig.zones?.zones);
                   const requiresCrossZone = isCrossZoneNavigation(tag.zone, globalConfig.zones?.currentZone);
@@ -173,7 +173,7 @@ const NavSearch = ({
                     /* @__PURE__ */ jsx(TrendingUp, { size: 13, className: "text-grey-500 shrink-0" }),
                     /* @__PURE__ */ jsx("span", { children: tag.label })
                   ] });
-                  const tagClass = "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-grey-200 bg-white hover:border-grey-400 hover:bg-grey-50 text-xs font-medium text-grey-800 transition-all cursor-pointer";
+                  const tagClass = "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-grey-200 bg-grey-50 hover:border-grey-400 hover:bg-grey-50 text-body-3 font-medium text-grey-800 transition-all cursor-pointer";
                   if (resolvedTagHref) {
                     if (CustomLink && !requiresCrossZone) {
                       return /* @__PURE__ */ jsx(

package/dist/components/NavHeader/subcomponents/OfferBanner.js

@@ -80,7 +80,7 @@ const OfferBanner = ({
             type: "button",
             onClick: handleDismiss,
             "aria-label": "Dismiss offer banner",
-            className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-[#F7F1E6]/70 hover:text-[#F7F1E6] hover:bg-white/10 rounded transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white",
+            className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-bg-2/70 hover:text-bg-2 hover:bg-grey-50/10 rounded transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-grey-50",
             children: /* @__PURE__ */ jsx(X, { size: 14 })
           }
         )

package/dist/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { OtpInputProps } from './OtpInput.types';
+export declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=OtpInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/OtpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,kBAAkB,CAAC;AAsCpE,eAAO,MAAM,QAAQ,wFAwEpB,CAAC"}

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { OTPInput } from 'input-otp';
+import { cn } from '@timmbr/utils';
+import { otpContainerVariants, otpSlotVariants } from './OtpInput.styles.js';
+
+function OtpSlot({
+  char,
+  isActive,
+  hasFakeCaret,
+  variant = "default",
+  size = "md",
+  error = false,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "otp-slot",
+      className: cn(
+        otpSlotVariants({
+          variant,
+          size,
+          isActive,
+          hasError: error
+        }),
+        className
+      ),
+      children: [
+        char,
+        hasFakeCaret && !disabled && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "otp-caret",
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            children: /* @__PURE__ */ jsx("div", { className: "h-4 w-0.5 animate-caret-blink bg-primary duration-1000" })
+          }
+        )
+      ]
+    }
+  );
+}
+const OtpInput = React.forwardRef(
+  ({
+    length = 6,
+    value,
+    defaultValue,
+    onChange,
+    onComplete,
+    variant = "default",
+    size = "md",
+    error = false,
+    disabled = false,
+    autoFocus = false,
+    containerClassName,
+    className,
+    ...props
+  }, ref) => {
+    const hasError = Boolean(error);
+    const errorId = React.useId();
+    const errorText = typeof error === "string" && error.length > 0 ? error : null;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "otp-input-root", className: "w-full flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx(
+        OTPInput,
+        {
+          ref,
+          maxLength: length,
+          value,
+          defaultValue,
+          onChange,
+          onComplete,
+          disabled,
+          autoFocus,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": errorText ? errorId : void 0,
+          containerClassName: cn(
+            otpContainerVariants({ disabled }),
+            containerClassName
+          ),
+          className: cn("disabled:cursor-not-allowed", className),
+          render: ({ slots }) => /* @__PURE__ */ jsx(Fragment, { children: slots.map((slot, idx) => /* @__PURE__ */ jsx(
+            OtpSlot,
+            {
+              char: slot.char,
+              isActive: slot.isActive,
+              hasFakeCaret: slot.hasFakeCaret,
+              variant,
+              size,
+              error: hasError,
+              disabled
+            },
+            idx
+          )) }),
+          ...props
+        }
+      ),
+      errorText && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          role: "alert",
+          "data-slot": "otp-error",
+          className: "mt-2 text-body-3 text-destructive text-center font-medium",
+          children: errorText
+        }
+      )
+    ] });
+  }
+);
+OtpInput.displayName = "OtpInput";
+
+export { OtpInput };

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

@@ -0,0 +1,10 @@
+export declare const otpContainerVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const otpSlotVariants: (props?: ({
+    variant?: "default" | "underline" | "filled" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isActive?: boolean | null | undefined;
+    hasError?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=OtpInput.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/OtpInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;8EAahC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;8EAiC3B,CAAC"}

package/dist/components/OtpInput/OtpInput.styles.js

@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority';
+
+const otpContainerVariants = cva(
+  "flex items-center gap-2 select-none justify-center",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+const otpSlotVariants = cva(
+  "relative flex items-center justify-center tabular-nums font-semibold transition-all duration-150",
+  {
+    variants: {
+      variant: {
+        default: "rounded-lg border bg-bg-1/30 border-border-warm text-grey-950",
+        filled: "rounded-lg border border-transparent bg-bg-1 text-grey-950",
+        underline: "rounded-none border-b-2 border-t-0 border-x-0 border-border-warm bg-transparent text-grey-950"
+      },
+      size: {
+        sm: "w-8 h-10 text-body-1",
+        md: "w-11 h-13 text-h5",
+        lg: "w-13 h-15 text-h4"
+      },
+      isActive: {
+        true: "border-primary ring-2 ring-primary/25 z-10",
+        false: ""
+      },
+      hasError: {
+        true: "!border-destructive !ring-destructive/20 text-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      isActive: false,
+      hasError: false
+    }
+  }
+);
+
+export { otpContainerVariants, otpSlotVariants };

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

@@ -0,0 +1,40 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type OtpInputVariant = 'default' | 'filled' | 'underline';
+export type OtpInputSize = 'sm' | 'md' | 'lg';
+export interface OtpInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value' | 'defaultValue' | 'children'> {
+    /** Number of OTP character slots. Defaults to 6. */
+    length?: number;
+    /** Controlled value */
+    value?: string;
+    /** Default uncontrolled value */
+    defaultValue?: string;
+    /** Callback fired on character change */
+    onChange?: (value: string) => void;
+    /** Callback fired when all slots are filled */
+    onComplete?: (value: string) => void;
+    /** Visual variant. Defaults to 'default'. */
+    variant?: OtpInputVariant;
+    /** Size scale. Defaults to 'md'. */
+    size?: OtpInputSize;
+    /** Error state or error message */
+    error?: boolean | string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether to focus automatically on mount */
+    autoFocus?: boolean;
+    /** Custom wrapper class */
+    containerClassName?: string;
+    /** Explicitly disallow children as OtpInput uses internal slot rendering */
+    children?: never;
+}
+export interface OtpSlotProps {
+    char: string | null;
+    isActive: boolean;
+    hasFakeCaret: boolean;
+    variant?: OtpInputVariant;
+    size?: OtpInputSize;
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=OtpInput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/OtpInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;AACjE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5G,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OtpInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { PageHeaderProps } from './PageHeader.types';
+/**
+ * Title block at the top of a page or section: heading, optional description,
+ * a back link and actions (buttons) aligned to the end.
+ */
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=PageHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,qFAwDtB,CAAC"}

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { ChevronLeft } from '@timmbr/icons';
+import { pageHeaderTitleVariants, pageHeaderVariants } from './PageHeader.styles.js';
+import { LinkButton } from '../LinkButton/LinkButton.js';
+import { Text } from '../Text/Text.js';
+
+const PageHeader = React.forwardRef(
+  ({
+    title,
+    description,
+    actions,
+    back,
+    as: Heading = "h1",
+    size = "default",
+    divider = false,
+    titleId,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      "data-slot": "page-header",
+      className: cn(pageHeaderVariants({ divider }), className),
+      ...props,
+      children: [
+        back && /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            href: back.href,
+            crossZone: back.crossZone,
+            variant: "back",
+            "aria-label": back.ariaLabel,
+            leftIcon: /* @__PURE__ */ jsx(ChevronLeft, { size: 18, "aria-hidden": "true" }),
+            className: "mb-2 w-fit",
+            "data-slot": "page-header-back",
+            children: back.label
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(Heading, { id: titleId, className: pageHeaderTitleVariants({ size }), "data-slot": "page-header-title", children: title }),
+            description && /* @__PURE__ */ jsx(Text, { asChild: true, variant: "body-2", foreground: "muted", children: /* @__PURE__ */ jsx("div", { className: "mt-1", "data-slot": "page-header-description", children: description }) })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", "data-slot": "page-header-actions", children: actions })
+        ] })
+      ]
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
+
+export { PageHeader };

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

@@ -0,0 +1,10 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const pageHeaderVariants: (props?: ({
+    divider?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const pageHeaderTitleVariants: (props?: ({
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PageHeaderVariants = VariantProps<typeof pageHeaderVariants>;
+export type PageHeaderTitleVariants = VariantProps<typeof pageHeaderTitleVariants>;
+//# sourceMappingURL=PageHeader.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,kBAAkB;;8EAQ7B,CAAC;AAEH,eAAO,MAAM,uBAAuB;;8EASlC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACzE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/components/PageHeader/PageHeader.styles.js

@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority';
+
+const pageHeaderVariants = cva("flex flex-col font-sans", {
+  variants: {
+    divider: {
+      true: "border-b border-border pb-4",
+      false: ""
+    }
+  },
+  defaultVariants: { divider: false }
+});
+const pageHeaderTitleVariants = cva("text-foreground tracking-tight", {
+  variants: {
+    size: {
+      sm: "text-h5",
+      default: "text-h4",
+      lg: "text-h3"
+    }
+  },
+  defaultVariants: { size: "default" }
+});
+
+export { pageHeaderTitleVariants, pageHeaderVariants };

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

@@ -0,0 +1,24 @@
+import type * as React from 'react';
+import type { PageHeaderTitleVariants, PageHeaderVariants } from './PageHeader.styles';
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>, PageHeaderVariants, PageHeaderTitleVariants {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Buttons or links aligned to the end of the title row. */
+    actions?: React.ReactNode;
+    /**
+     * "‹ Back" link above the title, rendered by LinkButton (`variant="back"`).
+     * Same-app links use next/link (base path aware); set `crossZone` for a
+     * full navigation to another app.
+     */
+    back?: {
+        href: string;
+        label: React.ReactNode;
+        crossZone?: boolean;
+        ariaLabel?: string;
+    };
+    /** `id` of the heading, for `aria-labelledby` on a surrounding section. */
+    titleId?: string;
+    /** Heading element. Defaults to `h1`; use `h2` for sections within a page. */
+    as?: 'h1' | 'h2' | 'h3';
+}
+//# sourceMappingURL=PageHeader.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.types.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEvF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,kBAAkB,EAClB,uBAAuB;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzF,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACzB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

package/dist/components/Pagination/Pagination.d.ts

@@ -1,15 +1,21 @@
 import * as React from 'react';
-import type { PaginationProps, PaginationContentProps, PaginationItemProps, PaginationLinkProps, PaginationPreviousProps, PaginationNextProps, PaginationEllipsisProps } from './Pagination.types';
+import type { PaginationProps, PaginationContentProps, PaginationItemProps, PaginationLinkProps, PaginationPreviousProps, PaginationNextProps, PaginationEllipsisProps, PaginationSummaryProps } from './Pagination.types';
 export declare const Pagination: React.FC<PaginationProps>;
 export declare const PaginationContent: React.ForwardRefExoticComponent<Omit<PaginationContentProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export declare const PaginationItem: React.ForwardRefExoticComponent<Omit<PaginationItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+/** A page button, or (with `asChild`) a link such as `next/link`. */
 export declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const PaginationPrevious: {
-    ({ className, ...props }: PaginationPreviousProps): React.JSX.Element;
+    ({ label, ariaLabel, ...props }: PaginationPreviousProps): React.JSX.Element;
     displayName: string;
 };
 export declare const PaginationNext: {
-    ({ className, ...props }: PaginationNextProps): React.JSX.Element;
+    ({ label, ariaLabel, ...props }: PaginationNextProps): React.JSX.Element;
+    displayName: string;
+};
+/** "Page 2 of 5" between the step links (announced politely when it changes). */
+export declare const PaginationSummary: {
+    ({ className, ...props }: PaginationSummaryProps): React.JSX.Element;
     displayName: string;
 };
 export declare const PaginationEllipsis: {

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAQhD,CAAC;AAGF,eAAO,MAAM,iBAAiB,8GAS7B,CAAC;AAGF,eAAO,MAAM,cAAc,wGAI1B,CAAC;AAGF,eAAO,MAAM,cAAc,+FAY1B,CAAC;AAGF,eAAO,MAAM,kBAAkB;8BAG5B,uBAAuB;;CASzB,CAAC;AAGF,eAAO,MAAM,cAAc;8BAGxB,mBAAmB;;CASrB,CAAC;AAGF,eAAO,MAAM,kBAAkB;8BAG5B,uBAAuB;;CAUzB,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EAEvB,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAOhD,CAAC;AAGF,eAAO,MAAM,iBAAiB,8GAS7B,CAAC;AAGF,eAAO,MAAM,cAAc,wGAI1B,CAAC;AAGF,qEAAqE;AACrE,eAAO,MAAM,cAAc,+FAe1B,CAAC;AAsDF,eAAO,MAAM,kBAAkB;qCAI5B,uBAAuB;;CAAqF,CAAC;AAGhH,eAAO,MAAM,cAAc;qCAIxB,mBAAmB;;CAAiF,CAAC;AAGxG,iFAAiF;AACjF,eAAO,MAAM,iBAAiB;8BAA6B,sBAAsB;;CAUhF,CAAC;AAGF,eAAO,MAAM,kBAAkB;8BAG5B,uBAAuB;;CAUzB,CAAC"}