@luxfi/ui 5.5.3 → 5.6.0

package/src/dialog.tsx

@@ -0,0 +1,356 @@
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+import { CloseButton } from './close-button';
+
+// Inline back button for dialog header
+function BackToButton({ onClick }: { readonly onClick?: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={ onClick }
+      className="inline-flex items-center justify-center size-8 rounded-md bg-transparent text-current hover:bg-[var(--color-button-subtle-bg)] cursor-pointer"
+      aria-label="Go back"
+    >
+      <svg className="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Size / context
+// ---------------------------------------------------------------------------
+
+type DialogSize = 'sm' | 'md' | 'full' | 'cover';
+
+/**
+ * Responsive size expressed as a plain value or a breakpoint map.
+ * Mirrors the Chakra `size={{ lgDown: 'full', lg: 'md' }}` pattern.
+ * Responsive behavior is implemented via Tailwind responsive variants at
+ * the CSS-class level (see `sizeClasses` helper below).
+ */
+type ResponsiveSize = DialogSize | { base?: DialogSize; lgDown?: DialogSize; lg?: DialogSize };
+
+interface DialogContextValue {
+  size: ResponsiveSize;
+}
+
+const DialogContext = React.createContext<DialogContextValue>({ size: 'md' });
+
+function useDialogContext(): DialogContextValue {
+  return React.useContext(DialogContext);
+}
+
+// ---------------------------------------------------------------------------
+// Tailwind class helpers
+// ---------------------------------------------------------------------------
+
+const CONTENT_SIZE_MAP: Record<DialogSize, string> = {
+  sm: 'max-w-[400px]',
+  md: 'max-w-[728px]',
+  full: 'max-w-[100vw] min-h-dvh rounded-none [--dialog-margin:0]',
+  cover: 'w-full h-full [--dialog-margin:0]',
+};
+
+/**
+ * Resolve a `ResponsiveSize` into a Tailwind class string.
+ *
+ * For a plain value we return the matching static class.  For a breakpoint
+ * object we compose mobile-first responsive classes.  The Tailwind config in
+ * this project defines `lg: 1000px` as breakpoint — that aligns with Chakra's
+ * `lgDown` / `lg` pattern.
+ */
+function sizeClasses(size: ResponsiveSize): string {
+  if (typeof size === 'string') {
+    return CONTENT_SIZE_MAP[size];
+  }
+
+  const parts: Array<string> = [];
+
+  // "base" or "lgDown" both apply below lg
+  const small = size.base ?? size.lgDown;
+  if (small) {
+    parts.push(CONTENT_SIZE_MAP[small]);
+  }
+
+  if (size.lg) {
+    // Prefix each class with `lg:` for the large breakpoint
+    const lgClasses = CONTENT_SIZE_MAP[size.lg]
+      .split(' ')
+      .map((c) => `lg:${ c }`)
+      .join(' ');
+    parts.push(lgClasses);
+  }
+
+  return parts.join(' ');
+}
+
+// ---------------------------------------------------------------------------
+// DialogRoot
+// ---------------------------------------------------------------------------
+
+export interface DialogRootProps {
+  children?: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (details: { open: boolean }) => void;
+  size?: ResponsiveSize;
+
+  /** Accepted for API compat but not implemented — animations are CSS-only. */
+  motionPreset?: string;
+  modal?: boolean;
+}
+
+export const DialogRoot: React.FC<DialogRootProps> = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  size = 'md',
+  modal = true,
+  // motionPreset is intentionally unused — kept for API compat
+}) => {
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      onOpenChange?.({ open: nextOpen });
+    },
+    [ onOpenChange ],
+  );
+
+  const ctx = React.useMemo<DialogContextValue>(() => ({ size }), [ size ]);
+
+  return (
+    <DialogContext.Provider value={ ctx }>
+      <RadixDialog.Root
+        open={ open }
+        defaultOpen={ defaultOpen }
+        onOpenChange={ handleOpenChange }
+        modal={ modal }
+      >
+        { children }
+      </RadixDialog.Root>
+    </DialogContext.Provider>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// DialogContent
+// ---------------------------------------------------------------------------
+
+export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  backdrop?: boolean;
+  // Legacy Chakra style-prop shims
+  paddingTop?: number | string;
+}
+
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  DialogContentProps
+>(function DialogContent(props, ref) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    className,
+    paddingTop: _paddingTop,
+    style: styleProp,
+    ...rest
+  } = props;
+
+  const contentInlineStyle: React.CSSProperties = {
+    ...styleProp,
+    ...(_paddingTop !== undefined ? { paddingTop: typeof _paddingTop === 'number' ? `${ _paddingTop * 4 }px` : _paddingTop } : {}),
+  };
+
+  const { size } = useDialogContext();
+
+  let portalProps: RadixDialog.DialogPortalProps;
+  if (!portalled) {
+    portalProps = { container: undefined };
+  } else if (portalRef) {
+    portalProps = { container: portalRef.current };
+  } else {
+    portalProps = {};
+  }
+
+  // When portalled=false we skip the Radix Portal wrapper entirely
+  const Wrapper = portalled ? RadixDialog.Portal : React.Fragment;
+  const wrapperProps = portalled ? portalProps : {};
+
+  return (
+    <Wrapper { ...wrapperProps }>
+      { backdrop && (
+        <RadixDialog.Overlay
+          className="fixed inset-0 z-[1400] bg-black/80"
+        />
+      ) }
+      { /* Positioner — centers the content panel */ }
+      <div
+        className={ cn(
+          'fixed inset-0 z-[1400] flex w-screen h-dvh',
+          'items-start lg:items-center justify-center',
+          'overflow-hidden',
+        ) }
+      >
+        <RadixDialog.Content
+          ref={ ref }
+          className={ cn(
+            // Base content styles
+            'relative flex flex-col w-full p-6 outline-none text-base',
+            'bg-dialog-bg text-dialog-fg shadow-lg rounded-xl',
+            'my-[var(--dialog-margin,var(--dialog-base-margin))]',
+            'mx-auto [--dialog-base-margin:4rem] lg:[--dialog-base-margin:auto]',
+            'max-h-[calc(100%-7.5rem)] overflow-hidden',
+            // Size variant
+            sizeClasses(size),
+            className,
+          ) }
+          style={ Object.keys(contentInlineStyle).length > 0 ? contentInlineStyle : undefined }
+          { ...rest }
+        >
+          { children }
+        </RadixDialog.Content>
+      </div>
+    </Wrapper>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// DialogCloseTrigger
+// ---------------------------------------------------------------------------
+
+export interface DialogCloseTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const DialogCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  DialogCloseTriggerProps
+>(function DialogCloseTrigger(props, ref) {
+  const { className, ...rest } = props;
+
+  return (
+    <RadixDialog.Close asChild>
+      <CloseButton ref={ ref } className={ className } { ...rest }>
+        { props.children }
+      </CloseButton>
+    </RadixDialog.Close>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// DialogHeader
+// ---------------------------------------------------------------------------
+
+export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  startElement?: React.ReactNode;
+  onBackToClick?: () => void;
+}
+
+export const DialogHeader = React.forwardRef<
+  HTMLDivElement,
+  DialogHeaderProps
+>(function DialogHeader(props, ref) {
+  const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
+
+  const startElement =
+    startElementProp ?? (onBackToClick ? <BackToButton onClick={ onBackToClick }/> : undefined);
+
+  return (
+    <div
+      ref={ ref }
+      className={ cn(
+        'flex-none p-0 mb-2 flex items-center gap-x-2 min-h-[40px]',
+        className,
+      ) }
+      { ...rest }
+    >
+      { startElement }
+      <RadixDialog.Title
+        className={ cn(
+          'text-base lg:text-lg font-medium',
+          'whitespace-nowrap overflow-hidden text-ellipsis',
+        ) }
+      >
+        { children }
+      </RadixDialog.Title>
+      <DialogCloseTrigger className="ml-auto"/>
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// DialogBody
+// ---------------------------------------------------------------------------
+
+export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  // Legacy Chakra style-prop shims
+  pt?: number | string;
+  display?: string;
+  flexDir?: string;
+}
+
+export const DialogBody = React.forwardRef<
+  HTMLDivElement,
+  DialogBodyProps
+>(function DialogBody({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+  const bodyStyle: React.CSSProperties = {
+    ...styleProp,
+    ...(pt !== undefined ? { paddingTop: typeof pt === 'number' ? `${ pt * 4 }px` : pt } : {}),
+    ...(display ? { display } : {}),
+    ...(flexDir ? { flexDirection: flexDir as React.CSSProperties['flexDirection'] } : {}),
+  };
+  return (
+    <div
+      ref={ ref }
+      className={ cn('flex-1 p-0 overflow-auto', className) }
+      style={ Object.keys(bodyStyle).length > 0 ? bodyStyle : undefined }
+      { ...props }
+    />
+  );
+});
+
+// ---------------------------------------------------------------------------
+// DialogFooter
+// ---------------------------------------------------------------------------
+
+export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const DialogFooter = React.forwardRef<
+  HTMLDivElement,
+  DialogFooterProps
+>(function DialogFooter({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ ref }
+      className={ cn('flex items-center justify-start gap-6 p-0 mt-6', className) }
+      { ...props }
+    />
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Simple wrappers that re-export Radix primitives under the old names
+// ---------------------------------------------------------------------------
+
+export const DialogBackdrop = RadixDialog.Overlay;
+
+export const DialogTitle = RadixDialog.Title;
+
+export const DialogDescription = RadixDialog.Description;
+
+export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}
+
+export const DialogTrigger = RadixDialog.Trigger;
+
+/**
+ * `DialogActionTrigger` renders its child and closes the dialog on click.
+ * This mirrors the Chakra `Dialog.ActionTrigger` behavior which wraps
+ * children in a close action.
+ */
+export const DialogActionTrigger = RadixDialog.Close;

package/src/drawer.tsx

@@ -0,0 +1,186 @@
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+import { CloseButton } from './close-button';
+
+// ─── DrawerRoot ─────────────────────────────────────────────────
+
+export interface DrawerRootProps {
+  children?: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (details: { open: boolean }) => void;
+  placement?: 'left' | 'right' | 'top' | 'bottom';
+  initialFocusEl?: (() => HTMLElement | null) | React.RefObject<HTMLElement>;
+  lazyMount?: boolean;
+  unmountOnExit?: boolean;
+  modal?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+const DrawerPlacementContext = React.createContext<string>('right');
+const DrawerSizeContext = React.createContext<string>('md');
+
+export const DrawerRoot = (props: DrawerRootProps) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    placement = 'right',
+    modal = true,
+    size = 'md',
+  } = props;
+
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    onOpenChange?.({ open: nextOpen });
+  }, [ onOpenChange ]);
+
+  return (
+    <DrawerPlacementContext.Provider value={ placement }>
+      <DrawerSizeContext.Provider value={ size }>
+        <RadixDialog.Root
+          open={ open }
+          defaultOpen={ defaultOpen }
+          onOpenChange={ handleOpenChange }
+          modal={ modal }
+        >
+          { children }
+        </RadixDialog.Root>
+      </DrawerSizeContext.Provider>
+    </DrawerPlacementContext.Provider>
+  );
+};
+
+// ─── DrawerContent ──────────────────────────────────────────────
+
+export interface DrawerContentProps extends React.ComponentPropsWithoutRef<'div'> {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  offset?: string | number;
+  backdrop?: boolean;
+}
+
+const PLACEMENT_CLASSES: Record<string, string> = {
+  right: [
+    'inset-y-0 right-0',
+    'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',
+    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',
+  ].join(' '),
+  left: [
+    'inset-y-0 left-0',
+    'data-[state=open]:animate-in data-[state=open]:slide-in-from-left',
+    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left',
+  ].join(' '),
+  top: [
+    'inset-x-0 top-0',
+    'data-[state=open]:animate-in data-[state=open]:slide-in-from-top',
+    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top',
+  ].join(' '),
+  bottom: [
+    'inset-x-0 bottom-0',
+    'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom',
+    'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom',
+  ].join(' '),
+};
+
+const SIZE_CLASSES: Record<string, Record<string, string>> = {
+  right: { xs: 'w-60', sm: 'w-80', md: 'w-96', lg: 'w-[480px]', xl: 'w-[640px]', full: 'w-screen' },
+  left: { xs: 'w-60', sm: 'w-80', md: 'w-96', lg: 'w-[480px]', xl: 'w-[640px]', full: 'w-screen' },
+  top: { xs: 'h-40', sm: 'h-60', md: 'h-80', lg: 'h-96', xl: 'h-[480px]', full: 'h-screen' },
+  bottom: { xs: 'h-40', sm: 'h-60', md: 'h-80', lg: 'h-96', xl: 'h-[480px]', full: 'h-screen' },
+};
+
+export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
+  function DrawerContent(props, ref) {
+    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    const placement = React.useContext(DrawerPlacementContext);
+    const size = React.useContext(DrawerSizeContext);
+
+    const content = (
+      <>
+        { backdrop && (
+          <RadixDialog.Overlay
+            className={ cn(
+              'fixed inset-0 z-50 bg-black/50',
+              'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+            ) }
+          />
+        ) }
+        <RadixDialog.Content
+          ref={ ref }
+          className={ cn(
+            'fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300',
+            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
+            SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
+            className,
+          ) }
+          { ...rest }
+        >
+          { children }
+        </RadixDialog.Content>
+      </>
+    );
+
+    if (portalled) {
+      return (
+        <RadixDialog.Portal container={ portalRef?.current ?? undefined }>
+          { content }
+        </RadixDialog.Portal>
+      );
+    }
+
+    return content;
+  },
+);
+
+// ─── DrawerCloseTrigger ─────────────────────────────────────────
+
+export const DrawerCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<'button'>
+>(function DrawerCloseTrigger(props, ref) {
+  return (
+    <RadixDialog.Close asChild>
+      <CloseButton
+        ref={ ref }
+        className={ cn('absolute top-7 right-5', props.className) }
+        { ...props }
+      />
+    </RadixDialog.Close>
+  );
+});
+
+// ─── DrawerTrigger ──────────────────────────────────────────────
+
+export const DrawerTrigger = (props: React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger>) => {
+  const { asChild = true, ...rest } = props;
+  return <RadixDialog.Trigger asChild={ asChild } { ...rest }/>;
+};
+
+// ─── Sub-components ─────────────────────────────────────────────
+
+export const DrawerHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  function DrawerHeader({ className, ...props }, ref) {
+    return <div ref={ ref } className={ cn('flex flex-col gap-1.5 p-6 pb-0', className) } { ...props }/>;
+  },
+);
+
+export const DrawerBody = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  function DrawerBody({ className, ...props }, ref) {
+    return <div ref={ ref } className={ cn('flex-1 overflow-auto p-6', className) } { ...props }/>;
+  },
+);
+
+export const DrawerFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  function DrawerFooter({ className, ...props }, ref) {
+    return <div ref={ ref } className={ cn('flex items-center justify-end gap-2 p-6 pt-0', className) } { ...props }/>;
+  },
+);
+
+export const DrawerTitle = RadixDialog.Title;
+export const DrawerDescription = RadixDialog.Description;
+export const DrawerActionTrigger = RadixDialog.Close;

package/src/empty-state.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// Inline constants
+const apos = '\u2019'; // right single quotation mark (typographic apostrophe)
+
+function upperFirst(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export type EmptyStateType = 'query' | 'stats' | 'coming_soon';
+
+// Empty state icons are intentionally omitted in the shared package.
+// Consumers can pass a custom `icon` prop instead.
+const ICONS: Partial<Record<EmptyStateType, React.FunctionComponent>> = {};
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: React.ReactNode;
+  term?: string;
+  type?: EmptyStateType;
+  icon?: React.ReactNode;
+}
+
+export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  function EmptyState(props, ref) {
+    const { title, description, term, type = 'query', icon, children, className, ...rest } = props;
+
+    const titleContent = (() => {
+      if (title) {
+        return title;
+      }
+
+      if (type === 'stats') {
+        return 'Collecting data';
+      }
+
+      if (type === 'coming_soon') {
+        return 'Coming soon';
+      }
+
+      return 'No results';
+    })();
+
+    const descriptionContent = (() => {
+      if (description) {
+        return description;
+      }
+
+      if (term && type === 'query') {
+        return `Couldn${ apos }t find any ${ term } that matches your query.`;
+      }
+
+      if (type === 'stats') {
+        return term ? `${ upperFirst(term) } stats will be added soon` : 'Charts and statistics will be available soon';
+      }
+
+      if (type === 'coming_soon') {
+        return 'The information will be available soon. Stay tuned!';
+      }
+    })();
+
+    const iconContent = (() => {
+      const Icon = ICONS[type];
+      if (Icon) {
+        return <Icon/>;
+      }
+      return icon;
+    })();
+
+    return (
+      <div
+        ref={ ref }
+        className={ cn('flex items-center justify-center py-10', className) }
+        { ...rest }
+      >
+        <div className="flex flex-col items-center gap-5">
+          { iconContent && (
+            <div className="flex items-center justify-center">{ iconContent }</div>
+          ) }
+          { descriptionContent ? (
+            <div className="flex flex-col items-center gap-2 text-center">
+              <span className="text-lg font-semibold text-text-secondary">{ titleContent }</span>
+              <span className="text-sm text-text-secondary">
+                { descriptionContent }
+              </span>
+            </div>
+          ) : (
+            <span className="text-lg font-semibold text-text-secondary">{ titleContent }</span>
+          ) }
+          { children }
+        </div>
+      </div>
+    );
+  },
+);