@hyperbridge/ui 0.0.2

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@hyperbridge/ui",
+  "version": "0.0.2",
+  "sideEffects": false,
+  "license": "MIT",
+  "private": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./base": "./styles/base.css",
+    "./icons": {
+      "types": "./dist/icons/index.d.mts",
+      "import": "./dist/icons/index.mjs"
+    }
+  },
+  "files": [
+    "dist/*",
+    "styles/*"
+  ],
+  "devDependencies": {
+    "@svgr/cli": "^6.5.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.3",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/ui": "^3.1.2",
+    "eslint": "^8.57.0",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.0.2",
+    "typescript": "5.8.3",
+    "vite": "^6.3.4",
+    "vitest": "^3.1.2",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@unpic/react": "^1.0.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.507.0",
+    "motion": "^12.17.0",
+    "react": "^19.1.0",
+    "tailwind-merge": "^3.3.0",
+    "tw-animate-css": "^1.2.9",
+    "vaul": "^1.1.2",
+    "viem": "^2.31.6"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf .turbo node_modules dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "svg:convert": "svgr --icon --typescript --ignore-existing --memo --out-dir ./src/components/icons -- ./src/assets",
+    "prepublish": "pnpm tsc --noEmit && pnpm run build"
+  }
+}

package/styles/base.css

@@ -0,0 +1,292 @@
+@import "./shadcn.css";
+@import "tailwindcss";
+
+@source "../src/";
+
+@theme {
+  /* Fonts */
+  --font-heading: "Novatica", "sans-serif";
+  --font-heading-alt: "Aeonik", "sans-serif";
+
+  /* Colors */
+  --color-primary: oklch(57.27% 0.222 263);
+  --color-foreground: #ffffff;
+  --color-muted-foreground: #929daa;
+
+  --color-background: #131417;
+
+  --color-brand-neutral-200: #c3c6cc;
+  --color-brand-white-400: oklch(0.9551 0 0);
+  --color-brand-white-500: oklch(1 0 0);
+
+  --color-brand-black-100: oklch(0.6914 0.0229 252.57);
+  --color-brand-black-200: oklch(0.3772 0.0245 272.64);
+  --color-brand-black-300: oklch(0.3227 0.02 273.23);
+  --color-brand-black-350: oklch(0.2593 0.0144 261.67);
+  --color-brand-black-500: oklch(0.243 0.0123 264.31);
+  --color-brand-black-550: oklch(0.2212 0.0108 260.68);
+  --color-brand-black-600: oklch(0.1915 0.0062 271.08);
+
+  --color-brand-success-400: oklch(0.8939 0.2249 141.13);
+
+  --color-brand-danger-200: oklch(0.2351 0.0411 340.53);
+  --color-brand-danger-500: oklch(0.6586 0.231 15.83);
+
+  --color-brand-warning-500: oklch(0.8372 0.171 85.15);
+
+  --color-brand-card-100: oklch(0.2939 0.0169 270.78);
+
+  /* Text */
+  /*
+    --text-tiny: 0.625rem;
+    --text-tiny--font-weight: 500;
+    --text-tiny--line-height: 1.5rem;
+    --text-tiny--letter-spacing: 0.125rem;
+    */
+  --text-display: 4.5rem;
+  --text-display--line-height: 120%;
+
+  --text-h1: 3.5rem;
+  --text-h1--line-height: 110%;
+
+  --text-h2: 3rem;
+  --text-h2--line-height: 120%;
+
+  --text-h3: 2.375rem;
+  --text-h3--line-height: 120%;
+
+  --text-h4: 2rem;
+  --text-h4--line-height: 120%;
+
+  --text-h5: 1.75rem;
+  --text-h5--line-height: 2.25rem;
+
+  --text-h6: 1.5rem;
+  --text-h6--line-height: 2rem;
+
+  --text-h7: 1.25rem;
+
+  --text-body: 1rem;
+  --text-body--line-height: 1.25rem;
+
+  --text-body-2: 0.875rem;
+
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1rem;
+
+  --text-caption-2: 0.6875rem;
+  --text-caption-2--line-height: 1rem;
+  /* End Text */
+
+  /* Breakpoints */
+  --breakpoint-3xl: 120rem;
+
+  /* Gradients */
+  --gradient-brand: linear-gradient(
+    90deg,
+    #ffffff 0%,
+    #ffffff 10%,
+    #4adeff 29.71%,
+    #ff35eb 78.68%,
+    #ffed4a 100%
+  );
+
+  /* Breakpoints */
+  --breakpoint-3xl: 120rem;
+
+  /* Animations */
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+}
+
+@keyframes gradient-slide {
+  0% {
+    background: linear-gradient(
+      90deg,
+      #ffffff 0%,
+      #4adeff 29.71%,
+      #ff35eb 78.68%,
+      #ffed4a 100%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+  }
+
+  50% {
+    background-position: 100% 0%;
+  }
+
+  100% {
+    background-image: linear-gradient(
+      90deg,
+      #ffffff 0%,
+      #4adeff 29.71%,
+      #ff35eb 78.68%,
+      #ffed4a 100%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+  }
+}
+
+@keyframes brand-gradient-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Superellipse  */
+.superellipse {
+  border-radius: var(--superellipse-radius);
+}
+
+.superellipse-base {
+  --superellipse-radius: 1rem;
+}
+
+.superellipse-sm {
+  --superellipse-radius: 0.75rem;
+}
+
+@supports (mask-image: paint(superellipse)) {
+  .superellipse.loaded {
+    mask-image: paint(superellipse);
+    border-radius: 0;
+  }
+}
+
+/* End Superellipse  */
+
+.animated-gradient-border:focus-within {
+  --superellipse-radius: 0.75rem;
+}
+
+.bridge-form-border {
+  background: var(--color-brand-black-200);
+  transition: all 200ms ease-out;
+}
+
+.bridge-form-border:hover {
+  background: var(--color-brand-black-100);
+}
+
+.bridge-form-border:focus-within {
+  background: linear-gradient(
+    90deg,
+    #ffffff 0%,
+    #4adeff 25%,
+    #ff35eb 50%,
+    #ffed4a 75%,
+    #ffffff 100%
+  );
+  background-size: 200% 100%;
+  animation: gradient-slide 2s ease-in-out infinite;
+}
+
+.animated-gradient-border {
+  background: linear-gradient(
+    90deg,
+    #ffffff 0%,
+    #4adeff 25%,
+    #ff35eb 50%,
+    #ffed4a 75%,
+    #ffffff 100%
+  );
+  background-size: 200% 100%;
+  animation: gradient-slide 3s ease-in-out infinite;
+}
+
+.border-dashed-wide {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%232F333EFF' stroke-width='3.5' stroke-dasharray='11' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  border-radius: 16px;
+}
+
+input[type="number"] {
+  appearance: textfield;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+@layer base {
+  .hb-wall {
+    font-family: var(--hbr-font-family);
+    background-color: var(--color-primary);
+  }
+
+  .bg-gradient-brand {
+    background-image: var(--gradient-brand);
+  }
+
+  .bg-gradient-brand-animated {
+    background: linear-gradient(
+      90deg,
+      #ffffff 0%,
+      #ffffff 10%,
+      #4adeff 29.71%,
+      #ff35eb 78.68%,
+      #ffed4a 100%
+    );
+    background-size: 200% 100%;
+    animation: brand-gradient-flow 4s ease-in-out infinite;
+  }
+
+  .gradient-spinner {
+    background: conic-gradient(
+      from 0deg,
+      #ffffff00 0%,
+      #ffffff00 10%,
+      #4adeff 29.71%,
+      #ff35eb 78.68%,
+      #ffed4a 100%,
+      #ffffff00 100%
+    );
+    position: relative;
+  }
+
+  .gradient-spinner::before {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    background: var(--color-brand-black-500);
+    border-radius: 50%;
+  }
+}
+
+@utility no-scrollbar {
+  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+}
+
+/* Dialog */
+.responsive-fullscren-dialog {
+  @apply top-0 flex flex-col left-0 w-full h-full data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom-25 data-[state=open]:slide-in-from-bottom-25;
+}
+
+.responsive-card-dialog {
+  @apply top-[50%] shadow-lg left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-[28rem] data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+}
+
+@layer utilities {
+  .tile-bg {
+    background-color: transparent;
+    background-image: radial-gradient(transparent 1px, #0000006e 1px);
+    background-size: 8px 8px;
+    backdrop-filter: brightness(1) blur(6px);
+  }
+}
+
+/* End Dialog */

package/styles/shadcn.css

@@ -0,0 +1,123 @@
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}