@rxdrag/website-lib-core 0.0.101 → 0.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.101",
+  "version": "0.0.103",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
+    "@rxdrag/slate-preview": "1.2.63",
     "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/eslint-config-custom": "0.2.12",
-    "@rxdrag/slate-preview": "1.2.63"
+    "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
     "@iconify/utils": "^3.0.2",
@@ -37,7 +37,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "@rxdrag/entify-lib": "0.0.23",
-    "@rxdrag/rxcms-models": "0.3.95"
+    "@rxdrag/rxcms-models": "0.3.96"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/react/components/Medias/index.tsx

@@ -122,7 +122,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
         selectedId={selectedId}
         aspect={aspect}
         enableZoom={enableZoom}
-        className={clsx(isVerticalThumbs ? "flex-1" : "w-full", mainArea)}
+        className={clsx(isVerticalThumbs ? "w-full md:flex-1" : "w-full", mainArea)}
         arrowButtonClass={arrowButton}
         arrowIconClass={arrowIcon}
         playButtonClass={playButton}
@@ -137,7 +137,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
         <div
           className={clsx(
             "relative group/thumbs",
-            isVerticalThumbs ? "w-24 h-full px-1" : "w-full mt-4",
+            isVerticalThumbs ? "w-full mt-4 md:w-24 md:h-full md:px-1" : "w-full mt-4",
             navigation
           )}
         >
@@ -151,7 +151,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
                 "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
                 "text-gray-700 dark:text-gray-200 transition-all duration-200",
                 isVerticalThumbs
-                  ? "top-2 left-1/2 -translate-x-1/2"
+                  ? "left-2 top-1/2 -translate-y-1/2 md:top-2 md:left-1/2 md:-translate-x-1/2"
                   : "left-2 top-1/2 -translate-y-1/2",
                 !canPrevious
                   ? "opacity-0 pointer-events-none"
@@ -162,26 +162,21 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className={clsx("h-4 w-4", arrowIcon)}
+                className={clsx(
+                  "h-4 w-4",
+                  isVerticalThumbs && "md:rotate-90",
+                  arrowIcon
+                )}
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
               >
-                {isVerticalThumbs ? (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 15l7-7 7 7"
-                  />
-                ) : (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 19l-7-7 7-7"
-                  />
-                )}
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
               </svg>
             </button>
           )}
@@ -189,21 +184,19 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
           <div
             className={clsx(
               "flex-1",
-              isVerticalThumbs ? "h-full py-0.5" : "w-full px-0.5"
+              isVerticalThumbs
+                ? "w-full px-0.5 md:h-full md:py-0.5"
+                : "w-full px-0.5"
             )}
           >
             <div
               className={clsx(
                 "gap-3",
-                isVerticalThumbs ? "flex flex-col" : "grid"
+                isVerticalThumbs ? "grid md:flex md:flex-col" : "grid"
               )}
-              style={
-                !isVerticalThumbs
-                  ? {
-                      gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
-                    }
-                  : undefined
-              }
+              style={{
+                gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
+              }}
             >
               {value?.map((media, index) => {
                 if (index < startIndex || index >= endIndex) return null;
@@ -234,7 +227,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
                 "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
                 "text-gray-700 dark:text-gray-200 transition-all duration-200",
                 isVerticalThumbs
-                  ? "bottom-2 left-1/2 -translate-x-1/2"
+                  ? "right-2 top-1/2 -translate-y-1/2 md:bottom-2 md:left-1/2 md:-translate-x-1/2"
                   : "right-2 top-1/2 -translate-y-1/2",
                 !canNext
                   ? "opacity-0 pointer-events-none"
@@ -245,26 +238,21 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className={clsx("h-4 w-4", arrowIcon)}
+                className={clsx(
+                  "h-4 w-4",
+                  isVerticalThumbs && "md:rotate-90",
+                  arrowIcon
+                )}
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
               >
-                {isVerticalThumbs ? (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                ) : (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5l7 7-7 7"
-                  />
-                )}
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
               </svg>
             </button>
           )}

package/src/react/components/all.ts

@@ -0,0 +1,39 @@
+import { Analytics } from "./Analytics";
+import { AttachmentIcon } from "./AttachmentIcon";
+import { BackgroundHlsVideoPlayer } from "./BackgroundHlsVideoPlayer";
+import { BackgroundVideoPlayer } from "./BackgroundVideoPlayer";
+import { Bulletin } from "./Bulletin";
+import { ContactForm } from "./ContactForm";
+import { Icon } from "./Icon";
+import { Medias } from "./Medias";
+import { ProductCard, ProductCta, ProductDescription, ProductMedia, ProductTitle } from "./ProductCard";
+import { ReactModalTrigger } from "./ReactModalTrigger";
+import { ReactVideoPlayer } from "./ReactVideoPlayer";
+import { RichTextOutline } from "./RichTextOutline";
+import { Scroller } from "./Scroller";
+import { SearchInput } from "./SearchInput";
+import { Share } from "./Share";
+import { ToTop } from "./ToTop";
+
+export const allCoreComponents = {
+  Analytics,
+  AttachmentIcon,
+  BackgroundHlsVideoPlayer,
+  BackgroundVideoPlayer,
+  Bulletin,
+  ContactForm,
+  Icon,
+  Medias,
+  ProductCard,
+  ProductCta,
+  ProductDescription,
+  ProductMedia,
+  ProductTitle,
+  ReactModalTrigger,
+  ReactVideoPlayer,
+  RichTextOutline,
+  Scroller,
+  SearchInput,
+  Share,
+  ToTop,
+};

package/src/react/components/index.ts

@@ -14,5 +14,4 @@ export * from "./BackgroundHlsVideoPlayer";
 export * from "./Bulletin";
 export * from "./ReactModalTrigger";
 export * from "./ReactVideoPlayer";
-
-
+export * from "./all"