@luxfi/ui 5.6.0 → 6.1.0

package/src/dialog.tsx

@@ -1,356 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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>
-    );
-  },
-);