@luxfi/ui 6.1.2 → 7.0.0

package/src/index.ts

@@ -0,0 +1,268 @@
+export { cn } from './utils';
+
+export {
+  AccordionRoot,
+  AccordionItem,
+  AccordionItemTrigger,
+  AccordionItemContent,
+  useAccordion,
+} from './accordion';
+
+export { Alert } from './alert';
+export type { AlertProps } from './alert';
+
+export { Avatar, AvatarGroup } from './avatar';
+export type { AvatarProps } from './avatar';
+
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';
+
+export {
+  Button,
+  ButtonGroup,
+  ButtonGroupRadio,
+  buttonVariants,
+} from './button';
+export type { ButtonProps, ButtonGroupProps, ButtonGroupRadioProps } from './button';
+
+export { Checkbox, CheckboxGroup } from './checkbox';
+export type { CheckboxProps, CheckboxGroupProps } from './checkbox';
+
+export { CloseButton } from './close-button';
+export type { CloseButtonProps } from './close-button';
+
+export { CollapsibleDetails, CollapsibleList } from './collapsible';
+
+export { ColorModeProvider, useColorMode, useColorModeValue } from './color-mode';
+export type { ColorMode } from './color-mode';
+
+export {
+  DialogRoot,
+  DialogContent,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogBackdrop,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+  DialogActionTrigger,
+} from './dialog';
+
+export {
+  DrawerRoot,
+  DrawerContent,
+  DrawerCloseTrigger,
+  DrawerTrigger,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerActionTrigger,
+} from './drawer';
+
+export { EmptyState } from './empty-state';
+export type { EmptyStateProps } from './empty-state';
+
+export { Field } from './field';
+export type { FieldProps } from './field';
+
+export { Heading } from './heading';
+export type { HeadingProps } from './heading';
+
+export { IconButton } from './icon-button';
+export type { IconButtonProps } from './icon-button';
+
+export { Image } from './image';
+export type { ImageProps } from './image';
+
+export { Input } from './input';
+export type { InputProps } from './input';
+
+export { InputGroup } from './input-group';
+export type { InputGroupProps } from './input-group';
+
+export { Link, LinkBox, LinkOverlay, LinkExternalIcon } from './link';
+export type { LinkProps } from './link';
+
+export {
+  MenuRoot,
+  MenuTrigger,
+  MenuContent,
+  MenuItem,
+  MenuItemText,
+  MenuSeparator,
+  MenuItemGroup,
+  MenuCheckboxItem,
+  MenuRadioItemGroup,
+  MenuRadioItem,
+  MenuTriggerItem,
+  MenuArrow,
+} from './menu';
+
+export { PinInput } from './pin-input';
+
+export {
+  PopoverRoot,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverCloseTrigger,
+  PopoverCloseTriggerWrapper,
+  PopoverBody,
+  PopoverHeader,
+  PopoverFooter,
+  PopoverTitle,
+  PopoverDescription,
+} from './popover';
+
+export { Progress } from './progress';
+
+export {
+  ProgressCircleRoot,
+  ProgressCircleRing,
+  ProgressCircleValueText,
+} from './progress-circle';
+
+export { Radio, RadioGroup } from './radio';
+
+export { Rating } from './rating';
+
+export {
+  SelectRoot,
+  SelectControl,
+  SelectContent,
+  SelectItem,
+  SelectValueText,
+  SelectItemGroup,
+  SelectLabel,
+  SelectItemText,
+  Select,
+  SelectAsync,
+  SelectClearTrigger,
+  createListCollection,
+} from './select';
+export type { SelectOption, ListCollection, SelectRootProps, SelectProps, SelectAsyncProps } from './select';
+
+export { Separator } from './separator';
+export type { SeparatorProps } from './separator';
+
+export { Skeleton, SkeletonCircle, SkeletonText } from './skeleton';
+export type { SkeletonProps, SkeletonCircleProps, SkeletonTextProps } from './skeleton';
+
+export { Slider } from './slider';
+
+export { Switch } from './switch';
+
+export {
+  TableRoot,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumnHeader,
+  TableColumnHeaderSortable,
+  TableCaption,
+  TableFooter,
+  TableScrollWrapper,
+  TableHeaderSticky,
+} from './table';
+
+export {
+  TabsRoot,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabsCounter,
+} from './tabs';
+
+export { Tag } from './tag';
+export type { TagProps } from './tag';
+
+export { Textarea } from './textarea';
+export type { TextareaProps } from './textarea';
+
+export { Toaster, toaster } from './toaster';
+
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';
+
+export { Provider } from './provider';
+
+export {
+  OptionChain,
+} from './option-chain';
+export type {
+  OptionChainProps,
+  OptionQuote,
+  OptionContract,
+  Strike,
+} from './option-chain';
+
+export {
+  GreeksDisplay,
+} from './greeks-display';
+export type {
+  GreeksDisplayProps,
+} from './greeks-display';
+
+export {
+  StrategyBuilder,
+} from './strategy-builder';
+export type {
+  StrategyBuilderProps,
+  StrategyLeg,
+  StrategyType,
+  StrategySubmission,
+} from './strategy-builder';
+
+export {
+  PnlDiagram,
+} from './pnl-diagram';
+export type {
+  PnlDiagramProps,
+} from './pnl-diagram';
+
+export {
+  OptionPositionCard,
+} from './option-position';
+export type {
+  OptionPositionCardProps,
+  OptionPosition,
+} from './option-position';
+
+export {
+  ExpirationSelector,
+} from './expiration-selector';
+export type {
+  ExpirationSelectorProps,
+  ExpirationOption,
+} from './expiration-selector';
+
+export {
+  bankColors,
+  BankCard,
+  BankInput,
+  BankButton,
+  BankButtonText,
+  BankHeading,
+  BankText,
+  BankField,
+  BankAlert,
+  BankAlertText,
+  BankPinBox,
+  BankDivider,
+  BankPage,
+} from './bank';
+export type {
+  BankCardProps,
+  BankInputProps,
+  BankButtonProps,
+  BankHeadingProps,
+  BankTextProps,
+  BankAlertProps,
+  BankPinBoxProps,
+  BankPageProps,
+} from './bank';

package/src/input-group.tsx

@@ -0,0 +1,159 @@
+import { debounce } from 'es-toolkit';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+import type { InputProps } from './input';
+
+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 InputElementProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly placement?: 'start' | 'end';
+}
+
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  readonly startElementProps?: InputElementProps;
+  readonly endElementProps?: InputElementProps;
+  readonly startElement?: React.ReactNode;
+  readonly endElement?: React.ReactNode;
+  readonly children: React.ReactElement<InputElementProps>;
+  readonly startOffset?: string | number;
+  readonly endOffset?: string | number;
+}
+
+export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  function InputGroup(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      startOffset,
+      endOffset,
+      className,
+      ...rest
+    } = props;
+
+    const startElementRef = React.useRef<HTMLDivElement>(null);
+    const endElementRef = React.useRef<HTMLDivElement>(null);
+    const groupRef = React.useRef<HTMLDivElement>(null);
+
+    const [ inlinePaddings, setInlinePaddings ] = React.useState<{ start?: number; end?: number }>();
+
+    const calculateInlinePaddings = React.useCallback(() => {
+      const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
+      const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
+
+      setInlinePaddings({
+        start: startWidth,
+        end: endWidth,
+      });
+    }, []);
+
+    React.useEffect(() => {
+      if (!groupRef.current) return;
+
+      let timeoutId: ReturnType<typeof setTimeout>;
+
+      const intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry && entry.isIntersecting) {
+            // Small delay to ensure rendering is complete
+            timeoutId = setTimeout(calculateInlinePaddings, 50);
+          }
+        },
+        { threshold: 0.01 },
+      );
+
+      intersectionObserver.observe(groupRef.current);
+
+      return () => {
+        intersectionObserver.disconnect();
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [ calculateInlinePaddings ]);
+
+    React.useEffect(() => {
+      calculateInlinePaddings();
+
+      const resizeHandler = debounce(calculateInlinePaddings, 300);
+      const resizeObserver = new ResizeObserver(resizeHandler);
+
+      if (groupRef.current) {
+        resizeObserver.observe(groupRef.current);
+      }
+
+      return function cleanup() {
+        resizeObserver.disconnect();
+      };
+    }, [ calculateInlinePaddings ]);
+
+    // Combine refs for the wrapper div
+    const combinedRef = React.useCallback((node: HTMLDivElement) => {
+      groupRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ ref ]);
+
+    const { className: startClassName, ...startRest } = startElementProps ?? {};
+    const { className: endClassName, ...endRest } = endElementProps ?? {};
+
+    return (
+      <div
+        ref={ combinedRef }
+        className={ cn('relative flex w-full items-center', className) }
+        { ...rest }
+      >
+        { startElement && (
+          <div
+            ref={ startElementRef }
+            className={ cn(
+              'pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
+              startClassName,
+            ) }
+            { ...startRest }
+          >
+            { startElement }
+          </div>
+        ) }
+        { React.Children.map(children, (child: React.ReactElement<InputProps>) => {
+          if (getComponentDisplayName(child.type) !== 'FieldInput') {
+            return child;
+          }
+          return React.cloneElement(child, {
+            ...(startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${ inlinePaddings.start }px` : undefined) }),
+            ...(endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${ inlinePaddings.end }px` : undefined) }),
+            // hide input value and placeholder for the first render
+            value: inlinePaddings ? child.props.value : undefined,
+            placeholder: inlinePaddings ? child.props.placeholder : undefined,
+          });
+        }) }
+        { endElement && (
+          <div
+            ref={ endElementRef }
+            className={ cn(
+              'pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
+              endClassName,
+            ) }
+            { ...endRest }
+          >
+            { endElement }
+          </div>
+        ) }
+      </div>
+    );
+  },
+);
+
+InputGroup.displayName = 'InputGroup';

package/src/input.tsx

@@ -0,0 +1,60 @@
+import { cva } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from './utils';
+
+const inputVariants = cva(
+  [
+    'w-full appearance-none outline-none transition-colors',
+    'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
+    'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
+    'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
+    'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
+    'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
+    'disabled:opacity-40 disabled:cursor-not-allowed',
+    'read-only:opacity-70',
+    'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        xs: 'h-6 px-2 text-xs rounded',
+        sm: 'h-8 px-3 text-sm rounded-md',
+        md: 'h-10 px-4 text-base rounded-md',
+        lg: 'h-12 px-4 text-lg rounded-lg',
+        '2xl': 'h-14 px-4 text-xl rounded-lg',
+      },
+      variant: {
+        outline: 'border border-solid',
+        filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
+        unstyled: 'border-0 bg-transparent p-0 h-auto',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'outline',
+    },
+  },
+);
+
+type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
+type InputVariant = 'outline' | 'filled' | 'unstyled';
+
+export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+  readonly size?: InputSize;
+  readonly variant?: InputVariant;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size, variant, className, ...rest }, ref) => {
+    return (
+      <input
+        ref={ ref }
+        className={ cn(inputVariants({ size, variant }), className) }
+        { ...rest }
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';