@madebywild/wvk 0.0.1

package/dist/styles.css

@@ -0,0 +1,392 @@
+/* Figma: https://www.figma.com/design/voJ4enD1r5pfsrURfQLzoM/wild-Wireframe-Kit
+   Variables align with collections — semantic: surface/*, foreground/*, border/*,
+   Transparency/*; primitives: Color swatches (Dark, Medium, …) + transparency ramps. */
+
+/* ============================================
+   VIBEFRAME KIT — DESIGN TOKENS
+   ============================================ */
+
+@theme inline {
+  --font-sans: var(--font-inter), "Inter", system-ui, sans-serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--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-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+
+  /* Semantic surface (Figma: surface/bold, surface/muted, …) */
+  --color-wvk-bold: var(--wvk-surface-bold);
+  --color-wvk-muted: var(--wvk-surface-muted);
+  --color-wvk-quinary: var(--wvk-surface-quinary);
+  --color-wvk-quaternary: var(--wvk-surface-quaternary);
+  --color-wvk-tertiary: var(--wvk-surface-tertiary);
+  --color-wvk-secondary: var(--wvk-surface-secondary);
+  --color-wvk-surface-primary: var(--wvk-surface-primary);
+
+  /* Semantic foreground */
+  --color-wvk-foreground-primary: var(--wvk-foreground-primary);
+  --color-wvk-foreground-secondary: var(--wvk-foreground-secondary);
+  --color-wvk-foreground-tertiary: var(--wvk-foreground-tertiary);
+  --color-wvk-foreground-primary-inverse: var(--wvk-foreground-primary-inverse);
+
+  /* Semantic border */
+  --color-wvk-border-default: var(--wvk-border-default);
+  --color-wvk-border-bold: var(--wvk-border-bold);
+
+  /* Transparency (Figma: Transparency/Dark 80, …) — not "alpha" */
+  --color-wvk-transparency-dark-80: var(--wvk-transparency-dark-80);
+  --color-wvk-transparency-dark-40: var(--wvk-transparency-dark-40);
+  --color-wvk-transparency-dark-20: var(--wvk-transparency-dark-20);
+  --color-wvk-transparency-light-80: var(--wvk-transparency-light-80);
+  --color-wvk-transparency-light-40: var(--wvk-transparency-light-40);
+  --color-wvk-transparency-light-20: var(--wvk-transparency-light-20);
+
+
+  /* Primitives — opaque Color collection (Figma layer names: Dark, Medium, …) */
+  --color-wvk-primitive-dark: var(--wvk-primitive-dark);
+  --color-wvk-primitive-medium: var(--wvk-primitive-medium);
+  --color-wvk-primitive-medium-soft: var(--wvk-primitive-medium-soft);
+  --color-wvk-primitive-soft: var(--wvk-primitive-soft);
+  --color-wvk-primitive-softest: var(--wvk-primitive-softest);
+  --color-wvk-primitive-light: var(--wvk-primitive-light);
+
+  /* Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 999px;
+}
+
+/* ---- Light theme (default) ---- */
+:root {
+  /* Primitives — opaque (backup / one-off; match Figma Colors frame) */
+  --wvk-primitive-dark: #0055ff;
+  --wvk-primitive-medium: #7ba4ff;
+  --wvk-primitive-medium-soft: #a7c2ff;
+  --wvk-primitive-soft: #d1defd;
+  --wvk-primitive-softest: #e8efff;
+  --wvk-primitive-light: #ffffff;
+
+  /* Primitives — transparency ramps (same hex math as theme semantic transparency in light) */
+  --wvk-primitive-dark-80: rgba(0, 85, 255, 0.8);
+  --wvk-primitive-dark-40: rgba(0, 85, 255, 0.4);
+  --wvk-primitive-dark-20: rgba(0, 85, 255, 0.2);
+  --wvk-primitive-light-80: rgba(255, 255, 255, 0.8);
+  --wvk-primitive-light-40: rgba(255, 255, 255, 0.4);
+  --wvk-primitive-light-20: rgba(255, 255, 255, 0.2);
+
+  /* Semantic — Surface (Figma: surface/bold … surface/primary) */
+  --wvk-surface-bold: var(--wvk-primitive-dark);
+  --wvk-surface-muted: var(--wvk-primitive-medium);
+  --wvk-surface-quinary: var(--wvk-primitive-medium-soft);
+  --wvk-surface-quaternary: var(--wvk-primitive-soft);
+  --wvk-surface-tertiary: var(--wvk-primitive-softest);
+  --wvk-surface-secondary: #f4f8ff;
+  --wvk-surface-primary: var(--wvk-primitive-light);
+
+  /* Semantic — Foreground (Figma: foreground/primary, foreground/primaryinverse on inverse surfaces) */
+  --wvk-foreground-primary: var(--wvk-primitive-dark);
+  --wvk-foreground-secondary: var(--wvk-primitive-medium);
+  --wvk-foreground-tertiary: var(--wvk-primitive-medium-soft);
+  --wvk-foreground-primary-inverse: var(--wvk-primitive-light);
+
+  /* Semantic — Border (Figma: border/default, border/bold) */
+  --wvk-border-default: var(--wvk-primitive-soft);
+  --wvk-border-bold: var(--wvk-primitive-dark);
+
+  /* Semantic — Transparency (canonical; maps to primitives in light theme) */
+  --wvk-transparency-dark-80: var(--wvk-primitive-dark-80);
+  --wvk-transparency-dark-40: var(--wvk-primitive-dark-40);
+  --wvk-transparency-dark-20: var(--wvk-primitive-dark-20);
+  --wvk-transparency-light-80: var(--wvk-primitive-light-80);
+  --wvk-transparency-light-40: var(--wvk-primitive-light-40);
+  --wvk-transparency-light-20: var(--wvk-primitive-light-20);
+
+  /* App semantic (shadcn compatibility) — driven by wvk semantic tokens */
+  --background: var(--wvk-surface-primary);
+  --foreground: var(--wvk-foreground-primary);
+  --primary: var(--wvk-foreground-primary);
+  --primary-foreground: var(--wvk-foreground-primary-inverse);
+  --secondary: var(--wvk-surface-quaternary);
+  --secondary-foreground: var(--wvk-foreground-primary);
+  --muted: var(--wvk-surface-tertiary);
+  --muted-foreground: var(--wvk-foreground-secondary);
+  --accent: var(--wvk-surface-secondary);
+  --accent-foreground: var(--wvk-foreground-primary);
+  --border: var(--wvk-border-default);
+  --input: var(--wvk-border-default);
+  --ring: var(--wvk-foreground-secondary);
+  --destructive: #ff3b30;
+
+  /*
+   * Field chrome (inputs, selects, textareas on blue canvas in dark mode):
+   * always solid light surface + blue ink — do not use --foreground / --primary here
+   * (those follow the page theme and break contrast inside white fields).
+   */
+  --input-surface: #ffffff;
+  --input-text: var(--wvk-primitive-dark);
+  --input-placeholder: rgba(0, 85, 255, 0.4);
+  --input-focus: var(--wvk-primitive-dark);
+  --input-icon-muted: var(--wvk-primitive-medium);
+  --input-border-rest: var(--wvk-primitive-soft);
+
+  /* Size scale */
+  --wvk-size-sm: 32px;
+  --wvk-size-md: 40px;
+  --wvk-size-lg: 56px;
+  --wvk-px-sm: 12px;
+  --wvk-px-md: 16px;
+  --wvk-px-lg: 24px;
+  --wvk-px-xl: 32px;
+  --wvk-icon-sm: 14px;
+  --wvk-icon-md: 16px;
+  --wvk-icon-lg: 20px;
+  --wvk-gap-sm: 4px;
+  --wvk-gap-md: 6px;
+  --wvk-gap-lg: 8px;
+
+  /*
+   * Custom cursors — static SVGs from /public (HTTP-cached, no JS).
+   * Hotspot coords are top-left of the click point in the 32×32 artwork.
+   * Always end with a keyword fallback (accessibility + engines without SVG cursors).
+   */
+  --wvk-cursor-default: url("/cursors/arrow.svg") 9 5, default;
+  --wvk-cursor-pointer: url("/cursors/pointer.svg") 12 8, pointer;
+  --wvk-cursor-move: url("/cursors/move.svg") 16 16, move;
+}
+
+/* ---- Dark theme ---- */
+.dark {
+  --wvk-surface-bold: #ffffff;
+  --wvk-surface-muted: rgba(255, 255, 255, 0.8);
+  --wvk-surface-quinary: rgba(255, 255, 255, 0.6);
+  --wvk-surface-quaternary: rgba(255, 255, 255, 0.4);
+  --wvk-surface-tertiary: rgba(255, 255, 255, 0.2);
+  --wvk-surface-secondary: rgba(255, 255, 255, 0.1);
+  --wvk-surface-primary: #0055ff;
+
+  --wvk-foreground-primary: #ffffff;
+  --wvk-foreground-secondary: rgba(255, 255, 255, 0.8);
+  --wvk-foreground-tertiary: rgba(255, 255, 255, 0.6);
+  /* Ink on blue canvas (same role as light theme’s inverse: readable on surface/primary). Not for text on white chips — use --primary-foreground / --wvk-primitive-dark there. */
+  --wvk-foreground-primary-inverse: #ffffff;
+
+  --wvk-border-default: rgba(255, 255, 255, 0.4);
+  --wvk-border-bold: #ffffff;
+
+  /* On blue page bg, “dark” transparency reads as light overlays; “light” as blue-tinted */
+  --wvk-transparency-dark-80: rgba(255, 255, 255, 0.8);
+  --wvk-transparency-dark-40: rgba(255, 255, 255, 0.4);
+  --wvk-transparency-dark-20: rgba(255, 255, 255, 0.2);
+  --wvk-transparency-light-80: rgba(0, 85, 255, 0.8);
+  --wvk-transparency-light-40: rgba(0, 85, 255, 0.4);
+  --wvk-transparency-light-20: rgba(0, 85, 255, 0.2);
+
+  /* Primitives stay the fixed palette for one-off use */
+  /* (--wvk-primitive-* unchanged from :root) */
+
+  --background: var(--wvk-surface-primary);
+  --foreground: var(--wvk-foreground-primary);
+  --primary: #ffffff;
+  --primary-foreground: #0055ff;
+  /* Secondary: soft tint + blue label (Figma), not white on frosted glass */
+  --secondary: var(--wvk-primitive-soft);
+  --secondary-foreground: var(--wvk-primitive-dark);
+  --muted: rgba(255, 255, 255, 0.2);
+  --muted-foreground: rgba(255, 255, 255, 0.8);
+  --accent: rgba(255, 255, 255, 0.1);
+  --accent-foreground: #ffffff;
+  --border: var(--wvk-border-default);
+  --input: rgba(255, 255, 255, 0.4);
+  --ring: rgba(255, 255, 255, 0.8);
+  --destructive: #ff6961;
+
+  /*
+   * Field chrome on blue canvas: frosted surface + white value/placeholder text
+   * (same for input, textarea, native select — reads clearly on tinted fields).
+   */
+  --input-surface: rgba(255, 255, 255, 0.12);
+  --input-text: #ffffff;
+  --input-placeholder: rgba(255, 255, 255, 0.55);
+  --input-focus: rgba(255, 255, 255, 0.95);
+  --input-icon-muted: rgba(255, 255, 255, 0.72);
+  --input-border-rest: rgba(255, 255, 255, 0.35);
+}
+
+/* ---- Base layer ---- */
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  html {
+    cursor: var(--wvk-cursor-default);
+  }
+
+  /* Text fields keep the I-beam; do not inherit the arrow cursor from html */
+  input:not([type]),
+  input[type="text"],
+  input[type="search"],
+  input[type="email"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="password"],
+  input[type="number"],
+  textarea,
+  [contenteditable="true"] {
+    cursor: text;
+  }
+
+  /* Common interactive controls (class-based utilities still layered below) */
+  a[href],
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]),
+  [role="link"],
+  [role="tab"],
+  [role="menuitem"],
+  label[for],
+  summary {
+    cursor: var(--wvk-cursor-pointer);
+  }
+
+  input[type="checkbox"]:not(:disabled),
+  input[type="radio"]:not(:disabled),
+  select:not(:disabled) {
+    cursor: var(--wvk-cursor-pointer);
+  }
+
+  /*
+   * WebKit / UA often paints inputs white in dark mode even when the shell uses a token.
+   * Keep the field surface visible through the inner <input> (matches native <select>).
+   */
+  .dark input[type="text"],
+  .dark input[type="search"],
+  .dark input[type="number"],
+  .dark input[type="email"],
+  .dark input[type="tel"],
+  .dark input[type="url"],
+  .dark input[type="password"] {
+    background-color: transparent;
+  }
+
+  /*
+   * Native <select> color-scheme: light in default theme so UA uses light dropdown chrome.
+   * In dark mode, switch to dark so the popup matches the blue canvas.
+   * Text color is enforced below regardless (Blink/WebKit ignore utility `color` otherwise).
+   */
+  [data-wvk-select] {
+    color-scheme: light;
+  }
+
+  .dark [data-wvk-select] {
+    color-scheme: dark;
+  }
+
+  .dark [data-wvk-select] select {
+    color: var(--input-text) !important;
+    -webkit-text-fill-color: var(--input-text);
+  }
+
+  .dark [data-wvk-select] select:disabled {
+    opacity: 0.55;
+    -webkit-text-fill-color: color-mix(in srgb, var(--input-text) 45%, transparent);
+  }
+}
+
+/* Tailwind cursor utilities → kit assets (same cascade cost as built-in keywords) */
+@layer utilities {
+  .cursor-default {
+    cursor: var(--wvk-cursor-default);
+  }
+
+  .cursor-pointer {
+    cursor: var(--wvk-cursor-pointer);
+  }
+
+  .cursor-move {
+    cursor: var(--wvk-cursor-move);
+  }
+
+  .cursor-grab {
+    cursor: var(--wvk-cursor-move);
+  }
+
+  .cursor-grabbing {
+    cursor: var(--wvk-cursor-move);
+  }
+
+  /* {@link LoadingSpinner} — clip-path ring + rotate (ring color = currentColor → --wvk-foreground-primary) */
+  @keyframes wvk-loader-rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes wvk-loader-clip {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+    }
+    25% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+    }
+    50% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+    }
+    75% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+    }
+  }
+
+
+  .wvk-loading-spinner {
+    width: var(--wvk-loading-spinner-size, 48px);
+    height: var(--wvk-loading-spinner-size, 48px);
+    border-radius: 50%;
+    position: relative;
+    color: var(--wvk-foreground-primary);
+    animation: wvk-loader-rotate 1s linear infinite;
+  }
+
+  .wvk-loading-spinner::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: var(--wvk-loading-spinner-border, 5px) solid currentColor;
+    animation: wvk-loader-clip 2s linear infinite;
+  }
+
+  .wvk-loading-spinner--sm {
+    --wvk-loading-spinner-size: 28px;
+    --wvk-loading-spinner-border: 3px;
+  }
+
+  .wvk-loading-spinner--md {
+    --wvk-loading-spinner-size: 40px;
+    --wvk-loading-spinner-border: 4px;
+  }
+
+  .wvk-loading-spinner--lg {
+    --wvk-loading-spinner-size: 48px;
+    --wvk-loading-spinner-border: 5px;
+  }
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@madebywild/wvk",
+  "version": "0.0.1",
+  "description": "Wireframe kit — components, icons, and design tokens",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/madebywild/wild-vibeframe-kit",
+    "directory": "packages/wvk"
+  },
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js",
+      "require": "./dist/icons.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8.3.5",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prebuild": "node src/scripts/build-icons.mjs",
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "dev": "node src/scripts/build-icons.mjs && tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}