@l.x/mycelium 1.0.2 → 1.0.3

package/css/variables.css

@@ -0,0 +1,202 @@
+/* CSS Custom Properties */
+
+/* Light mode is the default */
+:root {
+  color-scheme: light;
+  --font-basel: "Basel Grotesk";
+
+  /* Light mode shadows */
+  --shadow-short: 0px 1px 6px 2px rgba(0, 0, 0, 0.03), 0px 1px 2px 0px rgba(0, 0, 0, 0.02);
+  --shadow-medium: 0px 6px 12px -3px rgba(19, 19, 19, 0.04), 0px 2px 5px -2px rgba(19, 19, 19, 0.03);
+  --shadow-large: 0px 10px 20px -5px rgba(19, 19, 19, 0.05), 0px 4px 12px -3px rgba(19, 19, 19, 0.04);
+
+  /* shadcn compatibility */
+  --radius: 0.625rem;
+  --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);
+  --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);
+  --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);
+
+  /* Mycelium semantic colors - light mode (auto-switching) */
+  --surface1: var(--color-surface1-light);
+  --surface2: var(--color-surface2-light);
+  --surface3: var(--color-surface3-light);
+  --surface4: var(--color-surface4-light);
+  --surface5: var(--color-surface5-light);
+  --neutral1: var(--color-neutral1-light);
+  --neutral2: var(--color-neutral2-light);
+  --neutral3: var(--color-neutral3-light);
+  --accent1: var(--color-accent1-light);
+  --accent2: var(--color-accent2-light);
+
+  /* Semantic status colors - auto-switching light/dark */
+  --success: var(--color-success-light);
+  --warning: var(--color-gold-200);
+  --critical: var(--color-critical-light);
+
+  /* Unicon avatar colors - auto-switching */
+  --unicon-0: var(--color-unicon-0-light);
+  --unicon-1: var(--color-unicon-1-light);
+  --unicon-2: var(--color-unicon-2-light);
+  --unicon-3: var(--color-unicon-3-light);
+  --unicon-4: var(--color-unicon-4-light);
+  --unicon-5: var(--color-unicon-5-light);
+  --unicon-6: var(--color-unicon-6-light);
+  --unicon-7: var(--color-unicon-7-light);
+  --unicon-8: var(--color-unicon-8-light);
+  --unicon-9: var(--color-unicon-9-light);
+  --unicon-bg-opacity: 0.12;
+}
+
+/* Dark mode applies when .dark class is present */
+.dark {
+  color-scheme: dark;
+
+  /* Dark mode shadows */
+  --shadow-short: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);
+  --shadow-medium: 0px 10px 15px -3px rgba(19, 19, 19, 0.54), 0px 4px 6px -2px rgba(19, 19, 19, 0.4);
+  --shadow-large: 0px 16px 24px -6px rgba(0, 0, 0, 0.6), 0px 8px 12px -4px rgba(0, 0, 0, 0.48);
+
+  /* shadcn compatibility */
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 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.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 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(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  /* Mycelium semantic colors - dark mode (auto-switching) */
+  --surface1: var(--color-surface1-dark);
+  --surface2: var(--color-surface2-dark);
+  --surface3: var(--color-surface3-dark);
+  --surface4: var(--color-surface4-dark);
+  --surface5: var(--color-surface5-dark);
+  --neutral1: var(--color-neutral1-dark);
+  --neutral2: var(--color-neutral2-dark);
+  --neutral3: var(--color-neutral3-dark);
+  --accent1: var(--color-accent1-dark);
+  --accent2: var(--color-accent2-dark);
+  /* Status colors - dark mode */
+  --success: var(--color-success-dark);
+  --critical: var(--color-critical-dark);
+
+  /* Unicon avatar colors - dark mode */
+  --unicon-0: var(--color-unicon-0-dark);
+  --unicon-1: var(--color-unicon-1-dark);
+  --unicon-2: var(--color-unicon-2-dark);
+  --unicon-3: var(--color-unicon-3-dark);
+  --unicon-4: var(--color-unicon-4-dark);
+  --unicon-5: var(--color-unicon-5-dark);
+  --unicon-6: var(--color-unicon-6-dark);
+  --unicon-7: var(--color-unicon-7-dark);
+  --unicon-8: var(--color-unicon-8-dark);
+  --unicon-9: var(--color-unicon-9-dark);
+  --unicon-bg-opacity: 0.16;
+}
+
+/* shadcn theme inline block for Tailwind v4 */
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --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-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);
+  --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);
+
+  /* Mycelium semantic colors - auto-switching Tailwind utilities */
+  --color-surface1: var(--surface1);
+  --color-surface2: var(--surface2);
+  --color-surface3: var(--surface3);
+  --color-surface4: var(--surface4);
+  --color-surface5: var(--surface5);
+  --color-neutral1: var(--neutral1);
+  --color-neutral2: var(--neutral2);
+  --color-neutral3: var(--neutral3);
+  --color-accent1: var(--accent1);
+  --color-accent2: var(--accent2);
+  /* Status colors: semantic tokens reference raw palette from theme.css */
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-critical: var(--critical);
+}

package/fonts.css

@@ -0,0 +1,4 @@
+/* Basel Grotesk Fonts */
+/* Usage: @import "@universe/mycelium/fonts"; */
+
+@import "./css/fonts.css";

package/package.json

@@ -1 +1,50 @@
-{"name":"@l.x/mycelium","version":"1.0.2","description":"LX Exchange - mycelium","main":"index.js","dependencies":{"@luxexchange/mycelium":"1.0.2"}}
+{
+  "name": "@l.x/mycelium",
+  "version": "1.0.3",
+  "private": false,
+  "main": "src/index.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./tailwind": "./tailwind.css",
+    "./fonts": "./fonts.css",
+    "./cn": {
+      "types": "./src/cn.d.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.13.1",
+    "@typescript/native-preview": "7.0.0-dev.20260311.1",
+    "@luxfi/eslint-config": "workspace:^",
+    "depcheck": "1.4.7",
+    "eslint": "8.57.1",
+    "react": "19.0.3",
+    "tailwindcss": "4.1.16",
+    "typescript": "5.8.3"
+  },
+  "scripts": {
+    "typecheck": "nx typecheck @l.x/mycelium",
+    "typecheck:tsgo": "nx typecheck:tsgo @l.x/mycelium",
+    "lint": "nx lint @l.x/mycelium",
+    "lint:fix": "nx lint:fix @l.x/mycelium",
+    "lint:biome": "nx lint:biome @l.x/mycelium",
+    "lint:biome:fix": "nx lint:biome:fix @l.x/mycelium",
+    "lint:eslint": "nx lint:eslint @l.x/mycelium",
+    "lint:eslint:fix": "nx lint:eslint:fix @l.x/mycelium",
+    "check:deps:usage": "nx check:deps:usage @l.x/mycelium"
+  },
+  "nx": {
+    "includedScripts": []
+  }
+}

package/project.json

@@ -0,0 +1,18 @@
+{
+  "name": "@l.x/mycelium",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "pkgs/mycelium/src",
+  "projectType": "library",
+  "tags": ["scope:mycelium", "type:lib"],
+  "targets": {
+    "typecheck": {},
+    "typecheck:tsgo": {},
+    "lint:biome": {},
+    "lint:biome:fix": {},
+    "lint:eslint": {},
+    "lint:eslint:fix": {},
+    "lint": {},
+    "lint:fix": {},
+    "check:deps:usage": {}
+  }
+}

package/src/cn.ts

@@ -0,0 +1,75 @@
+import { type ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+import { typographyClasses } from './types'
+
+/** Custom color classes for tailwind-merge conflict resolution */
+const colorClasses = [
+  'foreground',
+  'background',
+  'neutral1',
+  'neutral1-light',
+  'neutral1-dark',
+  'neutral2',
+  'neutral2-light',
+  'neutral2-dark',
+  'neutral3',
+  'neutral3-light',
+  'neutral3-dark',
+  'surface1',
+  'surface1-light',
+  'surface1-dark',
+  'surface2',
+  'surface2-light',
+  'surface2-dark',
+  'surface3',
+  'surface3-light',
+  'surface3-dark',
+  'surface4',
+  'surface4-light',
+  'surface4-dark',
+  'surface5',
+  'surface5-light',
+  'surface5-dark',
+  'accent1',
+  'accent1-light',
+  'accent1-dark',
+  'accent2',
+  'accent2-light',
+  'accent2-dark',
+  'success',
+  'warning',
+  'critical',
+  'destructive',
+  'muted-foreground',
+  'card-foreground',
+  'popover-foreground',
+  'primary-foreground',
+  'secondary-foreground',
+  'destructive-foreground',
+] as const
+
+/**
+ * Extended tailwind-merge configuration for Mycelium classes.
+ * - Typography: ensures cn('text-sm', 'text-body-1') correctly resolves to 'text-body-1'
+ * - Colors: ensures cn('text-foreground', 'text-critical') correctly resolves to 'text-critical'
+ */
+const customTwMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [...typographyClasses],
+      'text-color': colorClasses.map((c) => `text-${c}`),
+    },
+  },
+})
+
+/**
+ * Merge class names with Tailwind CSS conflict resolution.
+ *
+ * @example
+ * cn('text-sm', 'text-body-1') // => 'text-body-1'
+ * cn('bg-red-500', isActive && 'bg-blue-500') // => 'bg-blue-500' if isActive
+ * cn('p-4', className) // Merge with external className prop
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return customTwMerge(clsx(inputs))
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// Mycelium - Lx's Tailwind Design System
+// Main JS exports
+
+export { cn } from './cn'
+export * from './types'
+export { COLOR_COUNT, UNICON_COLORS } from './unicon/colors'
+export { hashString } from './unicon/hash'
+export { Unicon, type UniconProps } from './unicon/Unicon'

package/src/types.ts

@@ -0,0 +1,49 @@
+/** Typography class names for tailwind-merge conflict resolution */
+export const typographyClasses = [
+  'text-body-1',
+  'text-body-2',
+  'text-body-3',
+  'text-body-4',
+  'text-heading-1',
+  'text-heading-2',
+  'text-heading-3',
+  'text-subheading-1',
+  'text-subheading-2',
+  'text-button-1',
+  'text-button-2',
+  'text-button-3',
+  'text-button-4',
+] as const
+
+/** Mycelium typography class type */
+export type TypographyClass = (typeof typographyClasses)[number]
+
+/** Mycelium color tokens */
+export type ColorToken =
+  | 'white'
+  | 'black'
+  | 'background'
+  | 'neutral1'
+  | 'neutral2'
+  | 'neutral3'
+  | 'surface1'
+  | 'surface2'
+  | 'surface3'
+  | 'surface4'
+  | 'surface5'
+  | 'accent1'
+  | 'accent2'
+  | 'accent3'
+  | 'accent4'
+  | 'success'
+  | 'critical'
+  | 'warning'
+
+/** Mycelium screen breakpoints */
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'h-short' | 'h-mid'
+
+/** Mycelium border radius tokens */
+export type BorderRadius = 'none' | '4' | '6' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | 'full'
+
+/** Mycelium box shadow tokens */
+export type BoxShadow = 'short' | 'medium' | 'large'

package/src/unicon/Unicon.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react'
+
+import { cn } from '../cn'
+import { COLOR_COUNT } from './colors'
+import { hashString } from './hash'
+import { type IconPaths, Icons } from './icons'
+
+export interface UniconProps {
+  /** Any string for deterministic avatar generation */
+  input: string
+  /** Size in pixels (default: 32) */
+  size?: number
+  /** Additional CSS classes */
+  className?: string
+  /** Custom icon to render instead of the default generated icon. Will be colored with the computed unicon color. */
+  icon?: React.ReactNode
+  /** When true, removes the background circle and scales the shape to fill the full container. */
+  bare?: boolean
+}
+
+/**
+ * Deterministic avatar component that generates a unique visual identity
+ * based on any input string (e.g., wallet address, username, email).
+ *
+ * Colors automatically adapt to light/dark mode via CSS variables.
+ *
+ * @example
+ * ```tsx
+ * <Unicon input="0x1234..." size={48} />
+ * <Unicon input="user@example.com" size={32} className="border border-neutral1" />
+ * ```
+ */
+export function Unicon({ input, size = 32, className, icon, bare }: UniconProps): React.ReactElement {
+  const { colorVar, paths } = useMemo(() => {
+    const hash = hashString(input)
+    const iconKeys = Object.keys(Icons)
+
+    // Use BigInt modulo for both to avoid precision loss when converting to Number
+    const colorIndex = Number(hash % BigInt(COLOR_COUNT))
+    const iconIndex = Number(hash % BigInt(iconKeys.length))
+
+    return {
+      colorVar: `var(--unicon-${colorIndex})`,
+      paths: Icons[iconKeys[iconIndex] as keyof typeof Icons] as IconPaths,
+    }
+  }, [input])
+
+  const scale = bare ? size / 48 : (size / 48 / 1.5) * 0.9
+  const scaledSize = 48 * scale
+  const translate = (size - scaledSize) / 2
+
+  // For custom icons, center them at ~40% of the container size
+  const iconSize = Math.round(size * 0.4)
+  const iconOffset = (size - iconSize) / 2
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className={cn('shrink-0', className)}>
+      {!bare && <circle cx={size / 2} cy={size / 2} r={size / 2} fill={colorVar} opacity="var(--unicon-bg-opacity)" />}
+      {icon ? (
+        <foreignObject x={iconOffset} y={iconOffset} width={iconSize} height={iconSize}>
+          {/* biome-ignore lint/correctness/noRestrictedElements: div required inside SVG foreignObject */}
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: colorVar,
+            }}
+          >
+            {icon}
+          </div>
+        </foreignObject>
+      ) : (
+        <g transform={`translate(${translate}, ${translate}) scale(${scale})`}>
+          {paths.map((d, i) => (
+            <path key={i} d={d} fill={colorVar} clipRule="evenodd" fillRule="evenodd" />
+          ))}
+        </g>
+      )}
+    </svg>
+  )
+}

package/src/unicon/colors.ts

@@ -0,0 +1,33 @@
+/**
+ * Unicon color definitions
+ * Light and dark mode color pairs for avatar generation
+ */
+
+export const UNICON_COLORS = {
+  light: [
+    '#F50DB4', // 0 - pink
+    '#FFBF17', // 1 - yellow
+    '#FF8934', // 2 - orange
+    '#85754A', // 3 - brown
+    '#0C8911', // 4 - green
+    '#78E744', // 5 - lime
+    '#00C3A0', // 6 - teal
+    '#23A3FF', // 7 - blue
+    '#4981FF', // 8 - indigo
+    '#4300B0', // 9 - purple
+  ],
+  dark: [
+    '#FC74FE', // 0 - pink
+    '#FFF612', // 1 - yellow
+    '#FF4D00', // 2 - orange
+    '#996F01', // 3 - brown
+    '#21C95E', // 4 - green
+    '#B1F13C', // 5 - lime
+    '#5CFE9D', // 6 - teal
+    '#3ADCFF', // 7 - blue
+    '#0047FF', // 8 - indigo
+    '#9E62FF', // 9 - purple
+  ],
+} as const
+
+export const COLOR_COUNT = 10

package/src/unicon/hash.ts

@@ -0,0 +1,20 @@
+// biome-ignore-all lint/suspicious/noBitwiseOperators: Hash function requires bitwise ops
+
+/**
+ * cyrb53 - fast, well-distributed 53-bit hash
+ * No dependencies, excellent distribution for avatar generation
+ */
+export function hashString(str: string, seed = 0): bigint {
+  let h1 = 0xdeadbeef ^ seed
+  let h2 = 0x41c6ce57 ^ seed
+  for (let i = 0; i < str.length; i++) {
+    const ch = str.charCodeAt(i)
+    h1 = Math.imul(h1 ^ ch, 2654435761)
+    h2 = Math.imul(h2 ^ ch, 1597334677)
+  }
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507)
+  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507)
+  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909)
+  return BigInt(h2 >>> 0) * BigInt(0x100000000) + BigInt(h1 >>> 0)
+}