@qwickapps/react-framework 1.5.12 → 1.5.13

package/README.md

@@ -4,6 +4,29 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
+### January 25, 2026 - E-Commerce Components (v1.5.13)
+
+#### New Components
+
+- **ImageGallery Component**: Professional image gallery with multiple display variants
+  - Three display modes: thumbnails (left/bottom/right), carousel, and grid
+  - Built-in zoom modal for full-screen viewing
+  - Customizable aspect ratios (1:1, 4:3, 16:9, custom)
+  - Responsive design with mobile-first approach
+  - Full theme compliance using CSS custom properties
+
+- **OptionSelector Component**: Universal option selector for e-commerce and forms
+  - Text mode: Button grid for sizes, quantities (S, M, L, XL, etc.)
+  - Color mode: Circular swatches with hex color backgrounds
+  - Image mode: Rounded rectangle pattern/texture swatches
+  - Features: availability states, disabled options, tooltips, price adjustments
+  - Dropdown fallback for accessibility
+  - Consolidates previous SizeSelector and ColorSelector into unified component
+
+#### Bug Fixes
+
+- **Article Component**: Fixed TypeScript type error in Article component
+
 ### December 6, 2025 - Repository URLs Update (v1.5.5)
 
 - Updated repository and homepage URLs to point to public GitHub org

package/dist/components/blocks/ImageGallery.d.ts

@@ -0,0 +1,30 @@
+import { SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+export interface GalleryImage {
+    url: string;
+    alt: string;
+    thumbnail?: string;
+}
+export interface ImageGalleryProps extends ViewProps {
+    /** Array of product images */
+    images: GalleryImage[];
+    /** Product name for accessibility */
+    productName: string;
+    /** Gallery display variant */
+    variant?: 'thumbnails' | 'carousel' | 'grid';
+    /** Position of thumbnails (only for thumbnails variant) */
+    thumbnailPosition?: 'left' | 'bottom' | 'right';
+    /** Aspect ratio for main image */
+    aspectRatio?: string;
+    /** Enable zoom functionality */
+    showZoom?: boolean;
+    /** Maximum number of images to display */
+    maxImages?: number;
+    /** Data source for dynamic loading */
+    dataSource?: string;
+    /** Data binding configuration */
+    bindingOptions?: Record<string, unknown>;
+}
+export declare const ImageGallery: SerializableComponent<ImageGalleryProps>;
+export default ImageGallery;
+//# sourceMappingURL=ImageGallery.d.ts.map

package/dist/components/blocks/ImageGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ImageGallery.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,8BAA8B;IAC9B,MAAM,EAAE,YAAY,EAAE,CAAC;IAEvB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IAEpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE7C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEhD,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AA+XD,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,CAM9D,CAAC;AAEL,eAAe,YAAY,CAAC"}

package/dist/components/blocks/OptionSelector.d.ts

@@ -0,0 +1,45 @@
+import { SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+export interface SelectOption {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Whether this option is available for selection */
+    available: boolean;
+    /** Optional price adjustment */
+    price?: number;
+    /** Hex color value (for color display mode) */
+    hexValue?: string;
+    /** Image URL (for image or color display mode) */
+    imageUrl?: string;
+}
+export interface OptionSelectorProps extends ViewProps {
+    /** Array of available options */
+    options: SelectOption[];
+    /** Currently selected option ID */
+    selectedOption?: string;
+    /** Callback when option is selected */
+    onOptionSelect?: (optionId: string) => void;
+    /** Display mode */
+    displayMode?: 'text' | 'color' | 'image';
+    /** Display variant */
+    variant?: 'buttons' | 'dropdown' | 'grid';
+    /** Layout direction (for buttons variant) */
+    layout?: 'horizontal' | 'vertical' | 'wrap';
+    /** Visual size (for color/image modes) */
+    visualSize?: 'small' | 'medium' | 'large';
+    /** Show label below visual (for color/image modes) */
+    showLabel?: boolean;
+    /** Disable all selections */
+    disabled?: boolean;
+    /** Label for the selector */
+    label?: string;
+    /** Data source for dynamic loading */
+    dataSource?: string;
+    /** Data binding configuration */
+    bindingOptions?: Record<string, unknown>;
+}
+export declare const OptionSelector: SerializableComponent<OptionSelectorProps>;
+export default OptionSelector;
+//# sourceMappingURL=OptionSelector.d.ts.map

package/dist/components/blocks/OptionSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/OptionSelector.tsx"],"names":[],"mappings":"AAkDA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,iCAAiC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IAExB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAEzC,sBAAsB;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAE1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE5C,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE1C,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAqVD,eAAO,MAAM,cAAc,EAAE,qBAAqB,CAAC,mBAAmB,CAMlE,CAAC;AAEL,eAAe,cAAc,CAAC"}

package/dist/components/blocks/index.d.ts

@@ -22,6 +22,8 @@ export { default as Section } from './Section';
 export { default as Image } from './Image';
 export { default as Text } from './Text';
 export { default as ProductCard } from './ProductCard';
+export { default as ImageGallery } from './ImageGallery';
+export { default as OptionSelector } from './OptionSelector';
 export { default as FeatureCard } from './FeatureCard';
 export { default as CardListGrid } from './CardListGrid';
 export type { HeroBlockProps } from './HeroBlock';
@@ -36,6 +38,8 @@ export type { SectionProps } from './Section';
 export type { ImageProps } from './Image';
 export type { TextProps } from './Text';
 export type { ProductCardProps, Product, ProductCardAction } from './ProductCard';
+export type { ImageGalleryProps, GalleryImage } from './ImageGallery';
+export type { OptionSelectorProps, SelectOption } from './OptionSelector';
 export type { FeatureCardProps, FeatureItem, FeatureCardAction } from './FeatureCard';
 export type { CardListGridProps } from './CardListGrid';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/blocks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClF,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}