@skylab-kulubu/skylcn-ui 0.1.3 → 0.1.4

package/dist/components/skylab-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skylab-loader.d.ts","sourceRoot":"","sources":["../../src/components/skylab-loader.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,gGAAgG;AAChG,wBAAgB,YAAY,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BA+B1F"}
+{"version":3,"file":"skylab-loader.d.ts","sourceRoot":"","sources":["../../src/components/skylab-loader.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,gGAAgG;AAChG,wBAAgB,YAAY,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAgE1F"}

package/dist/components/skylab-loader.js

@@ -1,12 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SKYLAB_MARK_PATHS, SKYLAB_MARK_RADII, SKYLAB_MARK_VIEWBOX, } from '../assets/skylab-mark.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { SKYLAB_MARK_PATHS, SKYLAB_MARK_VIEWBOX } from '../assets/skylab-mark.js';
 import { cn } from '../lib/cn.js';
-const RADIATE_SPREAD_MS = 700;
+// Fatih Naz's loader from forms-frontend lights the mark in seven groups from the centre out.
+// Each path's group, in SKYLAB_MARK_PATHS order.
+const GROUPS = [4, 2, 0, 3, 4, 2, 5, 6, 3, 1, 4, 2, 3, 4, 2, 5, 6, 3, 1];
+const STAGGER_MS = 80;
+// Below these sizes the shimmer, halo and steel outline only muddy the mark.
+const RICH_FROM = 32;
+const METAL_FROM = 64;
 /** The SKY LAB mark lighting up from its centre; the one loading indicator of every product. */
 export function SkylabLoader({ size = 80, state = 'loading', className }) {
+    // useId's characters do not all survive inside url(#…)
+    const steelId = `skylcn-steel-${useId().replace(/[^\w-]/g, '')}`;
     const animate = state === 'loading';
-    return (_jsx("svg", { "data-slot": "skylab-loader", viewBox: SKYLAB_MARK_VIEWBOX, width: size, height: size, fill: "currentColor", "aria-hidden": true, className: cn('shrink-0 text-secondary-foreground', animate && 'skylcn-mark-radiate', className), children: _jsx("g", { fillRule: "evenodd", children: SKYLAB_MARK_PATHS.map((d, i) => (_jsx("path", { d: d, style: animate
-                    ? { animationDelay: `${Math.round(SKYLAB_MARK_RADII[i] * RADIATE_SPREAD_MS)}ms` }
-                    : undefined }, i))) }) }));
+    const rich = animate && size >= RICH_FROM;
+    const metal = animate && size >= METAL_FROM;
+    const paths = SKYLAB_MARK_PATHS.map((d, i) => (_jsx("path", { d: d, style: animate ? { animationDelay: `${GROUPS[i] * STAGGER_MS}ms` } : undefined }, i)));
+    return (_jsxs("span", { "data-slot": "skylab-loader", "aria-hidden": true, className: cn('relative inline-block shrink-0 text-secondary-foreground', animate && 'skylcn-loader', rich && 'skylcn-loader-rich', className), style: { width: size, height: size }, children: [rich ? _jsx("span", { className: "skylcn-loader-halo absolute inset-0 rounded-full" }) : null, _jsx("svg", { viewBox: SKYLAB_MARK_VIEWBOX, fill: "currentColor", className: "skylcn-loader-mark relative block size-full", children: _jsx("g", { fillRule: "evenodd", children: paths }) }), metal ? (_jsxs("svg", { viewBox: SKYLAB_MARK_VIEWBOX, fill: "none", className: "skylcn-loader-metal absolute inset-0 block size-full", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: steelId, x1: "0", y1: "0", x2: "586", y2: "554", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "var(--skylcn-steel-hi)" }), _jsx("stop", { offset: "0.22", stopColor: "var(--skylcn-steel-lo)" }), _jsx("stop", { offset: "0.45", stopColor: "var(--skylcn-steel-hi)" }), _jsx("stop", { offset: "0.6", stopColor: "var(--skylcn-steel-lo)" }), _jsx("stop", { offset: "0.82", stopColor: "var(--skylcn-steel-hi)" }), _jsx("stop", { offset: "1", stopColor: "var(--skylcn-steel-lo)" })] }) }), _jsx("g", { stroke: `url(#${steelId})`, strokeWidth: size >= 120 ? 5 : 7, strokeLinejoin: "round", children: paths })] })) : null] }));
 }
 //# sourceMappingURL=skylab-loader.js.map

package/dist/components/skylab-loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"skylab-loader.js","sourceRoot":"","sources":["../../src/components/skylab-loader.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAU9B,gGAAgG;AAChG,MAAM,UAAU,YAAY,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,SAAS,EAAE,SAAS,EAAqB;IACzF,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,CAAC;IACpC,OAAO,CACL,2BACY,eAAe,EACzB,OAAO,EAAE,mBAAmB,EAC5B,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,IAAI,EAAC,cAAc,uBAEnB,SAAS,EAAE,EAAE,CACX,oCAAoC,EACpC,OAAO,IAAI,qBAAqB,EAChC,SAAS,CACV,YAED,YAAG,QAAQ,EAAC,SAAS,YAClB,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,eAEE,CAAC,EAAE,CAAC,EACJ,KAAK,EACH,OAAO;oBACL,CAAC,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAE,GAAG,iBAAiB,CAAC,IAAI,EAAE;oBAClF,CAAC,CAAC,SAAS,IALV,CAAC,CAON,CACH,CAAC,GACA,GACA,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"skylab-loader.js","sourceRoot":"","sources":["../../src/components/skylab-loader.tsx"],"names":[],"mappings":"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"}

package/dist/styles/theme.css

@@ -260,31 +260,129 @@
   }
 }
 
-/* The crisp SKY LAB mark lighting up from its centre; SkylabLoader sets each path's delay */
+/*
+ * SkylabLoader: the mark lights up group by group from its centre (each path's delay comes
+ * from the component), never fading below a floor, with a shimmer band and a soft halo from
+ * 32px and a diagonal glint along a steel outline from 64px. Still under reduced motion.
+ */
 @layer components {
-  .skylcn-mark-radiate path {
-    opacity: 0.22;
-    animation: skylcn-mark-radiate 1.6s var(--motion-ease-enter) infinite;
+  .skylcn-loader {
+    --skylcn-loader-cycle: 2.4s;
+    --skylcn-loader-floor: 0.2;
+    --skylcn-steel-hi: color-mix(in srgb, currentColor 30%, white);
+    --skylcn-steel-lo: color-mix(in srgb, currentColor 55%, black);
+  }
+  :where([data-theme='light']) .skylcn-loader {
+    --skylcn-loader-floor: 0.3;
+    --skylcn-steel-hi: color-mix(in srgb, currentColor 35%, white);
+    --skylcn-steel-lo: color-mix(in srgb, currentColor 80%, black);
+  }
+  .skylcn-loader .skylcn-loader-mark path,
+  .skylcn-loader .skylcn-loader-metal path {
+    animation: skylcn-loader-reveal var(--skylcn-loader-cycle) ease-in-out infinite both;
+  }
+  .skylcn-loader-rich .skylcn-loader-mark {
+    /* a 200-unit bright band crossing the 586-unit mark; the mask is four times as wide */
+    mask-image: linear-gradient(
+      90deg,
+      rgb(0 0 0 / 0.55) 0%,
+      rgb(0 0 0 / 0.55) 45.74%,
+      #000 50%,
+      rgb(0 0 0 / 0.55) 54.26%,
+      rgb(0 0 0 / 0.55) 100%
+    );
+    mask-size: 400% 100%;
+    mask-repeat: no-repeat;
+    animation: skylcn-loader-shimmer var(--skylcn-loader-cycle) ease-in-out infinite;
+  }
+  .skylcn-loader-metal {
+    mask-image: linear-gradient(
+      115deg,
+      transparent 0%,
+      transparent 44%,
+      #000 49%,
+      #000 51%,
+      transparent 56%,
+      transparent 100%
+    );
+    mask-size: 400% 400%;
+    mask-repeat: no-repeat;
+    animation: skylcn-loader-glint var(--skylcn-loader-cycle) ease-in-out infinite;
+  }
+  .skylcn-loader-halo {
+    background: radial-gradient(
+      circle,
+      color-mix(in srgb, currentColor 14%, transparent) 0%,
+      transparent 70%
+    );
+    filter: blur(8px);
+    animation: skylcn-loader-halo var(--skylcn-loader-cycle) ease-in-out infinite;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .skylcn-mark-radiate path {
+    .skylcn-loader .skylcn-loader-mark,
+    .skylcn-loader .skylcn-loader-mark path {
       animation: none;
-      opacity: 1;
+      mask-image: none;
+    }
+    .skylcn-loader .skylcn-loader-metal,
+    .skylcn-loader .skylcn-loader-halo {
+      display: none;
     }
   }
-  [data-motion='reduced'] .skylcn-mark-radiate path {
+  [data-motion='reduced'] .skylcn-loader .skylcn-loader-mark,
+  [data-motion='reduced'] .skylcn-loader .skylcn-loader-mark path {
     animation: none;
+    mask-image: none;
+  }
+  [data-motion='reduced'] .skylcn-loader .skylcn-loader-metal,
+  [data-motion='reduced'] .skylcn-loader .skylcn-loader-halo {
+    display: none;
+  }
+}
+
+@keyframes skylcn-loader-reveal {
+  0%,
+  100% {
+    opacity: var(--skylcn-loader-floor);
+  }
+  37.5%,
+  70.8% {
     opacity: 1;
   }
 }
 
-@keyframes skylcn-mark-radiate {
+/* the band's centre runs from the mark's left edge to past its right one */
+@keyframes skylcn-loader-shimmer {
+  from {
+    mask-position: 66.67% 0;
+  }
+  to {
+    mask-position: 21.17% 0;
+  }
+}
+
+@keyframes skylcn-loader-glint {
+  0%,
+  15% {
+    mask-position: 70% 70%;
+  }
+  65%,
+  100% {
+    mask-position: 25% 25%;
+  }
+}
+
+@keyframes skylcn-loader-halo {
   0%,
   100% {
-    opacity: 0.22;
+    opacity: 0;
+  }
+  30%,
+  75% {
+    opacity: 0.6;
   }
-  35% {
+  50% {
     opacity: 1;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skylab-kulubu/skylcn-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "SKY LAB web ürünlerinin ortak tasarım sistemi: token'lar, tema ve bileşenler.",
   "license": "MIT",
   "author": "SKY LAB Kulübü",