@ably/ui 18.0.0-dev.dbc599e55b → 18.1.0

package/AGENTS.md

@@ -1,19 +1,7 @@
 # Agent Development Guide
 
-This file is not necessarily for people, the intended audience is automated agents.
-
 > This file contains @ably/ui package-specific guidance. For universal code style and git workflow, see the [root AGENTS.md](../../AGENTS.md).
 
-## Other references
-
-Consider the content of `README.md` as well, it contains technical information
-used by contributors to this project, as well as consumers of this project
-
-## Consumers
-
-This project is intended to primarily be consumed by the Ably website, voltaire
-& docs projects. It is distributed via NPM as the `@ably/ui` package.
-
 ## Build & Test Commands
 
 - `pnpm build` - Build the library (prebuild, icons, swc, tsc, cleanup)
@@ -22,7 +10,7 @@ This project is intended to primarily be consumed by the Ably website, voltaire
 - `pnpm lint` - Run ESLint on all files
 - `pnpm format:check` - Check formatting with Prettier
 - `pnpm format:write` - Auto-format all files with Prettier
-- `pnpm storybook` - Start Storybook dev server on port 6006
+- `pnpm storybook` - Start Storybook dev server on port 3200
 - `pnpm start` - Start Vite dev server on port 5000
 
 ## Code Style
@@ -42,31 +30,11 @@ This project is intended to primarily be consumed by the Ably website, voltaire
 ### Custom Hooks
 
 - **Naming**: `use` prefix with descriptive name (e.g., `useContentHeight`, `useThemedScrollpoints`)
-- **JSDoc**: Always include for custom hooks, especially performance-related ones
-- **Parameters**: Document with `@param` including types and defaults
-- **Returns**: Document with `@returns` including type and semantic meaning
+- **JSDoc**: Always include for custom hooks, especially performance-related ones — document `@param` with types/defaults and `@returns` with type and semantic meaning
 - **Performance rationale**: Include "why" in JSDoc when optimizing (e.g., "eliminates forced reflows")
 - **Cleanup**: Always return cleanup function to prevent memory leaks
 - **Shared constants**: Import from `src/core/utils/heights.ts` instead of duplicating
 
-Example:
-
-```typescript
-/**
- * Tracks element height using ResizeObserver to avoid forced reflows.
- *
- * @param ref - React ref to the element to observe
- * @param initialHeight - Initial height value (default: 0)
- * @returns Current height in pixels
- */
-export function useContentHeight(
-  ref: RefObject<HTMLElement>,
-  initialHeight = 0,
-): number {
-  // Implementation...
-}
-```
-
 ## Development
 
 - Run `pnpm lint` & `pnpm format:write` on files after making changes, we lint
@@ -76,50 +44,9 @@ export function useContentHeight(
 - When testing with Storybook, use Chrome DevTools Performance tab to verify no forced reflows
 - For performance-related changes, compare before/after metrics and include in commit/PR
 
-### Chrome DevTools MCP Tools (Optional)
-
-If you have MCP support (Claude Code detects `.mcp.json` automatically), use these tools for automated performance profiling and visual verification during component development:
-
-**Primary use case:** Performance profiling during component development to detect forced reflows and layout thrashing.
-
-**Development server URLs:**
-- `http://localhost:6006` - Storybook (primary development environment for @ably/ui)
-- `http://localhost:4000` - Voltaire docs site (for testing components in production-like context)
-
-**Common workflows:**
+### Chrome DevTools MCP (Optional)
 
-1. **Automated forced reflow detection:**
-   - Start Storybook: `pnpm storybook`
-   - Use `mcp__chrome-devtools__performance_start_trace` with `reload: true, autoStop: true`
-   - Navigate to component story at `http://localhost:6006`
-   - Tool automatically stops trace after page load
-   - Review trace for forced reflow warnings (see Performance Optimization Guidelines above)
-   - If forced reflows found, refactor to use ResizeObserver/IntersectionObserver patterns
-
-2. **Visual verification across light/dark themes:**
-   - Navigate to story: `mcp__chrome-devtools__navigate_page` with `url: "http://localhost:6006/..."`
-   - Take snapshot: `mcp__chrome-devtools__take_snapshot`
-   - Verify interactive states render correctly in both themes
-   - Check hover/active/focus states match styling guide patterns
-
-3. **React warnings and console errors:**
-   - After making component changes, use `mcp__chrome-devtools__list_console_messages`
-   - Filter for errors/warnings to catch React lifecycle issues early
-   - Particularly useful for detecting missing cleanup in custom hooks
-
-4. **Performance regression detection:**
-   - Record baseline trace before refactoring
-   - Make changes, record new trace
-   - Compare metrics (layout time, scripting time) to ensure improvements
-   - Include before/after metrics in commit/PR
-
-**When to use:**
-- After implementing custom hooks with ResizeObserver/IntersectionObserver
-- When optimizing scroll/resize event handlers
-- Before committing performance-related changes
-- When testing components that depend on layout measurements
-
-**Note:** Chrome DevTools MCP tools are optional. Manual Chrome DevTools Performance tab profiling works fine without them. These tools primarily automate workflows you'd otherwise do manually.
+See the [root AGENTS.md](../../AGENTS.md) for the tool decision table. Use Chrome DevTools MCP for performance profiling and visual verification. Storybook URL: `http://localhost:3200` (port varies by worktree index).
 
 ## Styling Guide
 
@@ -149,73 +76,29 @@ For any given color, add a dark mode class that mirrors it across the palette.
 Lower values (lighter colors) in light mode should map to higher values (darker
 colors) in dark mode, and vice versa.
 
-**Examples:**
-
-- `bg-neutral-100` pairs with `dark:bg-neutral-1200`
-- `bg-neutral-200` pairs with `dark:bg-neutral-1100`
-- `bg-neutral-1200` pairs with `dark:bg-neutral-100`
-- `text-neutral-1300` pairs with `dark:text-neutral-000`
-- `bg-orange-200` pairs with `dark:bg-orange-900` (orange has 11 values: 200 + 900 = 1100)
-- `bg-blue-300` pairs with `dark:bg-blue-700` (blue has 9 values: 300 + 700 = 1000)
-
-The sum of mirrored color numbers should equal the total palette range. Different
-palettes have different ranges, so calculate mirrors accordingly:
-
-- Neutral (000-1300): `light + dark = 1300`
-- Orange (100-1100): `light + dark = 1200`
-- Secondary colors (100-900): `light + dark = 1000`
-
-#### Hover States
-
-Use the **next color value** along the palette for hover states:
-
-- `bg-neutral-100` → `hover:bg-neutral-200`
-- `bg-neutral-200` → `hover:bg-neutral-300`
-- `bg-orange-600` → `hover:bg-orange-700`
+The sum of mirrored color numbers should equal the total palette range:
 
-Apply this pattern to both light and dark mode classes:
+- Neutral (000-1300): `light + dark = 1300` (e.g., `bg-neutral-200` / `dark:bg-neutral-1100`, `text-neutral-1300` / `dark:text-neutral-000`)
+- Orange (100-1100): `light + dark = 1200` (e.g., `bg-orange-200` pairs with `dark:bg-orange-1000`)
+- Secondary colors (100-900): `light + dark = 1000` (e.g., `bg-blue-300` pairs with `dark:bg-blue-700`)
 
-```
-bg-neutral-200 hover:bg-neutral-300
-dark:bg-neutral-1100 dark:hover:bg-neutral-1000
-```
-
-#### Active States
+The mirroring formula applies to all property prefixes (`bg-`, `text-`, `border-`, etc.), not just backgrounds.
 
-Use **two color values** along the palette for active/pressed states:
+#### Hover and Active States
 
-- `bg-neutral-100` → `active:bg-neutral-300`
-- `bg-neutral-200` → `active:bg-neutral-400`
-- `bg-orange-600` → `active:bg-orange-800`
-
-Apply to both modes:
-
-```
-bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-400
-dark:bg-neutral-1100 dark:hover:bg-neutral-1000 dark:active:bg-neutral-900
-```
-
-#### Focus Styles
-
-Add the `focus-base` class to all interactive elements (buttons, links, inputs,
-selects, etc.). This class is defined in `src/core/styles/utils.css` and provides
-consistent focus styling with an accessible outline:
-
-```css
-.focus-base {
-  @apply focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
-}
-```
+- **Hover**: Use the next color value along the palette (e.g., `bg-neutral-200` → `hover:bg-neutral-300`)
+- **Active**: Use two color values along (e.g., `bg-neutral-200` → `active:bg-neutral-400`)
+- Apply the same stepping in dark mode, moving in the opposite direction (towards lower values)
+- For Radix stateful components, apply the same hover/active stepping to state variants (e.g., `data-[state=checked]:bg-orange-600 data-[state=checked]:hover:bg-orange-700`)
 
-#### Transitions
+#### Focus and Transitions
 
-Add `transition-colors` to interactive elements unless a higher-specificity
-`transition` class is already present (e.g., `transition-all`, `transition-transform`).
-This ensures smooth visual feedback for state changes.
+- Add the `focus-base` class (defined in `src/core/styles/utils.css`) to all interactive elements for consistent accessible focus styling
+- Add `transition-colors` to interactive elements unless a higher-specificity `transition` class is already present
 
 ### Complete Example
 
-Here's a complete button component demonstrating all patterns:
+A button demonstrating all patterns — dark mode mirroring, hover/active stepping, focus, and transitions:
 
 ```tsx
 <button
@@ -231,32 +114,6 @@ Here's a complete button component demonstrating all patterns:
 </button>
 ```
 
-### Additional Examples
-
-**Select dropdown:**
-
-```tsx
-<Select.Trigger
-  className="bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-1100 dark:hover:bg-neutral-1000 dark:active:bg-neutral-900 focus-base transition-colors border border-neutral-300 dark:border-neutral-1000"
->
-```
-
-**Badge with orange:**
-
-```tsx
-<span
-  className="bg-orange-200 hover:bg-orange-300 active:bg-orange-400 dark:bg-orange-900 dark:hover:bg-orange-800 dark:active:bg-orange-700 focus-base transition-colors"
->
-```
-
-**Toggle/Switch:**
-
-```tsx
-<Switch
-  className="bg-neutral-600 hover:bg-neutral-700 active:bg-neutral-800 data-[state=checked]:bg-orange-600 data-[state=checked]:hover:bg-orange-700 data-[state=checked]:active:bg-orange-800 focus-base transition-colors"
->
-```
-
 ## Performance Optimization Guidelines
 
 ### When to Optimize
@@ -276,246 +133,32 @@ Common anti-patterns causing forced reflows:
 
 ### Observer API Patterns
 
-#### IntersectionObserver (Scroll Position Detection)
-
-Use for detecting when elements enter/exit viewport or cross specific boundaries.
-
-**Example:** Header theme changes based on which section is visible
-
-**Key patterns:**
-
-```typescript
-const observerRef = useRef<IntersectionObserver | null>(null);
-const intersectingElementsRef = useRef<Map<string, IntersectionObserverEntry>>(new Map());
-
-useEffect(() => {
-  const intersectingElements = intersectingElementsRef.current;
-
-  observerRef.current = new IntersectionObserver(
-    (entries) => {
-      requestAnimationFrame(() => {
-        // Update tracking map
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            intersectingElements.set(entry.target.id, entry);
-          } else {
-            intersectingElements.delete(entry.target.id);
-          }
-        }
-
-        // Find best match from ALL intersecting elements
-        // (observer only reports changes, not all intersecting)
-        let bestMatch = null;
-        for (const [id, entry] of intersectingElements) {
-          const rect = entry.boundingClientRect ?? entry.target.getBoundingClientRect();
-          // Calculate match quality...
-          if (isBetterMatch) bestMatch = {...};
-        }
-
-        // Only update state if changed
-        if (bestMatch && bestMatch.value !== previousValueRef.current) {
-          previousValueRef.current = bestMatch.value;
-          setState(bestMatch.value);
-        }
-      });
-    },
-    {
-      rootMargin: "-64px 0px 0px 0px", // Adjust for fixed header
-      threshold: 0,
-    }
-  );
-
-  // Observe elements
-  elements.forEach(el => observerRef.current?.observe(el));
-
-  // CRITICAL: Manual initial state check
-  // IntersectionObserver callbacks only fire on CHANGES, not initial observation
-  const timeoutId = setTimeout(() => {
-    // Check which elements currently intersect
-    // Set initial state
-  }, 0);
-
-  return () => {
-    clearTimeout(timeoutId);
-    observerRef.current?.disconnect();
-    observerRef.current = null;
-    intersectingElements.clear();
-  };
-}, [deps]);
-```
-
-**Critical points:**
-
-- Observer only reports state CHANGES, not all intersecting elements
-- Use Map to track currently intersecting elements
-- Manual initial check with `setTimeout(..., 0)` required
-- Batch updates with `requestAnimationFrame()`
-- Track previous value to skip redundant setState
-- **Tiebreaker logic**: When multiple elements have equal distances, use array order (earlier in array wins)
-- Clean up timeout, observer, and Map
-
-**Tiebreaker pattern:**
-
-```typescript
-// When distances are equal, use scrollpoints array order
-if (
-  !bestMatch ||
-  distance < bestMatch.distance ||
-  (distance === bestMatch.distance && scrollpointIndex < bestMatch.index)
-) {
-  bestMatch = { scrollpoint, distance, index: scrollpointIndex };
-}
-```
-
-**Why this matters:** In Voltaire, both `meganav` (transparent) and `main-theme-dark` (with border) start at position 0, giving identical distances. Without a tiebreaker, the header unpredictably showed the border. Array order ensures `meganav` (listed first) always wins.
-
-#### ResizeObserver (Height/Size Tracking)
-
-Use for tracking element dimensions without synchronous layout reads.
-
-**Example:** Expander content height for expand/collapse animations
-
-**Key patterns:**
-
-```typescript
-const rafIdRef = useRef<number | null>(null);
-const observerRef = useRef<ResizeObserver | null>(null);
-
-useEffect(() => {
-  let isMounted = true;
-
-  observerRef.current = new ResizeObserver((entries) => {
-    // Cancel any pending RAF to avoid stale updates
-    if (rafIdRef.current !== null) {
-      cancelAnimationFrame(rafIdRef.current);
-    }
-
-    rafIdRef.current = requestAnimationFrame(() => {
-      rafIdRef.current = null;
-
-      // Guard against updates after unmount
-      if (!isMounted) return;
-
-      const entry = entries[0];
-      if (entry && entry.contentRect) {
-        const newHeight = Math.round(entry.contentRect.height);
-        setState(newHeight);
-      }
-    });
-  });
-
-  observerRef.current.observe(element);
-
-  return () => {
-    isMounted = false;
-    // Cancel pending RAF to prevent setState after unmount
-    if (rafIdRef.current !== null) {
-      cancelAnimationFrame(rafIdRef.current);
-      rafIdRef.current = null;
-    }
-    observerRef.current?.disconnect();
-    observerRef.current = null;
-  };
-}, [ref]);
-```
+Prefer `IntersectionObserver` and `ResizeObserver` over synchronous layout reads.
 
-**Critical points:**
+**IntersectionObserver** (scroll position detection, viewport triggers):
 
-- Always capture RAF ID and cancel on cleanup
-- Use `isMounted` flag to guard setState calls
-- Cancel pending RAF before scheduling new one
-- ResizeObserver doesn't need initial check (fires immediately on observe)
-- Round numeric values for consistency
+- Observer only reports state _changes_, not all currently intersecting elements — maintain a `Map` to track the full set of intersecting elements
+- Batch state updates inside `requestAnimationFrame()`
+- Perform a manual initial state check with `setTimeout(..., 0)` since callbacks don't fire on first `observe()`
+- Track the previous value and skip redundant `setState` calls
+- When multiple elements have equal distances, use array order as a tiebreaker (earlier wins) — this prevents nondeterministic behaviour when elements share the same position (e.g., Voltaire's meganav and main theme at position 0)
+- Clean up: disconnect observer, clear the Map, cancel any pending timeout
 
-### Testing Async Hooks
+**ResizeObserver** (element dimension tracking):
 
-#### Setup Pattern
+- Store the `requestAnimationFrame` ID and cancel it on cleanup to prevent stale updates
+- Use an `isMounted` flag to guard `setState` calls after unmount
+- Cancel any pending RAF before scheduling a new one
+- Unlike IntersectionObserver, ResizeObserver fires immediately on `observe()` — no manual initial check needed
 
-```typescript
-describe("useMyHook", () => {
-  let originalIntersectionObserver: typeof IntersectionObserver;
-  let originalRequestAnimationFrame: typeof requestAnimationFrame;
+### Testing Observer Hooks
 
-  beforeEach(() => {
-    vi.useFakeTimers();
+See `src/core/hooks/use-themed-scrollpoints.test.ts` for a reference implementation of these patterns:
 
-    // CRITICAL: Save originals BEFORE mocking
-    originalIntersectionObserver = global.IntersectionObserver;
-    originalRequestAnimationFrame = global.requestAnimationFrame;
-
-    // Mock global APIs
-    global.IntersectionObserver = vi.fn((callback) => ({
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-    })) as unknown as typeof IntersectionObserver;
-
-    global.requestAnimationFrame = vi.fn((cb) => {
-      cb(0);
-      return 0;
-    });
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-    vi.useRealTimers();
-    document.body.innerHTML = "";
-
-    // CRITICAL: Restore originals to prevent test pollution
-    global.IntersectionObserver = originalIntersectionObserver;
-    global.requestAnimationFrame = originalRequestAnimationFrame;
-  });
-});
-```
-
-#### Testing Observer Callbacks
-
-```typescript
-it("updates state when observer fires", () => {
-  const elem = document.createElement("div");
-  elem.id = "test";
-  elem.getBoundingClientRect = vi.fn().mockReturnValue({ top: 0, bottom: 200 });
-  document.body.appendChild(elem);
-
-  const { result } = renderHook(() => useMyHook());
-
-  // Advance timers for initial check
-  act(() => {
-    vi.runAllTimers();
-  });
-
-  // Simulate observer callback
-  act(() => {
-    observerCallback(
-      [
-        {
-          target: elem,
-          isIntersecting: true,
-          boundingClientRect: {
-            top: 0,
-            bottom: 200,
-            left: 0,
-            right: 0,
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 200,
-          },
-        } as unknown as IntersectionObserverEntry,
-      ],
-      {} as IntersectionObserver,
-    );
-  });
-
-  expect(result.current).toBe("expected-value");
-});
-```
-
-**Key points:**
-
-- Mock `getBoundingClientRect` on test elements
-- Provide `boundingClientRect` in IntersectionObserverEntry mocks
-- Wrap timer advances and callback calls in `act()`
-- Test both initial state and subsequent updates
+- Save original globals (`IntersectionObserver`, `requestAnimationFrame`) _before_ mocking and restore them in `afterEach` to prevent test pollution
+- Mock `getBoundingClientRect` on test elements and provide `boundingClientRect` in `IntersectionObserverEntry` mocks
+- Wrap timer advances and observer callback invocations in `act()`
+- Test both initial state and subsequent observer-driven updates
 
 ### Common Pitfalls Checklist
 
@@ -530,38 +173,18 @@ When writing performance-optimized hooks:
 - [ ] Console warnings: For missing DOM elements (not errors)
 - [ ] Tiebreaker logic: When multiple candidates have equal scores
 
-## Storybook Development
+## Knowledge Base
 
-### Testing Interactive Components
+`knowledge/` contains patterns, conventions, and gotchas learned from past work (one file per pattern). Consult these when working in this package.
 
-- Use `http://localhost:6006` when developing/testing components
-- Create stories that simulate production patterns (e.g., overlapping scrollpoints like Voltaire)
-- Test edge cases in stories (empty arrays, missing DOM elements, rapid state changes)
-
-### Performance Testing in Storybook
-
-1. Open Chrome DevTools → Performance tab
-2. Start recording while interacting with component
-3. Search for forced reflow indicators:
-   - `getBoundingClientRect`
-   - `clientHeight`/`scrollHeight`/`offsetHeight`
-   - "Forced reflow" warnings
-4. Measure total time in layout/reflow (should be <5ms for interactions)
-
-### Simulating Production Patterns
-
-When creating stories for layout-dependent components, replicate real-world scenarios:
-
-Example - Overlapping scrollpoints (like Voltaire):
-
-```tsx
-<div className="relative">
-  <div id="hero" className="absolute top-0 h-32" />
-  <div id="main" className="relative pt-32 h-screen" />
-</div>
-```
+## Storybook Development
 
-This allows testing tiebreaker logic and initial state detection. Storybook stories should replicate production layout patterns to catch bugs like the tiebreaker issue. The original simple sequential zones didn't expose the Voltaire bug where elements start at the same position.
+- Use `http://localhost:3200` when developing/testing components
+- Create stories that simulate production patterns (e.g., overlapping scrollpoints like Voltaire) — simple sequential layouts may not expose bugs like the tiebreaker issue where elements share the same position
+- Test edge cases in stories (empty arrays, missing DOM elements, rapid state changes)
+- **Performance testing:** Open Chrome DevTools Performance tab, record while interacting with the component, then check for:
+  - Forced reflow indicators: `getBoundingClientRect`, `clientHeight`/`scrollHeight`/`offsetHeight`, "Forced reflow" warnings
+  - Target: <5ms layout/reflow time during interactions
 
 ## Git workflow
 

package/README.md

@@ -216,7 +216,7 @@ The easiest way to get started is to use the development script:
 
 This script will:
 
-- Check that all required tools (Node.js, pnpm) are installed at the correct versions via asdf
+- Check that all required tools (Node.js, pnpm) are installed at the correct versions via mise or asdf
 - Install all project dependencies
 - Start Storybook automatically
 

package/core/Accordion.js

@@ -1,2 +1,2 @@
-import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,heading,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;const renderHeading=()=>{if(heading){if(typeof heading==="function"){return heading(index,isOpen)}return heading}return React.createElement("span",null,name)};return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders,[`${options?.selectedItemCSS}`]:options?.selectedItemCSS&&isOpen})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,renderHeading(),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,additionalCSS:isOpen?typeof toggleIcons.open==="object"&&toggleIcons.open.css||"":typeof toggleIcons.closed==="object"&&toggleIcons.closed.css||"",size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[data,options?.fullyOpen,options?.defaultOpenIndexes]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,heading:item.heading,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
+import React,{useMemo,useState,forwardRef}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,heading,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;const renderHeading=()=>{if(heading){if(typeof heading==="function"){return heading(index,isOpen)}return heading}return React.createElement("span",null,name)};return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders,[`${options?.selectedItemCSS}`]:options?.selectedItemCSS&&isOpen})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,renderHeading(),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,additionalCSS:isOpen?typeof toggleIcons.open==="object"&&toggleIcons.open.css||"":typeof toggleIcons.closed==="object"&&toggleIcons.closed.css||"",size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[data,options?.fullyOpen,options?.defaultOpenIndexes]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const[prevOpenIndexes,setPrevOpenIndexes]=useState(openIndexes);if(prevOpenIndexes!==openIndexes){setPrevOpenIndexes(openIndexes);setOpenRowValues(openIndexes)}const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,heading:item.heading,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
 //# sourceMappingURL=Accordion.js.map

package/core/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useMemo,\n  useState,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  heading,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  // Render custom heading or fallback to name\n  const renderHeading = () => {\n    if (heading) {\n      if (typeof heading === \"function\") {\n        return heading(index, isOpen);\n      }\n      return heading;\n    }\n    return <span>{name}</span>;\n  };\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n        [`${options?.selectedItemCSS}`]: options?.selectedItemCSS && isOpen,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        {renderHeading()}\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              additionalCSS={\n                isOpen\n                  ? (typeof toggleIcons.open === \"object\" &&\n                      toggleIcons.open.css) ||\n                    \"\"\n                  : (typeof toggleIcons.closed === \"object\" &&\n                      toggleIcons.closed.css) ||\n                    \"\"\n              }\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n    useEffect(() => {\n      setOpenRowValues(openIndexes);\n    }, [openIndexes]);\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        heading={item.heading}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","heading","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","renderHeading","span","value","className","hideBorders","selectedItemCSS","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState, forwardRef } from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  heading,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  // Render custom heading or fallback to name\n  const renderHeading = () => {\n    if (heading) {\n      if (typeof heading === \"function\") {\n        return heading(index, isOpen);\n      }\n      return heading;\n    }\n    return <span>{name}</span>;\n  };\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n        [`${options?.selectedItemCSS}`]: options?.selectedItemCSS && isOpen,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        {renderHeading()}\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              additionalCSS={\n                isOpen\n                  ? (typeof toggleIcons.open === \"object\" &&\n                      toggleIcons.open.css) ||\n                    \"\"\n                  : (typeof toggleIcons.closed === \"object\" &&\n                      toggleIcons.closed.css) ||\n                    \"\"\n              }\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n    const [prevOpenIndexes, setPrevOpenIndexes] = useState(openIndexes);\n    if (prevOpenIndexes !== openIndexes) {\n      setPrevOpenIndexes(openIndexes);\n      setOpenRowValues(openIndexes);\n    }\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        heading={item.heading}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","heading","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","renderHeading","span","value","className","hideBorders","selectedItemCSS","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","prevOpenIndexes","setPrevOpenIndexes","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}

package/core/Badge.js

@@ -1,2 +1,2 @@
-import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const defaultIconSizeByBadgeSize={lg:"16px",md:"15px",sm:"14px",xs:"13px"};const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize,ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);const computedIconSize=iconSize??defaultIconSizeByBadgeSize[size];return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark":disabled},className),tabIndex:focusable?0:undefined,role:focusable?"button":undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:computedIconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:computedIconSize,color:colorClass}):null)};export default Badge;
+import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const defaultIconSizeByBadgeSize={lg:"16px",md:"15px",sm:"14px",xs:"13px"};const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize,ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);const computedIconSize=iconSize??defaultIconSizeByBadgeSize[size];return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark":disabled},className),tabIndex:focusable?0:undefined,role:focusable?"button":undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:computedIconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:computedIconSize,color:colorClass}):null)};export default Badge;
 //# sourceMappingURL=Badge.js.map