@xiping/react-components 0.0.50 → 0.0.57

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, xiping.wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/dist/cjs/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/cjs/components/button/Button.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    /** Button variant that changes the visual style */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Custom class name */
+    className?: string;
+    /** Button contents */
+    children: ReactNode;
+    /** Optional icon to show before the button text */
+    leftIcon?: ReactNode;
+    /** Optional icon to show after the button text */
+    rightIcon?: ReactNode;
+    /** Whether the button is in loading state */
+    isLoading?: boolean;
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+    /** Full width button */
+    fullWidth?: boolean;
+}
+export declare const Button: ({ variant, size, className, children, leftIcon, rightIcon, isLoading, isDisabled, fullWidth, type, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("clsx"),f=({variant:a="primary",size:l="medium",className:n,children:c,leftIcon:s,rightIcon:t,isLoading:r=!1,isDisabled:o=!1,fullWidth:i=!1,type:u="button",...m})=>{const g="inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",y={primary:"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",secondary:"bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",outline:"border border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-gray-500",ghost:"bg-transparent hover:bg-gray-100 focus:ring-gray-500"},x={small:"px-3 py-1.5 text-sm",medium:"px-4 py-2 text-base",large:"px-6 py-3 text-lg"},b=p(g,y[a],x[l],{"opacity-50 cursor-not-allowed":o,"w-full":i,"cursor-wait":r},n);return e.jsxs("button",{type:u,className:b,disabled:o||r,...m,children:[r&&e.jsxs("svg",{className:"animate-spin -ml-1 mr-2 h-4 w-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",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"})]}),!r&&s&&e.jsx("span",{className:"mr-2",children:s}),c,!r&&t&&e.jsx("span",{className:"ml-2",children:t})]})};exports.Button=f;

package/dist/cjs/components/image-viewer/ImageViewer.d.ts

@@ -0,0 +1,7 @@
+interface ImageViewerProps {
+    isOpen: boolean;
+    imgSrc: string;
+    onClose: () => void;
+}
+declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageViewer;

package/dist/cjs/components/image-viewer/ImageViewer.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("@nextui-org/modal"),n=require("../../node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/io5/index.js"),r=require("../pinch-content/PinchContent.js"),i=s=>{const{isOpen:o,onClose:t,imgSrc:a}=s;return e.jsx(l.Modal,{isOpen:o,size:"full",onClose:t,className:"pppp bg-black bg-opacity-70",hideCloseButton:!0,children:e.jsxs(l.ModalContent,{children:[e.jsx(l.ModalHeader,{className:"flex flex-col gap-1 relative",children:e.jsx(n.IoCloseSharp,{className:"absolute top-2 right-2 text-white",onClick:t})}),e.jsx(l.ModalBody,{className:"flex items-center justify-center",children:e.jsx(r.default,{children:e.jsx("img",{draggable:"false",src:a,alt:"",className:"w-full h-full object-contain pointer-events-none"})})}),e.jsx(l.ModalFooter,{})]})})};exports.default=i;

package/dist/cjs/components/image-viewer/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ImageViewer } from './ImageViewer';
+export { ImageViewer };
+export default ImageViewer;

package/dist/cjs/components/pinch-content/PinchContent.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface PinchContentProps {
+    children?: ReactNode;
+    canDrag?: boolean;
+    canPinch?: boolean;
+    canRotate?: boolean;
+    scaleBounds?: {
+        min: number;
+        max: number;
+    };
+}
+declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
+export default PinchContent;

package/dist/cjs/components/pinch-content/PinchContent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),v=require("@react-spring/web"),d=require("@use-gesture/react"),w=require("react"),h=require("ahooks"),A=d.createUseGesture([d.dragAction,d.pinchAction]),c=a=>a.preventDefault(),B=a=>{const{children:x,canPinch:y=!0,canDrag:p=!0,canRotate:b=!0,scaleBounds:E={min:.3,max:8}}=a,t=w.useRef(null);h.useMount(()=>{var r,e,n;(r=t.current)==null||r.addEventListener("gesturestart",c),(e=t.current)==null||e.addEventListener("gesturechange",c),(n=t.current)==null||n.addEventListener("gestureend",c)}),h.useUnmount(()=>{var r,e,n;(r=t.current)==null||r.removeEventListener("gesturestart",c),(e=t.current)==null||e.removeEventListener("gesturechange",c),(n=t.current)==null||n.removeEventListener("gestureend",c)});const[u,g]=v.useSpring(()=>({x:0,y:0,scale:1,rotateZ:0}));return A({onDrag:({pinching:r,cancel:e,offset:[n,o],...i})=>{if(console.log(i),!p||r)return e();g.start({x:n,y:o})},onPinch:({origin:[r,e],first:n,movement:[o],offset:[i,L],memo:s,cancel:q})=>{if(!y)return q();if(n){const{width:P,height:m,x:D,y:M}=t.current.getBoundingClientRect(),S=r-(D+P/2),Z=e-(M+m/2);s=[u.x.get(),u.y.get(),S,Z]}const R=s[0]-(o-1)*s[2],j=s[1]-(o-1)*s[3],l={scale:i,rotateZ:0,x:R,y:j};return b&&(l.rotateZ=L),g.start(l),s}},{target:t,drag:{from:()=>[u.x.get(),u.y.get()]},pinch:{scaleBounds:E,rubberband:!0}}),f.jsx("div",{className:"flex fill center",children:f.jsx(v.animated.div,{className:"select-none",ref:t,style:u,children:x})})};exports.default=B;

package/dist/cjs/components/pinch-content/index.d.ts

@@ -0,0 +1,4 @@
+import { default as PinchContent } from './PinchContent';
+export * from './PinchContent';
+export { PinchContent };
+export default PinchContent;

package/dist/cjs/components/pinch-content/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./PinchContent.js");exports.PinchContent=e.default;exports.default=e.default;

package/dist/cjs/components/translate/Translate.d.ts

@@ -0,0 +1,5 @@
+interface TranslateProps {
+    text: string;
+}
+declare const Translate: (props: TranslateProps) => import("react/jsx-runtime").JSX.Element;
+export default Translate;

package/dist/cjs/components/txt-reader/TxtReader.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FC } from 'react';
+interface TxtReaderProps {
+    content: string;
+    lineHeight?: number;
+    fontSize?: number;
+    fontWeight?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    onProgressChange?: (progress: number) => void;
+    initialScrollPosition?: number;
+    cacheKey?: string;
+}
+export declare const TxtReader: FC<TxtReaderProps>;
+export default TxtReader;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("react"),_=require("lodash-es"),w=require("clsx"),H=16,I=1.5,S="normal",d=({content:f,lineHeight:p=I,fontSize:x=H,fontWeight:T=S,className:b="",style:m={},onProgressChange:o,initialScrollPosition:u,cacheKey:t})=>{const r=s.useRef(null),[E,v]=s.useState(0),c=s.useCallback(()=>{if(!r.current)return;const e=r.current,l=e.scrollTop,g=e.scrollHeight,R=e.clientHeight,a=Math.min(Math.round(l/(g-R)*100),100);v(a),o==null||o(a),t&&localStorage.setItem(`txtReader-${t}`,l.toString())},[t,o]),n=s.useCallback(_.debounce(c,100),[c]);return s.useEffect(()=>{if(!r.current)return;let e=u;if(t){const l=localStorage.getItem(`txtReader-${t}`);l&&(e=parseInt(l,10))}e&&(r.current.scrollTop=e,c())},[t,u,c]),s.useEffect(()=>{const e=r.current;if(e)return e.addEventListener("scroll",n),()=>{e.removeEventListener("scroll",n)}},[n]),i.jsxs("div",{className:"relative w-full h-full",children:[i.jsx("div",{ref:r,className:w("w-full overflow-auto whitespace-pre-wrap break-words",b),style:{fontSize:`${x}px`,lineHeight:p,fontWeight:T,...m},children:f}),i.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:[E,"%"]})]})};exports.TxtReader=d;exports.default=d;

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/button/Button';
+export * from './components/txt-reader/TxtReader';
+export * from './components/pinch-content';
+export * from './components/image-viewer';

package/dist/cjs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const e=require("./components/button/Button.js"),t=require("./components/txt-reader/TxtReader.js"),r=require("./components/pinch-content/PinchContent.js"),n=require("./components/image-viewer/ImageViewer.js");exports.Button=e.Button;exports.TxtReader=t.TxtReader;exports.PinchContent=r.default;exports.ImageViewer=n.default;

package/dist/cjs/node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/io5/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../lib/iconBase.js");require("../lib/iconContext.js");function r(e){return t.GenIcon({tag:"svg",attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"},child:[]}]})(e)}exports.IoCloseSharp=r;

package/dist/cjs/node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/lib/iconBase.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),s=require("./iconContext.js");var O=["attr","size","title"];function v(e,t){if(e==null)return{};var r=y(e,t),n,i;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function y(e,t){if(e==null)return{};var r={};for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){if(t.indexOf(n)>=0)continue;r[n]=e[n]}return r}function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?m(Object(r),!0).forEach(function(n){j(e,n,r[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})}return e}function j(e,t,r){return t=P(t),t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){var t=h(e,"string");return typeof t=="symbol"?t:t+""}function h(e,t){if(typeof e!="object"||!e)return e;var r=e[Symbol.toPrimitive];if(r!==void 0){var n=r.call(e,t||"default");if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function b(e){return e&&e.map((t,r)=>l.createElement(t.tag,u({key:r},t.attr),b(t.child)))}function d(e){return t=>l.createElement(p,c({attr:u({},e.attr)},t),b(e.child))}function p(e){var t=r=>{var{attr:n,size:i,title:o}=e,g=v(e,O),f=i||r.size||"1em",a;return r.className&&(a=r.className),e.className&&(a=(a?a+" ":"")+e.className),l.createElement("svg",c({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,n,g,{className:a,style:u(u({color:e.color||r.color},r.style),e.style),height:f,width:f,xmlns:"http://www.w3.org/2000/svg"}),o&&l.createElement("title",null,o),e.children)};return s.IconContext!==void 0?l.createElement(s.IconContext.Consumer,null,r=>t(r)):t(s.DefaultContext)}exports.GenIcon=d;exports.IconBase=p;

package/dist/cjs/node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/lib/iconContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");var t={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},n=e.createContext&&e.createContext(t);exports.DefaultContext=t;exports.IconContext=n;

package/dist/cjs/pages/home/Home.d.ts

@@ -0,0 +1,2 @@
+declare const Home: () => import("react/jsx-runtime").JSX.Element;
+export default Home;