@luxfi/ui 6.1.3 → 7.0.0

package/src/expiration-selector.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ExpirationOption {
+  date: string;
+  dte: number;
+  type: 'weekly' | 'monthly' | 'quarterly';
+}
+
+export interface ExpirationSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  readonly expirations: ExpirationOption[];
+  readonly selected: string;
+  readonly onSelect: (date: string) => void;
+  readonly showGroups?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatExpDate(date: string): string {
+  const d = new Date(date);
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+const GROUP_ORDER: ExpirationOption['type'][] = ['weekly', 'monthly', 'quarterly'];
+
+const GROUP_LABELS: Record<ExpirationOption['type'], string> = {
+  weekly: 'Weekly',
+  monthly: 'Monthly',
+  quarterly: 'Quarterly',
+};
+
+// ---------------------------------------------------------------------------
+// ExpirationPill
+// ---------------------------------------------------------------------------
+
+interface ExpirationPillProps {
+  readonly exp: ExpirationOption;
+  readonly isSelected: boolean;
+  readonly onClick: () => void;
+}
+
+function ExpirationPill({ exp, isSelected, onClick }: ExpirationPillProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0',
+        'border text-xs',
+        isSelected
+          ? 'border-blue-500/60 bg-blue-900/30 text-blue-300'
+          : 'border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200',
+      )}
+    >
+      <span className="font-medium whitespace-nowrap">
+        {formatExpDate(exp.date)}
+      </span>
+      <span className={cn(
+        'font-mono tabular-nums text-[10px]',
+        isSelected ? 'text-blue-400/70' : 'text-zinc-600',
+        exp.dte <= 7 && !isSelected && 'text-amber-600',
+      )}>
+        {exp.dte}d
+      </span>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ExpirationSelector
+// ---------------------------------------------------------------------------
+
+export const ExpirationSelector = React.forwardRef<HTMLDivElement, ExpirationSelectorProps>(
+  function ExpirationSelector(props, ref) {
+    const {
+      expirations,
+      selected,
+      onSelect,
+      showGroups = false,
+      className,
+      ...rest
+    } = props;
+
+    const scrollRef = React.useRef<HTMLDivElement>(null);
+
+    // Scroll selected pill into view on mount / change
+    React.useEffect(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const selectedEl = container.querySelector('[data-selected="true"]');
+      if (selectedEl) {
+        selectedEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+      }
+    }, [selected]);
+
+    if (showGroups) {
+      const grouped = GROUP_ORDER.map((type) => ({
+        type,
+        label: GROUP_LABELS[type],
+        items: expirations.filter((e) => e.type === type),
+      })).filter((g) => g.items.length > 0);
+
+      return (
+        <div
+          ref={ref}
+          className={cn('flex flex-col gap-2', className)}
+          {...rest}
+        >
+          {grouped.map((group) => (
+            <div key={group.type} className="flex flex-col gap-1">
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1">
+                {group.label}
+              </span>
+              <div className="flex gap-1.5 overflow-x-auto no-scrollbar">
+                {group.items.map((exp) => (
+                  <div key={exp.date} data-selected={exp.date === selected || undefined}>
+                    <ExpirationPill
+                      exp={exp}
+                      isSelected={exp.date === selected}
+                      onClick={() => onSelect(exp.date)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center gap-1', className)}
+        {...rest}
+      >
+        <div
+          ref={scrollRef}
+          className="flex gap-1.5 overflow-x-auto no-scrollbar"
+        >
+          {expirations.map((exp) => (
+            <div key={exp.date} data-selected={exp.date === selected || undefined}>
+              <ExpirationPill
+                exp={exp}
+                isSelected={exp.date === selected}
+                onClick={() => onSelect(exp.date)}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);

package/src/field.tsx

@@ -0,0 +1,202 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+import type { InputProps } from './input';
+import type { InputGroupProps } from './input-group';
+
+// Inline constants
+const space = String.fromCharCode(32);
+
+function getComponentDisplayName(type: string | React.JSXElementConstructor<unknown>): string | undefined {
+  if (typeof type === 'string') return undefined;
+  if ('displayName' in type) return type.displayName as string;
+  return undefined;
+}
+
+export interface FieldProps {
+  readonly label?: React.ReactNode;
+  readonly helperText?: React.ReactNode;
+  readonly errorText?: React.ReactNode;
+  readonly optionalText?: React.ReactNode;
+  readonly children: React.ReactElement<InputProps> | React.ReactElement<InputGroupProps>;
+  readonly size?: 'sm' | 'md' | 'lg' | '2xl';
+  readonly required?: boolean;
+  readonly disabled?: boolean;
+  readonly readOnly?: boolean;
+  readonly invalid?: boolean;
+  readonly floating?: boolean;
+  readonly bgColor?: string | Record<string, string>;
+  readonly id?: string;
+  readonly className?: string;
+  readonly style?: React.CSSProperties;
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  function Field(props, ref) {
+    const {
+      label,
+      children,
+      helperText,
+      errorText,
+      optionalText,
+      size,
+      required,
+      disabled,
+      readOnly,
+      invalid,
+      floating,
+      id,
+      className,
+      style,
+    } = props;
+
+    // A floating field cannot be without a label.
+    if (floating && label) {
+      const injectedProps = {
+        className: 'peer',
+        placeholder: ' ',
+        size,
+        floating,
+        disabled,
+        readOnly,
+      };
+
+      const labelElement = (
+        <LabelPrimitive.Root
+          className={ cn(
+            'absolute left-3 top-1/2 -translate-y-1/2',
+            'text-[var(--color-input-placeholder,theme(colors.gray.400))]',
+            'pointer-events-none select-none',
+            'origin-top-left transition-all duration-150',
+            'peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75',
+            'peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75',
+          ) }
+          htmlFor={ id }
+        >
+          { label }
+          { required && (
+            <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]" aria-hidden="true">*</span>
+          ) }
+          { !required && optionalText && (
+            <span className="ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm">
+              { optionalText }
+            </span>
+          ) }
+          { errorText && (
+            <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm">
+              -{ space }{ errorText }
+            </span>
+          ) }
+        </LabelPrimitive.Root>
+      );
+
+      const helperTextElement = helperText ? (
+        <p className="mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]">
+          { helperText }
+        </p>
+      ) : null;
+
+      const child = React.Children.only<React.ReactElement<InputProps | InputGroupProps>>(children);
+      const isInputGroup = getComponentDisplayName(child.type) === 'InputGroup';
+
+      if (isInputGroup) {
+        const inputElement = React.cloneElement(
+          React.Children.only<React.ReactElement<InputProps>>(child.props.children as React.ReactElement<InputProps>),
+          injectedProps,
+        );
+
+        const groupInputElement = React.cloneElement(child,
+          {},
+          inputElement,
+          labelElement,
+        );
+
+        return (
+          <div
+            ref={ ref }
+            id={ id }
+            className={ cn('relative w-full', className) }
+            style={ style }
+            data-disabled={ disabled || undefined }
+            data-readonly={ readOnly || undefined }
+            data-invalid={ invalid || undefined }
+          >
+            { groupInputElement }
+            { helperTextElement }
+          </div>
+        );
+      }
+
+      const inputElement = React.cloneElement(child, injectedProps);
+
+      return (
+        <div
+          ref={ ref }
+          id={ id }
+          className={ cn('relative w-full', className) }
+          style={ style }
+          data-disabled={ disabled || undefined }
+          data-readonly={ readOnly || undefined }
+          data-invalid={ invalid || undefined }
+        >
+          { inputElement }
+          { labelElement }
+          { helperTextElement }
+        </div>
+      );
+    }
+
+    // Non-floating: standard field layout
+    const injectedProps = {
+      size,
+    };
+    const child = React.Children.only<React.ReactElement<InputProps | InputGroupProps>>(children);
+    const clonedChild = React.cloneElement(child, injectedProps);
+
+    return (
+      <div
+        ref={ ref }
+        id={ id }
+        className={ cn('flex flex-col gap-1', className) }
+        style={ style }
+        data-disabled={ disabled || undefined }
+        data-readonly={ readOnly || undefined }
+        data-invalid={ invalid || undefined }
+      >
+        { label && (
+          <LabelPrimitive.Root
+            className={ cn(
+              'text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]',
+              'dark:text-[var(--color-field-label,theme(colors.gray.300))]',
+              disabled && 'opacity-40',
+            ) }
+            htmlFor={ id }
+          >
+            { label }
+            { required && (
+              <span className="ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]" aria-hidden="true">*</span>
+            ) }
+            { !required && optionalText && (
+              <span className="ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal">
+                { optionalText }
+              </span>
+            ) }
+          </LabelPrimitive.Root>
+        ) }
+        { clonedChild }
+        { helperText && (
+          <p className="text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]">
+            { helperText }
+          </p>
+        ) }
+        { errorText && (
+          <p className="text-xs text-[var(--color-fg-error,theme(colors.red.500))]">
+            { errorText }
+          </p>
+        ) }
+      </div>
+    );
+  },
+);

package/src/greeks-display.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from './utils';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface GreeksDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly delta: number;
+  readonly gamma: number;
+  readonly theta: number;
+  readonly vega: number;
+  readonly rho?: number;
+  readonly iv?: number;
+  readonly compact?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Greek definitions
+// ---------------------------------------------------------------------------
+
+interface GreekDef {
+  key: string;
+  label: string;
+  symbol: string;
+  color: string;
+  barColor: string;
+  decimals: number;
+  maxMagnitude: number;
+}
+
+const GREEKS: GreekDef[] = [
+  { key: 'delta', label: 'Delta', symbol: '\u0394', color: 'text-blue-400', barColor: 'bg-blue-500', decimals: 4, maxMagnitude: 1 },
+  { key: 'gamma', label: 'Gamma', symbol: '\u0393', color: 'text-purple-400', barColor: 'bg-purple-500', decimals: 4, maxMagnitude: 0.1 },
+  { key: 'theta', label: 'Theta', symbol: '\u0398', color: 'text-red-400', barColor: 'bg-red-500', decimals: 4, maxMagnitude: 1 },
+  { key: 'vega', label: 'Vega', symbol: '\u03BD', color: 'text-emerald-400', barColor: 'bg-emerald-500', decimals: 4, maxMagnitude: 1 },
+  { key: 'rho', label: 'Rho', symbol: '\u03C1', color: 'text-orange-400', barColor: 'bg-orange-500', decimals: 4, maxMagnitude: 1 },
+  { key: 'iv', label: 'IV', symbol: '\u03C3', color: 'text-amber-400', barColor: 'bg-amber-500', decimals: 1, maxMagnitude: 100 },
+];
+
+// ---------------------------------------------------------------------------
+// GreekItem
+// ---------------------------------------------------------------------------
+
+interface GreekItemProps {
+  readonly def: GreekDef;
+  readonly value: number;
+  readonly compact?: boolean;
+}
+
+function GreekItem({ def, value, compact }: GreekItemProps) {
+  const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
+  const displayValue = def.key === 'iv'
+    ? `${(value * 100).toFixed(def.decimals)}%`
+    : value.toFixed(def.decimals);
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-1.5',
+        compact ? 'min-w-0' : 'min-w-[100px]',
+      )}
+    >
+      <span className={cn('text-[10px] font-semibold shrink-0', def.color)}>
+        {def.symbol}
+      </span>
+      {!compact && (
+        <span className="text-[10px] text-zinc-500 shrink-0 w-[34px]">
+          {def.label}
+        </span>
+      )}
+      <span className={cn(
+        'font-mono tabular-nums text-xs text-zinc-200 shrink-0',
+        value < 0 && 'text-red-400',
+      )}>
+        {displayValue}
+      </span>
+      {!compact && (
+        <div className="flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden">
+          <div
+            className={cn('h-full rounded-full transition-all', def.barColor)}
+            style={{ width: `${magnitude * 100}%`, opacity: 0.7 }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// GreeksDisplay
+// ---------------------------------------------------------------------------
+
+export const GreeksDisplay = React.forwardRef<HTMLDivElement, GreeksDisplayProps>(
+  function GreeksDisplay(props, ref) {
+    const {
+      delta,
+      gamma,
+      theta,
+      vega,
+      rho,
+      iv,
+      compact = false,
+      className,
+      ...rest
+    } = props;
+
+    const values: Record<string, number | undefined> = {
+      delta, gamma, theta, vega, rho, iv,
+    };
+
+    const activeGreeks = GREEKS.filter((g) => values[g.key] !== undefined);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-wrap items-center',
+          compact ? 'gap-3' : 'gap-4',
+          className,
+        )}
+        {...rest}
+      >
+        {activeGreeks.map((g) => (
+          <GreekItem
+            key={g.key}
+            def={g}
+            value={values[g.key] as number}
+            compact={compact}
+          />
+        ))}
+      </div>
+    );
+  },
+);

package/src/heading.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { cn } from './utils';
+
+export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
+  level?: '1' | '2' | '3';
+  // Legacy Chakra style-prop shims
+  mb?: number | string;
+  size?: string;
+}
+
+const LEVEL_TAG = {
+  '1': 'h1',
+  '2': 'h2',
+  '3': 'h3',
+} as const;
+
+// base (mobile) + lg (desktop) responsive text styles per level
+//
+// Level 1: heading.md -> heading.xl
+//   base: 18px/24px font-500
+//   lg:   32px/40px font-500 tracking=-0.5px
+//
+// Level 2: heading.sm -> heading.lg
+//   base: 16px/24px font-500
+//   lg:   24px/32px font-500
+//
+// Level 3: heading.xs -> heading.md
+//   base: 14px/20px font-600
+//   lg:   18px/24px font-500
+const LEVEL_CLASSES = {
+  '1': 'text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]',
+  '2': 'text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]',
+  '3': 'text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium',
+} as const;
+
+const BASE_CLASSES = 'font-heading text-heading';
+
+export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  function Heading({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
+    const Tag = level ? LEVEL_TAG[level] : 'h2';
+    const levelClasses = level ? LEVEL_CLASSES[level] : undefined;
+    const shimStyle: React.CSSProperties = { ...styleProp };
+    if (mb !== undefined) shimStyle.marginBottom = typeof mb === 'number' ? `${ mb * 4 }px` : mb;
+
+    return (
+      <Tag
+        ref={ ref }
+        className={ cn(BASE_CLASSES, levelClasses, className) }
+        style={ Object.keys(shimStyle).length > 0 ? shimStyle : undefined }
+        { ...rest }
+      />
+    );
+  },
+);