@n3wth/ui 0.7.0 → 0.9.0

package/dist/organisms/Hero/Hero.js

@@ -0,0 +1,101 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
+import { Badge as h } from "../../atoms/Badge/Badge.js";
+import { Button as y } from "../../atoms/Button/Button.js";
+function j({
+  badge: s,
+  title: r,
+  description: i,
+  ctas: m = [],
+  align: a = "center",
+  size: n = "default",
+  gradient: x = !0,
+  className: o,
+  ...d
+}) {
+  const c = {
+    left: "text-left items-start",
+    center: "text-center items-center"
+  }, f = {
+    default: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl",
+    large: "text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl"
+  };
+  return /* @__PURE__ */ e(
+    "section",
+    {
+      className: t(
+        "relative",
+        "px-4 sm:px-6 py-12 sm:py-20 md:py-24 lg:py-32 xl:py-40",
+        o
+      ),
+      ...d,
+      children: /* @__PURE__ */ g(
+        "div",
+        {
+          className: t(
+            "mx-auto max-w-4xl",
+            "flex flex-col gap-4 sm:gap-6 md:gap-8",
+            c[a]
+          ),
+          children: [
+            s && /* @__PURE__ */ e(h, { variant: "default", size: "md", className: "animate-in", children: s }),
+            /* @__PURE__ */ e(
+              "h1",
+              {
+                className: t(
+                  "font-display font-semibold tracking-tight",
+                  f[n],
+                  x ? "hero-gradient-text" : "text-[var(--color-white)]",
+                  "animate-in",
+                  "leading-tight sm:leading-snug"
+                ),
+                style: { animationDelay: "0.1s", textAlign: a === "center" ? "center" : "left", width: "100%", display: "block" },
+                children: r
+              }
+            ),
+            i && /* @__PURE__ */ e(
+              "p",
+              {
+                className: t(
+                  "text-base sm:text-lg md:text-xl",
+                  "text-[var(--color-grey-400)]",
+                  "max-w-2xl leading-relaxed sm:leading-relaxed",
+                  "animate-in",
+                  "px-0 sm:px-0"
+                ),
+                style: { animationDelay: "0.2s" },
+                children: i
+              }
+            ),
+            m.length > 0 && /* @__PURE__ */ e(
+              "div",
+              {
+                className: t(
+                  "flex flex-col sm:flex-wrap gap-3 sm:gap-4 mt-2 sm:mt-4 w-full sm:w-auto",
+                  a === "center" ? "sm:justify-center" : "sm:justify-start",
+                  "animate-in"
+                ),
+                style: { animationDelay: "0.3s" },
+                children: m.map((l, p) => /* @__PURE__ */ e(
+                  y,
+                  {
+                    variant: l.variant || (p === 0 ? "primary" : "secondary"),
+                    size: "lg",
+                    asChild: !0,
+                    className: "w-full sm:w-auto",
+                    children: /* @__PURE__ */ e("a", { href: l.href, children: l.label })
+                  },
+                  l.href
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  j as Hero
+};
+//# sourceMappingURL=Hero.js.map

package/dist/organisms/Hero/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sources":["../../../src/organisms/Hero/Hero.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\nimport { Badge } from '../../atoms/Badge'\nimport { Button } from '../../atoms/Button'\n\nexport interface HeroCTA {\n  label: string\n  href: string\n  variant?: 'primary' | 'secondary' | 'ghost'\n}\n\nexport interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  badge?: string\n  title: ReactNode\n  description?: ReactNode\n  ctas?: HeroCTA[]\n  align?: 'left' | 'center'\n  size?: 'default' | 'large'\n  gradient?: boolean\n}\n\nexport function Hero({\n  badge,\n  title,\n  description,\n  ctas = [],\n  align = 'center',\n  size = 'default',\n  gradient = true,\n  className,\n  ...props\n}: HeroProps) {\n  const alignments = {\n    left: 'text-left items-start',\n    center: 'text-center items-center',\n  }\n\n  const titleSizes = {\n    default: 'text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl',\n    large: 'text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl',\n  }\n\n  return (\n    <section\n      className={cn(\n        'relative',\n        'px-4 sm:px-6 py-12 sm:py-20 md:py-24 lg:py-32 xl:py-40',\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto max-w-4xl',\n          'flex flex-col gap-4 sm:gap-6 md:gap-8',\n          alignments[align]\n        )}\n      >\n        {badge && (\n          <Badge variant=\"default\" size=\"md\" className=\"animate-in\">\n            {badge}\n          </Badge>\n        )}\n\n        <h1\n          className={cn(\n            'font-display font-semibold tracking-tight',\n            titleSizes[size],\n            gradient ? 'hero-gradient-text' : 'text-[var(--color-white)]',\n            'animate-in',\n            'leading-tight sm:leading-snug'\n          )}\n          style={{ animationDelay: '0.1s', textAlign: align === 'center' ? 'center' : 'left', width: '100%', display: 'block' }}\n        >\n          {title}\n        </h1>\n\n        {description && (\n          <p\n            className={cn(\n              'text-base sm:text-lg md:text-xl',\n              'text-[var(--color-grey-400)]',\n              'max-w-2xl leading-relaxed sm:leading-relaxed',\n              'animate-in',\n              'px-0 sm:px-0'\n            )}\n            style={{ animationDelay: '0.2s' }}\n          >\n            {description}\n          </p>\n        )}\n\n        {ctas.length > 0 && (\n          <div\n            className={cn(\n              'flex flex-col sm:flex-wrap gap-3 sm:gap-4 mt-2 sm:mt-4 w-full sm:w-auto',\n              align === 'center' ? 'sm:justify-center' : 'sm:justify-start',\n              'animate-in'\n            )}\n            style={{ animationDelay: '0.3s' }}\n          >\n            {ctas.map((cta, index) => (\n              <Button\n                key={cta.href}\n                variant={cta.variant || (index === 0 ? 'primary' : 'secondary')}\n                size=\"lg\"\n                asChild\n                className=\"w-full sm:w-auto\"\n              >\n                <a href={cta.href}>{cta.label}</a>\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n"],"names":["Hero","badge","title","description","ctas","align","size","gradient","className","props","alignments","titleSizes","jsx","cn","jsxs","Badge","cta","index","Button"],"mappings":";;;;AAqBO,SAASA,EAAK;AAAA,EACnB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO,CAAA;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAa;AAAA,IACjB,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA,GAGJC,IAAa;AAAA,IACjB,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAGT,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA;AAAA,YACAH,EAAWL,CAAK;AAAA,UAAA;AAAA,UAGjB,UAAA;AAAA,YAAAJ,KACC,gBAAAW,EAACG,KAAM,SAAQ,WAAU,MAAK,MAAK,WAAU,cAC1C,UAAAd,EAAA,CACH;AAAA,YAGF,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACAF,EAAWL,CAAI;AAAA,kBACfC,IAAW,uBAAuB;AAAA,kBAClC;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,OAAO,EAAE,gBAAgB,QAAQ,WAAWF,MAAU,WAAW,WAAW,QAAQ,OAAO,QAAQ,SAAS,QAAA;AAAA,gBAE3G,UAAAH;AAAA,cAAA;AAAA,YAAA;AAAA,YAGFC,KACC,gBAAAS;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,OAAO,EAAE,gBAAgB,OAAA;AAAA,gBAExB,UAAAV;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJC,EAAK,SAAS,KACb,gBAAAQ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACAR,MAAU,WAAW,sBAAsB;AAAA,kBAC3C;AAAA,gBAAA;AAAA,gBAEF,OAAO,EAAE,gBAAgB,OAAA;AAAA,gBAExB,UAAAD,EAAK,IAAI,CAACY,GAAKC,MACd,gBAAAL;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBAEC,SAASF,EAAI,YAAYC,MAAU,IAAI,YAAY;AAAA,oBACnD,MAAK;AAAA,oBACL,SAAO;AAAA,oBACP,WAAU;AAAA,oBAEV,4BAAC,KAAA,EAAE,MAAMD,EAAI,MAAO,YAAI,MAAA,CAAM;AAAA,kBAAA;AAAA,kBANzBA,EAAI;AAAA,gBAAA,CAQZ;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/organisms/Nav/Nav.js

@@ -0,0 +1,177 @@
+import { jsxs as n, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { useState as u, useRef as v, useCallback as w, useEffect as H } from "react";
+import { cn as Y } from "../../utils/cn.js";
+import { NavLink as A } from "../../molecules/NavLink/NavLink.js";
+import { ThemeToggle as y } from "../../molecules/ThemeToggle/ThemeToggle.js";
+import { MobileDrawer as B } from "../../molecules/MobileDrawer/MobileDrawer.js";
+function F({
+  logo: g,
+  logoHref: i = "/",
+  items: c = [],
+  theme: d = "dark",
+  onThemeToggle: t,
+  showThemeToggle: h = !0,
+  fixed: b = !1,
+  hideOnScroll: o = !1,
+  className: k,
+  ...N
+}) {
+  const [l, p] = u(!1), [M, C] = u(0), f = v(0), m = v(null), L = w(() => {
+    p((r) => !r);
+  }, []), a = w(() => {
+    p(!1);
+  }, []);
+  return H(() => {
+    if (!o) return;
+    const r = () => {
+      const x = window.scrollY, j = x - f.current, O = m.current?.offsetHeight || 80;
+      C((z) => {
+        const E = z - j;
+        return Math.max(-O, Math.min(0, E));
+      }), f.current = x;
+    };
+    return window.addEventListener("scroll", r, { passive: !0 }), () => window.removeEventListener("scroll", r);
+  }, [o]), /* @__PURE__ */ n(s, { children: [
+    /* @__PURE__ */ e(
+      "nav",
+      {
+        ref: m,
+        className: Y(
+          "glass-nav",
+          "py-4 md:py-6",
+          b && "fixed left-0 right-0 z-50",
+          k
+        ),
+        style: o ? { top: M } : void 0,
+        ...N,
+        children: /* @__PURE__ */ n("div", { className: "mx-auto max-w-6xl px-6 md:px-12 flex items-center justify-between", children: [
+          /* @__PURE__ */ e(
+            "a",
+            {
+              href: i,
+              className: "text-base md:text-lg font-display font-semibold hover:opacity-70 transition-opacity",
+              style: { color: "var(--color-accent)" },
+              children: g
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "hidden md:flex md:items-center md:gap-6", children: [
+            c.map((r) => /* @__PURE__ */ e(
+              A,
+              {
+                href: r.href,
+                isActive: r.isActive,
+                variant: "underline",
+                ...r.external && { target: "_blank", rel: "noopener noreferrer" },
+                children: r.label
+              },
+              r.href
+            )),
+            h && t && /* @__PURE__ */ e(y, { theme: d, onToggle: t, size: "sm" })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: L,
+              className: "md:hidden p-2 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg transition-opacity duration-200 hover:opacity-70",
+              style: { color: "var(--color-grey-200)" },
+              "aria-label": l ? "Close menu" : "Open menu",
+              "aria-expanded": l,
+              children: /* @__PURE__ */ e(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "transition-transform duration-300",
+                  "aria-hidden": "true",
+                  children: l ? /* @__PURE__ */ n(s, { children: [
+                    /* @__PURE__ */ e("path", { d: "M18 6L6 18" }),
+                    /* @__PURE__ */ e("path", { d: "M6 6l12 12" })
+                  ] }) : /* @__PURE__ */ n(s, { children: [
+                    /* @__PURE__ */ e("path", { d: "M4 6h16" }),
+                    /* @__PURE__ */ e("path", { d: "M4 12h16" }),
+                    /* @__PURE__ */ e("path", { d: "M4 18h16" })
+                  ] })
+                }
+              )
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      B,
+      {
+        isOpen: l,
+        onClose: a,
+        position: "right",
+        width: "280px",
+        zIndex: 55,
+        className: "md:hidden",
+        children: /* @__PURE__ */ n("div", { className: "flex flex-col h-full pt-20 px-6 pb-8", children: [
+          /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ e(
+              "a",
+              {
+                href: i,
+                onClick: a,
+                className: "mobile-nav-link text-lg py-4 px-4 rounded-xl transition-all duration-200 min-h-[52px] flex items-center",
+                style: { color: "var(--color-white)" },
+                children: "Home"
+              }
+            ),
+            c.map((r) => /* @__PURE__ */ n(
+              "a",
+              {
+                href: r.href,
+                onClick: a,
+                className: "mobile-nav-link text-lg py-4 px-4 rounded-xl transition-all duration-200 min-h-[52px] flex items-center",
+                style: { color: "var(--color-white)" },
+                ...r.external && { target: "_blank", rel: "noopener noreferrer" },
+                children: [
+                  r.label,
+                  r.external && /* @__PURE__ */ n(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "ml-2 opacity-50",
+                      "aria-hidden": "true",
+                      children: [
+                        /* @__PURE__ */ e("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                        /* @__PURE__ */ e("polyline", { points: "15 3 21 3 21 9" }),
+                        /* @__PURE__ */ e("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                      ]
+                    }
+                  )
+                ]
+              },
+              r.href
+            ))
+          ] }),
+          h && t && /* @__PURE__ */ e("div", { className: "mt-auto pt-6 border-t", style: { borderColor: "var(--glass-border)" }, children: /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-4", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm", style: { color: "var(--color-grey-400)" }, children: "Theme" }),
+            /* @__PURE__ */ e(y, { theme: d, onToggle: t, size: "sm" })
+          ] }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  F as Nav
+};
+//# sourceMappingURL=Nav.js.map

package/dist/organisms/Nav/Nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nav.js","sources":["../../../src/organisms/Nav/Nav.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useState, useCallback, useEffect, useRef } from 'react'\nimport { cn } from '../../utils/cn'\nimport { NavLink } from '../../molecules/NavLink'\nimport { ThemeToggle } from '../../molecules/ThemeToggle'\nimport { MobileDrawer } from '../../molecules/MobileDrawer'\n\nexport interface NavItem {\n  label: string\n  href: string\n  isActive?: boolean\n  external?: boolean\n}\n\nexport interface NavProps extends HTMLAttributes<HTMLElement> {\n  logo?: ReactNode\n  logoHref?: string\n  items?: NavItem[]\n  theme?: 'dark' | 'light'\n  onThemeToggle?: () => void\n  showThemeToggle?: boolean\n  fixed?: boolean\n  hideOnScroll?: boolean\n}\n\nexport function Nav({\n  logo,\n  logoHref = '/',\n  items = [],\n  theme = 'dark',\n  onThemeToggle,\n  showThemeToggle = true,\n  fixed = false,\n  hideOnScroll = false,\n  className,\n  ...props\n}: NavProps) {\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [navOffset, setNavOffset] = useState(0)\n  const lastScrollY = useRef(0)\n  const navRef = useRef<HTMLElement>(null)\n\n  const toggleMenu = useCallback(() => {\n    setIsMenuOpen((prev) => !prev)\n  }, [])\n\n  const closeMenu = useCallback(() => {\n    setIsMenuOpen(false)\n  }, [])\n\n  useEffect(() => {\n    if (!hideOnScroll) return\n\n    const handleScroll = () => {\n      const currentScrollY = window.scrollY\n      const delta = currentScrollY - lastScrollY.current\n      const navHeight = navRef.current?.offsetHeight || 80\n\n      // Calculate new offset (clamped between -navHeight and 0)\n      setNavOffset((prev) => {\n        const newOffset = prev - delta\n        return Math.max(-navHeight, Math.min(0, newOffset))\n      })\n\n      lastScrollY.current = currentScrollY\n    }\n\n    window.addEventListener('scroll', handleScroll, { passive: true })\n    return () => window.removeEventListener('scroll', handleScroll)\n  }, [hideOnScroll])\n\n  return (\n    <>\n      <nav\n        ref={navRef}\n        className={cn(\n          'glass-nav',\n          'py-4 md:py-6',\n          fixed && 'fixed left-0 right-0 z-50',\n          className\n        )}\n        style={hideOnScroll ? { top: navOffset } : undefined}\n        {...props}\n      >\n        <div className=\"mx-auto max-w-6xl px-6 md:px-12 flex items-center justify-between\">\n          {/* Logo */}\n          <a\n            href={logoHref}\n            className=\"text-base md:text-lg font-display font-semibold hover:opacity-70 transition-opacity\"\n            style={{ color: 'var(--color-accent)' }}\n          >\n            {logo}\n          </a>\n\n          {/* Desktop Navigation */}\n          <div className=\"hidden md:flex md:items-center md:gap-6\">\n            {items.map((item) => (\n              <NavLink\n                key={item.href}\n                href={item.href}\n                isActive={item.isActive}\n                variant=\"underline\"\n                {...(item.external && { target: '_blank', rel: 'noopener noreferrer' })}\n              >\n                {item.label}\n              </NavLink>\n            ))}\n            {showThemeToggle && onThemeToggle && (\n              <ThemeToggle theme={theme} onToggle={onThemeToggle} size=\"sm\" />\n            )}\n          </div>\n\n          {/* Mobile Menu Button */}\n          <button\n            onClick={toggleMenu}\n            className=\"md:hidden p-2 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg transition-opacity duration-200 hover:opacity-70\"\n            style={{ color: 'var(--color-grey-200)' }}\n            aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}\n            aria-expanded={isMenuOpen}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"transition-transform duration-300\"\n              aria-hidden=\"true\"\n            >\n              {isMenuOpen ? (\n                <>\n                  <path d=\"M18 6L6 18\" />\n                  <path d=\"M6 6l12 12\" />\n                </>\n              ) : (\n                <>\n                  <path d=\"M4 6h16\" />\n                  <path d=\"M4 12h16\" />\n                  <path d=\"M4 18h16\" />\n                </>\n              )}\n            </svg>\n          </button>\n        </div>\n      </nav>\n\n      {/* Mobile Drawer */}\n      <MobileDrawer\n        isOpen={isMenuOpen}\n        onClose={closeMenu}\n        position=\"right\"\n        width=\"280px\"\n        zIndex={55}\n        className=\"md:hidden\"\n      >\n        <div className=\"flex flex-col h-full pt-20 px-6 pb-8\">\n          <div className=\"flex flex-col gap-2\">\n            <a\n              href={logoHref}\n              onClick={closeMenu}\n              className=\"mobile-nav-link text-lg py-4 px-4 rounded-xl transition-all duration-200 min-h-[52px] flex items-center\"\n              style={{ color: 'var(--color-white)' }}\n            >\n              Home\n            </a>\n            {items.map((item) => (\n              <a\n                key={item.href}\n                href={item.href}\n                onClick={closeMenu}\n                className=\"mobile-nav-link text-lg py-4 px-4 rounded-xl transition-all duration-200 min-h-[52px] flex items-center\"\n                style={{ color: 'var(--color-white)' }}\n                {...(item.external && { target: '_blank', rel: 'noopener noreferrer' })}\n              >\n                {item.label}\n                {item.external && (\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    className=\"ml-2 opacity-50\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n                    <polyline points=\"15 3 21 3 21 9\" />\n                    <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\n                  </svg>\n                )}\n              </a>\n            ))}\n          </div>\n\n          {showThemeToggle && onThemeToggle && (\n            <div className=\"mt-auto pt-6 border-t\" style={{ borderColor: 'var(--glass-border)' }}>\n              <div className=\"flex items-center justify-between px-4\">\n                <span className=\"text-sm\" style={{ color: 'var(--color-grey-400)' }}>\n                  Theme\n                </span>\n                <ThemeToggle theme={theme} onToggle={onThemeToggle} size=\"sm\" />\n              </div>\n            </div>\n          )}\n        </div>\n      </MobileDrawer>\n    </>\n  )\n}\n"],"names":["Nav","logo","logoHref","items","theme","onThemeToggle","showThemeToggle","fixed","hideOnScroll","className","props","isMenuOpen","setIsMenuOpen","useState","navOffset","setNavOffset","lastScrollY","useRef","navRef","toggleMenu","useCallback","prev","closeMenu","useEffect","handleScroll","currentScrollY","delta","navHeight","newOffset","jsxs","Fragment","jsx","cn","item","NavLink","ThemeToggle","MobileDrawer"],"mappings":"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"}

package/dist/organisms/Section/Section.js

@@ -0,0 +1,57 @@
+import { jsx as m, jsxs as d } from "react/jsx-runtime";
+import { cn as x } from "../../utils/cn.js";
+function f({
+  children: t,
+  size: e = "md",
+  spacing: l = "md",
+  container: n = !0,
+  className: a,
+  ...s
+}) {
+  const o = {
+    sm: "max-w-3xl",
+    md: "max-w-5xl",
+    lg: "max-w-7xl",
+    full: "max-w-none"
+  }, c = {
+    none: "py-0",
+    sm: "py-12 md:py-16",
+    md: "py-16 md:py-24",
+    lg: "py-24 md:py-32"
+  }, r = !!s.id;
+  return /* @__PURE__ */ m(
+    "section",
+    {
+      className: x(c[l], r && "scroll-mt-20", a),
+      ...s,
+      children: n ? /* @__PURE__ */ m("div", { className: x("mx-auto px-6 md:px-10", o[e]), children: t }) : t
+    }
+  );
+}
+function g({
+  title: t,
+  description: e,
+  align: l = "left",
+  className: n,
+  ...a
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: x("max-w-2xl mb-12", {
+        left: "text-left",
+        center: "text-center mx-auto"
+      }[l], n),
+      ...a,
+      children: [
+        /* @__PURE__ */ m("h2", { className: "font-display text-2xl md:text-3xl font-semibold text-[var(--color-white)] tracking-tight", children: t }),
+        e && /* @__PURE__ */ m("p", { className: "mt-4 text-base md:text-lg text-[var(--color-grey-400)] leading-relaxed", children: e })
+      ]
+    }
+  );
+}
+export {
+  f as Section,
+  g as SectionHeader
+};
+//# sourceMappingURL=Section.js.map

package/dist/organisms/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../../src/organisms/Section/Section.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode\n  size?: 'sm' | 'md' | 'lg' | 'full'\n  spacing?: 'none' | 'sm' | 'md' | 'lg'\n  container?: boolean\n}\n\nexport function Section({\n  children,\n  size = 'md',\n  spacing = 'md',\n  container = true,\n  className,\n  ...props\n}: SectionProps) {\n  const sizes = {\n    sm: 'max-w-3xl',\n    md: 'max-w-5xl',\n    lg: 'max-w-7xl',\n    full: 'max-w-none',\n  }\n\n  const spacings = {\n    none: 'py-0',\n    sm: 'py-12 md:py-16',\n    md: 'py-16 md:py-24',\n    lg: 'py-24 md:py-32',\n  }\n\n  // Add scroll-margin-top when section has an id for anchor links\n  const hasId = Boolean(props.id)\n\n  return (\n    <section\n      className={cn(spacings[spacing], hasId && 'scroll-mt-20', className)}\n      {...props}\n    >\n      {container ? (\n        <div className={cn('mx-auto px-6 md:px-10', sizes[size])}>\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </section>\n  )\n}\n\nexport interface SectionHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  title: string\n  description?: string\n  align?: 'left' | 'center'\n}\n\nexport function SectionHeader({\n  title,\n  description,\n  align = 'left',\n  className,\n  ...props\n}: SectionHeaderProps) {\n  const alignments = {\n    left: 'text-left',\n    center: 'text-center mx-auto',\n  }\n\n  return (\n    <div\n      className={cn('max-w-2xl mb-12', alignments[align], className)}\n      {...props}\n    >\n      <h2 className=\"font-display text-2xl md:text-3xl font-semibold text-[var(--color-white)] tracking-tight\">\n        {title}\n      </h2>\n      {description && (\n        <p className=\"mt-4 text-base md:text-lg text-[var(--color-grey-400)] leading-relaxed\">\n          {description}\n        </p>\n      )}\n    </div>\n  )\n}\n"],"names":["Section","children","size","spacing","container","className","props","sizes","spacings","hasId","jsx","cn","SectionHeader","title","description","align","jsxs"],"mappings":";;AAUO,SAASA,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAQ;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA,GAGFC,IAAW;AAAA,IACf,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAIAC,IAAQ,EAAQH,EAAM;AAE5B,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGH,EAASL,CAAO,GAAGM,KAAS,gBAAgBJ,CAAS;AAAA,MAClE,GAAGC;AAAA,MAEH,UAAAF,IACC,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAG,yBAAyBJ,EAAML,CAAI,CAAC,GACpD,UAAAD,EAAA,CACH,IAEAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAQO,SAASW,EAAc;AAAA,EAC5B,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAV;AAAA,EACA,GAAGC;AACL,GAAuB;AAMrB,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWL,EAAG,mBAPC;AAAA,QACjB,MAAM;AAAA,QACN,QAAQ;AAAA,MAAA,EAKsCI,CAAK,GAAGV,CAAS;AAAA,MAC5D,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,MAAA,EAAG,WAAU,4FACX,UAAAG,GACH;AAAA,QACCC,KACC,gBAAAJ,EAAC,KAAA,EAAE,WAAU,0EACV,UAAAI,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/theme.css

@@ -0,0 +1,86 @@
+/* ============================================================
+   @n3wth/ui — canonical design tokens (Tailwind v4 @theme only)
+
+   Base-style-free token export. Import this in any Tailwind v4 app to
+   generate utilities (bg-bg, text-ink, border-rail...) AND get the
+   var(--color-*) custom properties, WITHOUT pulling in @n3wth/ui's
+   fonts or base reset:
+
+     @import 'tailwindcss';
+     @import '@n3wth/ui/theme';
+
+   Single source of truth for n3wth.com, agents.n3wth.com,
+   garden.n3wth.com. Fonts are intentionally NOT set here — each app
+   declares its own (Geist via next/font, local @font-face, etc.).
+   Keep in sync with the @theme block in styles.css.
+   ============================================================ */
+
+@theme {
+  /* n3wth canonical palette — values match production */
+  --color-bg: #08090b;
+  --color-bg-soft: #0d0e10;
+  --color-bg-raise: #131316;
+  --color-ink: #f2f3f5;
+  --color-ink-dim: #9aa0a8;
+  --color-ink-faint: #62666d;
+  --color-ink-label: #787c83;
+  --color-ink-ghost: #2c2f34;
+  --color-rail: rgba(255, 255, 255, 0.09);
+  --color-rail-strong: rgba(255, 255, 255, 0.17);
+  --color-accent-rail: rgba(255, 255, 255, 0.32);
+  --color-accent: #ffffff;
+  --color-accent-dim: #d4d6da;
+  --color-accent-ink: #08090b;
+
+  /* Legacy Apple-style scale (kept for existing @n3wth/ui components) */
+  --color-bg-secondary: #0a0a0a;
+  --color-white: #ffffff;
+  --color-grey-100: #f5f5f7;
+  --color-grey-200: #e8e8ed;
+  --color-grey-300: #c7c7cc;
+  --color-grey-400: #86868b;
+  --color-grey-600: #6e6e73;
+  --color-grey-800: #1d1d1f;
+  --color-accent-soft: rgba(255, 255, 255, 0.15);
+
+  /* Category colors */
+  --color-sage: #30d158;
+  --color-coral: #ff6961;
+  --color-mint: #64d2ff;
+  --color-gold: #ffd60a;
+
+  /* Glass effect */
+  --glass-bg: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-highlight: rgba(255, 255, 255, 0.15);
+
+  /* Semantic colors */
+  --color-success: #30d158;
+  --color-success-bg: rgba(48, 209, 88, 0.1);
+  --color-warning: #ffd60a;
+  --color-warning-bg: rgba(255, 214, 10, 0.1);
+  --color-error: #ff6961;
+  --color-error-bg: rgba(255, 105, 97, 0.1);
+  --color-info: #64d2ff;
+  --color-info-bg: rgba(100, 210, 255, 0.1);
+}
+
+/* Bare-name runtime aliases (--bg, --ink, --accent...) so apps that
+   reference these via var() inherit canonical values. */
+:root {
+  --bg: var(--color-bg);
+  --bg-soft: var(--color-bg-soft);
+  --bg-raise: var(--color-bg-raise);
+  --ink: var(--color-ink);
+  --ink-dim: var(--color-ink-dim);
+  --ink-faint: var(--color-ink-faint);
+  --ink-label: var(--color-ink-label);
+  --ink-ghost: var(--color-ink-ghost);
+  --rail: var(--color-rail);
+  --rail-strong: var(--color-rail-strong);
+  --accent-rail: var(--color-accent-rail);
+  --accent: var(--color-accent);
+  --accent-dim: var(--color-accent-dim);
+  --accent-ink: var(--color-accent-ink);
+  --ease: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/dist/tokens/colors.js

@@ -0,0 +1,105 @@
+const a = {
+  // Dark mode (default)
+  dark: {
+    bg: "#000000",
+    bgSecondary: "#0a0a0a",
+    white: "#ffffff",
+    grey: {
+      100: "#f5f5f7",
+      200: "#e8e8ed",
+      300: "#c7c7cc",
+      400: "#86868b",
+      600: "#6e6e73",
+      800: "#1d1d1f"
+    },
+    accent: "#ffffff",
+    accentSoft: "rgba(255, 255, 255, 0.15)",
+    glass: {
+      bg: "rgba(255, 255, 255, 0.05)",
+      border: "rgba(255, 255, 255, 0.1)",
+      highlight: "rgba(255, 255, 255, 0.15)"
+    },
+    // Category colors (flat, no glow)
+    category: {
+      sage: "#30d158",
+      coral: "#ff6961",
+      mint: "#64d2ff",
+      gold: "#ffd60a"
+    },
+    // Semantic colors
+    semantic: {
+      success: "#30d158",
+      successBg: "rgba(48, 209, 88, 0.1)",
+      warning: "#ffd60a",
+      warningBg: "rgba(255, 214, 10, 0.1)",
+      error: "#ff6961",
+      errorBg: "rgba(255, 105, 97, 0.1)",
+      info: "#64d2ff",
+      infoBg: "rgba(100, 210, 255, 0.1)"
+    },
+    // Playful illustration colors
+    playful: {
+      pink: "#FF6B9D",
+      green: "#2ECC71",
+      maroon: "#922B3E",
+      olive: "#8B7355",
+      peach: "#FFAB91",
+      lavender: "#A78BFA",
+      teal: "#20B2AA",
+      mustard: "#F39C12"
+    }
+  },
+  // Light mode
+  light: {
+    bg: "#ffffff",
+    bgSecondary: "#f5f5f7",
+    white: "#1d1d1f",
+    grey: {
+      100: "#1d1d1f",
+      200: "#3a3a3c",
+      300: "#48484a",
+      400: "#636366",
+      600: "#8e8e93",
+      800: "#e5e5ea"
+    },
+    accent: "#1d1d1f",
+    accentSoft: "rgba(0, 0, 0, 0.1)",
+    glass: {
+      bg: "rgba(0, 0, 0, 0.03)",
+      border: "rgba(0, 0, 0, 0.08)",
+      highlight: "rgba(0, 0, 0, 0.12)"
+    },
+    category: {
+      sage: "#248a3d",
+      coral: "#d70015",
+      mint: "#0071e3",
+      gold: "#b25000"
+    },
+    // Semantic colors
+    semantic: {
+      success: "#248a3d",
+      successBg: "rgba(36, 138, 61, 0.08)",
+      warning: "#b25000",
+      warningBg: "rgba(178, 80, 0, 0.08)",
+      error: "#d70015",
+      errorBg: "rgba(215, 0, 21, 0.08)",
+      info: "#0071e3",
+      infoBg: "rgba(0, 113, 227, 0.08)"
+    },
+    // Playful illustration colors (slightly adjusted for light mode)
+    playful: {
+      pink: "#E91E63",
+      green: "#27AE60",
+      maroon: "#7B1E2E",
+      olive: "#6B5344",
+      peach: "#FF8A65",
+      lavender: "#9575CD",
+      teal: "#009688",
+      mustard: "#E67E22"
+    }
+  }
+};
+export {
+  a as colors
+};
+//# sourceMappingURL=colors.js.map

package/dist/tokens/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../src/tokens/colors.ts"],"sourcesContent":["export const colors = {\n  // Dark mode (default)\n  dark: {\n    bg: '#000000',\n    bgSecondary: '#0a0a0a',\n    white: '#ffffff',\n    grey: {\n      100: '#f5f5f7',\n      200: '#e8e8ed',\n      300: '#c7c7cc',\n      400: '#86868b',\n      600: '#6e6e73',\n      800: '#1d1d1f',\n    },\n    accent: '#ffffff',\n    accentSoft: 'rgba(255, 255, 255, 0.15)',\n    glass: {\n      bg: 'rgba(255, 255, 255, 0.05)',\n      border: 'rgba(255, 255, 255, 0.1)',\n      highlight: 'rgba(255, 255, 255, 0.15)',\n    },\n    // Category colors (flat, no glow)\n    category: {\n      sage: '#30d158',\n      coral: '#ff6961',\n      mint: '#64d2ff',\n      gold: '#ffd60a',\n    },\n    // Semantic colors\n    semantic: {\n      success: '#30d158',\n      successBg: 'rgba(48, 209, 88, 0.1)',\n      warning: '#ffd60a',\n      warningBg: 'rgba(255, 214, 10, 0.1)',\n      error: '#ff6961',\n      errorBg: 'rgba(255, 105, 97, 0.1)',\n      info: '#64d2ff',\n      infoBg: 'rgba(100, 210, 255, 0.1)',\n    },\n    // Playful illustration colors\n    playful: {\n      pink: '#FF6B9D',\n      green: '#2ECC71',\n      maroon: '#922B3E',\n      olive: '#8B7355',\n      peach: '#FFAB91',\n      lavender: '#A78BFA',\n      teal: '#20B2AA',\n      mustard: '#F39C12',\n    },\n  },\n  // Light mode\n  light: {\n    bg: '#ffffff',\n    bgSecondary: '#f5f5f7',\n    white: '#1d1d1f',\n    grey: {\n      100: '#1d1d1f',\n      200: '#3a3a3c',\n      300: '#48484a',\n      400: '#636366',\n      600: '#8e8e93',\n      800: '#e5e5ea',\n    },\n    accent: '#1d1d1f',\n    accentSoft: 'rgba(0, 0, 0, 0.1)',\n    glass: {\n      bg: 'rgba(0, 0, 0, 0.03)',\n      border: 'rgba(0, 0, 0, 0.08)',\n      highlight: 'rgba(0, 0, 0, 0.12)',\n    },\n    category: {\n      sage: '#248a3d',\n      coral: '#d70015',\n      mint: '#0071e3',\n      gold: '#b25000',\n    },\n    // Semantic colors\n    semantic: {\n      success: '#248a3d',\n      successBg: 'rgba(36, 138, 61, 0.08)',\n      warning: '#b25000',\n      warningBg: 'rgba(178, 80, 0, 0.08)',\n      error: '#d70015',\n      errorBg: 'rgba(215, 0, 21, 0.08)',\n      info: '#0071e3',\n      infoBg: 'rgba(0, 113, 227, 0.08)',\n    },\n    // Playful illustration colors (slightly adjusted for light mode)\n    playful: {\n      pink: '#E91E63',\n      green: '#27AE60',\n      maroon: '#7B1E2E',\n      olive: '#6B5344',\n      peach: '#FF8A65',\n      lavender: '#9575CD',\n      teal: '#009688',\n      mustard: '#E67E22',\n    },\n  },\n} as const\n\nexport type ColorMode = keyof typeof colors\n"],"names":["colors"],"mappings":"AAAO,MAAMA,IAAS;AAAA;AAAA,EAEpB,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,aAAa;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,WAAW;AAAA,IAAA;AAAA;AAAA,IAGb,UAAU;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA;AAAA,IAGR,UAAU;AAAA,MACR,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA;AAAA,IAGV,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,aAAa;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,WAAW;AAAA,IAAA;AAAA,IAEb,UAAU;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA;AAAA,IAGR,UAAU;AAAA,MACR,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA;AAAA,IAGV,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}

package/dist/tokens/effects.js

@@ -0,0 +1,26 @@
+const e = {
+  // Transitions
+  transition: {
+    fast: "0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+    base: "0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+    slow: "0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    spring: "0.35s cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  // Backdrop blur for glass effect
+  backdropBlur: {
+    sm: "8px",
+    md: "12px",
+    lg: "20px",
+    xl: "40px"
+  },
+  // Transform scales for hover states (NO shadows!)
+  scale: {
+    press: "0.96",
+    hover: "1.02",
+    active: "1.05"
+  }
+};
+export {
+  e as effects
+};
+//# sourceMappingURL=effects.js.map

package/dist/tokens/effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"effects.js","sources":["../../src/tokens/effects.ts"],"sourcesContent":["export const effects = {\n  // Transitions\n  transition: {\n    fast: '0.15s cubic-bezier(0.4, 0, 0.2, 1)',\n    base: '0.2s cubic-bezier(0.4, 0, 0.2, 1)',\n    slow: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    spring: '0.35s cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  // Backdrop blur for glass effect\n  backdropBlur: {\n    sm: '8px',\n    md: '12px',\n    lg: '20px',\n    xl: '40px',\n  },\n  // Transform scales for hover states (NO shadows!)\n  scale: {\n    press: '0.96',\n    hover: '1.02',\n    active: '1.05',\n  },\n} as const\n\n// NO box-shadow, drop-shadow, or glow effects!\n"],"names":["effects"],"mappings":"AAAO,MAAMA,IAAU;AAAA;AAAA,EAErB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA;AAAA,EAGV,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA;AAAA,EAGN,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;"}

package/dist/tokens/motion.js

@@ -0,0 +1,25 @@
+const e = {
+  duration: {
+    instant: "0ms",
+    fast: "150ms",
+    normal: "200ms",
+    slow: "300ms",
+    slower: "500ms"
+  },
+  easing: {
+    default: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    in: "cubic-bezier(0.4, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.2, 1)",
+    inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+    spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+  },
+  scale: {
+    press: "0.96",
+    hover: "1.02",
+    active: "1.05"
+  }
+};
+export {
+  e as motion
+};
+//# sourceMappingURL=motion.js.map

package/dist/tokens/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sources":["../../src/tokens/motion.ts"],"sourcesContent":["export const motion = {\n  duration: {\n    instant: '0ms',\n    fast: '150ms',\n    normal: '200ms',\n    slow: '300ms',\n    slower: '500ms',\n  },\n  easing: {\n    default: 'cubic-bezier(0.25, 0.1, 0.25, 1)',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  },\n  scale: {\n    press: '0.96',\n    hover: '1.02',\n    active: '1.05',\n  },\n} as const\n\nexport type MotionDuration = keyof typeof motion.duration\nexport type MotionEasing = keyof typeof motion.easing\n"],"names":["motion"],"mappings":"AAAO,MAAMA,IAAS;AAAA,EACpB,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;"}