@luxfi/ui 6.0.0 → 6.1.0

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,QAAA,MAAM,UAAU;;;8CAoDd,CAAA;AAmCF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAM5E"}

package/dist/components/Badge.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { Stack, styled, Text } from 'tamagui'
+
+const BadgeFrame = styled(Stack, {
+  name: 'Badge',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingHorizontal: '$2',
+  paddingVertical: '$1',
+  borderRadius: '$2',
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: '$backgroundHover',
+      },
+      primary: {
+        backgroundColor: '$primary',
+      },
+      success: {
+        backgroundColor: '$success',
+      },
+      warning: {
+        backgroundColor: '$warning',
+      },
+      error: {
+        backgroundColor: '$error',
+      },
+      outline: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+      },
+    },
+    size: {
+      sm: {
+        paddingHorizontal: '$1.5',
+        paddingVertical: 2,
+      },
+      md: {
+        paddingHorizontal: '$2',
+        paddingVertical: '$1',
+      },
+      lg: {
+        paddingHorizontal: '$3',
+        paddingVertical: '$1.5',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+})
+const BadgeText = styled(Text, {
+  name: 'BadgeText',
+  fontSize: 12,
+  fontWeight: '500',
+  variants: {
+    variant: {
+      default: {
+        color: '$color',
+      },
+      primary: {
+        color: 'white',
+      },
+      success: {
+        color: 'white',
+      },
+      warning: {
+        color: 'white',
+      },
+      error: {
+        color: 'white',
+      },
+      outline: {
+        color: '$color',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+export function Badge({ children, variant = 'default', ...props }) {
+  return _jsx(BadgeFrame, {
+    variant: variant,
+    ...props,
+    children: _jsx(BadgeText, { variant: variant, children: children }),
+  })
+}

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,QAAA,MAAM,WAAW;;;;;8CAgHf,CAAA;AAsBF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,GAAG;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAU/D;yBAVe,MAAM"}

package/dist/components/Button.js

@@ -0,0 +1,137 @@
+import { styled } from '@tamagui/core'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { Stack, Text } from 'tamagui'
+
+const ButtonFrame = styled(Stack, {
+  name: 'Button',
+  tag: 'button',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'row',
+  gap: '$2',
+  borderRadius: '$3',
+  paddingHorizontal: '$4',
+  paddingVertical: '$3',
+  cursor: 'pointer',
+  pressStyle: {
+    opacity: 0.8,
+    scale: 0.98,
+  },
+  hoverStyle: {
+    opacity: 0.9,
+  },
+  focusStyle: {
+    outlineWidth: 2,
+    outlineColor: '$primary',
+    outlineStyle: 'solid',
+    outlineOffset: 2,
+  },
+  disabledStyle: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  variants: {
+    variant: {
+      primary: {
+        backgroundColor: '$primary',
+        color: 'white',
+        hoverStyle: {
+          backgroundColor: '$primaryHover',
+        },
+      },
+      secondary: {
+        backgroundColor: '$secondary',
+        color: '$color',
+        hoverStyle: {
+          backgroundColor: '$secondaryHover',
+        },
+      },
+      outline: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+        color: '$color',
+        hoverStyle: {
+          backgroundColor: '$backgroundHover',
+        },
+      },
+      ghost: {
+        backgroundColor: 'transparent',
+        color: '$color',
+        hoverStyle: {
+          backgroundColor: '$backgroundHover',
+        },
+      },
+      destructive: {
+        backgroundColor: '$error',
+        color: 'white',
+        hoverStyle: {
+          backgroundColor: '$errorDark',
+        },
+      },
+    },
+    size: {
+      sm: {
+        paddingHorizontal: '$3',
+        paddingVertical: '$2',
+        height: 32,
+      },
+      md: {
+        paddingHorizontal: '$4',
+        paddingVertical: '$3',
+        height: 40,
+      },
+      lg: {
+        paddingHorizontal: '$5',
+        paddingVertical: '$4',
+        height: 48,
+      },
+      xl: {
+        paddingHorizontal: '$6',
+        paddingVertical: '$5',
+        height: 56,
+      },
+    },
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+    },
+    circular: {
+      true: {
+        borderRadius: '$round',
+        paddingHorizontal: 0,
+        aspectRatio: 1,
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+})
+const ButtonText = styled(Text, {
+  name: 'ButtonText',
+  fontFamily: '$body',
+  fontWeight: '600',
+  color: 'inherit',
+  variants: {
+    size: {
+      sm: { fontSize: 13 },
+      md: { fontSize: 14 },
+      lg: { fontSize: 16 },
+      xl: { fontSize: 18 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+export function Button({ children, size, ...props }) {
+  return _jsx(ButtonFrame, {
+    size: size,
+    ...props,
+    children: typeof children === 'string' ? _jsx(ButtonText, { size: size, children: children }) : children,
+  })
+}
+Button.displayName = 'Button'

package/dist/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,eAAO,MAAM,IAAI;;;;8CA8Df,CAAA;AAEF,eAAO,MAAM,UAAU,qPAGrB,CAAA;AAEF,eAAO,MAAM,SAAS;;;8CAGpB,CAAA;AAEF,eAAO,MAAM,eAAe;;8CAI1B,CAAA;AAEF,eAAO,MAAM,WAAW,qPAGtB,CAAA;AAEF,eAAO,MAAM,UAAU,qPAOrB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA"}

package/dist/components/Card.js

@@ -0,0 +1,86 @@
+import { styled } from '@tamagui/core'
+import { H3, Stack, Text } from 'tamagui'
+export const Card = styled(Stack, {
+  name: 'Card',
+  backgroundColor: '$card',
+  borderRadius: '$4',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  padding: '$4',
+  gap: '$3',
+  variants: {
+    variant: {
+      default: {},
+      elevated: {
+        shadowColor: '$black',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      },
+      outline: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+      },
+      ghost: {
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+      },
+    },
+    size: {
+      sm: {
+        padding: '$3',
+        gap: '$2',
+      },
+      md: {
+        padding: '$4',
+        gap: '$3',
+      },
+      lg: {
+        padding: '$5',
+        gap: '$4',
+      },
+    },
+    hoverable: {
+      true: {
+        cursor: 'pointer',
+        hoverStyle: {
+          backgroundColor: '$cardHover',
+        },
+        pressStyle: {
+          opacity: 0.9,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+})
+export const CardHeader = styled(Stack, {
+  name: 'CardHeader',
+  gap: '$2',
+})
+export const CardTitle = styled(H3, {
+  name: 'CardTitle',
+  fontWeight: '600',
+})
+export const CardDescription = styled(Text, {
+  name: 'CardDescription',
+  color: '$mutedForeground',
+  fontSize: 14,
+})
+export const CardContent = styled(Stack, {
+  name: 'CardContent',
+  gap: '$3',
+})
+export const CardFooter = styled(Stack, {
+  name: 'CardFooter',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: '$2',
+  paddingTop: '$3',
+})

package/dist/components/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,eAAO,MAAM,UAAU;;;;8CAiErB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA"}

package/dist/components/IconButton.js

@@ -0,0 +1,64 @@
+import { styled } from '@tamagui/core'
+import { Stack } from 'tamagui'
+export const IconButton = styled(Stack, {
+  name: 'IconButton',
+  tag: 'button',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '$2',
+  cursor: 'pointer',
+  pressStyle: {
+    opacity: 0.8,
+    scale: 0.95,
+  },
+  hoverStyle: {
+    backgroundColor: '$backgroundHover',
+  },
+  focusStyle: {
+    outlineWidth: 2,
+    outlineColor: '$primary',
+    outlineStyle: 'solid',
+  },
+  disabledStyle: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: 'transparent',
+      },
+      filled: {
+        backgroundColor: '$secondary',
+      },
+      outline: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+      },
+    },
+    size: {
+      sm: {
+        width: 28,
+        height: 28,
+      },
+      md: {
+        width: 36,
+        height: 36,
+      },
+      lg: {
+        width: 44,
+        height: 44,
+      },
+    },
+    circular: {
+      true: {
+        borderRadius: '$round',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+})

package/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGvC,QAAA,MAAM,UAAU;;;;;;;;;;;8CAwCd,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IACrC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;YARR,MAAM;mBACC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;kBACvB,MAAM;WACb,MAAM,GAAG,QAAQ,GAAG,UAAU;kBACvB,KAAK,CAAC,SAAS;mBACd,KAAK,CAAC,SAAS;oDA2B/B,CAAA"}

package/dist/components/Input.js

@@ -0,0 +1,71 @@
+import { forwardRef } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { styled, XStack } from 'tamagui'
+
+const InputFrame = styled(XStack, {
+  name: 'InputFrame',
+  alignItems: 'center',
+  backgroundColor: '$backgroundHover',
+  borderRadius: '$3',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  paddingHorizontal: '$3',
+  height: 48,
+  gap: '$2',
+  focusWithinStyle: {
+    borderColor: '$primary',
+  },
+  variants: {
+    size: {
+      sm: {
+        height: 36,
+        paddingHorizontal: '$2',
+      },
+      md: {
+        height: 48,
+        paddingHorizontal: '$3',
+      },
+      lg: {
+        height: 56,
+        paddingHorizontal: '$4',
+      },
+    },
+    error: {
+      true: {
+        borderColor: '$red10',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+export const Input = forwardRef(
+  ({ value, onChangeText, placeholder, type = 'text', leftElement, rightElement, size, error, ...props }, ref) => {
+    return _jsxs(InputFrame, {
+      size: size,
+      error: error,
+      ...props,
+      children: [
+        leftElement,
+        _jsx('input', {
+          ref: ref,
+          value: value,
+          onChange: (e) => onChangeText?.(e.target.value),
+          placeholder: placeholder,
+          type: type,
+          style: {
+            flex: 1,
+            backgroundColor: 'transparent',
+            border: 'none',
+            outline: 'none',
+            fontSize: 16,
+            color: 'inherit',
+          },
+        }),
+        rightElement,
+      ],
+    })
+  }
+)
+Input.displayName = 'Input'

package/dist/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAmDA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,UAAU,2CA+CxE"}

package/dist/components/Modal.js

@@ -0,0 +1,98 @@
+import { X } from '@tamagui/lucide-icons'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { Dialog, Stack, styled, Text } from 'tamagui'
+import { IconButton } from './IconButton'
+
+const _Overlay = styled(Stack, {
+  name: 'ModalOverlay',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  justifyContent: 'center',
+  alignItems: 'center',
+  animation: 'quick',
+  opacity: 0,
+  enterStyle: { opacity: 0 },
+  exitStyle: { opacity: 0 },
+})
+const _ModalContent = styled(Stack, {
+  name: 'ModalContent',
+  backgroundColor: '$background',
+  borderRadius: '$4',
+  padding: '$4',
+  width: '100%',
+  maxWidth: 420,
+  maxHeight: '85vh',
+  animation: 'medium',
+  y: 20,
+  opacity: 0,
+  enterStyle: { y: 20, opacity: 0 },
+  exitStyle: { y: 20, opacity: 0 },
+})
+const ModalHeader = styled(Stack, {
+  name: 'ModalHeader',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: '$3',
+})
+const ModalTitle = styled(Text, {
+  name: 'ModalTitle',
+  fontSize: 18,
+  fontWeight: '600',
+  color: '$color',
+})
+export function Modal({ open, onOpenChange, title, children }) {
+  return _jsx(Dialog, {
+    modal: true,
+    open: open,
+    onOpenChange: onOpenChange,
+    children: _jsxs(Dialog.Portal, {
+      children: [
+        _jsx(
+          Dialog.Overlay,
+          { animation: 'quick', opacity: 0.5, enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } },
+          'overlay'
+        ),
+        _jsxs(
+          Dialog.Content,
+          {
+            bordered: true,
+            elevate: true,
+            animation: [
+              'medium',
+              {
+                opacity: {
+                  overshootClamping: true,
+                },
+              },
+            ],
+            enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
+            exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
+            width: '100%',
+            maxWidth: 420,
+            padding: '$4',
+            borderRadius: '$4',
+            children: [
+              title &&
+                _jsxs(ModalHeader, {
+                  children: [
+                    _jsx(Dialog.Title, { children: _jsx(ModalTitle, { children: title }) }),
+                    _jsx(Dialog.Close, {
+                      asChild: true,
+                      children: _jsx(IconButton, { size: 'sm', variant: 'default', children: _jsx(X, { size: 16 }) }),
+                    }),
+                  ],
+                }),
+              children,
+            ],
+          },
+          'content'
+        ),
+      ],
+    }),
+  })
+}

package/dist/components/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,QAAQ;;;;8CA6CnB,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA"}

package/dist/components/Skeleton.js

@@ -0,0 +1,44 @@
+import { Stack, styled } from 'tamagui'
+export const Skeleton = styled(Stack, {
+  name: 'Skeleton',
+  backgroundColor: '$backgroundHover',
+  borderRadius: '$2',
+  animation: 'lazy',
+  // Pulse animation via opacity
+  animateOnly: ['opacity'],
+  opacity: 1,
+  enterStyle: {
+    opacity: 0.5,
+  },
+  variants: {
+    variant: {
+      text: {
+        height: 16,
+        width: '100%',
+      },
+      circular: {
+        borderRadius: 1000,
+      },
+      rectangular: {
+        borderRadius: '$2',
+      },
+    },
+    width: {
+      sm: { width: 60 },
+      md: { width: 100 },
+      lg: { width: 160 },
+      full: { width: '100%' },
+    },
+    height: {
+      sm: { height: 16 },
+      md: { height: 24 },
+      lg: { height: 40 },
+      xl: { height: 60 },
+    },
+  },
+  defaultVariants: {
+    variant: 'rectangular',
+    width: 'full',
+    height: 'md',
+  },
+})

package/dist/components/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,QAAA,MAAM,YAAY;;8CAqChB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAE1C"}

package/dist/components/Spinner.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { Stack, styled } from 'tamagui'
+
+const SpinnerFrame = styled(Stack, {
+  name: 'Spinner',
+  borderWidth: 2,
+  borderColor: '$borderColor',
+  borderTopColor: '$primary',
+  borderRadius: 1000,
+  animation: 'lazy',
+  rotate: '0deg',
+  variants: {
+    size: {
+      sm: {
+        width: 16,
+        height: 16,
+        borderWidth: 2,
+      },
+      md: {
+        width: 24,
+        height: 24,
+        borderWidth: 2,
+      },
+      lg: {
+        width: 32,
+        height: 32,
+        borderWidth: 3,
+      },
+      xl: {
+        width: 48,
+        height: 48,
+        borderWidth: 4,
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+export function Spinner(props) {
+  return _jsx(SpinnerFrame, { ...props })
+}

package/dist/components/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,GAAG;IACnD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAY5D"}

package/dist/components/Switch.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { Switch as TSwitch } from 'tamagui'
+export function Switch({ size = 'md', ...props }) {
+  const sizeMap = {
+    sm: '$2',
+    md: '$3',
+    lg: '$4',
+  }
+  return _jsx(TSwitch, { size: sizeMap[size], ...props, children: _jsx(TSwitch.Thumb, { animation: 'quick' }) })
+}

package/dist/components/TokenLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenLogo.d.ts","sourceRoot":"","sources":["../../src/components/TokenLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,QAAA,MAAM,cAAc;;8CAqBlB,CAAA;AA4BF,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,GAAG;IAC7D,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAY5E;yBAZe,SAAS"}

package/dist/components/TokenLogo.js

@@ -0,0 +1,57 @@
+import { styled } from '@tamagui/core'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { Image, Stack, Text } from 'tamagui'
+
+const TokenLogoFrame = styled(Stack, {
+  name: 'TokenLogo',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '$round',
+  overflow: 'hidden',
+  backgroundColor: '$muted',
+  variants: {
+    size: {
+      xs: { width: 20, height: 20 },
+      sm: { width: 24, height: 24 },
+      md: { width: 32, height: 32 },
+      lg: { width: 40, height: 40 },
+      xl: { width: 48, height: 48 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+const TokenImage = styled(Image, {
+  name: 'TokenImage',
+  width: '100%',
+  height: '100%',
+})
+const TokenFallback = styled(Text, {
+  name: 'TokenFallback',
+  fontWeight: '600',
+  color: '$mutedForeground',
+  variants: {
+    size: {
+      xs: { fontSize: 8 },
+      sm: { fontSize: 10 },
+      md: { fontSize: 12 },
+      lg: { fontSize: 14 },
+      xl: { fontSize: 16 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+export function TokenLogo({ symbol, logoURI, size, ...props }) {
+  const fallbackText = symbol.slice(0, 3).toUpperCase()
+  return _jsx(TokenLogoFrame, {
+    size: size,
+    ...props,
+    children: logoURI
+      ? _jsx(TokenImage, { source: { uri: logoURI } })
+      : _jsx(TokenFallback, { size: size, children: fallbackText }),
+  })
+}
+TokenLogo.displayName = 'TokenLogo'

package/dist/components/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAW,EAAE,EAAE,YAAY,2CAUvE"}

package/dist/components/Tooltip.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { Paragraph, styled, Tooltip as TTooltip } from 'tamagui'
+
+const TooltipContent = styled(TTooltip.Content, {
+  name: 'TooltipContent',
+  backgroundColor: '$background',
+  borderRadius: '$2',
+  paddingHorizontal: '$3',
+  paddingVertical: '$2',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  enterStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
+  exitStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
+  animation: [
+    'quick',
+    {
+      opacity: {
+        overshootClamping: true,
+      },
+    },
+  ],
+})
+const TooltipArrow = styled(TTooltip.Arrow, {
+  name: 'TooltipArrow',
+})
+export function Tooltip({ content, children, delay = 300 }) {
+  return _jsxs(TTooltip, {
+    delay: delay,
+    children: [
+      _jsx(TTooltip.Trigger, { asChild: true, children: children }),
+      _jsxs(TooltipContent, { children: [_jsx(TooltipArrow, {}), _jsx(Paragraph, { size: '$2', children: content })] }),
+    ],
+  })
+}

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAGhD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAGtD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAGtD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA"}

package/dist/components/index.js

@@ -0,0 +1,19 @@
+/**
+ * UI Components
+ */
+// Core components
+
+export { Badge } from './Badge'
+export { Button } from './Button'
+export { Card } from './Card'
+export { IconButton } from './IconButton'
+export { Input } from './Input'
+// Feedback components
+export { Modal } from './Modal'
+export { Skeleton } from './Skeleton'
+export { Spinner } from './Spinner'
+// Form components
+export { Switch } from './Switch'
+// Display components
+export { TokenLogo } from './TokenLogo'
+export { Tooltip } from './Tooltip'

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,SAAS,CAAA;AAGvB,cAAc,cAAc,CAAA;AAG5B,OAAO,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,EACJ,SAAS,EACT,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,SAAS,EACT,OAAO,EACP,UAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -0,0 +1,36 @@
+/**
+ * @luxfi/ui - Tamagui-based UI components for Lux Exchange
+ *
+ * This package provides cross-platform UI components that work on
+ * web, iOS, and Android using Tamagui.
+ */
+// Theme
+
+// Re-export Tamagui primitives
+export {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Image,
+  Input,
+  Label,
+  Paragraph,
+  ScrollView,
+  Separator,
+  Spinner,
+  Stack,
+  Text,
+  TextArea,
+  Theme,
+  useMedia,
+  useTheme,
+  XStack,
+  YStack,
+  ZStack,
+} from 'tamagui'
+// Components
+export * from './components'
+export * from './theme'

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA"}

package/dist/theme/index.js

@@ -0,0 +1,6 @@
+/**
+ * Theme exports
+ */
+
+export * from './themes'
+export * from './tokens'

package/dist/theme/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/theme/themes.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCrB,CAAA;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCpB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,UAAU,CAAA"}

package/dist/theme/themes.js

@@ -0,0 +1,73 @@
+import { createTheme } from '@tamagui/core'
+/**
+ * Light theme
+ */
+export const lightTheme = createTheme({
+  background: '#FFFFFF',
+  backgroundHover: '#F4F4F5',
+  backgroundPress: '#E4E4E7',
+  backgroundFocus: '#F4F4F5',
+  backgroundStrong: '#FAFAFA',
+  backgroundTransparent: 'transparent',
+  color: '#09090B',
+  colorHover: '#18181B',
+  colorPress: '#27272A',
+  colorFocus: '#18181B',
+  colorTransparent: 'transparent',
+  borderColor: '#E4E4E7',
+  borderColorHover: '#D4D4D8',
+  borderColorPress: '#A1A1AA',
+  borderColorFocus: '#FF6B00',
+  placeholderColor: '#A1A1AA',
+  // Semantic
+  primary: '#FF6B00',
+  primaryHover: '#FF8C00',
+  secondary: '#F4F4F5',
+  secondaryHover: '#E4E4E7',
+  success: '#22C55E',
+  warning: '#F59E0B',
+  error: '#EF4444',
+  info: '#3B82F6',
+  // Card
+  card: '#FFFFFF',
+  cardHover: '#FAFAFA',
+  // Muted
+  muted: '#F4F4F5',
+  mutedForeground: '#71717A',
+})
+/**
+ * Dark theme
+ */
+export const darkTheme = createTheme({
+  background: '#09090B',
+  backgroundHover: '#18181B',
+  backgroundPress: '#27272A',
+  backgroundFocus: '#18181B',
+  backgroundStrong: '#0A0A0A',
+  backgroundTransparent: 'transparent',
+  color: '#FAFAFA',
+  colorHover: '#FFFFFF',
+  colorPress: '#E4E4E7',
+  colorFocus: '#FFFFFF',
+  colorTransparent: 'transparent',
+  borderColor: '#27272A',
+  borderColorHover: '#3F3F46',
+  borderColorPress: '#52525B',
+  borderColorFocus: '#FF6B00',
+  placeholderColor: '#71717A',
+  // Semantic
+  primary: '#FF6B00',
+  primaryHover: '#FF8C00',
+  secondary: '#27272A',
+  secondaryHover: '#3F3F46',
+  success: '#22C55E',
+  warning: '#F59E0B',
+  error: '#EF4444',
+  info: '#3B82F6',
+  // Card
+  card: '#18181B',
+  cardHover: '#27272A',
+  // Muted
+  muted: '#27272A',
+  mutedForeground: '#A1A1AA',
+})

package/dist/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAuGjB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,MAAM,CAAA"}

package/dist/theme/tokens.js

@@ -0,0 +1,101 @@
+import { createTokens } from '@tamagui/core'
+/**
+ * Design tokens for Lux Exchange
+ * Based on Tailwind/shadcn design system
+ */
+export const tokens = createTokens({
+  color: {
+    // Brand colors
+    luxPrimary: '#FF6B00',
+    luxSecondary: '#FF8C00',
+    // Base colors
+    white: '#FFFFFF',
+    black: '#000000',
+    // Gray scale
+    gray50: '#FAFAFA',
+    gray100: '#F4F4F5',
+    gray200: '#E4E4E7',
+    gray300: '#D4D4D8',
+    gray400: '#A1A1AA',
+    gray500: '#71717A',
+    gray600: '#52525B',
+    gray700: '#3F3F46',
+    gray800: '#27272A',
+    gray900: '#18181B',
+    gray950: '#09090B',
+    // Semantic colors
+    success: '#22C55E',
+    successDark: '#16A34A',
+    warning: '#F59E0B',
+    warningDark: '#D97706',
+    error: '#EF4444',
+    errorDark: '#DC2626',
+    info: '#3B82F6',
+    infoDark: '#2563EB',
+    // Transparent
+    transparent: 'transparent',
+  },
+  space: {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    24: 96,
+    28: 112,
+    32: 128,
+    true: 16,
+  },
+  size: {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    true: 16,
+  },
+  radius: {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    round: 9999,
+    true: 8,
+  },
+  zIndex: {
+    0: 0,
+    1: 100,
+    2: 200,
+    3: 300,
+    4: 400,
+    5: 500,
+    modal: 1000,
+    popover: 1100,
+    tooltip: 1200,
+  },
+})

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@luxfi/ui",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "dependencies": {
     "@gorhom/bottom-sheet": "4.6.4",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@shopify/flash-list": "1.7.6",
     "@shopify/react-native-skia": "2.2.20",
     "@storybook/react": "8.5.2",
-    "@hanzogui/adapt": "2.0.1",
-    "@hanzogui/animations-css": "2.0.1",
-    "@hanzogui/animations-react-native": "2.0.1",
-    "@hanzogui/font-geist-sans": "2.0.1",
-    "@hanzogui/helpers-icon": "2.0.1",
-    "@hanzogui/portal": "2.0.1",
-    "@hanzogui/react-native-media-driver": "2.0.1",
-    "@hanzogui/remove-scroll": "2.0.1",
-    "@hanzogui/theme-base": "2.0.1",
+    "@hanzogui/adapt": "2.0.3",
+    "@hanzogui/animations-css": "2.0.3",
+    "@hanzogui/animations-react-native": "2.0.3",
+    "@hanzogui/font-geist-sans": "2.0.3",
+    "@hanzogui/helpers-icon": "2.0.3",
+    "@hanzogui/portal": "2.0.3",
+    "@hanzogui/react-native-media-driver": "2.0.3",
+    "@hanzogui/remove-scroll": "2.0.3",
+    "@hanzogui/theme-base": "2.0.3",
     "@tanstack/react-query": "5.90.20",
     "@testing-library/react": "16.3.0",
     "ethers": "5.7.2",
@@ -34,21 +34,21 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-svg": "15.13.0",
     "react-native-webview": "13.13.5",
-    "@hanzo/gui": "2.0.1",
-    "@luxfi/utilities": "^1.0.0",
+    "@hanzo/gui": "2.0.3",
+    "@luxfi/utilities": "workspace:^",
     "uuid": "9.0.0",
     "wcag-contrast": "3.0.0"
   },
   "devDependencies": {
     "@storybook/test": "8.5.2",
-    "@hanzogui/animations-moti": "2.0.1",
-    "@hanzogui/core": "2.0.1",
+    "@hanzogui/animations-moti": "2.0.3",
+    "@hanzogui/core": "2.0.3",
     "@types/chrome": "0.0.304",
     "@types/fs-extra": "11.0.2",
     "@types/node": "22.13.1",
     "@types/qrcode": "1.5.5",
     "@typescript/native-preview": "7.0.0-dev.20260108.1",
-    "@luxfi/eslint-config": "^1.0.0",
+    "@luxfi/eslint-config": "workspace:^",
     "@vitejs/plugin-react": "4.7.0",
     "camelcase": "6.3.0",
     "cheerio": "1.0.0-rc.12",
@@ -59,7 +59,7 @@
     "typescript": "5.8.3",
     "uppercamelcase": "3.0.0",
     "vitest": "3.2.1",
-    "vitest-presets": "*"
+    "vitest-presets": "workspace:^"
   },
   "files": ["types", "dist"],
   "main": "./src/index.ts",

package/README.md

@@ -1,109 +0,0 @@
-# `ui` Package
-
-This package holds a component library and themes that can be used across all apps.
-
-## UI Package Philosophy
-
-The `ui` package contains all low level components that are shared between apps. It should *not* contain components that are specific to any one app or Uniswap business logic. Each component should be guided by the following principles:
-
-- All components should be compatible with all platforms.
-- Wrap as many implementation details as possible, including any direct exports from Tamagui.
-- Export only what’s needed from `ui/src` or another allowlisted path.
-- Only include components that will be used beyond a single feature.
-
-Components that are shared between all applications but encode Uniswap business logic should most likely be placed in the `uniswap` package!
-
-## Icons and Logos
-
-Icons and logos are placed in `ui/src/components/{icons|logos}`. These files are generated from placing the file in `packages/ui/src/assets/icons` or `packages/ui/src/assets/logos/svg` and running the generate command(s):
-
-```bash
-# Generate all icons
-bun ui build:icons
-# Generate any icons that do not yet have an existing TS file
-bun ui build:icons:missing
-```
-
-When adding an SVG, please ensure you replace color references as needed with `currentColor` to ensure the asset respects the color property when used.
-
-Custom icons that take props can be added to the same icons import by adding the file in `packages/ui/src/components/icons/index.ts`.
-
-## Core Components
-
-Many base components are available in the UI library. While some are customized `tamagui` elements or even fully custom elements, many are simple or direct exposure of `tamagui` elements. If you would like to use any `tamagui` elements, please add them through this library to ensure a layer of abstraction between tamagui and our usage when possible.
-
-Below are summaries of the most commonly used elements.
-
-### Flex
-
-The `Flex` component is the core organizational element of the UI library, acting as a base of a flexbox styling approach. Shortcuts are available for `row`, `grow`, `shrink`, `fill`, and `centered`. All other styling props can be added directly as needed.
-
-### Text
-
-The `Text` element is the core element for displaying text through the app. The `variant` prop takes in the text variant from our design system (e.g `heading1`, `body2`, etc.) that is desired. All other text styling props can be added directly as needed.
-
-## Theme and Platform
-
-### Theming
-
-Theming is applied through two primary methods:
-
-1. Any components that take in design systems values (e.g `heading1`, `body2`, etc.) will automatically respect the theme.
-2. In all other cases, `useSporeColors` will return the current theme colors to be used in any component.
-
-To force a specific theme usage, the `Theme` wrapper will ensure other theme elements pick up the specific theme.
-
-```javascript
-<Theme name="dark">
-  ...
-</Theme>
-```
-
-### Screen Size Differences
-
-All breakpoints for both vertical and horizontal sizing have been defined in `packages/ui/src/theme/breakpoints.ts`.
-
-To account for screen size references, components take in props to adapt custom style per breakpoint, like so:
-
-```javascript
-<Flex
-  margin="20"
-  $short={{ margin: 10 }}
->
-  ...
-</Flex>
-```
-
-When components cannot take in these props or a value needs to be resued multiple times, the `useMedia` hook allows these same breakpoint values to be defined programmatically.
-
-### Colors
-
-We've made a hook `useSporeColors()` which gives you access to the current theme, and you can access the values off it as follows:
-
-```tsx
-import { useSporeColors } from 'ui/src'
-
-function MyComponent() {
-  const colors = useSporeColors()
-
-  colors.accent1.val // returns something like #fff
-  colors.accent1.get() // returns a "dynamic" color value
-}
-```
-
-#### When to use `.get()` vs `.val`
-
-After some discussion we've come to prefer `.val` by default. This will always return the raw string color (in our case hex color) on all platforms, whereas `.get()` returns either an Object (iOS) or a string, which can cause issues when used with things like animations, or external components.
-
-Using .val has some performance downside vs .get in that all usages of .val will re-render when themes change, whereas .get will avoid re-renders on iOS and Web by optimizing to platform-specific constructs. On iOS, it optimizes to [DynamicColorIOS](https://reactnative.dev/docs/dynamiccolorios), on web a CSS variable like `var(--accent1)`.
-
-So if/when we notice slowness in our light/dark mode change, we'll want to check if our usages of .val are causing expensive re-renders and see if we can convert them to .get.
-
-In summary:
-
-- Prefer `.val` which always returns the original color string, like `#fff`.
-- Using `.get()` returns a dynamic value depending on the platform and avoids re-rendering when themes change between light and dark. This is nice for fast light/dark mode switching (and in the future if we use sub-themes, it would also avoid re-renders there).
-  - On Android it returns the same as .val, `#fff`
-  - On iOS, it returns an object like `{ dynamic: { light: '#fff', dark: '#000' } }`
-  - On the web, it returns a CSS variable string, `var(--colorName)`
-  - You can call `.get('web')` to only optimize for web, or `.get('ios')` to only optimize for ios.