@xiping/react-components 0.0.50 → 0.0.57

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xiping/react-components",
   "private": false,
-  "version": "0.0.50",
+  "version": "0.0.57",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,10 +11,10 @@
   "sideEffects": false,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint ",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6008",
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
@@ -22,20 +22,29 @@
     "react-dom": ">=18 || >= 19"
   },
   "dependencies": {
+    "@nextui-org/button": "^2.2.9",
+    "@nextui-org/modal": "^2.2.7",
+    "@nextui-org/react": "^2.6.11",
+    "@nextui-org/system": "^2.4.6",
+    "@nextui-org/theme": "^2.4.5",
+    "@react-spring/web": "^9.7.5",
+    "@use-gesture/react": "^10.3.1",
     "ahooks": "^3.8.4",
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
+    "framer-motion": "^11.17.0",
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.1",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",
     "@eslint/js": "^9.17.0",
+    "@faker-js/faker": "^9.3.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",
@@ -44,7 +53,7 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.5",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
@@ -52,7 +61,7 @@
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^0.11.2",
     "globals": "^15.14.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
@@ -61,10 +70,11 @@
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5",
-    "vite-plugin-dts": "^4.4.0",
+    "typescript-eslint": "^8.19.1",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.5.0",
     "vite-plugin-image-optimizer": "^1.1.8",
+    "vite-plugin-lib-inject-css": "^2.2.1",
     "vite-plugin-zip-pack": "^1.2.4",
     "vite-tsconfig-paths": "^5.1.4"
   },
@@ -74,5 +84,5 @@
   "engines": {
     "node": ">=18"
   },
-  "gitHead": "6751e580d83f03839bf0bdbe0782df20378ee94b"
+  "gitHead": "3d5bd8601f319bf9e47829ae8fbc828415da5ae1"
 }

package/dist/_virtual/jsx-runtime.js

@@ -1,6 +0,0 @@
-import { __require as r } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
-var i = r();
-export {
-  i as j
-};
-//# sourceMappingURL=jsx-runtime.js.map

package/dist/_virtual/jsx-runtime.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"jsx-runtime.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/jsx-runtime2.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=jsx-runtime2.js.map

package/dist/_virtual/jsx-runtime2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"jsx-runtime2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.development.js

@@ -1,5 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};
-//# sourceMappingURL=react-jsx-runtime.development.js.map

package/dist/_virtual/react-jsx-runtime.development.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-jsx-runtime.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.production.min.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=react-jsx-runtime.production.min.js.map

package/dist/_virtual/react-jsx-runtime.production.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-jsx-runtime.production.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import { ReactNode, ButtonHTMLAttributes } from \"react\";\nimport clsx from \"clsx\";\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** Button variant that changes the visual style */\n  variant?: ButtonVariant;\n  /** Size of the button */\n  size?: ButtonSize;\n  /** Custom class name */\n  className?: string;\n  /** Button contents */\n  children: ReactNode;\n  /** Optional icon to show before the button text */\n  leftIcon?: ReactNode;\n  /** Optional icon to show after the button text */\n  rightIcon?: ReactNode;\n  /** Whether the button is in loading state */\n  isLoading?: boolean;\n  /** Whether the button is disabled */\n  isDisabled?: boolean;\n  /** Full width button */\n  fullWidth?: boolean;\n}\n\nexport const Button = ({\n  variant = 'primary',\n  size = 'medium',\n  className,\n  children,\n  leftIcon,\n  rightIcon,\n  isLoading = false,\n  isDisabled = false,\n  fullWidth = false,\n  type = 'button',\n  ...rest\n}: ButtonProps) => {\n  const baseStyles = \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2\";\n  \n  const variantStyles = {\n    primary: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500\",\n    secondary: \"bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500\",\n    outline: \"border border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-gray-500\",\n    ghost: \"bg-transparent hover:bg-gray-100 focus:ring-gray-500\"\n  };\n\n  const sizeStyles = {\n    small: \"px-3 py-1.5 text-sm\",\n    medium: \"px-4 py-2 text-base\",\n    large: \"px-6 py-3 text-lg\"\n  };\n\n  const classes = clsx(\n    baseStyles,\n    variantStyles[variant],\n    sizeStyles[size],\n    {\n      'opacity-50 cursor-not-allowed': isDisabled,\n      'w-full': fullWidth,\n      'cursor-wait': isLoading\n    },\n    className\n  );\n\n  return (\n    <button\n      type={type}\n      className={classes}\n      disabled={isDisabled || isLoading}\n      {...rest}\n    >\n      {isLoading && (\n        <svg \n          className=\"animate-spin -ml-1 mr-2 h-4 w-4\" \n          xmlns=\"http://www.w3.org/2000/svg\" \n          fill=\"none\" \n          viewBox=\"0 0 24 24\"\n        >\n          <circle \n            className=\"opacity-25\" \n            cx=\"12\" \n            cy=\"12\" \n            r=\"10\" \n            stroke=\"currentColor\" \n            strokeWidth=\"4\"\n          />\n          <path \n            className=\"opacity-75\" \n            fill=\"currentColor\" \n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          />\n        </svg>\n      )}\n      {!isLoading && leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\n      {children}\n      {!isLoading && rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\n    </button>\n  );\n};\n"],"names":["Button","variant","size","className","children","leftIcon","rightIcon","isLoading","isDisabled","fullWidth","type","rest","baseStyles","variantStyles","sizeStyles","classes","clsx","jsxs","jsx"],"mappings":";;AA2BO,MAAMA,IAAS,CAAC;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MAAmB;AACjB,QAAMC,IAAa,wIAEbC,IAAgB;AAAA,IACpB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,EACT,GAEMC,IAAa;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,GAEMC,IAAUC;AAAA,IACdJ;AAAA,IACAC,EAAcZ,CAAO;AAAA,IACrBa,EAAWZ,CAAI;AAAA,IACf;AAAA,MACE,iCAAiCM;AAAA,MACjC,UAAUC;AAAA,MACV,eAAeF;AAAA,IACjB;AAAA,IACAJ;AAAA,EACF;AAGE,SAAAc,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,WAAWK;AAAA,MACX,UAAUP,KAAcD;AAAA,MACvB,GAAGI;AAAA,MAEH,UAAA;AAAA,QACCJ,KAAAU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,SAAQ;AAAA,YAER,UAAA;AAAA,cAAAC,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,QAAO;AAAA,kBACP,aAAY;AAAA,gBAAA;AAAA,cACd;AAAA,cACAA,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,GAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACF;AAAA,QAED,CAACX,KAAaF,2BAAa,QAAK,EAAA,WAAU,QAAQ,UAASA,GAAA;AAAA,QAC3DD;AAAA,QACA,CAACG,KAAaD,2BAAc,QAAK,EAAA,WAAU,QAAQ,UAAUA,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChE;AAEJ;"}

package/dist/components/txt-reader/TxtReader.js

@@ -1,69 +0,0 @@
-import { j as c } from "../../_virtual/jsx-runtime.js";
-import { useRef as H, useState as I, useCallback as u, useEffect as d } from "react";
-import { debounce as R } from "lodash-es";
-import L from "clsx";
-const N = 16, _ = 1.5, j = "normal", A = ({
-  content: f,
-  lineHeight: p = _,
-  fontSize: m = N,
-  fontWeight: x = j,
-  className: E = "",
-  style: T = {},
-  onProgressChange: s,
-  initialScrollPosition: i,
-  cacheKey: e
-}) => {
-  const r = H(null), [b, v] = I(0), l = u(() => {
-    if (!r.current) return;
-    const t = r.current, o = t.scrollTop, g = t.scrollHeight, w = t.clientHeight, a = Math.min(
-      Math.round(o / (g - w) * 100),
-      100
-    );
-    v(a), s == null || s(a), e && localStorage.setItem(`txtReader-${e}`, o.toString());
-  }, [e, s]), n = u(
-    R(l, 100),
-    [l]
-  );
-  return d(() => {
-    if (!r.current) return;
-    let t = i;
-    if (e) {
-      const o = localStorage.getItem(`txtReader-${e}`);
-      o && (t = parseInt(o, 10));
-    }
-    t && (r.current.scrollTop = t, l());
-  }, [e, i, l]), d(() => {
-    const t = r.current;
-    if (t)
-      return t.addEventListener("scroll", n), () => {
-        t.removeEventListener("scroll", n);
-      };
-  }, [n]), /* @__PURE__ */ c.jsxs("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ c.jsx(
-      "div",
-      {
-        ref: r,
-        className: L(
-          "w-full overflow-auto whitespace-pre-wrap break-words",
-          E
-        ),
-        style: {
-          fontSize: `${m}px`,
-          lineHeight: p,
-          fontWeight: x,
-          ...T
-        },
-        children: f
-      }
-    ),
-    /* @__PURE__ */ c.jsxs("div", { className: "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5", children: [
-      b,
-      "%"
-    ] })
-  ] });
-};
-export {
-  A as TxtReader,
-  A as default
-};
-//# sourceMappingURL=TxtReader.js.map

package/dist/components/txt-reader/TxtReader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TxtReader.js","sources":["../../../src/components/txt-reader/TxtReader.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n  CSSProperties,\n  FC,\n} from \"react\";\nimport { debounce } from \"lodash-es\";\nimport clsx from \"clsx\";\ninterface TxtReaderProps {\n  content: string;\n  lineHeight?: number;\n  fontSize?: number;\n  fontWeight?: number | string;\n  className?: string;\n  style?: CSSProperties;\n  onProgressChange?: (progress: number) => void;\n  initialScrollPosition?: number;\n  cacheKey?: string; // 用于缓存阅读位置的key\n}\n\nconst DEFAULT_FONT_SIZE = 16;\nconst DEFAULT_LINE_HEIGHT = 1.5;\nconst DEFAULT_FONT_WEIGHT = \"normal\";\n\nexport const TxtReader: FC<TxtReaderProps> = ({\n  content,\n  lineHeight = DEFAULT_LINE_HEIGHT,\n  fontSize = DEFAULT_FONT_SIZE,\n  fontWeight = DEFAULT_FONT_WEIGHT,\n  className = \"\",\n  style = {},\n  onProgressChange,\n  initialScrollPosition,\n  cacheKey,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [readingProgress, setReadingProgress] = useState(0);\n\n  // 计算阅读进度\n  const calculateProgress = useCallback(() => {\n    if (!containerRef.current) return;\n\n    const container = containerRef.current;\n    const scrollTop = container.scrollTop;\n    const scrollHeight = container.scrollHeight;\n    const clientHeight = container.clientHeight;\n\n    const progress = Math.min(\n      Math.round((scrollTop / (scrollHeight - clientHeight)) * 100),\n      100,\n    );\n\n    setReadingProgress(progress);\n    onProgressChange?.(progress);\n\n    // 保存阅读位置到 localStorage\n    if (cacheKey) {\n      localStorage.setItem(`txtReader-${cacheKey}`, scrollTop.toString());\n    }\n  }, [cacheKey, onProgressChange]);\n\n  // 使用 debounce 优化滚动事件处理\n  const debouncedCalculateProgress = useCallback(\n    debounce(calculateProgress, 100),\n    [calculateProgress],\n  );\n\n  // 初始化滚动位置\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    let scrollPosition = initialScrollPosition;\n\n    // 如果有缓存key，尝试从localStorage获取保存的位置\n    if (cacheKey) {\n      const savedPosition = localStorage.getItem(`txtReader-${cacheKey}`);\n      if (savedPosition) {\n        scrollPosition = parseInt(savedPosition, 10);\n      }\n    }\n\n    if (scrollPosition) {\n      containerRef.current.scrollTop = scrollPosition;\n      calculateProgress();\n    }\n  }, [cacheKey, initialScrollPosition, calculateProgress]);\n\n  // 监听滚动事件\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.addEventListener(\"scroll\", debouncedCalculateProgress);\n    return () => {\n      container.removeEventListener(\"scroll\", debouncedCalculateProgress);\n    };\n  }, [debouncedCalculateProgress]);\n\n  return (\n    <div className=\"relative w-full h-full\">\n      <div\n        ref={containerRef}\n        className={clsx(\n          \"w-full overflow-auto whitespace-pre-wrap break-words\",\n          className,\n        )}\n        style={{\n          fontSize: `${fontSize}px`,\n          lineHeight: lineHeight,\n          fontWeight: fontWeight,\n          ...style,\n        }}\n      >\n        {content}\n      </div>\n      <div className=\"fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5\">\n        {readingProgress}%\n      </div>\n    </div>\n  );\n};\n\nexport default TxtReader;\n"],"names":["DEFAULT_FONT_SIZE","DEFAULT_LINE_HEIGHT","DEFAULT_FONT_WEIGHT","TxtReader","content","lineHeight","fontSize","fontWeight","className","style","onProgressChange","initialScrollPosition","cacheKey","containerRef","useRef","readingProgress","setReadingProgress","useState","calculateProgress","useCallback","container","scrollTop","scrollHeight","clientHeight","progress","debouncedCalculateProgress","debounce","useEffect","scrollPosition","savedPosition","jsxs","jsx","clsx"],"mappings":";;;;AAsBA,MAAMA,IAAoB,IACpBC,IAAsB,KACtBC,IAAsB,UAEfC,IAAgC,CAAC;AAAA,EAC5C,SAAAC;AAAA,EACA,YAAAC,IAAaJ;AAAA,EACb,UAAAK,IAAWN;AAAA,EACX,YAAAO,IAAaL;AAAA,EACb,WAAAM,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAC;AAAA,EACT,kBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAAC,IAAeC,EAAuB,IAAI,GAC1C,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,CAAC,GAGlDC,IAAoBC,EAAY,MAAM;AACtC,QAAA,CAACN,EAAa,QAAS;AAE3B,UAAMO,IAAYP,EAAa,SACzBQ,IAAYD,EAAU,WACtBE,IAAeF,EAAU,cACzBG,IAAeH,EAAU,cAEzBI,IAAW,KAAK;AAAA,MACpB,KAAK,MAAOH,KAAaC,IAAeC,KAAiB,GAAG;AAAA,MAC5D;AAAA,IACF;AAEA,IAAAP,EAAmBQ,CAAQ,GAC3Bd,KAAA,QAAAA,EAAmBc,IAGfZ,KACF,aAAa,QAAQ,aAAaA,CAAQ,IAAIS,EAAU,UAAU;AAAA,EACpE,GACC,CAACT,GAAUF,CAAgB,CAAC,GAGzBe,IAA6BN;AAAA,IACjCO,EAASR,GAAmB,GAAG;AAAA,IAC/B,CAACA,CAAiB;AAAA,EACpB;AAGA,SAAAS,EAAU,MAAM;AACV,QAAA,CAACd,EAAa,QAAS;AAE3B,QAAIe,IAAiBjB;AAGrB,QAAIC,GAAU;AACZ,YAAMiB,IAAgB,aAAa,QAAQ,aAAajB,CAAQ,EAAE;AAClE,MAAIiB,MACeD,IAAA,SAASC,GAAe,EAAE;AAAA,IAC7C;AAGF,IAAID,MACFf,EAAa,QAAQ,YAAYe,GACfV,EAAA;AAAA,EAEnB,GAAA,CAACN,GAAUD,GAAuBO,CAAiB,CAAC,GAGvDS,EAAU,MAAM;AACd,UAAMP,IAAYP,EAAa;AAC/B,QAAKO;AAEK,aAAAA,EAAA,iBAAiB,UAAUK,CAA0B,GACxD,MAAM;AACD,QAAAL,EAAA,oBAAoB,UAAUK,CAA0B;AAAA,MACpE;AAAA,EAAA,GACC,CAACA,CAA0B,CAAC,GAG7BK,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,0BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKlB;AAAA,QACL,WAAWmB;AAAA,UACT;AAAA,UACAxB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,UAAU,GAAGF,CAAQ;AAAA,UACrB,YAAAD;AAAA,UACA,YAAAE;AAAA,UACA,GAAGE;AAAA,QACL;AAAA,QAEC,UAAAL;AAAA,MAAA;AAAA,IACH;AAAA,IACA0B,gBAAAA,EAAAA,KAAC,OAAI,EAAA,WAAU,gGACZ,UAAA;AAAA,MAAAf;AAAA,MAAgB;AAAA,IAAA,EACnB,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/index.js

@@ -1,8 +0,0 @@
-/* empty css          */
-import { Button as e } from "./components/button/Button.js";
-import { TxtReader as p } from "./components/txt-reader/TxtReader.js";
-export {
-  e as Button,
-  p as TxtReader
-};
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}