@lobehub/ui 5.59.0 → 5.61.0

package/es/dashboard/AuthLayout/Aside.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/AuthLayout/Aside.tsx
+/** Inset art panel for `AuthLayout`'s `aside` slot, with a scrim and copy at the bottom. */
+function AuthLayoutAside({ background, className, kicker, line, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.asidePlate, className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.asidePanel,
+			children: [background, kicker || line ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: styles.asideScrim }), /* @__PURE__ */ jsxs("div", {
+				className: styles.asideCopy,
+				children: [kicker ? /* @__PURE__ */ jsx("p", {
+					className: styles.asideKicker,
+					children: kicker
+				}) : null, line ? /* @__PURE__ */ jsx("p", {
+					className: styles.asideLine,
+					children: line
+				}) : null]
+			})] }) : null]
+		})
+	});
+}
+AuthLayoutAside.displayName = "AuthLayoutAside";
+//#endregion
+export { AuthLayoutAside as default };
+
+//# sourceMappingURL=Aside.mjs.map

package/es/dashboard/AuthLayout/Aside.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Aside.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/Aside.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { AuthLayoutAsideProps } from './type';\n\n/** Inset art panel for `AuthLayout`'s `aside` slot, with a scrim and copy at the bottom. */\nfunction AuthLayoutAside({ background, className, kicker, line, ...rest }: AuthLayoutAsideProps) {\n  return (\n    <div className={cx(styles.asidePlate, className)} {...rest}>\n      <div className={styles.asidePanel}>\n        {background}\n        {kicker || line ? (\n          <>\n            <div className={styles.asideScrim} />\n            <div className={styles.asideCopy}>\n              {kicker ? <p className={styles.asideKicker}>{kicker}</p> : null}\n              {line ? <p className={styles.asideLine}>{line}</p> : null}\n            </div>\n          </>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nAuthLayoutAside.displayName = 'AuthLayoutAside';\n\nexport default AuthLayoutAside;\n"],"mappings":";;;;;;AAQA,SAAS,gBAAgB,EAAE,YAAY,WAAW,QAAQ,MAAM,GAAG,QAA8B;CAC/F,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,YAAY,SAAS;EAAG,GAAI;EACpD,UAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACG,YACA,UAAU,OACT,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAW,OAAO,WAAa,CAAA,GACpC,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAc,UAAA;IAAU,CAAA,IAAI,MAC1D,OAAO,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAY,UAAA;IAAQ,CAAA,IAAI,IAClD;GACL,CAAA,CAAA,EAAA,CAAA,IACA,IACD;;CACF,CAAA;AAET;AAEA,gBAAgB,cAAc"}

package/es/dashboard/AuthLayout/AuthLayout.d.mts

@@ -1,8 +1,10 @@
 import { AuthLayoutProps } from "./type.mjs";
+import AuthLayoutAside from "./Aside.mjs";
 //#region src/dashboard/AuthLayout/AuthLayout.d.ts
-declare function AuthLayout({ aside, brand, children, className, description, title, tools, ...rest }: AuthLayoutProps): import("react").JSX.Element;
+declare function AuthLayout({ alert, aside, background, brand, card, children, className, description, footer, loading, logo, title, tools, variant, ...rest }: AuthLayoutProps): import("react").JSX.Element;
 declare namespace AuthLayout {
   var displayName: string;
+  var Aside: typeof AuthLayoutAside;
 }
 //#endregion
 export { AuthLayout as default };

package/es/dashboard/AuthLayout/AuthLayout.mjs

@@ -1,53 +1,109 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
 import Text from "../../base-ui/Text/Text.mjs";
-import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { styles } from "./style.mjs";
+import AuthLayoutAside from "./Aside.mjs";
+import { useSurfaceCardClassName } from "../Surface/link.mjs";
+import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 //#region src/dashboard/AuthLayout/AuthLayout.tsx
-function AuthLayout({ aside, brand, children, className, description, title, tools, ...rest }) {
+const FormSkeleton = () => /* @__PURE__ */ jsxs(FlexBasic_default, {
+	"aria-hidden": true,
+	gap: 12,
+	children: [
+		/* @__PURE__ */ jsx(Skeleton, {
+			height: 36,
+			radius: 8,
+			width: "100%"
+		}),
+		/* @__PURE__ */ jsx(Skeleton, {
+			height: 36,
+			radius: 8,
+			width: "100%"
+		}),
+		/* @__PURE__ */ jsx(Skeleton, {
+			height: 36,
+			radius: 8,
+			width: "100%"
+		})
+	]
+});
+function AuthLayout({ alert, aside, background = "plain", brand, card = true, children, className, description, footer, loading, logo, title, tools, variant = "default", ...rest }) {
+	const cardClassName = useSurfaceCardClassName();
 	const split = Boolean(aside);
+	const art = isValidElement(background) ? background : null;
+	const heading = title === void 0 || title === null ? null : typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
+		as: "h1",
+		className: styles.title,
+		weight: "bold",
+		children: title
+	}) : /* @__PURE__ */ jsx("div", {
+		className: styles.titleNode,
+		children: title
+	});
+	const intro = logo || heading || description ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+		gap: 8,
+		children: [
+			logo ? /* @__PURE__ */ jsx("div", {
+				className: styles.logo,
+				children: logo
+			}) : null,
+			heading,
+			description ? /* @__PURE__ */ jsx(Text, {
+				className: styles.description,
+				type: "secondary",
+				children: description
+			}) : null
+		]
+	}) : null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: className ? `${styles$1.page} ${className}` : styles$1.page,
+		className: cx(styles.page, background === "grid" && styles.grid, className),
+		"data-auth-layout": "",
 		...rest,
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: styles$1.header,
-			children: [brand, tools ? /* @__PURE__ */ jsx("div", {
-				className: styles$1.tools,
-				children: tools
-			}) : null]
-		}), /* @__PURE__ */ jsx("main", {
-			className: styles$1.main,
-			children: /* @__PURE__ */ jsx("div", {
-				className: cx(styles$1.lift, split && styles$1.liftSplit, styles.card),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: cx(styles$1.frame, split && styles$1.split),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: cx(styles$1.form, split && styles$1.formSplit),
-						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-							gap: 8,
-							children: [/* @__PURE__ */ jsx(Text, {
-								as: "h1",
-								className: styles$1.title,
-								weight: "bold",
-								children: title
-							}), description ? /* @__PURE__ */ jsx(Text, {
-								className: styles$1.description,
-								type: "secondary",
-								children: description
-							}) : null]
-						}), children]
-					}), aside ? /* @__PURE__ */ jsx("div", {
-						className: styles$1.aside,
-						children: aside
-					}) : null]
-				})
+		children: [
+			art ? /* @__PURE__ */ jsx("div", {
+				className: styles.backdrop,
+				children: art
+			}) : null,
+			/* @__PURE__ */ jsxs("header", {
+				className: styles.header,
+				children: [brand, tools ? /* @__PURE__ */ jsx("div", {
+					className: styles.tools,
+					children: tools
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("main", {
+				className: styles.main,
+				children: card ? /* @__PURE__ */ jsx("div", {
+					"data-auth-card": "",
+					className: cx(styles.lift, split && styles.liftSplit, cardClassName, variant === "elevated" && styles.elevated),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cx(styles.frame, split && styles.split),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: cx(styles.form, split && styles.formSplit),
+							children: [
+								intro,
+								alert,
+								loading ? /* @__PURE__ */ jsx(FormSkeleton, {}) : children,
+								footer ? /* @__PURE__ */ jsx("div", {
+									className: styles.footer,
+									children: footer
+								}) : null
+							]
+						}), aside ? /* @__PURE__ */ jsx("div", {
+							className: styles.aside,
+							children: aside
+						}) : null]
+					})
+				}) : children
 			})
-		})]
+		]
 	});
 }
 AuthLayout.displayName = "AuthLayout";
+AuthLayout.Aside = AuthLayoutAside;
 //#endregion
 export { AuthLayout as default };
 

package/es/dashboard/AuthLayout/AuthLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout.mjs","names":["styles","surfaceStyles","Flexbox"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nfunction AuthLayout({\n  aside,\n  brand,\n  children,\n  className,\n  description,\n  title,\n  tools,\n  ...rest\n}: AuthLayoutProps) {\n  const split = Boolean(aside);\n  return (\n    <div className={className ? `${styles.page} ${className}` : styles.page} {...rest}>\n      <header className={styles.header}>\n        {brand}\n        {tools ? <div className={styles.tools}>{tools}</div> : null}\n      </header>\n      <main className={styles.main}>\n        <div className={cx(styles.lift, split && styles.liftSplit, surfaceStyles.card)}>\n          <div className={cx(styles.frame, split && styles.split)}>\n            <div className={cx(styles.form, split && styles.formSplit)}>\n              <Flexbox gap={8}>\n                <Text as=\"h1\" className={styles.title} weight=\"bold\">\n                  {title}\n                </Text>\n                {description ? (\n                  <Text className={styles.description} type=\"secondary\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Flexbox>\n              {children}\n            </div>\n            {aside ? <div className={styles.aside}>{aside}</div> : null}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;AAWA,SAAS,WAAW,EAClB,OACA,OACA,UACA,WACA,aACA,OACA,OACA,GAAG,QACe;CAClB,MAAM,QAAQ,QAAQ,KAAK;CAC3B,OACE,qBAAC,OAAD;EAAK,WAAW,YAAY,GAAGA,SAAO,KAAK,GAAG,cAAcA,SAAO;EAAM,GAAI;EAA7E,UAAA,CACE,qBAAC,UAAD;GAAQ,WAAWA,SAAO;GAA1B,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;IAAK,WAAWA,SAAO;IAAQ,UAAA;GAAW,CAAA,IAAI,IACjD;EACR,CAAA,GAAA,oBAAC,QAAD;GAAM,WAAWA,SAAO;GACtB,UAAA,oBAAC,OAAD;IAAK,WAAW,GAAGA,SAAO,MAAM,SAASA,SAAO,WAAWC,OAAc,IAAI;IAC3E,UAAA,qBAAC,OAAD;KAAK,WAAW,GAAGD,SAAO,OAAO,SAASA,SAAO,KAAK;KAAtD,UAAA,CACE,qBAAC,OAAD;MAAK,WAAW,GAAGA,SAAO,MAAM,SAASA,SAAO,SAAS;MAAzD,UAAA,CACE,qBAACE,mBAAD;OAAS,KAAK;OAAd,UAAA,CACE,oBAAC,MAAD;QAAM,IAAG;QAAK,WAAWF,SAAO;QAAO,QAAO;QAC3C,UAAA;OACG,CAAA,GACL,cACC,oBAAC,MAAD;QAAM,WAAWA,SAAO;QAAa,MAAK;QACvC,UAAA;OACG,CAAA,IACJ,IACG;MACR,CAAA,GAAA,QACE;KACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;MAAK,WAAWA,SAAO;MAAQ,UAAA;KAAW,CAAA,IAAI,IACpD;;GACF,CAAA;EACD,CAAA,CACH;;AAET;AAEA,WAAW,cAAc"}
+{"version":3,"file":"AuthLayout.mjs","names":["Flexbox","Aside"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isValidElement } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport Aside from './Aside';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst FormSkeleton = () => (\n  <Flexbox aria-hidden gap={12}>\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n  </Flexbox>\n);\n\nfunction AuthLayout({\n  alert,\n  aside,\n  background = 'plain',\n  brand,\n  card = true,\n  children,\n  className,\n  description,\n  footer,\n  loading,\n  logo,\n  title,\n  tools,\n  variant = 'default',\n  ...rest\n}: AuthLayoutProps) {\n  const cardClassName = useSurfaceCardClassName();\n  const split = Boolean(aside);\n  const art = isValidElement(background) ? background : null;\n  const heading =\n    title === undefined || title === null ? null : typeof title === 'string' ? (\n      <Text as=\"h1\" className={styles.title} weight=\"bold\">\n        {title}\n      </Text>\n    ) : (\n      <div className={styles.titleNode}>{title}</div>\n    );\n  const intro =\n    logo || heading || description ? (\n      <Flexbox gap={8}>\n        {logo ? <div className={styles.logo}>{logo}</div> : null}\n        {heading}\n        {description ? (\n          <Text className={styles.description} type=\"secondary\">\n            {description}\n          </Text>\n        ) : null}\n      </Flexbox>\n    ) : null;\n\n  return (\n    <div\n      className={cx(styles.page, background === 'grid' && styles.grid, className)}\n      data-auth-layout=\"\"\n      {...rest}\n    >\n      {art ? <div className={styles.backdrop}>{art}</div> : null}\n      <header className={styles.header}>\n        {brand}\n        {tools ? <div className={styles.tools}>{tools}</div> : null}\n      </header>\n      <main className={styles.main}>\n        {card ? (\n          <div\n            data-auth-card=\"\"\n            className={cx(\n              styles.lift,\n              split && styles.liftSplit,\n              cardClassName,\n              variant === 'elevated' && styles.elevated,\n            )}\n          >\n            <div className={cx(styles.frame, split && styles.split)}>\n              <div className={cx(styles.form, split && styles.formSplit)}>\n                {intro}\n                {alert}\n                {loading ? <FormSkeleton /> : children}\n                {footer ? <div className={styles.footer}>{footer}</div> : null}\n              </div>\n              {aside ? <div className={styles.aside}>{aside}</div> : null}\n            </div>\n          </div>\n        ) : (\n          children\n        )}\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\nAuthLayout.Aside = Aside;\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,qBACJ,qBAACA,mBAAD;CAAS,eAAA;CAAY,KAAK;CAA1B,UAAA;EACE,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;CACxC;;AAGX,SAAS,WAAW,EAClB,OACA,OACA,aAAa,SACb,OACA,OAAO,MACP,UACA,WACA,aACA,QACA,SACA,MACA,OACA,OACA,UAAU,WACV,GAAG,QACe;CAClB,MAAM,gBAAgB,wBAAwB;CAC9C,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,MAAM,eAAe,UAAU,IAAI,aAAa;CACtD,MAAM,UACJ,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,UAAU,WAC9D,oBAAC,MAAD;EAAM,IAAG;EAAK,WAAW,OAAO;EAAO,QAAO;EAC3C,UAAA;CACG,CAAA,IAEN,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAY,UAAA;CAAW,CAAA;CAElD,MAAM,QACJ,QAAQ,WAAW,cACjB,qBAACA,mBAAD;EAAS,KAAK;EAAd,UAAA;GACG,OAAO,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAU,CAAA,IAAI;GACnD;GACA,cACC,oBAAC,MAAD;IAAM,WAAW,OAAO;IAAa,MAAK;IACvC,UAAA;GACG,CAAA,IACJ;EACG;CACP,CAAA,IAAA;CAEN,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,eAAe,UAAU,OAAO,MAAM,SAAS;EAC1E,oBAAiB;EACjB,GAAI;EAHN,UAAA;GAKG,MAAM,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAW,UAAA;GAAS,CAAA,IAAI;GACtD,qBAAC,UAAD;IAAQ,WAAW,OAAO;IAA1B,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI,IACjD;;GACR,oBAAC,QAAD;IAAM,WAAW,OAAO;IACrB,UAAA,OACC,oBAAC,OAAD;KACE,kBAAe;KACf,WAAW,GACT,OAAO,MACP,SAAS,OAAO,WAChB,eACA,YAAY,cAAc,OAAO,QACnC;KAEA,UAAA,qBAAC,OAAD;MAAK,WAAW,GAAG,OAAO,OAAO,SAAS,OAAO,KAAK;MAAtD,UAAA,CACE,qBAAC,OAAD;OAAK,WAAW,GAAG,OAAO,MAAM,SAAS,OAAO,SAAS;OAAzD,UAAA;QACG;QACA;QACA,UAAU,oBAAC,cAAD,CAAe,CAAA,IAAI;QAC7B,SAAS,oBAAC,OAAD;SAAK,WAAW,OAAO;SAAS,UAAA;QAAY,CAAA,IAAI;OACvD;MACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAQ,UAAA;MAAW,CAAA,IAAI,IACpD;;IACF,CAAA,IAEL;GAEE,CAAA;EACH;;AAET;AAEA,WAAW,cAAc;AACzB,WAAW,QAAQC"}

package/es/dashboard/AuthLayout/index.d.mts

@@ -1,3 +1,4 @@
-import { AuthLayoutProps } from "./type.mjs";
+import { AuthLayoutAsideProps, AuthLayoutBackground, AuthLayoutProps, AuthLayoutVariant } from "./type.mjs";
+import AuthLayoutAside from "./Aside.mjs";
 import AuthLayout from "./AuthLayout.mjs";
-export { type AuthLayoutProps, AuthLayout as default };
+export { AuthLayoutAside, type AuthLayoutAsideProps, type AuthLayoutBackground, type AuthLayoutProps, type AuthLayoutVariant, AuthLayout as default };

package/es/dashboard/AuthLayout/style.mjs

@@ -16,10 +16,91 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     ${responsive.laptop} {
       display: none;
     }
+  `,
+	asideCopy: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 2;
+    inset-block-end: 64px;
+    inset-inline: 40px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+	asideKicker: css`
+    margin: 0;
+
+    font-size: ${cssVar.fontSize};
+    line-height: 1.4;
+    color: #fff;
+
+    opacity: 0.82;
+  `,
+	asideLine: css`
+    margin: 0;
+
+    font-size: ${cssVar.fontSizeHeading2};
+    font-weight: 600;
+    line-height: 1.25;
+    color: #fff;
+    letter-spacing: -0.02em;
+  `,
+	asidePanel: css`
+    position: absolute;
+    inset: 8px;
+
+    overflow: hidden;
+
+    border-radius: 20px;
+
+    background: linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%);
+  `,
+	asidePlate: css`
+    position: absolute;
+    inset: 0;
+    background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});
+  `,
+	asideScrim: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 1;
+    inset-block-end: 0;
+    inset-inline: 0;
+
+    block-size: 58%;
+
+    background: linear-gradient(to top, rgb(24 10 48 / 42%), transparent);
+  `,
+	backdrop: css`
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
   `,
 	description: css`
     line-height: 1.6;
     color: ${cssVar.colorTextSecondary};
+  `,
+	elevated: css`
+    &&&,
+    &&&:hover {
+      border-radius: 28px;
+    }
+  `,
+	footer: css`
+    margin: 0;
+    font-size: ${cssVar.fontSizeSM};
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+
+    a {
+      font-weight: 600;
+      color: ${cssVar.colorLink};
+      text-decoration: none;
+    }
   `,
 	form: css`
     display: flex;
@@ -56,8 +137,28 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     inline-size: 100%;
     min-inline-size: 0;
     border-radius: inherit;
+  `,
+	grid: css`
+    && {
+      background-color: color-mix(in srgb, ${cssVar.colorBgLayout}, ${cssVar.colorBgElevated} 70%);
+      background-image:
+        linear-gradient(
+          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,
+          transparent 1px
+        ),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,
+          transparent 1px
+        );
+      background-position: -1px -1px;
+      background-size: 32px 32px;
+    }
   `,
 	header: css`
+    position: relative;
+    z-index: 1;
+
     display: flex;
     flex: none;
     gap: 12px;
@@ -68,6 +169,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     padding-inline: 16px;
   `,
 	lift: css`
+    position: relative;
     display: flex;
     inline-size: min(440px, 100%);
   `,
@@ -77,8 +179,15 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     ${responsive.laptop} {
       inline-size: min(440px, 100%);
     }
+  `,
+	logo: css`
+    display: flex;
+    margin-block-end: 8px;
   `,
 	main: css`
+    position: relative;
+    z-index: 1;
+
     display: grid;
     flex: 1;
     place-items: center;
@@ -87,11 +196,17 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     padding-inline: 16px;
   `,
 	page: css`
+    position: relative;
+
+    overflow: auto;
     display: flex;
+    flex: 1;
     flex-direction: column;
 
+    box-sizing: border-box;
+    inline-size: 100%;
     block-size: 100%;
-    min-block-size: 0;
+    min-block-size: 100dvh;
 
     background: ${cssVar.colorBgLayout};
   `,
@@ -106,6 +221,10 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     margin: 0;
     font-size: ${cssVar.fontSizeHeading3};
     line-height: ${cssVar.lineHeightHeading3};
+  `,
+	titleNode: css`
+    display: flex;
+    min-inline-size: 0;
   `,
 	tools: css`
     display: flex;

package/es/dashboard/AuthLayout/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  aside: css`\n    position: relative;\n\n    flex: none;\n\n    box-sizing: border-box;\n    inline-size: 50%;\n    min-inline-size: 0;\n    max-inline-size: 50%;\n\n    background: ${cssVar.colorFillSecondary};\n\n    ${responsive.laptop} {\n      display: none;\n    }\n  `,\n  description: css`\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  form: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: 24px;\n    justify-content: center;\n\n    box-sizing: border-box;\n    inline-size: 100%;\n    min-inline-size: 0;\n    padding-block: 40px;\n    padding-inline: 36px;\n\n    ${responsive.laptop} {\n      padding-block: 28px;\n      padding-inline: 24px;\n    }\n  `,\n  formSplit: css`\n    inline-size: 50%;\n    max-inline-size: 50%;\n\n    ${responsive.laptop} {\n      inline-size: 100%;\n      max-inline-size: 100%;\n    }\n  `,\n  frame: css`\n    overflow: hidden;\n    display: flex;\n    flex: none;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n    border-radius: inherit;\n  `,\n  header: css`\n    display: flex;\n    flex: none;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    block-size: 56px;\n    padding-inline: 16px;\n  `,\n  lift: css`\n    display: flex;\n    inline-size: min(440px, 100%);\n  `,\n  liftSplit: css`\n    inline-size: min(880px, 100%);\n\n    ${responsive.laptop} {\n      inline-size: min(440px, 100%);\n    }\n  `,\n  main: css`\n    display: grid;\n    flex: 1;\n    place-items: center;\n\n    padding-block: 24px 48px;\n    padding-inline: 16px;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n\n    block-size: 100%;\n    min-block-size: 0;\n\n    background: ${cssVar.colorBgLayout};\n  `,\n  split: css`\n    min-block-size: 520px;\n\n    ${responsive.laptop} {\n      min-block-size: 0;\n    }\n  `,\n  title: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeHeading3};\n    line-height: ${cssVar.lineHeightHeading3};\n  `,\n  tools: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    margin-inline-start: auto;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,mBAAmB;;MAEtC,WAAW,OAAO;;;;CAItB,aAAa,GAAG;;aAEL,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;;;;;;;;MAaL,WAAW,OAAO;;;;;CAKtB,WAAW,GAAG;;;;MAIV,WAAW,OAAO;;;;;CAKtB,OAAO,GAAG;;;;;;;;;CASV,QAAQ,GAAG;;;;;;;;;;CAUX,MAAM,GAAG;;;;CAIT,WAAW,GAAG;;;MAGV,WAAW,OAAO;;;;CAItB,MAAM,GAAG;;;;;;;;CAQT,MAAM,GAAG;;;;;;;kBAOO,OAAO,cAAc;;CAErC,OAAO,GAAG;;;MAGN,WAAW,OAAO;;;;CAItB,OAAO,GAAG;;iBAEK,OAAO,iBAAiB;mBACtB,OAAO,mBAAmB;;CAE3C,OAAO,GAAG;;;;;;AAMZ,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  aside: css`\n    position: relative;\n\n    flex: none;\n\n    box-sizing: border-box;\n    inline-size: 50%;\n    min-inline-size: 0;\n    max-inline-size: 50%;\n\n    background: ${cssVar.colorFillSecondary};\n\n    ${responsive.laptop} {\n      display: none;\n    }\n  `,\n  asideCopy: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 2;\n    inset-block-end: 64px;\n    inset-inline: 40px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  `,\n  asideKicker: css`\n    margin: 0;\n\n    font-size: ${cssVar.fontSize};\n    line-height: 1.4;\n    color: #fff;\n\n    opacity: 0.82;\n  `,\n  asideLine: css`\n    margin: 0;\n\n    font-size: ${cssVar.fontSizeHeading2};\n    font-weight: 600;\n    line-height: 1.25;\n    color: #fff;\n    letter-spacing: -0.02em;\n  `,\n  asidePanel: css`\n    position: absolute;\n    inset: 8px;\n\n    overflow: hidden;\n\n    border-radius: 20px;\n\n    background: linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%);\n  `,\n  asidePlate: css`\n    position: absolute;\n    inset: 0;\n    background: var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer});\n  `,\n  asideScrim: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset-block-end: 0;\n    inset-inline: 0;\n\n    block-size: 58%;\n\n    background: linear-gradient(to top, rgb(24 10 48 / 42%), transparent);\n  `,\n  backdrop: css`\n    pointer-events: none;\n    position: absolute;\n    z-index: 0;\n    inset: 0;\n  `,\n  description: css`\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  elevated: css`\n    &&&,\n    &&&:hover {\n      border-radius: 28px;\n    }\n  `,\n  footer: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n\n    a {\n      font-weight: 600;\n      color: ${cssVar.colorLink};\n      text-decoration: none;\n    }\n  `,\n  form: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: 24px;\n    justify-content: center;\n\n    box-sizing: border-box;\n    inline-size: 100%;\n    min-inline-size: 0;\n    padding-block: 40px;\n    padding-inline: 36px;\n\n    ${responsive.laptop} {\n      padding-block: 28px;\n      padding-inline: 24px;\n    }\n  `,\n  formSplit: css`\n    inline-size: 50%;\n    max-inline-size: 50%;\n\n    ${responsive.laptop} {\n      inline-size: 100%;\n      max-inline-size: 100%;\n    }\n  `,\n  frame: css`\n    overflow: hidden;\n    display: flex;\n    flex: none;\n\n    inline-size: 100%;\n    min-inline-size: 0;\n    border-radius: inherit;\n  `,\n  grid: css`\n    && {\n      background-color: color-mix(in srgb, ${cssVar.colorBgLayout}, ${cssVar.colorBgElevated} 70%);\n      background-image:\n        linear-gradient(\n          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,\n          transparent 1px\n        ),\n        linear-gradient(\n          90deg,\n          color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,\n          transparent 1px\n        );\n      background-position: -1px -1px;\n      background-size: 32px 32px;\n    }\n  `,\n  header: css`\n    position: relative;\n    z-index: 1;\n\n    display: flex;\n    flex: none;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    block-size: 56px;\n    padding-inline: 16px;\n  `,\n  lift: css`\n    position: relative;\n    display: flex;\n    inline-size: min(440px, 100%);\n  `,\n  liftSplit: css`\n    inline-size: min(880px, 100%);\n\n    ${responsive.laptop} {\n      inline-size: min(440px, 100%);\n    }\n  `,\n  logo: css`\n    display: flex;\n    margin-block-end: 8px;\n  `,\n  main: css`\n    position: relative;\n    z-index: 1;\n\n    display: grid;\n    flex: 1;\n    place-items: center;\n\n    padding-block: 24px 48px;\n    padding-inline: 16px;\n  `,\n  page: css`\n    position: relative;\n\n    overflow: auto;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    inline-size: 100%;\n    block-size: 100%;\n    min-block-size: 100dvh;\n\n    background: ${cssVar.colorBgLayout};\n  `,\n  split: css`\n    min-block-size: 520px;\n\n    ${responsive.laptop} {\n      min-block-size: 0;\n    }\n  `,\n  title: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeHeading3};\n    line-height: ${cssVar.lineHeightHeading3};\n  `,\n  titleNode: css`\n    display: flex;\n    min-inline-size: 0;\n  `,\n  tools: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    margin-inline-start: auto;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,mBAAmB;;MAEtC,WAAW,OAAO;;;;CAItB,WAAW,GAAG;;;;;;;;;;;;CAYd,aAAa,GAAG;;;iBAGD,OAAO,SAAS;;;;;;CAM/B,WAAW,GAAG;;;iBAGC,OAAO,iBAAiB;;;;;;CAMvC,YAAY,GAAG;;;;;;;;;;CAUf,YAAY,GAAG;;;+CAG8B,OAAO,iBAAiB;;CAErE,YAAY,GAAG;;;;;;;;;;;;CAYf,UAAU,GAAG;;;;;;CAMb,aAAa,GAAG;;aAEL,OAAO,mBAAmB;;CAErC,UAAU,GAAG;;;;;;CAMb,QAAQ,GAAG;;iBAEI,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;;eAIxB,OAAO,UAAU;;;;CAI9B,MAAM,GAAG;;;;;;;;;;;;;MAaL,WAAW,OAAO;;;;;CAKtB,WAAW,GAAG;;;;MAIV,WAAW,OAAO;;;;;CAKtB,OAAO,GAAG;;;;;;;;;CASV,MAAM,GAAG;;6CAEkC,OAAO,cAAc,IAAI,OAAO,gBAAgB;;;+BAG9D,OAAO,UAAU;;;;;+BAKjB,OAAO,UAAU;;;;;;;CAO9C,QAAQ,GAAG;;;;;;;;;;;;;CAaX,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;;MAGV,WAAW,OAAO;;;;CAItB,MAAM,GAAG;;;;CAIT,MAAM,GAAG;;;;;;;;;;;CAWT,MAAM,GAAG;;;;;;;;;;;;;kBAaO,OAAO,cAAc;;CAErC,OAAO,GAAG;;;MAGN,WAAW,OAAO;;;;CAItB,OAAO,GAAG;;iBAEK,OAAO,iBAAiB;mBACtB,OAAO,mBAAmB;;CAE3C,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;;;;AAMZ,EAAE"}

package/es/dashboard/AuthLayout/type.d.mts

@@ -1,16 +1,52 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/dashboard/AuthLayout/type.d.ts
+type AuthLayoutBackground = 'plain' | 'grid';
+type AuthLayoutVariant = 'default' | 'elevated';
 interface AuthLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** Optional panel beside the form. Hidden below the laptop breakpoint. */
+  /** Message shown above the form, such as an error `Alert`. */
+  alert?: ReactNode;
+  /** Optional panel beside the form. Hidden below the laptop breakpoint. See `AuthLayout.Aside`. */
   aside?: ReactNode;
+  /**
+   * Page backdrop. `grid` draws a 32px line grid over a mix of the layout and elevated colors.
+   * Any other node is rendered behind the content.
+   * @default 'plain'
+   */
+  background?: AuthLayoutBackground | ReactNode;
   /** Home mark rendered in the corner. Pass your own logo. */
   brand?: ReactNode;
+  /**
+   * Render the sign-in card. Set `false` to keep only the header, tools and backdrop,
+   * for status pages that center their own content.
+   * @default true
+   */
+  card?: boolean;
   children?: ReactNode;
   description?: ReactNode;
-  title: ReactNode;
+  /** Small secondary line under the form, such as support links. */
+  footer?: ReactNode;
+  /** Replace the form with a skeleton. Title and description stay. */
+  loading?: boolean;
+  /** Mark shown above the title. */
+  logo?: ReactNode;
+  /** A string renders as the page heading. Other nodes render as is. */
+  title?: ReactNode;
   /** Corner actions, such as a theme switch. */
   tools?: ReactNode;
+  /**
+   * Card shape. `elevated` uses a 28px radius for standalone sign-in pages.
+   * @default 'default'
+   */
+  variant?: AuthLayoutVariant;
+}
+interface AuthLayoutAsideProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Art behind the copy, such as `<Grainient />`. Defaults to a static gradient. */
+  background?: ReactNode;
+  /** Small line above the headline. */
+  kicker?: ReactNode;
+  /** Headline at the bottom of the panel. */
+  line?: ReactNode;
 }
 //#endregion
-export { AuthLayoutProps };
+export { AuthLayoutAsideProps, AuthLayoutBackground, AuthLayoutProps, AuthLayoutVariant };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/AuthTools/AuthLocaleSwitch.d.mts

@@ -0,0 +1,10 @@
+import { AuthLocaleSwitchProps } from "./type.mjs";
+//#region src/dashboard/AuthTools/AuthLocaleSwitch.d.ts
+/** Pill language select for auth corner tools. Controlled; pass your locale list. */
+declare function AuthLocaleSwitch({ 'aria-label': ariaLabel, className, onChange, options, style, value }: AuthLocaleSwitchProps): import("react").JSX.Element;
+declare namespace AuthLocaleSwitch {
+  var displayName: string;
+}
+//#endregion
+export { AuthLocaleSwitch as default };
+//# sourceMappingURL=AuthLocaleSwitch.d.mts.map

package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs

@@ -0,0 +1,32 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Select from "../../base-ui/Select/Select.mjs";
+import { styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { GlobeIcon } from "lucide-react";
+//#region src/dashboard/AuthTools/AuthLocaleSwitch.tsx
+/** Pill language select for auth corner tools. Controlled; pass your locale list. */
+function AuthLocaleSwitch({ "aria-label": ariaLabel = "Language", className, onChange, options, style, value }) {
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": ariaLabel,
+		className: cx(styles.locale, className),
+		options,
+		prefix: /* @__PURE__ */ jsx(Icon, {
+			className: styles.localeIcon,
+			icon: GlobeIcon
+		}),
+		size: "small",
+		style,
+		value,
+		variant: "outlined",
+		onChange: (next) => {
+			if (typeof next === "string") onChange?.(next);
+		}
+	});
+}
+AuthLocaleSwitch.displayName = "AuthLocaleSwitch";
+//#endregion
+export { AuthLocaleSwitch as default };
+
+//# sourceMappingURL=AuthLocaleSwitch.mjs.map

package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthLocaleSwitch.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/AuthLocaleSwitch.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { GlobeIcon } from 'lucide-react';\n\nimport Select from '@/base-ui/Select';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { AuthLocaleSwitchProps } from './type';\n\n/** Pill language select for auth corner tools. Controlled; pass your locale list. */\nfunction AuthLocaleSwitch({\n  'aria-label': ariaLabel = 'Language',\n  className,\n  onChange,\n  options,\n  style,\n  value,\n}: AuthLocaleSwitchProps) {\n  return (\n    <Select\n      aria-label={ariaLabel}\n      className={cx(styles.locale, className)}\n      options={options}\n      prefix={<Icon className={styles.localeIcon} icon={GlobeIcon} />}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      onChange={(next: unknown) => {\n        if (typeof next === 'string') onChange?.(next);\n      }}\n    />\n  );\n}\n\nAuthLocaleSwitch.displayName = 'AuthLocaleSwitch';\n\nexport default AuthLocaleSwitch;\n"],"mappings":";;;;;;;;;AAYA,SAAS,iBAAiB,EACxB,cAAc,YAAY,YAC1B,WACA,UACA,SACA,OACA,SACwB;CACxB,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GAAG,OAAO,QAAQ,SAAS;EAC7B;EACT,QAAQ,oBAAC,MAAD;GAAM,WAAW,OAAO;GAAY,MAAM;EAAY,CAAA;EAC9D,MAAK;EACE;EACA;EACP,SAAQ;EACR,WAAW,SAAkB;GAC3B,IAAI,OAAO,SAAS,UAAU,WAAW,IAAI;EAC/C;CACD,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/es/dashboard/AuthTools/AuthThemeSwitch.d.mts

@@ -0,0 +1,10 @@
+import { AuthThemeSwitchProps } from "./type.mjs";
+//#region src/dashboard/AuthTools/AuthThemeSwitch.d.ts
+/** Compact icon-only theme picker for auth corner tools. Controlled; wire it to your store. */
+declare function AuthThemeSwitch({ className, labels, onChange, style, value }: AuthThemeSwitchProps): import("react").JSX.Element;
+declare namespace AuthThemeSwitch {
+  var displayName: string;
+}
+//#endregion
+export { AuthThemeSwitch as default };
+//# sourceMappingURL=AuthThemeSwitch.d.mts.map

package/es/dashboard/AuthTools/AuthThemeSwitch.mjs

@@ -0,0 +1,59 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Segmented from "../../base-ui/Segmented/Segmented.mjs";
+import { styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Monitor, Moon, Sun } from "lucide-react";
+//#region src/dashboard/AuthTools/AuthThemeSwitch.tsx
+const OPTIONS = [
+	{
+		icon: Moon,
+		value: "dark"
+	},
+	{
+		icon: Monitor,
+		value: "auto"
+	},
+	{
+		icon: Sun,
+		value: "light"
+	}
+];
+const DEFAULT_LABELS = {
+	auto: "System",
+	dark: "Dark",
+	light: "Light"
+};
+/** Compact icon-only theme picker for auth corner tools. Controlled; wire it to your store. */
+function AuthThemeSwitch({ className, labels, onChange, style, value = "auto" }) {
+	const names = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	return /* @__PURE__ */ jsx(Segmented, {
+		className: cx(styles.theme, className),
+		size: "small",
+		style,
+		value,
+		variant: "outlined",
+		classNames: {
+			indicator: styles.themeIndicator,
+			item: styles.themeItem,
+			itemIcon: styles.themeIcon,
+			itemLabel: styles.themeLabel
+		},
+		options: OPTIONS.map((option) => ({
+			icon: /* @__PURE__ */ jsx(Icon, { icon: option.icon }),
+			label: names[option.value],
+			title: names[option.value],
+			value: option.value
+		})),
+		onChange: (next) => onChange?.(next)
+	});
+}
+AuthThemeSwitch.displayName = "AuthThemeSwitch";
+//#endregion
+export { AuthThemeSwitch as default };
+
+//# sourceMappingURL=AuthThemeSwitch.mjs.map

package/es/dashboard/AuthTools/AuthThemeSwitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthThemeSwitch.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/AuthThemeSwitch.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport Segmented from '@/base-ui/Segmented';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { AuthThemeMode, AuthThemeSwitchProps } from './type';\n\nconst OPTIONS = [\n  { icon: Moon, value: 'dark' },\n  { icon: Monitor, value: 'auto' },\n  { icon: Sun, value: 'light' },\n] as const;\n\nconst DEFAULT_LABELS: Record<AuthThemeMode, string> = {\n  auto: 'System',\n  dark: 'Dark',\n  light: 'Light',\n};\n\n/** Compact icon-only theme picker for auth corner tools. Controlled; wire it to your store. */\nfunction AuthThemeSwitch({\n  className,\n  labels,\n  onChange,\n  style,\n  value = 'auto',\n}: AuthThemeSwitchProps) {\n  const names = { ...DEFAULT_LABELS, ...labels };\n  return (\n    <Segmented<AuthThemeMode>\n      className={cx(styles.theme, className)}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      classNames={{\n        indicator: styles.themeIndicator,\n        item: styles.themeItem,\n        itemIcon: styles.themeIcon,\n        itemLabel: styles.themeLabel,\n      }}\n      options={OPTIONS.map((option) => ({\n        icon: <Icon icon={option.icon} />,\n        label: names[option.value],\n        title: names[option.value],\n        value: option.value,\n      }))}\n      onChange={(next) => onChange?.(next)}\n    />\n  );\n}\n\nAuthThemeSwitch.displayName = 'AuthThemeSwitch';\n\nexport default AuthThemeSwitch;\n"],"mappings":";;;;;;;;AAWA,MAAM,UAAU;CACd;EAAE,MAAM;EAAM,OAAO;CAAO;CAC5B;EAAE,MAAM;EAAS,OAAO;CAAO;CAC/B;EAAE,MAAM;EAAK,OAAO;CAAQ;AAC9B;AAEA,MAAM,iBAAgD;CACpD,MAAM;CACN,MAAM;CACN,OAAO;AACT;;AAGA,SAAS,gBAAgB,EACvB,WACA,QACA,UACA,OACA,QAAQ,UACe;CACvB,MAAM,QAAQ;EAAE,GAAG;EAAgB,GAAG;CAAO;CAC7C,OACE,oBAAC,WAAD;EACE,WAAW,GAAG,OAAO,OAAO,SAAS;EACrC,MAAK;EACE;EACA;EACP,SAAQ;EACR,YAAY;GACV,WAAW,OAAO;GAClB,MAAM,OAAO;GACb,UAAU,OAAO;GACjB,WAAW,OAAO;EACpB;EACA,SAAS,QAAQ,KAAK,YAAY;GAChC,MAAM,oBAAC,MAAD,EAAM,MAAM,OAAO,KAAO,CAAA;GAChC,OAAO,MAAM,OAAO;GACpB,OAAO,MAAM,OAAO;GACpB,OAAO,OAAO;EAChB,EAAE;EACF,WAAW,SAAS,WAAW,IAAI;CACpC,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

package/es/dashboard/AuthTools/index.d.mts

@@ -0,0 +1,4 @@
+import { AuthLocaleOption, AuthLocaleSwitchProps, AuthThemeMode, AuthThemeSwitchProps } from "./type.mjs";
+import AuthLocaleSwitch from "./AuthLocaleSwitch.mjs";
+import AuthThemeSwitch from "./AuthThemeSwitch.mjs";
+export { type AuthLocaleOption, AuthLocaleSwitch, type AuthLocaleSwitchProps, type AuthThemeMode, AuthThemeSwitch, type AuthThemeSwitchProps };