@tangible/ui 0.0.4 → 0.0.5

package/components/Accordion/Accordion.d.ts

@@ -10,7 +10,7 @@ declare function AccordionItem({ value, disabled, headingLevel, children, classN
 declare namespace AccordionItem {
     var displayName: string;
 }
-declare function AccordionTrigger({ children, className }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ asChild, 'aria-label': ariaLabel, children, className }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionTrigger {
     var displayName: string;
 }

package/components/Accordion/Accordion.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
+import React, { cloneElement, isValidElement, useCallback, useId, useMemo, useRef, useState } from 'react';
 import { cx } from '../../utils/cx.js';
+import { composeRefs } from '../../utils/compose-refs.js';
+import { mergeProps } from '../../utils/merge-props.js';
 import { Icon } from '../Icon/index.js';
 import { AccordionContext, AccordionItemContext, useAccordionContext, useAccordionItemContext } from './AccordionContext.js';
 function AccordionRoot(props) {
-    const { type, children, className } = props;
+    const { type, variant = 'card', children, className } = props;
     // Track trigger refs for keyboard navigation
     const triggersRef = useRef(new Map());
     const registerTrigger = useCallback((value, element) => {
@@ -18,11 +20,11 @@ function AccordionRoot(props) {
     const getTriggers = useCallback(() => triggersRef.current, []);
     // State management differs by type
     if (type === 'single') {
-        return (_jsx(AccordionSingle, { ...props, registerTrigger: registerTrigger, getTriggers: getTriggers, className: className, children: children }));
+        return (_jsx(AccordionSingle, { ...props, variant: variant, registerTrigger: registerTrigger, getTriggers: getTriggers, className: className, children: children }));
     }
-    return (_jsx(AccordionMultiple, { ...props, registerTrigger: registerTrigger, getTriggers: getTriggers, className: className, children: children }));
+    return (_jsx(AccordionMultiple, { ...props, variant: variant, registerTrigger: registerTrigger, getTriggers: getTriggers, className: className, children: children }));
 }
-function AccordionSingle({ value: controlledValue, defaultValue, onValueChange, collapsible = false, children, className, registerTrigger, getTriggers, }) {
+function AccordionSingle({ value: controlledValue, defaultValue, onValueChange, collapsible = false, variant, children, className, registerTrigger, getTriggers, }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const isControlled = controlledValue !== undefined;
     const currentValue = isControlled ? controlledValue : internalValue;
@@ -37,6 +39,8 @@ function AccordionSingle({ value: controlledValue, defaultValue, onValueChange,
             // Opening new item
             newValue = itemValue;
         }
+        if (newValue === currentValue)
+            return;
         if (!isControlled) {
             setInternalValue(newValue);
         }
@@ -50,9 +54,9 @@ function AccordionSingle({ value: controlledValue, defaultValue, onValueChange,
         registerTrigger,
         getTriggers,
     }), [collapsible, isOpen, toggle, registerTrigger, getTriggers]);
-    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx("div", { className: cx('tui-accordion', className), "data-type": "single", children: children }) }));
+    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx("div", { className: cx('tui-accordion', `is-variant-${variant}`, className), "data-type": "single", children: children }) }));
 }
-function AccordionMultiple({ value: controlledValue, defaultValue, onValueChange, children, className, registerTrigger, getTriggers, }) {
+function AccordionMultiple({ value: controlledValue, defaultValue, onValueChange, variant, children, className, registerTrigger, getTriggers, }) {
     const [internalValue, setInternalValue] = useState(defaultValue ?? []);
     const isControlled = controlledValue !== undefined;
     const currentValue = isControlled ? controlledValue : internalValue;
@@ -74,7 +78,7 @@ function AccordionMultiple({ value: controlledValue, defaultValue, onValueChange
         registerTrigger,
         getTriggers,
     }), [isOpen, toggle, registerTrigger, getTriggers]);
-    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx("div", { className: cx('tui-accordion', className), "data-type": "multiple", children: children }) }));
+    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx("div", { className: cx('tui-accordion', `is-variant-${variant}`, className), "data-type": "multiple", children: children }) }));
 }
 // =============================================================================
 // Accordion Item
@@ -99,21 +103,49 @@ function AccordionItem({ value, disabled = false, headingLevel, children, classN
 // =============================================================================
 // Accordion Trigger
 // =============================================================================
-function AccordionTrigger({ children, className }) {
+function AccordionTrigger({ asChild = false, 'aria-label': ariaLabel, children, className }) {
     const { toggle, registerTrigger, getTriggers } = useAccordionContext();
     const { value, disabled, headingLevel, triggerId, panelId, isOpen } = useAccordionItemContext();
-    const buttonRef = useRef(null);
+    const triggerRef = useRef(null);
     // Register trigger for keyboard navigation
     React.useEffect(() => {
-        registerTrigger(value, buttonRef.current);
+        registerTrigger(value, triggerRef.current);
         return () => registerTrigger(value, null);
     }, [value, registerTrigger]);
-    const handleClick = () => {
-        if (!disabled) {
-            toggle(value);
+    const handleClick = (event) => {
+        if (disabled)
+            return;
+        // In asChild mode, the trigger is a container with nested interactive elements.
+        // Only toggle when the click is on the trigger itself or passive content (text,
+        // chips, icons) — not when it originates from a nested button, link, or input.
+        if (asChild) {
+            const target = event.target;
+            const currentTarget = event.currentTarget;
+            if (target !== currentTarget) {
+                const interactive = target.closest('button, a, input, select, textarea, [role="button"], [role="link"]');
+                if (interactive && interactive !== currentTarget && currentTarget.contains(interactive)) {
+                    return;
+                }
+            }
         }
+        toggle(value);
     };
     const handleKeyDown = (event) => {
+        // In asChild mode, only handle keyboard events when the trigger element
+        // itself has focus — not when focus is on a nested interactive child.
+        // (A native <button> trigger can't have focusable children, so this
+        // check is only needed for asChild.)
+        if (asChild && event.target !== event.currentTarget)
+            return;
+        // Enter/Space activation for asChild mode. Native <button> elements fire
+        // click on Enter/Space automatically; role="button" elements do not.
+        if (asChild && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            if (!disabled) {
+                toggle(value);
+            }
+            return;
+        }
         const triggers = getTriggers();
         // Sort triggers by DOM order (not Map insertion order) to handle
         // conditional rendering, async mounting, or reordered items
@@ -124,14 +156,16 @@ function AccordionTrigger({ children, className }) {
             return 1;
         });
         const currentIndex = sortedTriggers.findIndex(([v]) => v === value);
-        // Find next/prev non-disabled trigger
+        // Find next/prev non-disabled trigger — check both native disabled (button)
+        // and aria-disabled (asChild elements)
+        const isElementDisabled = (el) => el.disabled || el.getAttribute('aria-disabled') === 'true';
         const findNextIndex = (start, direction) => {
             let index = start;
             const len = sortedTriggers.length;
             for (let i = 0; i < len; i++) {
                 index = (index + direction + len) % len;
                 const [, triggerElement] = sortedTriggers[index];
-                if (triggerElement && !triggerElement.disabled) {
+                if (triggerElement && !isElementDisabled(triggerElement)) {
                     return index;
                 }
             }
@@ -147,14 +181,24 @@ function AccordionTrigger({ children, className }) {
                 event.preventDefault();
                 targetIndex = findNextIndex(currentIndex, -1);
                 break;
-            case 'Home':
+            case 'Home': {
                 event.preventDefault();
-                targetIndex = findNextIndex(sortedTriggers.length - 1, 1); // Start from end, go forward
+                const first = sortedTriggers.findIndex(([, el]) => !isElementDisabled(el));
+                if (first !== -1)
+                    targetIndex = first;
                 break;
-            case 'End':
+            }
+            case 'End': {
                 event.preventDefault();
-                targetIndex = findNextIndex(0, -1); // Start from beginning, go backward
+                // Scan from end to find last non-disabled trigger
+                for (let i = sortedTriggers.length - 1; i >= 0; i--) {
+                    if (!isElementDisabled(sortedTriggers[i][1])) {
+                        targetIndex = i;
+                        break;
+                    }
+                }
                 break;
+            }
         }
         if (targetIndex !== null && targetIndex !== currentIndex) {
             const [, targetElement] = sortedTriggers[targetIndex];
@@ -162,7 +206,34 @@ function AccordionTrigger({ children, className }) {
         }
     };
     const state = isOpen ? 'open' : 'closed';
-    const button = (_jsxs("button", { ref: buttonRef, type: "button", id: triggerId, className: cx('tui-accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": panelId, disabled: disabled, "data-state": state, "data-disabled": disabled || undefined, onClick: handleClick, onKeyDown: handleKeyDown, children: [_jsx("span", { className: "tui-accordion__trigger-content", children: children }), _jsx(Icon, { name: "system/chevron-down", size: "lg", className: "tui-accordion__indicator", "aria-hidden": "true" })] }));
+    // asChild: merge trigger props onto the child element
+    if (asChild && isValidElement(children)) {
+        const triggerProps = {
+            id: triggerId,
+            role: 'button',
+            tabIndex: disabled ? -1 : 0,
+            'aria-expanded': isOpen,
+            'aria-controls': panelId,
+            'aria-disabled': disabled || undefined,
+            'aria-label': ariaLabel,
+            'data-state': state,
+            'data-disabled': disabled || undefined,
+            className: cx('tui-accordion__trigger', className),
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+        };
+        const childRef = children.ref;
+        const merged = mergeProps(children.props, triggerProps);
+        merged.ref = composeRefs(triggerRef, childRef);
+        const element = cloneElement(children, merged);
+        if (headingLevel) {
+            const Heading = `h${headingLevel}`;
+            return _jsx(Heading, { className: "tui-accordion__heading", children: element });
+        }
+        return element;
+    }
+    // Default: render as button with built-in chevron indicator
+    const button = (_jsxs("button", { ref: triggerRef, type: "button", id: triggerId, className: cx('tui-accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": panelId, "aria-label": ariaLabel, disabled: disabled, "data-state": state, "data-disabled": disabled || undefined, onClick: handleClick, onKeyDown: handleKeyDown, children: [_jsx("span", { className: "tui-accordion__trigger-content", children: children }), _jsx(Icon, { name: "system/chevron-down", size: "lg", className: "tui-accordion__indicator", "aria-hidden": "true" })] }));
     // Wrap in heading if headingLevel is specified
     if (headingLevel) {
         const Heading = `h${headingLevel}`;
@@ -176,7 +247,7 @@ function AccordionTrigger({ children, className }) {
 function AccordionPanel({ landmark = false, children, className }) {
     const { triggerId, panelId, isOpen } = useAccordionItemContext();
     const state = isOpen ? 'open' : 'closed';
-    return (_jsx("div", { id: panelId, role: landmark ? 'region' : undefined, "aria-labelledby": triggerId, className: cx('tui-accordion__panel', className), "data-state": state, "aria-hidden": !isOpen, 
+    return (_jsx("div", { id: panelId, role: landmark ? 'region' : undefined, "aria-labelledby": landmark ? triggerId : undefined, className: cx('tui-accordion__panel', className), "data-state": state, "aria-hidden": !isOpen, 
         // Prevent keyboard focus into collapsed panels
         inert: !isOpen || undefined, children: _jsx("div", { className: "tui-accordion__panel-content", children: children }) }));
 }

package/components/Accordion/index.d.ts

@@ -1,2 +1,2 @@
 export { Accordion } from './Accordion';
-export type { AccordionProps, AccordionSingleProps, AccordionMultipleProps, AccordionItemProps, AccordionTriggerProps, AccordionPanelProps, } from './types';
+export type { AccordionProps, AccordionSingleProps, AccordionMultipleProps, AccordionItemProps, AccordionTriggerProps, AccordionPanelProps, AccordionVariant, } from './types';

package/components/Accordion/types.d.ts

@@ -1,5 +1,12 @@
 import type { ReactNode } from 'react';
+export type AccordionVariant = 'card' | 'flush';
 type AccordionBaseProps = {
+    /**
+     * Visual treatment.
+     * - `card` (default): Bordered cards with gap between items.
+     * - `flush`: Items share borders, no gap, no radius — denser layout.
+     */
+    variant?: AccordionVariant;
     children: ReactNode;
     className?: string;
 };
@@ -40,7 +47,17 @@ export type AccordionItemProps = {
     className?: string;
 };
 export type AccordionTriggerProps = {
-    children: ReactNode;
+    /**
+     * When true, merges trigger props (aria attributes, event handlers, keyboard
+     * navigation) onto the child element instead of rendering a built-in button.
+     * The child must be a single React element that accepts ref and event handlers.
+     * The built-in chevron indicator is not rendered in asChild mode.
+     * @default false
+     */
+    asChild?: boolean;
+    /** Accessible label for the trigger. Required when children is empty (e.g. icon-only triggers). */
+    'aria-label'?: string;
+    children?: ReactNode;
     className?: string;
 };
 export type AccordionPanelProps = {
@@ -54,8 +71,8 @@ export type AccordionContextValue = {
     collapsible: boolean;
     isOpen: (value: string) => boolean;
     toggle: (value: string) => void;
-    registerTrigger: (value: string, element: HTMLButtonElement | null) => void;
-    getTriggers: () => Map<string, HTMLButtonElement>;
+    registerTrigger: (value: string, element: HTMLElement | null) => void;
+    getTriggers: () => Map<string, HTMLElement>;
 };
 export type AccordionItemContextValue = {
     value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangible/ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Tangible Design System",
   "type": "module",
   "main": "./components/index.js",