function mergeClassnames(...classes) { return classes.filter(Boolean).join(' '); } function getButtonSize({ size, iconLeft, iconRight, fullWidth }) { let padding; if (size === 'xs') { padding = fullWidth ? 'px-2' : iconLeft ? 'pl-1 pr-2' : iconRight ? 'pl-2 pr-1' : 'px-2'; return mergeClassnames(padding, 'h-6 py-1 gap-1 text-xs rounded'); } else if (size === 'sm') { padding = fullWidth ? 'px-3' : iconLeft ? 'pl-1 pr-3' : iconRight ? 'pl-3 pr-1' : 'px-3'; return mergeClassnames(padding, 'h-8 py-1 gap-1 text-sm rounded'); } else if (size === 'lg') { padding = fullWidth ? 'px-4' : iconLeft ? 'pl-3 pr-4' : iconRight ? 'pl-4 pr-3' : 'px-4'; return mergeClassnames(padding, 'h-12 py-3 gap-2 text-lg rounded'); } else if (size === 'xl') { padding = fullWidth ? 'px-6' : iconLeft ? 'pl-4 pr-6' : iconRight ? 'pl-6 pr-4' : 'px-6'; return mergeClassnames(padding, 'h-14 py-4 gap-2 text-xl rounded'); } else { padding = fullWidth ? 'px-4' : iconLeft ? 'pl-2 pr-4' : iconRight ? 'pl-4 pr-2' : 'px-4'; return mergeClassnames(padding, 'h-10 py-2 gap-2 text-base rounded'); } } function getButtonCommonStyles({ disabled }) { return mergeClassnames('relative z-0 flex justify-center items-center font-medium no-underline overflow-hidden', 'whitespace-nowrap select-none transition duration-200', disabled ? 'opacity-60 cursor-not-allowed' : 'active:scale-90'); } function getButtonVariants({ variant, disabled }) { if (variant === 'secondary' || variant === 'outline') { return mergeClassnames('text-blue-500 bg-transparent border border-blue-500', !disabled && 'hover:bg-blue-500 hover:text-white'); } else if (variant === 'tertiary') { return 'text-white bg-green-500'; } else if (variant === 'ghost') { return mergeClassnames('text-gray-500 bg-transparent', !disabled && 'hover:text-blue-500'); } else { return 'text-white bg-blue-500 hover:bg-blue-600'; } } function getIconSize(size) { return size === 'xs' ? 'text-base' : 'text-xl'; } function getIconHorizontalPosition({ iconLeft, iconRight, size }) { if (iconLeft) { switch(size){ case 'xs': case 'sm': return 'left-1'; case 'lg': return 'left-3'; case 'xl': return 'left-4'; default: return 'left-2'; } } else if (iconRight) { switch(size){ case 'xs': case 'sm': return 'right-1'; case 'lg': return 'right-3'; case 'xl': return 'right-4'; default: return 'right-2'; } } return ''; } function MainComponent({ children, variant = 'fill', size = 'md', iconLeft, iconRight, fullWidth, disabled, className, ...rest }) { return /*#__PURE__*/ React.createElement("button", { className: mergeClassnames(getButtonSize({ size, iconLeft, iconRight, fullWidth }), getButtonCommonStyles({ disabled }), getButtonVariants({ variant, disabled }), fullWidth && 'w-full', className), ...disabled && { disabled }, ...rest, __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, iconLeft && /*#__PURE__*/ React.createElement("span", { "aria-hidden": "true", className: mergeClassnames(getIconSize(size), fullWidth && `absolute top-1/2 transform -translate-y-1/2 ${getIconHorizontalPosition({ iconLeft, size })}`), __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, iconLeft), children, iconRight && /*#__PURE__*/ React.createElement("span", { "aria-hidden": "true", className: mergeClassnames(getIconSize(size), fullWidth && `absolute top-1/2 transform -translate-y-1/2 ${getIconHorizontalPosition({ iconRight, size })}`), __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, iconRight)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 149, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { variant: "primary", size: "lg", className: "font-sans", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, "Primary Button"), /*#__PURE__*/ React.createElement(MainComponent, { variant: "secondary", size: "md", disabled: true, className: "font-sans", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, "Disabled Secondary"), /*#__PURE__*/ React.createElement(MainComponent, { variant: "outline", size: "sm", iconLeft: /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xl", __source: { fileName: "", lineNumber: 159, columnNumber: 19 } }), className: "font-sans", __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement(MainComponent, { variant: "ghost", iconRight: /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-xl", __source: { fileName: "", lineNumber: 166, columnNumber: 20 } }), className: "font-sans", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, "Next"), /*#__PURE__*/ React.createElement(MainComponent, { variant: "fill", size: "xl", fullWidth: true, className: "font-sans", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, "Full Width")); }