@luxfi/ui 1.0.1

package/package.json

@@ -0,0 +1,296 @@
+{
+  "name": "@luxfi/ui",
+  "version": "1.0.1",
+  "description": "Radix + Tailwind UI primitives for Lux apps. Drop-in replacements for Chakra compound components.",
+  "type": "module",
+  "license": "MIT",
+  "author": {
+    "name": "Lux Partners",
+    "url": "https://lux.network"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luxfi/ui.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "tokens.css"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens.css": "./tokens.css",
+    "./accordion": {
+      "types": "./dist/accordion.d.ts",
+      "import": "./dist/accordion.js",
+      "require": "./dist/accordion.cjs"
+    },
+    "./alert": {
+      "types": "./dist/alert.d.ts",
+      "import": "./dist/alert.js",
+      "require": "./dist/alert.cjs"
+    },
+    "./avatar": {
+      "types": "./dist/avatar.d.ts",
+      "import": "./dist/avatar.js",
+      "require": "./dist/avatar.cjs"
+    },
+    "./badge": {
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js",
+      "require": "./dist/badge.cjs"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js",
+      "require": "./dist/button.cjs"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js",
+      "require": "./dist/checkbox.cjs"
+    },
+    "./close-button": {
+      "types": "./dist/close-button.d.ts",
+      "import": "./dist/close-button.js",
+      "require": "./dist/close-button.cjs"
+    },
+    "./collapsible": {
+      "types": "./dist/collapsible.d.ts",
+      "import": "./dist/collapsible.js",
+      "require": "./dist/collapsible.cjs"
+    },
+    "./color-mode": {
+      "types": "./dist/color-mode.d.ts",
+      "import": "./dist/color-mode.js",
+      "require": "./dist/color-mode.cjs"
+    },
+    "./dialog": {
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js",
+      "require": "./dist/dialog.cjs"
+    },
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.js",
+      "require": "./dist/drawer.cjs"
+    },
+    "./empty-state": {
+      "types": "./dist/empty-state.d.ts",
+      "import": "./dist/empty-state.js",
+      "require": "./dist/empty-state.cjs"
+    },
+    "./field": {
+      "types": "./dist/field.d.ts",
+      "import": "./dist/field.js",
+      "require": "./dist/field.cjs"
+    },
+    "./heading": {
+      "types": "./dist/heading.d.ts",
+      "import": "./dist/heading.js",
+      "require": "./dist/heading.cjs"
+    },
+    "./icon-button": {
+      "types": "./dist/icon-button.d.ts",
+      "import": "./dist/icon-button.js",
+      "require": "./dist/icon-button.cjs"
+    },
+    "./image": {
+      "types": "./dist/image.d.ts",
+      "import": "./dist/image.js",
+      "require": "./dist/image.cjs"
+    },
+    "./input": {
+      "types": "./dist/input.d.ts",
+      "import": "./dist/input.js",
+      "require": "./dist/input.cjs"
+    },
+    "./input-group": {
+      "types": "./dist/input-group.d.ts",
+      "import": "./dist/input-group.js",
+      "require": "./dist/input-group.cjs"
+    },
+    "./link": {
+      "types": "./dist/link.d.ts",
+      "import": "./dist/link.js",
+      "require": "./dist/link.cjs"
+    },
+    "./menu": {
+      "types": "./dist/menu.d.ts",
+      "import": "./dist/menu.js",
+      "require": "./dist/menu.cjs"
+    },
+    "./pin-input": {
+      "types": "./dist/pin-input.d.ts",
+      "import": "./dist/pin-input.js",
+      "require": "./dist/pin-input.cjs"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js",
+      "require": "./dist/popover.cjs"
+    },
+    "./progress": {
+      "types": "./dist/progress.d.ts",
+      "import": "./dist/progress.js",
+      "require": "./dist/progress.cjs"
+    },
+    "./progress-circle": {
+      "types": "./dist/progress-circle.d.ts",
+      "import": "./dist/progress-circle.js",
+      "require": "./dist/progress-circle.cjs"
+    },
+    "./radio": {
+      "types": "./dist/radio.d.ts",
+      "import": "./dist/radio.js",
+      "require": "./dist/radio.cjs"
+    },
+    "./rating": {
+      "types": "./dist/rating.d.ts",
+      "import": "./dist/rating.js",
+      "require": "./dist/rating.cjs"
+    },
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js",
+      "require": "./dist/select.cjs"
+    },
+    "./separator": {
+      "types": "./dist/separator.d.ts",
+      "import": "./dist/separator.js",
+      "require": "./dist/separator.cjs"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton.d.ts",
+      "import": "./dist/skeleton.js",
+      "require": "./dist/skeleton.cjs"
+    },
+    "./slider": {
+      "types": "./dist/slider.d.ts",
+      "import": "./dist/slider.js",
+      "require": "./dist/slider.cjs"
+    },
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "import": "./dist/switch.js",
+      "require": "./dist/switch.cjs"
+    },
+    "./table": {
+      "types": "./dist/table.d.ts",
+      "import": "./dist/table.js",
+      "require": "./dist/table.cjs"
+    },
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js",
+      "require": "./dist/tabs.cjs"
+    },
+    "./tag": {
+      "types": "./dist/tag.d.ts",
+      "import": "./dist/tag.js",
+      "require": "./dist/tag.cjs"
+    },
+    "./textarea": {
+      "types": "./dist/textarea.d.ts",
+      "import": "./dist/textarea.js",
+      "require": "./dist/textarea.cjs"
+    },
+    "./toaster": {
+      "types": "./dist/toaster.d.ts",
+      "import": "./dist/toaster.js",
+      "require": "./dist/toaster.cjs"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip.d.ts",
+      "import": "./dist/tooltip.js",
+      "require": "./dist/tooltip.cjs"
+    },
+    "./provider": {
+      "types": "./dist/provider.d.ts",
+      "import": "./dist/provider.js",
+      "require": "./dist/provider.cjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js",
+      "require": "./dist/utils.cjs"
+    },
+    "./explore": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./explore/*": {
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@uidotdev/usehooks": "^2.4.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "es-toolkit": "^1.31.0",
+    "react-icons": "^5.4.0",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.0.0"
+  },
+  "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "next-themes": "^0.2.1 || ^0.3.0 || ^0.4.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/accordion.tsx

@@ -0,0 +1,285 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+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">
+    <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+// ---------------------------------------------------------------------------
+// AccordionRoot
+// ---------------------------------------------------------------------------
+
+interface AccordionRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'dir'> {
+
+  /** Open multiple items simultaneously. Defaults to true. */
+  readonly multiple?: boolean;
+
+  /** Controlled open items (array of `value` strings). */
+  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.
+   */
+  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>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// AccordionItem
+// ---------------------------------------------------------------------------
+
+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 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 }
+      />
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// AccordionItemTrigger
+// ---------------------------------------------------------------------------
+
+interface AccordionItemTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, 'dir'> {
+  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>
+  );
+
+  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>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// AccordionItemContent
+// ---------------------------------------------------------------------------
+
+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>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// useAccordion
+// ---------------------------------------------------------------------------
+
+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 scrollToItemFromUrl = React.useCallback(() => {
+    const hash = window.location.hash.replace('#', '');
+
+    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 ]);
+    }
+  }, [ items ]);
+
+  return React.useMemo(() => {
+    return {
+      value,
+      onValueChange,
+      scrollToItemFromUrl,
+    };
+  }, [ value, onValueChange, scrollToItemFromUrl ]);
+}