@luxfi/ui 7.4.9 → 7.4.11

package/src/accordion.tsx

@@ -1,285 +1,231 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Accordion, View, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
-// Inline chevron icon (east-mini arrow)
-const IndicatorIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { ink } from './ink';
+
+// The Lux accordion, on gui's Accordion.
+//
+// Everything behavioural belongs to the primitive and none of it is
+// re-implemented here: roving Arrow/Home/End focus on the root, `aria-expanded`
+// + `aria-controls` on the trigger, `role="region"` + `aria-labelledby` on the
+// content. This file names the four parts and dresses them.
+//
+// Three corrections the primitive needs, each of which is a real bug if skipped:
+//
+//  1. gui's `Accordion.Header` renders an `<h1>` at the display type scale. An
+//     accordion is a list of sections inside a page that already has a title, so
+//     unqualified every row publishes a competing document heading and a screen
+//     reader's heading list comes out as N level-1s. `headingLevel` re-hosts it
+//     and sets the matching `aria-level`, which the inherited `role="heading"`
+//     requires to be valid.
+//  2. `unstyled` means gui applies nothing — which on the web leaves the USER
+//     AGENT's chrome, and a bare `<button>` is #efefef with an outset border.
+//     Unstyled has to mean "no chrome", so the reset is explicit.
+//  3. That trigger is a bare `<button>`, and a bare button inside a form
+//     SUBMITS it. `type="button"` or opening a section posts the form.
+//
+// The indicator's open state comes from the trigger's function child — gui
+// exports no per-item context, and that is the only seam. It replaces a
+// `group-data-[state=open]/trigger:` Tailwind chain that could not have worked
+// here anyway: gui compiles style props to atomic classes and has no
+// parent-state selector.
+
+const IndicatorIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
 );
 
+const BAR = 'var(--color-text-primary)' as never;
+
+/**
+ * The open/closed mark. The FAQ variant is a plus that becomes a minus: two
+ * bars, and the upright one turns a quarter turn onto the flat one.
+ */
+const Indicator = ({ open, variant }: { open: boolean; variant?: 'outline' | 'faq' }) => (
+  variant === 'faq' ? (
+    <XStack width={ 12 } height={ 12 } flexShrink={ 0 } alignItems="center" justifyContent="center" position="relative">
+      <View position="absolute" width="100%" height={ 2 } borderRadius={ 2 } backgroundColor={ BAR }/>
+      <View
+        position="absolute"
+        width={ 2 }
+        height="100%"
+        borderRadius={ 2 }
+        backgroundColor={ BAR }
+        rotate={ open ? '90deg' : '0deg' }
+      />
+    </XStack>
+  ) : (
+    <XStack flexShrink={ 0 } alignItems="center" rotate={ open ? '270deg' : '180deg' }>
+      <IndicatorIcon/>
+    </XStack>
+  )
+);
+
 // ---------------------------------------------------------------------------
-// AccordionRoot
+// Root
 // ---------------------------------------------------------------------------
 
-interface AccordionRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'dir'> {
+export interface AccordionRootProps
+  extends Omit<React.ComponentProps<typeof Accordion>, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'size'> {
 
-  /** Open multiple items simultaneously. Defaults to true. */
-  readonly multiple?: boolean;
-
-  /** Controlled open items (array of `value` strings). */
+  /** Controlled open items. */
   readonly value?: Array<string>;
 
   /** Uncontrolled initial open items. */
   readonly defaultValue?: Array<string>;
 
-  /**
-   * Called when open items change.
-   * Wraps the value in `{ value }` to stay compatible with the Chakra callback shape
-   * that consumers already rely on.
-   */
+  /** Fires with the full set of open items. */
   readonly onValueChange?: (details: { value: Array<string> }) => void;
+
   readonly variant?: 'outline' | 'faq';
   readonly size?: 'sm' | 'md';
-
-  /** Accepted for compatibility; not applied visually. */
-  readonly noAnimation?: boolean;
-
-  /** Accepted for compatibility; Radix defers rendering internally. */
-  readonly lazyMount?: boolean;
-  readonly children?: React.ReactNode;
-  // Legacy Chakra style-prop shims
-  readonly position?: string;
-  readonly w?: string;
-  readonly bgColor?: string | Record<string, string>;
-  readonly borderRadius?: string;
 }
 
-export const AccordionRoot = React.forwardRef<HTMLDivElement, AccordionRootProps>(
-  function AccordionRoot(props, ref) {
-    const {
-      multiple: _multiple,
-      value,
-      defaultValue,
-      onValueChange,
-      variant,
-      size,
-      noAnimation: _noAnimation,
-      lazyMount: _lazyMount,
-      className,
-      children,
-      position: _position,
-      w: _w,
-      bgColor: _bgColor,
-      borderRadius: _borderRadius,
-      ...rest
-    } = props;
-
-    // Radix requires `type` discriminant.  We default to "multiple" to match
-    // the original Chakra wrapper behavior.
-    const handleValueChange = React.useCallback(
-      (next: Array<string>) => {
-        onValueChange?.({ value: next });
-      },
-      [ onValueChange ],
-    );
-
-    return (
-      <AccordionPrimitive.Root
-        ref={ ref }
-        type="multiple"
-        value={ value }
-        defaultValue={ defaultValue }
-        onValueChange={ handleValueChange }
-        className={ cn(
-          'w-full',
-          variant === 'faq' && 'accordion-faq',
-          size === 'sm' && 'accordion-sm',
-          className,
-        ) }
-        data-variant={ variant }
-        data-size={ size }
-        { ...rest }
-      >
-        { children }
-      </AccordionPrimitive.Root>
-    );
-  },
+const Variant = React.createContext<'outline' | 'faq' | undefined>(undefined);
+
+export const AccordionRoot = ({
+  value,
+  defaultValue,
+  onValueChange,
+  variant,
+  size,
+  children,
+  ...rest
+}: AccordionRootProps): React.ReactElement => (
+  <Variant.Provider value={ variant }>
+    <Accordion
+      unstyled
+      type="multiple"
+      width="100%"
+      value={ value }
+      defaultValue={ defaultValue }
+      onValueChange={ onValueChange ? (next: Array<string>) => onValueChange({ value: next }) : undefined }
+      data-variant={ variant }
+      data-size={ size }
+      { ...rest }
+    >
+      { children }
+    </Accordion>
+  </Variant.Provider>
 );
 
 // ---------------------------------------------------------------------------
-// AccordionItem
+// Item
 // ---------------------------------------------------------------------------
 
-interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
-  // Legacy Chakra style-prop shims
-  as?: string;
-  _first?: Record<string, unknown>;
-  _last?: Record<string, unknown>;
-  display?: string;
-}
+export type AccordionItemProps = React.ComponentProps<typeof Accordion.Item>;
 
-export const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
-  function AccordionItem(props, ref) {
-    const { className, as: _as, _first, _last, display: _display, ...rest } = props;
-    return (
-      <AccordionPrimitive.Item
-        ref={ ref }
-        className={ cn(
-          'border-b border-[var(--color-border-divider)]',
-          className,
-        ) }
-        { ...rest }
-      />
-    );
-  },
+export const AccordionItem = (props: AccordionItemProps): React.ReactElement => (
+  <Accordion.Item
+    unstyled
+    borderBottomWidth={ 1 }
+    borderColor={ 'var(--color-border-divider)' as never }
+    { ...props }
+  />
 );
 
 // ---------------------------------------------------------------------------
-// AccordionItemTrigger
+// Trigger
 // ---------------------------------------------------------------------------
 
-interface AccordionItemTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, 'dir'> {
+export type AccordionItemTriggerProps = React.ComponentProps<typeof Accordion.Trigger> & {
   readonly indicatorPlacement?: 'start' | 'end';
   readonly noIndicator?: boolean;
   readonly variant?: 'outline' | 'faq';
-  // Legacy Chakra style-prop shims
-  px?: number | string;
-  py?: number | string;
-  _hover?: Record<string, string>;
-  wordBreak?: string;
-  textAlign?: string;
-  cursor?: string;
-  display?: string;
-  alignItems?: string;
-  columnGap?: number | string;
-}
-
-export const AccordionItemTrigger = React.forwardRef<
-  HTMLButtonElement,
-  AccordionItemTriggerProps
->(function AccordionItemTrigger(props, ref) {
-  const {
-    children, indicatorPlacement: indicatorPlacementProp, variant, noIndicator, className,
-    // Strip Chakra style props
-    px: _px, py: _py, _hover, wordBreak: _wordBreak, textAlign: _textAlign,
-    cursor: _cursor, display: _display, alignItems: _alignItems, columnGap: _columnGap,
-    ...rest
-  } = props;
-
-  const indicatorPlacement = variant === 'faq' ? 'start' : (indicatorPlacementProp ?? 'end');
-
-  const indicator = variant === 'faq' ? (
-    <span
-      className={ cn(
-        'relative inline-block h-3 w-3 shrink-0',
-        // horizontal bar (always visible)
-        'before:absolute before:left-0 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-y-1/2 before:rounded-[2px] before:bg-current',
-        // vertical bar (rotates to 0 when open)
-        'after:absolute after:left-1/2 after:top-0 after:block after:h-full after:w-[2px]',
-        'after:-translate-x-1/2 after:rounded-[2px] after:bg-current',
-        'after:transition-transform after:duration-200 after:ease-in-out',
-        // When parent trigger has data-state="open", rotate vertical bar
-        'group-data-[state=open]/trigger:after:rotate-90',
-      ) }
-    />
-  ) : (
-    <span
-      className={ cn(
-        'inline-flex shrink-0 transition-transform duration-200',
-        'rotate-180',
-        'group-data-[state=open]/trigger:rotate-[270deg]',
-      ) }
-    >
-      <IndicatorIcon className="h-5 w-5"/>
-    </span>
-  );
+  readonly headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+
+  /** The DOM button type — see (3) above. Defaults to `button`, not submit. */
+  readonly type?: 'button' | 'submit' | 'reset';
+};
+
+export const AccordionItemTrigger = ({
+  children,
+  indicatorPlacement: placementProp,
+  variant: variantProp,
+  noIndicator,
+  headingLevel = 3,
+  ...rest
+}: AccordionItemTriggerProps): React.ReactElement => {
+  const variant = variantProp ?? React.useContext(Variant);
+  const placement = variant === 'faq' ? 'start' : (placementProp ?? 'end');
 
   return (
-    <AccordionPrimitive.Header asChild>
-      <div>
-        <AccordionPrimitive.Trigger
-          ref={ ref }
-          className={ cn(
-            'group/trigger flex w-full cursor-pointer items-center gap-2 py-3 text-left text-[var(--color-text-primary)]',
-            'hover:text-[var(--color-hover)]',
-            'focus-visible:outline-none',
-            className,
-          ) }
-          { ...rest }
-        >
-          { indicatorPlacement === 'start' && !noIndicator && indicator }
-          { children }
-          { indicatorPlacement === 'end' && !noIndicator && indicator }
-        </AccordionPrimitive.Trigger>
-      </div>
-    </AccordionPrimitive.Header>
+    <Accordion.Header unstyled render={ `h${ headingLevel }` } aria-level={ headingLevel } display="flex" width="100%">
+      <Accordion.Trigger
+        unstyled
+        type="button"
+        width="100%"
+        flexDirection="row"
+        alignItems="center"
+        gap={ 8 }
+        paddingVertical={ 12 }
+        paddingHorizontal={ 0 }
+        borderWidth={ 0 }
+        backgroundColor="transparent"
+        cursor="pointer"
+        // Ink colour and its hover live in one CSS rule rather than on this
+        // frame: `color` is a Text prop, not a Stack prop, and "the label
+        // brightens while the ROW is hovered" is a pseudo-class on an ancestor
+        // — a selector, which no prop expresses. The children inherit it.
+        className="lux-accordion-trigger"
+        { ...rest }
+      >
+        { (({ open }: { open: boolean }) => (
+          <>
+            { placement === 'start' && !noIndicator && <Indicator open={ open } variant={ variant }/> }
+            { ink(children, undefined, { color: 'inherit', textAlign: 'left' }) }
+            { placement === 'end' && !noIndicator && <Indicator open={ open } variant={ variant }/> }
+          </>
+        )) as unknown as React.ReactNode }
+      </Accordion.Trigger>
+    </Accordion.Header>
   );
-});
+};
 
 // ---------------------------------------------------------------------------
-// AccordionItemContent
+// Content
 // ---------------------------------------------------------------------------
 
-export interface AccordionItemContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
-  // Legacy Chakra style-prop shims
-  pb?: number | string;
-  pr?: number | string;
-  pl?: string;
-  w?: string;
-  display?: string;
-  flexDir?: string;
-  rowGap?: number | string;
-}
-
-export const AccordionItemContent = React.forwardRef<
-  HTMLDivElement,
-  AccordionItemContentProps
->(function AccordionItemContent(props, ref) {
-  const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
-  return (
-    <AccordionPrimitive.Content
-      ref={ ref }
-      className={ cn(
-        'overflow-hidden text-[var(--color-text-primary)]',
-        'data-[state=open]:animate-accordion-down',
-        'data-[state=closed]:animate-accordion-up',
-        className,
-      ) }
-      { ...rest }
-    >
-      <div className="pb-3">
-        { children }
-      </div>
-    </AccordionPrimitive.Content>
-  );
-});
+export type AccordionItemContentProps = React.ComponentProps<typeof Accordion.Content>;
+
+export const AccordionItemContent = ({ children, ...rest }: AccordionItemContentProps): React.ReactElement => (
+  <Accordion.Content
+    unstyled
+    overflow="hidden"
+    paddingBottom={ 12 }
+    backgroundColor="transparent"
+    { ...rest }
+  >
+    { ink(children, undefined, { color: 'var(--color-text-primary)' }) }
+  </Accordion.Content>
+);
 
 // ---------------------------------------------------------------------------
 // useAccordion
 // ---------------------------------------------------------------------------
 
+/** Open state for an accordion whose items are addressable by URL fragment. */
 export function useAccordion(items: Array<{ id: string }>) {
   const [ value, setValue ] = React.useState<Array<string>>([]);
 
-  const onValueChange = React.useCallback(({ value }: { value: Array<string> }) => {
-    setValue(value);
+  const onValueChange = React.useCallback(({ value: next }: { value: Array<string> }) => {
+    setValue(next);
   }, []);
 
   const scrollToItemFromUrl = React.useCallback(() => {
     const hash = window.location.hash.replace('#', '');
-
-    if (!hash) {
-      return;
-    }
+    if (!hash) return;
 
     const itemToScroll = items.find((item) => item.id === hash);
-    if (itemToScroll) {
-      const el = document.getElementById(itemToScroll.id);
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-      setValue([ itemToScroll.id ]);
-    }
+    if (!itemToScroll) return;
+
+    document.getElementById(itemToScroll.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    setValue([ itemToScroll.id ]);
   }, [ items ]);
 
-  return React.useMemo(() => {
-    return {
-      value,
-      onValueChange,
-      scrollToItemFromUrl,
-    };
-  }, [ value, onValueChange, scrollToItemFromUrl ]);
+  return React.useMemo(
+    () => ({ value, onValueChange, scrollToItemFromUrl }),
+    [ value, onValueChange, scrollToItemFromUrl ],
+  );
 }

package/src/collapsible.tsx

@@ -1,12 +1,20 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
+import { Collapsible, YStack } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
-
 import type { LinkProps } from './link';
 import { Link } from './link';
 
-// Inline useUpdateEffect (effect that skips first mount)
+// Two disclosure shapes on gui's Collapsible: one that hides a block of detail
+// behind a "View details" link, one that cuts a long list down to its first few
+// rows.
+//
+// The trigger is the `Link` itself rather than a wrapping `Collapsible.Trigger`.
+// gui's Trigger renders its OWN element — it has no `asChild` — so wrapping
+// would nest a button around an anchor, which is invalid HTML and swallows the
+// link's own keyboard behaviour. The state is already controlled here, so the
+// only thing the wrapper contributed was `aria-expanded`, and that is a prop.
+
+/** An effect that skips the first mount. */
 function useUpdateEffect(effect: React.EffectCallback, deps: React.DependencyList): void {
   const isFirstMount = React.useRef(true);
   React.useEffect(() => {
@@ -19,12 +27,8 @@ function useUpdateEffect(effect: React.EffectCallback, deps: React.DependencyLis
   }, deps);
 }
 
-// Inline scroll-to helper (replaces react-scroll dependency)
 function scrollToElement(id: string): void {
-  const el = document.getElementById(id);
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 
 export interface CollapsibleDetailsProps extends LinkProps {
@@ -38,48 +42,49 @@ export interface CollapsibleDetailsProps extends LinkProps {
 const CUT_ID = 'CollapsibleDetails';
 
 export const CollapsibleDetails = (props: CollapsibleDetailsProps) => {
-
-  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+  const {
+    children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false,
+    text: textProp, loading, noScroll, ...rest
+  } = props;
 
   const [ isExpanded, setIsExpanded ] = React.useState(isExpandedProp);
 
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
     setIsExpanded((flag) => !flag);
-    if (!noScroll) {
-      scrollToElement(id);
-    }
+    if (!noScroll) scrollToElement(id);
     onClick?.(event);
   }, [ id, noScroll, onClick ]);
 
   useUpdateEffect(() => {
     setIsExpanded(isExpandedProp);
-    if (isExpandedProp && !noScroll) {
-      scrollToElement(id);
-    }
+    if (isExpandedProp && !noScroll) scrollToElement(id);
   }, [ isExpandedProp, id, noScroll ]);
 
   const text = isExpanded ? (textProp?.[1] ?? 'Hide details') : (textProp?.[0] ?? 'View details');
 
   return (
-    <Collapsible.Root open={ isExpanded }>
-      <Collapsible.Trigger asChild>
-        <Link
-          className="text-sm underline decoration-dashed w-fit"
-          onClick={ handleClick }
-          loading={ loading }
-          { ...rest }
-        >
-          <span id={ id }>{ text }</span>
-        </Link>
-      </Collapsible.Trigger>
+    <Collapsible open={ isExpanded } onOpenChange={ setIsExpanded }>
+      <Link
+        className="text-sm underline decoration-dashed w-fit"
+        aria-expanded={ isExpanded }
+        onClick={ handleClick }
+        loading={ loading }
+        { ...rest }
+      >
+        <span id={ id }>{ text }</span>
+      </Link>
       <Collapsible.Content>
         { children }
       </Collapsible.Content>
-    </Collapsible.Root>
+    </Collapsible>
   );
 };
 
-interface CollapsibleListProps<T> extends React.ComponentPropsWithoutRef<'div'> {
+// `items` and `text` are this component's own nouns — the rows, and the pair of
+// trigger labels. On gui they are the `alignItems` / `textAlign` shorthands.
+// Ours win; the shorthands stay reachable under their full names.
+interface CollapsibleListProps<T>
+  extends Omit<React.ComponentProps<typeof YStack>, 'children' | 'text' | 'items'> {
   items: Array<T>;
   renderItem: (item: T, index: number) => React.ReactNode;
   triggerProps?: LinkProps;
@@ -88,10 +93,13 @@ interface CollapsibleListProps<T> extends React.ComponentPropsWithoutRef<'div'>
   defaultExpanded?: boolean;
 }
 
-export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
-  const CUT_LENGTH = 3;
+const CUT_LENGTH = 3;
 
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
+  const {
+    items, renderItem, triggerProps, cutLength = CUT_LENGTH,
+    text: textProp, defaultExpanded = false, ...rest
+  } = props;
 
   const [ isExpanded, setIsExpanded ] = React.useState(defaultExpanded);
 
@@ -99,28 +107,23 @@ export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
     setIsExpanded(defaultExpanded);
   }, [ defaultExpanded ]);
 
-  const handleToggle = React.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React.useCallback(() => setIsExpanded((flag) => !flag), []);
 
   const text = isExpanded ? (textProp?.[1] ?? 'Hide') : (textProp?.[0] ?? 'Show all');
 
   return (
-    <Collapsible.Root open={ isExpanded }>
-      <div className={ cn('flex flex-col w-full', className) } { ...rest }>
-        { items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
-        { items.length > cutLength && (
-          <Collapsible.Trigger asChild>
-            <Link
-              className="text-sm underline decoration-dashed w-fit min-w-0"
-              onClick={ handleToggle }
-              { ...triggerProps }
-            >
-              { text }
-            </Link>
-          </Collapsible.Trigger>
-        ) }
-      </div>
-    </Collapsible.Root>
+    <YStack width="100%" { ...rest }>
+      { items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
+      { items.length > cutLength && (
+        <Link
+          className="text-sm underline decoration-dashed w-fit min-w-0"
+          aria-expanded={ isExpanded }
+          onClick={ handleToggle }
+          { ...triggerProps }
+        >
+          { text }
+        </Link>
+      ) }
+    </YStack>
   );
 };