@hyddenlabs/hydn-ui 0.3.10 → 0.3.11
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.
|
@@ -5,20 +5,20 @@ export type ButtonProps = {
|
|
|
5
5
|
/** Button label content - text, icons, or other elements */
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
/** Click event handler */
|
|
8
|
-
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
8
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
9
9
|
/** Mouse enter event handler */
|
|
10
|
-
onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
10
|
+
onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
11
11
|
/** Mouse leave event handler */
|
|
12
|
-
onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
12
|
+
onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
13
13
|
/** Mouse down event handler */
|
|
14
|
-
onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
14
|
+
onMouseDown?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
15
15
|
/** Blur event handler */
|
|
16
|
-
onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
|
|
16
|
+
onBlur?: (e: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
17
17
|
/** Accessible label for icon-only buttons (required when no children) */
|
|
18
18
|
ariaLabel?: string;
|
|
19
19
|
/** Disables button interaction and applies disabled styling */
|
|
20
20
|
disabled?: boolean;
|
|
21
|
-
/** HTML button type attribute */
|
|
21
|
+
/** HTML button type attribute (ignored when `to` or `href` is set) */
|
|
22
22
|
type?: 'button' | 'submit' | 'reset';
|
|
23
23
|
/** Additional CSS classes applied to the button */
|
|
24
24
|
className?: string;
|
|
@@ -52,6 +52,20 @@ export type ButtonProps = {
|
|
|
52
52
|
'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
53
53
|
/** ARIA controls - ID of element controlled by this button */
|
|
54
54
|
'aria-controls'?: string;
|
|
55
|
+
/**
|
|
56
|
+
* React Router path. When provided the component renders as a `<Link>` (anchor tag)
|
|
57
|
+
* instead of a `<button>`, giving you router-aware navigation with full button styling.
|
|
58
|
+
*/
|
|
59
|
+
to?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Plain URL. When provided (and `to` is not set) the component renders as an `<a>` tag.
|
|
62
|
+
* Use `to` instead when navigating within the app so React Router manages the history.
|
|
63
|
+
*/
|
|
64
|
+
href?: string;
|
|
65
|
+
/** Link target attribute (`_blank`, `_self`, etc.) – only used when `to` or `href` is set */
|
|
66
|
+
target?: React.HTMLAttributeAnchorTarget;
|
|
67
|
+
/** Rel attribute for the anchor – defaults to `"noreferrer noopener"` when `target="_blank"` */
|
|
68
|
+
rel?: string;
|
|
55
69
|
};
|
|
56
70
|
/**
|
|
57
71
|
* Accessible Button component
|
|
@@ -60,7 +74,8 @@ export type ButtonProps = {
|
|
|
60
74
|
* - Sizes: xs, sm, md (default), lg, xl
|
|
61
75
|
* - Supports icons with flexible positioning (left/right)
|
|
62
76
|
* - Icon-only buttons require `ariaLabel` for accessibility
|
|
77
|
+
* - Pass `to` to render as a React Router `<Link>`, or `href` for a plain `<a>`, keeping full button styling
|
|
63
78
|
*/
|
|
64
|
-
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
79
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
65
80
|
export default Button;
|
|
66
81
|
//# sourceMappingURL=button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Link } from "react-router-dom";
|
|
3
4
|
import { interactiveSizes, inputWidthSizes } from "../../../theme/size-tokens.js";
|
|
4
5
|
import { inputAlignClasses, colorVariants } from "../../../theme/tokens.js";
|
|
5
6
|
const Button = React.forwardRef(
|
|
@@ -28,7 +29,11 @@ const Button = React.forwardRef(
|
|
|
28
29
|
active = false,
|
|
29
30
|
"aria-expanded": ariaExpanded,
|
|
30
31
|
"aria-haspopup": ariaHaspopup,
|
|
31
|
-
"aria-controls": ariaControls
|
|
32
|
+
"aria-controls": ariaControls,
|
|
33
|
+
to,
|
|
34
|
+
href,
|
|
35
|
+
target,
|
|
36
|
+
rel
|
|
32
37
|
}, ref) => {
|
|
33
38
|
const isIconOnly = icon && !children;
|
|
34
39
|
if (isIconOnly && !ariaLabel) {
|
|
@@ -86,7 +91,41 @@ const Button = React.forwardRef(
|
|
|
86
91
|
const showRightIcon = shouldRenderIconSlots && iconPosition === "right";
|
|
87
92
|
const hasDisplayOverride = className.includes("hidden") || className.includes("inline") || className.includes("block") || className.includes("flex");
|
|
88
93
|
const baseDisplayClass = hasDisplayOverride ? "" : "inline-flex";
|
|
89
|
-
|
|
94
|
+
const isDisabled = disabled || loading;
|
|
95
|
+
const combinedClassName = `${baseDisplayClass} items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${isDisabled && (to || href) ? "pointer-events-none opacity-50" : ""} ${className}`;
|
|
96
|
+
const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
97
|
+
showLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center mr-2", children: cloneIcon() }),
|
|
98
|
+
isIconOnly ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center", children: displayIcon }) : /* @__PURE__ */ jsx("span", { className: "inline-flex flex-1 justify-center text-center", children }),
|
|
99
|
+
showRightIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center ml-2", children: cloneIcon() })
|
|
100
|
+
] });
|
|
101
|
+
const sharedLinkProps = {
|
|
102
|
+
"aria-label": ariaLabel,
|
|
103
|
+
"aria-expanded": ariaExpanded,
|
|
104
|
+
"aria-haspopup": ariaHaspopup,
|
|
105
|
+
"aria-controls": ariaControls,
|
|
106
|
+
"aria-disabled": isDisabled || void 0,
|
|
107
|
+
tabIndex: isDisabled ? -1 : void 0,
|
|
108
|
+
target,
|
|
109
|
+
rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
|
|
110
|
+
className: combinedClassName,
|
|
111
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
112
|
+
onClick,
|
|
113
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
114
|
+
onMouseEnter,
|
|
115
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
116
|
+
onMouseLeave,
|
|
117
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
118
|
+
onMouseDown,
|
|
119
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
120
|
+
onBlur
|
|
121
|
+
};
|
|
122
|
+
if (to) {
|
|
123
|
+
return /* @__PURE__ */ jsx(Link, { to, ref, ...sharedLinkProps, children: innerContent });
|
|
124
|
+
}
|
|
125
|
+
if (href) {
|
|
126
|
+
return /* @__PURE__ */ jsx("a", { href, ref, ...sharedLinkProps, children: innerContent });
|
|
127
|
+
}
|
|
128
|
+
return /* @__PURE__ */ jsx(
|
|
90
129
|
"button",
|
|
91
130
|
{
|
|
92
131
|
ref,
|
|
@@ -100,13 +139,9 @@ const Button = React.forwardRef(
|
|
|
100
139
|
"aria-expanded": ariaExpanded,
|
|
101
140
|
"aria-haspopup": ariaHaspopup,
|
|
102
141
|
"aria-controls": ariaControls,
|
|
103
|
-
disabled:
|
|
104
|
-
className:
|
|
105
|
-
children:
|
|
106
|
-
showLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center mr-2", children: cloneIcon() }),
|
|
107
|
-
isIconOnly ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center", children: displayIcon }) : /* @__PURE__ */ jsx("span", { className: "inline-flex flex-1 justify-center text-center", children }),
|
|
108
|
-
showRightIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center ml-2", children: cloneIcon() })
|
|
109
|
-
]
|
|
142
|
+
disabled: isDisabled,
|
|
143
|
+
className: combinedClassName,
|
|
144
|
+
children: innerContent
|
|
110
145
|
}
|
|
111
146
|
);
|
|
112
147
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/forms/button/button.tsx"],"sourcesContent":["import React from 'react';\n\nimport { interactiveSizes, InteractiveSize, InputWidth, inputWidthSizes } from '../../../theme/size-tokens';\nimport { Alignment, colorVariants, inputAlignClasses, ColorVariant } from '../../../theme/tokens';\n\nexport type ButtonProps = {\n /** Button label content - text, icons, or other elements */\n children?: React.ReactNode;\n /** Click event handler */\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Mouse enter event handler */\n onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Mouse leave event handler */\n onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Mouse down event handler */\n onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Blur event handler */\n onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;\n /** Accessible label for icon-only buttons (required when no children) */\n ariaLabel?: string;\n /** Disables button interaction and applies disabled styling */\n disabled?: boolean;\n /** HTML button type attribute */\n type?: 'button' | 'submit' | 'reset';\n /** Additional CSS classes applied to the button */\n className?: string;\n /** Icon element to display alongside button text */\n icon?: React.ReactNode;\n /** Position of the icon relative to button text */\n iconPosition?: 'left' | 'right';\n /** Color variant affecting button appearance */\n variant?: ColorVariant;\n /** Visual style modifier - solid (filled), outline (bordered), ghost (transparent), link (text-only), or soft (subtle background) */\n style?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';\n /** Size variant - uses unified size system (xs, sm, md, lg, xl) */\n size?: InteractiveSize;\n /** Border radius style - default (rounded), pill (fully rounded), square (sharp corners), circle (for icon-only buttons) */\n rounded?: 'default' | 'pill' | 'square' | 'circle';\n /** Shows loading spinner and disables interaction */\n loading?: boolean;\n /** Width of the button */\n width?: InputWidth;\n /** When true, button spans full width of container (same as width=\"full\") */\n fullWidth?: boolean;\n /** When true, button uses wider min-width (good for prominent actions) */\n wide?: boolean;\n /** Aligns the button within its container: left, center, or right */\n align?: Alignment;\n /** Applies active/pressed state styling */\n active?: boolean;\n /** ARIA expanded state - indicates if controlled element is expanded */\n 'aria-expanded'?: boolean;\n /** ARIA haspopup - indicates element has popup menu/dialog */\n 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n /** ARIA controls - ID of element controlled by this button */\n 'aria-controls'?: string;\n};\n\n/**\n * Accessible Button component\n * - Color variants: neutral, primary, accent, info, success, warning, error\n * - Style modifiers: solid (default), outline, ghost, link, soft\n * - Sizes: xs, sm, md (default), lg, xl\n * - Supports icons with flexible positioning (left/right)\n * - Icon-only buttons require `ariaLabel` for accessibility\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n onBlur,\n ariaLabel,\n disabled = false,\n type = 'button',\n className = '',\n icon,\n iconPosition = 'left',\n variant = 'neutral',\n style = 'solid',\n size = 'md',\n rounded = 'default',\n loading = false,\n width = 'auto',\n fullWidth = false,\n wide = false,\n align,\n active = false,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHaspopup,\n 'aria-controls': ariaControls\n },\n ref\n ) => {\n const isIconOnly = icon && !children;\n\n // Icon-only buttons MUST have an aria-label for accessibility\n if (isIconOnly && !ariaLabel) {\n // eslint-disable-next-line no-console\n console.warn('Button: Icon-only buttons require an ariaLabel for accessibility');\n }\n\n // Style modifiers\n const getStyleClasses = () => {\n const variantKey = variant as keyof typeof colorVariants.solid;\n\n switch (style) {\n case 'outline':\n return `${colorVariants.outline[variantKey]}`;\n case 'ghost':\n return colorVariants.ghost[variantKey];\n case 'link':\n return colorVariants.link[variantKey];\n case 'soft':\n return colorVariants.soft[variantKey];\n case 'solid':\n default:\n return `${colorVariants.solid[variantKey]} shadow-sm hover:shadow-md`;\n }\n };\n\n // Sizes - from unified size system\n const sizeConfig = interactiveSizes[size];\n const sizeClasses = `${sizeConfig.height} ${sizeConfig.padding} ${sizeConfig.text}`;\n\n const roundedClasses = {\n default: 'rounded-md',\n pill: 'rounded-full',\n square: 'rounded-none aspect-square',\n circle: 'rounded-full aspect-square'\n };\n\n // Show loading spinner or icon\n const displayIcon = loading ? (\n <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n ) : (\n icon\n );\n\n const styleClasses = getStyleClasses();\n const effectiveWidth = fullWidth ? 'full' : wide ? 'xl' : width;\n const widthClasses = inputWidthSizes[effectiveWidth];\n const alignmentClass = align ? inputAlignClasses[align] : '';\n const activeClasses = active ? 'active:scale-95' : '';\n\n const shouldRenderIconSlots = !isIconOnly && Boolean(displayIcon);\n const cloneIcon = () => {\n if (!displayIcon) return null;\n if (React.isValidElement(displayIcon)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return React.cloneElement(displayIcon as React.ReactElement<any>, { 'aria-hidden': false });\n }\n return displayIcon;\n };\n\n const showLeftIcon = shouldRenderIconSlots && iconPosition === 'left';\n const showRightIcon = shouldRenderIconSlots && iconPosition === 'right';\n\n // Check if className contains display utilities to avoid conflicts\n const hasDisplayOverride =\n className.includes('hidden') ||\n className.includes('inline') ||\n className.includes('block') ||\n className.includes('flex');\n const baseDisplayClass = hasDisplayOverride ? '' : 'inline-flex';\n\n return (\n <button\n ref={ref}\n type={type}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseDown={onMouseDown}\n onBlur={onBlur}\n aria-label={ariaLabel}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHaspopup}\n aria-controls={ariaControls}\n disabled={disabled || loading}\n className={`${baseDisplayClass} items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${\n isIconOnly ? 'p-0' : ''\n } ${widthClasses} ${activeClasses} ${className}`}\n >\n {showLeftIcon && <span className=\"flex shrink-0 items-center mr-2\">{cloneIcon()}</span>}\n {isIconOnly ? (\n <span className=\"inline-flex items-center justify-center\">{displayIcon}</span>\n ) : (\n <span className=\"inline-flex flex-1 justify-center text-center\">{children}</span>\n )}\n {showRightIcon && <span className=\"flex shrink-0 items-center ml-2\">{cloneIcon()}</span>}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/forms/button/button.tsx"],"sourcesContent":["import React from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { interactiveSizes, InteractiveSize, InputWidth, inputWidthSizes } from '../../../theme/size-tokens';\nimport { Alignment, colorVariants, inputAlignClasses, ColorVariant } from '../../../theme/tokens';\n\nexport type ButtonProps = {\n /** Button label content - text, icons, or other elements */\n children?: React.ReactNode;\n /** Click event handler */\n onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Mouse enter event handler */\n onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Mouse leave event handler */\n onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Mouse down event handler */\n onMouseDown?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Blur event handler */\n onBlur?: (e: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Accessible label for icon-only buttons (required when no children) */\n ariaLabel?: string;\n /** Disables button interaction and applies disabled styling */\n disabled?: boolean;\n /** HTML button type attribute (ignored when `to` or `href` is set) */\n type?: 'button' | 'submit' | 'reset';\n /** Additional CSS classes applied to the button */\n className?: string;\n /** Icon element to display alongside button text */\n icon?: React.ReactNode;\n /** Position of the icon relative to button text */\n iconPosition?: 'left' | 'right';\n /** Color variant affecting button appearance */\n variant?: ColorVariant;\n /** Visual style modifier - solid (filled), outline (bordered), ghost (transparent), link (text-only), or soft (subtle background) */\n style?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';\n /** Size variant - uses unified size system (xs, sm, md, lg, xl) */\n size?: InteractiveSize;\n /** Border radius style - default (rounded), pill (fully rounded), square (sharp corners), circle (for icon-only buttons) */\n rounded?: 'default' | 'pill' | 'square' | 'circle';\n /** Shows loading spinner and disables interaction */\n loading?: boolean;\n /** Width of the button */\n width?: InputWidth;\n /** When true, button spans full width of container (same as width=\"full\") */\n fullWidth?: boolean;\n /** When true, button uses wider min-width (good for prominent actions) */\n wide?: boolean;\n /** Aligns the button within its container: left, center, or right */\n align?: Alignment;\n /** Applies active/pressed state styling */\n active?: boolean;\n /** ARIA expanded state - indicates if controlled element is expanded */\n 'aria-expanded'?: boolean;\n /** ARIA haspopup - indicates element has popup menu/dialog */\n 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n /** ARIA controls - ID of element controlled by this button */\n 'aria-controls'?: string;\n /**\n * React Router path. When provided the component renders as a `<Link>` (anchor tag)\n * instead of a `<button>`, giving you router-aware navigation with full button styling.\n */\n to?: string;\n /**\n * Plain URL. When provided (and `to` is not set) the component renders as an `<a>` tag.\n * Use `to` instead when navigating within the app so React Router manages the history.\n */\n href?: string;\n /** Link target attribute (`_blank`, `_self`, etc.) – only used when `to` or `href` is set */\n target?: React.HTMLAttributeAnchorTarget;\n /** Rel attribute for the anchor – defaults to `\"noreferrer noopener\"` when `target=\"_blank\"` */\n rel?: string;\n};\n\n/**\n * Accessible Button component\n * - Color variants: neutral, primary, accent, info, success, warning, error\n * - Style modifiers: solid (default), outline, ghost, link, soft\n * - Sizes: xs, sm, md (default), lg, xl\n * - Supports icons with flexible positioning (left/right)\n * - Icon-only buttons require `ariaLabel` for accessibility\n * - Pass `to` to render as a React Router `<Link>`, or `href` for a plain `<a>`, keeping full button styling\n */\nconst Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n (\n {\n children,\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseDown,\n onBlur,\n ariaLabel,\n disabled = false,\n type = 'button',\n className = '',\n icon,\n iconPosition = 'left',\n variant = 'neutral',\n style = 'solid',\n size = 'md',\n rounded = 'default',\n loading = false,\n width = 'auto',\n fullWidth = false,\n wide = false,\n align,\n active = false,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHaspopup,\n 'aria-controls': ariaControls,\n to,\n href,\n target,\n rel\n },\n ref\n ) => {\n const isIconOnly = icon && !children;\n\n // Icon-only buttons MUST have an aria-label for accessibility\n if (isIconOnly && !ariaLabel) {\n // eslint-disable-next-line no-console\n console.warn('Button: Icon-only buttons require an ariaLabel for accessibility');\n }\n\n // Style modifiers\n const getStyleClasses = () => {\n const variantKey = variant as keyof typeof colorVariants.solid;\n\n switch (style) {\n case 'outline':\n return `${colorVariants.outline[variantKey]}`;\n case 'ghost':\n return colorVariants.ghost[variantKey];\n case 'link':\n return colorVariants.link[variantKey];\n case 'soft':\n return colorVariants.soft[variantKey];\n case 'solid':\n default:\n return `${colorVariants.solid[variantKey]} shadow-sm hover:shadow-md`;\n }\n };\n\n // Sizes - from unified size system\n const sizeConfig = interactiveSizes[size];\n const sizeClasses = `${sizeConfig.height} ${sizeConfig.padding} ${sizeConfig.text}`;\n\n const roundedClasses = {\n default: 'rounded-md',\n pill: 'rounded-full',\n square: 'rounded-none aspect-square',\n circle: 'rounded-full aspect-square'\n };\n\n // Show loading spinner or icon\n const displayIcon = loading ? (\n <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n ) : (\n icon\n );\n\n const styleClasses = getStyleClasses();\n const effectiveWidth = fullWidth ? 'full' : wide ? 'xl' : width;\n const widthClasses = inputWidthSizes[effectiveWidth];\n const alignmentClass = align ? inputAlignClasses[align] : '';\n const activeClasses = active ? 'active:scale-95' : '';\n\n const shouldRenderIconSlots = !isIconOnly && Boolean(displayIcon);\n const cloneIcon = () => {\n if (!displayIcon) return null;\n if (React.isValidElement(displayIcon)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return React.cloneElement(displayIcon as React.ReactElement<any>, { 'aria-hidden': false });\n }\n return displayIcon;\n };\n\n const showLeftIcon = shouldRenderIconSlots && iconPosition === 'left';\n const showRightIcon = shouldRenderIconSlots && iconPosition === 'right';\n\n // Check if className contains display utilities to avoid conflicts\n const hasDisplayOverride =\n className.includes('hidden') ||\n className.includes('inline') ||\n className.includes('block') ||\n className.includes('flex');\n const baseDisplayClass = hasDisplayOverride ? '' : 'inline-flex';\n\n const isDisabled = disabled || loading;\n\n const combinedClassName = `${baseDisplayClass} items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${\n isIconOnly ? 'p-0' : ''\n } ${widthClasses} ${activeClasses} ${isDisabled && (to || href) ? 'pointer-events-none opacity-50' : ''} ${className}`;\n\n const innerContent = (\n <>\n {showLeftIcon && <span className=\"flex shrink-0 items-center mr-2\">{cloneIcon()}</span>}\n {isIconOnly ? (\n <span className=\"inline-flex items-center justify-center\">{displayIcon}</span>\n ) : (\n <span className=\"inline-flex flex-1 justify-center text-center\">{children}</span>\n )}\n {showRightIcon && <span className=\"flex shrink-0 items-center ml-2\">{cloneIcon()}</span>}\n </>\n );\n\n const sharedLinkProps = {\n 'aria-label': ariaLabel,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHaspopup,\n 'aria-controls': ariaControls,\n 'aria-disabled': isDisabled || undefined,\n tabIndex: isDisabled ? -1 : undefined,\n target,\n rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined),\n className: combinedClassName,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick: onClick as any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onMouseEnter: onMouseEnter as any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onMouseLeave: onMouseLeave as any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onMouseDown: onMouseDown as any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onBlur: onBlur as any\n };\n\n if (to) {\n return (\n <Link to={to} ref={ref as React.Ref<HTMLAnchorElement>} {...sharedLinkProps}>\n {innerContent}\n </Link>\n );\n }\n\n if (href) {\n return (\n <a href={href} ref={ref as React.Ref<HTMLAnchorElement>} {...sharedLinkProps}>\n {innerContent}\n </a>\n );\n }\n\n return (\n <button\n ref={ref as React.Ref<HTMLButtonElement>}\n type={type}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseDown={onMouseDown}\n onBlur={onBlur}\n aria-label={ariaLabel}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHaspopup}\n aria-controls={ariaControls}\n disabled={isDisabled}\n className={combinedClassName}\n >\n {innerContent}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":[],"mappings":"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"}
|