@octaviaflow/core 3.0.12 → 3.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AuthCard/AuthCard.d.ts +35 -2
- package/dist/components/AuthCard/AuthCard.d.ts.map +1 -1
- package/dist/index.cjs +78 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +153 -88
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,16 +1,49 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
2
|
export interface AuthCardProps {
|
|
3
3
|
logo?: ReactNode;
|
|
4
|
-
title
|
|
4
|
+
title?: ReactNode;
|
|
5
5
|
description?: ReactNode;
|
|
6
6
|
/** Small badge rendered next to the title (e.g. "Organization"). */
|
|
7
7
|
scope?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Fully custom header that REPLACES the auto-built logo + title +
|
|
10
|
+
* description block. Use when the default head structure isn't enough
|
|
11
|
+
* (split-screen layouts, custom hero treatments, etc.). When provided,
|
|
12
|
+
* `logo`, `title`, `description`, and `scope` are ignored.
|
|
13
|
+
*/
|
|
14
|
+
header?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Extra content rendered immediately after the description, before the
|
|
17
|
+
* body. Common uses: step indicator ("Step 2 of 3"), breadcrumb,
|
|
18
|
+
* informational chip.
|
|
19
|
+
*/
|
|
20
|
+
headerExtra?: ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* When set, an error Banner is rendered above the body — same Banner
|
|
23
|
+
* the consumer would otherwise hand-roll. Pass `false` / `null` /
|
|
24
|
+
* `undefined` to hide. Accepts the same ReactNode shape Banner expects
|
|
25
|
+
* for its body.
|
|
26
|
+
*/
|
|
27
|
+
error?: ReactNode;
|
|
28
|
+
/** Same as `error` but renders a success Banner. */
|
|
29
|
+
success?: ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* Header alignment. Default `"center"` matches the OctaviaFlow auth
|
|
32
|
+
* convention (centered logo + title). Use `"left"` for split-screen or
|
|
33
|
+
* marketing-heavy layouts where the auth card sits next to other content.
|
|
34
|
+
*/
|
|
35
|
+
align?: "center" | "left";
|
|
36
|
+
/**
|
|
37
|
+
* Card width override. Default 400px (matches the historical default).
|
|
38
|
+
* Pass a number (px) or any CSS length string (e.g. "440px", "32rem").
|
|
39
|
+
*/
|
|
40
|
+
width?: number | string;
|
|
8
41
|
children: ReactNode;
|
|
9
42
|
divider?: ReactNode;
|
|
10
43
|
footer?: ReactNode;
|
|
11
44
|
className?: string;
|
|
12
45
|
}
|
|
13
|
-
export declare function AuthCard({ logo, title, description, scope, children, divider, footer, className, }: AuthCardProps): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare function AuthCard({ logo, title, description, scope, header, headerExtra, error, success, align, width, children, divider, footer, className, }: AuthCardProps): import("react/jsx-runtime").JSX.Element;
|
|
14
47
|
export interface AuthDividerProps {
|
|
15
48
|
children?: ReactNode;
|
|
16
49
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthCard.d.ts","sourceRoot":"","sources":["../../../src/components/AuthCard/AuthCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAGpF,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"AuthCard.d.ts","sourceRoot":"","sources":["../../../src/components/AuthCard/AuthCard.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.cjs
CHANGED
|
@@ -372,24 +372,89 @@ function AuthCard({
|
|
|
372
372
|
title,
|
|
373
373
|
description,
|
|
374
374
|
scope,
|
|
375
|
+
header,
|
|
376
|
+
headerExtra,
|
|
377
|
+
error,
|
|
378
|
+
success,
|
|
379
|
+
align = "center",
|
|
380
|
+
width,
|
|
375
381
|
children,
|
|
376
382
|
divider,
|
|
377
383
|
footer,
|
|
378
384
|
className
|
|
379
385
|
}) {
|
|
380
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
387
|
+
"div",
|
|
388
|
+
{
|
|
389
|
+
className: cn(
|
|
390
|
+
"ods-auth-card",
|
|
391
|
+
align === "left" && "ods-auth-card--left",
|
|
392
|
+
className
|
|
393
|
+
),
|
|
394
|
+
style: width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0,
|
|
395
|
+
children: [
|
|
396
|
+
header ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
397
|
+
logo && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-card__logo", children: logo }),
|
|
398
|
+
(title || description || scope) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ods-auth-card__head", children: [
|
|
399
|
+
(title || scope) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ods-auth-card__title-row", children: [
|
|
400
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "ods-auth-card__title", children: title }),
|
|
401
|
+
scope && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ods-auth-card__scope", children: scope })
|
|
402
|
+
] }),
|
|
403
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "ods-auth-card__desc", children: description })
|
|
404
|
+
] })
|
|
405
|
+
] }),
|
|
406
|
+
headerExtra && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-card__header-extra", children: headerExtra }),
|
|
407
|
+
(error || success) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
408
|
+
"div",
|
|
409
|
+
{
|
|
410
|
+
className: "ods-auth-card__messages",
|
|
411
|
+
style: {
|
|
412
|
+
display: "flex",
|
|
413
|
+
flexDirection: "column",
|
|
414
|
+
gap: "var(--ods-space-2)"
|
|
415
|
+
},
|
|
416
|
+
children: [
|
|
417
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutoBanner, { variant: "error", children: error }),
|
|
418
|
+
success && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutoBanner, { variant: "success", children: success })
|
|
419
|
+
]
|
|
420
|
+
}
|
|
421
|
+
),
|
|
422
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-card__body", children }),
|
|
423
|
+
divider && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-card__divider", children: divider }),
|
|
424
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-card__footer", children: footer })
|
|
425
|
+
]
|
|
426
|
+
}
|
|
427
|
+
);
|
|
428
|
+
}
|
|
429
|
+
function AutoBanner({
|
|
430
|
+
variant,
|
|
431
|
+
children
|
|
432
|
+
}) {
|
|
433
|
+
const tone = variant === "error" ? {
|
|
434
|
+
bg: "var(--ods-status-error-bg)",
|
|
435
|
+
fg: "var(--ods-status-error-fg)",
|
|
436
|
+
bd: "var(--ods-status-error-bd)"
|
|
437
|
+
} : {
|
|
438
|
+
bg: "var(--ods-status-success-bg)",
|
|
439
|
+
fg: "var(--ods-status-success-fg)",
|
|
440
|
+
bd: "var(--ods-status-success-bd)"
|
|
441
|
+
};
|
|
442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
443
|
+
"div",
|
|
444
|
+
{
|
|
445
|
+
role: variant === "error" ? "alert" : "status",
|
|
446
|
+
style: {
|
|
447
|
+
padding: "10px 12px",
|
|
448
|
+
background: tone.bg,
|
|
449
|
+
color: tone.fg,
|
|
450
|
+
border: `1px solid ${tone.bd}`,
|
|
451
|
+
borderRadius: "var(--ods-radius-1)",
|
|
452
|
+
fontSize: 13,
|
|
453
|
+
lineHeight: 1.45
|
|
454
|
+
},
|
|
455
|
+
children
|
|
456
|
+
}
|
|
457
|
+
);
|
|
393
458
|
}
|
|
394
459
|
function AuthDivider({ children = "OR", className }) {
|
|
395
460
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("ods-auth-divider", className), children: [
|