jean-react-utils 0.1.0

package/README.md

@@ -0,0 +1,39 @@
+# Jean-utils
+
+## 目的
+
+个人 Next.js 博客与网站的可复用 UI 组件库
+
+## 内容
+- 通用组件（Button、Card）
+- React Hooks（useForceRerender）
+- Tailwind theme 配置
+- i18n 封装，基于 next-intl
+  - 支持调用方自定义messages路径
+  - 兼容 getRequestConfig 自动集成功能
+
+## 项目结构
+```
+jean-utils/
+├── src/
+│   ├── components/    ← Button / Card 等通用组件
+│   ├── layout/        ← Header / Footer / Nav
+│   ├── hooks/         ← useForceRerender、useMediaQuery 等
+│   ├── theme/         ← tailwind theme、token
+│   ├── i18n/          ← next-intl 封装
+│   └── index.ts       ← 统一导出
+├── package.json
+├── tsconfig.json
+├── tailwind.config.ts
+├── vitest.config.ts
+├── postcss.config.js
+└── README.md
+```
+
+## 现有痛点
+- 每次调试都涉及多个package，心智负担大
+- 更新组件时要发布版本、链接依赖、跑构建流程
+
+```
+
+```

package/dist/index.d.mts

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface HeadingProps {
+    children?: ReactNode;
+    className?: string;
+    title?: string;
+}
+declare function PageTitle({ children, title, className }: HeadingProps): JSX.Element;
+declare function SectionTitle({ children, title, className }: HeadingProps): JSX.Element;
+declare function CardTitle({ children, title, className }: HeadingProps): JSX.Element;
+declare function SubTitle({ children, title, className }: HeadingProps): JSX.Element;
+
+interface NavItem {
+    key: string;
+    href: string;
+    label: string;
+    className?: {
+        pc?: string;
+        mobile?: string;
+    };
+}
+interface HeaderProps {
+    logo: React.ReactNode;
+    menuItems: NavItem[];
+    className?: string;
+    /** 是否啟用動畫效果 */
+    enableAnimation?: boolean;
+}
+declare const Header: React.FC<HeaderProps>;
+
+interface FooterLink {
+    href: string;
+    title: string;
+}
+interface FooterTexts {
+    copyright: string;
+    privacy: string;
+    terms: string;
+    social: string;
+}
+interface FooterProps {
+    /** 網站基本信息 */
+    site: {
+        name: string;
+        description: string;
+    };
+    /** 導航鏈接 */
+    navigation: {
+        /** 快速鏈接區塊 */
+        quickLinks: {
+            title: string;
+            items: FooterLink[];
+        };
+        /** 社交媒體鏈接 */
+        socialLinks: FooterLink[];
+    };
+    /** 頁腳文本 */
+    texts: FooterTexts;
+    /** 自定義類名 */
+    className?: string;
+}
+declare const Footer: React.FC<FooterProps>;
+
+declare const useForceRerender: () => [number, () => void];
+
+export { Button, CardTitle, Footer, type FooterLink, type FooterProps, type FooterTexts, Header, PageTitle, SectionTitle, SubTitle, useForceRerender };

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface HeadingProps {
+    children?: ReactNode;
+    className?: string;
+    title?: string;
+}
+declare function PageTitle({ children, title, className }: HeadingProps): JSX.Element;
+declare function SectionTitle({ children, title, className }: HeadingProps): JSX.Element;
+declare function CardTitle({ children, title, className }: HeadingProps): JSX.Element;
+declare function SubTitle({ children, title, className }: HeadingProps): JSX.Element;
+
+interface NavItem {
+    key: string;
+    href: string;
+    label: string;
+    className?: {
+        pc?: string;
+        mobile?: string;
+    };
+}
+interface HeaderProps {
+    logo: React.ReactNode;
+    menuItems: NavItem[];
+    className?: string;
+    /** 是否啟用動畫效果 */
+    enableAnimation?: boolean;
+}
+declare const Header: React.FC<HeaderProps>;
+
+interface FooterLink {
+    href: string;
+    title: string;
+}
+interface FooterTexts {
+    copyright: string;
+    privacy: string;
+    terms: string;
+    social: string;
+}
+interface FooterProps {
+    /** 網站基本信息 */
+    site: {
+        name: string;
+        description: string;
+    };
+    /** 導航鏈接 */
+    navigation: {
+        /** 快速鏈接區塊 */
+        quickLinks: {
+            title: string;
+            items: FooterLink[];
+        };
+        /** 社交媒體鏈接 */
+        socialLinks: FooterLink[];
+    };
+    /** 頁腳文本 */
+    texts: FooterTexts;
+    /** 自定義類名 */
+    className?: string;
+}
+declare const Footer: React.FC<FooterProps>;
+
+declare const useForceRerender: () => [number, () => void];
+
+export { Button, CardTitle, Footer, type FooterLink, type FooterProps, type FooterTexts, Header, PageTitle, SectionTitle, SubTitle, useForceRerender };

package/dist/index.js

@@ -0,0 +1,333 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button_default,
+  CardTitle: () => CardTitle,
+  Footer: () => Footer,
+  Header: () => Header_default,
+  PageTitle: () => PageTitle,
+  SectionTitle: () => SectionTitle,
+  SubTitle: () => SubTitle,
+  useForceRerender: () => useForceRerender_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const baseStyles = "rounded-full font-medium transition-colors";
+  const variants = {
+    primary: "bg-purple-600 text-white hover:bg-purple-700 shadow-lg shadow-purple-500/20",
+    secondary: "bg-purple-50 text-purple-700 hover:bg-purple-100",
+    outline: "border-2 border-purple-600 text-purple-600 hover:bg-purple-50"
+  };
+  const sizes = {
+    sm: "px-4 py-1.5 text-sm",
+    md: "px-6 py-2 text-sm",
+    lg: "px-8 py-3 text-base"
+  };
+  const classes = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: classes, ...props, children });
+};
+var Button_default = Button;
+
+// src/components/Heading/index.tsx
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PageTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_framer_motion.motion.h1,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.8 },
+      className: `text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`,
+      children: title || children
+    }
+  );
+}
+function SectionTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_framer_motion.motion.h2,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.8, delay: 0.2 },
+      className: `text-3xl font-bold text-center mb-16 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`,
+      children: title || children
+    }
+  );
+}
+function CardTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_framer_motion.motion.h3,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.5 },
+      className: `text-2xl font-bold text-gray-800 ${className}`,
+      children: title || children
+    }
+  );
+}
+function SubTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_framer_motion.motion.h4,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.5 },
+      className: `text-lg font-semibold text-gray-800 ${className}`,
+      children: title || children
+    }
+  );
+}
+
+// src/layout/Header/index.tsx
+var import_react = require("react");
+var import_link = __toESM(require("next/link"));
+var import_framer_motion2 = require("framer-motion");
+
+// src/layout/Header/BreadIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function BreadIcon({ isMenuOpen }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-6 h-5 relative flex flex-col justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? "rotate-45 translate-y-2" : ""}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `w-full h-0.5 bg-gray-800 transition-opacity duration-300 ${isMenuOpen ? "opacity-0" : ""}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? "-rotate-45 -translate-y-2" : ""}` })
+  ] });
+}
+
+// src/layout/Header/index.tsx
+var import_navigation = require("next/navigation");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var getActivedCls = (href, selectedKey) => {
+  if (href.includes(selectedKey) || href === "/" && selectedKey === "home") {
+    return "text-purple-600";
+  }
+  return "text-gray-600";
+};
+var Header = ({
+  logo,
+  menuItems,
+  className = "",
+  enableAnimation = true
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react.useState)(false);
+  const selectedKey = (0, import_navigation.usePathname)().split("/")[2] || "home";
+  console.log("selectedKey>>>", selectedKey);
+  const baseNavClassName = `fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-purple-100 ${className}`;
+  const navVariants = {
+    hidden: { y: -20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut"
+      }
+    }
+  };
+  const mobileMenuVariants = {
+    hidden: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        duration: 0.3,
+        ease: "easeInOut"
+      }
+    },
+    visible: {
+      height: "auto",
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        ease: "easeInOut"
+      }
+    }
+  };
+  const NavComponent = enableAnimation ? import_framer_motion2.motion.nav : "nav";
+  const MobileMenuComponent = enableAnimation ? import_framer_motion2.motion.div : "div";
+  console.log("menuItems>>>", menuItems);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    NavComponent,
+    {
+      className: baseNavClassName,
+      ...enableAnimation && {
+        initial: "hidden",
+        animate: "visible",
+        variants: navVariants
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "container mx-auto px-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between h-20", children: [
+          logo,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: "hidden md:flex items-center space-x-8", children: menuItems.map((item) => (
+            // <Link
+            // key={item.key}
+            //     href="/"
+            //     className="flex items-center justify-center gap-2 text-lg font-bold tracking-wide transition-all duration-300 ease-in-out"
+            // >
+            //   {item.label}
+            // </Link>
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLink, { href: item.href, className: item.className?.pc, selectedKey, children: item.label }, item.key)
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: () => setIsMenuOpen(!isMenuOpen),
+              className: "md:hidden p-2 hover:bg-purple-50 rounded-lg transition-colors",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreadIcon, { isMenuOpen })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_framer_motion2.AnimatePresence, { children: isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          MobileMenuComponent,
+          {
+            className: "md:hidden overflow-hidden",
+            ...enableAnimation && {
+              initial: "hidden",
+              animate: "visible",
+              exit: "hidden",
+              variants: mobileMenuVariants
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col space-y-4 py-4 items-center", children: menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_framer_motion2.motion.div,
+              {
+                ...enableAnimation && {
+                  initial: { x: -20, opacity: 0 },
+                  animate: { x: 0, opacity: 1 },
+                  transition: { delay: 0.1 }
+                },
+                children: menuItems.map((item2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MobileNavLink, { href: item2.href, className: item2.className?.mobile, selectedKey, children: item2.label }, item2.key))
+              },
+              item.key
+            )) })
+          }
+        ) })
+      ] })
+    }
+  );
+};
+var NavLink = ({ href, children, className, selectedKey }) => {
+  const combinedClassName = `${className || "text-gray-600 hover:text-black transition-colors"} ${getActivedCls(href, selectedKey)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link.default, { href, legacyBehavior: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: combinedClassName, children }) });
+};
+var MobileNavLink = ({ href, children, className, selectedKey }) => {
+  const combinedClassName = `${className || "text-lg font-medium text-center text-gray-600 hover:text-purple-600 transition-colors"} ${getActivedCls(href, selectedKey)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link.default, { href, legacyBehavior: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: combinedClassName, children }) });
+};
+var Header_default = Header;
+
+// src/layout/Footer/index.tsx
+var import_link2 = __toESM(require("next/link"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Footer = ({
+  site,
+  navigation,
+  texts,
+  className = ""
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("footer", { className: `relative bg-gradient-to-b from-gray-50 to-gray-100 pt-16 pb-6 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute inset-0 bg-grid-gray-200/25 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "container mx-auto p-4 relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 mb-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent", children: site.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-gray-600 max-w-xs", children: site.description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", { className: "text-sm font-semibold text-gray-900 uppercase", children: navigation.quickLinks.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: "flex flex-col space-y-2", children: navigation.quickLinks.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_link2.default,
+            {
+              href: item.href,
+              className: "text-gray-600 hover:text-purple-600 transition-colors",
+              children: item.title
+            },
+            item.href
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", { className: "text-sm font-semibold text-gray-900 uppercase", children: texts.social }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex space-x-4", children: navigation.socialLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "a",
+            {
+              href: link.href,
+              className: "text-gray-600 hover:text-purple-600 transition-colors",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: link.title
+            },
+            link.href
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border-t border-gray-200 pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-gray-600", children: texts.copyright }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex space-x-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_link2.default, { href: "/privacy", className: "text-sm text-gray-600 hover:text-purple-600 transition-colors", children: texts.privacy }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_link2.default, { href: "/terms", className: "text-sm text-gray-600 hover:text-purple-600 transition-colors", children: texts.terms })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600" })
+  ] });
+};
+
+// src/hooks/useForceRerender.ts
+var import_react2 = require("react");
+var useForceRerender = () => {
+  const [key, setKey] = (0, import_react2.useState)(0);
+  const forceRerender = (0, import_react2.useCallback)(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, []);
+  return [key, forceRerender];
+};
+var useForceRerender_default = useForceRerender;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  CardTitle,
+  Footer,
+  Header,
+  PageTitle,
+  SectionTitle,
+  SubTitle,
+  useForceRerender
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Button/index.tsx","../src/components/Heading/index.tsx","../src/layout/Header/index.tsx","../src/layout/Header/BreadIcon.tsx","../src/layout/Footer/index.tsx","../src/hooks/useForceRerender.ts"],"sourcesContent":["export * from './components'\nexport * from './layout'\nexport { default as useForceRerender } from './hooks/useForceRerender'\n// export * from './hooks'\n// export * from './layout'\n// export * from './theme'\n// export * from './i18n'","import React from 'react';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'outline';\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'primary',\n  size = 'md',\n  className = '',\n  children,\n  ...props\n}) => {\n  const baseStyles = 'rounded-full font-medium transition-colors';\n  \n  const variants = {\n    primary: 'bg-purple-600 text-white hover:bg-purple-700 shadow-lg shadow-purple-500/20',\n    secondary: 'bg-purple-50 text-purple-700 hover:bg-purple-100',\n    outline: 'border-2 border-purple-600 text-purple-600 hover:bg-purple-50'\n  };\n\n  const sizes = {\n    sm: 'px-4 py-1.5 text-sm',\n    md: 'px-6 py-2 text-sm',\n    lg: 'px-8 py-3 text-base'\n  };\n\n  const classes = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;\n\n  return (\n    <button className={classes} {...props}>\n      {children}\n    </button>\n  );\n}; \n\nexport default Button;","'use client';\n\nimport { motion } from 'framer-motion';\nimport { ReactNode } from 'react';\n\nexport interface HeadingProps {\n  children?: ReactNode;\n  className?: string;\n  title?: string;\n}\n\n// 頁面主標題：大標題，帶漸變色\nexport function PageTitle({ children, title, className = '' }: HeadingProps) {\n  return (\n    <motion.h1\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.8 }}\n      className={`text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`}\n    >\n      {title || children}\n    </motion.h1>\n  );\n}\n\n// 區塊標題：中等大小，帶漸變色\nexport function SectionTitle({ children, title, className = '' }: HeadingProps) {\n  return (\n    <motion.h2\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.8, delay: 0.2 }}\n      className={`text-3xl font-bold text-center mb-16 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`}\n    >\n      {title || children}\n    </motion.h2>\n  );\n}\n\n// 卡片標題：較小，深灰色\nexport function CardTitle({ children, title,className = '' }: HeadingProps) {\n  return (\n    <motion.h3\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.5 }}\n      className={`text-2xl font-bold text-gray-800 ${className}`}\n    >\n      {title || children}\n    </motion.h3>\n  );\n}\n\n// 區塊子標題：最小，帶圖標位置\nexport function SubTitle({ children, title, className = '' }: HeadingProps) {\n  return (\n    <motion.h4\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.5 }}\n      className={`text-lg font-semibold text-gray-800 ${className}`}\n    >\n      {title || children}\n    </motion.h4>\n  );\n} \n\nexport default {\n  PageTitle,\n  SectionTitle,\n  CardTitle,\n  SubTitle,\n}","'use client';\nimport React, { useState } from 'react';\nimport Link from 'next/link';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport BreadIcon from './BreadIcon';\nimport { usePathname } from 'next/navigation';\nexport interface NavItem {\n  key: string;\n  href: string;\n  label: string;\n  className?: {\n    pc?: string;\n    mobile?: string;\n  };\n}\n\nexport interface HeaderProps {\n  logo: React.ReactNode;\n  menuItems: NavItem[];\n  className?: string;\n  /** 是否啟用動畫效果 */\n  enableAnimation?: boolean;\n}\nconst getActivedCls = (href: string, selectedKey: string) => {\n  if(href.includes(selectedKey) || (href === '/' && selectedKey === 'home')) {\n    return 'text-purple-600';\n  }\n  return 'text-gray-600';\n}\nexport const Header: React.FC<HeaderProps> = ({\n  logo,\n  menuItems,\n  className = '',\n  enableAnimation = true,\n}) => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const selectedKey = usePathname().split('/')[2] || 'home'; // todo support home\n  console.log('selectedKey>>>',selectedKey);\n  // 基礎樣式\n  const baseNavClassName = `fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-purple-100 ${className}`;\n  // 動畫配置\n  const navVariants = {\n    hidden: { y: -20, opacity: 0 },\n    visible: { \n      y: 0, \n      opacity: 1,\n      transition: {\n        duration: 0.5,\n        ease: \"easeOut\"\n      }\n    }\n  };\n\n  const mobileMenuVariants = {\n    hidden: { \n      height: 0,\n      opacity: 0,\n      transition: {\n        duration: 0.3,\n        ease: \"easeInOut\"\n      }\n    },\n    visible: { \n      height: \"auto\",\n      opacity: 1,\n      transition: {\n        duration: 0.3,\n        ease: \"easeInOut\"\n      }\n    }\n  };\n\n  // 根據是否啟用動畫返回不同的組件\n  const NavComponent = enableAnimation ? motion.nav : 'nav';\n  const MobileMenuComponent = enableAnimation ? motion.div : 'div';\nconsole.log('menuItems>>>',menuItems);\n  return (\n    <NavComponent \n      className={baseNavClassName}\n      {...(enableAnimation && {\n        initial: \"hidden\",\n        animate: \"visible\",\n        variants: navVariants\n      })}\n    >\n      <div className=\"container mx-auto px-4\">\n        <div className=\"flex items-center justify-between h-20\">\n          {/* Logo */}\n          {logo}\n\n          {/* Desktop Navigation */}\n          <nav className=\"hidden md:flex items-center space-x-8\">\n            {menuItems.map((item) => (\n              // <Link\n              // key={item.key}\n              //     href=\"/\"\n              //     className=\"flex items-center justify-center gap-2 text-lg font-bold tracking-wide transition-all duration-300 ease-in-out\"\n              // >\n              //   {item.label}\n              // </Link>\n              <NavLink key={item.key} href={item.href} className={item.className?.pc} selectedKey={selectedKey}>\n                {item.label}\n              </NavLink>\n            ))}\n          </nav>\n\n          {/* Mobile Menu Button */}\n          <button \n            onClick={() => setIsMenuOpen(!isMenuOpen)}\n            className=\"md:hidden p-2 hover:bg-purple-50 rounded-lg transition-colors\"\n          >\n            <BreadIcon isMenuOpen={isMenuOpen}/>\n          </button>\n        </div>\n\n        {/* Mobile Menu */}\n        <AnimatePresence>\n          {isMenuOpen && (\n            <MobileMenuComponent\n              className=\"md:hidden overflow-hidden\"\n              {...(enableAnimation && {\n                initial: \"hidden\",\n                animate: \"visible\",\n                exit: \"hidden\",\n                variants: mobileMenuVariants\n              })}\n            >\n              <div className=\"flex flex-col space-y-4 py-4 items-center\">\n                {menuItems.map((item) => (\n                  <motion.div\n                    key={item.key}\n                    {...(enableAnimation && {\n                      initial: { x: -20, opacity: 0 },\n                      animate: { x: 0, opacity: 1 },\n                      transition: { delay: 0.1 }\n                    })}\n                  >\n                    {\n                      menuItems.map((item) => (\n                          <MobileNavLink key={item.key} href={item.href} className={item.className?.mobile} selectedKey={selectedKey}>{item.label}</MobileNavLink>\n                      ))\n                    }\n                  </motion.div>\n                ))}\n              </div>\n            </MobileMenuComponent>\n          )}\n        </AnimatePresence>\n      </div>\n    </NavComponent>\n  );\n}; \n\n\nconst NavLink = ({ href, children, className, selectedKey }: { href: string; children: React.ReactNode, className?: string, selectedKey: string }) => {\n  const combinedClassName = `${className || 'text-gray-600 hover:text-black transition-colors'} ${getActivedCls(href, selectedKey)}`;\n  return (\n    <Link href={href} legacyBehavior>\n      <a className={combinedClassName}>{children}</a>\n    </Link>\n  );\n};\n\nconst MobileNavLink = ({ href, children, className, selectedKey }: { href: string; children: React.ReactNode, className?: string, selectedKey: string }) => {\n  const combinedClassName = `${className || 'text-lg font-medium text-center text-gray-600 hover:text-purple-600 transition-colors'} ${getActivedCls(href, selectedKey)}`;\n  return (\n    <Link href={href} legacyBehavior>\n      <a className={combinedClassName}>{children}</a>\n    </Link>\n  );\n};\n\nexport default Header;","export default function BreadIcon({isMenuOpen}: {isMenuOpen: boolean}) {\n    return (\n        <div className=\"w-6 h-5 relative flex flex-col justify-between\">\n              <span className={`w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? 'rotate-45 translate-y-2' : ''}`} />\n              <span className={`w-full h-0.5 bg-gray-800 transition-opacity duration-300 ${isMenuOpen ? 'opacity-0' : ''}`} />\n              <span className={`w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? '-rotate-45 -translate-y-2' : ''}`} />\n        </div>\n    )\n}","'use client';\nimport React from 'react';\nimport Link from 'next/link';\n\nexport interface FooterLink {\n  href: string;\n  title: string;\n}\n\nexport interface FooterTexts {\n  copyright: string;\n  privacy: string;\n  terms: string;\n  social: string;\n}\n\nexport interface FooterProps {\n  /** 網站基本信息 */\n  site: {\n    name: string;\n    description: string;\n  };\n  /** 導航鏈接 */\n  navigation: {\n    /** 快速鏈接區塊 */\n    quickLinks: {\n      title: string;\n      items: FooterLink[];\n    };\n    /** 社交媒體鏈接 */\n    socialLinks: FooterLink[];\n  };\n  /** 頁腳文本 */\n  texts: FooterTexts;\n  /** 自定義類名 */\n  className?: string;\n}\n\nexport const Footer: React.FC<FooterProps> = ({\n  site,\n  navigation,\n  texts,\n  className = '',\n}) => {\n  return (\n    <footer className={`relative bg-gradient-to-b from-gray-50 to-gray-100 pt-16 pb-6 ${className}`}>\n      <div className=\"absolute inset-0 bg-grid-gray-200/25 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))]\" />\n      \n      <div className=\"container mx-auto p-4 relative\">\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8 mb-12\">\n          {/* Brand Section */}\n          <div className=\"space-y-4\">\n            <h3 className=\"text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent\">\n              {site.name}\n            </h3>\n            <p className=\"text-gray-600 max-w-xs\">\n              {site.description}\n            </p>\n          </div>\n\n          {/* Quick Links */}\n          <div className=\"space-y-4\">\n            <h4 className=\"text-sm font-semibold text-gray-900 uppercase\">\n              {navigation.quickLinks.title}\n            </h4>\n            <nav className=\"flex flex-col space-y-2\">\n              {navigation.quickLinks.items.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  className=\"text-gray-600 hover:text-purple-600 transition-colors\"\n                >\n                  {item.title}\n                </Link>\n              ))}\n            </nav>\n          </div>\n\n          {/* Social Links */}\n          <div className=\"space-y-4\">\n            <h4 className=\"text-sm font-semibold text-gray-900 uppercase\">\n              {texts.social}\n            </h4>\n            <div className=\"flex space-x-4\">\n              {navigation.socialLinks.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"text-gray-600 hover:text-purple-600 transition-colors\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  {link.title}\n                </a>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom Bar */}\n        <div className=\"border-t border-gray-200 pt-6\">\n          <div className=\"flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0\">\n            <p className=\"text-sm text-gray-600\">\n              {texts.copyright}\n            </p>\n            <div className=\"flex space-x-6\">\n              <Link href=\"/privacy\" className=\"text-sm text-gray-600 hover:text-purple-600 transition-colors\">\n                {texts.privacy}\n              </Link>\n              <Link href=\"/terms\" className=\"text-sm text-gray-600 hover:text-purple-600 transition-colors\">\n                {texts.terms}\n              </Link>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Decorative gradient line */}\n      <div className=\"absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600\" />\n    </footer>\n  );\n}; ","import { useState, useCallback } from 'react';\n\nconst useForceRerender = (): [number, () => void] => {\n  const [key, setKey] = useState(0);\n\n  const forceRerender = useCallback(() => {\n    setKey(prevKey => prevKey + 1);\n  }, []);\n\n  return [key, forceRerender];\n};\n\nexport default useForceRerender;"],"mappings":"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","names":["import_jsx_runtime","import_framer_motion","import_jsx_runtime","import_jsx_runtime","item","Link","import_link","import_jsx_runtime","Link","import_react"]}

package/dist/index.mjs

@@ -0,0 +1,289 @@
+// src/components/Button/index.tsx
+import { jsx } from "react/jsx-runtime";
+var Button = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const baseStyles = "rounded-full font-medium transition-colors";
+  const variants = {
+    primary: "bg-purple-600 text-white hover:bg-purple-700 shadow-lg shadow-purple-500/20",
+    secondary: "bg-purple-50 text-purple-700 hover:bg-purple-100",
+    outline: "border-2 border-purple-600 text-purple-600 hover:bg-purple-50"
+  };
+  const sizes = {
+    sm: "px-4 py-1.5 text-sm",
+    md: "px-6 py-2 text-sm",
+    lg: "px-8 py-3 text-base"
+  };
+  const classes = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;
+  return /* @__PURE__ */ jsx("button", { className: classes, ...props, children });
+};
+var Button_default = Button;
+
+// src/components/Heading/index.tsx
+import { motion } from "framer-motion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function PageTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ jsx2(
+    motion.h1,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.8 },
+      className: `text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`,
+      children: title || children
+    }
+  );
+}
+function SectionTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ jsx2(
+    motion.h2,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.8, delay: 0.2 },
+      className: `text-3xl font-bold text-center mb-16 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`,
+      children: title || children
+    }
+  );
+}
+function CardTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ jsx2(
+    motion.h3,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.5 },
+      className: `text-2xl font-bold text-gray-800 ${className}`,
+      children: title || children
+    }
+  );
+}
+function SubTitle({ children, title, className = "" }) {
+  return /* @__PURE__ */ jsx2(
+    motion.h4,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.5 },
+      className: `text-lg font-semibold text-gray-800 ${className}`,
+      children: title || children
+    }
+  );
+}
+
+// src/layout/Header/index.tsx
+import { useState } from "react";
+import Link from "next/link";
+import { motion as motion2, AnimatePresence } from "framer-motion";
+
+// src/layout/Header/BreadIcon.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function BreadIcon({ isMenuOpen }) {
+  return /* @__PURE__ */ jsxs("div", { className: "w-6 h-5 relative flex flex-col justify-between", children: [
+    /* @__PURE__ */ jsx3("span", { className: `w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? "rotate-45 translate-y-2" : ""}` }),
+    /* @__PURE__ */ jsx3("span", { className: `w-full h-0.5 bg-gray-800 transition-opacity duration-300 ${isMenuOpen ? "opacity-0" : ""}` }),
+    /* @__PURE__ */ jsx3("span", { className: `w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? "-rotate-45 -translate-y-2" : ""}` })
+  ] });
+}
+
+// src/layout/Header/index.tsx
+import { usePathname } from "next/navigation";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var getActivedCls = (href, selectedKey) => {
+  if (href.includes(selectedKey) || href === "/" && selectedKey === "home") {
+    return "text-purple-600";
+  }
+  return "text-gray-600";
+};
+var Header = ({
+  logo,
+  menuItems,
+  className = "",
+  enableAnimation = true
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const selectedKey = usePathname().split("/")[2] || "home";
+  console.log("selectedKey>>>", selectedKey);
+  const baseNavClassName = `fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-purple-100 ${className}`;
+  const navVariants = {
+    hidden: { y: -20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut"
+      }
+    }
+  };
+  const mobileMenuVariants = {
+    hidden: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        duration: 0.3,
+        ease: "easeInOut"
+      }
+    },
+    visible: {
+      height: "auto",
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        ease: "easeInOut"
+      }
+    }
+  };
+  const NavComponent = enableAnimation ? motion2.nav : "nav";
+  const MobileMenuComponent = enableAnimation ? motion2.div : "div";
+  console.log("menuItems>>>", menuItems);
+  return /* @__PURE__ */ jsx4(
+    NavComponent,
+    {
+      className: baseNavClassName,
+      ...enableAnimation && {
+        initial: "hidden",
+        animate: "visible",
+        variants: navVariants
+      },
+      children: /* @__PURE__ */ jsxs2("div", { className: "container mx-auto px-4", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between h-20", children: [
+          logo,
+          /* @__PURE__ */ jsx4("nav", { className: "hidden md:flex items-center space-x-8", children: menuItems.map((item) => (
+            // <Link
+            // key={item.key}
+            //     href="/"
+            //     className="flex items-center justify-center gap-2 text-lg font-bold tracking-wide transition-all duration-300 ease-in-out"
+            // >
+            //   {item.label}
+            // </Link>
+            /* @__PURE__ */ jsx4(NavLink, { href: item.href, className: item.className?.pc, selectedKey, children: item.label }, item.key)
+          )) }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              onClick: () => setIsMenuOpen(!isMenuOpen),
+              className: "md:hidden p-2 hover:bg-purple-50 rounded-lg transition-colors",
+              children: /* @__PURE__ */ jsx4(BreadIcon, { isMenuOpen })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx4(AnimatePresence, { children: isMenuOpen && /* @__PURE__ */ jsx4(
+          MobileMenuComponent,
+          {
+            className: "md:hidden overflow-hidden",
+            ...enableAnimation && {
+              initial: "hidden",
+              animate: "visible",
+              exit: "hidden",
+              variants: mobileMenuVariants
+            },
+            children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col space-y-4 py-4 items-center", children: menuItems.map((item) => /* @__PURE__ */ jsx4(
+              motion2.div,
+              {
+                ...enableAnimation && {
+                  initial: { x: -20, opacity: 0 },
+                  animate: { x: 0, opacity: 1 },
+                  transition: { delay: 0.1 }
+                },
+                children: menuItems.map((item2) => /* @__PURE__ */ jsx4(MobileNavLink, { href: item2.href, className: item2.className?.mobile, selectedKey, children: item2.label }, item2.key))
+              },
+              item.key
+            )) })
+          }
+        ) })
+      ] })
+    }
+  );
+};
+var NavLink = ({ href, children, className, selectedKey }) => {
+  const combinedClassName = `${className || "text-gray-600 hover:text-black transition-colors"} ${getActivedCls(href, selectedKey)}`;
+  return /* @__PURE__ */ jsx4(Link, { href, legacyBehavior: true, children: /* @__PURE__ */ jsx4("a", { className: combinedClassName, children }) });
+};
+var MobileNavLink = ({ href, children, className, selectedKey }) => {
+  const combinedClassName = `${className || "text-lg font-medium text-center text-gray-600 hover:text-purple-600 transition-colors"} ${getActivedCls(href, selectedKey)}`;
+  return /* @__PURE__ */ jsx4(Link, { href, legacyBehavior: true, children: /* @__PURE__ */ jsx4("a", { className: combinedClassName, children }) });
+};
+var Header_default = Header;
+
+// src/layout/Footer/index.tsx
+import Link2 from "next/link";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Footer = ({
+  site,
+  navigation,
+  texts,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs3("footer", { className: `relative bg-gradient-to-b from-gray-50 to-gray-100 pt-16 pb-6 ${className}`, children: [
+    /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 bg-grid-gray-200/25 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))]" }),
+    /* @__PURE__ */ jsxs3("div", { className: "container mx-auto p-4 relative", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 mb-12", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx5("h3", { className: "text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent", children: site.name }),
+          /* @__PURE__ */ jsx5("p", { className: "text-gray-600 max-w-xs", children: site.description })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx5("h4", { className: "text-sm font-semibold text-gray-900 uppercase", children: navigation.quickLinks.title }),
+          /* @__PURE__ */ jsx5("nav", { className: "flex flex-col space-y-2", children: navigation.quickLinks.items.map((item) => /* @__PURE__ */ jsx5(
+            Link2,
+            {
+              href: item.href,
+              className: "text-gray-600 hover:text-purple-600 transition-colors",
+              children: item.title
+            },
+            item.href
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx5("h4", { className: "text-sm font-semibold text-gray-900 uppercase", children: texts.social }),
+          /* @__PURE__ */ jsx5("div", { className: "flex space-x-4", children: navigation.socialLinks.map((link) => /* @__PURE__ */ jsx5(
+            "a",
+            {
+              href: link.href,
+              className: "text-gray-600 hover:text-purple-600 transition-colors",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: link.title
+            },
+            link.href
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { className: "border-t border-gray-200 pt-6", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0", children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-sm text-gray-600", children: texts.copyright }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex space-x-6", children: [
+          /* @__PURE__ */ jsx5(Link2, { href: "/privacy", className: "text-sm text-gray-600 hover:text-purple-600 transition-colors", children: texts.privacy }),
+          /* @__PURE__ */ jsx5(Link2, { href: "/terms", className: "text-sm text-gray-600 hover:text-purple-600 transition-colors", children: texts.terms })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600" })
+  ] });
+};
+
+// src/hooks/useForceRerender.ts
+import { useState as useState2, useCallback } from "react";
+var useForceRerender = () => {
+  const [key, setKey] = useState2(0);
+  const forceRerender = useCallback(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, []);
+  return [key, forceRerender];
+};
+var useForceRerender_default = useForceRerender;
+export {
+  Button_default as Button,
+  CardTitle,
+  Footer,
+  Header_default as Header,
+  PageTitle,
+  SectionTitle,
+  SubTitle,
+  useForceRerender_default as useForceRerender
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/index.tsx","../src/components/Heading/index.tsx","../src/layout/Header/index.tsx","../src/layout/Header/BreadIcon.tsx","../src/layout/Footer/index.tsx","../src/hooks/useForceRerender.ts"],"sourcesContent":["import React from 'react';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'outline';\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'primary',\n  size = 'md',\n  className = '',\n  children,\n  ...props\n}) => {\n  const baseStyles = 'rounded-full font-medium transition-colors';\n  \n  const variants = {\n    primary: 'bg-purple-600 text-white hover:bg-purple-700 shadow-lg shadow-purple-500/20',\n    secondary: 'bg-purple-50 text-purple-700 hover:bg-purple-100',\n    outline: 'border-2 border-purple-600 text-purple-600 hover:bg-purple-50'\n  };\n\n  const sizes = {\n    sm: 'px-4 py-1.5 text-sm',\n    md: 'px-6 py-2 text-sm',\n    lg: 'px-8 py-3 text-base'\n  };\n\n  const classes = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;\n\n  return (\n    <button className={classes} {...props}>\n      {children}\n    </button>\n  );\n}; \n\nexport default Button;","'use client';\n\nimport { motion } from 'framer-motion';\nimport { ReactNode } from 'react';\n\nexport interface HeadingProps {\n  children?: ReactNode;\n  className?: string;\n  title?: string;\n}\n\n// 頁面主標題：大標題，帶漸變色\nexport function PageTitle({ children, title, className = '' }: HeadingProps) {\n  return (\n    <motion.h1\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.8 }}\n      className={`text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`}\n    >\n      {title || children}\n    </motion.h1>\n  );\n}\n\n// 區塊標題：中等大小，帶漸變色\nexport function SectionTitle({ children, title, className = '' }: HeadingProps) {\n  return (\n    <motion.h2\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.8, delay: 0.2 }}\n      className={`text-3xl font-bold text-center mb-16 bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent ${className}`}\n    >\n      {title || children}\n    </motion.h2>\n  );\n}\n\n// 卡片標題：較小，深灰色\nexport function CardTitle({ children, title,className = '' }: HeadingProps) {\n  return (\n    <motion.h3\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.5 }}\n      className={`text-2xl font-bold text-gray-800 ${className}`}\n    >\n      {title || children}\n    </motion.h3>\n  );\n}\n\n// 區塊子標題：最小，帶圖標位置\nexport function SubTitle({ children, title, className = '' }: HeadingProps) {\n  return (\n    <motion.h4\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.5 }}\n      className={`text-lg font-semibold text-gray-800 ${className}`}\n    >\n      {title || children}\n    </motion.h4>\n  );\n} \n\nexport default {\n  PageTitle,\n  SectionTitle,\n  CardTitle,\n  SubTitle,\n}","'use client';\nimport React, { useState } from 'react';\nimport Link from 'next/link';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport BreadIcon from './BreadIcon';\nimport { usePathname } from 'next/navigation';\nexport interface NavItem {\n  key: string;\n  href: string;\n  label: string;\n  className?: {\n    pc?: string;\n    mobile?: string;\n  };\n}\n\nexport interface HeaderProps {\n  logo: React.ReactNode;\n  menuItems: NavItem[];\n  className?: string;\n  /** 是否啟用動畫效果 */\n  enableAnimation?: boolean;\n}\nconst getActivedCls = (href: string, selectedKey: string) => {\n  if(href.includes(selectedKey) || (href === '/' && selectedKey === 'home')) {\n    return 'text-purple-600';\n  }\n  return 'text-gray-600';\n}\nexport const Header: React.FC<HeaderProps> = ({\n  logo,\n  menuItems,\n  className = '',\n  enableAnimation = true,\n}) => {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const selectedKey = usePathname().split('/')[2] || 'home'; // todo support home\n  console.log('selectedKey>>>',selectedKey);\n  // 基礎樣式\n  const baseNavClassName = `fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-purple-100 ${className}`;\n  // 動畫配置\n  const navVariants = {\n    hidden: { y: -20, opacity: 0 },\n    visible: { \n      y: 0, \n      opacity: 1,\n      transition: {\n        duration: 0.5,\n        ease: \"easeOut\"\n      }\n    }\n  };\n\n  const mobileMenuVariants = {\n    hidden: { \n      height: 0,\n      opacity: 0,\n      transition: {\n        duration: 0.3,\n        ease: \"easeInOut\"\n      }\n    },\n    visible: { \n      height: \"auto\",\n      opacity: 1,\n      transition: {\n        duration: 0.3,\n        ease: \"easeInOut\"\n      }\n    }\n  };\n\n  // 根據是否啟用動畫返回不同的組件\n  const NavComponent = enableAnimation ? motion.nav : 'nav';\n  const MobileMenuComponent = enableAnimation ? motion.div : 'div';\nconsole.log('menuItems>>>',menuItems);\n  return (\n    <NavComponent \n      className={baseNavClassName}\n      {...(enableAnimation && {\n        initial: \"hidden\",\n        animate: \"visible\",\n        variants: navVariants\n      })}\n    >\n      <div className=\"container mx-auto px-4\">\n        <div className=\"flex items-center justify-between h-20\">\n          {/* Logo */}\n          {logo}\n\n          {/* Desktop Navigation */}\n          <nav className=\"hidden md:flex items-center space-x-8\">\n            {menuItems.map((item) => (\n              // <Link\n              // key={item.key}\n              //     href=\"/\"\n              //     className=\"flex items-center justify-center gap-2 text-lg font-bold tracking-wide transition-all duration-300 ease-in-out\"\n              // >\n              //   {item.label}\n              // </Link>\n              <NavLink key={item.key} href={item.href} className={item.className?.pc} selectedKey={selectedKey}>\n                {item.label}\n              </NavLink>\n            ))}\n          </nav>\n\n          {/* Mobile Menu Button */}\n          <button \n            onClick={() => setIsMenuOpen(!isMenuOpen)}\n            className=\"md:hidden p-2 hover:bg-purple-50 rounded-lg transition-colors\"\n          >\n            <BreadIcon isMenuOpen={isMenuOpen}/>\n          </button>\n        </div>\n\n        {/* Mobile Menu */}\n        <AnimatePresence>\n          {isMenuOpen && (\n            <MobileMenuComponent\n              className=\"md:hidden overflow-hidden\"\n              {...(enableAnimation && {\n                initial: \"hidden\",\n                animate: \"visible\",\n                exit: \"hidden\",\n                variants: mobileMenuVariants\n              })}\n            >\n              <div className=\"flex flex-col space-y-4 py-4 items-center\">\n                {menuItems.map((item) => (\n                  <motion.div\n                    key={item.key}\n                    {...(enableAnimation && {\n                      initial: { x: -20, opacity: 0 },\n                      animate: { x: 0, opacity: 1 },\n                      transition: { delay: 0.1 }\n                    })}\n                  >\n                    {\n                      menuItems.map((item) => (\n                          <MobileNavLink key={item.key} href={item.href} className={item.className?.mobile} selectedKey={selectedKey}>{item.label}</MobileNavLink>\n                      ))\n                    }\n                  </motion.div>\n                ))}\n              </div>\n            </MobileMenuComponent>\n          )}\n        </AnimatePresence>\n      </div>\n    </NavComponent>\n  );\n}; \n\n\nconst NavLink = ({ href, children, className, selectedKey }: { href: string; children: React.ReactNode, className?: string, selectedKey: string }) => {\n  const combinedClassName = `${className || 'text-gray-600 hover:text-black transition-colors'} ${getActivedCls(href, selectedKey)}`;\n  return (\n    <Link href={href} legacyBehavior>\n      <a className={combinedClassName}>{children}</a>\n    </Link>\n  );\n};\n\nconst MobileNavLink = ({ href, children, className, selectedKey }: { href: string; children: React.ReactNode, className?: string, selectedKey: string }) => {\n  const combinedClassName = `${className || 'text-lg font-medium text-center text-gray-600 hover:text-purple-600 transition-colors'} ${getActivedCls(href, selectedKey)}`;\n  return (\n    <Link href={href} legacyBehavior>\n      <a className={combinedClassName}>{children}</a>\n    </Link>\n  );\n};\n\nexport default Header;","export default function BreadIcon({isMenuOpen}: {isMenuOpen: boolean}) {\n    return (\n        <div className=\"w-6 h-5 relative flex flex-col justify-between\">\n              <span className={`w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? 'rotate-45 translate-y-2' : ''}`} />\n              <span className={`w-full h-0.5 bg-gray-800 transition-opacity duration-300 ${isMenuOpen ? 'opacity-0' : ''}`} />\n              <span className={`w-full h-0.5 bg-gray-800 transition-transform duration-300 ${isMenuOpen ? '-rotate-45 -translate-y-2' : ''}`} />\n        </div>\n    )\n}","'use client';\nimport React from 'react';\nimport Link from 'next/link';\n\nexport interface FooterLink {\n  href: string;\n  title: string;\n}\n\nexport interface FooterTexts {\n  copyright: string;\n  privacy: string;\n  terms: string;\n  social: string;\n}\n\nexport interface FooterProps {\n  /** 網站基本信息 */\n  site: {\n    name: string;\n    description: string;\n  };\n  /** 導航鏈接 */\n  navigation: {\n    /** 快速鏈接區塊 */\n    quickLinks: {\n      title: string;\n      items: FooterLink[];\n    };\n    /** 社交媒體鏈接 */\n    socialLinks: FooterLink[];\n  };\n  /** 頁腳文本 */\n  texts: FooterTexts;\n  /** 自定義類名 */\n  className?: string;\n}\n\nexport const Footer: React.FC<FooterProps> = ({\n  site,\n  navigation,\n  texts,\n  className = '',\n}) => {\n  return (\n    <footer className={`relative bg-gradient-to-b from-gray-50 to-gray-100 pt-16 pb-6 ${className}`}>\n      <div className=\"absolute inset-0 bg-grid-gray-200/25 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))]\" />\n      \n      <div className=\"container mx-auto p-4 relative\">\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8 mb-12\">\n          {/* Brand Section */}\n          <div className=\"space-y-4\">\n            <h3 className=\"text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent\">\n              {site.name}\n            </h3>\n            <p className=\"text-gray-600 max-w-xs\">\n              {site.description}\n            </p>\n          </div>\n\n          {/* Quick Links */}\n          <div className=\"space-y-4\">\n            <h4 className=\"text-sm font-semibold text-gray-900 uppercase\">\n              {navigation.quickLinks.title}\n            </h4>\n            <nav className=\"flex flex-col space-y-2\">\n              {navigation.quickLinks.items.map((item) => (\n                <Link\n                  key={item.href}\n                  href={item.href}\n                  className=\"text-gray-600 hover:text-purple-600 transition-colors\"\n                >\n                  {item.title}\n                </Link>\n              ))}\n            </nav>\n          </div>\n\n          {/* Social Links */}\n          <div className=\"space-y-4\">\n            <h4 className=\"text-sm font-semibold text-gray-900 uppercase\">\n              {texts.social}\n            </h4>\n            <div className=\"flex space-x-4\">\n              {navigation.socialLinks.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"text-gray-600 hover:text-purple-600 transition-colors\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  {link.title}\n                </a>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom Bar */}\n        <div className=\"border-t border-gray-200 pt-6\">\n          <div className=\"flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0\">\n            <p className=\"text-sm text-gray-600\">\n              {texts.copyright}\n            </p>\n            <div className=\"flex space-x-6\">\n              <Link href=\"/privacy\" className=\"text-sm text-gray-600 hover:text-purple-600 transition-colors\">\n                {texts.privacy}\n              </Link>\n              <Link href=\"/terms\" className=\"text-sm text-gray-600 hover:text-purple-600 transition-colors\">\n                {texts.terms}\n              </Link>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Decorative gradient line */}\n      <div className=\"absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600\" />\n    </footer>\n  );\n}; ","import { useState, useCallback } from 'react';\n\nconst useForceRerender = (): [number, () => void] => {\n  const [key, setKey] = useState(0);\n\n  const forceRerender = useCallback(() => {\n    setKey(prevKey => prevKey + 1);\n  }, []);\n\n  return [key, forceRerender];\n};\n\nexport default useForceRerender;"],"mappings":"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","names":["jsx","motion","jsx","jsx","jsxs","motion","item","Link","jsx","jsxs","useState"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "jean-react-utils",
+  "version": "0.1.0",
+  "description": "Jean's personal reusable components, hooks, theme and i18n utils for Next.js projects",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "build": "tsup src/index.ts",
+    "test": "vitest",
+    "lint": "eslint . --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.6.1",
+    "autoprefixer": "^10.4.21",
+    "happy-dom": "^13.3.8",
+    "postcss": "^8.5.4",
+    "tailwindcss": "^4.1.8",
+    "tsup": "^8.0.2",
+    "vitest": "^1.6.1"
+  },
+  "peerDependencies": {
+    "@emotion/is-prop-valid": "^1.2.1",
+    "framer-motion": "^12.1.6",
+    "next": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "author": "jean-w",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Jean-W-FE/jean-react-utils.git"
+  },
+  "keywords": [
+    "jean-react-utils",
+    "jean-dev",
+    "jean-blog-site"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}