@q2devel/q2-storybook 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/badge/Badge.js +1 -0
  2. package/dist/components/banner/Banner.d.ts +48 -0
  3. package/dist/components/banner/Banner.js +142 -0
  4. package/dist/components/nav-bar/NavBar.d.ts +1 -1
  5. package/dist/components/nav-bar/NavBar.js +9 -9
  6. package/dist/components/product-card/ProductCard.js +9 -9
  7. package/dist/components/select-field/SelectField.js +1 -0
  8. package/dist/global.css +1 -0
  9. package/dist/index.d.ts +2 -0
  10. package/dist/index.js +2 -1
  11. package/package.json +61 -58
package/dist/components/badge/Badge.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import React from 'react';
2
3
  var Badge = function (_a) {
3
4
  var children = _a.children, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'bg-blue-100 text-blue-800' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.labelClassName, labelClassName = _d === void 0 ? '' : _d, rightIcon = _a.rightIcon;
package/dist/components/banner/Banner.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ import React, { ReactNode } from 'react';
2
+ export type BannerItem = {
3
+ id: string;
4
+ imageSrc: string;
5
+ imageAlt?: string;
6
+ title: string;
7
+ subtitle: string;
8
+ buttonText?: string;
9
+ buttonLink?: string;
10
+ customContent?: ReactNode;
11
+ overlayOpacity?: number;
12
+ buttonVariant?: 'primary' | 'secondary' | 'ghost' | 'outline';
13
+ buttonSize?: 'sm' | 'md' | 'lg';
14
+ };
15
+ export type ControlsType = 'arrows' | 'dots' | 'both' | 'none';
16
+ export type BannerProps = {
17
+ items: BannerItem[];
18
+ height?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
19
+ autoplay?: boolean;
20
+ autoplayInterval?: number;
21
+ controls?: ControlsType;
22
+ overlayStyle?: 'dark' | 'light' | 'gradient' | 'none';
23
+ textAlignment?: 'left' | 'center' | 'right';
24
+ textPosition?: 'top' | 'center' | 'bottom';
25
+ className?: string;
26
+ imageClassName?: string;
27
+ titleClassName?: string;
28
+ subtitleClassName?: string;
29
+ buttonClassName?: string;
30
+ indicatorsClassName?: string;
31
+ controlsClassName?: string;
32
+ contentClassName?: string;
33
+ rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
34
+ buttonRounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
35
+ animation?: 'slide' | 'fade' | 'zoom' | 'none';
36
+ animationDuration?: number;
37
+ pauseOnHover?: boolean;
38
+ infiniteLoop?: boolean;
39
+ objectFit?: 'cover' | 'contain' | 'fill' | 'none';
40
+ objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
41
+ renderItem?: (item: BannerItem, index: number) => ReactNode;
42
+ renderControls?: (goToNext: () => void, goToPrev: () => void) => ReactNode;
43
+ renderIndicators?: (current: number, total: number, goToSlide: (index: number) => void) => ReactNode;
44
+ onSlideChange?: (currentIndex: number, previousIndex: number) => void;
45
+ withOverlay?: boolean;
46
+ overlayOpacity?: number;
47
+ };
48
+ export declare const Banner: ({ items, height, autoplay, autoplayInterval, controls, overlayStyle, textAlignment, textPosition, className, imageClassName, titleClassName, subtitleClassName, buttonClassName, indicatorsClassName, controlsClassName, contentClassName, rounded, buttonRounded, animation, animationDuration, pauseOnHover, infiniteLoop, objectFit, objectPosition, renderItem, renderControls, renderIndicators, onSlideChange, withOverlay, overlayOpacity, }: BannerProps) => React.JSX.Element | null;
package/dist/components/banner/Banner.js ADDED
@@ -0,0 +1,142 @@
1
+ 'use client';
2
+ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
3
+ import Image from 'next/image';
4
+ import React, { useEffect, useState } from 'react';
5
+ import buildClassesByJoining from '../../utils/StyleHelper';
6
+ export var Banner = function (_a) {
7
+ var items = _a.items, _b = _a.height, height = _b === void 0 ? 'md' : _b, _c = _a.autoplay, autoplay = _c === void 0 ? false : _c, _d = _a.autoplayInterval, autoplayInterval = _d === void 0 ? 5000 : _d, _e = _a.controls, controls = _e === void 0 ? 'both' : _e, _f = _a.overlayStyle, overlayStyle = _f === void 0 ? 'gradient' : _f, _g = _a.textAlignment, textAlignment = _g === void 0 ? 'center' : _g, _h = _a.textPosition, textPosition = _h === void 0 ? 'center' : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.imageClassName, imageClassName = _k === void 0 ? '' : _k, _l = _a.titleClassName, titleClassName = _l === void 0 ? '' : _l, _m = _a.subtitleClassName, subtitleClassName = _m === void 0 ? '' : _m, _o = _a.buttonClassName, buttonClassName = _o === void 0 ? '' : _o, _p = _a.indicatorsClassName, indicatorsClassName = _p === void 0 ? '' : _p, _q = _a.controlsClassName, controlsClassName = _q === void 0 ? '' : _q, _r = _a.contentClassName, contentClassName = _r === void 0 ? '' : _r, _s = _a.rounded, rounded = _s === void 0 ? 'none' : _s, _t = _a.buttonRounded, buttonRounded = _t === void 0 ? 'md' : _t, _u = _a.animation, animation = _u === void 0 ? 'slide' : _u, _v = _a.animationDuration, animationDuration = _v === void 0 ? 500 : _v, _w = _a.pauseOnHover, pauseOnHover = _w === void 0 ? true : _w, _x = _a.infiniteLoop, infiniteLoop = _x === void 0 ? true : _x, _y = _a.objectFit, objectFit = _y === void 0 ? 'cover' : _y, _z = _a.objectPosition, objectPosition = _z === void 0 ? 'center' : _z, renderItem = _a.renderItem, renderControls = _a.renderControls, renderIndicators = _a.renderIndicators, onSlideChange = _a.onSlideChange, _0 = _a.withOverlay, withOverlay = _0 === void 0 ? true : _0, _1 = _a.overlayOpacity, overlayOpacity = _1 === void 0 ? 0.5 : _1;
8
+ var _2 = useState(0), currentIndex = _2[0], setCurrentIndex = _2[1];
9
+ var _3 = useState(0), prevIndex = _3[0], setPrevIndex = _3[1];
10
+ var _4 = useState(false), isHovered = _4[0], setIsHovered = _4[1];
11
+ var showArrows = controls === 'arrows' || controls === 'both';
12
+ var showDots = controls === 'dots' || controls === 'both';
13
+ var heightClasses = {
14
+ sm: 'h-48 sm:h-64',
15
+ md: 'h-64 sm:h-96',
16
+ lg: 'h-80 sm:h-[32rem]',
17
+ xl: 'h-96 sm:h-[40rem]',
18
+ full: 'h-screen',
19
+ auto: 'h-auto',
20
+ };
21
+ var overlayClasses = {
22
+ dark: "bg-black/".concat(Math.round(overlayOpacity * 100)),
23
+ light: "bg-white/".concat(Math.round(overlayOpacity * 100)),
24
+ gradient: 'bg-gradient-to-t from-black/70 via-black/30 to-transparent',
25
+ none: '',
26
+ };
27
+ var textAlignmentClasses = {
28
+ left: 'text-left items-start',
29
+ center: 'text-center items-center',
30
+ right: 'text-right items-end',
31
+ };
32
+ var textPositionClasses = {
33
+ top: 'justify-start pt-10',
34
+ center: 'justify-center',
35
+ bottom: 'justify-end pb-10',
36
+ };
37
+ var roundedClasses = {
38
+ none: 'rounded-none',
39
+ sm: 'rounded-sm',
40
+ md: 'rounded-md',
41
+ lg: 'rounded-lg',
42
+ xl: 'rounded-xl',
43
+ full: 'rounded-full',
44
+ };
45
+ var buttonRoundedClasses = {
46
+ none: 'rounded-none',
47
+ sm: 'rounded-sm',
48
+ md: 'rounded-md',
49
+ lg: 'rounded-lg',
50
+ xl: 'rounded-xl',
51
+ full: 'rounded-full',
52
+ };
53
+ var objectFitClasses = {
54
+ cover: 'object-cover',
55
+ contain: 'object-contain',
56
+ fill: 'object-fill',
57
+ none: 'object-none',
58
+ };
59
+ var objectPositionClasses = {
60
+ center: 'object-center',
61
+ top: 'object-top',
62
+ bottom: 'object-bottom',
63
+ left: 'object-left',
64
+ right: 'object-right',
65
+ };
66
+ var animationClasses = {
67
+ slide: "transition-transform duration-".concat(animationDuration),
68
+ fade: "transition-opacity duration-".concat(animationDuration),
69
+ zoom: "transform transition-transform duration-".concat(animationDuration),
70
+ none: '',
71
+ };
72
+ var goToNext = function () {
73
+ setPrevIndex(currentIndex);
74
+ setCurrentIndex(function (prev) {
75
+ var newIndex = prev === items.length - 1 ? (infiniteLoop ? 0 : prev) : prev + 1;
76
+ onSlideChange && onSlideChange(newIndex, prev);
77
+ return newIndex;
78
+ });
79
+ };
80
+ var goToPrev = function () {
81
+ setPrevIndex(currentIndex);
82
+ setCurrentIndex(function (prev) {
83
+ var newIndex = prev === 0 ? (infiniteLoop ? items.length - 1 : prev) : prev - 1;
84
+ onSlideChange && onSlideChange(newIndex, prev);
85
+ return newIndex;
86
+ });
87
+ };
88
+ var goToSlide = function (index) {
89
+ if (index === currentIndex)
90
+ return;
91
+ setPrevIndex(currentIndex);
92
+ setCurrentIndex(index);
93
+ onSlideChange && onSlideChange(index, currentIndex);
94
+ };
95
+ // Autoplay effet
96
+ useEffect(function () {
97
+ if (!autoplay || (pauseOnHover && isHovered) || items.length <= 1)
98
+ return;
99
+ var interval = setInterval(goToNext, autoplayInterval);
100
+ return function () { return clearInterval(interval); };
101
+ }, [autoplay, autoplayInterval, isHovered, items.length, pauseOnHover]);
102
+ if (!items || items.length === 0) {
103
+ return null;
104
+ }
105
+ // Renderovanie individuálneho slide
106
+ var renderDefaultItem = function (item, index) { return (React.createElement("div", { key: item.id, className: "min-w-full h-full relative ".concat(animation === 'fade'
107
+ ? index === currentIndex
108
+ ? 'opacity-100'
109
+ : 'opacity-0'
110
+ : '') },
111
+ React.createElement("div", { className: "absolute inset-0 w-full h-full" },
112
+ React.createElement(Image, { src: item.imageSrc, alt: item.imageAlt || item.title, fill: true, unoptimized: true, style: { objectFit: objectFit }, priority: index === 0, className: buildClassesByJoining(roundedClasses[rounded], objectFitClasses[objectFit], objectPositionClasses[objectPosition], imageClassName) }),
113
+ withOverlay && (React.createElement("div", { className: buildClassesByJoining('absolute inset-0', overlayClasses[overlayStyle], roundedClasses[rounded]), style: item.overlayOpacity ? { opacity: item.overlayOpacity } : {} }))),
114
+ item.customContent || (React.createElement("div", { className: buildClassesByJoining('relative h-full w-full flex flex-col px-6', textPositionClasses[textPosition], textAlignmentClasses[textAlignment], contentClassName) },
115
+ React.createElement("h2", { className: buildClassesByJoining('text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2', titleClassName) }, item.title),
116
+ React.createElement("p", { className: buildClassesByJoining('text-xl text-white/80 max-w-2xl', subtitleClassName) }, item.subtitle),
117
+ item.buttonText && item.buttonLink && (React.createElement("a", { href: item.buttonLink, className: buildClassesByJoining('mt-4 px-6 py-2 bg-white text-black font-medium hover:bg-opacity-90 transition-colors inline-block', buttonRoundedClasses[buttonRounded], buttonClassName) }, item.buttonText)))))); };
118
+ // Pre jeden slide použijeme zjednodušený výstup
119
+ if (items.length === 1) {
120
+ var item = items[0];
121
+ return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className) }, renderItem ? renderItem(item, 0) : renderDefaultItem(item, 0)));
122
+ }
123
+ // Pre viac slideov vytvoríme karusel
124
+ return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className), onMouseEnter: function () { return pauseOnHover && setIsHovered(true); }, onMouseLeave: function () { return pauseOnHover && setIsHovered(false); } },
125
+ React.createElement("div", { className: buildClassesByJoining('flex h-full', animationClasses[animation]), style: animation === 'slide'
126
+ ? { transform: "translateX(-".concat(currentIndex * 100, "%)") }
127
+ : {} }, items.map(function (item, index) {
128
+ return renderItem ? renderItem(item, index) : renderDefaultItem(item, index);
129
+ })),
130
+ showArrows &&
131
+ items.length > 1 &&
132
+ (renderControls ? (renderControls(goToNext, goToPrev)) : (React.createElement(React.Fragment, null,
133
+ React.createElement("button", { onClick: goToPrev, className: buildClassesByJoining('absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "P\u0159edchoz\u00ED" },
134
+ React.createElement(ChevronLeftIcon, { className: "h-6 w-6" })),
135
+ React.createElement("button", { onClick: goToNext, className: buildClassesByJoining('absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "Dal\u0161\u00ED" },
136
+ React.createElement(ChevronRightIcon, { className: "h-6 w-6" }))))),
137
+ showDots &&
138
+ items.length > 1 &&
139
+ (renderIndicators ? (renderIndicators(currentIndex, items.length, goToSlide)) : (React.createElement("div", { className: buildClassesByJoining('absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2', indicatorsClassName) }, items.map(function (_, index) { return (React.createElement("button", { key: index, onClick: function () { return goToSlide(index); }, className: buildClassesByJoining('w-3 h-3 rounded-full transition-colors', index === currentIndex
140
+ ? 'bg-white'
141
+ : 'bg-white/40 hover:bg-white/60'), "aria-label": "P\u0159ej\u00EDt na slide ".concat(index + 1) })); }))))));
142
+ };
package/dist/components/nav-bar/NavBar.d.ts CHANGED
@@ -16,4 +16,4 @@ export type NavBarProps = {
16
16
  itemClassName?: string;
17
17
  mobileItemClassName?: string;
18
18
  };
19
- export declare const NavBar: ({ items, logo, rightContent, backgroundColor, textColor, activeColor, mobileMenuBgColor, containerClassName, navClassName, itemClassName, mobileItemClassName }: NavBarProps) => React.JSX.Element;
19
+ export declare const NavBar: ({ items, logo, rightContent, backgroundColor, textColor, activeColor, mobileMenuBgColor, containerClassName, navClassName, itemClassName, mobileItemClassName, }: NavBarProps) => React.JSX.Element;
package/dist/components/nav-bar/NavBar.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use client';
2
- import { useState } from 'react';
3
2
  import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
4
- import React from 'react';
3
+ import React, { useState } from 'react';
4
+ import buildClassesByJoining from '../../utils/StyleHelper';
5
5
  export var NavBar = function (_a) {
6
6
  var
7
7
  // Structure
@@ -17,20 +17,20 @@ export var NavBar = function (_a) {
17
17
  // Styling
18
18
  _d = _a.backgroundColor,
19
19
  // Styling
20
- backgroundColor = _d === void 0 ? "bg-white" : _d, _e = _a.textColor, textColor = _e === void 0 ? "text-gray-600" : _e, _f = _a.activeColor, activeColor = _f === void 0 ? "text-indigo-600" : _f, _g = _a.mobileMenuBgColor, mobileMenuBgColor = _g === void 0 ? "bg-white" : _g, _h = _a.containerClassName, containerClassName = _h === void 0 ? "" : _h, _j = _a.navClassName, navClassName = _j === void 0 ? "" : _j, _k = _a.itemClassName, itemClassName = _k === void 0 ? "" : _k, _l = _a.mobileItemClassName, mobileItemClassName = _l === void 0 ? "" : _l;
20
+ backgroundColor = _d === void 0 ? 'bg-white' : _d, _e = _a.textColor, textColor = _e === void 0 ? 'text-gray-600' : _e, _f = _a.activeColor, activeColor = _f === void 0 ? 'text-indigo-600' : _f, _g = _a.mobileMenuBgColor, mobileMenuBgColor = _g === void 0 ? 'bg-white' : _g, _h = _a.containerClassName, containerClassName = _h === void 0 ? '' : _h, _j = _a.navClassName, navClassName = _j === void 0 ? '' : _j, _k = _a.itemClassName, itemClassName = _k === void 0 ? '' : _k, _l = _a.mobileItemClassName, mobileItemClassName = _l === void 0 ? '' : _l;
21
21
  var _m = useState(false), mobileMenuOpen = _m[0], setMobileMenuOpen = _m[1];
22
- return (React.createElement("header", { className: "".concat(backgroundColor, " ").concat(containerClassName) },
23
- React.createElement("nav", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 ".concat(navClassName) },
22
+ return (React.createElement("header", { className: buildClassesByJoining(backgroundColor, containerClassName) },
23
+ React.createElement("nav", { className: buildClassesByJoining('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', navClassName) },
24
24
  React.createElement("div", { className: "flex h-16 items-center justify-between" },
25
25
  React.createElement("div", { className: "flex-shrink-0" }, logo),
26
26
  React.createElement("div", { className: "flex md:hidden" },
27
- React.createElement("button", { type: "button", className: "inline-flex items-center justify-center rounded-md p-2 ".concat(textColor, " hover:").concat(activeColor, " hover:bg-gray-100"), onClick: function () { return setMobileMenuOpen(!mobileMenuOpen); } },
27
+ React.createElement("button", { type: "button", className: buildClassesByJoining('inline-flex items-center justify-center rounded-md p-2', textColor, "hover:".concat(activeColor, " hover:bg-gray-100")), onClick: function () { return setMobileMenuOpen(!mobileMenuOpen); } },
28
28
  React.createElement("span", { className: "sr-only" }, "Open main menu"),
29
29
  mobileMenuOpen ? (React.createElement(XMarkIcon, { className: "block h-6 w-6", "aria-hidden": "true" })) : (React.createElement(Bars3Icon, { className: "block h-6 w-6", "aria-hidden": "true" })))),
30
- React.createElement("div", { className: "hidden md:flex md:flex-1 md:items-center md:justify-center md:space-x-8" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: "text-sm font-medium ".concat(textColor, " hover:").concat(activeColor, " ").concat(itemClassName) }, item.name)); })),
30
+ React.createElement("div", { className: "hidden md:flex md:flex-1 md:items-center md:justify-center md:space-x-8" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('text-sm font-medium', textColor, "hover:".concat(activeColor), itemClassName) }, item.name)); })),
31
31
  rightContent && (React.createElement("div", { className: "hidden md:flex md:items-center" }, rightContent)))),
32
- mobileMenuOpen && (React.createElement("div", { className: "md:hidden ".concat(mobileMenuBgColor) },
33
- React.createElement("div", { className: "space-y-1 px-2 pb-3 pt-2" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: "block rounded-md px-3 py-2 text-base font-medium ".concat(textColor, " hover:").concat(activeColor, " hover:bg-gray-100 ").concat(mobileItemClassName) }, item.name)); })),
32
+ mobileMenuOpen && (React.createElement("div", { className: buildClassesByJoining('md:hidden', mobileMenuBgColor) },
33
+ React.createElement("div", { className: "space-y-1 px-2 pb-3 pt-2" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('block rounded-md px-3 py-2 text-base font-medium', textColor, "hover:".concat(activeColor, " hover:bg-gray-100"), mobileItemClassName) }, item.name)); })),
34
34
  rightContent && (React.createElement("div", { className: "border-t border-gray-200 pb-3 pt-4" },
35
35
  React.createElement("div", { className: "flex items-center px-5" }, rightContent)))))));
36
36
  };
package/dist/components/product-card/ProductCard.js CHANGED
@@ -15,11 +15,11 @@ import { buildClassesByJoining } from '../../utils/StyleHelper';
15
15
  // Quantity Control Component
16
16
  var QuantityControl = function (_a) {
17
17
  var quantity = _a.quantity, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, _b = _a.minQuantity, minQuantity = _b === void 0 ? 0 : _b, _c = _a.maxQuantity, maxQuantity = _c === void 0 ? 99 : _c, _d = _a.controlsClassName, controlsClassName = _d === void 0 ? '' : _d, _e = _a.buttonClassName, buttonClassName = _e === void 0 ? '' : _e, _f = _a.quantityClassName, quantityClassName = _f === void 0 ? '' : _f;
18
- return (React.createElement("div", { className: "flex items-center gap-2 ".concat(controlsClassName) },
19
- React.createElement("button", { onClick: onDecrement, disabled: quantity <= minQuantity, className: "w-8 h-8 flex items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:bg-red-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200 ".concat(buttonClassName), "aria-label": "Decrease quantity" },
18
+ return (React.createElement("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName) },
19
+ React.createElement("button", { onClick: onDecrement, disabled: quantity <= minQuantity, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:bg-red-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200', buttonClassName), "aria-label": "Decrease quantity" },
20
20
  React.createElement(MinusIcon, { className: "h-4 w-4" })),
21
- React.createElement("div", { className: "w-8 h-8 rounded-full bg-white flex items-center justify-center text-sm font-medium shadow-sm transition-all duration-200 ".concat(quantityClassName) }, quantity),
22
- React.createElement("button", { onClick: onIncrement, disabled: quantity >= maxQuantity, className: "w-8 h-8 flex items-center justify-center rounded-full bg-green-500 text-white hover:bg-green-600 disabled:opacity-50 disabled:bg-green-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200 ".concat(buttonClassName), "aria-label": "Increase quantity" },
21
+ React.createElement("div", { className: buildClassesByJoining('w-8 h-8 rounded-full bg-white flex items-center justify-center text-sm font-medium shadow-sm transition-all duration-200', quantityClassName) }, quantity),
22
+ React.createElement("button", { onClick: onIncrement, disabled: quantity >= maxQuantity, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded-full bg-green-500 text-white hover:bg-green-600 disabled:opacity-50 disabled:bg-green-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200', buttonClassName), "aria-label": "Increase quantity" },
23
23
  React.createElement(PlusIcon, { className: "h-4 w-4" }))));
24
24
  };
25
25
  export var ProductCard = function (_a) {
@@ -122,15 +122,15 @@ export var ProductCard = function (_a) {
122
122
  };
123
123
  return (React.createElement("div", { key: product.id, className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', className), onClick: handleCardClick },
124
124
  renderHeader && renderHeader(product),
125
- React.createElement("div", { className: "".concat(imageLayoutClass, " relative") },
125
+ React.createElement("div", { className: buildClassesByJoining(imageLayoutClass, 'relative') },
126
126
  product.badges && renderBadges && (React.createElement("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1" }, product.badges.map(function (badge, index) { return (React.createElement("span", { key: index, className: buildClassesByJoining("inline-flex items-center px-2 py-1 text-xs font-medium ".concat(badge.color), roundedClass, badgeClassName) }, badge.text)); }))),
127
127
  React.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }),
128
- (showAddButton || showQuantityControls) && (React.createElement("div", { className: "absolute bottom-2 right-2 z-10", onClick: function (e) { return e.stopPropagation(); } },
128
+ (showAddButton || showQuantityControls) && (React.createElement("div", { className: buildClassesByJoining('absolute bottom-2 right-2 z-10'), onClick: function (e) { return e.stopPropagation(); } },
129
129
  React.createElement("div", { className: "relative" },
130
- React.createElement("div", { className: "transition-all duration-300 ease-in-out transform\n ".concat(showQuantityControls
130
+ React.createElement("div", { className: buildClassesByJoining('transition-all duration-300 ease-in-out transform', showQuantityControls
131
131
  ? 'scale-0 opacity-0'
132
- : 'scale-100 opacity-100') }, customAddButton || (React.createElement("button", { onClick: handleAddToCart, className: "p-2 w-10 h-10 flex items-center justify-center rounded-full bg-green-500 text-white shadow-md hover:bg-green-600 transition-colors duration-200", "aria-label": "Add to cart" }, addButtonIcon))),
133
- React.createElement("div", { className: "absolute top-0 right-0 transition-all duration-300 ease-in-out transform origin-right\n ".concat(!showQuantityControls
132
+ : 'scale-100 opacity-100') }, customAddButton || (React.createElement("button", { onClick: handleAddToCart, className: buildClassesByJoining('p-2 w-10 h-10 flex items-center justify-center rounded-full bg-green-500 text-white shadow-md hover:bg-green-600 transition-colors duration-200'), "aria-label": "Add to cart" }, addButtonIcon))),
133
+ React.createElement("div", { className: buildClassesByJoining('absolute top-0 right-0 transition-all duration-300 ease-in-out transform origin-right', !showQuantityControls
134
134
  ? 'scale-0 opacity-0'
135
135
  : 'scale-100 opacity-100') }, customQuantityControl || (React.createElement(QuantityControl, __assign({ quantity: quantity, onIncrement: handleIncrement, onDecrement: handleDecrement, minQuantity: 0, maxQuantity: maxQuantity }, quantityControlProps)))))))),
136
136
  React.createElement("div", { className: buildClassesByJoining('mt-4', contentLayoutClass, compactClass, contentClassName) },
package/dist/components/select-field/SelectField.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  var __assign = (this && this.__assign) || function () {
2
3
  __assign = Object.assign || function(t) {
3
4
  for (var s, i = 1, n = arguments.length; i < n; i++) {
package/dist/global.css ADDED
@@ -0,0 +1 @@
1
+ @import "tailwindcss";
package/dist/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import './global.css';
1
2
  export { default as Badge } from './components/badge/Badge';
3
+ export { Banner } from './components/banner/Banner';
2
4
  export { default as Button } from './components/button/Button';
3
5
  export { NavBar } from './components/nav-bar/NavBar';
4
6
  export { ProductCard } from './components/product-card/ProductCard';
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
- // src/index.ts
1
+ import './global.css';
2
2
  export { default as Badge } from './components/badge/Badge';
3
+ export { Banner } from './components/banner/Banner';
3
4
  export { default as Button } from './components/button/Button';
4
5
  export { NavBar } from './components/nav-bar/NavBar';
5
6
  export { ProductCard } from './components/product-card/ProductCard';
package/package.json CHANGED
@@ -1,61 +1,64 @@
1
1
  {
2
- "name": "@q2devel/q2-storybook",
3
- "version": "1.0.7",
4
- "main": "dist/index.js",
5
- "module": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "exports": {
8
- ".": {
9
- "import": "./dist/index.js",
10
- "require": "./dist/index.js"
2
+ "name": "@q2devel/q2-storybook",
3
+ "version": "1.0.9",
4
+ "main": "dist/index.js",
5
+ "module": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "import": "./dist/index.js",
10
+ "require": "./dist/index.js"
11
+ },
12
+ "./styles": "./dist/global.css"
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "test": "echo \"Error: no test specified\" && exit 1",
19
+ "storybook": "storybook dev -p 6006",
20
+ "build-storybook": "storybook build",
21
+ "build": "tsc && npm run copy-assets",
22
+ "copy-assets": "find src -name '*.css' -exec cp --parents {} dist \\; || xcopy /s /y src\\*.css dist\\",
23
+ "prepublishOnly": "npm run build"
24
+ },
25
+ "keywords": [],
26
+ "author": "Q2",
27
+ "license": "ISC",
28
+ "description": "Komponenty nebo konfigurace pro storybook",
29
+ "devDependencies": {
30
+ "@storybook/addon-actions": "^8.6.12",
31
+ "@storybook/addon-essentials": "^8.6.12",
32
+ "@storybook/addon-interactions": "^8.6.12",
33
+ "@storybook/addon-links": "^8.6.12",
34
+ "@storybook/addon-onboarding": "^8.6.12",
35
+ "@storybook/blocks": "^8.6.12",
36
+ "@storybook/react": "^8.6.12",
37
+ "@storybook/react-vite": "^8.6.12",
38
+ "@storybook/test": "^8.6.12",
39
+ "@types/classnames": "^2.3.0",
40
+ "@types/node": "^22.14.1",
41
+ "@types/react": "^19.1.2",
42
+ "@types/react-dom": "^19.1.2",
43
+ "autoprefixer": "^10.4.21",
44
+ "next": "^15.3.2",
45
+ "postcss": "^8.5.3",
46
+ "react": "^19.1.0",
47
+ "react-dom": "^19.1.0",
48
+ "storybook": "^8.6.12",
49
+ "tailwindcss": "^4.1.4",
50
+ "typescript": "^5.8.3"
51
+ },
52
+ "peerDependencies": {
53
+ "react": "^19.0.0",
54
+ "react-dom": "^19.0.0"
55
+ },
56
+ "dependencies": {
57
+ "@heroicons/react": "^2.2.0",
58
+ "@tailwindcss/postcss": "^4.1.4",
59
+ "classnames": "^2.5.1",
60
+ "html-react-parser": "^5.2.3",
61
+ "react-select": "^5.10.1",
62
+ "tailwind-merge": "^3.2.0"
11
63
  }
12
- },
13
- "files": [
14
- "dist"
15
- ],
16
- "scripts": {
17
- "test": "echo \"Error: no test specified\" && exit 1",
18
- "storybook": "storybook dev -p 6006",
19
- "build-storybook": "storybook build",
20
- "build": "tsc",
21
- "prepublishOnly": "npm run build"
22
- },
23
- "keywords": [],
24
- "author": "Q2",
25
- "license": "ISC",
26
- "description": "Komponenty nebo konfigurace pro storybook",
27
- "devDependencies": {
28
- "@storybook/addon-actions": "^8.6.12",
29
- "@storybook/addon-essentials": "^8.6.12",
30
- "@storybook/addon-interactions": "^8.6.12",
31
- "@storybook/addon-links": "^8.6.12",
32
- "@storybook/addon-onboarding": "^8.6.12",
33
- "@storybook/blocks": "^8.6.12",
34
- "@storybook/react": "^8.6.12",
35
- "@storybook/react-vite": "^8.6.12",
36
- "@storybook/test": "^8.6.12",
37
- "@types/classnames": "^2.3.0",
38
- "@types/node": "^22.14.1",
39
- "@types/react": "^19.1.2",
40
- "@types/react-dom": "^19.1.2",
41
- "autoprefixer": "^10.4.21",
42
- "postcss": "^8.5.3",
43
- "react": "^19.1.0",
44
- "react-dom": "^19.1.0",
45
- "storybook": "^8.6.12",
46
- "tailwindcss": "^4.1.4",
47
- "typescript": "^5.8.3"
48
- },
49
- "peerDependencies": {
50
- "react": "^19.0.0",
51
- "react-dom": "^19.0.0"
52
- },
53
- "dependencies": {
54
- "@heroicons/react": "^2.2.0",
55
- "@tailwindcss/postcss": "^4.1.4",
56
- "classnames": "^2.5.1",
57
- "html-react-parser": "^5.2.3",
58
- "react-select": "^5.10.1",
59
- "tailwind-merge": "^3.2.0"
60
- }
61
64
  }