oneslash-design-system 1.5.0 → 1.7.0

package/README.md

@@ -1,3 +1,21 @@
+# oneslash-design-system
+
+React components and design tokens for oneSlash apps.
+
+## Using the design system in an app
+
+The package ships Tailwind class names, not compiled CSS, and its components are untranspiled `.jsx`. Each app compiles both itself:
+
+1. **Next.js:** add `transpilePackages: ["oneslash-design-system"]` to `next.config`.
+2. **Tailwind v3:** add `./node_modules/oneslash-design-system/dist/**/*.{js,jsx}` to `content`, and build `theme.extend.colors` and `fontSize` from `require("oneslash-design-system/tokens")`.
+3. **Tailwind v4:** add `@source "../node_modules/oneslash-design-system/dist/**/*.jsx";` to your CSS. For the tokens, point `@config` at a JS config that builds them from `oneslash-design-system/tokens` (see oneslash-homepage's `tailwind.config.ts`).
+
+Use class names that mean the same thing in Tailwind v3 and v4 inside components, since apps on both versions compile them.
+
+## Releasing
+
+Bump `version` in `package.json`, run `npm run build`, and merge to `main`. The Release workflow publishes to npm, creates the tag and GitHub Release with notes from the merged PR titles, and updates the docs site.
+
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started

package/dist/components/alert.jsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import IconButton from './iconButton';
 var bgClassMap = {
     error: 'bg-light-error-alertBg dark:bg-dark-error-alertBg',
@@ -8,26 +8,27 @@ var bgClassMap = {
     success: 'bg-light-success-alertBg dark:bg-dark-success-alertBg',
     default: 'bg-light-secondary-light dark:bg-dark-secondary-light',
 };
+var AUTO_DISMISS_MS = 5000;
+var EXIT_MS = 150;
+// Toasts pop in with a slight overshoot and leave quickly
+var motionClasses = {
+    enter: 'duration-[220ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]',
+    exit: 'duration-150 ease-in',
+};
 export default function Alert(_a) {
     var _b;
     var _c = _a.open, open = _c === void 0 ? true : _c, type = _a.type, message = _a.message, secondMessage = _a.secondMessage, onClose = _a.onClose, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'toast' : _e;
     var _f = useState(false), isVisible = _f[0], setIsVisible = _f[1];
     var _g = useState(false), shouldRender = _g[0], setShouldRender = _g[1];
+    // Auto-dismiss pauses while the toast is hovered or focused
+    var _h = useState(false), isPaused = _h[0], setIsPaused = _h[1];
+    var remainingMs = useRef(AUTO_DISMISS_MS);
     useEffect(function () {
         if (open) {
             setShouldRender(true);
+            remainingMs.current = AUTO_DISMISS_MS;
             // Small delay to trigger the animation
             var showTimer_1 = setTimeout(function () { return setIsVisible(true); }, 10);
-            // Only auto-dismiss if there's no close button
-            if (!showCloseButton) {
-                var dismissTimer_1 = setTimeout(function () {
-                    handleClose();
-                }, 5000);
-                return function () {
-                    clearTimeout(showTimer_1);
-                    clearTimeout(dismissTimer_1);
-                };
-            }
             return function () { return clearTimeout(showTimer_1); };
         }
         else if (shouldRender) {
@@ -35,30 +36,44 @@ export default function Alert(_a) {
             setIsVisible(false);
             var hideTimer_1 = setTimeout(function () {
                 setShouldRender(false);
-            }, 300);
+            }, EXIT_MS);
             return function () { return clearTimeout(hideTimer_1); };
         }
     }, [open, showCloseButton, shouldRender]);
+    // Only auto-dismiss if there's no close button
+    useEffect(function () {
+        if (!open || !shouldRender || showCloseButton || isPaused)
+            return;
+        var startedAt = Date.now();
+        var dismissTimer = setTimeout(function () { return handleClose(); }, remainingMs.current);
+        return function () {
+            clearTimeout(dismissTimer);
+            remainingMs.current -= Date.now() - startedAt;
+        };
+    }, [open, shouldRender, showCloseButton, isPaused]); // eslint-disable-line react-hooks/exhaustive-deps
     var handleClose = function () {
         setIsVisible(false);
         // Wait for animation to complete before unmounting
         setTimeout(function () {
             setShouldRender(false);
             onClose === null || onClose === void 0 ? void 0 : onClose();
-        }, 300);
+        }, EXIT_MS);
     };
     if (!shouldRender)
         return null;
     var bgClasses = (_b = bgClassMap[type]) !== null && _b !== void 0 ? _b : bgClassMap.default;
-    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none ".concat(bgClasses, " ").concat(isVisible ? 'opacity-100 translate-y-0 scale-100' : variant === 'toast' ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
+    var alertContent = (<div 
+    // Errors interrupt screen readers; everything else is announced politely
+    role={type === 'error' ? 'alert' : 'status'} onMouseEnter={function () { return setIsPaused(true); }} onMouseLeave={function () { return setIsPaused(false); }} onFocus={function () { return setIsPaused(true); }} onBlur={function () { return setIsPaused(false); }} className={"flex ".concat(secondMessage ? 'items-start' : 'items-center', " justify-between w-full p-2 rounded-[8px] transition-[opacity,transform] ").concat(isVisible ? motionClasses.enter : motionClasses.exit, " motion-reduce:transition-none ").concat(bgClasses, " ").concat(isVisible ? 'opacity-100 translate-y-0 scale-100' : variant === 'toast' ? 'opacity-0 -translate-y-2 scale-90' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
       <div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
-        <div className="flex flex-col text-left">
+        {/* With two lines, nudge the text so its first line centers on the close button */}
+        <div className={"flex flex-col text-left ".concat(secondMessage && showCloseButton ? 'pt-[3px]' : '')}>
           <span className="text-body2">{message}</span>
           {secondMessage && (<span className="text-body2 opacity-70">{secondMessage}</span>)}
         </div>
       </div>
       {showCloseButton && (<div className="ml-4">
-          <IconButton color="iconOnly" state="enabled" size="small" iconName="X" onClick={handleClose}/>
+          <IconButton color="iconOnly" state="enabled" size="small" iconName="X" ariaLabel="Dismiss" onClick={handleClose}/>
         </div>)}
     </div>);
     if (variant === 'inline') {

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ButtonProps {
-    size: 'small' | 'medium' | 'large';
+    size: 'tiny' | 'small' | 'medium' | 'large';
     type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
     color?: 'default' | 'danger';
     state: 'enabled' | 'hovered' | 'focused' | 'disabled' | 'selected';

package/dist/components/button.jsx

@@ -1,104 +1,24 @@
 'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
+import { focusRing, focusRingDanger, pressFeedback, stateTransition } from './sharedStyles';
 export default function Button(_a) {
-    var _this = this;
     var size = _a.size, type = _a.type, _b = _a.color, color = _b === void 0 ? 'default' : _b, state = _a.state, label = _a.label, secondLabel = _a.secondLabel, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, onClickButton = _a.onClickButton, onClickActionIcon = _a.onClickActionIcon, _c = _a.className, className = _c === void 0 ? '' : _c;
-    var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
-    var _e = useState(null), IconLeft = _e[0], setIconLeft = _e[1];
-    var _f = useState(null), IconRight = _f[0], setIconRight = _f[1];
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, Icon, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('lucide-react')];
-                case 2:
-                    module_1 = _a.sent();
-                    Icon = module_1[iconName];
-                    return [2 /*return*/, Icon || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    useEffect(function () {
-        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!decoIcon) return [3 /*break*/, 2];
-                        _a = setIconLeft;
-                        return [4 /*yield*/, loadIcon(decoIcon)];
-                    case 1:
-                        _a.apply(void 0, [_c.sent()]);
-                        _c.label = 2;
-                    case 2:
-                        if (!actionIcon) return [3 /*break*/, 4];
-                        _b = setIconRight;
-                        return [4 /*yield*/, loadIcon(actionIcon)];
-                    case 3:
-                        _b.apply(void 0, [_c.sent()]);
-                        _c.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcons();
-    }, [decoIcon, actionIcon, loadIcon]);
+    // Synchronous lookup so icons render on the first paint
+    var IconLeft = decoIcon ? LucideIcons[decoIcon] : null;
+    var IconRight = actionIcon ? LucideIcons[actionIcon] : null;
+    // Horizontal padding sits on the button so an icon and the label are inset equally
     var sizeClasses = {
-        large: 'text-body1 p-2',
-        medium: 'text-body1 p-1',
-        small: 'text-body2 p-1',
+        large: 'text-body1 py-2 px-3 gap-1',
+        medium: 'text-body1 py-1 px-2 gap-1',
+        small: 'text-body2 py-1 px-2 gap-1',
+        tiny: 'text-caption py-px px-1 gap-0.5',
     }[size];
     var sizeIcon = {
         large: 'w-6 h-6',
         medium: 'w-5 h-5',
         small: 'w-4 h-4',
+        tiny: 'w-3.5 h-3.5',
     }[size];
     var baseTypeClasses = {
         default: {
@@ -110,19 +30,20 @@ export default function Button(_a) {
         danger: {
             primary: 'bg-light-error-main dark:bg-dark-error-main text-light-error-contrast dark:text-dark-error-contrast',
             secondary: 'bg-light-error-alertBg dark:bg-dark-error-alertBg text-light-error-dark dark:text-dark-error-light',
-            tertiary: 'bg-transparent border border-light-error-main dark:border-dark-error-main text-light-error-main dark:text-dark-error-main',
+            // Inset ring instead of a border so it adds no height
+            tertiary: 'bg-transparent ring-1 ring-inset ring-light-error-main dark:ring-dark-error-main text-light-error-main dark:text-dark-error-main',
             textOnly: 'text-light-error-main dark:text-dark-error-main',
         },
     }[color][type];
     var hoverTypeClasses = {
         default: {
-            primary: 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
+            primary: 'hover:bg-light-accent-dark dark:hover:bg-dark-accent-dark',
             secondary: 'hover:bg-light-secondary-dark dark:hover:bg-dark-secondary-dark',
-            tertiary: 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200',
-            textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
+            tertiary: 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200',
+            textOnly: 'hover:bg-light-background-accent100 dark:hover:bg-dark-background-accent100',
         },
         danger: {
-            primary: 'hover:bg-light-error-dark hover:dark:bg-dark-error-dark',
+            primary: 'hover:bg-light-error-dark dark:hover:bg-dark-error-dark',
             secondary: 'hover:bg-light-error-light/60 dark:hover:bg-dark-error-dark/60',
             tertiary: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
             textOnly: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
@@ -139,20 +60,23 @@ export default function Button(_a) {
             : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
         selected: 'cursor-pointer bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast',
     };
-    var buttonClasses = "\n    flex flex-row items-center rounded-[8px] transition-colors duration-200 ease-in-out justify-between\n    ".concat(sizeClasses, "\n    ").concat(state === 'selected' ? stateClasses.selected : '', "\n    ").concat(state === 'enabled' ? baseTypeClasses : '', "\n    ").concat(state === 'focused' ? "".concat(baseTypeClasses, " ").concat(stateClasses.focused) : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : '', "\n    ").concat(state !== 'disabled' && state !== 'selected' && isHovered ? hoverTypeClasses : '', "\n    ").concat(state === 'hovered' ? "".concat(baseTypeClasses, " ").concat(hoverTypeClasses) : '', "\n    ").concat(className, "\n  ");
-    return (<button className={buttonClasses} onMouseEnter={function () { if (state !== 'disabled')
-        setIsHovered(true); }} onMouseLeave={function () { if (state !== 'disabled')
-        setIsHovered(false); }} onClick={onClickButton}>
+    // Hover is pure CSS; `state="hovered"` and `state="focused"` only exist to show those states in docs
+    var buttonClasses = "\n    flex flex-row items-center rounded-[8px] justify-between ".concat(stateTransition, " ").concat(pressFeedback, "\n    ").concat(color === 'danger' ? focusRingDanger : focusRing, "\n    ").concat(sizeClasses, "\n    ").concat(state === 'selected' ? stateClasses.selected : '', "\n    ").concat(state === 'enabled' || state === 'hovered' ? "".concat(stateClasses.enabled, " ").concat(baseTypeClasses, " ").concat(hoverTypeClasses) : '', "\n    ").concat(state === 'focused' ? "".concat(baseTypeClasses, " ").concat(hoverTypeClasses, " ").concat(stateClasses.focused) : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : '', "\n    ").concat(className, "\n  ");
+    return (<button type="button" className={buttonClasses} disabled={state === 'disabled'} onClick={onClickButton}>
       {/* Group IconLeft and label in a flex container for left alignment */}
-      <div className="flex items-center">
-        {IconLeft && <IconLeft className={sizeIcon} strokeWidth={2}/>}
-        <div className="flex flex-col text-center px-2">
+      <div className={"flex items-center ".concat(size === 'tiny' ? 'gap-0.5' : 'gap-1')}>
+        {IconLeft && <IconLeft className={"".concat(sizeIcon, " flex-shrink-0")} strokeWidth={2}/>}
+        <div className={"flex flex-col text-center px-1"}>
           <span className="whitespace-nowrap overflow-hidden truncate">{label}</span>
-          {secondLabel && (<span className="whitespace-nowrap overflow-hidden truncate text-body2 opacity-70">{secondLabel}</span>)}
+          {secondLabel && (<span className={"whitespace-nowrap overflow-hidden truncate ".concat(size === 'tiny' ? 'text-caption' : 'text-body2', " opacity-70")}>{secondLabel}</span>)}
         </div>
       </div>
-      {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className={sizeIcon} strokeWidth={2}/>
-        </div>)}
+      {IconRight && (<span onClick={function (e) {
+                // Don't also trigger the button's own click
+                e.stopPropagation();
+                onClickActionIcon === null || onClickActionIcon === void 0 ? void 0 : onClickActionIcon();
+            }} className="cursor-pointer">
+          <IconRight className={"".concat(sizeIcon, " flex-shrink-0")} strokeWidth={2}/>
+        </span>)}
     </button>);
 }

package/dist/components/checkBox.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface CheckboxProps {
     label?: string;
     secondLabel?: string;
@@ -5,5 +6,5 @@ interface CheckboxProps {
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
 }
-export default function Checkbox({ label, secondLabel, checked, onChange, disabled }: CheckboxProps): import("react").JSX.Element;
+export default function Checkbox({ label, secondLabel, checked, onChange, disabled }: CheckboxProps): React.JSX.Element;
 export {};

package/dist/components/checkBox.jsx

@@ -1,38 +1,38 @@
 'use client';
-import { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { popTransition, stateTransition } from './sharedStyles';
 export default function Checkbox(_a) {
     var label = _a.label, secondLabel = _a.secondLabel, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
     var _d = useState(checked), isChecked = _d[0], setIsChecked = _d[1];
-    var handleToggle = function () {
+    // Follow the parent when it changes `checked` (e.g. resetting a form)
+    useEffect(function () {
+        setIsChecked(checked);
+    }, [checked]);
+    var handleChange = function (event) {
         if (disabled)
             return;
-        var newChecked = !isChecked;
-        setIsChecked(newChecked);
-        if (onChange) {
-            onChange(newChecked);
-        }
+        setIsChecked(event.target.checked);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.checked);
     };
-    return (<label className={"flex items-center ".concat(disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
-      <div onClick={handleToggle} className="relative flex items-center justify-center w-6 h-6 group transition-colors duration-200 ease-in-out">
-        {/* Circle behind the checkbox */}
-        <div className={"absolute w-6 h-6 rounded-full ".concat(disabled
-            ? ''
-            : 'group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected')}></div>
-
+    return (<label className={"group flex items-start ".concat(disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
+      {/* Native input keeps keyboard focus, Space to toggle and screen-reader semantics */}
+      <input type="checkbox" className="peer sr-only" checked={isChecked} disabled={disabled} onChange={handleChange}/>
+      <span className={"relative flex flex-shrink-0 items-center justify-center w-6 h-6 rounded-full ".concat(stateTransition, "\n          peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-0 peer-focus-visible:outline-light-accent-main dark:peer-focus-visible:outline-dark-accent-main\n          ").concat(disabled ? '' : 'group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected')}>
         {/* Checkbox */}
-        <div className={"relative z-10 w-4 h-4 border-2 rounded ".concat(disabled
+        <span className={"relative w-4 h-4 border-2 rounded ".concat(stateTransition, " ").concat(disabled
             ? isChecked
-                ? 'bg-light-text-disabled dark:bg-dark-text-disabled border-none'
+                ? 'bg-light-text-disabled dark:bg-dark-text-disabled border-transparent'
                 : 'border-light-text-disabled dark:border-dark-text-disabled'
             : isChecked
-                ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
+                ? 'bg-light-text-primary dark:bg-dark-text-primary border-transparent'
                 : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center")}>
-          {isChecked && (<svg className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast" fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-              <path strokeWidth="2" d="M1 6l4 3 6-7"/>
-            </svg>)}
-        </div>
-      </div>
-      {(label || secondLabel) && (<div className="flex flex-col ml-2">
+          {/* Always rendered so the tick can scale in and out */}
+          <svg className={"w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast ".concat(popTransition, " ").concat(isChecked ? 'scale-100' : 'scale-0')} fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+            <path strokeWidth="2" d="M1 6l4 3 6-7"/>
+          </svg>
+        </span>
+      </span>
+      {(label || secondLabel) && (<span className="flex flex-col ml-2">
           {label && (<span className={"text-body1 ".concat(disabled
                     ? 'text-light-text-disabled dark:text-dark-text-disabled'
                     : 'text-light-text-primary dark:text-dark-text-primary')}>
@@ -43,6 +43,6 @@ export default function Checkbox(_a) {
                     : 'text-light-text-primary dark:text-dark-text-primary')}>
               {secondLabel}
             </span>)}
-        </div>)}
+        </span>)}
     </label>);
 }

package/dist/components/emptyBox.jsx

@@ -3,16 +3,18 @@ import React from 'react';
 import { AlertCircle } from 'lucide-react';
 export default function EmptyBox(_a) {
     var text = _a.text, secondText = _a.secondText, size = _a.size;
-    var color = 'text-light-text-disabled dark:text-dark-text-disabled';
+    // The icon can be faint; the text needs readable contrast
+    var iconColor = 'text-light-text-disabled dark:text-dark-text-disabled';
+    var textColor = 'text-light-text-secondary dark:text-dark-text-secondary';
     var height = size === 'small' ? 'py-6' : 'h-full';
     var iconSize = 'size-6';
     return (<div className={"flex flex-col space-y-2 justify-center items-center w-full ".concat(height)}>
-            <AlertCircle className={"".concat(iconSize, " ").concat(color)} strokeWidth={2}/>
+            <AlertCircle className={"".concat(iconSize, " ").concat(iconColor)} strokeWidth={2} aria-hidden/>
             <div className="flex flex-col text-center">
-                <p className={"text-body1 ".concat(color)}>
+                <p className={"text-body1 ".concat(textColor)}>
                     {text}
                 </p>
-                {secondText && (<p className={"text-body2 opacity-70 ".concat(color)}>
+                {secondText && (<p className={"text-body2 ".concat(textColor)}>
                         {secondText}
                     </p>)}
             </div>

package/dist/components/icon.d.ts

@@ -3,7 +3,7 @@ import { icons } from 'lucide-react';
 type IconName = keyof typeof icons;
 interface IconProps {
     name: IconName;
-    size?: 'small' | 'medium' | 'large' | number;
+    size?: 'tiny' | 'small' | 'medium' | 'large' | number;
     color?: 'primary' | 'secondary' | 'disabled' | 'error' | 'warning' | 'success' | 'info' | 'accent' | 'inherit';
     strokeWidth?: number;
     className?: string;

package/dist/components/icon.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { icons } from 'lucide-react';
 var sizeMap = {
+    tiny: 12,
     small: 16,
     medium: 24,
     large: 32,

package/dist/components/iconButton.d.ts

@@ -7,6 +7,9 @@ interface IconButtonProps {
     iconName: keyof typeof LucideIcons;
     onClick?: any;
     loading?: boolean;
+    /** Screen-reader label. Defaults to the icon name, e.g. "Settings". */
+    ariaLabel?: string;
 }
-export default function IconButton({ color, state, size, iconName, onClick, loading, }: IconButtonProps): React.JSX.Element;
+export default function IconButton({ color, state, size, iconName, onClick, loading, // Default to false
+ariaLabel, }: IconButtonProps): React.JSX.Element;
 export {};

package/dist/components/iconButton.jsx

@@ -1,17 +1,15 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import * as LucideIcons from 'lucide-react';
 import { LoadingSmall } from './loadingScreen';
+import { focusRing, pressFeedback, stateTransition } from './sharedStyles';
 export default function IconButton(_a) {
-    var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick, _b = _a.loading, loading = _b === void 0 ? false : _b;
-    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
-    // Load icon from Lucide
-    useEffect(function () {
-        if (iconName) {
-            setIcon(LucideIcons[iconName]);
-        }
-    }, [iconName]);
+    var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick, _b = _a.loading, loading = _b === void 0 ? false : _b, // Default to false
+    ariaLabel = _a.ariaLabel;
+    var Icon = LucideIcons[iconName];
+    // "ChevronDown" -> "Chevron Down"
+    var label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : String(iconName).replace(/([a-z])([A-Z0-9])/g, '$1 $2');
+    var isDisabled = state === 'disabled';
     // Size-based classes
     var sizeClasses = {
         large: 'p-2', // 8px padding
@@ -28,47 +26,49 @@ export default function IconButton(_a) {
     // Base classes (padding and corner radius)
     var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none relative");
     // Background color
-    var bgColor = state === 'selected'
-        ? 'bg-light-primary-dark dark:bg-dark-primary-dark' // Selected state
-        : color === 'primary'
-            ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
-            : color === 'secondary'
-                ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
-                : color === 'tertiary'
-                    ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
-                    : ' '; // iconOnly: none
-    // Background hover color
+    var bgColor = isDisabled
+        ? (color === 'iconOnly' ? '' : 'bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled')
+        : state === 'selected'
+            ? 'bg-light-primary-dark dark:bg-dark-primary-dark' // Selected state
+            : color === 'primary'
+                ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
+                : color === 'secondary'
+                    ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
+                    : color === 'tertiary'
+                        ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
+                        : ' '; // iconOnly: none
+    // Background hover color; `enabled:` skips it while disabled or loading
     var bgColorHover = state === 'selected'
         ? '' // No hover effect when selected
         : color === 'primary'
-            ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
+            ? 'enabled:hover:bg-light-accent-dark/75 dark:enabled:hover:bg-dark-accent-dark/75' // Primary
             : color === 'secondary'
-                ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
+                ? 'enabled:hover:bg-light-secondary-dark/75 dark:enabled:hover:bg-dark-secondary-dark/75' // Secondary
                 : color === 'tertiary'
-                    ? 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200' // Tertiary
-                    : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'; // iconOnly
+                    ? 'enabled:hover:bg-light-background-accent200/75 dark:enabled:hover:bg-dark-background-accent200/75' // Tertiary
+                    : 'enabled:hover:bg-light-background-accent200/75 dark:enabled:hover:bg-dark-background-accent200/75'; // iconOnly
     // Icon color
-    var iconColor = state === 'selected'
-        ? 'text-light-text-contrast dark:text-dark-text-contrast' // Selected state
-        : color === 'primary'
-            ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
-            : color === 'secondary'
-                ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
-                : color === 'tertiary'
-                    ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
-                    : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
+    var iconColor = isDisabled
+        ? 'text-light-text-disabled dark:text-dark-text-disabled'
+        : state === 'selected'
+            ? 'text-light-text-contrast dark:text-dark-text-contrast' // Selected state
+            : color === 'primary'
+                ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
+                : color === 'secondary'
+                    ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
+                    : color === 'tertiary'
+                        ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
+                        : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
     // State classes, including loading
     var stateClasses = loading
         ? 'cursor-wait' // Show a waiting cursor during loading
-        : state === 'disabled'
-            ? 'cursor-not-allowed opacity-50'
+        : isDisabled
+            ? 'cursor-not-allowed'
             : state === 'selected'
                 ? 'cursor-pointer'
-                : isHovered
-                    ? 'cursor-pointer hover:bg-opacity-75'
-                    : 'cursor-pointer';
-    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " transition-colors duration-200 ease-in-out flex items-center justify-center")} disabled={state === 'disabled' || loading} // Disable button during loading
-     onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick} aria-label={loading ? 'Loading' : 'Reload'}>
+                : 'cursor-pointer';
+    return (<button type="button" className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " ").concat(stateTransition, " ").concat(pressFeedback, " ").concat(focusRing, " flex items-center justify-center")} disabled={isDisabled || loading} // Disable button during loading
+     onClick={onClick} aria-label={loading ? 'Loading' : label}>
       {loading ? (<LoadingSmall size={size}/>) : (Icon && <Icon className={iconSizeClasses[size]} strokeWidth={2}/>)}
     </button>);
 }