@pactor-app/ui 1.40.0 → 1.41.0

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.
@@ -13556,9 +13556,42 @@ function DefaultIllustration({ className }) {
13556
13556
  "aria-hidden": "true",
13557
13557
  className: cn("text-primary", className),
13558
13558
  children: [
13559
- /* @__PURE__ */ jsx159("rect", { x: "24", y: "96", width: "88", height: "60", rx: "10", fill: "currentColor", opacity: "0.16" }),
13560
- /* @__PURE__ */ jsx159("rect", { x: "120", y: "60", width: "88", height: "96", rx: "10", fill: "currentColor", opacity: "0.28" }),
13561
- /* @__PURE__ */ jsx159("rect", { x: "216", y: "24", width: "80", height: "132", rx: "10", fill: "currentColor", opacity: "0.4" }),
13559
+ /* @__PURE__ */ jsx159(
13560
+ "rect",
13561
+ {
13562
+ x: "24",
13563
+ y: "96",
13564
+ width: "88",
13565
+ height: "60",
13566
+ rx: "10",
13567
+ fill: "currentColor",
13568
+ opacity: "0.16"
13569
+ }
13570
+ ),
13571
+ /* @__PURE__ */ jsx159(
13572
+ "rect",
13573
+ {
13574
+ x: "120",
13575
+ y: "60",
13576
+ width: "88",
13577
+ height: "96",
13578
+ rx: "10",
13579
+ fill: "currentColor",
13580
+ opacity: "0.28"
13581
+ }
13582
+ ),
13583
+ /* @__PURE__ */ jsx159(
13584
+ "rect",
13585
+ {
13586
+ x: "216",
13587
+ y: "24",
13588
+ width: "80",
13589
+ height: "132",
13590
+ rx: "10",
13591
+ fill: "currentColor",
13592
+ opacity: "0.4"
13593
+ }
13594
+ ),
13562
13595
  /* @__PURE__ */ jsx159("circle", { cx: "68", cy: "52", r: "26", fill: "currentColor", opacity: "0.2" }),
13563
13596
  /* @__PURE__ */ jsx159("circle", { cx: "248", cy: "140", r: "14", fill: "currentColor", opacity: "0.55" }),
13564
13597
  /* @__PURE__ */ jsx159(
@@ -13583,7 +13616,10 @@ function BgDecor({ className }) {
13583
13616
  {
13584
13617
  "data-slot": "login-bg-decor",
13585
13618
  "aria-hidden": "true",
13586
- className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
13619
+ className: cn(
13620
+ "pointer-events-none absolute inset-0 overflow-hidden",
13621
+ className
13622
+ ),
13587
13623
  children: [
13588
13624
  /* @__PURE__ */ jsx159("div", { className: "absolute -right-24 -top-24 size-96 rounded-full bg-primary/8" }),
13589
13625
  /* @__PURE__ */ jsx159("div", { className: "absolute -left-32 bottom-0 size-80 rounded-full bg-primary/5" }),
@@ -13639,6 +13675,7 @@ function Login({
13639
13675
  registerLink,
13640
13676
  forgotLink,
13641
13677
  footer,
13678
+ children,
13642
13679
  className,
13643
13680
  style,
13644
13681
  onSubmit,
@@ -13647,21 +13684,51 @@ function Login({
13647
13684
  }) {
13648
13685
  const { t } = useI18n13();
13649
13686
  const brandIdentity = brand && (brand.logo || brand.name) ? /* @__PURE__ */ jsxs102("div", { "data-slot": "login-brand-identity", className: "flex items-center gap-2", children: [
13650
- brand.logo ? /* @__PURE__ */ jsx159("img", { src: brand.logo, alt: brand.name ?? "", className: "size-7 rounded-md" }) : null,
13651
- brand.name ? /* @__PURE__ */ jsx159("span", { className: "text-base font-semibold", children: brand.name }) : null
13652
- ] }) : null;
13653
- const brandVisual = /* @__PURE__ */ jsxs102("div", { className: "flex flex-col gap-4", children: [
13654
- brand?.title ? /* @__PURE__ */ jsx159("h2", { className: "text-3xl font-bold leading-tight tracking-tight", children: brand.title }) : null,
13655
- brand?.description ? /* @__PURE__ */ jsx159("p", { className: "max-w-md text-sm text-muted-foreground", children: brand.description }) : null,
13656
- brand?.illustration ? /* @__PURE__ */ jsx159(
13687
+ brand.logo ? /* @__PURE__ */ jsx159(
13657
13688
  "img",
13658
13689
  {
13659
- src: brand.illustration,
13660
- alt: "",
13661
- className: "mt-4 w-full max-w-lg rounded-lg object-cover"
13690
+ src: brand.logo,
13691
+ alt: brand.name ?? "",
13692
+ className: "size-7 rounded-md"
13662
13693
  }
13663
- ) : brand?.illustration === "" ? null : /* @__PURE__ */ jsx159(DefaultIllustration, { className: "mt-4 w-full max-w-md" })
13664
- ] });
13694
+ ) : null,
13695
+ brand.name ? /* @__PURE__ */ jsx159("span", { className: "text-base font-semibold", children: brand.name }) : null
13696
+ ] }) : null;
13697
+ const brandVisual = (alignRight = false) => /* @__PURE__ */ jsxs102(
13698
+ "div",
13699
+ {
13700
+ className: cn("flex w-full flex-col gap-4", alignRight && "text-right"),
13701
+ children: [
13702
+ brand?.title ? /* @__PURE__ */ jsx159("h2", { className: "text-3xl font-bold leading-tight tracking-tight", children: brand.title }) : null,
13703
+ brand?.description ? /* @__PURE__ */ jsx159(
13704
+ "p",
13705
+ {
13706
+ className: cn(
13707
+ "max-w-md text-sm text-muted-foreground",
13708
+ alignRight && "ml-auto"
13709
+ ),
13710
+ children: brand.description
13711
+ }
13712
+ ) : null,
13713
+ brand?.illustration ? /* @__PURE__ */ jsx159(
13714
+ "img",
13715
+ {
13716
+ src: brand.illustration,
13717
+ alt: "",
13718
+ className: cn(
13719
+ "mt-4 w-full max-w-lg rounded-lg object-cover",
13720
+ alignRight && "self-end"
13721
+ )
13722
+ }
13723
+ ) : brand?.illustration === "" ? null : /* @__PURE__ */ jsx159(
13724
+ DefaultIllustration,
13725
+ {
13726
+ className: cn("mt-4 w-full max-w-md", alignRight && "self-end")
13727
+ }
13728
+ )
13729
+ ]
13730
+ }
13731
+ );
13665
13732
  const renderAuxLink = (link, onClick) => {
13666
13733
  if (!link) return null;
13667
13734
  if (link.href) {
@@ -13682,35 +13749,40 @@ function Login({
13682
13749
  /* @__PURE__ */ jsx159("h1", { className: "text-2xl font-semibold tracking-tight", children: title ?? t("pactor.login.title") }),
13683
13750
  subtitle ? /* @__PURE__ */ jsx159("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
13684
13751
  ] }),
13685
- /* @__PURE__ */ jsxs102(Form, { name: "login", className: "flex flex-col gap-4", onSubmit, children: [
13686
- /* @__PURE__ */ jsx159(
13752
+ children ?? /* @__PURE__ */ jsxs102(Form, { name: "login", className: "flex flex-col gap-2", onSubmit, children: [
13753
+ /* @__PURE__ */ jsx159(Field2, { label: usernameLabel ?? t("pactor.login.username"), required: true, children: /* @__PURE__ */ jsx159(
13687
13754
  Input2,
13688
13755
  {
13689
13756
  name: "username",
13690
- label: usernameLabel ?? t("pactor.login.username"),
13757
+ size: "large",
13691
13758
  placeholder: usernamePlaceholder ?? t("pactor.login.usernamePlaceholder"),
13692
- rules: [{ required: true, message: t("pactor.login.usernameRequired") }]
13759
+ rules: [
13760
+ { required: true, message: t("pactor.login.usernameRequired") }
13761
+ ]
13693
13762
  }
13694
- ),
13695
- /* @__PURE__ */ jsx159(
13763
+ ) }),
13764
+ /* @__PURE__ */ jsx159(Field2, { label: passwordLabel ?? t("pactor.login.password"), required: true, children: /* @__PURE__ */ jsx159(
13696
13765
  Input2,
13697
13766
  {
13698
13767
  name: "password",
13699
13768
  type: "password",
13700
- label: passwordLabel ?? t("pactor.login.password"),
13769
+ size: "large",
13701
13770
  placeholder: passwordPlaceholder ?? t("pactor.login.passwordPlaceholder"),
13702
- rules: [{ required: true, message: t("pactor.login.passwordRequired") }]
13771
+ rules: [
13772
+ { required: true, message: t("pactor.login.passwordRequired") }
13773
+ ]
13703
13774
  }
13704
- ),
13705
- /* @__PURE__ */ jsx159(
13775
+ ) }),
13776
+ /* @__PURE__ */ jsx159(Field2, { children: /* @__PURE__ */ jsx159(
13706
13777
  Button2,
13707
13778
  {
13708
13779
  submit: true,
13709
13780
  variant: "primary",
13781
+ size: "large",
13710
13782
  text: submitText ?? t("pactor.login.submit"),
13711
13783
  className: "mt-2 w-full"
13712
13784
  }
13713
- )
13785
+ ) })
13714
13786
  ] }),
13715
13787
  registerLink || forgotLink ? /* @__PURE__ */ jsxs102("div", { className: "mt-4 flex items-center justify-between gap-4", children: [
13716
13788
  renderAuxLink(registerLink, onRegisterClick),
@@ -13739,7 +13811,7 @@ function Login({
13739
13811
  decor ? /* @__PURE__ */ jsx159(BgDecor, {}) : null,
13740
13812
  /* @__PURE__ */ jsxs102("div", { className: "relative flex h-full flex-col justify-between", children: [
13741
13813
  withIdentity ? brandIdentity : null,
13742
- brandVisual,
13814
+ brandVisual(),
13743
13815
  /* @__PURE__ */ jsx159("div", {})
13744
13816
  ] })
13745
13817
  ]
@@ -13750,6 +13822,37 @@ function Login({
13750
13822
  /* @__PURE__ */ jsx159("div", { className: "flex flex-1 items-center justify-center p-6", children: authBox(variant) }),
13751
13823
  footerBar
13752
13824
  ] });
13825
+ const brandCard = (widthClass, alignRight = false) => /* @__PURE__ */ jsx159(Card2, { className: cn("w-full", widthClass, BRAND_PANEL_BG), children: /* @__PURE__ */ jsxs102(
13826
+ "div",
13827
+ {
13828
+ "data-slot": "login-brand-card-content",
13829
+ className: cn("flex flex-col gap-6", alignRight && "text-right"),
13830
+ children: [
13831
+ brandIdentity ? /* @__PURE__ */ jsx159("div", { className: cn(alignRight && "flex justify-end"), children: brandIdentity }) : null,
13832
+ brandVisual(alignRight)
13833
+ ]
13834
+ }
13835
+ ) });
13836
+ const overlapAuthCard = /* @__PURE__ */ jsx159(
13837
+ "div",
13838
+ {
13839
+ className: cn(
13840
+ "z-10 w-full max-w-[400px]",
13841
+ brandSide === "left" ? "md:-ml-24" : "md:-mr-24"
13842
+ ),
13843
+ children: /* @__PURE__ */ jsx159(Card2, { className: "p-2 shadow-xl md:p-4", children: authContent })
13844
+ }
13845
+ );
13846
+ const backdropBrandColumn = /* @__PURE__ */ jsxs102("div", { className: "relative hidden flex-col justify-between p-10 md:flex", children: [
13847
+ brandIdentity,
13848
+ brandVisual(),
13849
+ /* @__PURE__ */ jsx159("div", {})
13850
+ ] });
13851
+ const backdropAuthColumn = /* @__PURE__ */ jsxs102("div", { className: "relative flex min-h-svh flex-col", children: [
13852
+ brandIdentity ? /* @__PURE__ */ jsx159("div", { className: "p-6 md:hidden", children: brandIdentity }) : null,
13853
+ /* @__PURE__ */ jsx159("div", { className: "flex flex-1 items-center justify-center p-6", children: /* @__PURE__ */ jsx159(Card2, { className: "w-full max-w-[400px] p-2 shadow-xl md:p-4", children: authContent }) }),
13854
+ footerBar
13855
+ ] });
13753
13856
  if (layout === "centered") {
13754
13857
  return /* @__PURE__ */ jsxs102(
13755
13858
  "div",
@@ -13778,6 +13881,7 @@ function Login({
13778
13881
  {
13779
13882
  "data-slot": "login",
13780
13883
  "data-layout": layout,
13884
+ "data-brand-side": brandSide,
13781
13885
  className: cn(
13782
13886
  "relative flex min-h-svh w-full flex-col overflow-hidden bg-background p-6 md:p-10",
13783
13887
  className
@@ -13785,13 +13889,13 @@ function Login({
13785
13889
  style,
13786
13890
  children: [
13787
13891
  decor ? /* @__PURE__ */ jsx159(BgDecor, {}) : null,
13788
- /* @__PURE__ */ jsxs102("div", { className: "relative flex flex-1 flex-col items-center gap-6 md:flex-row md:gap-10", children: [
13789
- /* @__PURE__ */ jsx159(Card2, { className: cn("w-full md:w-[45%]", BRAND_PANEL_BG), children: /* @__PURE__ */ jsxs102("div", { className: "flex flex-col gap-6", children: [
13790
- brandIdentity,
13791
- brandVisual
13792
- ] }) }),
13892
+ /* @__PURE__ */ jsx159("div", { className: "relative flex flex-1 flex-col items-center gap-6 md:flex-row md:gap-10", children: brandSide === "left" ? /* @__PURE__ */ jsxs102(Fragment18, { children: [
13893
+ brandCard("md:w-[45%]"),
13793
13894
  /* @__PURE__ */ jsx159("div", { className: "flex w-full flex-1 justify-center", children: authBox("plain") })
13794
- ] }),
13895
+ ] }) : /* @__PURE__ */ jsxs102(Fragment18, { children: [
13896
+ /* @__PURE__ */ jsx159("div", { className: "flex w-full flex-1 justify-center", children: authBox("plain") }),
13897
+ brandCard("md:w-[45%]")
13898
+ ] }) }),
13795
13899
  footerBar
13796
13900
  ]
13797
13901
  }
@@ -13803,6 +13907,7 @@ function Login({
13803
13907
  {
13804
13908
  "data-slot": "login",
13805
13909
  "data-layout": layout,
13910
+ "data-brand-side": brandSide,
13806
13911
  className: cn(
13807
13912
  "relative flex min-h-svh w-full flex-col overflow-hidden bg-background p-6 md:p-10",
13808
13913
  className
@@ -13810,13 +13915,13 @@ function Login({
13810
13915
  style,
13811
13916
  children: [
13812
13917
  decor ? /* @__PURE__ */ jsx159(BgDecor, {}) : null,
13813
- /* @__PURE__ */ jsxs102("div", { className: "relative flex flex-1 flex-col items-center justify-center gap-6 md:flex-row md:items-center md:gap-0", children: [
13814
- /* @__PURE__ */ jsx159(Card2, { className: cn("w-full md:w-[52%]", BRAND_PANEL_BG), children: /* @__PURE__ */ jsxs102("div", { className: "flex flex-col gap-6", children: [
13815
- brandIdentity,
13816
- brandVisual
13817
- ] }) }),
13818
- /* @__PURE__ */ jsx159("div", { className: "z-10 w-full max-w-[400px] md:-ml-24", children: /* @__PURE__ */ jsx159(Card2, { className: "p-2 shadow-xl md:p-4", children: authContent }) })
13819
- ] }),
13918
+ /* @__PURE__ */ jsx159("div", { className: "relative flex flex-1 flex-col items-center justify-center gap-6 md:flex-row md:items-center md:gap-0", children: brandSide === "left" ? /* @__PURE__ */ jsxs102(Fragment18, { children: [
13919
+ brandCard("md:w-[52%]"),
13920
+ overlapAuthCard
13921
+ ] }) : /* @__PURE__ */ jsxs102(Fragment18, { children: [
13922
+ overlapAuthCard,
13923
+ brandCard("md:w-[52%]", true)
13924
+ ] }) }),
13820
13925
  footerBar
13821
13926
  ]
13822
13927
  }
@@ -13828,6 +13933,7 @@ function Login({
13828
13933
  {
13829
13934
  "data-slot": "login",
13830
13935
  "data-layout": layout,
13936
+ "data-brand-side": brandSide,
13831
13937
  className: cn(
13832
13938
  "relative grid min-h-svh w-full overflow-hidden bg-linear-to-br from-primary/20 via-accent to-primary/10 md:grid-cols-2 dark:from-primary/25 dark:to-primary/15",
13833
13939
  className
@@ -13835,15 +13941,12 @@ function Login({
13835
13941
  style,
13836
13942
  children: [
13837
13943
  decor ? /* @__PURE__ */ jsx159(BgDecor, {}) : null,
13838
- /* @__PURE__ */ jsxs102("div", { className: "relative hidden flex-col justify-between p-10 md:flex", children: [
13839
- brandIdentity,
13840
- brandVisual,
13841
- /* @__PURE__ */ jsx159("div", {})
13842
- ] }),
13843
- /* @__PURE__ */ jsxs102("div", { className: "relative flex min-h-svh flex-col", children: [
13844
- brandIdentity ? /* @__PURE__ */ jsx159("div", { className: "p-6 md:hidden", children: brandIdentity }) : null,
13845
- /* @__PURE__ */ jsx159("div", { className: "flex flex-1 items-center justify-center p-6", children: /* @__PURE__ */ jsx159(Card2, { className: "w-full max-w-[400px] p-2 shadow-xl md:p-4", children: authContent }) }),
13846
- footerBar
13944
+ brandSide === "left" ? /* @__PURE__ */ jsxs102(Fragment18, { children: [
13945
+ backdropBrandColumn,
13946
+ backdropAuthColumn
13947
+ ] }) : /* @__PURE__ */ jsxs102(Fragment18, { children: [
13948
+ backdropAuthColumn,
13949
+ backdropBrandColumn
13847
13950
  ] })
13848
13951
  ]
13849
13952
  }
@@ -13859,6 +13962,7 @@ function Login({
13859
13962
  {
13860
13963
  "data-slot": "login",
13861
13964
  "data-layout": layout,
13965
+ "data-brand-side": brandSide,
13862
13966
  className: cn(
13863
13967
  "grid min-h-svh w-full bg-background md:[grid-template-columns:var(--login-grid)]",
13864
13968
  className
@@ -17827,9 +17827,42 @@ function DefaultIllustration({ className }) {
17827
17827
  "aria-hidden": "true",
17828
17828
  className: cn("text-primary", className),
17829
17829
  children: [
17830
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("rect", { x: "24", y: "96", width: "88", height: "60", rx: "10", fill: "currentColor", opacity: "0.16" }),
17831
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("rect", { x: "120", y: "60", width: "88", height: "96", rx: "10", fill: "currentColor", opacity: "0.28" }),
17832
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("rect", { x: "216", y: "24", width: "80", height: "132", rx: "10", fill: "currentColor", opacity: "0.4" }),
17830
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17831
+ "rect",
17832
+ {
17833
+ x: "24",
17834
+ y: "96",
17835
+ width: "88",
17836
+ height: "60",
17837
+ rx: "10",
17838
+ fill: "currentColor",
17839
+ opacity: "0.16"
17840
+ }
17841
+ ),
17842
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17843
+ "rect",
17844
+ {
17845
+ x: "120",
17846
+ y: "60",
17847
+ width: "88",
17848
+ height: "96",
17849
+ rx: "10",
17850
+ fill: "currentColor",
17851
+ opacity: "0.28"
17852
+ }
17853
+ ),
17854
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17855
+ "rect",
17856
+ {
17857
+ x: "216",
17858
+ y: "24",
17859
+ width: "80",
17860
+ height: "132",
17861
+ rx: "10",
17862
+ fill: "currentColor",
17863
+ opacity: "0.4"
17864
+ }
17865
+ ),
17833
17866
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("circle", { cx: "68", cy: "52", r: "26", fill: "currentColor", opacity: "0.2" }),
17834
17867
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("circle", { cx: "248", cy: "140", r: "14", fill: "currentColor", opacity: "0.55" }),
17835
17868
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
@@ -17854,7 +17887,10 @@ function BgDecor({ className }) {
17854
17887
  {
17855
17888
  "data-slot": "login-bg-decor",
17856
17889
  "aria-hidden": "true",
17857
- className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
17890
+ className: cn(
17891
+ "pointer-events-none absolute inset-0 overflow-hidden",
17892
+ className
17893
+ ),
17858
17894
  children: [
17859
17895
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "absolute -right-24 -top-24 size-96 rounded-full bg-primary/8" }),
17860
17896
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "absolute -left-32 bottom-0 size-80 rounded-full bg-primary/5" }),
@@ -17910,6 +17946,7 @@ function Login({
17910
17946
  registerLink,
17911
17947
  forgotLink,
17912
17948
  footer,
17949
+ children,
17913
17950
  className,
17914
17951
  style,
17915
17952
  onSubmit,
@@ -17918,21 +17955,51 @@ function Login({
17918
17955
  }) {
17919
17956
  const { t } = (0, import_runtime31.useI18n)();
17920
17957
  const brandIdentity = brand && (brand.logo || brand.name) ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { "data-slot": "login-brand-identity", className: "flex items-center gap-2", children: [
17921
- brand.logo ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("img", { src: brand.logo, alt: brand.name ?? "", className: "size-7 rounded-md" }) : null,
17922
- brand.name ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { className: "text-base font-semibold", children: brand.name }) : null
17923
- ] }) : null;
17924
- const brandVisual = /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "flex flex-col gap-4", children: [
17925
- brand?.title ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("h2", { className: "text-3xl font-bold leading-tight tracking-tight", children: brand.title }) : null,
17926
- brand?.description ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("p", { className: "max-w-md text-sm text-muted-foreground", children: brand.description }) : null,
17927
- brand?.illustration ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17958
+ brand.logo ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17928
17959
  "img",
17929
17960
  {
17930
- src: brand.illustration,
17931
- alt: "",
17932
- className: "mt-4 w-full max-w-lg rounded-lg object-cover"
17961
+ src: brand.logo,
17962
+ alt: brand.name ?? "",
17963
+ className: "size-7 rounded-md"
17933
17964
  }
17934
- ) : brand?.illustration === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(DefaultIllustration, { className: "mt-4 w-full max-w-md" })
17935
- ] });
17965
+ ) : null,
17966
+ brand.name ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { className: "text-base font-semibold", children: brand.name }) : null
17967
+ ] }) : null;
17968
+ const brandVisual = (alignRight = false) => /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
17969
+ "div",
17970
+ {
17971
+ className: cn("flex w-full flex-col gap-4", alignRight && "text-right"),
17972
+ children: [
17973
+ brand?.title ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("h2", { className: "text-3xl font-bold leading-tight tracking-tight", children: brand.title }) : null,
17974
+ brand?.description ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17975
+ "p",
17976
+ {
17977
+ className: cn(
17978
+ "max-w-md text-sm text-muted-foreground",
17979
+ alignRight && "ml-auto"
17980
+ ),
17981
+ children: brand.description
17982
+ }
17983
+ ) : null,
17984
+ brand?.illustration ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17985
+ "img",
17986
+ {
17987
+ src: brand.illustration,
17988
+ alt: "",
17989
+ className: cn(
17990
+ "mt-4 w-full max-w-lg rounded-lg object-cover",
17991
+ alignRight && "self-end"
17992
+ )
17993
+ }
17994
+ ) : brand?.illustration === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17995
+ DefaultIllustration,
17996
+ {
17997
+ className: cn("mt-4 w-full max-w-md", alignRight && "self-end")
17998
+ }
17999
+ )
18000
+ ]
18001
+ }
18002
+ );
17936
18003
  const renderAuxLink = (link, onClick) => {
17937
18004
  if (!link) return null;
17938
18005
  if (link.href) {
@@ -17953,35 +18020,40 @@ function Login({
17953
18020
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("h1", { className: "text-2xl font-semibold tracking-tight", children: title ?? t("pactor.login.title") }),
17954
18021
  subtitle ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
17955
18022
  ] }),
17956
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(Form, { name: "login", className: "flex flex-col gap-4", onSubmit, children: [
17957
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18023
+ children ?? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(Form, { name: "login", className: "flex flex-col gap-2", onSubmit, children: [
18024
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Field2, { label: usernameLabel ?? t("pactor.login.username"), required: true, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17958
18025
  Input2,
17959
18026
  {
17960
18027
  name: "username",
17961
- label: usernameLabel ?? t("pactor.login.username"),
18028
+ size: "large",
17962
18029
  placeholder: usernamePlaceholder ?? t("pactor.login.usernamePlaceholder"),
17963
- rules: [{ required: true, message: t("pactor.login.usernameRequired") }]
18030
+ rules: [
18031
+ { required: true, message: t("pactor.login.usernameRequired") }
18032
+ ]
17964
18033
  }
17965
- ),
17966
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18034
+ ) }),
18035
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Field2, { label: passwordLabel ?? t("pactor.login.password"), required: true, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17967
18036
  Input2,
17968
18037
  {
17969
18038
  name: "password",
17970
18039
  type: "password",
17971
- label: passwordLabel ?? t("pactor.login.password"),
18040
+ size: "large",
17972
18041
  placeholder: passwordPlaceholder ?? t("pactor.login.passwordPlaceholder"),
17973
- rules: [{ required: true, message: t("pactor.login.passwordRequired") }]
18042
+ rules: [
18043
+ { required: true, message: t("pactor.login.passwordRequired") }
18044
+ ]
17974
18045
  }
17975
- ),
17976
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18046
+ ) }),
18047
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Field2, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17977
18048
  Button2,
17978
18049
  {
17979
18050
  submit: true,
17980
18051
  variant: "primary",
18052
+ size: "large",
17981
18053
  text: submitText ?? t("pactor.login.submit"),
17982
18054
  className: "mt-2 w-full"
17983
18055
  }
17984
- )
18056
+ ) })
17985
18057
  ] }),
17986
18058
  registerLink || forgotLink ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "mt-4 flex items-center justify-between gap-4", children: [
17987
18059
  renderAuxLink(registerLink, onRegisterClick),
@@ -18010,7 +18082,7 @@ function Login({
18010
18082
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18011
18083
  /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex h-full flex-col justify-between", children: [
18012
18084
  withIdentity ? brandIdentity : null,
18013
- brandVisual,
18085
+ brandVisual(),
18014
18086
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", {})
18015
18087
  ] })
18016
18088
  ]
@@ -18021,6 +18093,37 @@ function Login({
18021
18093
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex flex-1 items-center justify-center p-6", children: authBox(variant) }),
18022
18094
  footerBar
18023
18095
  ] });
18096
+ const brandCard = (widthClass, alignRight = false) => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: cn("w-full", widthClass, BRAND_PANEL_BG), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
18097
+ "div",
18098
+ {
18099
+ "data-slot": "login-brand-card-content",
18100
+ className: cn("flex flex-col gap-6", alignRight && "text-right"),
18101
+ children: [
18102
+ brandIdentity ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: cn(alignRight && "flex justify-end"), children: brandIdentity }) : null,
18103
+ brandVisual(alignRight)
18104
+ ]
18105
+ }
18106
+ ) });
18107
+ const overlapAuthCard = /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18108
+ "div",
18109
+ {
18110
+ className: cn(
18111
+ "z-10 w-full max-w-[400px]",
18112
+ brandSide === "left" ? "md:-ml-24" : "md:-mr-24"
18113
+ ),
18114
+ children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "p-2 shadow-xl md:p-4", children: authContent })
18115
+ }
18116
+ );
18117
+ const backdropBrandColumn = /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative hidden flex-col justify-between p-10 md:flex", children: [
18118
+ brandIdentity,
18119
+ brandVisual(),
18120
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", {})
18121
+ ] });
18122
+ const backdropAuthColumn = /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex min-h-svh flex-col", children: [
18123
+ brandIdentity ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "p-6 md:hidden", children: brandIdentity }) : null,
18124
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex flex-1 items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "w-full max-w-[400px] p-2 shadow-xl md:p-4", children: authContent }) }),
18125
+ footerBar
18126
+ ] });
18024
18127
  if (layout === "centered") {
18025
18128
  return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
18026
18129
  "div",
@@ -18049,6 +18152,7 @@ function Login({
18049
18152
  {
18050
18153
  "data-slot": "login",
18051
18154
  "data-layout": layout,
18155
+ "data-brand-side": brandSide,
18052
18156
  className: cn(
18053
18157
  "relative flex min-h-svh w-full flex-col overflow-hidden bg-background p-6 md:p-10",
18054
18158
  className
@@ -18056,13 +18160,13 @@ function Login({
18056
18160
  style,
18057
18161
  children: [
18058
18162
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18059
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex flex-1 flex-col items-center gap-6 md:flex-row md:gap-10", children: [
18060
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: cn("w-full md:w-[45%]", BRAND_PANEL_BG), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "flex flex-col gap-6", children: [
18061
- brandIdentity,
18062
- brandVisual
18063
- ] }) }),
18163
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "relative flex flex-1 flex-col items-center gap-6 md:flex-row md:gap-10", children: brandSide === "left" ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18164
+ brandCard("md:w-[45%]"),
18064
18165
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex w-full flex-1 justify-center", children: authBox("plain") })
18065
- ] }),
18166
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18167
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex w-full flex-1 justify-center", children: authBox("plain") }),
18168
+ brandCard("md:w-[45%]")
18169
+ ] }) }),
18066
18170
  footerBar
18067
18171
  ]
18068
18172
  }
@@ -18074,6 +18178,7 @@ function Login({
18074
18178
  {
18075
18179
  "data-slot": "login",
18076
18180
  "data-layout": layout,
18181
+ "data-brand-side": brandSide,
18077
18182
  className: cn(
18078
18183
  "relative flex min-h-svh w-full flex-col overflow-hidden bg-background p-6 md:p-10",
18079
18184
  className
@@ -18081,13 +18186,13 @@ function Login({
18081
18186
  style,
18082
18187
  children: [
18083
18188
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18084
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex flex-1 flex-col items-center justify-center gap-6 md:flex-row md:items-center md:gap-0", children: [
18085
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: cn("w-full md:w-[52%]", BRAND_PANEL_BG), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "flex flex-col gap-6", children: [
18086
- brandIdentity,
18087
- brandVisual
18088
- ] }) }),
18089
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "z-10 w-full max-w-[400px] md:-ml-24", children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "p-2 shadow-xl md:p-4", children: authContent }) })
18090
- ] }),
18189
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "relative flex flex-1 flex-col items-center justify-center gap-6 md:flex-row md:items-center md:gap-0", children: brandSide === "left" ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18190
+ brandCard("md:w-[52%]"),
18191
+ overlapAuthCard
18192
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18193
+ overlapAuthCard,
18194
+ brandCard("md:w-[52%]", true)
18195
+ ] }) }),
18091
18196
  footerBar
18092
18197
  ]
18093
18198
  }
@@ -18099,6 +18204,7 @@ function Login({
18099
18204
  {
18100
18205
  "data-slot": "login",
18101
18206
  "data-layout": layout,
18207
+ "data-brand-side": brandSide,
18102
18208
  className: cn(
18103
18209
  "relative grid min-h-svh w-full overflow-hidden bg-linear-to-br from-primary/20 via-accent to-primary/10 md:grid-cols-2 dark:from-primary/25 dark:to-primary/15",
18104
18210
  className
@@ -18106,15 +18212,12 @@ function Login({
18106
18212
  style,
18107
18213
  children: [
18108
18214
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18109
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative hidden flex-col justify-between p-10 md:flex", children: [
18110
- brandIdentity,
18111
- brandVisual,
18112
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", {})
18113
- ] }),
18114
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex min-h-svh flex-col", children: [
18115
- brandIdentity ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "p-6 md:hidden", children: brandIdentity }) : null,
18116
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex flex-1 items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "w-full max-w-[400px] p-2 shadow-xl md:p-4", children: authContent }) }),
18117
- footerBar
18215
+ brandSide === "left" ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18216
+ backdropBrandColumn,
18217
+ backdropAuthColumn
18218
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18219
+ backdropAuthColumn,
18220
+ backdropBrandColumn
18118
18221
  ] })
18119
18222
  ]
18120
18223
  }
@@ -18130,6 +18233,7 @@ function Login({
18130
18233
  {
18131
18234
  "data-slot": "login",
18132
18235
  "data-layout": layout,
18236
+ "data-brand-side": brandSide,
18133
18237
  className: cn(
18134
18238
  "grid min-h-svh w-full bg-background md:[grid-template-columns:var(--login-grid)]",
18135
18239
  className
@@ -4939,7 +4939,7 @@ declare function FieldCondition({ value, onChange, fields, disabled, size, }: Fi
4939
4939
  * - `backdrop`(11)整页渐变品牌背景 + 悬浮认证卡片
4940
4940
  * (10 扫码登录不在组件范围内)
4941
4941
  */
4942
- type LoginVariant = 'split' | 'centered' | 'brand-card' | 'overlap' | 'backdrop';
4942
+ type LoginVariant = "split" | "centered" | "brand-card" | "overlap" | "backdrop";
4943
4943
  interface LoginBrandInfo {
4944
4944
  /** Logo 图片地址 */
4945
4945
  logo?: string;
@@ -4960,8 +4960,12 @@ interface LoginLink {
4960
4960
  interface LoginProps {
4961
4961
  /** 结构模式,默认 split */
4962
4962
  layout?: LoginVariant;
4963
- /** 品牌区方向(仅 split),默认 left;right 即文档 12「左表单 + 右概念展示」 */
4964
- brandSide?: 'left' | 'right';
4963
+ /**
4964
+ * 品牌区方向(split / brand-card / overlap / backdrop 生效;centered 无分栏不适用),
4965
+ * 默认 left;right 即文档 12「左表单 + 右概念展示」的镜像结构
4966
+ * (窄屏均为认证区在前,品牌区隐藏或后置)
4967
+ */
4968
+ brandSide?: "left" | "right";
4965
4969
  /** 品牌区分栏占比 0–1(仅 split),默认 0.5;0.6 即文档 04 的品牌大区 */
4966
4970
  brandRatio?: number;
4967
4971
  /**
@@ -4969,7 +4973,7 @@ interface LoginProps {
4969
4973
  * `plain` 裸表单(320–380px);`card` 常规卡片(默认,400px);
4970
4974
  * `float` 大尺寸悬浮卡片(440px + 大留白 + 强阴影,即文档 03)
4971
4975
  */
4972
- authVariant?: 'plain' | 'card' | 'float';
4976
+ authVariant?: "plain" | "card" | "float";
4973
4977
  /** split 品牌面板是否带渐变背景,默认 true */
4974
4978
  brandPanelBackground?: boolean;
4975
4979
  /** 是否渲染默认背景装饰(圆斑/圆环/点阵/流线),默认 true */
@@ -4992,6 +4996,13 @@ interface LoginProps {
4992
4996
  forgotLink?: LoginLink;
4993
4997
  /** 页脚文案(版权/协议行,未配置不渲染) */
4994
4998
  footer?: string;
4999
+ /**
5000
+ * 认证区内容插槽(DSL children 或 ReactNode):提供时替换内置账号密码表单,
5001
+ * 标题/副标题与辅助入口(registerLink / forgotLink)保留。
5002
+ * 可内嵌 Tabs 切换多种登录方式(手机验证码 / 账号密码等);
5003
+ * 插槽内的表单字段、校验与提交事件由使用方自行编排,Login 的 onSubmit 不再生效
5004
+ */
5005
+ children?: ReactNode;
4995
5006
  /** 通用:根节点 class(与内置样式合并) */
4996
5007
  className?: string;
4997
5008
  /** 通用:根节点内联样式 */
@@ -5005,10 +5016,11 @@ interface LoginProps {
5005
5016
  * Login 登录业务组件(business 目录):
5006
5017
  * 品牌区 + 认证区 + 辅助入口 + 页脚的整页组合,内部复用 Form/Input/Button。
5007
5018
  * 结构模式(layout)与修饰配置(方向/比例/卡片样式/背景/装饰)正交组合;
5019
+ * 认证区内容支持 children 插槽替换内置表单(可内嵌 Tabs 切换多种登录方式);
5008
5020
  * 样式全部走语义令牌(深浅色/换肤自适应);文案缺省走 i18n(pactor.login.*),
5009
5021
  * 同名 props 优先。组件不内置登录请求。
5010
5022
  */
5011
- declare function Login({ layout, brandSide, brandRatio, authVariant, brandPanelBackground, decor, brand, title, subtitle, usernameLabel, usernamePlaceholder, passwordLabel, passwordPlaceholder, submitText, registerLink, forgotLink, footer, className, style, onSubmit, onRegisterClick, onForgotClick, }: LoginProps): React.JSX.Element;
5023
+ declare function Login({ layout, brandSide, brandRatio, authVariant, brandPanelBackground, decor, brand, title, subtitle, usernameLabel, usernamePlaceholder, passwordLabel, passwordPlaceholder, submitText, registerLink, forgotLink, footer, children, className, style, onSubmit, onRegisterClick, onForgotClick, }: LoginProps): React.JSX.Element;
5012
5024
 
5013
5025
  type ConditionOpt = 'GREATER' | 'GREATER_EQUAL' | 'LESS_EQUAL' | 'LESS' | 'EQUAL' | 'IN' | 'NOT_IN' | 'UNEQUAL' | 'LIKE' | 'NULL' | 'HASVAL' | 'NOTNULL' | 'BETWEEN';
5014
5026
  interface Condition {
@@ -4939,7 +4939,7 @@ declare function FieldCondition({ value, onChange, fields, disabled, size, }: Fi
4939
4939
  * - `backdrop`(11)整页渐变品牌背景 + 悬浮认证卡片
4940
4940
  * (10 扫码登录不在组件范围内)
4941
4941
  */
4942
- type LoginVariant = 'split' | 'centered' | 'brand-card' | 'overlap' | 'backdrop';
4942
+ type LoginVariant = "split" | "centered" | "brand-card" | "overlap" | "backdrop";
4943
4943
  interface LoginBrandInfo {
4944
4944
  /** Logo 图片地址 */
4945
4945
  logo?: string;
@@ -4960,8 +4960,12 @@ interface LoginLink {
4960
4960
  interface LoginProps {
4961
4961
  /** 结构模式,默认 split */
4962
4962
  layout?: LoginVariant;
4963
- /** 品牌区方向(仅 split),默认 left;right 即文档 12「左表单 + 右概念展示」 */
4964
- brandSide?: 'left' | 'right';
4963
+ /**
4964
+ * 品牌区方向(split / brand-card / overlap / backdrop 生效;centered 无分栏不适用),
4965
+ * 默认 left;right 即文档 12「左表单 + 右概念展示」的镜像结构
4966
+ * (窄屏均为认证区在前,品牌区隐藏或后置)
4967
+ */
4968
+ brandSide?: "left" | "right";
4965
4969
  /** 品牌区分栏占比 0–1(仅 split),默认 0.5;0.6 即文档 04 的品牌大区 */
4966
4970
  brandRatio?: number;
4967
4971
  /**
@@ -4969,7 +4973,7 @@ interface LoginProps {
4969
4973
  * `plain` 裸表单(320–380px);`card` 常规卡片(默认,400px);
4970
4974
  * `float` 大尺寸悬浮卡片(440px + 大留白 + 强阴影,即文档 03)
4971
4975
  */
4972
- authVariant?: 'plain' | 'card' | 'float';
4976
+ authVariant?: "plain" | "card" | "float";
4973
4977
  /** split 品牌面板是否带渐变背景,默认 true */
4974
4978
  brandPanelBackground?: boolean;
4975
4979
  /** 是否渲染默认背景装饰(圆斑/圆环/点阵/流线),默认 true */
@@ -4992,6 +4996,13 @@ interface LoginProps {
4992
4996
  forgotLink?: LoginLink;
4993
4997
  /** 页脚文案(版权/协议行,未配置不渲染) */
4994
4998
  footer?: string;
4999
+ /**
5000
+ * 认证区内容插槽(DSL children 或 ReactNode):提供时替换内置账号密码表单,
5001
+ * 标题/副标题与辅助入口(registerLink / forgotLink)保留。
5002
+ * 可内嵌 Tabs 切换多种登录方式(手机验证码 / 账号密码等);
5003
+ * 插槽内的表单字段、校验与提交事件由使用方自行编排,Login 的 onSubmit 不再生效
5004
+ */
5005
+ children?: ReactNode;
4995
5006
  /** 通用:根节点 class(与内置样式合并) */
4996
5007
  className?: string;
4997
5008
  /** 通用:根节点内联样式 */
@@ -5005,10 +5016,11 @@ interface LoginProps {
5005
5016
  * Login 登录业务组件(business 目录):
5006
5017
  * 品牌区 + 认证区 + 辅助入口 + 页脚的整页组合,内部复用 Form/Input/Button。
5007
5018
  * 结构模式(layout)与修饰配置(方向/比例/卡片样式/背景/装饰)正交组合;
5019
+ * 认证区内容支持 children 插槽替换内置表单(可内嵌 Tabs 切换多种登录方式);
5008
5020
  * 样式全部走语义令牌(深浅色/换肤自适应);文案缺省走 i18n(pactor.login.*),
5009
5021
  * 同名 props 优先。组件不内置登录请求。
5010
5022
  */
5011
- declare function Login({ layout, brandSide, brandRatio, authVariant, brandPanelBackground, decor, brand, title, subtitle, usernameLabel, usernamePlaceholder, passwordLabel, passwordPlaceholder, submitText, registerLink, forgotLink, footer, className, style, onSubmit, onRegisterClick, onForgotClick, }: LoginProps): React.JSX.Element;
5023
+ declare function Login({ layout, brandSide, brandRatio, authVariant, brandPanelBackground, decor, brand, title, subtitle, usernameLabel, usernamePlaceholder, passwordLabel, passwordPlaceholder, submitText, registerLink, forgotLink, footer, children, className, style, onSubmit, onRegisterClick, onForgotClick, }: LoginProps): React.JSX.Element;
5012
5024
 
5013
5025
  type ConditionOpt = 'GREATER' | 'GREATER_EQUAL' | 'LESS_EQUAL' | 'LESS' | 'EQUAL' | 'IN' | 'NOT_IN' | 'UNEQUAL' | 'LIKE' | 'NULL' | 'HASVAL' | 'NOTNULL' | 'BETWEEN';
5014
5026
  interface Condition {
@@ -171,7 +171,7 @@ import {
171
171
  inferKind,
172
172
  registerBuiltinComponents,
173
173
  useFormContext
174
- } from "../chunk-MGBEGZCH.js";
174
+ } from "../chunk-UWKDHCV5.js";
175
175
  import {
176
176
  ICONS,
177
177
  Icon,
package/dist/index.cjs CHANGED
@@ -17866,9 +17866,42 @@ function DefaultIllustration({ className }) {
17866
17866
  "aria-hidden": "true",
17867
17867
  className: cn("text-primary", className),
17868
17868
  children: [
17869
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("rect", { x: "24", y: "96", width: "88", height: "60", rx: "10", fill: "currentColor", opacity: "0.16" }),
17870
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("rect", { x: "120", y: "60", width: "88", height: "96", rx: "10", fill: "currentColor", opacity: "0.28" }),
17871
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("rect", { x: "216", y: "24", width: "80", height: "132", rx: "10", fill: "currentColor", opacity: "0.4" }),
17869
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17870
+ "rect",
17871
+ {
17872
+ x: "24",
17873
+ y: "96",
17874
+ width: "88",
17875
+ height: "60",
17876
+ rx: "10",
17877
+ fill: "currentColor",
17878
+ opacity: "0.16"
17879
+ }
17880
+ ),
17881
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17882
+ "rect",
17883
+ {
17884
+ x: "120",
17885
+ y: "60",
17886
+ width: "88",
17887
+ height: "96",
17888
+ rx: "10",
17889
+ fill: "currentColor",
17890
+ opacity: "0.28"
17891
+ }
17892
+ ),
17893
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17894
+ "rect",
17895
+ {
17896
+ x: "216",
17897
+ y: "24",
17898
+ width: "80",
17899
+ height: "132",
17900
+ rx: "10",
17901
+ fill: "currentColor",
17902
+ opacity: "0.4"
17903
+ }
17904
+ ),
17872
17905
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("circle", { cx: "68", cy: "52", r: "26", fill: "currentColor", opacity: "0.2" }),
17873
17906
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("circle", { cx: "248", cy: "140", r: "14", fill: "currentColor", opacity: "0.55" }),
17874
17907
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
@@ -17893,7 +17926,10 @@ function BgDecor({ className }) {
17893
17926
  {
17894
17927
  "data-slot": "login-bg-decor",
17895
17928
  "aria-hidden": "true",
17896
- className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
17929
+ className: cn(
17930
+ "pointer-events-none absolute inset-0 overflow-hidden",
17931
+ className
17932
+ ),
17897
17933
  children: [
17898
17934
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "absolute -right-24 -top-24 size-96 rounded-full bg-primary/8" }),
17899
17935
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "absolute -left-32 bottom-0 size-80 rounded-full bg-primary/5" }),
@@ -17949,6 +17985,7 @@ function Login({
17949
17985
  registerLink,
17950
17986
  forgotLink,
17951
17987
  footer,
17988
+ children,
17952
17989
  className,
17953
17990
  style,
17954
17991
  onSubmit,
@@ -17957,21 +17994,51 @@ function Login({
17957
17994
  }) {
17958
17995
  const { t } = (0, import_runtime31.useI18n)();
17959
17996
  const brandIdentity = brand && (brand.logo || brand.name) ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { "data-slot": "login-brand-identity", className: "flex items-center gap-2", children: [
17960
- brand.logo ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("img", { src: brand.logo, alt: brand.name ?? "", className: "size-7 rounded-md" }) : null,
17961
- brand.name ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { className: "text-base font-semibold", children: brand.name }) : null
17962
- ] }) : null;
17963
- const brandVisual = /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "flex flex-col gap-4", children: [
17964
- brand?.title ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("h2", { className: "text-3xl font-bold leading-tight tracking-tight", children: brand.title }) : null,
17965
- brand?.description ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("p", { className: "max-w-md text-sm text-muted-foreground", children: brand.description }) : null,
17966
- brand?.illustration ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17997
+ brand.logo ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17967
17998
  "img",
17968
17999
  {
17969
- src: brand.illustration,
17970
- alt: "",
17971
- className: "mt-4 w-full max-w-lg rounded-lg object-cover"
18000
+ src: brand.logo,
18001
+ alt: brand.name ?? "",
18002
+ className: "size-7 rounded-md"
17972
18003
  }
17973
- ) : brand?.illustration === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(DefaultIllustration, { className: "mt-4 w-full max-w-md" })
17974
- ] });
18004
+ ) : null,
18005
+ brand.name ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { className: "text-base font-semibold", children: brand.name }) : null
18006
+ ] }) : null;
18007
+ const brandVisual = (alignRight = false) => /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
18008
+ "div",
18009
+ {
18010
+ className: cn("flex w-full flex-col gap-4", alignRight && "text-right"),
18011
+ children: [
18012
+ brand?.title ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("h2", { className: "text-3xl font-bold leading-tight tracking-tight", children: brand.title }) : null,
18013
+ brand?.description ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18014
+ "p",
18015
+ {
18016
+ className: cn(
18017
+ "max-w-md text-sm text-muted-foreground",
18018
+ alignRight && "ml-auto"
18019
+ ),
18020
+ children: brand.description
18021
+ }
18022
+ ) : null,
18023
+ brand?.illustration ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18024
+ "img",
18025
+ {
18026
+ src: brand.illustration,
18027
+ alt: "",
18028
+ className: cn(
18029
+ "mt-4 w-full max-w-lg rounded-lg object-cover",
18030
+ alignRight && "self-end"
18031
+ )
18032
+ }
18033
+ ) : brand?.illustration === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18034
+ DefaultIllustration,
18035
+ {
18036
+ className: cn("mt-4 w-full max-w-md", alignRight && "self-end")
18037
+ }
18038
+ )
18039
+ ]
18040
+ }
18041
+ );
17975
18042
  const renderAuxLink = (link, onClick) => {
17976
18043
  if (!link) return null;
17977
18044
  if (link.href) {
@@ -17992,35 +18059,40 @@ function Login({
17992
18059
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("h1", { className: "text-2xl font-semibold tracking-tight", children: title ?? t("pactor.login.title") }),
17993
18060
  subtitle ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
17994
18061
  ] }),
17995
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(Form, { name: "login", className: "flex flex-col gap-4", onSubmit, children: [
17996
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18062
+ children ?? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(Form, { name: "login", className: "flex flex-col gap-2", onSubmit, children: [
18063
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Field2, { label: usernameLabel ?? t("pactor.login.username"), required: true, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
17997
18064
  Input2,
17998
18065
  {
17999
18066
  name: "username",
18000
- label: usernameLabel ?? t("pactor.login.username"),
18067
+ size: "large",
18001
18068
  placeholder: usernamePlaceholder ?? t("pactor.login.usernamePlaceholder"),
18002
- rules: [{ required: true, message: t("pactor.login.usernameRequired") }]
18069
+ rules: [
18070
+ { required: true, message: t("pactor.login.usernameRequired") }
18071
+ ]
18003
18072
  }
18004
- ),
18005
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18073
+ ) }),
18074
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Field2, { label: passwordLabel ?? t("pactor.login.password"), required: true, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18006
18075
  Input2,
18007
18076
  {
18008
18077
  name: "password",
18009
18078
  type: "password",
18010
- label: passwordLabel ?? t("pactor.login.password"),
18079
+ size: "large",
18011
18080
  placeholder: passwordPlaceholder ?? t("pactor.login.passwordPlaceholder"),
18012
- rules: [{ required: true, message: t("pactor.login.passwordRequired") }]
18081
+ rules: [
18082
+ { required: true, message: t("pactor.login.passwordRequired") }
18083
+ ]
18013
18084
  }
18014
- ),
18015
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18085
+ ) }),
18086
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Field2, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18016
18087
  Button2,
18017
18088
  {
18018
18089
  submit: true,
18019
18090
  variant: "primary",
18091
+ size: "large",
18020
18092
  text: submitText ?? t("pactor.login.submit"),
18021
18093
  className: "mt-2 w-full"
18022
18094
  }
18023
- )
18095
+ ) })
18024
18096
  ] }),
18025
18097
  registerLink || forgotLink ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "mt-4 flex items-center justify-between gap-4", children: [
18026
18098
  renderAuxLink(registerLink, onRegisterClick),
@@ -18049,7 +18121,7 @@ function Login({
18049
18121
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18050
18122
  /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex h-full flex-col justify-between", children: [
18051
18123
  withIdentity ? brandIdentity : null,
18052
- brandVisual,
18124
+ brandVisual(),
18053
18125
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", {})
18054
18126
  ] })
18055
18127
  ]
@@ -18060,6 +18132,37 @@ function Login({
18060
18132
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex flex-1 items-center justify-center p-6", children: authBox(variant) }),
18061
18133
  footerBar
18062
18134
  ] });
18135
+ const brandCard = (widthClass, alignRight = false) => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: cn("w-full", widthClass, BRAND_PANEL_BG), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
18136
+ "div",
18137
+ {
18138
+ "data-slot": "login-brand-card-content",
18139
+ className: cn("flex flex-col gap-6", alignRight && "text-right"),
18140
+ children: [
18141
+ brandIdentity ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: cn(alignRight && "flex justify-end"), children: brandIdentity }) : null,
18142
+ brandVisual(alignRight)
18143
+ ]
18144
+ }
18145
+ ) });
18146
+ const overlapAuthCard = /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
18147
+ "div",
18148
+ {
18149
+ className: cn(
18150
+ "z-10 w-full max-w-[400px]",
18151
+ brandSide === "left" ? "md:-ml-24" : "md:-mr-24"
18152
+ ),
18153
+ children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "p-2 shadow-xl md:p-4", children: authContent })
18154
+ }
18155
+ );
18156
+ const backdropBrandColumn = /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative hidden flex-col justify-between p-10 md:flex", children: [
18157
+ brandIdentity,
18158
+ brandVisual(),
18159
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", {})
18160
+ ] });
18161
+ const backdropAuthColumn = /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex min-h-svh flex-col", children: [
18162
+ brandIdentity ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "p-6 md:hidden", children: brandIdentity }) : null,
18163
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex flex-1 items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "w-full max-w-[400px] p-2 shadow-xl md:p-4", children: authContent }) }),
18164
+ footerBar
18165
+ ] });
18063
18166
  if (layout === "centered") {
18064
18167
  return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
18065
18168
  "div",
@@ -18088,6 +18191,7 @@ function Login({
18088
18191
  {
18089
18192
  "data-slot": "login",
18090
18193
  "data-layout": layout,
18194
+ "data-brand-side": brandSide,
18091
18195
  className: cn(
18092
18196
  "relative flex min-h-svh w-full flex-col overflow-hidden bg-background p-6 md:p-10",
18093
18197
  className
@@ -18095,13 +18199,13 @@ function Login({
18095
18199
  style,
18096
18200
  children: [
18097
18201
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18098
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex flex-1 flex-col items-center gap-6 md:flex-row md:gap-10", children: [
18099
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: cn("w-full md:w-[45%]", BRAND_PANEL_BG), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "flex flex-col gap-6", children: [
18100
- brandIdentity,
18101
- brandVisual
18102
- ] }) }),
18202
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "relative flex flex-1 flex-col items-center gap-6 md:flex-row md:gap-10", children: brandSide === "left" ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18203
+ brandCard("md:w-[45%]"),
18103
18204
  /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex w-full flex-1 justify-center", children: authBox("plain") })
18104
- ] }),
18205
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18206
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex w-full flex-1 justify-center", children: authBox("plain") }),
18207
+ brandCard("md:w-[45%]")
18208
+ ] }) }),
18105
18209
  footerBar
18106
18210
  ]
18107
18211
  }
@@ -18113,6 +18217,7 @@ function Login({
18113
18217
  {
18114
18218
  "data-slot": "login",
18115
18219
  "data-layout": layout,
18220
+ "data-brand-side": brandSide,
18116
18221
  className: cn(
18117
18222
  "relative flex min-h-svh w-full flex-col overflow-hidden bg-background p-6 md:p-10",
18118
18223
  className
@@ -18120,13 +18225,13 @@ function Login({
18120
18225
  style,
18121
18226
  children: [
18122
18227
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18123
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex flex-1 flex-col items-center justify-center gap-6 md:flex-row md:items-center md:gap-0", children: [
18124
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: cn("w-full md:w-[52%]", BRAND_PANEL_BG), children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "flex flex-col gap-6", children: [
18125
- brandIdentity,
18126
- brandVisual
18127
- ] }) }),
18128
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "z-10 w-full max-w-[400px] md:-ml-24", children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "p-2 shadow-xl md:p-4", children: authContent }) })
18129
- ] }),
18228
+ /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "relative flex flex-1 flex-col items-center justify-center gap-6 md:flex-row md:items-center md:gap-0", children: brandSide === "left" ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18229
+ brandCard("md:w-[52%]"),
18230
+ overlapAuthCard
18231
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18232
+ overlapAuthCard,
18233
+ brandCard("md:w-[52%]", true)
18234
+ ] }) }),
18130
18235
  footerBar
18131
18236
  ]
18132
18237
  }
@@ -18138,6 +18243,7 @@ function Login({
18138
18243
  {
18139
18244
  "data-slot": "login",
18140
18245
  "data-layout": layout,
18246
+ "data-brand-side": brandSide,
18141
18247
  className: cn(
18142
18248
  "relative grid min-h-svh w-full overflow-hidden bg-linear-to-br from-primary/20 via-accent to-primary/10 md:grid-cols-2 dark:from-primary/25 dark:to-primary/15",
18143
18249
  className
@@ -18145,15 +18251,12 @@ function Login({
18145
18251
  style,
18146
18252
  children: [
18147
18253
  decor ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(BgDecor, {}) : null,
18148
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative hidden flex-col justify-between p-10 md:flex", children: [
18149
- brandIdentity,
18150
- brandVisual,
18151
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", {})
18152
- ] }),
18153
- /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: "relative flex min-h-svh flex-col", children: [
18154
- brandIdentity ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "p-6 md:hidden", children: brandIdentity }) : null,
18155
- /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("div", { className: "flex flex-1 items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Card2, { className: "w-full max-w-[400px] p-2 shadow-xl md:p-4", children: authContent }) }),
18156
- footerBar
18254
+ brandSide === "left" ? /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18255
+ backdropBrandColumn,
18256
+ backdropAuthColumn
18257
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
18258
+ backdropAuthColumn,
18259
+ backdropBrandColumn
18157
18260
  ] })
18158
18261
  ]
18159
18262
  }
@@ -18169,6 +18272,7 @@ function Login({
18169
18272
  {
18170
18273
  "data-slot": "login",
18171
18274
  "data-layout": layout,
18275
+ "data-brand-side": brandSide,
18172
18276
  className: cn(
18173
18277
  "grid min-h-svh w-full bg-background md:[grid-template-columns:var(--login-grid)]",
18174
18278
  className
package/dist/index.js CHANGED
@@ -171,7 +171,7 @@ import {
171
171
  inferKind,
172
172
  registerBuiltinComponents,
173
173
  useFormContext
174
- } from "./chunk-MGBEGZCH.js";
174
+ } from "./chunk-UWKDHCV5.js";
175
175
  import {
176
176
  InteractionProvider,
177
177
  OVERLAY_CANCEL_PAYLOAD,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pactor-app/ui",
3
- "version": "1.40.0",
3
+ "version": "1.41.0",
4
4
  "description": "Pactor UI kit (shadcn): the single built-in UI kit — vendored shadcn/ui components (Base UI primitives + cva + tailwind-merge + lucide-react), props contracts, interaction core (OverlayManager / UiBridge) and layouts, with build-time Tailwind v4 prebuilt styles.css (zero consumer-side Tailwind config)",
5
5
  "keywords": [
6
6
  "pactor",
@@ -108,11 +108,11 @@
108
108
  "react-resizable-panels": "^4.12.3",
109
109
  "tailwind-merge": "^3.6.0",
110
110
  "vaul": "^1.1.2",
111
- "@pactor-app/core": "1.40.0",
112
- "@pactor-app/permission": "1.40.0",
113
- "@pactor-app/markdown": "1.40.0",
114
- "@pactor-app/router": "1.40.0",
115
- "@pactor-app/runtime": "1.40.0"
111
+ "@pactor-app/core": "1.41.0",
112
+ "@pactor-app/runtime": "1.41.0",
113
+ "@pactor-app/permission": "1.41.0",
114
+ "@pactor-app/router": "1.41.0",
115
+ "@pactor-app/markdown": "1.41.0"
116
116
  },
117
117
  "peerDependencies": {
118
118
  "react": ">=18",
package/styles.css CHANGED
@@ -3587,6 +3587,9 @@
3587
3587
  }
3588
3588
  }
3589
3589
  @media (width >= 48rem) {
3590
+ .md\:-mr-24 {
3591
+ margin-right: calc(var(--spacing) * -24);
3592
+ }
3590
3593
  .md\:-ml-24 {
3591
3594
  margin-left: calc(var(--spacing) * -24);
3592
3595
  }