@asteby/metacore-auth 31.0.0 → 31.1.0

package/README.md

@@ -93,6 +93,24 @@ export function SignInRoute() {
 }
 ```
 
+## Showcases
+
+`@asteby/metacore-auth/showcases` ships brand-neutral options for the sign-in side column: `GenericShowcase`, composable `blocks`, and `GradientShowcase`, a decorative CSS-only gradient backdrop (theme `--primary` by default) with a content slot:
+
+```tsx
+import { GradientShowcase } from '@asteby/metacore-auth/showcases'
+
+<SignInPage
+  showcase={
+    <GradientShowcase title='Bienvenido' subtitle='Inicia sesión para continuar.'>
+      <MyIllustration />
+    </GradientShowcase>
+  }
+/>
+```
+
+Props: `colors` (≥2 CSS colors), `angle`, `blobs`, `scrim`, `title`/`subtitle`/`footer`, `children`, `className`. Also importable from `@asteby/metacore-auth/showcases/gradient`.
+
 ## Design notes
 
 - **Zustand store is canonical** — generic shape (user + token + reset) shared across host applications. Persists to `localStorage` keys `auth_token` / `auth_user`.

package/dist/showcases/gradient.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export type GradientShowcaseProps = {
+    /**
+     * Gradient stops, any valid CSS color (`#102E6B`, `hsl(var(--primary))`).
+     * Defaults to the theme's primary fading into the background. At least two
+     * stops are needed; fewer fall back to the default.
+     */
+    colors?: readonly string[];
+    /** `linear-gradient` angle in degrees. Default `135`. */
+    angle?: number;
+    /** Soft decorative blobs over the gradient. Default `true`. */
+    blobs?: boolean;
+    /** Darkening scrim so text stays legible over bright stops. Default `false`. */
+    scrim?: boolean;
+    /** Headline rendered through `HeroPanel`. Omit to render only `children`. */
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    /** Slot below the subtitle (CTAs, badges, signed-by, …). */
+    footer?: ReactNode;
+    /** Free content centered over the gradient (after the hero text, if any). */
+    children?: ReactNode;
+    className?: string;
+};
+export declare const DEFAULT_GRADIENT_COLORS: readonly string[];
+/** CSS `background-image` for `colors` / `angle` (exported for tests and hosts). */
+export declare function buildGradient(colors?: readonly string[], angle?: number): string;
+export declare function GradientShowcase({ colors, angle, blobs, scrim, title, subtitle, footer, children, className, }?: GradientShowcaseProps): import("react").JSX.Element;
+//# sourceMappingURL=gradient.d.ts.map

package/dist/showcases/gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../src/showcases/gradient.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrD,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,SAAS,MAAM,EAIpD,CAAA;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,SAAM,GAAG,MAAM,CAG7E;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,KAAW,EACX,KAAY,EACZ,KAAa,EACb,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,GACV,GAAE,qBAA0B,+BAsC5B"}

package/dist/showcases/gradient.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@asteby/metacore-ui/lib';
+import { HeroPanel } from './blocks';
+export const DEFAULT_GRADIENT_COLORS = [
+    'color-mix(in oklab, var(--primary, #102E6B) 85%, black)',
+    'var(--primary, #102E6B)',
+    'color-mix(in oklab, var(--primary, #102E6B) 35%, var(--background, white))',
+];
+/** CSS `background-image` for `colors` / `angle` (exported for tests and hosts). */
+export function buildGradient(colors, angle = 135) {
+    const stops = colors && colors.length >= 2 ? colors : DEFAULT_GRADIENT_COLORS;
+    return `linear-gradient(${Number.isFinite(angle) ? angle : 135}deg, ${stops.join(', ')})`;
+}
+export function GradientShowcase({ colors, angle = 135, blobs = true, scrim = false, title, subtitle, footer, children, className, } = {}) {
+    const style = { backgroundImage: buildGradient(colors, angle) };
+    return (_jsxs("div", { "data-slot": "gradient-showcase", className: cn('relative flex h-full w-full items-center justify-center overflow-hidden px-8 text-white', className), style: style, children: [blobs && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute -top-1/4 -right-1/4 size-[480px] rounded-full bg-white/15 blur-3xl" }), _jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute -bottom-1/4 -left-1/4 size-[420px] rounded-full bg-black/20 blur-3xl" })] })), scrim && _jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 bg-black/30" }), _jsxs("div", { className: "relative z-10 flex w-full max-w-md flex-col items-center gap-6", children: [title != null && (_jsx(HeroPanel, { title: title, subtitle: subtitle, footer: footer, noAnimate: true, className: "[&_p]:text-white/80" })), children] })] }));
+}
+//# sourceMappingURL=gradient.js.map

package/dist/showcases/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.js","sourceRoot":"","sources":["../../src/showcases/gradient.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAyBpC,MAAM,CAAC,MAAM,uBAAuB,GAAsB;IACxD,yDAAyD;IACzD,yBAAyB;IACzB,4EAA4E;CAC7E,CAAA;AAED,oFAAoF;AACpF,MAAM,UAAU,aAAa,CAAC,MAA0B,EAAE,KAAK,GAAG,GAAG;IACnE,MAAM,KAAK,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAA;IAC7E,OAAO,mBAAmB,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;AAC3F,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,KAAK,GAAG,GAAG,EACX,KAAK,GAAG,IAAI,EACZ,KAAK,GAAG,KAAK,EACb,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,MACgB,EAAE;IAC3B,MAAM,KAAK,GAAkB,EAAE,eAAe,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAA;IAC9E,OAAO,CACL,4BACY,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CACX,yFAAyF,EACzF,SAAS,CACV,EACD,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,CACR,8BACE,6BACc,MAAM,EAClB,SAAS,EAAC,iGAAiG,GAC3G,EACF,6BACc,MAAM,EAClB,SAAS,EAAC,mGAAmG,GAC7G,IACD,CACJ,EACA,KAAK,IAAI,6BAAiB,MAAM,EAAC,SAAS,EAAC,kDAAkD,GAAG,EACjG,eAAK,SAAS,EAAC,gEAAgE,aAC5E,KAAK,IAAI,IAAI,IAAI,CAChB,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,QACT,SAAS,EAAC,qBAAqB,GAC/B,CACH,EACA,QAAQ,IACL,IACF,CACP,CAAA;AACH,CAAC"}

package/dist/showcases/index.d.ts

@@ -1,3 +1,4 @@
 export { GenericShowcase, type GenericShowcaseProps } from './generic';
+export { GradientShowcase, buildGradient, DEFAULT_GRADIENT_COLORS, type GradientShowcaseProps, } from './gradient';
 export { HeroPanel, TileGrid, FeatureList, StatRow, type HeroPanelProps, type TileGridProps, type Tile, type FeatureListProps, type Feature, type StatRowProps, type Stat, } from './blocks';
 //# sourceMappingURL=index.d.ts.map

package/dist/showcases/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/showcases/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,WAAW,CAAA;AACtE,OAAO,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,IAAI,EACT,KAAK,gBAAgB,EACrB,KAAK,OAAO,EACZ,KAAK,YAAY,EACjB,KAAK,IAAI,GACV,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/showcases/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,WAAW,CAAA;AACtE,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,YAAY,CAAA;AACnB,OAAO,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,IAAI,EACT,KAAK,gBAAgB,EACrB,KAAK,OAAO,EACZ,KAAK,YAAY,EACjB,KAAK,IAAI,GACV,MAAM,UAAU,CAAA"}

package/dist/showcases/index.js

@@ -1,6 +1,8 @@
 // Brand-neutral fallback showcase + composable building blocks.
+// GradientShowcase is a decorative, CSS-only backdrop with a content slot.
 // Apps that want a custom showcase compose the blocks (HeroPanel, TileGrid,
 // FeatureList, StatRow) from `@asteby/metacore-auth/showcases/blocks`.
 export { GenericShowcase } from './generic';
+export { GradientShowcase, buildGradient, DEFAULT_GRADIENT_COLORS, } from './gradient';
 export { HeroPanel, TileGrid, FeatureList, StatRow, } from './blocks';
 //# sourceMappingURL=index.js.map

package/dist/showcases/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/showcases/index.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,4EAA4E;AAC5E,uEAAuE;AACvE,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAA;AACtE,OAAO,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAO,GAQR,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/showcases/index.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,2EAA2E;AAC3E,4EAA4E;AAC5E,uEAAuE;AACvE,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAA;AACtE,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,uBAAuB,GAExB,MAAM,YAAY,CAAA;AACnB,OAAO,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAO,GAQR,MAAM,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-auth",
-  "version": "31.0.0",
+  "version": "31.1.0",
   "description": "Metacore auth kit — Zustand store, API client factory, login/signup/forgot pages, guards for TanStack Router",
   "license": "Apache-2.0",
   "repository": {
@@ -52,6 +52,10 @@
       "types": "./dist/showcases/generic.d.ts",
       "import": "./dist/showcases/generic.js"
     },
+    "./showcases/gradient": {
+      "types": "./dist/showcases/gradient.d.ts",
+      "import": "./dist/showcases/gradient.js"
+    },
     "./showcases/blocks": {
       "types": "./dist/showcases/blocks/index.d.ts",
       "import": "./dist/showcases/blocks/index.js"