UNPKG

@tuwaio/nova-transactions

Version:

A React component library that provides the UI for @tuwaio/pulsar-core. Includes components, providers, and i18n support for transaction tracking.

795 lines (794 loc) 21.5 kB
/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --novatx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --novatx-color-gray-400: oklch(70.7% 0.022 261.325); --novatx-color-gray-500: oklch(55.1% 0.027 264.364); --novatx-color-white: #fff; --novatx-spacing: 0.25rem; --novatx-container-md: 28rem; --novatx-container-2xl: 42rem; --novatx-text-xs: 0.75rem; --novatx-text-xs--line-height: calc(1 / 0.75); --novatx-text-sm: 0.875rem; --novatx-text-sm--line-height: calc(1.25 / 0.875); --novatx-text-lg: 1.125rem; --novatx-text-lg--line-height: calc(1.75 / 1.125); --novatx-font-weight-medium: 500; --novatx-font-weight-semibold: 600; --novatx-font-weight-bold: 700; --novatx-radius-md: 0.375rem; --novatx-radius-lg: 0.5rem; --novatx-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --novatx-animate-spin: spin 1s linear infinite; --novatx-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --novatx-default-transition-duration: 150ms; --novatx-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } } @layer utilities { .novatx\:absolute { position: absolute; } .novatx\:relative { position: relative; } .novatx\:top-\[10px\] { top: 10px; } .novatx\:right-1\/2 { right: calc(1/2 * 100%); } .novatx\:z-10 { z-index: 10; } .novatx\:mt-1 { margin-top: calc(var(--novatx-spacing) * 1); } .novatx\:mt-2 { margin-top: calc(var(--novatx-spacing) * 2); } .novatx\:mt-3 { margin-top: calc(var(--novatx-spacing) * 3); } .novatx\:mb-1 { margin-bottom: calc(var(--novatx-spacing) * 1); } .novatx\:mb-2 { margin-bottom: calc(var(--novatx-spacing) * 2); } .novatx\:block { display: block; } .novatx\:flex { display: flex; } .novatx\:inline-flex { display: inline-flex; } .novatx\:h-0\.5 { height: calc(var(--novatx-spacing) * 0.5); } .novatx\:h-2 { height: calc(var(--novatx-spacing) * 2); } .novatx\:h-3 { height: calc(var(--novatx-spacing) * 3); } .novatx\:h-4 { height: calc(var(--novatx-spacing) * 4); } .novatx\:h-5 { height: calc(var(--novatx-spacing) * 5); } .novatx\:h-8 { height: calc(var(--novatx-spacing) * 8); } .novatx\:h-10 { height: calc(var(--novatx-spacing) * 10); } .novatx\:h-16 { height: calc(var(--novatx-spacing) * 16); } .novatx\:max-h-24 { max-height: calc(var(--novatx-spacing) * 24); } .novatx\:max-h-\[95dvh\] { max-height: 95dvh; } .novatx\:max-h-\[400px\] { max-height: 400px; } .novatx\:\!min-h-0 { min-height: calc(var(--novatx-spacing) * 0) !important; } .novatx\:w-2 { width: calc(var(--novatx-spacing) * 2); } .novatx\:w-3 { width: calc(var(--novatx-spacing) * 3); } .novatx\:w-4 { width: calc(var(--novatx-spacing) * 4); } .novatx\:w-5 { width: calc(var(--novatx-spacing) * 5); } .novatx\:w-8 { width: calc(var(--novatx-spacing) * 8); } .novatx\:w-10 { width: calc(var(--novatx-spacing) * 10); } .novatx\:w-16 { width: calc(var(--novatx-spacing) * 16); } .novatx\:w-\[40px\] { width: 40px; } .novatx\:w-full { width: 100%; } .novatx\:min-w-\[80px\] { min-width: 80px; } .novatx\:flex-1 { flex: 1; } .novatx\:flex-shrink-0 { flex-shrink: 0; } .novatx\:animate-pulse { animation: var(--novatx-animate-pulse); } .novatx\:animate-spin { animation: var(--novatx-animate-spin); } .novatx\:cursor-pointer { cursor: pointer; } .novatx\:flex-col { flex-direction: column; } .novatx\:items-center { align-items: center; } .novatx\:items-start { align-items: flex-start; } .novatx\:justify-between { justify-content: space-between; } .novatx\:justify-center { justify-content: center; } .novatx\:justify-end { justify-content: flex-end; } .novatx\:gap-1\.5 { gap: calc(var(--novatx-spacing) * 1.5); } .novatx\:gap-2 { gap: calc(var(--novatx-spacing) * 2); } .novatx\:gap-3 { gap: calc(var(--novatx-spacing) * 3); } .novatx\:gap-4 { gap: calc(var(--novatx-spacing) * 4); } .novatx\:gap-x-1 { -moz-column-gap: calc(var(--novatx-spacing) * 1); column-gap: calc(var(--novatx-spacing) * 1); } .novatx\:gap-x-1\.5 { -moz-column-gap: calc(var(--novatx-spacing) * 1.5); column-gap: calc(var(--novatx-spacing) * 1.5); } .novatx\:gap-x-2 { -moz-column-gap: calc(var(--novatx-spacing) * 2); column-gap: calc(var(--novatx-spacing) * 2); } .novatx\:gap-y-2 { row-gap: calc(var(--novatx-spacing) * 2); } .novatx\:gap-y-3 { row-gap: calc(var(--novatx-spacing) * 3); } .novatx\:overflow-y-auto { overflow-y: auto; } .novatx\:rounded { border-radius: 0.25rem; } .novatx\:rounded-full { border-radius: calc(infinity * 1px); } .novatx\:rounded-lg { border-radius: var(--novatx-radius-lg); } .novatx\:rounded-md { border-radius: var(--novatx-radius-md); } .novatx\:rounded-t-md { border-top-left-radius: var(--novatx-radius-md); border-top-right-radius: var(--novatx-radius-md); } .novatx\:border { border-style: var(--tw-border-style); border-width: 1px; } .novatx\:border-2 { border-style: var(--tw-border-style); border-width: 2px; } .novatx\:border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .novatx\:border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .novatx\:border-\[var\(--tuwa-border-primary\)\] { border-color: var(--tuwa-border-primary); } .novatx\:border-\[var\(--tuwa-border-secondary\)\] { border-color: var(--tuwa-border-secondary); } .novatx\:border-\[var\(--tuwa-error-icon\)\] { border-color: var(--tuwa-error-icon); } .novatx\:border-\[var\(--tuwa-error-icon\)\]\/30 { border-color: var(--tuwa-error-icon); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--tuwa-error-icon) 30%, transparent); } } .novatx\:border-\[var\(--tuwa-info-icon\)\] { border-color: var(--tuwa-info-icon); } .novatx\:border-\[var\(--tuwa-pending-icon\)\] { border-color: var(--tuwa-pending-icon); } .novatx\:border-\[var\(--tuwa-success-icon\)\] { border-color: var(--tuwa-success-icon); } .novatx\:\!bg-transparent { background-color: transparent !important; } .novatx\:bg-\[var\(--tuwa-bg-muted\)\] { background-color: var(--tuwa-bg-muted); } .novatx\:bg-\[var\(--tuwa-bg-primary\)\] { background-color: var(--tuwa-bg-primary); } .novatx\:bg-\[var\(--tuwa-border-primary\)\] { background-color: var(--tuwa-border-primary); } .novatx\:bg-\[var\(--tuwa-error-bg\)\] { background-color: var(--tuwa-error-bg); } .novatx\:bg-\[var\(--tuwa-error-icon\)\] { background-color: var(--tuwa-error-icon); } .novatx\:bg-\[var\(--tuwa-info-bg\)\] { background-color: var(--tuwa-info-bg); } .novatx\:bg-\[var\(--tuwa-info-icon\)\] { background-color: var(--tuwa-info-icon); } .novatx\:bg-\[var\(--tuwa-pending-bg\)\] { background-color: var(--tuwa-pending-bg); } .novatx\:bg-\[var\(--tuwa-pending-icon\)\] { background-color: var(--tuwa-pending-icon); } .novatx\:bg-\[var\(--tuwa-success-bg\)\] { background-color: var(--tuwa-success-bg); } .novatx\:bg-\[var\(--tuwa-success-icon\)\] { background-color: var(--tuwa-success-icon); } .novatx\:bg-gray-400 { background-color: var(--novatx-color-gray-400); } .novatx\:bg-gray-500 { background-color: var(--novatx-color-gray-500); } .novatx\:bg-transparent { background-color: transparent; } .novatx\:bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .novatx\:from-\[var\(--tuwa-button-gradient-from\)\] { --tw-gradient-from: var(--tuwa-button-gradient-from); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .novatx\:to-\[var\(--tuwa-button-gradient-to\)\] { --tw-gradient-to: var(--tuwa-button-gradient-to); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .novatx\:\!p-0 { padding: calc(var(--novatx-spacing) * 0) !important; } .novatx\:p-1 { padding: calc(var(--novatx-spacing) * 1); } .novatx\:p-2 { padding: calc(var(--novatx-spacing) * 2); } .novatx\:p-3 { padding: calc(var(--novatx-spacing) * 3); } .novatx\:p-4 { padding: calc(var(--novatx-spacing) * 4); } .novatx\:p-8 { padding: calc(var(--novatx-spacing) * 8); } .novatx\:px-2 { padding-inline: calc(var(--novatx-spacing) * 2); } .novatx\:px-3 { padding-inline: calc(var(--novatx-spacing) * 3); } .novatx\:px-4 { padding-inline: calc(var(--novatx-spacing) * 4); } .novatx\:py-1 { padding-block: calc(var(--novatx-spacing) * 1); } .novatx\:py-1\.5 { padding-block: calc(var(--novatx-spacing) * 1.5); } .novatx\:py-2 { padding-block: calc(var(--novatx-spacing) * 2); } .novatx\:py-4 { padding-block: calc(var(--novatx-spacing) * 4); } .novatx\:pt-2 { padding-top: calc(var(--novatx-spacing) * 2); } .novatx\:pt-3 { padding-top: calc(var(--novatx-spacing) * 3); } .novatx\:pr-1 { padding-right: calc(var(--novatx-spacing) * 1); } .novatx\:pb-1 { padding-bottom: calc(var(--novatx-spacing) * 1); } .novatx\:text-center { text-align: center; } .novatx\:font-mono { font-family: var(--novatx-font-mono); } .novatx\:text-lg { font-size: var(--novatx-text-lg); line-height: var(--tw-leading, var(--novatx-text-lg--line-height)); } .novatx\:text-sm { font-size: var(--novatx-text-sm); line-height: var(--tw-leading, var(--novatx-text-sm--line-height)); } .novatx\:text-xs { font-size: var(--novatx-text-xs); line-height: var(--tw-leading, var(--novatx-text-xs--line-height)); } .novatx\:font-bold { --tw-font-weight: var(--novatx-font-weight-bold); font-weight: var(--novatx-font-weight-bold); } .novatx\:font-medium { --tw-font-weight: var(--novatx-font-weight-medium); font-weight: var(--novatx-font-weight-medium); } .novatx\:font-semibold { --tw-font-weight: var(--novatx-font-weight-semibold); font-weight: var(--novatx-font-weight-semibold); } .novatx\:break-all { word-break: break-all; } .novatx\:text-\[var\(--tuwa-error-icon\)\] { color: var(--tuwa-error-icon); } .novatx\:text-\[var\(--tuwa-error-icon\)\]\/50 { color: var(--tuwa-error-icon); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--tuwa-error-icon) 50%, transparent); } } .novatx\:text-\[var\(--tuwa-error-text\)\] { color: var(--tuwa-error-text); } .novatx\:text-\[var\(--tuwa-info-icon\)\] { color: var(--tuwa-info-icon); } .novatx\:text-\[var\(--tuwa-info-text\)\] { color: var(--tuwa-info-text); } .novatx\:text-\[var\(--tuwa-pending-icon\)\] { color: var(--tuwa-pending-icon); } .novatx\:text-\[var\(--tuwa-pending-text\)\] { color: var(--tuwa-pending-text); } .novatx\:text-\[var\(--tuwa-success-icon\)\] { color: var(--tuwa-success-icon); } .novatx\:text-\[var\(--tuwa-success-text\)\] { color: var(--tuwa-success-text); } .novatx\:text-\[var\(--tuwa-text-accent\)\] { color: var(--tuwa-text-accent); } .novatx\:text-\[var\(--tuwa-text-on-accent\)\] { color: var(--tuwa-text-on-accent); } .novatx\:text-\[var\(--tuwa-text-primary\)\] { color: var(--tuwa-text-primary); } .novatx\:text-\[var\(--tuwa-text-secondary\)\] { color: var(--tuwa-text-secondary); } .novatx\:text-\[var\(--tuwa-text-tertiary\)\] { color: var(--tuwa-text-tertiary); } .novatx\:text-white { color: var(--novatx-color-white); } .novatx\:\!shadow-none { --tw-shadow: 0 0 #0000 !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .novatx\:shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .novatx\:shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .novatx\:transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--novatx-default-transition-timing-function)); transition-duration: var(--tw-duration, var(--novatx-default-transition-duration)); } .novatx\:transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--novatx-default-transition-timing-function)); transition-duration: var(--tw-duration, var(--novatx-default-transition-duration)); } .novatx\:transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--novatx-default-transition-timing-function)); transition-duration: var(--tw-duration, var(--novatx-default-transition-duration)); } .novatx\:duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } .novatx\:ease-in-out { --tw-ease: var(--novatx-ease-in-out); transition-timing-function: var(--novatx-ease-in-out); } .novatx\:hover\:bg-\[var\(--tuwa-bg-muted\)\] { &:hover { @media (hover: hover) { background-color: var(--tuwa-bg-muted); } } } .novatx\:hover\:bg-\[var\(--tuwa-bg-secondary\)\] { &:hover { @media (hover: hover) { background-color: var(--tuwa-bg-secondary); } } } .novatx\:hover\:bg-\[var\(--tuwa-border-primary\)\] { &:hover { @media (hover: hover) { background-color: var(--tuwa-border-primary); } } } .novatx\:hover\:from-\[var\(--tuwa-button-gradient-from-hover\)\] { &:hover { @media (hover: hover) { --tw-gradient-from: var(--tuwa-button-gradient-from-hover); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } } .novatx\:hover\:to-\[var\(--tuwa-button-gradient-to-hover\)\] { &:hover { @media (hover: hover) { --tw-gradient-to: var(--tuwa-button-gradient-to-hover); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } } .novatx\:hover\:text-\[var\(--tuwa-error-icon\)\] { &:hover { @media (hover: hover) { color: var(--tuwa-error-icon); } } } .novatx\:hover\:text-\[var\(--tuwa-text-primary\)\] { &:hover { @media (hover: hover) { color: var(--tuwa-text-primary); } } } .novatx\:hover\:text-\[var\(--tuwa-text-secondary\)\] { &:hover { @media (hover: hover) { color: var(--tuwa-text-secondary); } } } .novatx\:hover\:underline { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } .novatx\:hover\:opacity-80 { &:hover { @media (hover: hover) { opacity: 80%; } } } .novatx\:hover\:opacity-90 { &:hover { @media (hover: hover) { opacity: 90%; } } } .novatx\:hover\:shadow-xl { &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .novatx\:active\:scale-95 { &:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .novatx\:disabled\:cursor-not-allowed { &:disabled { cursor: not-allowed; } } .novatx\:disabled\:opacity-50 { &:disabled { opacity: 50%; } } .novatx\:disabled\:opacity-70 { &:disabled { opacity: 70%; } } .novatx\:sm\:max-w-2xl { @media (width >= 40rem) { max-width: var(--novatx-container-2xl); } } .novatx\:sm\:max-w-md { @media (width >= 40rem) { max-width: var(--novatx-container-md); } } .novatx\:sm\:rounded-md { @media (width >= 40rem) { border-radius: var(--novatx-radius-md); } } } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-font-weight: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-duration: initial; --tw-ease: initial; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; } } }