@codesinger0/shared-components 1.1.85 → 1.1.87

package/dist/components 2/IntroSection.jsx

@@ -1,74 +0,0 @@
-import { motion } from "framer-motion";
-
-const IntroSection = ({
-    introHeight = '40vh',
-    introTitle,
-    introContent,
-    introImage,
-    classNames = {}
-}) => {
-    const {
-        introTitle: introTitleClass = 'title',
-        introContent: introContentClass = 'subtitle'
-    } = classNames;
-
-    return (
-        <>
-            {/* Introduction Section */}
-            <section className=" py-16 px-4" style={{ minHeight: introHeight }}>
-                <div className="max-w-6xl mx-auto" dir="rtl">
-                    {introImage ? (
-                        /* Layout with image */
-                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
-
-
-                            {/* Image */}
-                            <motion.div
-                                key={'image'}
-                                initial={{ opacity: 0, x: 50 }}
-                                whileInView={{ opacity: 1, x: 0 }}
-                                viewport={{ once: true }}
-                                transition={{ delay: 1 * 0.5 }}
-                                className="flex items-center justify-center lg:justify-end"
-                            >
-                                <div className="w-full max-w-md lg:max-w-lg">
-                                    <img
-                                        src={introImage}
-                                        alt={introTitle || "Introduction image"}
-                                        className="w-full h-auto rounded-lg shadow-lg object-cover"
-                                        onError={(e) => {
-                                            e.target.style.display = 'none';
-                                            console.warn('Failed to load intro image:', introImage);
-                                        }}
-                                    />
-                                </div>
-                            </motion.div>
-
-                            {/* Text Content */}
-                            <div className="text-center lg:text-right">
-                                <h2 className={introTitleClass + " mb-6"}>
-                                    {introTitle}
-                                </h2>
-                                <p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
-                                    {introContent}
-                                </p>
-                            </div>
-                        </div>
-                    ) : (
-                        /* Text only layout (original) */
-                        <div className="text-center max-w-4xl mx-auto">
-                            <h2 className="title mb-6">
-                                {introTitle}
-                            </h2>
-                            <p className="subtitle leading-relaxed" style={{ whiteSpace: 'pre-line' }}>
-                                {introContent}
-                            </p>
-                        </div>
-                    )}
-                </div>
-            </section>
-        </>
-    );
-}
-
-export default IntroSection

package/dist/components 2/LargeItemCard.jsx

@@ -1,267 +0,0 @@
-import React, { useState } from 'react';
-import RoundButton from './elements/RoundButton.jsx'
-import { motion } from 'framer-motion'
-import ImageLightbox from './elements/ImageLightbox.jsx'
-import VideoLightbox from './elements/VideoLightbox.jsx'
-
-const LargeItemCard = ({
-  imageUrl,
-  videoUrl,
-  contentType = 'image',
-  mediaScale = 1,
-  title,
-  subtitle,
-  description,
-  buttonLabel,
-  onButtonClick,
-  reverse = false,
-  price,
-  discountPrice,
-  amountAvailable,
-  absolutePosition = true,
-  availableLabel = 'נותרו במלאי',
-  soldOutLabel = 'אזל במלאי',
-  icons = [],
-  classNames = {}
-}) => {
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [videoLightboxOpen, setVideoLightboxOpen] = useState(false);
-
-  const {
-    card: cardClass = 'glass-card',
-    title: titleClass = 'title',
-    subtitle: subtitleClass = 'subtitle',
-    content: contentClass = 'content-text',
-    price: priceClass = 'text-price',
-  } = classNames;
-
-  const handleMediaClick = () => {
-    if (contentType === 'video') {
-      setVideoLightboxOpen(true);
-    } else {
-      setLightboxOpen(true);
-    }
-  };
-
-  const MediaElement = ({ className, style, clickable = false }) => {
-    const scaleStyle = {
-      ...style,
-      transform: `scale(${mediaScale})`,
-      transformOrigin: 'center'
-    };
-
-    const mediaContent = contentType === 'video' ? (
-      <video
-        autoPlay
-        muted
-        loop
-        playsInline
-        className={`rounded-lg shadow-2xl border border-primary max-w-full ${className}`}
-        style={{ ...scaleStyle, objectFit: 'contain' }}
-      >
-        <source src={videoUrl} type="video/mp4" />
-      </video>
-    ) : (
-      <img
-        src={imageUrl}
-        alt={title}
-        className={className}
-        style={scaleStyle}
-      />
-    );
-
-    if (clickable) {
-      return (
-        <button
-          onClick={handleMediaClick}
-          className="cursor-pointer hover:opacity-90 transition-opacity duration-200 p-0 border-0 bg-transparent"
-          aria-label={contentType === 'video' ? 'Open video in fullscreen' : 'Open image in fullscreen'}
-        >
-          {mediaContent}
-        </button>
-      );
-    }
-
-    return mediaContent;
-  };
-
-  return (
-    <section className="relative w-full overflow-visible py-16 px-4">
-      {/* Background Section with Text Content */}
-      <div className="glass-card relative" style={{ minHeight: '48vh', overflow: 'visible' }}>
-
-        <div className="max-w-7xl mx-auto px-6 py-16">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            {/* Text Content */}
-            <div
-              className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-2' : 'lg:order-1'}`}
-              dir="rtl"
-            >
-              <h2 className={titleClass}>{title}</h2>
-              <h3 className={subtitleClass} style={{ whiteSpace: 'pre-line' }}>{subtitle}</h3>
-              <p className={contentClass + " max-w-md mx-auto lg:mx-0" } style={{ whiteSpace: 'pre-line' }}>{description}</p>
-
-              {/* Price Section */}
-              {price && (
-                <div className="text-center lg:text-right mt-4">
-                  {(discountPrice ?? null) !== null && discountPrice < price ? (
-                    <div className="space-y-1">
-                      <div className="flex items-center justify-center lg:justify-start gap-2">
-                        <span className={"text-2xl font-bold " + priceClass}>
-                          ₪{discountPrice}
-                        </span>
-                        <span className="text-sm content-text line-through">
-                          ₪{price}
-                        </span>
-                        <span className="bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold">
-                          -{Math.round(((price - discountPrice) / price) * 100)}%
-                        </span>
-                      </div>
-                      <div className="text-xs content-text font-medium">
-                        חיסכון של ₪{price - discountPrice}
-                      </div>
-                    </div>
-                  ) : (
-                    <span className={"text-2xl font-bold " + priceClass}>
-                      ₪{price}
-                    </span>
-                  )}
-                </div>
-              )}
-
-              {/* Stock Availability */}
-              {amountAvailable !== undefined && amountAvailable > 0 && (
-                <div className="text-center lg:text-right text-sm content-text font-medium">
-                  {availableLabel}: {amountAvailable}
-                </div>
-              )}
-
-              <div className="py-4 mb-4">
-                {/* Sold Out Badge */}
-                {amountAvailable !== undefined && amountAvailable <= 0 ? (
-                  <div className="inline-block z-20 bg-red-500 text-white px-8 py-3 rounded-lg text-lg font-bold shadow-2xl">
-                    {soldOutLabel}
-                  </div>
-                ) : (
-                  buttonLabel && (
-                    <RoundButton
-                      variant="primary"
-                      onClick={onButtonClick}
-                      disabled={amountAvailable !== undefined && amountAvailable <= 0}
-                    >
-                      {buttonLabel}
-                    </RoundButton>
-                  )
-                )}
-              </div>
-
-              {/* Icons Section */}
-              {icons.length > 0 && (
-                <div className="flex flex-wrap justify-center lg:justify-start gap-10 mt-6">
-                  {icons.map((icon, index) => (
-                    <div key={index} className="content-text flex flex-col items-center justify-center rounded-lg shadow-sm pb-10">
-                      {icon}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Desktop image/video positioning */}
-            {!absolutePosition && (
-              <div className={`hidden lg:block ${reverse ? 'lg:order-1' : 'lg:order-2'}`}>
-                <motion.div
-                  key={'image'}
-                  initial={{ opacity: 0, x: reverse ? -50 : 50 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ delay: 0.5 }}
-                  className="h-full flex items-center justify-center"
-                >
-                  <MediaElement
-                    className="rounded-lg shadow-2xl border border-primary max-w-full"
-                    style={{
-                      maxHeight: '450px',
-                      width: 'auto',
-                      height: 'auto'
-                    }}
-                    clickable={true}
-                  />
-                </motion.div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* full-width mobile image */}
-        <div className="block lg:hidden mt-8 w-full">
-          <MediaElement
-            className="w-full h-auto rounded-none shadow-2xls"
-            clickable={true}
-          />
-        </div>
-      </div>
-
-      {/* Floating Image Container (desktop only, absolute positioned) */}
-      {absolutePosition && (
-        <div
-          className="hidden lg:block absolute"
-          style={{
-            zIndex: 10,
-            width: '30vw',
-            maxWidth: '40vw',
-            top: '2rem',
-            left: reverse ? '4rem' : 'auto',
-            right: reverse ? 'auto' : '4rem',
-            transform: 'none'
-          }}
-        >
-          <div className="relative">
-            <motion.div
-              key={'image'}
-              initial={{ opacity: 0, x: reverse ? -50 : 50 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.5 }}
-              className="h-full"
-            >
-              <MediaElement
-                className="rounded-lg shadow-2xl border border-primary"
-                style={{
-                  maxHeight: '450px',
-                  maxWidth: '100%',
-                  width: 'auto',
-                  height: 'auto'
-                }}
-                clickable={true}
-              />
-            </motion.div>
-          </div>
-        </div>
-      )}
-
-      {/* Image Lightbox */}
-      {contentType === 'image' && imageUrl && (
-        <ImageLightbox
-          images={[imageUrl]}
-          currentIndex={0}
-          isOpen={lightboxOpen}
-          onClose={() => setLightboxOpen(false)}
-          onNavigate={() => {}}
-        />
-      )}
-
-      {/* Video Lightbox */}
-      {contentType === 'video' && videoUrl && (
-        <VideoLightbox
-          videoUrl={videoUrl}
-          isOpen={videoLightboxOpen}
-          onClose={() => setVideoLightboxOpen(false)}
-          title={title}
-        />
-      )}
-    </section>
-  );
-};
-
-export default LargeItemCard;

package/dist/components 2/MasonryItemCard.jsx

@@ -1,247 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import ImageLightbox from './elements/ImageLightbox'
-
-const MasonryImageList = ({ images = [], cols = 3, onImageClick = () => { } }) => {
-  // cols is the desktop column count; mobile will be forced to 2 via CSS
-  return (
-    <>
-      <div
-        className="masonry-columns h-full overflow-y-auto"
-        // set CSS variable so the component can control desktop column count
-        style={{ ['--masonry-cols']: cols }}
-      >
-        {images.map((img, i) => (
-          <button
-            key={i}
-            className="masonry-item w-full block mb-4 p-0 border-0 bg-transparent text-left"
-            onClick={() => onImageClick(i)}
-            aria-label={`open image ${i + 1}`}
-          >
-            <img
-              src={img.src || img}
-              alt={img.alt || `image-${i + 1}`}
-              loading="lazy"
-              className="masonry-img w-full h-auto rounded-lg block"
-              style={{ display: 'block' }}
-            />
-          </button>
-        ))}
-      </div>
-
-      <style jsx>{`
-        /* Container uses CSS columns to create the masonry stacking */
-        .masonry-columns {
-          column-gap: 0.75rem;
-          /* default: mobile 2 columns */
-          column-count: 2;
-          padding-right: 0.25rem; /* small padding so rtl scroll doesn't cut content */
-        }
-
-        /* Desktop: use the --masonry-cols variable */
-        @media (min-width: 1024px) {
-          .masonry-columns {
-            column-count: var(--masonry-cols);
-          }
-        }
-
-        /* Make each item avoid breaking across columns and have bottom margin */
-        .masonry-item {
-          /* avoid splitting an item between columns */
-          break-inside: avoid;
-          -webkit-column-break-inside: avoid;
-          page-break-inside: avoid;
-          margin-bottom: 0.75rem;
-        }
-
-        /* Image style */
-        .masonry-img {
-          width: 100%;
-          height: auto;
-          display: block;
-          object-fit: cover;
-          /* give images a subtle shadow & transition if desired */
-          transition: transform 0.2s ease, box-shadow 0.15s ease;
-        }
-        .masonry-item:hover .masonry-img {
-          transform: translateY(-2px) scale(1.01);
-        }
-
-        /* Optional: nicer scrollbar for the image column */
-        .masonry-columns::-webkit-scrollbar {
-          width: 10px;
-        }
-        .masonry-columns::-webkit-scrollbar-thumb {
-          border-radius: 9999px;
-          background: rgba(0, 0, 0, 0.12);
-        }
-      `}</style>
-    </>
-  );
-};
-
-const MasonryItemCard = ({
-  images = [],
-  title,
-  subtitle,
-  description,
-  reverse = false,
-  textCols = 1,
-  imagesCols = 1,
-  mobileHeight = '60vh', // used for small screens
-  enableLightbox = true,
-  onImageClick,
-  className = '',
-  cols = 3, // default for desktop masonry (we want 3 per row on desktop)
-  ...props
-}) => {
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-
-  const totalCols = textCols + imagesCols;
-  // CSS variables to be applied to grid wrapper:
-  const textPct = `${(textCols / totalCols) * 100}%`;
-  const imagesPct = `${(imagesCols / totalCols) * 100}%`;
-
-  const handleImageClick = useCallback(
-    (index) => {
-      setCurrentImageIndex(index);
-
-      if (onImageClick) onImageClick(images[index], index);
-
-      if (enableLightbox) setLightboxOpen(true);
-    },
-    [images, onImageClick, enableLightbox]
-  );
-
-  const handleLightboxClose = useCallback(() => setLightboxOpen(false), []);
-  const handleLightboxNavigate = useCallback((index) => setCurrentImageIndex(index), []);
-
-  if (!images || images.length === 0) {
-    return (
-      <section className={`py-16 px-8 ${className}`} {...props}>
-        <div className="glass-card relative min-h-[48vh]">
-          <div className="max-w-7xl mx-auto px-6 pt-16">
-            <div className="text-center" dir="rtl">
-              <h2 className="title mb-4">{title}</h2>
-              <h3 className="subtitle mb-6">{subtitle}</h3>
-              <p className="content-text">אין תמונות להצגה</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <>
-      <section className={`relative w-full overflow-visible py-16 px-4 ${className}`} {...props}>
-        {/* NOTE: --text-frac / --image-frac are set inline so CSS can use them at lg and up */}
-        <div
-          className="glass-card relative min-h-[48vh] flex flex-col"
-          style={{ '--text-frac': textPct, '--image-frac': imagesPct }}
-        >
-          {/* top padding/content wrapper */}
-          <div className="max-w-7xl mx-auto px-6 pt-16 w-full flex-1">
-            {/* layout-grid will switch to two-column fractions on lg+ */}
-            <div className="layout-grid w-full h-full" dir="rtl">
-              {/* Text Content */}
-              <div
-                className={`text-column ${reverse ? 'lg:order-2' : 'lg:order-1'} px-2`}
-              >
-                <h2 className="title mb-6">{title}</h2>
-                <h3 className="subtitle mb-6">{subtitle}</h3>
-                <p className="content-text max-w-md mx-auto lg:mx-0">{description}</p>
-              </div>
-
-              {/* Desktop Masonry Images (visible on lg+) */}
-              <div
-                className={`image-column hidden lg:block ${reverse ? 'lg:order-1' : 'lg:order-2'} px-2 mb-8`}
-              >
-                {/* image-column fills available height and scrolls if needed */}
-                <MasonryImageList
-                  images={images}
-                  onImageClick={handleImageClick}
-                  cols={cols /* desktop: 3 by default from caller prop */}
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Mobile Masonry Images (visible on mobile) */}
-          <div
-            className="block lg:hidden mt-8 w-full px-4"
-            style={{ height: mobileHeight }}
-          >
-            <MasonryImageList
-              images={images}
-              onImageClick={handleImageClick}
-              cols={2} // mobile: 2 per row
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* Lightbox */}
-      {enableLightbox && (
-        <ImageLightbox
-          images={images}
-          currentIndex={currentImageIndex}
-          isOpen={lightboxOpen}
-          onClose={handleLightboxClose}
-          onNavigate={handleLightboxNavigate}
-        />
-      )}
-
-      {/* Component styles */}
-      <style jsx>{`
-        /* The overall grid - single column by default; switches to two fractional columns at lg+ */
-        .layout-grid {
-          display: grid;
-          grid-template-columns: 1fr;
-          gap: 3rem;
-        }
-
-        /* At large screens, use the fractional widths computed in inline styles */
-        @media (min-width: 1024px) {
-          .layout-grid {
-            /* use CSS variables set from JS: --text-frac and --image-frac */
-            grid-template-columns: var(--text-frac) var(--image-frac);
-            align-items: start;
-            gap: 3rem;
-            height: 100%;
-          }
-
-          .text-column {
-            /* ensure text column doesn't overflow the parent */
-            height: 100%;
-          }
-
-          .image-column {
-            /* make image column take full height of the parent wrapper and be scrollable */
-            height: 100%;
-            max-height: 100%;
-            overflow-y: auto;
-          }
-        }
-
-        /* Keep mobile images area scrollable if images exceed mobileHeight (we set that inline) */
-        @media (max-width: 1023px) {
-          .layout-grid {
-            gap: 1.5rem;
-          }
-        }
-
-        /* Optional: small visual tweak to hide scrollbar in WebKit (if you want) */
-        .image-column::-webkit-scrollbar {
-          width: 8px;
-        }
-        .image-column::-webkit-scrollbar-thumb {
-          border-radius: 9999px;
-          background: rgba(0, 0, 0, 0.2);
-        }
-      `}</style>
-    </>
-  );
-};
-
-export default MasonryItemCard;

package/dist/components 2/Menu.d.ts

@@ -1,26 +0,0 @@
-// Menu.d.ts
-export interface BusinessInfo {
-  name: string;
-  logo: string;
-}
-
-export interface NavigationItem {
-  label: string;
-  href: string;
-  adminRoute?: boolean;
-}
-
-export interface MenuProps {
-  businessInfo: BusinessInfo;
-  navigationItems: NavigationItem[];
-  AuthButtonsComponent?: React.ComponentType<{ isMobile?: boolean }>;
-  isAdmin?: boolean;
-  mobileBreakpoint?: number;
-  logoClassName?: string;
-  menuItemClassName?: string;
-  sidebarWidth?: string;
-  onMenuItemClick?: (item: NavigationItem) => void;
-}
-
-declare const Menu: React.FC<MenuProps>;
-export default Menu;