@q2devel/q2-storybook 1.0.12 → 1.0.13

package/dist/components/product-card/ProductCard.js

@@ -0,0 +1,148 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
+import React, { useState } from 'react';
+import { buildClassesByJoining } from '../../utils/StyleHelper';
+// Quantity Control Component
+var QuantityControl = function (_a) {
+    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;
+    return (React.createElement("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName) },
+        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" },
+            React.createElement(MinusIcon, { className: "h-4 w-4" })),
+        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),
+        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" },
+            React.createElement(PlusIcon, { className: "h-4 w-4" }))));
+};
+export var ProductCard = function (_a) {
+    var product = _a.product, className = _a.className, imageClassName = _a.imageClassName, contentClassName = _a.contentClassName, titleClassName = _a.titleClassName, colorClassName = _a.colorClassName, priceClassName = _a.priceClassName, descriptionClassName = _a.descriptionClassName, badgeClassName = _a.badgeClassName, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? 'square' : _b, _c = _a.imagePosition, imagePosition = _c === void 0 ? 'center' : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? 'cover' : _d, _e = _a.layout, layout = _e === void 0 ? 'default' : _e, _f = _a.hoverEffect, hoverEffect = _f === void 0 ? 'opacity' : _f, _g = _a.renderBadges, renderBadges = _g === void 0 ? true : _g, _h = _a.renderColor, renderColor = _h === void 0 ? true : _h, _j = _a.renderDescription, renderDescription = _j === void 0 ? false : _j, _k = _a.elevationLevel, elevationLevel = _k === void 0 ? 0 : _k, _l = _a.rounded, rounded = _l === void 0 ? 'md' : _l, _m = _a.titleLines, titleLines = _m === void 0 ? 1 : _m, onCardClick = _a.onCardClick, onImageClick = _a.onImageClick, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, actionButton = _a.actionButton, 
+    // Add to cart functionality
+    _o = _a.showAddButton, 
+    // Add to cart functionality
+    showAddButton = _o === void 0 ? false : _o, _p = _a.initialQuantity, initialQuantity = _p === void 0 ? 0 : _p, onQuantityChange = _a.onQuantityChange, _q = _a.addButtonIcon, addButtonIcon = _q === void 0 ? React.createElement(PlusIcon, { className: "h-4 w-4" }) : _q, _r = _a.maxQuantity, maxQuantity = _r === void 0 ? 99 : _r, _s = _a.quantityControlProps, quantityControlProps = _s === void 0 ? {} : _s, customAddButton = _a.customAddButton, customQuantityControl = _a.customQuantityControl;
+    var _t = useState(initialQuantity), quantity = _t[0], setQuantity = _t[1];
+    var _u = useState(initialQuantity > 0), showQuantityControls = _u[0], setShowQuantityControls = _u[1];
+    // Create aspect ratio class
+    var aspectRatioClass = {
+        square: 'aspect-square',
+        auto: 'aspect-auto',
+        video: 'aspect-video',
+        wide: 'aspect-[16/9]',
+    }[aspectRatio];
+    // Create object-fit class
+    var objectFitClass = {
+        cover: 'object-cover',
+        contain: 'object-contain',
+        fill: 'object-fill',
+        none: 'object-none',
+    }[imageObjectFit];
+    // Create object-position class
+    var objectPositionClass = {
+        top: 'object-top',
+        center: 'object-center',
+        bottom: 'object-bottom',
+    }[imagePosition];
+    // Create hover effect class
+    var hoverClass = {
+        opacity: 'group-hover:opacity-75',
+        scale: 'transform transition-transform group-hover:scale-105',
+        shadow: 'transition-shadow group-hover:shadow-lg',
+        border: 'border border-transparent group-hover:border-primary-500',
+        none: '',
+    }[hoverEffect];
+    // Create shadow elevation class
+    var elevationClass = {
+        0: '',
+        1: 'shadow-sm',
+        2: 'shadow',
+        3: 'shadow-md',
+    }[elevationLevel];
+    // Create rounded class
+    var roundedClass = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        full: 'rounded-full',
+    }[rounded];
+    // Create title line clamp class
+    var titleLineClampClass = {
+        1: 'line-clamp-1',
+        2: 'line-clamp-2',
+        3: 'line-clamp-3',
+    }[titleLines];
+    // Create layout class
+    var layoutClass = layout === 'horizontal' ? 'flex gap-4' : '';
+    var imageLayoutClass = layout === 'horizontal' ? 'w-1/3' : 'w-full';
+    var contentLayoutClass = layout === 'horizontal' ? 'w-2/3' : 'w-full';
+    var compactClass = layout === 'compact' ? 'space-y-1' : 'space-y-2';
+    var handleCardClick = function () {
+        onCardClick && onCardClick(product);
+    };
+    var handleImageClick = function (e) {
+        if (onImageClick) {
+            e.stopPropagation();
+            onImageClick(product);
+        }
+    };
+    var handleAddToCart = function (e) {
+        e.stopPropagation(); // Prevent card click
+        setShowQuantityControls(true);
+        setQuantity(1);
+        onQuantityChange && onQuantityChange(product, 1);
+    };
+    var handleIncrement = function (e) {
+        e.stopPropagation(); // Prevent card click
+        var newQuantity = Math.min(quantity + 1, maxQuantity);
+        setQuantity(newQuantity);
+        onQuantityChange && onQuantityChange(product, newQuantity);
+    };
+    var handleDecrement = function (e) {
+        e.stopPropagation(); // Prevent card click
+        var newQuantity = Math.max(quantity - 1, 0);
+        if (newQuantity === 0) {
+            setQuantity(0);
+            // Use timeout to allow animation to play before hiding
+            setTimeout(function () {
+                setShowQuantityControls(false);
+            }, 300);
+        }
+        else {
+            setQuantity(newQuantity);
+        }
+        onQuantityChange && onQuantityChange(product, newQuantity);
+    };
+    return (React.createElement("div", { key: product.id, className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', className), onClick: handleCardClick },
+        renderHeader && renderHeader(product),
+        React.createElement("div", { className: buildClassesByJoining(imageLayoutClass, 'relative') },
+            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)); }))),
+            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 }),
+            (showAddButton || showQuantityControls) && (React.createElement("div", { className: buildClassesByJoining('absolute bottom-2 right-2 z-10'), onClick: function (e) { return e.stopPropagation(); } },
+                React.createElement("div", { className: "relative" },
+                    React.createElement("div", { className: buildClassesByJoining('transition-all duration-300 ease-in-out transform', showQuantityControls
+                            ? 'scale-0 opacity-0'
+                            : '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))),
+                    React.createElement("div", { className: buildClassesByJoining('absolute top-0 right-0 transition-all duration-300 ease-in-out transform origin-right', !showQuantityControls
+                            ? 'scale-0 opacity-0'
+                            : 'scale-100 opacity-100') }, customQuantityControl || (React.createElement(QuantityControl, __assign({ quantity: quantity, onIncrement: handleIncrement, onDecrement: handleDecrement, minQuantity: 0, maxQuantity: maxQuantity }, quantityControlProps)))))))),
+        React.createElement("div", { className: buildClassesByJoining('mt-4', contentLayoutClass, compactClass, contentClassName) },
+            React.createElement("div", { className: "flex justify-between" },
+                React.createElement("div", null,
+                    React.createElement("h3", { className: buildClassesByJoining('text-sm text-gray-700', titleLineClampClass, titleClassName) },
+                        React.createElement("a", { href: product.href },
+                            !onCardClick && (React.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" })),
+                            product.name)),
+                    renderColor && product.color && (React.createElement("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500', colorClassName) }, product.color)),
+                    renderDescription && product.description && (React.createElement("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName) }, product.description))),
+                React.createElement("p", { className: buildClassesByJoining('text-sm font-medium text-gray-900', priceClassName) }, product.price)),
+            actionButton && React.createElement("div", { className: "mt-2" }, actionButton),
+            renderFooter && renderFooter(product))));
+};

package/dist/components/select-field/SelectField.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode, Ref } from 'react';
+import { GroupBase, Props, SelectInstance } from 'react-select';
+import { TooltipRef } from '../tooltip/Tooltip';
+export type SelectFieldSize = 'sm' | 'md' | 'xs' | 'border-sm';
+export type SelectFieldProps<Option, Group extends GroupBase<Option> = GroupBase<Option>, IsMulti extends boolean = false> = Omit<Props<Option, IsMulti, Group>, 'className' | 'classNamePrefix' | 'loadOptions'> & {
+    label?: string;
+    isRequired?: boolean;
+    srOnlyLabel?: boolean;
+    subtitle?: string;
+    color?: string;
+    valid?: boolean;
+    size?: SelectFieldSize;
+    message?: string;
+    className?: string;
+    removePaddingTop?: boolean;
+    renderMessageInTooltip?: boolean;
+    selectFieldType?: 'table' | 'default';
+    placeholder?: string;
+    tooltipRef?: Ref<TooltipRef>;
+    disablePortal?: boolean;
+    tooltipMessage?: ReactNode;
+    typeSelect?: 'single' | 'multi' | 'single-badges';
+    badgeLabelClassName?: string;
+};
+export type SelectFieldRefType<Option, Group extends GroupBase<Option>, IsMulti extends boolean = false> = SelectInstance<Option, IsMulti, Group>;
+declare const SelectField: <Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>, IsMulti extends boolean = false>(props: SelectFieldProps<Option, Group, IsMulti> & React.RefAttributes<SelectFieldRefType<Option, Group, IsMulti>>) => React.JSX.Element;
+export default SelectField;

package/dist/components/select-field/SelectField.js

@@ -0,0 +1,132 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { buildClassesByJoining } from '../../utils/StyleHelper';
+import React, { forwardRef, isValidElement, useId } from 'react';
+import ReactSelect from 'react-select';
+import Badge from '../badge/Badge';
+import { CloseIcon } from '../icon/CloseIcon';
+import { InfoIcon } from '../icon/InfoIcon';
+import Label from '../label/Label';
+import Tooltip from '../tooltip/Tooltip';
+import SelectFieldOption from './SelectFieldOption';
+function SelectFieldComponent(_a, ref) {
+    var _b;
+    var _c, _d;
+    var id = _a.id, label = _a.label, isRequired = _a.isRequired, srOnlyLabel = _a.srOnlyLabel, _e = _a.selectFieldType, selectFieldType = _e === void 0 ? 'default' : _e, subtitle = _a.subtitle, _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.color, color = _g === void 0 ? 'primary' : _g, _h = _a.valid, valid = _h === void 0 ? true : _h, className = _a.className, message = _a.message, _j = _a.placeholder, placeholder = _j === void 0 ? selectFieldType === 'table' ? '...' : '' : _j, _k = _a.isSearchable, isSearchable = _k === void 0 ? false : _k, removePaddingTop = _a.removePaddingTop, _l = _a.menuPosition, menuPosition = _l === void 0 ? 'fixed' : _l, renderMessageInTooltip = _a.renderMessageInTooltip, tooltipRef = _a.tooltipRef, disablePortal = _a.disablePortal, tooltipMessage = _a.tooltipMessage, isMulti = _a.isMulti, _m = _a.typeSelect, typeSelect = _m === void 0 ? isMulti ? 'multi' : 'single' : _m, badgeLabelClassName = _a.badgeLabelClassName, customStyles = _a.styles, props = __rest(_a, ["id", "label", "isRequired", "srOnlyLabel", "selectFieldType", "subtitle", "size", "color", "valid", "className", "message", "placeholder", "isSearchable", "removePaddingTop", "menuPosition", "renderMessageInTooltip", "tooltipRef", "disablePortal", "tooltipMessage", "isMulti", "typeSelect", "badgeLabelClassName", "styles"]);
+    var randomId = useId();
+    var isMultiSelect = typeSelect === 'multi';
+    var renderMessage = function () {
+        return message && React.createElement("span", { className: "text-xs mt-1 block text-gray-500" }, message);
+    };
+    var containerClassName = buildClassesByJoining((_b = {
+            invalid: !valid
+        },
+        _b[color] = true,
+        _b[size] = true,
+        _b.selector = true,
+        _b['!pt-0'] = removePaddingTop,
+        _b['shadow-sm'] = selectFieldType === 'table',
+        _b['font-medium'] = selectFieldType === 'table',
+        _b), className, 'flex flex-col gap-2');
+    var testAttributes = {
+        'data-test-element': 'select',
+        'data-test-element-type': typeSelect === 'multi' ? 'multi-select' : 'single-select',
+        'data-test-name': props === null || props === void 0 ? void 0 : props.name,
+        'data-test-selected-label': (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c.label,
+        'data-test-selected-value': (_d = props === null || props === void 0 ? void 0 : props.value) === null || _d === void 0 ? void 0 : _d.value,
+        'data-test-is-disabled': props === null || props === void 0 ? void 0 : props.isDisabled,
+    };
+    var renderOptionBadge = function (_a) {
+        var children = _a.children, removeProps = _a.removeProps;
+        return (React.createElement(Badge, { color: "bg-blue-100 text-blue-800", rightIcon: React.createElement(CloseIcon, { onMouseDown: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }, onClick: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (removeProps && typeof removeProps.onClick === 'function') {
+                        removeProps.onClick(event);
+                    }
+                }, className: "w-4 h-4 cursor-pointer" }), className: "m-1", labelClassName: badgeLabelClassName }, children));
+    };
+    var getMultiValueComponent = function (props) {
+        var selectedValues = props.getValue();
+        if (selectFieldType === 'table') {
+            return (props.index === 0 && (React.createElement(React.Fragment, null,
+                renderOptionBadge(props),
+                selectedValues.length > 1 && (React.createElement(Badge, { color: "bg-blue-100 text-blue-800", className: "m-1" },
+                    React.createElement("span", null,
+                        "+",
+                        selectedValues.length - 1))))));
+        }
+        return renderOptionBadge(props);
+    };
+    var renderInput = function () {
+        var _a;
+        var getBaseStyles = function () { return (__assign(__assign({}, customStyles), { indicatorSeparator: function (base) { return (__assign(__assign({}, base), { display: 'none' })); }, placeholder: function (base) { return (__assign(__assign({}, base), { opacity: 0.4, fontWeight: 'normal', fontSize: selectFieldType === 'table' ? '1rem' : '0.75rem' })); }, control: function (base) { return (__assign(__assign({}, base), { paddingLeft: selectFieldType === 'table' ? '4px' : '0' })); }, dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { opacity: state.isFocused || state.selectProps.menuIsOpen ? 1 : 0.4 })); }, singleValue: function (base) {
+                if (typeSelect !== 'single-badges') {
+                    return base;
+                }
+                return __assign(__assign({}, base), { backgroundColor: '#E5EFFE', border: '0.063rem solid #A0AEC0', color: '#374151 !important', padding: '0.125rem 0.625rem', fontSize: '0.75rem', borderRadius: '6px', width: 'fit-content' });
+            } })); };
+        var commonProps = {
+            id: id || randomId,
+            instanceId: id || randomId,
+            isSearchable: isSearchable,
+            className: buildClassesByJoining((_a = {},
+                _a[size] = true,
+                _a), 'selector-container'),
+            menuPortalTarget: typeof document !== 'undefined' && menuPosition === 'fixed' && !disablePortal
+                ? document.body
+                : undefined,
+            classNamePrefix: 'selector',
+            placeholder: placeholder,
+            menuPosition: menuPosition,
+            openMenuOnFocus: true,
+            openMenuOnClick: true,
+            noOptionsMessage: function () { return (React.createElement("div", { className: "text-gray-500 text-sm" }, "No options available")); },
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", __assign({}, testAttributes), isMultiSelect ? (React.createElement(ReactSelect, __assign({}, props, commonProps, { styles: getBaseStyles(), isMulti: true, ref: ref, components: {
+                    Option: SelectFieldOption,
+                    MultiValue: getMultiValueComponent,
+                } }))) : (React.createElement(ReactSelect, __assign({}, props, commonProps, { styles: getBaseStyles(), isMulti: false, ref: ref, components: {
+                    Option: SelectFieldOption,
+                    MultiValue: getMultiValueComponent,
+                } })))),
+            !renderMessageInTooltip && renderMessage()));
+    };
+    var renderTooltip = function () {
+        return (React.createElement("span", { className: "flex items-center gap-1 pb-1" },
+            React.createElement(Tooltip, { placement: "top", content: tooltipMessage, contentClassName: "max-w-64" },
+                React.createElement(InfoIcon, null))));
+    };
+    return (React.createElement("div", { className: containerClassName },
+        (!!(label === null || label === void 0 ? void 0 : label.length) || isValidElement(tooltipMessage)) && (React.createElement("div", { className: "flex gap-1" },
+            React.createElement(Label, { text: label, isRequired: isRequired, htmlFor: randomId, subtitle: subtitle, srOnly: srOnlyLabel }),
+            tooltipMessage && renderTooltip())),
+        React.createElement("div", { className: "flex flex-col relative" }, renderMessageInTooltip ? (React.createElement(Tooltip, { content: message, backgroundColor: !valid ? 'bg-red-500' : 'bg-blue-500', textColor: "text-white", ref: tooltipRef, disabled: !renderMessageInTooltip || !message, lazy: false }, renderInput())) : (renderInput()))));
+}
+var SelectField = forwardRef(SelectFieldComponent);
+export default SelectField;

package/dist/components/select-field/SelectFieldOption.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { GroupBase, OptionProps } from 'react-select';
+export type SelectFieldOptionProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = OptionProps<Option, IsMulti, Group>;
+declare const SelectFieldOption: <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, data, ...props }: SelectFieldOptionProps<Option, IsMulti, Group>) => React.JSX.Element;
+export default SelectFieldOption;

package/dist/components/select-field/SelectFieldOption.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { components } from 'react-select';
+var SelectFieldOption = function (_a) {
+    var children = _a.children, data = _a.data, props = __rest(_a, ["children", "data"]);
+    var optionData = data;
+    return (React.createElement(components.Option, __assign({}, props, { data: data }),
+        React.createElement("span", { "data-test-option": JSON.stringify(optionData), "data-test-option-value": optionData.value, "data-test-option-label": optionData.label }, children)));
+};
+export default SelectFieldOption;

package/dist/components/text-field/TextField.d.ts

@@ -0,0 +1,21 @@
+import { MouseEvent } from 'react';
+import { TextFieldType } from './TextField.types';
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> & {
+    label?: string | React.ReactNode;
+    labelColor?: string;
+    variant?: import("./TextField.types").TextFieldVariant;
+    labelType?: import("./TextField.types").TextFieldLabelType;
+    type?: TextFieldType;
+    size?: import("./TextField.types").TextFieldSize;
+    valid?: boolean;
+    message?: string | React.ReactNode;
+    messageColor?: string;
+    background?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    onLeftIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onRightIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    showPasswordEyeIcon?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/components/text-field/TextField.js

@@ -0,0 +1,87 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { buildClassesByJoining } from '../../utils/StyleHelper';
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import { forwardRef, useCallback, useId, useMemo, useState } from 'react';
+import React from 'react';
+var TextField = function (_a, ref) {
+    var idProp = _a.id, _b = _a.type, typeProp = _b === void 0 ? 'text' : _b, label = _a.label, _c = _a.labelColor, labelColor = _c === void 0 ? 'text-gray-700' : _c, _d = _a.labelType, labelType = _d === void 0 ? 'outside' : _d, _e = _a.variant, variant = _e === void 0 ? 'rounded' : _e, _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.color, color = _g === void 0 ? 'primary' : _g, _h = _a.background, background = _h === void 0 ? 'bg-white' : _h, _j = _a.autoComplete, autoComplete = _j === void 0 ? 'off' : _j, _k = _a.valid, valid = _k === void 0 ? true : _k, message = _a.message, _l = _a.messageColor, messageColor = _l === void 0 ? 'text-gray-500' : _l, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, _m = _a.showPasswordEyeIcon, showPasswordEyeIcon = _m === void 0 ? true : _m, props = __rest(_a, ["id", "type", "label", "labelColor", "labelType", "variant", "size", "color", "background", "autoComplete", "valid", "message", "messageColor", "leftIcon", "rightIcon", "onLeftIconClick", "onRightIconClick", "showPasswordEyeIcon"]);
+    var id = useId();
+    var errorColor = 'text-red-500';
+    var _o = useState(false), showPassword = _o[0], setShowPassword = _o[1];
+    var type = useMemo(function () { return (typeProp === 'password' && showPassword ? 'text' : typeProp); }, [typeProp, showPassword]);
+    var toggleShowPassword = useCallback(function (event) {
+        setShowPassword(function (prev) { return !prev; });
+        if (onRightIconClick)
+            onRightIconClick(event);
+    }, [onRightIconClick]);
+    var variantClasses = {
+        normal: 'border',
+        rounded: 'border rounded-md',
+        flat: 'border-b focus-within:border-b-2 focus-within:ring-0 shadow-none',
+    };
+    var sizeClasses = {
+        sm: 'py-0.5 px-3',
+        md: 'py-2 px-3',
+    };
+    var labelTypeClasses = {
+        outside: 'block text-sm font-medium',
+        inside: 'block text-xs font-medium text-gray-900',
+        overlapping: 'absolute -top-2 left-2 -mt-px inline-block px-1 bg-white text-xs font-medium text-gray-900',
+        hidden: 'sr-only',
+    };
+    var containerClasses = buildClassesByJoining('relative border-gray-300 shadow-sm focus-within:ring-1', !valid
+        ? 'border-red-500 focus-within:ring-red-500'
+        : "focus-within:ring-".concat(color, "-500 focus-within:border-").concat(color, "-500"), variantClasses[variant], sizeClasses[size], background, labelType === 'outside' && 'mt-1');
+    var renderLeftIcon = function () {
+        if (!leftIcon)
+            return null;
+        return (React.createElement("span", { className: buildClassesByJoining('absolute inset-y-0 left-0 pl-3 flex items-center', labelType === 'inside' && 'mt-4'), onClick: onLeftIconClick ? onLeftIconClick : undefined }, leftIcon));
+    };
+    var renderRightIcon = function () {
+        if (!rightIcon && !(typeProp === 'password' && showPasswordEyeIcon))
+            return null;
+        var icon = rightIcon;
+        if (typeProp === 'password' && showPasswordEyeIcon) {
+            var IconComponent = showPassword ? EyeIcon : EyeSlashIcon;
+            icon = (React.createElement(IconComponent, { className: buildClassesByJoining('h-5 w-5', !valid ? 'text-red-500' : 'text-gray-400') }));
+        }
+        return (React.createElement("span", { className: "absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer", onClick: toggleShowPassword }, icon));
+    };
+    var renderLabel = function () {
+        if (!label)
+            return null;
+        return (React.createElement("label", { htmlFor: id, className: buildClassesByJoining(labelTypeClasses[labelType], !valid ? errorColor : labelColor) }, label));
+    };
+    return (React.createElement("div", { className: "min-h-[80px]" },
+        labelType === 'outside' && renderLabel(),
+        React.createElement("div", { className: containerClasses },
+            (labelType === 'overlapping' || labelType === 'inside' || labelType === 'hidden') &&
+                renderLabel(),
+            renderLeftIcon(),
+            renderRightIcon(),
+            React.createElement("input", __assign({}, props, { ref: ref, id: id, autoComplete: autoComplete, type: type, className: buildClassesByJoining('block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm bg-transparent outline-none', !!leftIcon && 'pl-6', !!rightIcon && 'pr-6') }))),
+        message && (React.createElement("p", { className: buildClassesByJoining('mt-1.5 text-sm', !valid ? errorColor : messageColor) }, message))));
+};
+export default forwardRef(TextField);

package/dist/components/text-field/TextField.types.d.ts

@@ -0,0 +1,22 @@
+import React, { MouseEvent } from 'react';
+export type TextFieldSize = 'sm' | 'md';
+export type TextFieldLabelType = 'outside' | 'inside' | 'overlapping' | 'hidden';
+export type TextFieldVariant = 'normal' | 'rounded' | 'flat';
+export type TextFieldType = 'text' | 'password' | 'email' | 'number' | 'date' | 'file';
+export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'type' | 'size'> & {
+    label?: string | React.ReactNode;
+    labelColor?: string;
+    variant?: TextFieldVariant;
+    labelType?: TextFieldLabelType;
+    type?: TextFieldType;
+    size?: TextFieldSize;
+    valid?: boolean;
+    message?: string | React.ReactNode;
+    messageColor?: string;
+    background?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    onLeftIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onRightIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    showPasswordEyeIcon?: boolean;
+};

package/dist/components/text-field/TextField.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactNode } from 'react';
+export interface TooltipRef {
+    show: () => void;
+    hide: () => void;
+}
+interface TooltipProps {
+    content?: ReactNode;
+    children: ReactNode;
+    backgroundColor?: string;
+    textColor?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    contentClassName?: string;
+    disabled?: boolean;
+    lazy?: boolean;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
+export default Tooltip;

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { forwardRef } from 'react';
+var Tooltip = forwardRef(function (_a, ref) {
+    var content = _a.content, children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'bg-black' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'text-white' : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom' : _d, _e = _a.contentClassName, contentClassName = _e === void 0 ? '' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.lazy, lazy = _g === void 0 ? true : _g;
+    if (disabled)
+        return React.createElement(React.Fragment, null, children);
+    return (React.createElement("span", { className: "relative group cursor-pointer" },
+        children,
+        content && (React.createElement("span", { className: "absolute z-10 hidden group-hover:block\n                    ".concat(placement === 'top'
+                ? 'bottom-full mb-2'
+                : placement === 'bottom'
+                    ? 'top-full mt-2'
+                    : placement === 'left'
+                        ? 'right-full mr-2'
+                        : 'left-full ml-2', "\n                    left-1/2 -translate-x-1/2 px-3 py-2 rounded ").concat(backgroundColor, " ").concat(textColor, "\n                    text-xs whitespace-pre-wrap ").concat(contentClassName) }, content))));
+});
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;

package/dist/global.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/dist/index.d.ts

@@ -1,3 +1,9 @@
-export { default as Button } from './components/button/Button';
 export { default as Badge } from './components/badge/Badge';
+export { Banner } from './components/banner/Banner';
+export { default as Button } from './components/button/Button';
+export { NavBar } from './components/nav-bar/NavBar';
+export { ProductCard } from './components/product-card/ProductCard';
+export { default as SelectField } from './components/select-field/SelectField';
+export { default as TextField } from './components/text-field/TextField';
 export { default as ImageWithText } from './components/text-with-image/ImageWithText';
+export { buildClassesByJoining } from './utils/StyleHelper';

package/dist/index.js

@@ -1,4 +1,9 @@
-// src/index.ts
-export { default as Button } from './components/button/Button';
 export { default as Badge } from './components/badge/Badge';
+export { Banner } from './components/banner/Banner';
+export { default as Button } from './components/button/Button';
+export { NavBar } from './components/nav-bar/NavBar';
+export { ProductCard } from './components/product-card/ProductCard';
+export { default as SelectField } from './components/select-field/SelectField';
+export { default as TextField } from './components/text-field/TextField';
 export { default as ImageWithText } from './components/text-with-image/ImageWithText';
+export { buildClassesByJoining } from './utils/StyleHelper';

package/dist/utils/Helper.js

@@ -0,0 +1 @@
+"use strict";

package/dist/utils/StyleHelper.d.ts

@@ -0,0 +1,4 @@
+import { twMerge } from 'tailwind-merge';
+export declare const buildClassesByJoining: (...args: any[]) => string;
+export { twMerge };
+export default buildClassesByJoining;

package/dist/utils/StyleHelper.js

@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
+export var buildClassesByJoining = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var combinedClasses = classNames.apply(void 0, args);
+    return twMerge(combinedClasses);
+};
+export { twMerge };
+export default buildClassesByJoining;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q2devel/q2-storybook",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,7 +17,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsc"
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [],
   "author": "Q2",
@@ -33,6 +34,7 @@
     "@storybook/react": "^8.6.12",
     "@storybook/react-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
+    "@types/classnames": "^2.3.0",
     "@types/node": "^22.14.1",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
@@ -49,7 +51,12 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.2",
+    "@heroicons/react": "^2.2.0",
     "@tailwindcss/postcss": "^4.1.4",
-    "html-react-parser": "^5.2.3"
+    "classnames": "^2.5.1",
+    "html-react-parser": "^5.2.3",
+    "react-select": "^5.10.1",
+    "tailwind-merge": "^3.2.0"
   }
 }

package/dist/components/heading/Heading.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface HeadingProps {
-    text: string;
-}
-declare const Heading: React.FC<HeadingProps>;
-export default Heading;