@luxfi/ui 7.4.10 → 7.4.12

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/alert.tsx

@@ -1,15 +1,15 @@
+import { Text, View, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // Inline info icon (filled circle with i)
-const IndicatorIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+const IndicatorIcon = () => (
+  <svg width={ 20 } height={ 20 } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path fillRule="evenodd" clipRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z"/>
   </svg>
 );
 
 import { CloseButton } from './close-button';
+import { ink } from './ink';
 import { Skeleton } from './skeleton';
 
 /* ------------------------------------------------------------------ */
@@ -19,27 +19,38 @@ import { Skeleton } from './skeleton';
 type AlertStatus = 'info' | 'warning' | 'warning_table' | 'success' | 'error';
 
 /* ------------------------------------------------------------------ */
-/*  Class maps (replaced CVA)                                          */
+/*  Style maps (replaced CVA)                                          */
 /* ------------------------------------------------------------------ */
 
-const ALERT_BASE = 'w-full flex items-start relative rounded text-[var(--color-alert-fg)]';
-
-const STATUS_CLASSES: Record<AlertStatus, string> = {
-  info: 'bg-[var(--color-alert-bg-info)]',
-  warning: 'bg-[var(--color-alert-bg-warning)]',
-  warning_table: 'bg-[var(--color-alert-bg-warning-table)]',
-  success: 'bg-[var(--color-alert-bg-success)]',
-  error: 'bg-[var(--color-alert-bg-error)]',
+/** The frame every alert shares, regardless of status or size. */
+const ALERT_BASE = {
+  width: '100%',
+  position: 'relative',
+  alignItems: 'flex-start',
+  borderRadius: 4,
+  gap: 8,
+  paddingVertical: 8,
+} as const;
+
+/** Foreground is constant across every status — only the background moves. */
+const ALERT_FG = 'var(--color-alert-fg)' as never;
+
+const STATUS_BG: Record<AlertStatus, string> = {
+  info: 'var(--color-alert-bg-info)',
+  warning: 'var(--color-alert-bg-warning)',
+  warning_table: 'var(--color-alert-bg-warning-table)',
+  success: 'var(--color-alert-bg-success)',
+  error: 'var(--color-alert-bg-error)',
 };
 
-const SIZE_CLASSES: Record<string, string> = {
-  sm: 'gap-2 px-2 py-2 text-xs',
-  md: 'gap-2 px-3 py-2 text-base',
+const SIZE: Record<'sm' | 'md', { paddingHorizontal: number; fontSize: number }> = {
+  sm: { paddingHorizontal: 8, fontSize: 12 },
+  md: { paddingHorizontal: 12, fontSize: 16 },
 };
 
-const INDICATOR_SIZE_CLASSES: Record<string, string> = {
-  sm: 'w-5 h-5 my-0',
-  md: 'w-5 h-5 my-[2px]',
+const INDICATOR_SIZE: Record<'sm' | 'md', { marginVertical: number }> = {
+  sm: { marginVertical: 0 },
+  md: { marginVertical: 2 },
 };
 
 /* ------------------------------------------------------------------ */
@@ -107,10 +118,9 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
     const [ isOpen, setIsOpen ] = React.useState(true);
 
     const resolvedSize = size ?? 'md';
+    const fontSize = SIZE[resolvedSize].fontSize;
 
-    const defaultIcon = (
-      <IndicatorIcon className="w-5 h-5"/>
-    );
+    const defaultIcon = <IndicatorIcon/>;
 
     const iconElement = (() => {
       if (startElement !== undefined) {
@@ -122,12 +132,23 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       }
 
       return (
-        <span className={ cn(
-          'inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full',
-          INDICATOR_SIZE_CLASSES[resolvedSize],
-        ) }>
+        <XStack
+          alignItems="center"
+          justifyContent="center"
+          flexShrink={ 0 }
+          width={ 20 }
+          height={ 20 }
+          { ...INDICATOR_SIZE[resolvedSize] }
+          // The default icon and a caller's custom `icon` both use
+          // `fill="currentColor"`; `.lux-icon` (tokens.css) is the existing
+          // descendant-selector rule that sizes an arbitrary child svg to the
+          // box (20px default) instead of its own intrinsic size — no prop
+          // reaches a child element, so this is shared, not reinvented here.
+          className="lux-icon"
+          style={{ color: ALERT_FG }}
+        >
           { icon || defaultIcon }
-        </span>
+        </XStack>
       );
     })();
 
@@ -156,37 +177,49 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       ...(descColumnGap !== undefined ? { columnGap: typeof descColumnGap === 'number' ? `${ descColumnGap * 4 }px` : descColumnGap } : {}),
     };
 
+    // Row when inline (text sits beside the title), column otherwise.
+    const ContentFrame = inline ? XStack : YStack;
+
     return (
       <Skeleton loading={ loading }>
-        <div
-          ref={ ref }
-          className={ cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className) }
+        <XStack
+          ref={ ref as never }
+          { ...ALERT_BASE }
+          paddingHorizontal={ SIZE[resolvedSize].paddingHorizontal }
+          backgroundColor={ STATUS_BG[status] as never }
+          className={ className }
           style={ alertStyle }
-          { ...alertRest }
+          { ...(alertRest as object) }
         >
           { iconElement }
           { children ? (
-            <div className={ cn('flex flex-1', inline ? 'inline-flex flex-row items-center' : 'flex flex-col') }>
-              { title && <div className="font-semibold">{ title }</div> }
-              <div
-                className={ cn('inline-flex flex-wrap', descClassName) }
+            <ContentFrame flex={ 1 } alignItems={ inline ? 'center' : undefined }>
+              { title && (
+                <Text fontWeight="600" fontSize={ fontSize } color={ ALERT_FG }>
+                  { title }
+                </Text>
+              ) }
+              <XStack
+                flexWrap="wrap"
+                className={ descClassName }
                 style={ Object.keys(descStyle).length > 0 ? descStyle : undefined }
-                { ...descRest }
+                { ...(descRest as object) }
               >
-                { children }
-              </div>
-            </div>
+                { ink(children, undefined, { fontSize, color: ALERT_FG }) }
+              </XStack>
+            </ContentFrame>
           ) : (
-            <div className="font-semibold flex-1">{ title }</div>
+            <Text flex={ 1 } fontWeight="600" fontSize={ fontSize } color={ ALERT_FG }>
+              { title }
+            </Text>
           ) }
           { endElement }
           { closable && (
-            <CloseButton
-              className="relative self-start"
-              onClick={ handleClose }
-            />
+            <View position="relative" alignSelf="flex-start">
+              <CloseButton onClick={ handleClose }/>
+            </View>
           ) }
-        </div>
+        </XStack>
       </Skeleton>
     );
   },