@skylab-kulubu/skylcn-ui 0.1.3 → 0.1.5

package/dist/components/button.d.ts

@@ -18,7 +18,7 @@ export type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVari
      */
     hoverIcon?: LucideIcon;
 };
-export declare function Button({ className, variant, size, pending, disabled, children, render, nativeButton, hoverIcon: HoverIcon, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ className, variant, size, pending, disabled, children, render, nativeButton, focusableWhenDisabled, hoverIcon: HoverIcon, ...props }: ButtonProps): import("react").JSX.Element;
 export type IconButtonProps = Omit<ButtonProps, 'children'> & {
     icon: LucideIcon;
     /** Read by screen readers and shown as the native tooltip. */

package/dist/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,cAAc;;;8EAkCnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAC7C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,SAAS,EAAE,SAAS,EACpB,GAAG,KAAK,EACT,EAAE,WAAW,+BA6Cb;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,2EAA2E;AAC3E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,IAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BAMjB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,cAAc;;;8EAkCnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAC7C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAQJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,qBAAqB,EACrB,SAAS,EAAE,SAAS,EACpB,GAAG,KAAK,EACT,EAAE,WAAW,+BAmFb;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,2EAA2E;AAC3E,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,IAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BAMjB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/button.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
-import { isValidElement } from 'react';
+import { cloneElement, isValidElement } from 'react';
 import { cn } from '../lib/cn.js';
 import { usePendingIndicator } from '../lib/use-pending-indicator.js';
 import { SkylabLoader } from './skylab-loader.js';
@@ -34,14 +34,35 @@ const buttonVariants = cva([
     },
     defaultVariants: { variant: 'outline', size: 'md' },
 });
-export function Button({ className, variant, size, pending = false, disabled, children, render, nativeButton, hoverIcon: HoverIcon, ...props }) {
+export function Button({ className, variant, size, pending = false, disabled, children, render, nativeButton, focusableWhenDisabled, hoverIcon: HoverIcon, ...props }) {
     const busy = usePendingIndicator(pending);
-    // A button rendered as a link (render={<a href />}) keeps link semantics.
-    const native = nativeButton ?? !(isValidElement(render) && render.type !== 'button');
-    return (_jsxs(ButtonPrimitive, { "data-slot": "button", 
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "button-content", className: cn('inline-flex items-center justify-center gap-[inherit] transition-opacity duration-(--motion-duration-fast)', busy && 'opacity-0', HoverIcon && 'relative'), children: HoverIcon ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex items-center gap-[inherit] transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-full group-hover/button:opacity-0 group-focus-visible/button:translate-y-full group-focus-visible/button:opacity-0 motion-reduce:translate-y-0!", children: children }), _jsx("span", { "aria-hidden": true, className: "absolute inset-0 grid -translate-y-full place-items-center opacity-0 transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-0 group-hover/button:opacity-100 group-focus-visible/button:translate-y-0 group-focus-visible/button:opacity-100 motion-reduce:translate-y-0!", children: _jsx(HoverIcon, {}) })] })) : (children) }), busy ? (_jsx(SkylabLoader, { size: 16, className: "absolute inset-0 m-auto enter-fade text-current" })) : null] }));
+    // Rendered as a link (render={<a href />} or a router Link) it stays a link: Base UI's
+    // Button would give it role="button", so the link itself takes the button's look.
+    if (nativeButton === undefined && isValidElement(render) && render.type !== 'button') {
+        const link = render;
+        const blocked = Boolean(disabled || pending);
+        const linkProps = props;
+        return cloneElement(link, {
+            ...linkProps,
+            'data-slot': 'button',
+            className: cn(buttonVariants({ variant, size }), 'aria-disabled:pointer-events-none aria-disabled:opacity-60', HoverIcon && 'overflow-hidden', link.props.className, typeof className === 'string' ? className : undefined),
+            'aria-disabled': blocked || undefined,
+            tabIndex: blocked ? -1 : linkProps.tabIndex,
+            onClick: (event) => {
+                if (blocked) {
+                    event.preventDefault();
+                    return;
+                }
+                link.props.onClick?.(event);
+                linkProps.onClick?.(event);
+            },
+        }, content);
+    }
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", 
         // Clipping at the button's own edge keeps the sliding icon whole; the
         // 16px content box would shave its strokes
-        className: cn(buttonVariants({ variant, size }), HoverIcon && 'overflow-hidden', className), disabled: disabled || pending || busy, "aria-busy": busy || undefined, render: render, nativeButton: native, ...props, children: [_jsx("span", { "data-slot": "button-content", className: cn('inline-flex items-center justify-center gap-[inherit] transition-opacity duration-(--motion-duration-fast)', busy && 'opacity-0', HoverIcon && 'relative'), children: HoverIcon ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex items-center gap-[inherit] transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-full group-hover/button:opacity-0 group-focus-visible/button:translate-y-full group-focus-visible/button:opacity-0 motion-reduce:translate-y-0!", children: children }), _jsx("span", { "aria-hidden": true, className: "absolute inset-0 grid -translate-y-full place-items-center opacity-0 transition-[translate,opacity] duration-(--motion-duration-base) ease-enter group-hover/button:translate-y-0 group-hover/button:opacity-100 group-focus-visible/button:translate-y-0 group-focus-visible/button:opacity-100 motion-reduce:translate-y-0!", children: _jsx(HoverIcon, {}) })] })) : (children) }), busy ? (_jsx(SkylabLoader, { size: 16, className: "absolute inset-0 m-auto enter-fade text-current" })) : null] }));
+        className: cn(buttonVariants({ variant, size }), HoverIcon && 'overflow-hidden', className), disabled: disabled || pending || busy, "aria-busy": busy || undefined, render: render, nativeButton: nativeButton ?? true, focusableWhenDisabled: focusableWhenDisabled, ...props, children: content }));
 }
 /** A square button holding one icon; the admin toolbars' action button. */
 export function IconButton({ icon: Icon, label, size = 'icon', pending, title, ...props }) {

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"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"}

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.5",
   "description": "SKY LAB web ürünlerinin ortak tasarım sistemi: token'lar, tema ve bileşenler.",
   "license": "MIT",
   "author": "SKY LAB Kulübü",