@pk-design/react-tailwind 1.13.1 → 1.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/components/Button/Button.js +34 -14
  2. package/dist/cjs/components/Button/Button.js.map +1 -1
  3. package/dist/es/components/Button/Button.js +34 -14
  4. package/dist/es/components/Button/Button.js.map +1 -1
  5. package/dist/react-tailwind.cjs.js +34 -14
  6. package/dist/react-tailwind.cjs.js.map +1 -1
  7. package/dist/react-tailwind.es.js +34 -14
  8. package/dist/react-tailwind.es.js.map +1 -1
  9. package/package.json +1 -1
package/dist/cjs/components/Button/Button.js CHANGED
@@ -24,27 +24,36 @@ const THEMED_BTN_CLASS = {
24
24
  plain: 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',
25
25
  },
26
26
  secondary: {
27
- default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',
28
- outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
27
+ default: 'text-gray-800 bg-gray-200 hover:bg-gray-300 active:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
28
+ outlined: 'text-gray-800 bg-white border border-gray-300 shadow-xs hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:bg-transparent dark:border-gray-600 dark:shadow-none dark:hover:bg-white/10 dark:active:bg-white/15 focus-visible:outline-[var(--ui-focus-ring)]',
29
29
  plain: 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',
30
30
  },
31
31
  success: {
32
- default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',
33
- outlined: 'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
32
+ default: 'text-white bg-emerald-700 hover:bg-emerald-800 focus-visible:outline-emerald-500',
33
+ outlined: 'text-emerald-700 hover:text-white border border-emerald-700 hover:bg-emerald-700 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
34
34
  plain: 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',
35
35
  },
36
36
  warning: {
37
- default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',
38
- outlined: 'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
37
+ default: 'text-gray-900 bg-amber-500 hover:bg-amber-400 focus-visible:outline-amber-500',
38
+ outlined: 'text-amber-700 hover:text-gray-900 border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
39
39
  plain: 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',
40
40
  },
41
41
  };
42
42
  const SIZE_CLASSES = {
43
- xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },
44
- sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },
45
- md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },
43
+ xs: {
44
+ normal: 'min-h-7 px-2.5 py-1 rounded-sm gap-1 text-xs',
45
+ iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs',
46
+ },
47
+ sm: {
48
+ normal: 'min-h-8 px-3 py-1 rounded gap-1.5 text-sm',
49
+ iconOnly: 'h-8 w-8 p-1.5 rounded text-sm',
50
+ },
51
+ md: {
52
+ normal: 'min-h-9 px-4 py-1.5 rounded-md gap-2 text-sm',
53
+ iconOnly: 'h-9 w-9 p-2 rounded-md text-sm',
54
+ },
46
55
  lg: {
47
- normal: 'h-10 px-5 rounded-lg gap-2 text-base',
56
+ normal: 'min-h-10 px-5 py-2 rounded-lg gap-2 text-base',
48
57
  iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',
49
58
  },
50
59
  };
@@ -59,12 +68,18 @@ const LOADER_SIZE = {
59
68
  *
60
69
  * Disabled styling is keyed off both the native `disabled` attribute and
61
70
  * `aria-disabled`, so non-button elements rendered via `as` look disabled too.
71
+ *
72
+ * On touch screens an invisible layer makes the tappable area at least 44px,
73
+ * whatever the button's size, without changing how it looks.
62
74
  */
63
- const BASE_BTN_CLASS = 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +
75
+ const BASE_BTN_CLASS = 'relative font-medium inline-flex items-center justify-center text-center shrink-0 cursor-pointer select-none ' +
64
76
  'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +
65
77
  'active:scale-[0.98] focus:outline-none ' +
66
78
  'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +
67
- 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none';
79
+ 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none ' +
80
+ 'pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 ' +
81
+ 'pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 ' +
82
+ 'pointer-coarse:after:w-full pointer-coarse:after:min-w-11 pointer-coarse:after:h-full pointer-coarse:after:min-h-11';
68
83
  const Button = React.forwardRef(({ as, type, ...props }, ref) => {
69
84
  const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, active, onClick, ...restProps } = props;
70
85
  const Component = as || 'button';
@@ -116,7 +131,10 @@ const Button = React.forwardRef(({ as, type, ...props }, ref) => {
116
131
  const elementProps = isNativeButton
117
132
  ? {
118
133
  type: type !== null && type !== void 0 ? type : 'button',
119
- disabled: resolvedDisabled,
134
+ // Not `disabled` while loading: that would drop keyboard focus from the
135
+ // button just pressed. handleClick ignores presses until it's done.
136
+ disabled: Boolean(disabled),
137
+ 'aria-disabled': loading && !disabled ? true : undefined,
120
138
  role,
121
139
  tabIndex,
122
140
  onClick: handleClick,
@@ -146,7 +164,9 @@ const Button = React.forwardRef(({ as, type, ...props }, ref) => {
146
164
  return buildClassname.buildClassName(BASE_BTN_CLASS, ((_a = THEMED_BTN_CLASS[theme]) === null || _a === void 0 ? void 0 : _a[variant]) || THEMED_BTN_CLASS.primary.default, iconOnly ? sizeObj.iconOnly : sizeObj.normal,
147
165
  // An outline (not a ring) so the offset gap stays transparent on any surface/mode.
148
166
  !noOutlineOnFocus &&
149
- 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
167
+ 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full',
168
+ // Secondary default is a flat grey fill; a shadow would bring back the outlined look.
169
+ variant === 'default' && theme !== 'secondary' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
150
170
  }, [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className]);
151
171
  // The spinner and loading text inherit the button's text colour.
152
172
  const loaderIcon = (jsxRuntime.jsx(index.Loader, { "data-testid": "btn-loader-icon", size: LOADER_SIZE[size] || 'xs', className: "text-current" }));
package/dist/cjs/components/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n *\n * Only colours live here. Focus outline width/offset and disabled styling are\n * applied uniformly in the component so they can be toggled in one place.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n primary: {\n default:\n 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:outline-[var(--ui-primary-ring)]',\n outlined:\n 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary-ring)]',\n plain:\n 'text-[var(--ui-primary-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-primary-ring)]',\n },\n danger: {\n default:\n 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:outline-[var(--ui-danger-ring)]',\n outlined:\n 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:outline-[var(--ui-danger-ring)]',\n plain:\n 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',\n },\n secondary: {\n default:\n 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',\n outlined:\n 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',\n plain:\n 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',\n },\n success: {\n default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',\n outlined:\n 'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',\n plain:\n 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',\n },\n warning: {\n default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',\n outlined:\n 'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',\n plain:\n 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',\n },\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, { normal: string; iconOnly: string }> = {\n xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },\n sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },\n md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },\n lg: {\n normal: 'h-10 px-5 rounded-lg gap-2 text-base',\n iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',\n },\n}\n\nconst LOADER_SIZE: Record<ButtonSize, 'xs' | 'sm'> = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n lg: 'sm',\n}\n\n/**\n * Base shared tailwind classes.\n *\n * Disabled styling is keyed off both the native `disabled` attribute and\n * `aria-disabled`, so non-button elements rendered via `as` look disabled too.\n */\nconst BASE_BTN_CLASS =\n 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +\n 'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +\n 'active:scale-[0.98] focus:outline-none ' +\n 'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none'\n\nexport const Button = forwardRef(\n <C extends ElementType = 'button'>(\n { as, type, ...props }: ButtonProps<C>,\n ref: PolymorphicRef<C>,\n ) => {\n const {\n className = '',\n children,\n theme = 'primary',\n variant = 'default',\n size = 'md',\n leftIcon,\n rightIcon,\n fullWidth = false,\n loading = false,\n loadingText = '',\n rounded = false,\n disabled,\n iconOnly = false,\n noOutlineOnFocus = false,\n active,\n onClick,\n ...restProps\n } = props\n\n const Component = as || 'button'\n const isNativeButton = Component === 'button'\n\n // Clean invalid props when not rendering a real button\n const {\n type: _ignoreType,\n disabled: _ignoreDisabled,\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n ...domProps\n } = restProps as Record<string, any>\n\n const ariaLabel = domProps['aria-label']\n const ariaLabelledBy = domProps['aria-labelledby']\n\n // Accessibility guard for icon-only buttons\n useEffect(() => {\n if (iconOnly && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n '[ui] <Button iconOnly> requires aria-label or aria-labelledby for accessibility.',\n )\n }\n }, [iconOnly, ariaLabel, ariaLabelledBy])\n\n const resolvedDisabled = Boolean(disabled || loading)\n\n // Links (`href`, or `to` for router Link components) keep their native semantics.\n const isLink = !isNativeButton && (domProps.href != null || domProps.to != null)\n\n const handleClick = (e: React.MouseEvent<any>) => {\n if (resolvedDisabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n onClick?.(e)\n }\n\n // Mirror native <button> keyboard activation for non-button elements:\n // Enter activates on keydown, Space on keyup (and must not scroll the page).\n const handleKeyDown = (e: React.KeyboardEvent<any>) => {\n onKeyDown?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === 'Enter') {\n e.preventDefault()\n e.currentTarget.click()\n } else if (e.key === ' ') {\n e.preventDefault()\n }\n }\n\n const handleKeyUp = (e: React.KeyboardEvent<any>) => {\n onKeyUp?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === ' ') {\n e.preventDefault()\n e.currentTarget.click()\n }\n }\n\n const elementProps = isNativeButton\n ? {\n type: type ?? 'button',\n disabled: resolvedDisabled,\n role,\n tabIndex,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : isLink\n ? {\n role,\n tabIndex: resolvedDisabled ? -1 : tabIndex,\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : {\n role: role ?? 'button',\n tabIndex: resolvedDisabled ? -1 : (tabIndex ?? 0),\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n }\n\n const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md\n\n const classes = useMemo(\n () =>\n buildClassName(\n BASE_BTN_CLASS,\n THEMED_BTN_CLASS[theme]?.[variant] || THEMED_BTN_CLASS.primary.default,\n iconOnly ? sizeObj.iconOnly : sizeObj.normal,\n // An outline (not a ring) so the offset gap stays transparent on any surface/mode.\n !noOutlineOnFocus &&\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid',\n rounded && 'rounded-full',\n fullWidth && 'w-full',\n variant === 'default' && 'shadow-xs hover:shadow-none',\n active && 'ring-2 ring-current',\n className,\n ),\n [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className],\n )\n\n // The spinner and loading text inherit the button's text colour.\n const loaderIcon = (\n <Loader\n data-testid=\"btn-loader-icon\"\n size={LOADER_SIZE[size] || 'xs'}\n className=\"text-current\"\n />\n )\n\n /**\n * SPECIAL CASE: iconOnly + loading → show spinner only\n */\n if (loading && iconOnly) {\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy=\"true\"\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loaderIcon}\n </Component>\n )\n }\n\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy={loading ? 'true' : undefined}\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loading ? (\n <span className=\"inline-flex items-center gap-2\" aria-live=\"polite\">\n {loaderIcon}\n {loadingText ? (\n <TextContent className=\"text-current\">{loadingText}</TextContent>\n ) : (\n children\n )}\n </span>\n ) : (\n <>\n {leftIcon && <span className=\"shrink-0 inline-flex items-center\">{leftIcon}</span>}\n {children}\n {rightIcon && <span className=\"shrink-0 inline-flex items-center\">{rightIcon}</span>}\n </>\n )}\n </Component>\n )\n },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["forwardRef","useEffect","useMemo","buildClassName","_jsx","Loader","_jsxs","TextContent"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n *\n * Only colours live here. Focus outline width/offset and disabled styling are\n * applied uniformly in the component so they can be toggled in one place.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n primary: {\n default:\n 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:outline-[var(--ui-primary-ring)]',\n outlined:\n 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary-ring)]',\n plain:\n 'text-[var(--ui-primary-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-primary-ring)]',\n },\n danger: {\n default:\n 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:outline-[var(--ui-danger-ring)]',\n outlined:\n 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:outline-[var(--ui-danger-ring)]',\n plain:\n 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',\n },\n secondary: {\n default:\n 'text-gray-800 bg-gray-200 hover:bg-gray-300 active:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',\n outlined:\n 'text-gray-800 bg-white border border-gray-300 shadow-xs hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:bg-transparent dark:border-gray-600 dark:shadow-none dark:hover:bg-white/10 dark:active:bg-white/15 focus-visible:outline-[var(--ui-focus-ring)]',\n plain:\n 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',\n },\n success: {\n default: 'text-white bg-emerald-700 hover:bg-emerald-800 focus-visible:outline-emerald-500',\n outlined:\n 'text-emerald-700 hover:text-white border border-emerald-700 hover:bg-emerald-700 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',\n plain:\n 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',\n },\n warning: {\n default: 'text-gray-900 bg-amber-500 hover:bg-amber-400 focus-visible:outline-amber-500',\n outlined:\n 'text-amber-700 hover:text-gray-900 border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',\n plain:\n 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',\n },\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, { normal: string; iconOnly: string }> = {\n xs: {\n normal: 'min-h-7 px-2.5 py-1 rounded-sm gap-1 text-xs',\n iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs',\n },\n sm: {\n normal: 'min-h-8 px-3 py-1 rounded gap-1.5 text-sm',\n iconOnly: 'h-8 w-8 p-1.5 rounded text-sm',\n },\n md: {\n normal: 'min-h-9 px-4 py-1.5 rounded-md gap-2 text-sm',\n iconOnly: 'h-9 w-9 p-2 rounded-md text-sm',\n },\n lg: {\n normal: 'min-h-10 px-5 py-2 rounded-lg gap-2 text-base',\n iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',\n },\n}\n\nconst LOADER_SIZE: Record<ButtonSize, 'xs' | 'sm'> = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n lg: 'sm',\n}\n\n/**\n * Base shared tailwind classes.\n *\n * Disabled styling is keyed off both the native `disabled` attribute and\n * `aria-disabled`, so non-button elements rendered via `as` look disabled too.\n *\n * On touch screens an invisible layer makes the tappable area at least 44px,\n * whatever the button's size, without changing how it looks.\n */\nconst BASE_BTN_CLASS =\n 'relative font-medium inline-flex items-center justify-center text-center shrink-0 cursor-pointer select-none ' +\n 'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +\n 'active:scale-[0.98] focus:outline-none ' +\n 'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none ' +\n 'pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 ' +\n 'pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 ' +\n 'pointer-coarse:after:w-full pointer-coarse:after:min-w-11 pointer-coarse:after:h-full pointer-coarse:after:min-h-11'\n\nexport const Button = forwardRef(\n <C extends ElementType = 'button'>(\n { as, type, ...props }: ButtonProps<C>,\n ref: PolymorphicRef<C>,\n ) => {\n const {\n className = '',\n children,\n theme = 'primary',\n variant = 'default',\n size = 'md',\n leftIcon,\n rightIcon,\n fullWidth = false,\n loading = false,\n loadingText = '',\n rounded = false,\n disabled,\n iconOnly = false,\n noOutlineOnFocus = false,\n active,\n onClick,\n ...restProps\n } = props\n\n const Component = as || 'button'\n const isNativeButton = Component === 'button'\n\n // Clean invalid props when not rendering a real button\n const {\n type: _ignoreType,\n disabled: _ignoreDisabled,\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n ...domProps\n } = restProps as Record<string, any>\n\n const ariaLabel = domProps['aria-label']\n const ariaLabelledBy = domProps['aria-labelledby']\n\n // Accessibility guard for icon-only buttons\n useEffect(() => {\n if (iconOnly && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n '[ui] <Button iconOnly> requires aria-label or aria-labelledby for accessibility.',\n )\n }\n }, [iconOnly, ariaLabel, ariaLabelledBy])\n\n const resolvedDisabled = Boolean(disabled || loading)\n\n // Links (`href`, or `to` for router Link components) keep their native semantics.\n const isLink = !isNativeButton && (domProps.href != null || domProps.to != null)\n\n const handleClick = (e: React.MouseEvent<any>) => {\n if (resolvedDisabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n onClick?.(e)\n }\n\n // Mirror native <button> keyboard activation for non-button elements:\n // Enter activates on keydown, Space on keyup (and must not scroll the page).\n const handleKeyDown = (e: React.KeyboardEvent<any>) => {\n onKeyDown?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === 'Enter') {\n e.preventDefault()\n e.currentTarget.click()\n } else if (e.key === ' ') {\n e.preventDefault()\n }\n }\n\n const handleKeyUp = (e: React.KeyboardEvent<any>) => {\n onKeyUp?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === ' ') {\n e.preventDefault()\n e.currentTarget.click()\n }\n }\n\n const elementProps = isNativeButton\n ? {\n type: type ?? 'button',\n // Not `disabled` while loading: that would drop keyboard focus from the\n // button just pressed. handleClick ignores presses until it's done.\n disabled: Boolean(disabled),\n 'aria-disabled': loading && !disabled ? true : undefined,\n role,\n tabIndex,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : isLink\n ? {\n role,\n tabIndex: resolvedDisabled ? -1 : tabIndex,\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : {\n role: role ?? 'button',\n tabIndex: resolvedDisabled ? -1 : (tabIndex ?? 0),\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n }\n\n const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md\n\n const classes = useMemo(\n () =>\n buildClassName(\n BASE_BTN_CLASS,\n THEMED_BTN_CLASS[theme]?.[variant] || THEMED_BTN_CLASS.primary.default,\n iconOnly ? sizeObj.iconOnly : sizeObj.normal,\n // An outline (not a ring) so the offset gap stays transparent on any surface/mode.\n !noOutlineOnFocus &&\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid',\n rounded && 'rounded-full',\n fullWidth && 'w-full',\n // Secondary default is a flat grey fill; a shadow would bring back the outlined look.\n variant === 'default' && theme !== 'secondary' && 'shadow-xs hover:shadow-none',\n active && 'ring-2 ring-current',\n className,\n ),\n [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className],\n )\n\n // The spinner and loading text inherit the button's text colour.\n const loaderIcon = (\n <Loader\n data-testid=\"btn-loader-icon\"\n size={LOADER_SIZE[size] || 'xs'}\n className=\"text-current\"\n />\n )\n\n /**\n * SPECIAL CASE: iconOnly + loading → show spinner only\n */\n if (loading && iconOnly) {\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy=\"true\"\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loaderIcon}\n </Component>\n )\n }\n\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy={loading ? 'true' : undefined}\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loading ? (\n <span className=\"inline-flex items-center gap-2\" aria-live=\"polite\">\n {loaderIcon}\n {loadingText ? (\n <TextContent className=\"text-current\">{loadingText}</TextContent>\n ) : (\n children\n )}\n </span>\n ) : (\n <>\n {leftIcon && <span className=\"shrink-0 inline-flex items-center\">{leftIcon}</span>}\n {children}\n {rightIcon && <span className=\"shrink-0 inline-flex items-center\">{rightIcon}</span>}\n </>\n )}\n </Component>\n )\n },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["forwardRef","useEffect","useMemo","buildClassName","_jsx","Loader","_jsxs","TextContent"],"mappings":"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"}
package/dist/es/components/Button/Button.js CHANGED
@@ -22,27 +22,36 @@ const THEMED_BTN_CLASS = {
22
22
  plain: 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',
23
23
  },
24
24
  secondary: {
25
- default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',
26
- outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
25
+ default: 'text-gray-800 bg-gray-200 hover:bg-gray-300 active:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
26
+ outlined: 'text-gray-800 bg-white border border-gray-300 shadow-xs hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:bg-transparent dark:border-gray-600 dark:shadow-none dark:hover:bg-white/10 dark:active:bg-white/15 focus-visible:outline-[var(--ui-focus-ring)]',
27
27
  plain: 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',
28
28
  },
29
29
  success: {
30
- default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',
31
- outlined: 'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
30
+ default: 'text-white bg-emerald-700 hover:bg-emerald-800 focus-visible:outline-emerald-500',
31
+ outlined: 'text-emerald-700 hover:text-white border border-emerald-700 hover:bg-emerald-700 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
32
32
  plain: 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',
33
33
  },
34
34
  warning: {
35
- default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',
36
- outlined: 'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
35
+ default: 'text-gray-900 bg-amber-500 hover:bg-amber-400 focus-visible:outline-amber-500',
36
+ outlined: 'text-amber-700 hover:text-gray-900 border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
37
37
  plain: 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',
38
38
  },
39
39
  };
40
40
  const SIZE_CLASSES = {
41
- xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },
42
- sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },
43
- md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },
41
+ xs: {
42
+ normal: 'min-h-7 px-2.5 py-1 rounded-sm gap-1 text-xs',
43
+ iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs',
44
+ },
45
+ sm: {
46
+ normal: 'min-h-8 px-3 py-1 rounded gap-1.5 text-sm',
47
+ iconOnly: 'h-8 w-8 p-1.5 rounded text-sm',
48
+ },
49
+ md: {
50
+ normal: 'min-h-9 px-4 py-1.5 rounded-md gap-2 text-sm',
51
+ iconOnly: 'h-9 w-9 p-2 rounded-md text-sm',
52
+ },
44
53
  lg: {
45
- normal: 'h-10 px-5 rounded-lg gap-2 text-base',
54
+ normal: 'min-h-10 px-5 py-2 rounded-lg gap-2 text-base',
46
55
  iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',
47
56
  },
48
57
  };
@@ -57,12 +66,18 @@ const LOADER_SIZE = {
57
66
  *
58
67
  * Disabled styling is keyed off both the native `disabled` attribute and
59
68
  * `aria-disabled`, so non-button elements rendered via `as` look disabled too.
69
+ *
70
+ * On touch screens an invisible layer makes the tappable area at least 44px,
71
+ * whatever the button's size, without changing how it looks.
60
72
  */
61
- const BASE_BTN_CLASS = 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +
73
+ const BASE_BTN_CLASS = 'relative font-medium inline-flex items-center justify-center text-center shrink-0 cursor-pointer select-none ' +
62
74
  'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +
63
75
  'active:scale-[0.98] focus:outline-none ' +
64
76
  'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +
65
- 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none';
77
+ 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none ' +
78
+ 'pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 ' +
79
+ 'pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 ' +
80
+ 'pointer-coarse:after:w-full pointer-coarse:after:min-w-11 pointer-coarse:after:h-full pointer-coarse:after:min-h-11';
66
81
  const Button = forwardRef(({ as, type, ...props }, ref) => {
67
82
  const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, active, onClick, ...restProps } = props;
68
83
  const Component = as || 'button';
@@ -114,7 +129,10 @@ const Button = forwardRef(({ as, type, ...props }, ref) => {
114
129
  const elementProps = isNativeButton
115
130
  ? {
116
131
  type: type !== null && type !== void 0 ? type : 'button',
117
- disabled: resolvedDisabled,
132
+ // Not `disabled` while loading: that would drop keyboard focus from the
133
+ // button just pressed. handleClick ignores presses until it's done.
134
+ disabled: Boolean(disabled),
135
+ 'aria-disabled': loading && !disabled ? true : undefined,
118
136
  role,
119
137
  tabIndex,
120
138
  onClick: handleClick,
@@ -144,7 +162,9 @@ const Button = forwardRef(({ as, type, ...props }, ref) => {
144
162
  return buildClassName(BASE_BTN_CLASS, ((_a = THEMED_BTN_CLASS[theme]) === null || _a === void 0 ? void 0 : _a[variant]) || THEMED_BTN_CLASS.primary.default, iconOnly ? sizeObj.iconOnly : sizeObj.normal,
145
163
  // An outline (not a ring) so the offset gap stays transparent on any surface/mode.
146
164
  !noOutlineOnFocus &&
147
- 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
165
+ 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full',
166
+ // Secondary default is a flat grey fill; a shadow would bring back the outlined look.
167
+ variant === 'default' && theme !== 'secondary' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
148
168
  }, [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className]);
149
169
  // The spinner and loading text inherit the button's text colour.
150
170
  const loaderIcon = (jsx(Loader, { "data-testid": "btn-loader-icon", size: LOADER_SIZE[size] || 'xs', className: "text-current" }));
package/dist/es/components/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n *\n * Only colours live here. Focus outline width/offset and disabled styling are\n * applied uniformly in the component so they can be toggled in one place.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n primary: {\n default:\n 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:outline-[var(--ui-primary-ring)]',\n outlined:\n 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary-ring)]',\n plain:\n 'text-[var(--ui-primary-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-primary-ring)]',\n },\n danger: {\n default:\n 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:outline-[var(--ui-danger-ring)]',\n outlined:\n 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:outline-[var(--ui-danger-ring)]',\n plain:\n 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',\n },\n secondary: {\n default:\n 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',\n outlined:\n 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',\n plain:\n 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',\n },\n success: {\n default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',\n outlined:\n 'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',\n plain:\n 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',\n },\n warning: {\n default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',\n outlined:\n 'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',\n plain:\n 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',\n },\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, { normal: string; iconOnly: string }> = {\n xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },\n sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },\n md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },\n lg: {\n normal: 'h-10 px-5 rounded-lg gap-2 text-base',\n iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',\n },\n}\n\nconst LOADER_SIZE: Record<ButtonSize, 'xs' | 'sm'> = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n lg: 'sm',\n}\n\n/**\n * Base shared tailwind classes.\n *\n * Disabled styling is keyed off both the native `disabled` attribute and\n * `aria-disabled`, so non-button elements rendered via `as` look disabled too.\n */\nconst BASE_BTN_CLASS =\n 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +\n 'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +\n 'active:scale-[0.98] focus:outline-none ' +\n 'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none'\n\nexport const Button = forwardRef(\n <C extends ElementType = 'button'>(\n { as, type, ...props }: ButtonProps<C>,\n ref: PolymorphicRef<C>,\n ) => {\n const {\n className = '',\n children,\n theme = 'primary',\n variant = 'default',\n size = 'md',\n leftIcon,\n rightIcon,\n fullWidth = false,\n loading = false,\n loadingText = '',\n rounded = false,\n disabled,\n iconOnly = false,\n noOutlineOnFocus = false,\n active,\n onClick,\n ...restProps\n } = props\n\n const Component = as || 'button'\n const isNativeButton = Component === 'button'\n\n // Clean invalid props when not rendering a real button\n const {\n type: _ignoreType,\n disabled: _ignoreDisabled,\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n ...domProps\n } = restProps as Record<string, any>\n\n const ariaLabel = domProps['aria-label']\n const ariaLabelledBy = domProps['aria-labelledby']\n\n // Accessibility guard for icon-only buttons\n useEffect(() => {\n if (iconOnly && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n '[ui] <Button iconOnly> requires aria-label or aria-labelledby for accessibility.',\n )\n }\n }, [iconOnly, ariaLabel, ariaLabelledBy])\n\n const resolvedDisabled = Boolean(disabled || loading)\n\n // Links (`href`, or `to` for router Link components) keep their native semantics.\n const isLink = !isNativeButton && (domProps.href != null || domProps.to != null)\n\n const handleClick = (e: React.MouseEvent<any>) => {\n if (resolvedDisabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n onClick?.(e)\n }\n\n // Mirror native <button> keyboard activation for non-button elements:\n // Enter activates on keydown, Space on keyup (and must not scroll the page).\n const handleKeyDown = (e: React.KeyboardEvent<any>) => {\n onKeyDown?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === 'Enter') {\n e.preventDefault()\n e.currentTarget.click()\n } else if (e.key === ' ') {\n e.preventDefault()\n }\n }\n\n const handleKeyUp = (e: React.KeyboardEvent<any>) => {\n onKeyUp?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === ' ') {\n e.preventDefault()\n e.currentTarget.click()\n }\n }\n\n const elementProps = isNativeButton\n ? {\n type: type ?? 'button',\n disabled: resolvedDisabled,\n role,\n tabIndex,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : isLink\n ? {\n role,\n tabIndex: resolvedDisabled ? -1 : tabIndex,\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : {\n role: role ?? 'button',\n tabIndex: resolvedDisabled ? -1 : (tabIndex ?? 0),\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n }\n\n const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md\n\n const classes = useMemo(\n () =>\n buildClassName(\n BASE_BTN_CLASS,\n THEMED_BTN_CLASS[theme]?.[variant] || THEMED_BTN_CLASS.primary.default,\n iconOnly ? sizeObj.iconOnly : sizeObj.normal,\n // An outline (not a ring) so the offset gap stays transparent on any surface/mode.\n !noOutlineOnFocus &&\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid',\n rounded && 'rounded-full',\n fullWidth && 'w-full',\n variant === 'default' && 'shadow-xs hover:shadow-none',\n active && 'ring-2 ring-current',\n className,\n ),\n [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className],\n )\n\n // The spinner and loading text inherit the button's text colour.\n const loaderIcon = (\n <Loader\n data-testid=\"btn-loader-icon\"\n size={LOADER_SIZE[size] || 'xs'}\n className=\"text-current\"\n />\n )\n\n /**\n * SPECIAL CASE: iconOnly + loading → show spinner only\n */\n if (loading && iconOnly) {\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy=\"true\"\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loaderIcon}\n </Component>\n )\n }\n\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy={loading ? 'true' : undefined}\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loading ? (\n <span className=\"inline-flex items-center gap-2\" aria-live=\"polite\">\n {loaderIcon}\n {loadingText ? (\n <TextContent className=\"text-current\">{loadingText}</TextContent>\n ) : (\n children\n )}\n </span>\n ) : (\n <>\n {leftIcon && <span className=\"shrink-0 inline-flex items-center\">{leftIcon}</span>}\n {children}\n {rightIcon && <span className=\"shrink-0 inline-flex items-center\">{rightIcon}</span>}\n </>\n )}\n </Component>\n )\n },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n *\n * Only colours live here. Focus outline width/offset and disabled styling are\n * applied uniformly in the component so they can be toggled in one place.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n primary: {\n default:\n 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:outline-[var(--ui-primary-ring)]',\n outlined:\n 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary-ring)]',\n plain:\n 'text-[var(--ui-primary-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-primary-ring)]',\n },\n danger: {\n default:\n 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:outline-[var(--ui-danger-ring)]',\n outlined:\n 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:outline-[var(--ui-danger-ring)]',\n plain:\n 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',\n },\n secondary: {\n default:\n 'text-gray-800 bg-gray-200 hover:bg-gray-300 active:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',\n outlined:\n 'text-gray-800 bg-white border border-gray-300 shadow-xs hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:bg-transparent dark:border-gray-600 dark:shadow-none dark:hover:bg-white/10 dark:active:bg-white/15 focus-visible:outline-[var(--ui-focus-ring)]',\n plain:\n 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',\n },\n success: {\n default: 'text-white bg-emerald-700 hover:bg-emerald-800 focus-visible:outline-emerald-500',\n outlined:\n 'text-emerald-700 hover:text-white border border-emerald-700 hover:bg-emerald-700 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',\n plain:\n 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',\n },\n warning: {\n default: 'text-gray-900 bg-amber-500 hover:bg-amber-400 focus-visible:outline-amber-500',\n outlined:\n 'text-amber-700 hover:text-gray-900 border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',\n plain:\n 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',\n },\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, { normal: string; iconOnly: string }> = {\n xs: {\n normal: 'min-h-7 px-2.5 py-1 rounded-sm gap-1 text-xs',\n iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs',\n },\n sm: {\n normal: 'min-h-8 px-3 py-1 rounded gap-1.5 text-sm',\n iconOnly: 'h-8 w-8 p-1.5 rounded text-sm',\n },\n md: {\n normal: 'min-h-9 px-4 py-1.5 rounded-md gap-2 text-sm',\n iconOnly: 'h-9 w-9 p-2 rounded-md text-sm',\n },\n lg: {\n normal: 'min-h-10 px-5 py-2 rounded-lg gap-2 text-base',\n iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',\n },\n}\n\nconst LOADER_SIZE: Record<ButtonSize, 'xs' | 'sm'> = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n lg: 'sm',\n}\n\n/**\n * Base shared tailwind classes.\n *\n * Disabled styling is keyed off both the native `disabled` attribute and\n * `aria-disabled`, so non-button elements rendered via `as` look disabled too.\n *\n * On touch screens an invisible layer makes the tappable area at least 44px,\n * whatever the button's size, without changing how it looks.\n */\nconst BASE_BTN_CLASS =\n 'relative font-medium inline-flex items-center justify-center text-center shrink-0 cursor-pointer select-none ' +\n 'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +\n 'active:scale-[0.98] focus:outline-none ' +\n 'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none ' +\n 'pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 ' +\n 'pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 ' +\n 'pointer-coarse:after:w-full pointer-coarse:after:min-w-11 pointer-coarse:after:h-full pointer-coarse:after:min-h-11'\n\nexport const Button = forwardRef(\n <C extends ElementType = 'button'>(\n { as, type, ...props }: ButtonProps<C>,\n ref: PolymorphicRef<C>,\n ) => {\n const {\n className = '',\n children,\n theme = 'primary',\n variant = 'default',\n size = 'md',\n leftIcon,\n rightIcon,\n fullWidth = false,\n loading = false,\n loadingText = '',\n rounded = false,\n disabled,\n iconOnly = false,\n noOutlineOnFocus = false,\n active,\n onClick,\n ...restProps\n } = props\n\n const Component = as || 'button'\n const isNativeButton = Component === 'button'\n\n // Clean invalid props when not rendering a real button\n const {\n type: _ignoreType,\n disabled: _ignoreDisabled,\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n ...domProps\n } = restProps as Record<string, any>\n\n const ariaLabel = domProps['aria-label']\n const ariaLabelledBy = domProps['aria-labelledby']\n\n // Accessibility guard for icon-only buttons\n useEffect(() => {\n if (iconOnly && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n '[ui] <Button iconOnly> requires aria-label or aria-labelledby for accessibility.',\n )\n }\n }, [iconOnly, ariaLabel, ariaLabelledBy])\n\n const resolvedDisabled = Boolean(disabled || loading)\n\n // Links (`href`, or `to` for router Link components) keep their native semantics.\n const isLink = !isNativeButton && (domProps.href != null || domProps.to != null)\n\n const handleClick = (e: React.MouseEvent<any>) => {\n if (resolvedDisabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n onClick?.(e)\n }\n\n // Mirror native <button> keyboard activation for non-button elements:\n // Enter activates on keydown, Space on keyup (and must not scroll the page).\n const handleKeyDown = (e: React.KeyboardEvent<any>) => {\n onKeyDown?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === 'Enter') {\n e.preventDefault()\n e.currentTarget.click()\n } else if (e.key === ' ') {\n e.preventDefault()\n }\n }\n\n const handleKeyUp = (e: React.KeyboardEvent<any>) => {\n onKeyUp?.(e)\n if (e.defaultPrevented || e.target !== e.currentTarget) return\n if (e.key === ' ') {\n e.preventDefault()\n e.currentTarget.click()\n }\n }\n\n const elementProps = isNativeButton\n ? {\n type: type ?? 'button',\n // Not `disabled` while loading: that would drop keyboard focus from the\n // button just pressed. handleClick ignores presses until it's done.\n disabled: Boolean(disabled),\n 'aria-disabled': loading && !disabled ? true : undefined,\n role,\n tabIndex,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : isLink\n ? {\n role,\n tabIndex: resolvedDisabled ? -1 : tabIndex,\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown,\n onKeyUp,\n }\n : {\n role: role ?? 'button',\n tabIndex: resolvedDisabled ? -1 : (tabIndex ?? 0),\n 'aria-disabled': resolvedDisabled ? true : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n }\n\n const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md\n\n const classes = useMemo(\n () =>\n buildClassName(\n BASE_BTN_CLASS,\n THEMED_BTN_CLASS[theme]?.[variant] || THEMED_BTN_CLASS.primary.default,\n iconOnly ? sizeObj.iconOnly : sizeObj.normal,\n // An outline (not a ring) so the offset gap stays transparent on any surface/mode.\n !noOutlineOnFocus &&\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid',\n rounded && 'rounded-full',\n fullWidth && 'w-full',\n // Secondary default is a flat grey fill; a shadow would bring back the outlined look.\n variant === 'default' && theme !== 'secondary' && 'shadow-xs hover:shadow-none',\n active && 'ring-2 ring-current',\n className,\n ),\n [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className],\n )\n\n // The spinner and loading text inherit the button's text colour.\n const loaderIcon = (\n <Loader\n data-testid=\"btn-loader-icon\"\n size={LOADER_SIZE[size] || 'xs'}\n className=\"text-current\"\n />\n )\n\n /**\n * SPECIAL CASE: iconOnly + loading → show spinner only\n */\n if (loading && iconOnly) {\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy=\"true\"\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loaderIcon}\n </Component>\n )\n }\n\n return (\n <Component\n ref={ref}\n className={classes}\n aria-busy={loading ? 'true' : undefined}\n aria-pressed={active !== undefined ? active : undefined}\n {...domProps}\n {...elementProps}\n >\n {loading ? (\n <span className=\"inline-flex items-center gap-2\" aria-live=\"polite\">\n {loaderIcon}\n {loadingText ? (\n <TextContent className=\"text-current\">{loadingText}</TextContent>\n ) : (\n children\n )}\n </span>\n ) : (\n <>\n {leftIcon && <span className=\"shrink-0 inline-flex items-center\">{leftIcon}</span>}\n {children}\n {rightIcon && <span className=\"shrink-0 inline-flex items-center\">{rightIcon}</span>}\n </>\n )}\n </Component>\n )\n },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/dist/react-tailwind.cjs.js CHANGED
@@ -167,27 +167,36 @@ const THEMED_BTN_CLASS = {
167
167
  plain: 'text-[var(--ui-danger-text)] hover:bg-current/10 active:bg-current/15 focus-visible:outline-[var(--ui-danger-ring)]',
168
168
  },
169
169
  secondary: {
170
- default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:outline-[var(--ui-focus-ring)]',
171
- outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
170
+ default: 'text-gray-800 bg-gray-200 hover:bg-gray-300 active:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-600 focus-visible:outline-[var(--ui-focus-ring)]',
171
+ outlined: 'text-gray-800 bg-white border border-gray-300 shadow-xs hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:bg-transparent dark:border-gray-600 dark:shadow-none dark:hover:bg-white/10 dark:active:bg-white/15 focus-visible:outline-[var(--ui-focus-ring)]',
172
172
  plain: 'text-gray-700 hover:bg-current/10 active:bg-current/15 dark:text-gray-200 focus-visible:outline-[var(--ui-focus-ring)]',
173
173
  },
174
174
  success: {
175
- default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:outline-emerald-500',
176
- outlined: 'text-emerald-700 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
175
+ default: 'text-white bg-emerald-700 hover:bg-emerald-800 focus-visible:outline-emerald-500',
176
+ outlined: 'text-emerald-700 hover:text-white border border-emerald-700 hover:bg-emerald-700 dark:text-emerald-400 dark:border-emerald-500 focus-visible:outline-emerald-500',
177
177
  plain: 'text-emerald-700 hover:bg-current/10 active:bg-current/15 dark:text-emerald-400 focus-visible:outline-emerald-500',
178
178
  },
179
179
  warning: {
180
- default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:outline-amber-500',
181
- outlined: 'text-amber-700 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
180
+ default: 'text-gray-900 bg-amber-500 hover:bg-amber-400 focus-visible:outline-amber-500',
181
+ outlined: 'text-amber-700 hover:text-gray-900 border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:outline-amber-500',
182
182
  plain: 'text-amber-700 hover:bg-current/10 active:bg-current/15 dark:text-amber-400 focus-visible:outline-amber-500',
183
183
  },
184
184
  };
185
185
  const SIZE_CLASSES = {
186
- xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },
187
- sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },
188
- md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },
186
+ xs: {
187
+ normal: 'min-h-7 px-2.5 py-1 rounded-sm gap-1 text-xs',
188
+ iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs',
189
+ },
190
+ sm: {
191
+ normal: 'min-h-8 px-3 py-1 rounded gap-1.5 text-sm',
192
+ iconOnly: 'h-8 w-8 p-1.5 rounded text-sm',
193
+ },
194
+ md: {
195
+ normal: 'min-h-9 px-4 py-1.5 rounded-md gap-2 text-sm',
196
+ iconOnly: 'h-9 w-9 p-2 rounded-md text-sm',
197
+ },
189
198
  lg: {
190
- normal: 'h-10 px-5 rounded-lg gap-2 text-base',
199
+ normal: 'min-h-10 px-5 py-2 rounded-lg gap-2 text-base',
191
200
  iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',
192
201
  },
193
202
  };
@@ -202,12 +211,18 @@ const LOADER_SIZE = {
202
211
  *
203
212
  * Disabled styling is keyed off both the native `disabled` attribute and
204
213
  * `aria-disabled`, so non-button elements rendered via `as` look disabled too.
214
+ *
215
+ * On touch screens an invisible layer makes the tappable area at least 44px,
216
+ * whatever the button's size, without changing how it looks.
205
217
  */
206
- const BASE_BTN_CLASS = 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +
218
+ const BASE_BTN_CLASS = 'relative font-medium inline-flex items-center justify-center text-center shrink-0 cursor-pointer select-none ' +
207
219
  'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out ' +
208
220
  'active:scale-[0.98] focus:outline-none ' +
209
221
  'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ' +
210
- 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none';
222
+ 'aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:shadow-none ' +
223
+ 'pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 ' +
224
+ 'pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 ' +
225
+ 'pointer-coarse:after:w-full pointer-coarse:after:min-w-11 pointer-coarse:after:h-full pointer-coarse:after:min-h-11';
211
226
  const Button = React.forwardRef(({ as, type, ...props }, ref) => {
212
227
  const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, active, onClick, ...restProps } = props;
213
228
  const Component = as || 'button';
@@ -259,7 +274,10 @@ const Button = React.forwardRef(({ as, type, ...props }, ref) => {
259
274
  const elementProps = isNativeButton
260
275
  ? {
261
276
  type: type !== null && type !== void 0 ? type : 'button',
262
- disabled: resolvedDisabled,
277
+ // Not `disabled` while loading: that would drop keyboard focus from the
278
+ // button just pressed. handleClick ignores presses until it's done.
279
+ disabled: Boolean(disabled),
280
+ 'aria-disabled': loading && !disabled ? true : undefined,
263
281
  role,
264
282
  tabIndex,
265
283
  onClick: handleClick,
@@ -289,7 +307,9 @@ const Button = React.forwardRef(({ as, type, ...props }, ref) => {
289
307
  return buildClassName(BASE_BTN_CLASS, ((_a = THEMED_BTN_CLASS[theme]) === null || _a === void 0 ? void 0 : _a[variant]) || THEMED_BTN_CLASS.primary.default, iconOnly ? sizeObj.iconOnly : sizeObj.normal,
290
308
  // An outline (not a ring) so the offset gap stays transparent on any surface/mode.
291
309
  !noOutlineOnFocus &&
292
- 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
310
+ 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid', rounded && 'rounded-full', fullWidth && 'w-full',
311
+ // Secondary default is a flat grey fill; a shadow would bring back the outlined look.
312
+ variant === 'default' && theme !== 'secondary' && 'shadow-xs hover:shadow-none', active && 'ring-2 ring-current', className);
293
313
  }, [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className]);
294
314
  // The spinner and loading text inherit the button's text colour.
295
315
  const loaderIcon = (jsxRuntime.jsx(Loader, { "data-testid": "btn-loader-icon", size: LOADER_SIZE[size] || 'xs', className: "text-current" }));