@timmbr/ui 1.3.1 → 1.4.0

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion, footerChevronVariants, AnimatePresence, footerAccordionVariants } from '@timmbr/motion';
+import { ChevronDown } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { footerSectionTitleVariants, footerNavLinkVariants } from '../NavFooter.styles.js';
+import { resolveNavDestination, isCrossZoneNavigation } from '../NavFooter.helpers.js';
+import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
+
+const FooterNavSection = ({
+  section,
+  isMobileAccordion = true,
+  isOpen = false,
+  onToggle,
+  shouldAnimate = true,
+  motionClass,
+  linkComponent: CustomLink,
+  className
+}) => {
+  const config = useTimmbrConfig();
+  const { id, title, items = [], collapsible = true, className: sectionClass } = section;
+  const contentId = `footer-section-content-${id}`;
+  const headerId = `footer-section-header-${id}`;
+  const renderLink = (item) => {
+    if (item.render) {
+      return /* @__PURE__ */ jsx("li", { className: "list-none", children: item.render({ item }) }, item.id ?? String(item.label));
+    }
+    const resolvedHref = resolveNavDestination(item.href, item.zone, config.zones?.zones) ?? "#";
+    const requiresCrossZone = isCrossZoneNavigation(item.zone, config.zones?.currentZone, item.crossZone);
+    const isExternal = item.external || item.href.startsWith("http://") || item.href.startsWith("https://");
+    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 })
+    ] });
+    const linkProps = {
+      href: resolvedHref,
+      target: item.target ?? (isExternal ? "_blank" : void 0),
+      rel: item.rel ?? (isExternal ? "noopener noreferrer" : void 0),
+      onClick: item.onClick,
+      className: cn(footerNavLinkVariants(), item.className),
+      "data-cross-zone": requiresCrossZone ? "true" : void 0,
+      "data-slot": "footer-nav-link"
+    };
+    return /* @__PURE__ */ jsx("li", { className: "list-none", children: CustomLink && !requiresCrossZone && !isExternal ? /* @__PURE__ */ jsx(CustomLink, { ...linkProps, children: linkContent }) : /* @__PURE__ */ jsx("a", { ...linkProps, children: linkContent }) }, item.id ?? String(item.label));
+  };
+  const linksList = /* @__PURE__ */ jsx(
+    "ul",
+    {
+      id: contentId,
+      role: "region",
+      "aria-labelledby": headerId,
+      className: "flex flex-col gap-3.5 pt-1 pb-3 md:py-0 list-none p-0 m-0",
+      "data-slot": "footer-nav-links-list",
+      children: items.map(renderLink)
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col border-b border-white/10 md:border-b-0 py-3 md:py-0 transition-colors",
+        sectionClass,
+        className
+      ),
+      "data-slot": "footer-nav-section",
+      "data-section-id": id,
+      children: [
+        isMobileAccordion && collapsible ? /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: headerId,
+              type: "button",
+              "aria-expanded": isOpen,
+              "aria-controls": contentId,
+              onClick: onToggle,
+              className: cn(
+                footerSectionTitleVariants(),
+                "py-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D39375]/50 rounded"
+              ),
+              "data-slot": "footer-section-accordion-trigger",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: title }),
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    variants: shouldAnimate ? footerChevronVariants : void 0,
+                    initial: false,
+                    animate: shouldAnimate ? isOpen ? "expanded" : "collapsed" : void 0,
+                    className: cn(
+                      "shrink-0 text-[#D39375] transition-transform duration-200",
+                      !shouldAnimate && (isOpen ? "rotate-180" : "rotate-0"),
+                      motionClass
+                    ),
+                    children: /* @__PURE__ */ jsx(ChevronDown, { size: 18, className: "stroke-[2]" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: shouldAnimate ? "hidden" : false,
+              animate: shouldAnimate ? "visible" : void 0,
+              exit: shouldAnimate ? "exit" : void 0,
+              variants: shouldAnimate ? footerAccordionVariants : void 0,
+              className: cn("overflow-hidden", motionClass),
+              children: linksList
+            }
+          ) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: cn(isMobileAccordion && collapsible ? "hidden md:flex flex-col gap-5" : "flex flex-col gap-5"), children: [
+          /* @__PURE__ */ jsx("div", { className: footerSectionTitleVariants(), "data-slot": "footer-section-title", children: /* @__PURE__ */ jsx("span", { children: title }) }),
+          linksList
+        ] })
+      ]
+    }
+  );
+};
+
+export { FooterNavSection };

package/dist/components/NavFooter/subcomponents/FooterNewsletter.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { NavFooterNewsletterConfig } from '../NavFooter.types';
+export interface FooterNewsletterProps {
+    newsletter?: NavFooterNewsletterConfig;
+    className?: string;
+}
+export declare const FooterNewsletter: React.FC<FooterNewsletterProps>;
+export default FooterNewsletter;
+//# sourceMappingURL=FooterNewsletter.d.ts.map

package/dist/components/NavFooter/subcomponents/FooterNewsletter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterNewsletter.d.ts","sourceRoot":"","sources":["../../../../src/components/NavFooter/subcomponents/FooterNewsletter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyG5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,95 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { CheckCircle, Loader2, ArrowRight, AlertCircle } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+
+const FooterNewsletter = ({
+  newsletter,
+  className
+}) => {
+  const {
+    title = "Stay in the loop",
+    description = "Sign up for our newsletter to receive updates and exclusive offers.",
+    placeholder = "Enter your email...",
+    buttonText = "Subscribe",
+    onSubmit,
+    status: controlledStatus,
+    errorMessage = "Something went wrong. Please try again.",
+    successMessage = "Thank you for subscribing!",
+    className: newsletterClass
+  } = newsletter || {};
+  const [email, setEmail] = React.useState("");
+  const [internalStatus, setInternalStatus] = React.useState("idle");
+  const currentStatus = controlledStatus !== void 0 ? controlledStatus : internalStatus;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!email || !email.includes("@") || currentStatus === "loading") return;
+    if (onSubmit) {
+      try {
+        setInternalStatus("loading");
+        await onSubmit(email);
+        setInternalStatus("success");
+        setEmail("");
+      } catch {
+        setInternalStatus("error");
+      }
+    } else {
+      setInternalStatus("success");
+      setEmail("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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: [
+          /* @__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__ */ jsx(
+              "input",
+              {
+                type: "email",
+                value: email,
+                onChange: (e) => {
+                  setEmail(e.target.value);
+                  if (currentStatus === "error") setInternalStatus("idle");
+                },
+                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",
+                "data-slot": "footer-newsletter-input"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                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",
+                "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 }),
+                  /* @__PURE__ */ jsx(ArrowRight, { size: 14, className: "stroke-[2.5]" })
+                ] })
+              }
+            )
+          ] }),
+          currentStatus === "error" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-red-400", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: errorMessage })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { FooterNewsletter };

package/dist/components/NavFooter/subcomponents/FooterOffice.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { NavFooterOfficeConfig } from '../NavFooter.types';
+export interface FooterOfficeProps {
+    office?: NavFooterOfficeConfig;
+    className?: string;
+}
+export declare const FooterOffice: React.FC<FooterOfficeProps>;
+export default FooterOffice;
+//# sourceMappingURL=FooterOffice.d.ts.map

package/dist/components/NavFooter/subcomponents/FooterOffice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterOffice.d.ts","sourceRoot":"","sources":["../../../../src/components/NavFooter/subcomponents/FooterOffice.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+DpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { footerOfficeBlockVariants } from '../NavFooter.styles.js';
+
+const FooterOffice = ({ office, className }) => {
+  const {
+    title = "Registered Office:",
+    address = "Timmbr Furnitures SABN Kallappa Layout, Ashwini Extenstion, Chintamani Karnataka 563125",
+    email,
+    phone,
+    extraContent,
+    className: officeClass
+  } = office || {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-2 max-w-[320px]", officeClass, className),
+      "data-slot": "footer-office",
+      children: [
+        title && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "font-bold text-sm text-[#F7F1E6]/90 font-sans select-text",
+            "data-slot": "footer-office-title",
+            children: title
+          }
+        ),
+        address && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(footerOfficeBlockVariants(), "select-text text-sm"),
+            "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 && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `mailto:${email}`,
+              className: "hover:text-[#D39375] transition-colors inline-block select-text",
+              "data-slot": "footer-office-email",
+              children: email
+            }
+          ),
+          phone && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `tel:${phone.replace(/\s+/g, "")}`,
+              className: "hover:text-[#D39375] transition-colors inline-block select-text",
+              "data-slot": "footer-office-phone",
+              children: phone
+            }
+          )
+        ] }),
+        extraContent
+      ]
+    }
+  );
+};
+
+export { FooterOffice };

package/dist/components/NavFooter/subcomponents/FooterSocial.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { NavFooterSocialLink } from '../NavFooter.types';
+export interface FooterSocialProps {
+    links?: NavFooterSocialLink[];
+    title?: React.ReactNode;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    className?: string;
+}
+export declare const FooterSocial: React.FC<FooterSocialProps>;
+export default FooterSocial;
+//# sourceMappingURL=FooterSocial.d.ts.map

package/dist/components/NavFooter/subcomponents/FooterSocial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterSocial.d.ts","sourceRoot":"","sources":["../../../../src/components/NavFooter/subcomponents/FooterSocial.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAI9D,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsDpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion, footerSocialHoverVariants } from '@timmbr/motion';
+import { cn } from '@timmbr/utils';
+import { footerSocialButtonVariants } from '../NavFooter.styles.js';
+import { DefaultSocialIcons } from '../NavFooter.helpers.js';
+
+const FooterSocial = ({
+  links = [],
+  title,
+  shouldAnimate = true,
+  motionClass,
+  className
+}) => {
+  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 }),
+    /* @__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 defaultAria = `Follow us on ${link.name.charAt(0).toUpperCase() + link.name.slice(1)}`;
+      return /* @__PURE__ */ jsx(
+        motion.a,
+        {
+          href: link.href,
+          target: link.target ?? "_blank",
+          rel: link.rel ?? "noopener noreferrer",
+          "aria-label": link.ariaLabel ?? defaultAria,
+          onClick: link.onClick,
+          variants: shouldAnimate ? footerSocialHoverVariants : void 0,
+          initial: "initial",
+          whileHover: shouldAnimate ? "hover" : void 0,
+          whileTap: shouldAnimate ? "tap" : void 0,
+          className: cn(
+            footerSocialButtonVariants(),
+            "relative p-1.5 text-[#D39375] hover:text-[#F7F1E6] transition-colors",
+            motionClass,
+            link.className
+          ),
+          "data-slot": "footer-social-link",
+          "data-platform": link.name,
+          children: iconElement
+        },
+        `${link.name}-${link.href}`
+      );
+    }) })
+  ] });
+};
+
+export { FooterSocial };

package/dist/test-mocks/next-headers.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=next-headers.d.ts.map

package/dist/test-mocks/next-headers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"next-headers.d.ts","sourceRoot":"","sources":["../../src/test-mocks/next-headers.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmbr/ui",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
   "type": "module",
   "main": "./dist/index.js",
@@ -41,11 +41,11 @@
     "@radix-ui/react-toast": "^1.2.23",
     "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.1",
+    "@timmbr/motion": "1.2.0",
+    "@timmbr/icons": "1.2.1",
     "@timmbr/hooks": "1.0.0-beta",
-    "@timmbr/motion": "1.1.0",
-    "@timmbr/utils": "1.1.0",
-    "@timmbr/icons": "1.2.0",
-    "@timmbr/theme": "1.1.0"
+    "@timmbr/theme": "1.2.0",
+    "@timmbr/utils": "1.2.0"
   },
   "peerDependencies": {
     "next": ">=13.0.0 || >=14.0.0 || >=15.0.0 || >=16.0.0",