@galvyn-io/design 0.1.0

package/dist/galvyn.css

@@ -0,0 +1,478 @@
+/*
+ * ═══════════════════════════════════════════════════
+ * GALVYN DESIGN SYSTEM — CSS Custom Properties
+ * @galvyn-io/design v0.1.0
+ * ═══════════════════════════════════════════════════
+ *
+ * USAGE:
+ *   @import "@galvyn-io/design/css";
+ *
+ *   Then set the accent hue on :root or any container:
+ *   :root { --galvyn-accent-hue: 220; }
+ *
+ *   Hue presets: 220 (blue), 180 (teal), 270 (purple),
+ *   340 (pink), 150 (green), 30 (amber)
+ *
+ * COMPATIBILITY:
+ *   Works alongside shadcn/ui — all variables are
+ *   prefixed with --galvyn-* to avoid collisions.
+ * ═══════════════════════════════════════════════════
+ */
+
+/* ─── SHARED TOKENS (theme-independent) ──────────── */
+:root {
+  /* Accent control — change these to rotate the palette */
+  --galvyn-accent-hue: 220;
+  --galvyn-accent-sat: 70%;
+
+  /* Typography */
+  --galvyn-font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --galvyn-font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
+  --galvyn-font-display: 'Geist', ui-sans-serif, -apple-system, sans-serif;
+
+  /* Spacing (4px base grid) */
+  --galvyn-space-0: 0;
+  --galvyn-space-px: 1px;
+  --galvyn-space-0-5: 2px;
+  --galvyn-space-1: 4px;
+  --galvyn-space-1-5: 6px;
+  --galvyn-space-2: 8px;
+  --galvyn-space-2-5: 10px;
+  --galvyn-space-3: 12px;
+  --galvyn-space-4: 16px;
+  --galvyn-space-5: 20px;
+  --galvyn-space-6: 24px;
+  --galvyn-space-8: 32px;
+  --galvyn-space-10: 40px;
+  --galvyn-space-12: 48px;
+  --galvyn-space-16: 64px;
+
+  /* Radii */
+  --galvyn-radius-none: 0;
+  --galvyn-radius-sm: 4px;
+  --galvyn-radius-md: 6px;
+  --galvyn-radius-lg: 8px;
+  --galvyn-radius-xl: 12px;
+  --galvyn-radius-2xl: 16px;
+  --galvyn-radius-full: 9999px;
+
+  /* Motion */
+  --galvyn-duration-instant: 50ms;
+  --galvyn-duration-fast: 100ms;
+  --galvyn-duration-normal: 200ms;
+  --galvyn-duration-slow: 300ms;
+  --galvyn-duration-slower: 500ms;
+  --galvyn-ease-default: cubic-bezier(0.16, 1, 0.3, 1);
+  --galvyn-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
+  --galvyn-ease-out: cubic-bezier(0, 0.55, 0.45, 1);
+  --galvyn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --galvyn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Z-index scale */
+  --galvyn-z-base: 0;
+  --galvyn-z-dropdown: 50;
+  --galvyn-z-sticky: 100;
+  --galvyn-z-overlay: 200;
+  --galvyn-z-modal: 300;
+  --galvyn-z-popover: 400;
+  --galvyn-z-toast: 500;
+  --galvyn-z-tooltip: 600;
+  --galvyn-z-command: 700;
+}
+
+
+/* ─── DARK THEME (default) ───────────────────────── */
+:root,
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* Backgrounds */
+  --galvyn-bg-000: #09090b;
+  --galvyn-bg-100: #0c0c0e;
+  --galvyn-bg-200: #111113;
+  --galvyn-bg-300: #18181b;
+
+  /* Surfaces */
+  --galvyn-surface-100: #141416;
+  --galvyn-surface-200: #1c1c1f;
+  --galvyn-surface-300: #232326;
+  --galvyn-surface-hover: #2a2a2d;
+  --galvyn-surface-active: #35353a;
+
+  /* Borders */
+  --galvyn-border-100: rgba(255, 255, 255, 0.03);
+  --galvyn-border-200: rgba(255, 255, 255, 0.06);
+  --galvyn-border-300: rgba(255, 255, 255, 0.09);
+  --galvyn-border-400: rgba(255, 255, 255, 0.14);
+  --galvyn-border-focus: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55% / 0.5);
+
+  /* Text */
+  --galvyn-text-000: #ffffff;
+  --galvyn-text-100: #fafafa;
+  --galvyn-text-200: #a1a1aa;
+  --galvyn-text-300: #71717a;
+  --galvyn-text-400: #52525b;
+  --galvyn-text-500: #3f3f46;
+
+  /* Accent (hue-driven) */
+  --galvyn-accent-50: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 95% / 0.05);
+  --galvyn-accent-100: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 95% / 0.08);
+  --galvyn-accent-200: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 90% / 0.12);
+  --galvyn-accent-300: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 60%);
+  --galvyn-accent-400: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55%);
+  --galvyn-accent-500: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50%);
+  --galvyn-accent-text: hsl(var(--galvyn-accent-hue) 80% 70%);
+
+  /* Semantic */
+  --galvyn-success: #22c55e;
+  --galvyn-success-muted: rgba(34, 197, 94, 0.10);
+  --galvyn-warning: #eab308;
+  --galvyn-warning-muted: rgba(234, 179, 8, 0.10);
+  --galvyn-error: #ef4444;
+  --galvyn-error-muted: rgba(239, 68, 68, 0.10);
+  --galvyn-info: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55%);
+  --galvyn-info-muted: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55% / 0.10);
+
+  /* Shadows */
+  --galvyn-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --galvyn-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
+  --galvyn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
+  --galvyn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+  --galvyn-shadow-glow: 0 0 20px -5px hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.15);
+  --galvyn-shadow-glow-lg: 0 0 40px -10px hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.2);
+
+  /* Gradient borders */
+  --galvyn-gradient-border-subtle: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
+  --galvyn-gradient-border-medium: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
+  --galvyn-gradient-border-strong: linear-gradient(135deg, hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55% / 0.6), rgba(255,255,255,0.06), hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55% / 0.2));
+  --galvyn-gradient-border-accent: linear-gradient(135deg, hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 60%), hsl(calc(var(--galvyn-accent-hue) + 40) var(--galvyn-accent-sat) 50%));
+}
+
+
+/* ─── LIGHT THEME ────────────────────────────────── */
+.light,
+[data-theme="light"] {
+  color-scheme: light;
+
+  --galvyn-bg-000: #ffffff;
+  --galvyn-bg-100: #fafafa;
+  --galvyn-bg-200: #f4f4f5;
+  --galvyn-bg-300: #e4e4e7;
+
+  --galvyn-surface-100: #ffffff;
+  --galvyn-surface-200: #f8f8f9;
+  --galvyn-surface-300: #f0f0f2;
+  --galvyn-surface-hover: #ededf0;
+  --galvyn-surface-active: #e4e4e7;
+
+  --galvyn-border-100: rgba(0, 0, 0, 0.03);
+  --galvyn-border-200: rgba(0, 0, 0, 0.06);
+  --galvyn-border-300: rgba(0, 0, 0, 0.09);
+  --galvyn-border-400: rgba(0, 0, 0, 0.14);
+  --galvyn-border-focus: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.4);
+
+  --galvyn-text-000: #09090b;
+  --galvyn-text-100: #18181b;
+  --galvyn-text-200: #52525b;
+  --galvyn-text-300: #71717a;
+  --galvyn-text-400: #a1a1aa;
+  --galvyn-text-500: #d4d4d8;
+
+  --galvyn-accent-50: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.04);
+  --galvyn-accent-100: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.06);
+  --galvyn-accent-200: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.10);
+  --galvyn-accent-300: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50%);
+  --galvyn-accent-400: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 45%);
+  --galvyn-accent-500: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 40%);
+  --galvyn-accent-text: hsl(var(--galvyn-accent-hue) 80% 40%);
+
+  --galvyn-success: #16a34a;
+  --galvyn-success-muted: rgba(22, 163, 74, 0.08);
+  --galvyn-warning: #ca8a04;
+  --galvyn-warning-muted: rgba(202, 138, 4, 0.08);
+  --galvyn-error: #dc2626;
+  --galvyn-error-muted: rgba(220, 38, 38, 0.08);
+  --galvyn-info: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50%);
+  --galvyn-info-muted: hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.08);
+
+  --galvyn-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --galvyn-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --galvyn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --galvyn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --galvyn-shadow-glow: 0 0 20px -5px hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.1);
+  --galvyn-shadow-glow-lg: 0 0 40px -10px hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.15);
+
+  --galvyn-gradient-border-subtle: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
+  --galvyn-gradient-border-medium: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.03));
+  --galvyn-gradient-border-strong: linear-gradient(135deg, hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.4), rgba(0,0,0,0.04), hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 50% / 0.15));
+  --galvyn-gradient-border-accent: linear-gradient(135deg, hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55%), hsl(calc(var(--galvyn-accent-hue) + 40) var(--galvyn-accent-sat) 45%));
+}
+
+
+/* ═══════════════════════════════════════════════════
+   UTILITY CLASSES
+   ═══════════════════════════════════════════════════ */
+
+/* ─── Gradient Border ────────────────────────────── */
+.galvyn-border-gradient {
+  position: relative;
+  border-radius: var(--galvyn-radius-lg);
+  isolation: isolate;
+}
+.galvyn-border-gradient::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--galvyn-gradient-border-subtle);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+.galvyn-border-gradient-medium::before {
+  background: var(--galvyn-gradient-border-medium);
+}
+.galvyn-border-gradient-strong::before {
+  background: var(--galvyn-gradient-border-strong);
+}
+.galvyn-border-gradient-accent::before {
+  background: var(--galvyn-gradient-border-accent);
+  padding: 1.5px;
+}
+
+/* ─── Shimmer Border (animated) ──────────────────── */
+@property --galvyn-shimmer-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+.galvyn-border-shimmer::before {
+  background: conic-gradient(
+    from var(--galvyn-shimmer-angle),
+    transparent 0%,
+    hsl(var(--galvyn-accent-hue) var(--galvyn-accent-sat) 55% / 0.4) 10%,
+    transparent 20%
+  );
+  animation: galvyn-shimmer-spin 3s linear infinite;
+}
+@keyframes galvyn-shimmer-spin {
+  to { --galvyn-shimmer-angle: 360deg; }
+}
+
+/* ─── Focus Ring ─────────────────────────────────── */
+.galvyn-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--galvyn-bg-000), 0 0 0 4px var(--galvyn-border-focus);
+}
+
+/* ─── Transition Shorthand ───────────────────────── */
+.galvyn-transition {
+  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
+  transition-duration: var(--galvyn-duration-normal);
+  transition-timing-function: var(--galvyn-ease-default);
+}
+.galvyn-transition-fast {
+  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
+  transition-duration: var(--galvyn-duration-fast);
+  transition-timing-function: var(--galvyn-ease-default);
+}
+
+/* ─── Animations ─────────────────────────────────── */
+@keyframes galvyn-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes galvyn-fade-out {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(4px); }
+}
+@keyframes galvyn-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes galvyn-slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ─── Component styles (imported automatically) ── */
+/*
+ * GALVYN COMPONENT STYLES
+ * Import: @import "@galvyn-io/design/css";
+ * These are included in galvyn.css — this file exists
+ * for reference if you want to cherry-pick.
+ */
+
+/* ─── Button ─────────────────────────────────────── */
+.galvyn-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: var(--galvyn-font-sans);
+  font-weight: 500;
+  border-radius: var(--galvyn-radius-md);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  border: 1px solid transparent;
+}
+.galvyn-btn:active:not(:disabled) { transform: scale(0.97); }
+.galvyn-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.galvyn-btn-sm { height: 28px; padding: 0 10px; font-size: 0.75rem; }
+.galvyn-btn-md { height: 34px; padding: 0 14px; font-size: 0.8125rem; }
+.galvyn-btn-lg { height: 40px; padding: 0 18px; font-size: 0.875rem; }
+
+.galvyn-btn-default {
+  background: var(--galvyn-surface-200);
+  border-color: var(--galvyn-border-300);
+  color: var(--galvyn-text-100);
+}
+.galvyn-btn-default:hover:not(:disabled) { background: var(--galvyn-surface-hover); }
+
+.galvyn-btn-secondary {
+  background: transparent;
+  border-color: var(--galvyn-border-200);
+  color: var(--galvyn-text-200);
+}
+.galvyn-btn-secondary:hover:not(:disabled) { background: var(--galvyn-surface-200); color: var(--galvyn-text-100); }
+
+.galvyn-btn-ghost {
+  background: transparent;
+  color: var(--galvyn-text-200);
+}
+.galvyn-btn-ghost:hover:not(:disabled) { background: var(--galvyn-surface-200); color: var(--galvyn-text-100); }
+
+.galvyn-btn-accent {
+  background: var(--galvyn-accent-400);
+  border-color: var(--galvyn-accent-300);
+  color: #fff;
+}
+.galvyn-btn-accent:hover:not(:disabled) { filter: brightness(1.1); }
+
+.galvyn-btn-danger {
+  background: var(--galvyn-error-muted);
+  color: var(--galvyn-error);
+}
+.galvyn-btn-danger:hover:not(:disabled) { filter: brightness(1.15); }
+
+.galvyn-btn-icon { display: flex; }
+.galvyn-spinner { animation: galvyn-spin 0.6s linear infinite; }
+@keyframes galvyn-spin { to { transform: rotate(360deg); } }
+
+
+/* ─── Input ──────────────────────────────────────── */
+.galvyn-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.galvyn-input-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--galvyn-text-200);
+  letter-spacing: 0.02em;
+}
+.galvyn-input-container {
+  display: flex;
+  align-items: center;
+  background: var(--galvyn-surface-100);
+  border: 1px solid var(--galvyn-border-300);
+  border-radius: var(--galvyn-radius-md);
+  overflow: hidden;
+}
+.galvyn-input-error { border-color: var(--galvyn-error); }
+.galvyn-input-icon {
+  padding-left: var(--galvyn-space-3);
+  color: var(--galvyn-text-400);
+  display: flex;
+}
+.galvyn-input {
+  flex: 1;
+  height: 34px;
+  padding: 0 var(--galvyn-space-3);
+  background: transparent;
+  border: none;
+  color: var(--galvyn-text-100);
+  font-family: var(--galvyn-font-sans);
+  font-size: 0.8125rem;
+  outline: none;
+}
+.galvyn-input::placeholder { color: var(--galvyn-text-400); }
+.galvyn-input:focus { border-color: var(--galvyn-accent-400); }
+.galvyn-input-mono { font-family: var(--galvyn-font-mono); font-size: 0.75rem; }
+.galvyn-input-hint { font-size: 0.6875rem; color: var(--galvyn-text-400); }
+.galvyn-input-hint-error { color: var(--galvyn-error); }
+
+
+/* ─── Badge ──────────────────────────────────────── */
+.galvyn-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--galvyn-font-sans);
+  font-weight: 500;
+  border-radius: var(--galvyn-radius-full);
+  white-space: nowrap;
+}
+.galvyn-badge-sm { height: 20px; padding: 0 8px; font-size: 0.625rem; }
+.galvyn-badge-md { height: 24px; padding: 0 10px; font-size: 0.75rem; }
+
+.galvyn-badge-default { background: var(--galvyn-surface-200); color: var(--galvyn-text-200); border: 1px solid var(--galvyn-border-200); }
+.galvyn-badge-accent { background: var(--galvyn-accent-100); color: var(--galvyn-accent-text); }
+.galvyn-badge-success { background: var(--galvyn-success-muted); color: var(--galvyn-success); }
+.galvyn-badge-warning { background: var(--galvyn-warning-muted); color: var(--galvyn-warning); }
+.galvyn-badge-error { background: var(--galvyn-error-muted); color: var(--galvyn-error); }
+.galvyn-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+
+/* ─── Card ───────────────────────────────────────── */
+.galvyn-card {
+  background: var(--galvyn-surface-100);
+  border-radius: var(--galvyn-radius-lg);
+}
+.galvyn-card-pad-sm { padding: var(--galvyn-space-3); }
+.galvyn-card-pad-md { padding: var(--galvyn-space-4); }
+.galvyn-card-pad-lg { padding: var(--galvyn-space-6); }
+.galvyn-card-hover { cursor: pointer; transition: background var(--galvyn-duration-fast) var(--galvyn-ease-default); }
+.galvyn-card-hover:hover { background: var(--galvyn-surface-hover); }
+
+
+/* ─── Kbd ────────────────────────────────────────── */
+.galvyn-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  background: var(--galvyn-surface-200);
+  border: 1px solid var(--galvyn-border-300);
+  border-radius: var(--galvyn-radius-sm);
+  font-family: var(--galvyn-font-mono);
+  font-size: 0.625rem;
+  color: var(--galvyn-text-300);
+  box-shadow: 0 1px 0 var(--galvyn-border-200);
+}
+
+
+/* ─── Status Dot ─────────────────────────────────── */
+.galvyn-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.galvyn-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.galvyn-status-dot-online { background: var(--galvyn-success); }
+.galvyn-status-dot-offline { background: var(--galvyn-text-400); }
+.galvyn-status-dot-warning { background: var(--galvyn-warning); }
+.galvyn-status-dot-error { background: var(--galvyn-error); }
+.galvyn-status-label { font-size: 0.75rem; color: var(--galvyn-text-200); }

package/dist/index.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+// src/tokens/index.ts
+var GALVYN_HUES = {
+  blue: 220,
+  teal: 180,
+  purple: 270,
+  pink: 340,
+  green: 150,
+  amber: 30
+};
+function galvynAccent(hue) {
+  const value = typeof hue === "number" ? hue : GALVYN_HUES[hue];
+  return { "--galvyn-accent-hue": value };
+}
+function galvynBorderClass(variant = "subtle") {
+  if (variant === "none") return "";
+  const base = "galvyn-border-gradient";
+  if (variant === "subtle") return base;
+  if (variant === "shimmer") return `${base} galvyn-border-shimmer`;
+  return `${base} galvyn-border-gradient-${variant}`;
+}
+
+exports.GALVYN_HUES = GALVYN_HUES;
+exports.galvynAccent = galvynAccent;
+exports.galvynBorderClass = galvynBorderClass;

package/dist/index.d.cts

@@ -0,0 +1,30 @@
+/**
+ * Galvyn accent hue presets.
+ * Set via: style={{ '--galvyn-accent-hue': GALVYN_HUES.teal }}
+ * Or in CSS: :root { --galvyn-accent-hue: 180; }
+ */
+declare const GALVYN_HUES: {
+    readonly blue: 220;
+    readonly teal: 180;
+    readonly purple: 270;
+    readonly pink: 340;
+    readonly green: 150;
+    readonly amber: 30;
+};
+type GalvynHue = keyof typeof GALVYN_HUES;
+type GalvynVariant = 'default' | 'secondary' | 'ghost' | 'accent' | 'danger';
+type GalvynSize = 'sm' | 'md' | 'lg';
+type GalvynBorderGradient = 'none' | 'subtle' | 'medium' | 'strong' | 'accent' | 'shimmer';
+type GalvynStatus = 'success' | 'warning' | 'error' | 'info';
+/**
+ * Helper to set the accent hue as inline style.
+ * Usage: <div style={galvynAccent('teal')}>
+ */
+declare function galvynAccent(hue: GalvynHue | number): React.CSSProperties;
+/**
+ * Gradient border class helper.
+ * Returns the appropriate CSS class string for gradient borders.
+ */
+declare function galvynBorderClass(variant?: GalvynBorderGradient): string;
+
+export { GALVYN_HUES, type GalvynBorderGradient, type GalvynHue, type GalvynSize, type GalvynStatus, type GalvynVariant, galvynAccent, galvynBorderClass };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Galvyn accent hue presets.
+ * Set via: style={{ '--galvyn-accent-hue': GALVYN_HUES.teal }}
+ * Or in CSS: :root { --galvyn-accent-hue: 180; }
+ */
+declare const GALVYN_HUES: {
+    readonly blue: 220;
+    readonly teal: 180;
+    readonly purple: 270;
+    readonly pink: 340;
+    readonly green: 150;
+    readonly amber: 30;
+};
+type GalvynHue = keyof typeof GALVYN_HUES;
+type GalvynVariant = 'default' | 'secondary' | 'ghost' | 'accent' | 'danger';
+type GalvynSize = 'sm' | 'md' | 'lg';
+type GalvynBorderGradient = 'none' | 'subtle' | 'medium' | 'strong' | 'accent' | 'shimmer';
+type GalvynStatus = 'success' | 'warning' | 'error' | 'info';
+/**
+ * Helper to set the accent hue as inline style.
+ * Usage: <div style={galvynAccent('teal')}>
+ */
+declare function galvynAccent(hue: GalvynHue | number): React.CSSProperties;
+/**
+ * Gradient border class helper.
+ * Returns the appropriate CSS class string for gradient borders.
+ */
+declare function galvynBorderClass(variant?: GalvynBorderGradient): string;
+
+export { GALVYN_HUES, type GalvynBorderGradient, type GalvynHue, type GalvynSize, type GalvynStatus, type GalvynVariant, galvynAccent, galvynBorderClass };

package/dist/index.js

@@ -0,0 +1,22 @@
+// src/tokens/index.ts
+var GALVYN_HUES = {
+  blue: 220,
+  teal: 180,
+  purple: 270,
+  pink: 340,
+  green: 150,
+  amber: 30
+};
+function galvynAccent(hue) {
+  const value = typeof hue === "number" ? hue : GALVYN_HUES[hue];
+  return { "--galvyn-accent-hue": value };
+}
+function galvynBorderClass(variant = "subtle") {
+  if (variant === "none") return "";
+  const base = "galvyn-border-gradient";
+  if (variant === "subtle") return base;
+  if (variant === "shimmer") return `${base} galvyn-border-shimmer`;
+  return `${base} galvyn-border-gradient-${variant}`;
+}
+
+export { GALVYN_HUES, galvynAccent, galvynBorderClass };