@luxfi/ui 6.1.2 → 7.0.0

package/src/badge.tsx

@@ -0,0 +1,158 @@
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from './utils';
+
+import { Skeleton } from './skeleton';
+import { Tooltip } from './tooltip';
+
+// Inline truncation tooltip (replaces explorer's TruncatedTextTooltip)
+function TruncatedTextTooltip({ label, children }: { readonly label: React.ReactNode; readonly children: React.ReactNode }) {
+  return (
+    <Tooltip content={ label } positioning={{ placement: 'top' }}>
+      { children }
+    </Tooltip>
+  );
+}
+
+type ColorPalette =
+  'gray' | 'green' | 'red' | 'purple' | 'orange' | 'blue' | 'yellow' |
+  'teal' | 'cyan' | 'pink' | 'purple_alt' | 'blue_alt' |
+  'bright_gray' | 'bright_green' | 'bright_red' | 'bright_blue' |
+  'bright_yellow' | 'bright_teal' | 'bright_cyan' | 'bright_orange' |
+  'bright_purple' | 'bright_pink';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text',
+  {
+    variants: {
+      variant: {
+        subtle: '',
+        solid: '',
+      },
+      size: {
+        sm: 'text-xs p-1 h-[18px] min-h-[18px]',
+        md: 'text-sm px-1 py-0.5 min-h-6',
+        lg: 'text-sm px-2 py-1 min-h-7 font-semibold',
+      },
+    },
+    defaultVariants: {
+      variant: 'subtle',
+      size: 'md',
+    },
+  },
+);
+
+const COLOR_PALETTE_CLASSES: Record<ColorPalette, string> = {
+  gray: 'bg-badge-gray-bg text-badge-gray-fg',
+  green: 'bg-badge-green-bg text-badge-green-fg',
+  red: 'bg-badge-red-bg text-badge-red-fg',
+  purple: 'bg-badge-purple-bg text-badge-purple-fg',
+  orange: 'bg-badge-orange-bg text-badge-orange-fg',
+  blue: 'bg-badge-blue-bg text-badge-blue-fg',
+  yellow: 'bg-badge-yellow-bg text-badge-yellow-fg',
+  teal: 'bg-badge-teal-bg text-badge-teal-fg',
+  cyan: 'bg-badge-cyan-bg text-badge-cyan-fg',
+  pink: 'bg-badge-pink-bg text-badge-pink-fg',
+  purple_alt: 'bg-badge-purple-alt-bg text-badge-purple-alt-fg',
+  blue_alt: 'bg-badge-blue-alt-bg text-badge-blue-alt-fg',
+  bright_gray: 'bg-badge-bright-gray-bg text-badge-bright-gray-fg',
+  bright_green: 'bg-badge-bright-green-bg text-badge-bright-green-fg',
+  bright_red: 'bg-badge-bright-red-bg text-badge-bright-red-fg',
+  bright_blue: 'bg-badge-bright-blue-bg text-badge-bright-blue-fg',
+  bright_yellow: 'bg-badge-bright-yellow-bg text-badge-bright-yellow-fg',
+  bright_teal: 'bg-badge-bright-teal-bg text-badge-bright-teal-fg',
+  bright_cyan: 'bg-badge-bright-cyan-bg text-badge-bright-cyan-fg',
+  bright_orange: 'bg-badge-bright-orange-bg text-badge-bright-orange-fg',
+  bright_purple: 'bg-badge-bright-purple-bg text-badge-bright-purple-fg',
+  bright_pink: 'bg-badge-bright-pink-bg text-badge-bright-pink-fg',
+};
+
+export interface BadgeProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
+  VariantProps<typeof badgeVariants> {
+  readonly loading?: boolean;
+  readonly startElement?: React.ReactNode;
+  readonly endElement?: React.ReactNode;
+  readonly truncated?: boolean;
+  readonly colorPalette?: ColorPalette;
+  // Legacy Chakra style-prop shims
+  readonly flexShrink?: number;
+  readonly gap?: number | string;
+  readonly ml?: number | string | Record<string, number>;
+  readonly mr?: number | string;
+}
+
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  function Badge(props, ref) {
+    const {
+      loading,
+      startElement,
+      children,
+      truncated = false,
+      endElement,
+      variant,
+      size,
+      colorPalette = 'gray',
+      className,
+      flexShrink: _flexShrink,
+      gap: _gap,
+      ml: _ml,
+      mr: _mr,
+      style: styleProp,
+      ...rest
+    } = props;
+
+    const shimStyle: React.CSSProperties = { ...styleProp };
+    if (_flexShrink !== undefined) shimStyle.flexShrink = _flexShrink;
+    if (_gap !== undefined) shimStyle.gap = typeof _gap === 'number' ? `${ _gap * 4 }px` : _gap;
+    if (_ml !== undefined) {
+      if (typeof _ml === 'object') {
+        const obj = _ml as Record<string, number>;
+        shimStyle.marginLeft = `${ (obj.base ?? obj.lg ?? 0) * 4 }px`;
+      } else {
+        shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * 4 }px` : _ml;
+      }
+    }
+    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * 4 }px` : _mr;
+    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
+
+    const child = children ? (
+      <span className="overflow-hidden text-ellipsis">{ children }</span>
+    ) : null;
+
+    const childrenElement = truncated ? (
+      <TruncatedTextTooltip label={ children }>
+        { child }
+      </TruncatedTextTooltip>
+    ) : child;
+
+    const badgeElement = (
+      <span
+        ref={ ref as React.Ref<HTMLSpanElement> }
+        className={ cn(
+          badgeVariants({ variant, size }),
+          COLOR_PALETTE_CLASSES[colorPalette],
+          className,
+        ) }
+        style={ badgeStyle }
+        { ...rest }
+      >
+        { startElement }
+        { childrenElement }
+        { endElement }
+      </span>
+    );
+
+    if (loading) {
+      return (
+        <Skeleton loading={ loading } asChild>
+          { badgeElement }
+        </Skeleton>
+      );
+    }
+
+    return badgeElement;
+  },
+);

package/src/bank.tsx

@@ -0,0 +1,325 @@
+'use client'
+
+import React from 'react'
+import type { GetProps } from '@hanzogui/core'
+import { View, Text, styled } from '@hanzogui/core'
+
+// ── Bank Theme Tokens ─────────────────────────────────────────────
+export const bankColors = {
+  bg: '#000000',
+  card: '#111111',
+  cardBorder: '#222222',
+  input: '#1A1A1A',
+  inputBorder: '#333333',
+  inputFocus: '#555555',
+  inputPlaceholder: '#666666',
+  text: '#FFFFFF',
+  textMuted: '#888888',
+  textLabel: '#CCCCCC',
+  accent: '#FFFFFF',
+  accentPress: '#E0E0E0',
+  accentHover: '#F0F0F0',
+  error: '#FF4444',
+  errorBg: '#1C0A0A',
+  errorBorder: '#441111',
+  success: '#44FF44',
+  successBg: '#0A1C0A',
+  successBorder: '#114411',
+  divider: '#222222',
+  disabled: '#444444',
+} as const
+
+// ── BankCard ──────────────────────────────────────────────────────
+export const BankCard = styled(View, {
+  name: 'BankCard',
+  backgroundColor: bankColors.card,
+  borderRadius: 24,
+  borderWidth: 1,
+  borderColor: bankColors.cardBorder,
+  padding: 32,
+  gap: 32,
+  width: '100%',
+  maxWidth: 512,
+
+  variants: {
+    size: {
+      sm: { padding: 24, gap: 24, maxWidth: 448 },
+      md: { padding: 32, gap: 32, maxWidth: 512 },
+      lg: { padding: 40, gap: 40, maxWidth: 640 },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export type BankCardProps = GetProps<typeof BankCard>
+
+// ── BankInput ─────────────────────────────────────────────────────
+export const BankInput = styled(Text, {
+  name: 'BankInput',
+  render: 'input',
+  backgroundColor: bankColors.input,
+  color: bankColors.text,
+  borderWidth: 1,
+  borderColor: bankColors.inputBorder,
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 14,
+  fontSize: 16,
+  lineHeight: 24,
+  outlineStyle: 'none',
+  width: '100%',
+
+  hoverStyle: {
+    borderColor: bankColors.inputFocus,
+  },
+
+  focusStyle: {
+    borderColor: bankColors.inputFocus,
+  },
+
+  variants: {
+    invalid: {
+      true: {
+        borderColor: bankColors.error,
+      },
+    },
+    size: {
+      sm: { paddingVertical: 10, fontSize: 14 },
+      md: { paddingVertical: 14, fontSize: 16 },
+      lg: { paddingVertical: 18, fontSize: 18 },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export type BankInputProps = GetProps<typeof BankInput> & {
+  placeholderTextColor?: string
+}
+
+// ── BankButton ────────────────────────────────────────────────────
+export const BankButton = styled(View, {
+  name: 'BankButton',
+  render: 'button',
+  backgroundColor: bankColors.accent,
+  borderRadius: 16,
+  height: 56,
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  width: '100%',
+  userSelect: 'none',
+  borderWidth: 0,
+
+  pressStyle: {
+    backgroundColor: bankColors.accentPress,
+    scale: 0.98,
+  },
+
+  hoverStyle: {
+    backgroundColor: bankColors.accentHover,
+  },
+
+  variants: {
+    variant: {
+      primary: {
+        backgroundColor: bankColors.accent,
+      },
+      secondary: {
+        backgroundColor: bankColors.cardBorder,
+      },
+      ghost: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: bankColors.cardBorder,
+      },
+    },
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    variant: 'primary',
+  },
+})
+
+export const BankButtonText = styled(Text, {
+  name: 'BankButtonText',
+  color: '#000000',
+  fontSize: 16,
+  fontWeight: '700',
+  textAlign: 'center',
+
+  variants: {
+    variant: {
+      primary: { color: '#000000' },
+      secondary: { color: bankColors.text },
+      ghost: { color: bankColors.text },
+    },
+  } as const,
+})
+
+export type BankButtonProps = GetProps<typeof BankButton>
+
+// ── BankHeading ───────────────────────────────────────────────────
+export const BankHeading = styled(Text, {
+  name: 'BankHeading',
+  color: bankColors.text,
+  fontWeight: '700',
+
+  variants: {
+    size: {
+      xs: { fontSize: 18, lineHeight: 24 },
+      sm: { fontSize: 24, lineHeight: 32 },
+      md: { fontSize: 30, lineHeight: 38 },
+      lg: { fontSize: 36, lineHeight: 44 },
+      xl: { fontSize: 48, lineHeight: 56 },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+export type BankHeadingProps = GetProps<typeof BankHeading>
+
+// ── BankText ──────────────────────────────────────────────────────
+export const BankText = styled(Text, {
+  name: 'BankText',
+  color: bankColors.textMuted,
+  fontSize: 16,
+  lineHeight: 24,
+
+  variants: {
+    variant: {
+      default: { color: bankColors.textMuted },
+      label: { color: bankColors.textLabel, fontSize: 14, fontWeight: '500' },
+      error: { color: bankColors.error, fontSize: 13 },
+      success: { color: bankColors.success, fontSize: 13 },
+      link: { color: bankColors.text, fontWeight: '600', cursor: 'pointer' },
+      muted: { color: bankColors.disabled },
+    },
+  } as const,
+
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export type BankTextProps = GetProps<typeof BankText>
+
+// ── BankField ─────────────────────────────────────────────────────
+// Compound component: label + input + error
+export function BankField({
+  label,
+  error,
+  children,
+}: {
+  label?: string
+  error?: string
+  children: React.ReactNode
+}) {
+  return (
+    <View gap={8} width="100%">
+      {label && <BankText variant="label">{label}</BankText>}
+      {children}
+      {error && <BankText variant="error">{error}</BankText>}
+    </View>
+  )
+}
+
+// ── BankAlert ─────────────────────────────────────────────────────
+export const BankAlert = styled(View, {
+  name: 'BankAlert',
+  borderRadius: 12,
+  padding: 16,
+  borderWidth: 1,
+  gap: 4,
+
+  variants: {
+    status: {
+      error: {
+        backgroundColor: bankColors.errorBg,
+        borderColor: bankColors.errorBorder,
+      },
+      success: {
+        backgroundColor: bankColors.successBg,
+        borderColor: bankColors.successBorder,
+      },
+    },
+  } as const,
+})
+
+export const BankAlertText = styled(Text, {
+  name: 'BankAlertText',
+  fontSize: 14,
+
+  variants: {
+    status: {
+      error: { color: bankColors.error },
+      success: { color: bankColors.success },
+    },
+  } as const,
+})
+
+export type BankAlertProps = GetProps<typeof BankAlert>
+
+// ── BankPinInput ──────────────────────────────────────────────────
+export const BankPinBox = styled(Text, {
+  name: 'BankPinBox',
+  render: 'input',
+  backgroundColor: bankColors.input,
+  color: bankColors.text,
+  borderWidth: 1,
+  borderColor: bankColors.inputBorder,
+  borderRadius: 12,
+  width: 48,
+  height: 48,
+  textAlign: 'center',
+  fontSize: 20,
+  fontWeight: '600',
+  outlineStyle: 'none',
+
+  focusStyle: {
+    borderColor: bankColors.inputFocus,
+  },
+
+  variants: {
+    invalid: {
+      true: { borderColor: bankColors.error },
+    },
+  } as const,
+})
+
+export type BankPinBoxProps = GetProps<typeof BankPinBox>
+
+// ── BankDivider ───────────────────────────────────────────────────
+export const BankDivider = styled(View, {
+  name: 'BankDivider',
+  height: 1,
+  width: '100%',
+  backgroundColor: bankColors.divider,
+})
+
+// ── BankPage (full-screen dark background) ────────────────────────
+export const BankPage = styled(View, {
+  name: 'BankPage',
+  backgroundColor: bankColors.bg,
+  minHeight: '100vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 16,
+})
+
+export type BankPageProps = GetProps<typeof BankPage>