@medialane/ui 0.53.0 → 0.53.1
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/claim-rail.cjs +1 -1
- package/dist/components/claim-rail.cjs.map +1 -1
- package/dist/components/claim-rail.js +1 -1
- package/dist/components/claim-rail.js.map +1 -1
- package/dist/components/service-form-shell.cjs +1 -1
- package/dist/components/service-form-shell.cjs.map +1 -1
- package/dist/components/service-form-shell.js +1 -1
- package/dist/components/service-form-shell.js.map +1 -1
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ module.exports = __toCommonJS(claim_rail_exports);
|
|
|
24
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
25
|
var import_lucide_react = require("lucide-react");
|
|
26
26
|
function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = import_lucide_react.ShieldCheck }) {
|
|
27
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl bg-card divide-y divide-border/60 overflow-hidden", children: [
|
|
27
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden", children: [
|
|
28
28
|
included && included.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "p-5", children: [
|
|
29
29
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "What's included" }),
|
|
30
30
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "mt-4 space-y-4", children: included.map(({ icon: Icon, title, desc }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-start gap-3", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n * preview is the rail's first panel instead). */\n included?: { icon: LucideIcon; title: string; desc: string }[];\n /** \"How it works\" ordered steps. */\n steps: string[];\n /** Trust/assurance note: bold lead + the rest of the sentence. */\n trustLead: string;\n trust: string;\n /** Trust glyph — defaults to a shield. */\n trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n * (What's included · How it works · trust). The brand spectrum appears only\n * as tints: blue benefit chips → purple step numerals → orange trust glyph.\n * Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n return (\n <div className=\"rounded-2xl bg-card divide-y divide-border/60 overflow-hidden\">\n {included && included.length > 0 && (\n <section className=\"p-5\">\n <p className=\"section-label\">What's included</p>\n <ul className=\"mt-4 space-y-4\">\n {included.map(({ icon: Icon, title, desc }) => (\n <li key={title} className=\"flex items-start gap-3\">\n <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n <Icon className=\"h-4 w-4 text-brand-blue\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n </div>\n </li>\n ))}\n </ul>\n </section>\n )}\n\n <section className=\"p-5\">\n <p className=\"section-label\">How it works</p>\n <ol className=\"mt-4 space-y-3\">\n {steps.map((label, i) => (\n <li key={label} className=\"flex items-center gap-3\">\n <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums\">\n {i + 1}\n </span>\n <span className=\"text-sm text-foreground/90\">{label}</span>\n </li>\n ))}\n </ol>\n </section>\n\n <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n <p className=\"text-sm text-muted-foreground leading-relaxed\">\n <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n </p>\n </section>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBU;AAxBV,0BAA6C;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,6CAAC,SAAI,WAAU,
|
|
1
|
+
{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n * preview is the rail's first panel instead). */\n included?: { icon: LucideIcon; title: string; desc: string }[];\n /** \"How it works\" ordered steps. */\n steps: string[];\n /** Trust/assurance note: bold lead + the rest of the sentence. */\n trustLead: string;\n trust: string;\n /** Trust glyph — defaults to a shield. */\n trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n * (What's included · How it works · trust). The brand spectrum appears only\n * as tints: blue benefit chips → purple step numerals → orange trust glyph.\n * Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n return (\n <div className=\"rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden\">\n {included && included.length > 0 && (\n <section className=\"p-5\">\n <p className=\"section-label\">What's included</p>\n <ul className=\"mt-4 space-y-4\">\n {included.map(({ icon: Icon, title, desc }) => (\n <li key={title} className=\"flex items-start gap-3\">\n <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n <Icon className=\"h-4 w-4 text-brand-blue\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n </div>\n </li>\n ))}\n </ul>\n </section>\n )}\n\n <section className=\"p-5\">\n <p className=\"section-label\">How it works</p>\n <ol className=\"mt-4 space-y-3\">\n {steps.map((label, i) => (\n <li key={label} className=\"flex items-center gap-3\">\n <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums\">\n {i + 1}\n </span>\n <span className=\"text-sm text-foreground/90\">{label}</span>\n </li>\n ))}\n </ol>\n </section>\n\n <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n <p className=\"text-sm text-muted-foreground leading-relaxed\">\n <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n </p>\n </section>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBU;AAxBV,0BAA6C;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,6CAAC,SAAI,WAAU,kFACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,4CAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,6CAAC,QAAe,WAAU,0BACxB;AAAA,oDAAC,SAAI,WAAU,iFACb,sDAAC,QAAK,WAAU,2BAA0B,GAC5C;AAAA,QACA,6CAAC,SAAI,WAAU,WACb;AAAA,sDAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,4CAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,4CAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,6CAAC,QAAe,WAAU,2BACxB;AAAA,oDAAC,UAAK,WAAU,wIACb,cAAI,GACP;AAAA,QACA,4CAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,6CAAC,aAAQ,WAAU,0CACjB;AAAA,kDAAC,aAAU,WAAU,6CAA4C;AAAA,MACjE,6CAAC,OAAE,WAAU,iDACX;AAAA,oDAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ShieldCheck } from "lucide-react";
|
|
3
3
|
function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }) {
|
|
4
|
-
return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-card divide-y divide-border/60 overflow-hidden", children: [
|
|
4
|
+
return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden", children: [
|
|
5
5
|
included && included.length > 0 && /* @__PURE__ */ jsxs("section", { className: "p-5", children: [
|
|
6
6
|
/* @__PURE__ */ jsx("p", { className: "section-label", children: "What's included" }),
|
|
7
7
|
/* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-4", children: included.map(({ icon: Icon, title, desc }) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n * preview is the rail's first panel instead). */\n included?: { icon: LucideIcon; title: string; desc: string }[];\n /** \"How it works\" ordered steps. */\n steps: string[];\n /** Trust/assurance note: bold lead + the rest of the sentence. */\n trustLead: string;\n trust: string;\n /** Trust glyph — defaults to a shield. */\n trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n * (What's included · How it works · trust). The brand spectrum appears only\n * as tints: blue benefit chips → purple step numerals → orange trust glyph.\n * Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n return (\n <div className=\"rounded-2xl bg-card divide-y divide-border/60 overflow-hidden\">\n {included && included.length > 0 && (\n <section className=\"p-5\">\n <p className=\"section-label\">What's included</p>\n <ul className=\"mt-4 space-y-4\">\n {included.map(({ icon: Icon, title, desc }) => (\n <li key={title} className=\"flex items-start gap-3\">\n <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n <Icon className=\"h-4 w-4 text-brand-blue\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n </div>\n </li>\n ))}\n </ul>\n </section>\n )}\n\n <section className=\"p-5\">\n <p className=\"section-label\">How it works</p>\n <ol className=\"mt-4 space-y-3\">\n {steps.map((label, i) => (\n <li key={label} className=\"flex items-center gap-3\">\n <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums\">\n {i + 1}\n </span>\n <span className=\"text-sm text-foreground/90\">{label}</span>\n </li>\n ))}\n </ol>\n </section>\n\n <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n <p className=\"text-sm text-muted-foreground leading-relaxed\">\n <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n </p>\n </section>\n </div>\n );\n}\n"],"mappings":"AAwBU,cAOM,YAPN;AAxBV,SAAS,mBAAoC;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,qBAAC,SAAI,WAAU,
|
|
1
|
+
{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n * preview is the rail's first panel instead). */\n included?: { icon: LucideIcon; title: string; desc: string }[];\n /** \"How it works\" ordered steps. */\n steps: string[];\n /** Trust/assurance note: bold lead + the rest of the sentence. */\n trustLead: string;\n trust: string;\n /** Trust glyph — defaults to a shield. */\n trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n * (What's included · How it works · trust). The brand spectrum appears only\n * as tints: blue benefit chips → purple step numerals → orange trust glyph.\n * Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n return (\n <div className=\"rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden\">\n {included && included.length > 0 && (\n <section className=\"p-5\">\n <p className=\"section-label\">What's included</p>\n <ul className=\"mt-4 space-y-4\">\n {included.map(({ icon: Icon, title, desc }) => (\n <li key={title} className=\"flex items-start gap-3\">\n <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n <Icon className=\"h-4 w-4 text-brand-blue\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n </div>\n </li>\n ))}\n </ul>\n </section>\n )}\n\n <section className=\"p-5\">\n <p className=\"section-label\">How it works</p>\n <ol className=\"mt-4 space-y-3\">\n {steps.map((label, i) => (\n <li key={label} className=\"flex items-center gap-3\">\n <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums\">\n {i + 1}\n </span>\n <span className=\"text-sm text-foreground/90\">{label}</span>\n </li>\n ))}\n </ol>\n </section>\n\n <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n <p className=\"text-sm text-muted-foreground leading-relaxed\">\n <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n </p>\n </section>\n </div>\n );\n}\n"],"mappings":"AAwBU,cAOM,YAPN;AAxBV,SAAS,mBAAoC;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,qBAAC,SAAI,WAAU,kFACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,oBAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,qBAAC,QAAe,WAAU,0BACxB;AAAA,4BAAC,SAAI,WAAU,iFACb,8BAAC,QAAK,WAAU,2BAA0B,GAC5C;AAAA,QACA,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,oBAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,qBAAC,QAAe,WAAU,2BACxB;AAAA,4BAAC,UAAK,WAAU,wIACb,cAAI,GACP;AAAA,QACA,oBAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,aAAQ,WAAU,0CACjB;AAAA,0BAAC,aAAU,WAAU,6CAA4C;AAAA,MACjE,qBAAC,OAAE,WAAU,iDACX;AAAA,4BAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -26,7 +26,7 @@ var import_cn = require("../utils/cn.js");
|
|
|
26
26
|
var import_service_header = require("./service-header.js");
|
|
27
27
|
function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }) {
|
|
28
28
|
const header = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_service_header.ServiceHeader, { bare: true, icon, title, subtitle, headerAccessory });
|
|
29
|
-
const form = aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl bg-card p-5 sm:p-6", children }) : children;
|
|
29
|
+
const form = aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl bg-muted/50 dark:bg-card p-5 sm:p-6", children }) : children;
|
|
30
30
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20", aside ? "max-w-5xl" : "max-w-3xl"), children: [
|
|
31
31
|
backSlot,
|
|
32
32
|
aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-4 lg:grid-cols-12 lg:items-start", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n icon: ReactNode;\n title: string;\n subtitle: string;\n /** Optional element under the header subtitle (e.g. a URL pill). */\n headerAccessory?: ReactNode;\n /** Rendered above the header — the app's own back button (router-specific). */\n backSlot?: ReactNode;\n /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n aside?: ReactNode;\n /** Rendered in the left column between the header and the form — e.g. a\n * <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n aboveForm?: ReactNode;\n /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n * gate before passing. This component stays presentation-only (no auth,\n * no router) so both apps can share it. */\n children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n * the form in a quiet borderless card — the surface color alone separates it\n * from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n * right); without, a single centered column. The brand gradient belongs to\n * the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n // Bare header: the form card is the page's only panel.\n const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n const form = aside ? (\n <div className=\"rounded-2xl bg-card p-5 sm:p-6\">{children}</div>\n ) : (\n children\n );\n\n return (\n <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n {backSlot}\n {aside ? (\n <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n <div className=\"space-y-4 lg:col-span-8\">\n {header}\n {aboveForm}\n {form}\n </div>\n <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n </div>\n ) : (\n <div className=\"space-y-6\">\n {header}\n {form}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BiB;AA9BjB,gBAAmB;AACnB,4BAA8B;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,4CAAC,uCAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,4CAAC,SAAI,WAAU,
|
|
1
|
+
{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n icon: ReactNode;\n title: string;\n subtitle: string;\n /** Optional element under the header subtitle (e.g. a URL pill). */\n headerAccessory?: ReactNode;\n /** Rendered above the header — the app's own back button (router-specific). */\n backSlot?: ReactNode;\n /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n aside?: ReactNode;\n /** Rendered in the left column between the header and the form — e.g. a\n * <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n aboveForm?: ReactNode;\n /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n * gate before passing. This component stays presentation-only (no auth,\n * no router) so both apps can share it. */\n children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n * the form in a quiet borderless card — the surface color alone separates it\n * from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n * right); without, a single centered column. The brand gradient belongs to\n * the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n // Bare header: the form card is the page's only panel.\n const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n const form = aside ? (\n <div className=\"rounded-2xl bg-muted/50 dark:bg-card p-5 sm:p-6\">{children}</div>\n ) : (\n children\n );\n\n return (\n <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n {backSlot}\n {aside ? (\n <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n <div className=\"space-y-4 lg:col-span-8\">\n {header}\n {aboveForm}\n {form}\n </div>\n <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n </div>\n ) : (\n <div className=\"space-y-6\">\n {header}\n {form}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BiB;AA9BjB,gBAAmB;AACnB,4BAA8B;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,4CAAC,uCAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,4CAAC,SAAI,WAAU,mDAAmD,UAAS,IAE3E;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,6CAAC,SAAI,WAAU,6CACb;AAAA,mDAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,4CAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,6CAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
|
|
@@ -3,7 +3,7 @@ import { cn } from "../utils/cn.js";
|
|
|
3
3
|
import { ServiceHeader } from "./service-header.js";
|
|
4
4
|
function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }) {
|
|
5
5
|
const header = /* @__PURE__ */ jsx(ServiceHeader, { bare: true, icon, title, subtitle, headerAccessory });
|
|
6
|
-
const form = aside ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-card p-5 sm:p-6", children }) : children;
|
|
6
|
+
const form = aside ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-muted/50 dark:bg-card p-5 sm:p-6", children }) : children;
|
|
7
7
|
return /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20", aside ? "max-w-5xl" : "max-w-3xl"), children: [
|
|
8
8
|
backSlot,
|
|
9
9
|
aside ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-12 lg:items-start", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n icon: ReactNode;\n title: string;\n subtitle: string;\n /** Optional element under the header subtitle (e.g. a URL pill). */\n headerAccessory?: ReactNode;\n /** Rendered above the header — the app's own back button (router-specific). */\n backSlot?: ReactNode;\n /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n aside?: ReactNode;\n /** Rendered in the left column between the header and the form — e.g. a\n * <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n aboveForm?: ReactNode;\n /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n * gate before passing. This component stays presentation-only (no auth,\n * no router) so both apps can share it. */\n children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n * the form in a quiet borderless card — the surface color alone separates it\n * from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n * right); without, a single centered column. The brand gradient belongs to\n * the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n // Bare header: the form card is the page's only panel.\n const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n const form = aside ? (\n <div className=\"rounded-2xl bg-card p-5 sm:p-6\">{children}</div>\n ) : (\n children\n );\n\n return (\n <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n {backSlot}\n {aside ? (\n <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n <div className=\"space-y-4 lg:col-span-8\">\n {header}\n {aboveForm}\n {form}\n </div>\n <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n </div>\n ) : (\n <div className=\"space-y-6\">\n {header}\n {form}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"AA+BiB,cAaP,YAbO;AA9BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,oBAAC,iBAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,oBAAC,SAAI,WAAU,
|
|
1
|
+
{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n icon: ReactNode;\n title: string;\n subtitle: string;\n /** Optional element under the header subtitle (e.g. a URL pill). */\n headerAccessory?: ReactNode;\n /** Rendered above the header — the app's own back button (router-specific). */\n backSlot?: ReactNode;\n /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n aside?: ReactNode;\n /** Rendered in the left column between the header and the form — e.g. a\n * <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n aboveForm?: ReactNode;\n /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n * gate before passing. This component stays presentation-only (no auth,\n * no router) so both apps can share it. */\n children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n * the form in a quiet borderless card — the surface color alone separates it\n * from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n * right); without, a single centered column. The brand gradient belongs to\n * the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n // Bare header: the form card is the page's only panel.\n const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n const form = aside ? (\n <div className=\"rounded-2xl bg-muted/50 dark:bg-card p-5 sm:p-6\">{children}</div>\n ) : (\n children\n );\n\n return (\n <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n {backSlot}\n {aside ? (\n <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n <div className=\"space-y-4 lg:col-span-8\">\n {header}\n {aboveForm}\n {form}\n </div>\n <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n </div>\n ) : (\n <div className=\"space-y-6\">\n {header}\n {form}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"AA+BiB,cAaP,YAbO;AA9BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,oBAAC,iBAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,oBAAC,SAAI,WAAU,mDAAmD,UAAS,IAE3E;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,qBAAC,SAAI,WAAU,6CACb;AAAA,2BAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
|