@tangible/ui 0.0.5 → 0.0.7

package/components/Switch/Switch.js

@@ -8,18 +8,13 @@ import { isDev } from '../../utils/is-dev.js';
 // Switch Component
 // =============================================================================
 //
-// <button role="switch"> with animated thumb. Uses new tui-switch SCSS.
-// Existing tui-toggle CSS untouched (stays for CSS-only usage).
+// <button role="switch"> with animated thumb. Uses tui-switch SCSS.
 //
 // Bare (no label): returns <button> directly for Field.Control cloneElement.
-// With label: wraps in <label>, native label click focuses the button.
-//
-// CSS token API:
-//   --tui-switch-accent     Accent color for on state
-//   --tui-switch-track-off  Track color when off
+// With label: wraps in <label>, label-text clicks forward to button.
 //
 // =============================================================================
-// Props that should route to the <button>, not the wrapper
+// Props that should route to the <button>, not the wrapper.
 const BUTTON_PROPS = new Set([
     'id',
     'aria-describedby',
@@ -29,6 +24,7 @@ const BUTTON_PROPS = new Set([
     'aria-labelledby',
     'form',
     'tabIndex',
+    'onClick',
     'onFocus',
     'onBlur',
 ]);
@@ -57,13 +53,18 @@ export const Switch = forwardRef(function Switch({ checked: controlledChecked, d
     // Extract onClick from rest so prop spreading can't override internal handler
     const { onClick: onClickProp, ...restWithoutClick } = rest;
     const handleClick = (e) => {
+        if (disabled)
+            return;
         setChecked((prev) => !prev);
         onClickProp?.(e);
     };
     const isChecked = checked ?? false;
+    // Shared button element — single source of truth for both render paths.
+    // In labeled mode, buttonProps/sizeClass are set differently (see below).
+    const renderButton = (extraProps, extraClass) => (_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', extraClass), onClick: handleClick, ...extraProps, children: _jsx("span", { className: "tui-switch__thumb" }) }));
     // Bare: no label — Field.Control can inject id/aria-* directly
     if (!label) {
-        return (_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', sizeClass, isChecked && 'is-checked', className), onClick: handleClick, ...restWithoutClick, children: _jsx("span", { className: "tui-switch__thumb" }) }));
+        return renderButton(restWithoutClick, cx(sizeClass, className));
     }
     // Split rest props: some go on button, some on wrapper
     const buttonProps = {};
@@ -76,16 +77,29 @@ export const Switch = forwardRef(function Switch({ checked: controlledChecked, d
             wrapperProps[key] = val;
         }
     }
-    // With label: <label> wrapper provides click-anywhere-to-toggle natively.
-    // We intercept the label click to toggle state and prevent the browser's
-    // default label→button activation (which would double-toggle).
+    // DEV: warn if button-like props leaked to the wrapper
+    if (isDev()) {
+        const suspect = Object.keys(wrapperProps).filter((k) => k.startsWith('aria-') || k.startsWith('on') || k === 'tabIndex');
+        if (suspect.length > 0) {
+            console.warn(`Switch: Props [${suspect.join(', ')}] ended up on the <label> wrapper. ` +
+                'Add them to BUTTON_PROPS if they belong on the <button>.');
+        }
+    }
+    // <label> wrapping a <button> causes native click-forwarding (button IS
+    // a labelable element). Without preventDefault, clicking the button fires
+    // handleClick AND the forwarded click — double-toggle.
+    // We suppress native forwarding. Clicks on the button are handled by its
+    // own onClick (handleClick). Clicks on the label text toggle state here.
     const handleLabelClick = (e) => {
-        // Prevent native label click from also activating the button
         e.preventDefault();
+        // Clicks on/inside the button are handled by handleClick (via bubbling)
+        if (internalRef.current?.contains(e.target))
+            return;
         if (disabled)
             return;
         internalRef.current?.focus();
         setChecked((prev) => !prev);
     };
-    return (_jsxs("label", { className: cx('tui-switch', sizeClass, disabled && 'is-disabled', className), onClick: handleLabelClick, ...wrapperProps, children: [_jsx("button", { ref: composeRefs(internalRef, externalRef), type: "button", role: "switch", "aria-checked": isChecked, disabled: disabled, className: cx('tui-switch__track', isChecked && 'is-checked'), ...buttonProps, children: _jsx("span", { className: "tui-switch__thumb" }) }), _jsx("span", { className: "tui-switch__label", children: label })] }));
+    return (_jsxs("label", { className: cx('tui-switch', sizeClass, disabled && 'is-disabled', className), onClick: handleLabelClick, ...wrapperProps, children: [renderButton(buttonProps), _jsx("span", { className: "tui-switch__label", children: label })] }));
 });
+Switch.displayName = 'Switch';

package/components/Tabs/Tabs.js

@@ -104,7 +104,7 @@ function TabsRoot({ variant = 'underline', activationMode = 'auto', value: contr
     }, [registryVersion, activeValue, focusedValue, isControlled, onValueChange, getOrderedTabs]);
     // Dev-only: Tab-Panel pairing validation
     useEffect(() => {
-        if (import.meta.env.DEV) {
+        if (isDev()) {
             // Defer validation to next microtask so all tabs/panels have registered
             queueMicrotask(() => {
                 const tabValues = new Set(Array.from(tabsRef.current.keys()));
@@ -167,7 +167,7 @@ function TabsList({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy,
     const { orientation, activationMode, activeValue, focusedValue, getOrderedTabs, onSelect, setFocusedValue, tabsRef, } = useTabsContext();
     // Dev-only: Warn if missing accessible name
     useEffect(() => {
-        if (import.meta.env.DEV) {
+        if (isDev()) {
             if (!ariaLabel && !ariaLabelledBy) {
                 console.warn('Tabs.List: Missing accessible name. Provide aria-label or aria-labelledby.');
             }

package/components/Toolbar/Toolbar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, cloneElement, isValidElement, } from 'react';
 import { cx } from '../../utils/cx.js';
+import { isDev } from '../../utils/is-dev.js';
 // =============================================================================
 // Toolbar Component
 // =============================================================================
@@ -66,7 +67,7 @@ function ToolbarRoot({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledB
     const originalTabIndexMapRef = useRef(new WeakMap());
     // Dev warning for missing accessible name
     useEffect(() => {
-        if (import.meta.env?.DEV && !ariaLabel && !ariaLabelledBy) {
+        if (isDev() && !ariaLabel && !ariaLabelledBy) {
             console.warn('[Toolbar] aria-label or aria-labelledby is required for accessibility.');
         }
     }, [ariaLabel, ariaLabelledBy]);

package/components/Tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
+import { isDev } from '../../utils/is-dev.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, FloatingPortal, FloatingArrow, } from '@floating-ui/react';
 import { cx } from '../../utils/cx.js';
 import { getPortalRootFor } from '../../utils/portal.js';
@@ -165,7 +166,7 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
     // Dev warning: tooltips should not contain interactive content (WCAG 1.4.13)
     // Use Popover for interactive overlays instead
     useEffect(() => {
-        if (import.meta.env?.DEV && open && refs.floating.current) {
+        if (isDev() && open && refs.floating.current) {
             const interactive = refs.floating.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
             if (interactive.length > 0) {
                 console.warn('[Tooltip] Contains interactive elements which violates WCAG 1.4.13. ' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangible/ui",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Tangible Design System",
   "type": "module",
   "main": "./components/index.js",
@@ -79,20 +79,18 @@
       "types": "./components/Dropdown/Dropdown.d.ts"
     }
   },
-  "dependencies": {
-    "@floating-ui/react": "^0.27.16",
-    "@tanstack/react-table": "^8.21.3"
-  },
   "peerDependencies": {
+    "@floating-ui/react": ">=0.27.0",
+    "@tanstack/react-table": ">=8.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "peerDependenciesMeta": {
-    "react": {
-      "optional": false
+    "@floating-ui/react": {
+      "optional": true
     },
-    "react-dom": {
-      "optional": false
+    "@tanstack/react-table": {
+      "optional": true
     }
   },
   "homepage": "https://github.com/tangibleinc/tangible-ui",