@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/dashboard/AuthLayout/Aside.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#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, style, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		...styleProps(styles.asidePlate, className, style),
+		children: /* @__PURE__ */ jsxs("div", {
+			...stylex.props(styles.asidePanel),
+			children: [background, kicker || line ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { ...stylex.props(styles.asideScrim) }), /* @__PURE__ */ jsxs("div", {
+				...stylex.props(styles.asideCopy),
+				children: [kicker ? /* @__PURE__ */ jsx("p", {
+					...stylex.props(styles.asideKicker),
+					children: kicker
+				}) : null, line ? /* @__PURE__ */ jsx("p", {
+					...stylex.props(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 * as stylex from '@stylexjs/stylex';\n\nimport { styleProps } from '@/styles/stylex/props';\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({\n  background,\n  className,\n  kicker,\n  line,\n  style,\n  ...rest\n}: AuthLayoutAsideProps) {\n  return (\n    <div {...rest} {...styleProps(styles.asidePlate, className, style)}>\n      <div {...stylex.props(styles.asidePanel)}>\n        {background}\n        {kicker || line ? (\n          <>\n            <div {...stylex.props(styles.asideScrim)} />\n            <div {...stylex.props(styles.asideCopy)}>\n              {kicker ? <p {...stylex.props(styles.asideKicker)}>{kicker}</p> : null}\n              {line ? <p {...stylex.props(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,EACvB,YACA,WACA,QACA,MACA,OACA,GAAG,QACoB;CACvB,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,GAAI,WAAW,OAAO,YAAY,WAAW,KAAK;EACpE,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,UAAU;GAAvC,UAAA,CACG,YACA,UAAU,OAAO,qBAAA,UAAA,EAAA,UAAA,CACd,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,UAAU,EAAI,CAAA,GAC3C,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,SAAS;IAAtC,UAAA,CACG,SAAS,oBAAC,KAAD;KAAG,GAAI,OAAO,MAAM,OAAO,WAAW;KAAI,UAAA;IAAU,CAAA,IAAI,MACjE,OAAO,oBAAC,KAAD;KAAG,GAAI,OAAO,MAAM,OAAO,SAAS;KAAI,UAAA;IAAQ,CAAA,IAAI,IACzD;GACL,CAAA,CAAA,EAAA,CAAA,IAAI,IACL;;CACF,CAAA;AACT;AACA,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, style, title, tools, ...rest }: AuthLayoutProps): import("react").JSX.Element;
+declare function AuthLayout({ alert, aside, background, brand, card, children, className, description, footer, loading, logo, style, 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

@@ -2,9 +2,12 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import Text from "../../Text/Text.mjs";
-import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import Skeleton from "../../Skeleton/index.mjs";
+import { styles } from "./style.mjs";
+import AuthLayoutAside from "./Aside.mjs";
+import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/AuthLayout/AuthLayout.tsx
@@ -17,48 +20,105 @@ const descriptionStyle = {
 	color: cssVar.colorTextSecondary,
 	lineHeight: 1.6
 };
-function AuthLayout({ aside, brand, children, className, description, style, 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, style, title, tools, variant = "default", ...rest }) {
+	const { isDarkMode } = useThemeMode();
 	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",
+		style: titleStyle,
+		weight: "bold",
+		children: title
+	}) : /* @__PURE__ */ jsx("div", {
+		...stylex.props(styles.titleNode),
+		children: title
+	});
+	const intro = logo || heading || description ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+		gap: 8,
+		children: [
+			logo ? /* @__PURE__ */ jsx("div", {
+				...stylex.props(styles.logo),
+				children: logo
+			}) : null,
+			heading,
+			description ? /* @__PURE__ */ jsx(Text, {
+				style: descriptionStyle,
+				type: "secondary",
+				children: description
+			}) : null
+		]
+	}) : null;
 	return /* @__PURE__ */ jsxs("div", {
-		...styleProps(styles$1.page, className, style),
+		"data-auth-layout": "",
 		...rest,
-		children: [/* @__PURE__ */ jsxs("header", {
-			...stylex.props(styles$1.header),
-			children: [brand, tools ? /* @__PURE__ */ jsx("div", {
-				...stylex.props(styles$1.tools),
-				children: tools
-			}) : null]
-		}), /* @__PURE__ */ jsx("main", {
-			...stylex.props(styles$1.main),
-			children: /* @__PURE__ */ jsx("div", {
-				...stylex.props(styles$1.lift, split && styles$1.liftSplit, styles.card),
-				children: /* @__PURE__ */ jsxs("div", {
-					...stylex.props(styles$1.frame, split && styles$1.split),
-					children: [/* @__PURE__ */ jsxs("div", {
-						...stylex.props(styles$1.form, split && styles$1.formSplit),
-						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-							gap: 8,
-							children: [/* @__PURE__ */ jsx(Text, {
-								as: "h1",
-								style: titleStyle,
-								weight: "bold",
-								children: title
-							}), description ? /* @__PURE__ */ jsx(Text, {
-								style: descriptionStyle,
-								type: "secondary",
-								children: description
-							}) : null]
-						}), children]
-					}), aside ? /* @__PURE__ */ jsx("div", {
-						...stylex.props(styles$1.aside),
-						children: aside
-					}) : null]
-				})
+		...styleProps([
+			styles.page,
+			background === "grid" && styles.grid,
+			background === "grid" && isDarkMode && styles.gridDark
+		], className, style),
+		children: [
+			art ? /* @__PURE__ */ jsx("div", {
+				...stylex.props(styles.backdrop),
+				children: art
+			}) : null,
+			/* @__PURE__ */ jsxs("header", {
+				...stylex.props(styles.header),
+				children: [brand, tools ? /* @__PURE__ */ jsx("div", {
+					...stylex.props(styles.tools),
+					children: tools
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("main", {
+				...stylex.props(styles.main),
+				children: card ? /* @__PURE__ */ jsx("div", {
+					"data-auth-card": "",
+					...stylex.props(styles.lift, split && styles.liftSplit, variant === "elevated" && styles.elevated),
+					children: /* @__PURE__ */ jsxs("div", {
+						...stylex.props(styles.frame, split && styles.split),
+						children: [/* @__PURE__ */ jsxs("div", {
+							...stylex.props(styles.form, split && styles.formSplit),
+							children: [
+								intro,
+								alert,
+								loading ? /* @__PURE__ */ jsx(FormSkeleton, {}) : children,
+								footer ? /* @__PURE__ */ jsx("div", {
+									...styleProps(styles.footer, "lobe-auth-layout-footer"),
+									children: footer
+								}) : null
+							]
+						}), aside ? /* @__PURE__ */ jsx("div", {
+							...stylex.props(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 * as stylex from '@stylexjs/stylex';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst titleStyle = {\n  fontSize: cssVar.fontSizeHeading3,\n  lineHeight: cssVar.lineHeightHeading3,\n  margin: 0,\n};\nconst descriptionStyle = { color: cssVar.colorTextSecondary, lineHeight: 1.6 };\n\nfunction AuthLayout({\n  aside,\n  brand,\n  children,\n  className,\n  description,\n  style,\n  title,\n  tools,\n  ...rest\n}: AuthLayoutProps) {\n  const split = Boolean(aside);\n  return (\n    <div {...styleProps(styles.page, className, style)} {...rest}>\n      <header {...stylex.props(styles.header)}>\n        {brand}\n        {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n      </header>\n      <main {...stylex.props(styles.main)}>\n        <div {...stylex.props(styles.lift, split && styles.liftSplit, surfaceStyles.card)}>\n          <div {...stylex.props(styles.frame, split && styles.split)}>\n            <div {...stylex.props(styles.form, split && styles.formSplit)}>\n              <Flexbox gap={8}>\n                <Text as=\"h1\" style={titleStyle} weight=\"bold\">\n                  {title}\n                </Text>\n                {description ? (\n                  <Text style={descriptionStyle} type=\"secondary\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Flexbox>\n              {children}\n            </div>\n            {aside ? <div {...stylex.props(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":";;;;;;;;;;AAUA,MAAM,aAAa;CACjB,UAAU,OAAO;CACjB,YAAY,OAAO;CACnB,QAAQ;AACV;AACA,MAAM,mBAAmB;CACvB,OAAO,OAAO;CACd,YAAY;AACd;AACA,SAAS,WAAW,EAClB,OACA,OACA,UACA,WACA,aACA,OACA,OACA,OACA,GAAG,QACe;CAClB,MAAM,QAAQ,QAAQ,KAAK;CAC3B,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAWA,SAAO,MAAM,WAAW,KAAK;EAAG,GAAI;EAAxD,UAAA,CACH,qBAAC,UAAD;GAAQ,GAAI,OAAO,MAAMA,SAAO,MAAM;GAAtC,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAMA,SAAO,KAAK;IAAI,UAAA;GAAW,CAAA,IAAI,IACxD;EACR,CAAA,GAAA,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAMA,SAAO,IAAI;GAChC,UAAA,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAMA,SAAO,MAAM,SAASA,SAAO,WAAWC,OAAc,IAAI;IAC9E,UAAA,qBAAC,OAAD;KAAK,GAAI,OAAO,MAAMD,SAAO,OAAO,SAASA,SAAO,KAAK;KAAzD,UAAA,CACE,qBAAC,OAAD;MAAK,GAAI,OAAO,MAAMA,SAAO,MAAM,SAASA,SAAO,SAAS;MAA5D,UAAA,CACE,qBAACE,mBAAD;OAAS,KAAK;OAAd,UAAA,CACE,oBAAC,MAAD;QAAM,IAAG;QAAK,OAAO;QAAY,QAAO;QACrC,UAAA;OACG,CAAA,GACL,cAAc,oBAAC,MAAD;QAAM,OAAO;QAAkB,MAAK;QAC9C,UAAA;OACG,CAAA,IAAI,IACL;MACR,CAAA,GAAA,QACE;KACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;MAAK,GAAI,OAAO,MAAMF,SAAO,KAAK;MAAI,UAAA;KAAW,CAAA,IAAI,IAC3D;;GACF,CAAA;EACD,CAAA,CACH;;AACT;AACA,WAAW,cAAc"}
+{"version":3,"file":"AuthLayout.mjs","names":["Flexbox","Aside"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { isValidElement } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Skeleton from '@/Skeleton';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Text from '@/Text';\n\nimport Aside from './Aside';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst titleStyle = {\n  fontSize: cssVar.fontSizeHeading3,\n  lineHeight: cssVar.lineHeightHeading3,\n  margin: 0,\n};\nconst descriptionStyle = { color: cssVar.colorTextSecondary, lineHeight: 1.6 };\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  style,\n  title,\n  tools,\n  variant = 'default',\n  ...rest\n}: AuthLayoutProps) {\n  const { isDarkMode } = useThemeMode();\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\" style={titleStyle} weight=\"bold\">\n        {title}\n      </Text>\n    ) : (\n      <div {...stylex.props(styles.titleNode)}>{title}</div>\n    );\n  const intro =\n    logo || heading || description ? (\n      <Flexbox gap={8}>\n        {logo ? <div {...stylex.props(styles.logo)}>{logo}</div> : null}\n        {heading}\n        {description ? (\n          <Text style={descriptionStyle} type=\"secondary\">\n            {description}\n          </Text>\n        ) : null}\n      </Flexbox>\n    ) : null;\n\n  return (\n    <div\n      data-auth-layout=\"\"\n      {...rest}\n      {...styleProps(\n        [\n          styles.page,\n          background === 'grid' && styles.grid,\n          background === 'grid' && isDarkMode && styles.gridDark,\n        ],\n        className,\n        style,\n      )}\n    >\n      {art ? <div {...stylex.props(styles.backdrop)}>{art}</div> : null}\n      <header {...stylex.props(styles.header)}>\n        {brand}\n        {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n      </header>\n      <main {...stylex.props(styles.main)}>\n        {card ? (\n          <div\n            data-auth-card=\"\"\n            {...stylex.props(\n              styles.lift,\n              split && styles.liftSplit,\n              variant === 'elevated' && styles.elevated,\n            )}\n          >\n            <div {...stylex.props(styles.frame, split && styles.split)}>\n              <div {...stylex.props(styles.form, split && styles.formSplit)}>\n                {intro}\n                {alert}\n                {loading ? <FormSkeleton /> : children}\n                {footer ? (\n                  <div {...styleProps(styles.footer, 'lobe-auth-layout-footer')}>{footer}</div>\n                ) : null}\n              </div>\n              {aside ? <div {...stylex.props(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,aAAa;CACjB,UAAU,OAAO;CACjB,YAAY,OAAO;CACnB,QAAQ;AACV;AACA,MAAM,mBAAmB;CACvB,OAAO,OAAO;CACd,YAAY;AACd;AACA,MAAM,qBAAqB,qBAACA,mBAAD;CAAS,eAAA;CAAY,KAAK;CAA1B,UAAA;EACvB,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;;AACX,SAAS,WAAW,EAClB,OACA,OACA,aAAa,SACb,OACA,OAAO,MACP,UACA,WACA,aACA,QACA,SACA,MACA,OACA,OACA,OACA,UAAU,WACV,GAAG,QACe;CAClB,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,MAAM,eAAe,UAAU,IAAI,aAAa;CACtD,MAAM,UAAU,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,UAAU,WAAW,oBAAC,MAAD;EAAM,IAAG;EAAK,OAAO;EAAY,QAAO;EAC5H,UAAA;CACG,CAAA,IAAI,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,SAAS;EAAI,UAAA;CAAW,CAAA;CACnE,MAAM,QAAQ,QAAQ,WAAW,cAAc,qBAACA,mBAAD;EAAS,KAAK;EAAd,UAAA;GACxC,OAAO,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,IAAI;IAAI,UAAA;GAAU,CAAA,IAAI;GAC1D;GACA,cAAc,oBAAC,MAAD;IAAM,OAAO;IAAkB,MAAK;IAC9C,UAAA;GACG,CAAA,IAAI;EACL;CAAI,CAAA,IAAA;CACjB,OAAO,qBAAC,OAAD;EAAK,oBAAiB;EAAG,GAAI;EAAM,GAAI,WAAW;GAAC,OAAO;GAAM,eAAe,UAAU,OAAO;GAAM,eAAe,UAAU,cAAc,OAAO;EAAQ,GAAG,WAAW,KAAK;EAA/K,UAAA;GACF,MAAM,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;IAAI,UAAA;GAAS,CAAA,IAAI;GAC7D,qBAAC,UAAD;IAAQ,GAAI,OAAO,MAAM,OAAO,MAAM;IAAtC,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,KAAK;KAAI,UAAA;IAAW,CAAA,IAAI,IACxD;;GACR,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,IAAI;IAC/B,UAAA,OAAO,oBAAC,OAAD;KAAK,kBAAe;KAAG,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,WAAW,YAAY,cAAc,OAAO,QAAQ;KAC7H,UAAA,qBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,OAAO,OAAO,SAAS,OAAO,KAAK;MAAzD,UAAA,CACE,qBAAC,OAAD;OAAK,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,SAAS;OAA5D,UAAA;QACG;QACA;QACA,UAAU,oBAAC,cAAD,CAAe,CAAA,IAAI;QAC7B,SAAS,oBAAC,OAAD;SAAK,GAAI,WAAW,OAAO,QAAQ,yBAAyB;SAAI,UAAA;QAAY,CAAA,IAAI;OACvF;MACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;OAAK,GAAI,OAAO,MAAM,OAAO,KAAK;OAAI,UAAA;MAAW,CAAA,IAAI,IAC3D;;IACF,CAAA,IAAI;GACP,CAAA;EACH;;AACT;AACA,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

@@ -11,6 +11,76 @@ const styles = {
 		kVAEAm: "lb1n2onr6",
 		$$css: true
 	},
+	asideCopy: {
+		kOIVth: "lb167g77z",
+		kkqhue: "lb1v2lpi6",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		krVfgx: "lby75b87",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lbhtitgo",
+		$$css: true
+	},
+	asideKicker: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lbfungia",
+		kGuDYH: "lb1pzwcx8",
+		kLWn49: "lb37zpob",
+		kSiTet: "lb19s9pn4",
+		$$css: true
+	},
+	asideLine: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lbfungia",
+		kGuDYH: "lb1j9mzhl",
+		k63SB2: "lb1s688f",
+		kb6lSQ: "lb72az59",
+		kLWn49: "lb132q4wb",
+		$$css: true
+	},
+	asidePanel: {
+		kpwlN0: "lbk92lsc",
+		kaIpWk: "lb1m3ak92",
+		kVQacm: "lbb3r6kr",
+		kKwaWg: "lb18434q4",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	asidePlate: {
+		kpwlN0: "lb10a8y8t",
+		kWkggS: "lb6yijhg",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	asideScrim: {
+		kkqhue: "lb17y0mx6",
+		kKwaWg: "lb6ql2kj",
+		kZKoxP: "lbfeo3ze",
+		krVfgx: "lb1ey2m1c",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1vjfegm",
+		$$css: true
+	},
+	backdrop: {
+		kpwlN0: "lb10a8y8t",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1ja2u2z",
+		$$css: true
+	},
+	elevated: {
+		kaIpWk: "lb1jvnzes",
+		$$css: true
+	},
+	footer: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lbxobqjj",
+		kLWn49: "lb1dbl2gt",
+		$$css: true
+	},
 	form: {
 		kUk6DE: "lb1okw0bk",
 		kOIVth: "lb1665zp3",
@@ -38,6 +108,18 @@ const styles = {
 		k7Eaqz: "lbeuugli",
 		$$css: true
 	},
+	grid: {
+		"--lobe-auth-grid-line": "lb13b9b4k",
+		k1YJky: "lbkuq44j",
+		kWkggS: "lb41ilrr",
+		kKwaWg: "lb3x8p3i",
+		kgSjnq: "lblpqoug",
+		$$css: true
+	},
+	gridDark: {
+		"--lobe-auth-grid-line": "lbp4pl1z",
+		$$css: true
+	},
 	header: {
 		kUk6DE: "lb1okw0bk",
 		kOIVth: "lb1v2ro7d",
@@ -46,17 +128,31 @@ const styles = {
 		kZKoxP: "lbnnlda6",
 		k1xSpc: "lb78zum5",
 		kjj79g: "lb1qughib",
+		kVAEAm: "lb1n2onr6",
+		kY2c9j: "lb1vjfegm",
 		$$css: true
 	},
 	lift: {
+		kVAM5u: "lbqnr5ac",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lb6yijhg",
+		kGVxlE: "lb3b5rli",
 		k1xSpc: "lb78zum5",
 		kzqmXN: "lb1nyppsm",
+		kVAEAm: "lb1n2onr6",
 		$$css: true
 	},
 	liftSplit: {
 		kzqmXN: "lbj135po lb1lqujif",
 		$$css: true
 	},
+	logo: {
+		k1xSpc: "lb78zum5",
+		k1K539: "lb1e56ztr",
+		$$css: true
+	},
 	main: {
 		kUk6DE: "lb98rzlu",
 		kg3NbH: "lb1hr3lfm",
@@ -64,20 +160,32 @@ const styles = {
 		k1xSpc: "lbrvj5dj",
 		kGO01o: "lb1sgudl8",
 		kLKAdn: "lb1p5oq8j",
+		kVAEAm: "lb1n2onr6",
+		kY2c9j: "lb1vjfegm",
 		$$css: true
 	},
 	page: {
+		kUk6DE: "lb98rzlu",
+		kVQacm: "lbysyzu8",
 		kWkggS: "lb41ilrr",
 		kZKoxP: "lb5yr21d",
+		kB7OPa: "lb9f619",
 		k1xSpc: "lb78zum5",
 		kXwgrk: "lbdt5ytf",
-		kAzted: "lb2lwn1j",
+		kzqmXN: "lbh8yej3",
+		kAzted: "lb1ov3xa9",
+		kVAEAm: "lb1n2onr6",
 		$$css: true
 	},
 	split: {
 		kAzted: "lb137vrcb lb1qlpcz1",
 		$$css: true
 	},
+	titleNode: {
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
 	tools: {
 		kOIVth: "lb17d4w8g",
 		kGNEyG: "lb6s0dn4",

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  aside: {\n    flex: 'none',\n    backgroundColor: cssVar.colorFillSecondary,\n    boxSizing: 'border-box',\n    display: { default: null, [media.laptop]: 'none' },\n    inlineSize: '50%',\n    maxInlineSize: '50%',\n    minInlineSize: 0,\n    position: 'relative',\n  },\n  form: {\n    flex: 'none',\n    gap: 24,\n    paddingBlock: { default: 40, [media.laptop]: 28 },\n    paddingInline: { default: 36, [media.laptop]: 24 },\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    justifyContent: 'center',\n    minInlineSize: 0,\n  },\n  formSplit: {\n    inlineSize: { default: '50%', [media.laptop]: '100%' },\n    maxInlineSize: { default: '50%', [media.laptop]: '100%' },\n  },\n  frame: {\n    borderRadius: 'inherit',\n    flex: 'none',\n    overflow: 'hidden',\n    display: 'flex',\n    inlineSize: '100%',\n    minInlineSize: 0,\n  },\n  header: {\n    flex: 'none',\n    gap: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    blockSize: 56,\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  lift: {\n    display: 'flex',\n    inlineSize: 'min(440px, 100%)',\n  },\n  liftSplit: {\n    inlineSize: { default: 'min(880px, 100%)', [media.laptop]: 'min(440px, 100%)' },\n  },\n  main: {\n    flex: '1',\n    paddingInline: 16,\n    placeItems: 'center',\n    display: 'grid',\n    paddingBlockEnd: '48px',\n    paddingBlockStart: '24px',\n  },\n  page: {\n    backgroundColor: cssVar.colorBgLayout,\n    blockSize: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  split: {\n    minBlockSize: { default: 520, [media.laptop]: 0 },\n  },\n  tools: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineStart: 'auto',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  aside: {\n    flex: 'none',\n    backgroundColor: cssVar.colorFillSecondary,\n    boxSizing: 'border-box',\n    display: { default: null, [media.laptop]: 'none' },\n    inlineSize: '50%',\n    maxInlineSize: '50%',\n    minInlineSize: 0,\n    position: 'relative',\n  },\n  asideCopy: {\n    gap: 8,\n    insetInline: 40,\n    display: 'flex',\n    flexDirection: 'column',\n    insetBlockEnd: 64,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 2,\n  },\n  asideKicker: {\n    margin: 0,\n    color: '#fff',\n    fontSize: cssVar.fontSize,\n    lineHeight: 1.4,\n    opacity: 0.82,\n  },\n  asideLine: {\n    margin: 0,\n    color: '#fff',\n    fontSize: cssVar.fontSizeHeading2,\n    fontWeight: 600,\n    letterSpacing: '-0.02em',\n    lineHeight: 1.25,\n  },\n  asidePanel: {\n    inset: 8,\n    borderRadius: 20,\n    overflow: 'hidden',\n    backgroundImage: 'linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%)',\n    position: 'absolute',\n  },\n  asidePlate: {\n    inset: 0,\n    backgroundColor: cssVar.colorBgContainer,\n    position: 'absolute',\n  },\n  asideScrim: {\n    insetInline: 0,\n    backgroundImage: 'linear-gradient(to top, rgb(24 10 48 / 42%), transparent)',\n    blockSize: '58%',\n    insetBlockEnd: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n  },\n  backdrop: {\n    inset: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 0,\n  },\n  elevated: {\n    borderRadius: 28,\n  },\n  footer: {\n    margin: 0,\n    color: cssVar.colorTextSecondary,\n    fontSize: cssVar.fontSizeSM,\n    lineHeight: 1.6,\n  },\n  form: {\n    flex: 'none',\n    gap: 24,\n    paddingBlock: { default: 40, [media.laptop]: 28 },\n    paddingInline: { default: 36, [media.laptop]: 24 },\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    justifyContent: 'center',\n    minInlineSize: 0,\n  },\n  formSplit: {\n    inlineSize: { default: '50%', [media.laptop]: '100%' },\n    maxInlineSize: { default: '50%', [media.laptop]: '100%' },\n  },\n  frame: {\n    borderRadius: 'inherit',\n    flex: 'none',\n    overflow: 'hidden',\n    display: 'flex',\n    inlineSize: '100%',\n    minInlineSize: 0,\n  },\n  grid: {\n    '--lobe-auth-grid-line': `color-mix(in srgb, ${cssVar.colorText} 5%, transparent)`,\n    'backgroundPosition': '-1px -1px',\n    'backgroundColor': cssVar.colorBgLayout,\n    'backgroundImage':\n      'linear-gradient(var(--lobe-auth-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--lobe-auth-grid-line) 1px, transparent 1px)',\n    'backgroundSize': '32px 32px',\n  },\n  gridDark: {\n    '--lobe-auth-grid-line': cssVar.colorBorderSecondary,\n  },\n  header: {\n    flex: 'none',\n    gap: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    blockSize: 56,\n    display: 'flex',\n    justifyContent: 'space-between',\n    position: 'relative',\n    zIndex: 1,\n  },\n  lift: {\n    borderColor: cssVar.colorBorder,\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: 'rgb(0 0 0 / 4%) 0 1px 2px 0',\n    display: 'flex',\n    inlineSize: 'min(440px, 100%)',\n    position: 'relative',\n  },\n  liftSplit: {\n    inlineSize: { default: 'min(880px, 100%)', [media.laptop]: 'min(440px, 100%)' },\n  },\n  logo: {\n    display: 'flex',\n    marginBlockEnd: 8,\n  },\n  main: {\n    flex: '1',\n    paddingInline: 16,\n    placeItems: 'center',\n    display: 'grid',\n    paddingBlockEnd: '48px',\n    paddingBlockStart: '24px',\n    position: 'relative',\n    zIndex: 1,\n  },\n  page: {\n    flex: '1',\n    overflow: 'auto',\n    backgroundColor: cssVar.colorBgLayout,\n    blockSize: '100%',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    minBlockSize: '100dvh',\n    position: 'relative',\n  },\n  split: {\n    minBlockSize: { default: 520, [media.laptop]: 0 },\n  },\n  titleNode: {\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  tools: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineStart: 'auto',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,yBAAyB;EACzB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,yBAAyB;EACzB,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,15 +1,51 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/dashboard/AuthLayout/type.d.ts
+export type AuthLayoutBackground = 'plain' | 'grid';
+export type AuthLayoutVariant = 'default' | 'elevated';
 export 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;
+}
+export 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
 //# 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,33 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Select from "../../Select/Select.mjs";
+import { styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
+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: clsx$1("lobe-auth-locale-switch", className),
+		options,
+		prefix: /* @__PURE__ */ jsx(Icon, {
+			icon: GlobeIcon,
+			...stylex.props(styles.localeIcon)
+		}),
+		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":["clsx"],"sources":["../../../src/dashboard/AuthTools/AuthLocaleSwitch.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { GlobeIcon } from 'lucide-react';\n\nimport Icon from '@/Icon';\nimport Select from '@/Select';\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={clsx('lobe-auth-locale-switch', className)}\n      options={options}\n      prefix={<Icon icon={GlobeIcon} {...stylex.props(styles.localeIcon)} />}\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,OAAO,oBAAC,QAAD;EAAQ,cAAY;EAAW,WAAWA,OAAK,2BAA2B,SAAS;EAAY;EAAS,QAAQ,oBAAC,MAAD;GAAM,MAAM;GAAW,GAAI,OAAO,MAAM,OAAO,UAAU;EAAI,CAAA;EAAG,MAAK;EAAe;EAAc;EAAO,SAAQ;EAAW,WAAW,SAAkB;GAC9Q,IAAI,OAAO,SAAS,UAAU,WAAW,IAAI;EAC/C;CAAI,CAAA;AACN;AACA,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 "../../Segmented/Segmented.mjs";
+import { styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
+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: clsx$1("lobe-auth-theme-switch", className),
+		size: "small",
+		style,
+		value,
+		variant: "outlined",
+		classNames: {
+			item: "lobe-auth-theme-switch-item",
+			itemIcon: stylex.props(styles.themeIcon).className,
+			itemLabel: stylex.props(styles.themeLabel).className
+		},
+		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":["clsx"],"sources":["../../../src/dashboard/AuthTools/AuthThemeSwitch.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Monitor, Moon, Sun } from 'lucide-react';\n\nimport Icon from '@/Icon';\nimport Segmented from '@/Segmented';\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={clsx('lobe-auth-theme-switch', className)}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      classNames={{\n        item: 'lobe-auth-theme-switch-item',\n        itemIcon: stylex.props(styles.themeIcon).className,\n        itemLabel: stylex.props(styles.themeLabel).className,\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":";;;;;;;;;AAUA,MAAM,UAAU;CAAC;EACf,MAAM;EACN,OAAO;CACT;CAAG;EACD,MAAM;EACN,OAAO;CACT;CAAG;EACD,MAAM;EACN,OAAO;CACT;AAAC;AACD,MAAM,iBAAgD;CACpD,MAAM;CACN,MAAM;CACN,OAAO;AACT;;AAGA,SAAS,gBAAgB,EACvB,WACA,QACA,UACA,OACA,QAAQ,UACe;CACvB,MAAM,QAAQ;EACZ,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,WAAD;EAA0B,WAAWA,OAAK,0BAA0B,SAAS;EAAG,MAAK;EAAe;EAAc;EAAO,SAAQ;EAAW,YAAY;GAC7J,MAAM;GACN,UAAU,OAAO,MAAM,OAAO,SAAS,CAAC,CAAC;GACzC,WAAW,OAAO,MAAM,OAAO,UAAU,CAAC,CAAC;EAC7C;EAAG,SAAS,QAAQ,KAAI,YAAW;GACjC,MAAM,oBAAC,MAAD,EAAM,MAAM,OAAO,KAAO,CAAA;GAChC,OAAO,MAAM,OAAO;GACpB,OAAO,MAAM,OAAO;GACpB,OAAO,OAAO;EAChB,EAAE;EAAG,WAAU,SAAQ,WAAW,IAAI;CAAI,CAAA;AAC5C;AACA,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 };

package/es/dashboard/AuthTools/style.mjs

@@ -0,0 +1,27 @@
+//#region src/dashboard/AuthTools/style.ts
+const styles = {
+	localeIcon: {
+		k71WvV: "lbnnr8r",
+		$$css: true
+	},
+	themeIcon: {
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	themeLabel: {
+		kmVPX3: "lb1717udv",
+		kMzoRj: "lbc342km",
+		kVQacm: "lbb3r6kr",
+		kZKoxP: "lbjm9jq1",
+		kz4h6p: "lb1hyvwdk",
+		kzqmXN: "lb1i1rx1s",
+		kVAEAm: "lb10l6tqk",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map