@medialane/ui 0.2.0 → 0.3.1

package/dist/medialane.css

@@ -0,0 +1,184 @@
+/* Medialane Design System — shared CSS
+   Imported by apps via: import "@medialane/ui/styles"
+   Do NOT import @tailwind directives here — apps handle that.
+   All classes here are pure CSS, no @apply. */
+
+/* ── Scrollbars ───────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 4px; }
+.scrollbar-none { scrollbar-width: none; }
+.scrollbar-none::-webkit-scrollbar { display: none; }
+.scrollbar-hide { scrollbar-width: none; }
+.scrollbar-hide::-webkit-scrollbar { display: none; }
+
+/* ── Glass ────────────────────────────────────────────────────────────── */
+.glass {
+  background: rgba(10, 14, 30, 0.60);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.glass-light {
+  background: rgba(255, 255, 255, 0.80);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+/* ── Typography gradients ─────────────────────────────────────────────── */
+.gradient-text {
+  background: linear-gradient(135deg, #a855f7 0%, #6366f1 40%, #2563eb 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.gradient-text-warm {
+  background: linear-gradient(135deg, #f43f5e 0%, #ea580c 60%, #f59e0b 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.gradient-text-gold {
+  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ── Price ────────────────────────────────────────────────────────────── */
+.price-value {
+  color: hsl(var(--price));
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Section label ────────────────────────────────────────────────────── */
+.section-label {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ── Pill badge ───────────────────────────────────────────────────────── */
+.pill-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  border: 1px solid hsl(var(--primary) / 0.25);
+  background: hsl(var(--primary) / 0.08);
+  padding: 0.25rem 0.875rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: hsl(var(--primary));
+}
+
+/* ── Aurora blobs ─────────────────────────────────────────────────────── */
+.aurora-purple { position: absolute; border-radius: 9999px; background: #9333ea; filter: blur(100px); opacity: 0.07; }
+.aurora-blue   { position: absolute; border-radius: 9999px; background: #2563eb; filter: blur(120px); opacity: 0.06; }
+.aurora-rose   { position: absolute; border-radius: 9999px; background: #f43f5e; filter: blur(100px); opacity: 0.05; }
+.aurora-orange { position: absolute; border-radius: 9999px; background: #ea580c; filter: blur(110px); opacity: 0.04; }
+.dark .aurora-purple { opacity: 0.15; }
+.dark .aurora-blue   { opacity: 0.11; }
+.dark .aurora-rose   { opacity: 0.09; }
+.dark .aurora-orange { opacity: 0.07; }
+
+/* ── Card primitives ──────────────────────────────────────────────────── */
+.card-base {
+  border-radius: calc(var(--radius) * 1.25);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  overflow: hidden;
+  will-change: transform;
+}
+.bento-cell {
+  border-radius: calc(var(--radius) * 1.25);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  overflow: hidden;
+  position: relative;
+}
+
+/* ── Background grid ──────────────────────────────────────────────────── */
+.bg-grid {
+  background-image:
+    linear-gradient(hsl(var(--border) / 0.4) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(var(--border) / 0.4) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+
+/* ── Snap scroll ──────────────────────────────────────────────────────── */
+.snap-x-mandatory { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
+.snap-start { scroll-snap-align: start; }
+
+/* ── Keyframes ────────────────────────────────────────────────────────── */
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+@keyframes blob-pulse {
+  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.07; }
+  50% { transform: scale(1.15) rotate(10deg); opacity: 0.14; }
+}
+@keyframes blob-pulse-slow {
+  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.05; }
+  50% { transform: scale(1.2) rotate(-8deg); opacity: 0.11; }
+}
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes pulse-glow {
+  0%, 100% { opacity: 0.6; }
+  50%       { opacity: 1; }
+}
+@keyframes spin-slow { to { transform: rotate(360deg); } }
+@keyframes digit-in {
+  from { transform: translateY(-14px); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+@keyframes scroll-strip {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+@keyframes kenburns {
+  0%   { transform: scale(1.0) translate(0%, 0%); }
+  100% { transform: scale(1.08) translate(-1.5%, -1%); }
+}
+@keyframes border-flow {
+  0%, 100% { background-position: 0% 50%; }
+  50%       { background-position: 100% 50%; }
+}
+
+/* ── Animation utilities ──────────────────────────────────────────────── */
+.animate-float      { animation: float 5s ease-in-out infinite; }
+.animate-blob       { animation: blob-pulse 7s ease-in-out infinite; }
+.animate-blob-slow  { animation: blob-pulse-slow 9s ease-in-out infinite 2s; }
+.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
+.animate-spin-slow  { animation: spin-slow 24s linear infinite; }
+.animate-sparkle    { animation: pulse-glow 2.5s ease-in-out infinite; }
+.animate-kenburns   { animation: kenburns 8s ease-in-out infinite alternate; transform-origin: center center; }
+
+/* ── Reduced motion ───────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .animate-float, .animate-blob, .animate-blob-slow,
+  .animate-pulse-glow, .animate-spin-slow, .animate-sparkle,
+  .animate-kenburns { animation: none; }
+}
+
+/* ── Input spinners (price inputs use custom suffix) ──────────────────── */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+input[type="number"] { -moz-appearance: textfield; }
+
+/* ── Animated gradient border (marketplace buy button) ────────────────── */
+.btn-border-animated {
+  background: linear-gradient(270deg, #2563eb, #9333ea, #f43f5e, #ea580c, #2563eb);
+  background-size: 300% 300%;
+  animation: border-flow 5s ease infinite;
+}

package/dist/utils/time.cjs

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var time_exports = {};
+__export(time_exports, {
+  timeAgo: () => timeAgo
+});
+module.exports = __toCommonJS(time_exports);
+function timeAgo(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const s = Math.floor(diff / 1e3);
+  if (s < 60) return "just now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d}d ago`;
+  const mo = Math.floor(d / 30);
+  if (mo < 12) return `${mo}mo ago`;
+  return `${Math.floor(mo / 12)}y ago`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  timeAgo
+});
+//# sourceMappingURL=time.cjs.map

package/dist/utils/time.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/time.ts"],"sourcesContent":["/**\n * Returns a human-readable relative time string.\n * e.g. \"just now\", \"2m ago\", \"3h ago\", \"5d ago\"\n */\nexport function timeAgo(iso: string): string {\n  const diff = Date.now() - new Date(iso).getTime();\n  const s = Math.floor(diff / 1000);\n  if (s < 60) return \"just now\";\n  const m = Math.floor(s / 60);\n  if (m < 60) return `${m}m ago`;\n  const h = Math.floor(m / 60);\n  if (h < 24) return `${h}h ago`;\n  const d = Math.floor(h / 24);\n  if (d < 30) return `${d}d ago`;\n  const mo = Math.floor(d / 30);\n  if (mo < 12) return `${mo}mo ago`;\n  return `${Math.floor(mo / 12)}y ago`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,SAAS,QAAQ,KAAqB;AAC3C,QAAM,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,GAAG,EAAE,QAAQ;AAChD,QAAM,IAAI,KAAK,MAAM,OAAO,GAAI;AAChC,MAAI,IAAI,GAAI,QAAO;AACnB,QAAM,IAAI,KAAK,MAAM,IAAI,EAAE;AAC3B,MAAI,IAAI,GAAI,QAAO,GAAG,CAAC;AACvB,QAAM,IAAI,KAAK,MAAM,IAAI,EAAE;AAC3B,MAAI,IAAI,GAAI,QAAO,GAAG,CAAC;AACvB,QAAM,IAAI,KAAK,MAAM,IAAI,EAAE;AAC3B,MAAI,IAAI,GAAI,QAAO,GAAG,CAAC;AACvB,QAAM,KAAK,KAAK,MAAM,IAAI,EAAE;AAC5B,MAAI,KAAK,GAAI,QAAO,GAAG,EAAE;AACzB,SAAO,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;AAC/B;","names":[]}

package/dist/utils/time.d.cts

@@ -0,0 +1,7 @@
+/**
+ * Returns a human-readable relative time string.
+ * e.g. "just now", "2m ago", "3h ago", "5d ago"
+ */
+declare function timeAgo(iso: string): string;
+
+export { timeAgo };

package/dist/utils/time.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a human-readable relative time string.
+ * e.g. "just now", "2m ago", "3h ago", "5d ago"
+ */
+declare function timeAgo(iso: string): string;
+
+export { timeAgo };

package/dist/utils/time.js

@@ -0,0 +1,18 @@
+function timeAgo(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const s = Math.floor(diff / 1e3);
+  if (s < 60) return "just now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d}d ago`;
+  const mo = Math.floor(d / 30);
+  if (mo < 12) return `${mo}mo ago`;
+  return `${Math.floor(mo / 12)}y ago`;
+}
+export {
+  timeAgo
+};
+//# sourceMappingURL=time.js.map

package/dist/utils/time.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/time.ts"],"sourcesContent":["/**\n * Returns a human-readable relative time string.\n * e.g. \"just now\", \"2m ago\", \"3h ago\", \"5d ago\"\n */\nexport function timeAgo(iso: string): string {\n  const diff = Date.now() - new Date(iso).getTime();\n  const s = Math.floor(diff / 1000);\n  if (s < 60) return \"just now\";\n  const m = Math.floor(s / 60);\n  if (m < 60) return `${m}m ago`;\n  const h = Math.floor(m / 60);\n  if (h < 24) return `${h}h ago`;\n  const d = Math.floor(h / 24);\n  if (d < 30) return `${d}d ago`;\n  const mo = Math.floor(d / 30);\n  if (mo < 12) return `${mo}mo ago`;\n  return `${Math.floor(mo / 12)}y ago`;\n}\n"],"mappings":"AAIO,SAAS,QAAQ,KAAqB;AAC3C,QAAM,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,GAAG,EAAE,QAAQ;AAChD,QAAM,IAAI,KAAK,MAAM,OAAO,GAAI;AAChC,MAAI,IAAI,GAAI,QAAO;AACnB,QAAM,IAAI,KAAK,MAAM,IAAI,EAAE;AAC3B,MAAI,IAAI,GAAI,QAAO,GAAG,CAAC;AACvB,QAAM,IAAI,KAAK,MAAM,IAAI,EAAE;AAC3B,MAAI,IAAI,GAAI,QAAO,GAAG,CAAC;AACvB,QAAM,IAAI,KAAK,MAAM,IAAI,EAAE;AAC3B,MAAI,IAAI,GAAI,QAAO,GAAG,CAAC;AACvB,QAAM,KAAK,KAAK,MAAM,IAAI,EAAE;AAC5B,MAAI,KAAK,GAAI,QAAO,GAAG,EAAE;AACzB,SAAO,GAAG,KAAK,MAAM,KAAK,EAAE,CAAC;AAC/B;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,7 +16,8 @@
       "types": "./dist/preset/tailwind.d.ts",
       "import": "./dist/preset/tailwind.js",
       "require": "./dist/preset/tailwind.cjs"
-    }
+    },
+    "./styles": "./dist/medialane.css"
   },
   "license": "MIT",
   "publishConfig": {