@q2devel/q2-storybook 1.0.0 → 1.0.1

package/dist/components/icon/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SVGProps } from 'react';
+export declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/components/icon/CloseIcon.js

@@ -0,0 +1,14 @@
+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 React from 'react';
+export var CloseIcon = function (props) { return (React.createElement("svg", __assign({ width: 16, height: 16, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: props.className, onClick: props.onClick, onMouseDown: props.onMouseDown }, props),
+    React.createElement("path", { d: "M6 18L18 6M6 6l12 12", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }))); };

package/dist/components/icon/InfoIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SVGProps } from 'react';
+export declare const InfoIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/components/icon/InfoIcon.js

@@ -0,0 +1,15 @@
+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 React from 'react';
+export var InfoIcon = function (props) { return (React.createElement("svg", __assign({ className: "w-4 h-4 text-blue-600 ".concat(props.className || ''), fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24" }, props),
+    React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor" }),
+    React.createElement("path", { d: "M12 8v4m0 4h.01", stroke: "currentColor" }))); };

package/dist/components/label/Label.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface LabelProps {
+    text?: string;
+    i18nKey?: string;
+    isRequired?: boolean;
+    htmlFor?: string;
+    subtitle?: string;
+    srOnly?: boolean;
+    className?: string;
+}
+declare const Label: ({ text, i18nKey, isRequired, htmlFor, subtitle, srOnly, className, }: LabelProps) => React.JSX.Element | null;
+export default Label;

package/dist/components/label/Label.js

@@ -0,0 +1,11 @@
+import React from "react";
+var Label = function (_a) {
+    var text = _a.text, i18nKey = _a.i18nKey, isRequired = _a.isRequired, htmlFor = _a.htmlFor, subtitle = _a.subtitle, srOnly = _a.srOnly, _b = _a.className, className = _b === void 0 ? '' : _b;
+    if (!text && !i18nKey)
+        return null;
+    return (React.createElement("label", { htmlFor: htmlFor, className: "text-sm font-medium text-gray-700 flex flex-col ".concat(srOnly ? 'sr-only' : '', " ").concat(className) },
+        React.createElement("span", null, text || i18nKey),
+        isRequired && React.createElement("span", { className: "ml-1 text-red-500" }, "*"),
+        subtitle && React.createElement("span", { className: "text-xs text-gray-500" }, subtitle)));
+};
+export default Label;

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,131 @@
+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/index.d.ts

@@ -1,3 +1,4 @@
-export { default as Button } from './components/button/Button';
 export { default as Badge } from './components/badge/Badge';
+export { default as Button } from './components/button/Button';
 export { default as ImageWithText } from './components/text-with-image/ImageWithText';
+export { buildClassesByJoining } from './utils/StyleHelper';

package/dist/index.js

@@ -1,4 +1,5 @@
 // src/index.ts
-export { default as Button } from './components/button/Button';
 export { default as Badge } from './components/badge/Badge';
+export { default as Button } from './components/button/Button';
 export { default as ImageWithText } from './components/text-with-image/ImageWithText';
+export { buildClassesByJoining } from './utils/StyleHelper';

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,55 +1,60 @@
-{
-  "name": "@q2devel/q2-storybook",
-  "version": "1.0.0",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsc"
-  },
-  "keywords": [],
-  "author": "Q2",
-  "license": "ISC",
-  "description": "Komponenty nebo konfigurace pro storybook",
-  "devDependencies": {
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@types/node": "^22.14.1",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "storybook": "^8.6.12",
-    "tailwindcss": "^4.1.4",
-    "typescript": "^5.8.3"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "dependencies": {
-    "@tailwindcss/postcss": "^4.1.4",
-    "html-react-parser": "^5.2.3"
-  }
-}
+{
+  "name": "@q2devel/q2-storybook",
+  "version": "1.0.1",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsc"
+  },
+  "keywords": [],
+  "author": "Q2",
+  "license": "ISC",
+  "description": "Komponenty nebo konfigurace pro storybook",
+  "devDependencies": {
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@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",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^8.6.12",
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@tailwindcss/postcss": "^4.1.4",
+    "classnames": "^2.5.1",
+    "html-react-parser": "^5.2.3",
+    "react-select": "^5.10.1",
+    "tailwind-merge": "^3.2.0"
+  }
+}