@mastra/playground-ui 57.0.0 → 57.1.0-alpha.0

package/dist/new/settings.cjs.js

@@ -8,7 +8,6 @@ const React = require('react');
 const Txt = require('../Txt-B4-2nLaI.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 const settingsRow = require('../settings-row-BoAuUUuH.cjs');
-const settingsLayout = require('../settings-layout-BGvMSClL.cjs');
 
 const SettingsTitleIdContext = React.createContext(void 0);
 function SettingsGroup({ className, ...props }) {
@@ -55,11 +54,52 @@ function SettingsDescription({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", tone: "muted", className, ...props });
 }
 
+function SettingsLayout({
+  title,
+  titleAccessory,
+  description,
+  action,
+  inset = false,
+  variant,
+  children
+}) {
+  if (title === void 0 || title === null) {
+    return variant === "header" ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "settings-layout-content", className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 space-y-8", children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "settings-page-header",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex min-w-0 flex-wrap items-start justify-between gap-4", inset && "pl-4"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "h1", variant: "heading", tone: "muted", className: "min-w-0 truncate font-body tracking-normal", children: title }),
+              titleAccessory !== void 0 && titleAccessory !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: titleAccessory }) : null
+            ] }),
+            description !== void 0 && description !== null ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "body", tone: "muted", className: "m-0 wrap-break-word", children: description }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
+        ] })
+      }
+    ),
+    variant === "header" ? children : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "settings-layout-content",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 space-y-6", children })
+      }
+    )
+  ] });
+}
+
 exports.SettingsContainer = settingsContainer.SettingsContainer;
 exports.SettingsRow = settingsRow.SettingsRow;
-exports.SettingsLayout = settingsLayout.SettingsLayout;
 exports.SettingsDescription = SettingsDescription;
 exports.SettingsGroup = SettingsGroup;
 exports.SettingsHeader = SettingsHeader;
+exports.SettingsLayout = SettingsLayout;
 exports.SettingsTitle = SettingsTitle;
 //# sourceMappingURL=settings.cjs.js.map

package/dist/new/settings.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.cjs.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"subheading\" tone=\"ink\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className={className} {...props} />;\n}\n"],"names":["createContext","useId","jsx","cn","jsxs","useContext","Txt"],"mappings":";;;;;;;;;;;;AAKA,MAAM,sBAAA,GAAyBA,oBAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,uBACEC,cAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAWC,WAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAUG,iBAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,YAAA,EAAa,IAAA,EAAK,KAAA,EAAM,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAAA,IAC1F;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAOJ,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AACrF;;;;;;;;;;"}
+{"version":3,"file":"settings.cjs.js","sources":["../../src/ds/new/settings/settings-header.tsx","../../src/ds/new/settings/settings-layout.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"subheading\" tone=\"ink\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className={className} {...props} />;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n  title?: ReactNode;\n  titleAccessory?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  inset?: boolean;\n  variant?: 'default' | 'header';\n  children: ReactNode;\n}\n\nexport function SettingsLayout({\n  title,\n  titleAccessory,\n  description,\n  action,\n  inset = false,\n  variant,\n  children,\n}: SettingsLayoutProps) {\n  if (title === undefined || title === null) {\n    return variant === 'header' ? (\n      children\n    ) : (\n      <div data-slot=\"settings-layout-content\" className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\">\n        <div className=\"min-w-0 space-y-8\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-slot=\"settings-page-header\"\n        className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6\"\n      >\n        <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n          <div className=\"grid min-w-0 gap-2\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <Txt as=\"h1\" variant=\"heading\" tone=\"muted\" className=\"min-w-0 truncate font-body tracking-normal\">\n                {title}\n              </Txt>\n              {titleAccessory !== undefined && titleAccessory !== null ? (\n                <div className=\"shrink-0\">{titleAccessory}</div>\n              ) : null}\n            </div>\n            {description !== undefined && description !== null ? (\n              <Txt as=\"p\" variant=\"body\" tone=\"muted\" className=\"m-0 wrap-break-word\">\n                {description}\n              </Txt>\n            ) : null}\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n      {variant === 'header' ? (\n        children\n      ) : (\n        <div\n          data-slot=\"settings-layout-content\"\n          className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\"\n        >\n          <div className=\"min-w-0 space-y-6\">{children}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["createContext","useId","jsx","cn","jsxs","useContext","Txt","Fragment"],"mappings":";;;;;;;;;;;AAKA,MAAM,sBAAA,GAAyBA,oBAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,uBACEC,cAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAWC,WAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAUG,iBAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,YAAA,EAAa,IAAA,EAAK,KAAA,EAAM,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAAA,IAC1F;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAOJ,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AACrF;;ACzCO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,OAAA,KAAY,QAAA,GACjB,QAAA,mBAEAJ,cAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,SAAA,EAAU,8DAAA,EACjD,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,UAAS,CAAA,EAC/C,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEE,eAAA,CAAAG,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAL,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,SAAA,EAAU,yEAAA;AAAA,QAEV,0CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,YAAG,0DAAA,EAA4D,KAAA,IAAS,MAAM,CAAA,EAC5F,QAAA,EAAA;AAAA,0BAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oBAAA,EACb,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAACI,OAAA,EAAA,EAAI,IAAG,IAAA,EAAK,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,4CAAA,EACnD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,cACC,cAAA,KAAmB,UAAa,cAAA,KAAmB,IAAA,kCACjD,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,cAAA,EAAe,CAAA,GACxC;AAAA,aAAA,EACN,CAAA;AAAA,YACC,WAAA,KAAgB,MAAA,IAAa,WAAA,KAAgB,IAAA,kCAC3CA,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,QAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,qBAAA,EAC/C,uBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,yBAASJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,OAAA,KAAY,WACX,QAAA,mBAEAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8DAAA;AAAA,QAEV,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAS;AAAA;AAAA;AAC/C,GAAA,EAEJ,CAAA;AAEJ;;;;;;;;;;"}

package/dist/new/settings.es.js

@@ -1,10 +1,9 @@
 export { S as SettingsContainer } from '../settings-container-T53heJKd.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useId, useContext, createContext } from 'react';
 import { T as Txt } from '../Txt-DTh3Pa_a.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 export { a as SettingsRow } from '../settings-row-B2IekRyH.js';
-export { S as SettingsLayout } from '../settings-layout-DA-JWqW3.js';
 
 const SettingsTitleIdContext = createContext(void 0);
 function SettingsGroup({ className, ...props }) {
@@ -51,5 +50,46 @@ function SettingsDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "caption", tone: "muted", className, ...props });
 }
 
-export { SettingsDescription, SettingsGroup, SettingsHeader, SettingsTitle };
+function SettingsLayout({
+  title,
+  titleAccessory,
+  description,
+  action,
+  inset = false,
+  variant,
+  children
+}) {
+  if (title === void 0 || title === null) {
+    return variant === "header" ? children : /* @__PURE__ */ jsx("div", { "data-slot": "settings-layout-content", className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-8", children }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "settings-page-header",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6",
+        children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-wrap items-start justify-between gap-4", inset && "pl-4"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "heading", tone: "muted", className: "min-w-0 truncate font-body tracking-normal", children: title }),
+              titleAccessory !== void 0 && titleAccessory !== null ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: titleAccessory }) : null
+            ] }),
+            description !== void 0 && description !== null ? /* @__PURE__ */ jsx(Txt, { as: "p", variant: "body", tone: "muted", className: "m-0 wrap-break-word", children: description }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+        ] })
+      }
+    ),
+    variant === "header" ? children : /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "settings-layout-content",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5",
+        children: /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-6", children })
+      }
+    )
+  ] });
+}
+
+export { SettingsDescription, SettingsGroup, SettingsHeader, SettingsLayout, SettingsTitle };
 //# sourceMappingURL=settings.es.js.map

package/dist/new/settings.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.es.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"subheading\" tone=\"ink\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className={className} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;AAKA,MAAM,sBAAA,GAAyB,cAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAU,KAAA,EAAM;AAEtB,EAAA,uBACE,GAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAU,WAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,YAAA,EAAa,IAAA,EAAK,KAAA,EAAM,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAAA,IAC1F;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAO,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AACrF;;;;"}
+{"version":3,"file":"settings.es.js","sources":["../../src/ds/new/settings/settings-header.tsx","../../src/ds/new/settings/settings-layout.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"subheading\" tone=\"ink\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className={className} {...props} />;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n  title?: ReactNode;\n  titleAccessory?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  inset?: boolean;\n  variant?: 'default' | 'header';\n  children: ReactNode;\n}\n\nexport function SettingsLayout({\n  title,\n  titleAccessory,\n  description,\n  action,\n  inset = false,\n  variant,\n  children,\n}: SettingsLayoutProps) {\n  if (title === undefined || title === null) {\n    return variant === 'header' ? (\n      children\n    ) : (\n      <div data-slot=\"settings-layout-content\" className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\">\n        <div className=\"min-w-0 space-y-8\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-slot=\"settings-page-header\"\n        className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6\"\n      >\n        <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n          <div className=\"grid min-w-0 gap-2\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <Txt as=\"h1\" variant=\"heading\" tone=\"muted\" className=\"min-w-0 truncate font-body tracking-normal\">\n                {title}\n              </Txt>\n              {titleAccessory !== undefined && titleAccessory !== null ? (\n                <div className=\"shrink-0\">{titleAccessory}</div>\n              ) : null}\n            </div>\n            {description !== undefined && description !== null ? (\n              <Txt as=\"p\" variant=\"body\" tone=\"muted\" className=\"m-0 wrap-break-word\">\n                {description}\n              </Txt>\n            ) : null}\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n      {variant === 'header' ? (\n        children\n      ) : (\n        <div\n          data-slot=\"settings-layout-content\"\n          className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\"\n        >\n          <div className=\"min-w-0 space-y-6\">{children}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/new/sidebar.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const mainSidebar = require('../main-sidebar-DYfRxFn4.cjs');
+const mainSidebarLinkActive = require('../main-sidebar-link-active-CYZwvfPC.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 const React = require('react');
@@ -16,7 +16,7 @@ const v4 = require('zod/v4');
 const hooks_useLocalStorageState = require('../hooks/use-local-storage-state.cjs.js');
 
 function SidebarNewBrand({ logo, title, className, ...props }) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "sidebar-new-brand", className: utils_cn.cn("flex min-w-0 flex-1 items-center gap-2", className), ...props, children: [
     logo ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: logo }) : null,
     state === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-body text-subheading tracking-tight text-foreground", children: title })
@@ -25,7 +25,7 @@ function SidebarNewBrand({ logo, title, className, ...props }) {
 
 const SidebarNewCommandHeader = React.forwardRef(
   function SidebarNewCommandHeader2({ className, children, ...props }, ref) {
-    const { state } = mainSidebar.useMainSidebar();
+    const { state } = mainSidebarLinkActive.useMainSidebar();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "header",
       {
@@ -45,11 +45,11 @@ const SidebarNewCommandHeader = React.forwardRef(
 );
 
 function SidebarNewFooter({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { "data-slot": "sidebar-new-footer", className: utils_cn.cn("mt-auto shrink-0", className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { "data-slot": "sidebar-new-footer", className: utils_cn.cn("mt-auto shrink-0 space-y-1.5 pb-2", className), ...props, children });
 }
 
 const SidebarNewFooterMeta = React.forwardRef(function SidebarNewFooterMeta2({ className, children, action, ...props }, ref) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -180,7 +180,7 @@ const SidebarNewMeter = React.forwardRef(function SidebarNewMeter2({
   className,
   ...props
 }, ref) {
-  const ctx = mainSidebar.useMaybeSidebarState();
+  const ctx = mainSidebarLinkActive.useMaybeSidebarState();
   const state = stateProp ?? ctx?.state ?? "default";
   const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
   const isCollapsed = state === "collapsed";
@@ -238,9 +238,9 @@ const SidebarNewMeter = React.forwardRef(function SidebarNewMeter2({
 });
 
 function SidebarNewNav({ children, className, ...props }) {
-  const isMobile = mainSidebar.useMaybeSidebarState()?.isMobile ?? false;
+  const isMobile = mainSidebarLinkActive.useMaybeSidebarState()?.isMobile ?? false;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    mainSidebar.MainSidebarNav,
+    mainSidebarLinkActive.MainSidebarNav,
     {
       className: utils_cn.cn(
         "-mr-1.5",
@@ -264,7 +264,7 @@ function SidebarNewNavHeader({
   LinkComponent: LinkProp,
   ...props
 }) {
-  const context = mainSidebar.useMaybeSidebarState();
+  const context = mainSidebarLinkActive.useMaybeSidebarState();
   const state = stateProp ?? context?.state ?? "default";
   const showTitle = state === "default";
   const Link = LinkProp ?? context?.LinkComponent ?? "a";
@@ -340,7 +340,7 @@ function sidebarNewNavStackPageClasses(active, page, className) {
 }
 
 function SidebarNewNavStackRootView({ children, className, ...props }) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   const { activeValue, rootValue } = useSidebarNewNavStack();
   const active = state === "collapsed" || activeValue === rootValue;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -366,7 +366,7 @@ function SidebarNewNavStackView({
   className,
   ...props
 }) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   const { activeValue, closeView } = useSidebarNewNavStack();
   const active = state !== "collapsed" && activeValue === value;
   const backRef = React.useRef(null);
@@ -407,7 +407,7 @@ function SidebarNewNavStackView({
             type: "button",
             "aria-label": `${backLabel}: ${title}`,
             onClick: handleBack,
-            className: utils_cn.cn(mainSidebar.navItemClasses(), "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1"),
+            className: utils_cn.cn(mainSidebarLinkActive.navItemClasses(), "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "justify-self-center", "aria-hidden": "true" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-center", children: title }),
@@ -431,7 +431,7 @@ function SidebarNewRoot({
   mobileMode = "takeover",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarRoot, { mobileMode, ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarRoot, { mobileMode, ...props }) });
 }
 
 const SidebarNewSearchTrigger = React.forwardRef(
@@ -473,7 +473,7 @@ function SidebarNewSectionLink({
 }) {
   const childLinks = link.children ?? [];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    mainSidebar.MainSidebarNavLink,
+    mainSidebarLinkActive.MainSidebarNavLink,
     {
       link,
       isActive: isActive?.(link, activeCandidates) ?? link.isActive,
@@ -482,7 +482,7 @@ function SidebarNewSectionLink({
         if (event.target instanceof Element && event.target.closest("li") !== event.currentTarget) return;
         onSelect?.(link);
       },
-      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
         SidebarNewSectionLink,
         {
           link: child,
@@ -524,7 +524,7 @@ function SidebarNewMoreLinks({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     surfacedLinks.map(renderLink),
     foldedLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      mainSidebar.MainSidebarNavLink,
+      mainSidebarLinkActive.MainSidebarNavLink,
       {
         link: { name: "More", url: "", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, {}) },
         render: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -536,7 +536,7 @@ function SidebarNewMoreLinks({
             onClick: () => setExpanded((current) => !current),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavLabel, { children: "More" })
+              /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavLabel, { children: "More" })
             ]
           }
         ),
@@ -584,15 +584,15 @@ function SidebarNewSections({
     const headerId = section.title ? `${baseId}-${section.key}` : void 0;
     const activeCandidates = [...section.links, ...section.moreLinks ?? []];
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      mainSidebar.MainSidebarNavSection,
+      mainSidebarLinkActive.MainSidebarNavSection,
       {
         className,
         "aria-labelledby": headerId,
         "aria-label": !headerId ? section.key : void 0,
         children: [
-          showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavSeparator, { className: "[&:after]:border-border" }) : null,
+          showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavSeparator, { className: "[&:after]:border-border" }) : null,
           section.title ? /* @__PURE__ */ jsxRuntime.jsx(SidebarNewNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(mainSidebar.MainSidebarNavList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(mainSidebarLinkActive.MainSidebarNavList, { children: [
             section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
               SidebarNewSectionLink,
               {
@@ -622,9 +622,9 @@ function SidebarNewSections({
 }
 
 function SidebarNewTrigger(props) {
-  const context = mainSidebar.useMaybeSidebarState();
+  const context = mainSidebarLinkActive.useMaybeSidebarState();
   if (context?.isMobile) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarTrigger, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarTrigger, { ...props });
 }
 
 const SidebarNew = Object.assign(SidebarNewRoot, {
@@ -634,25 +634,25 @@ const SidebarNew = Object.assign(SidebarNewRoot, {
   FooterMeta: SidebarNewFooterMeta,
   Header: SidebarNewHeader,
   Meter: SidebarNewMeter,
-  MobileTrigger: mainSidebar.MainSidebarMobileTrigger,
+  MobileTrigger: mainSidebarLinkActive.MainSidebarMobileTrigger,
   Nav: SidebarNewNav,
   NavHeader: SidebarNewNavHeader,
-  NavLabel: mainSidebar.MainSidebarNavLabel,
-  NavLink: mainSidebar.MainSidebarNavLink,
-  NavList: mainSidebar.MainSidebarNavList,
-  NavSection: mainSidebar.MainSidebarNavSection,
-  NavSeparator: mainSidebar.MainSidebarNavSeparator,
+  NavLabel: mainSidebarLinkActive.MainSidebarNavLabel,
+  NavLink: mainSidebarLinkActive.MainSidebarNavLink,
+  NavList: mainSidebarLinkActive.MainSidebarNavList,
+  NavSection: mainSidebarLinkActive.MainSidebarNavSection,
+  NavSeparator: mainSidebarLinkActive.MainSidebarNavSeparator,
   NavStack: SidebarNewNavStack,
-  Provider: mainSidebar.MainSidebarProvider,
+  Provider: mainSidebarLinkActive.MainSidebarProvider,
   SearchTrigger: SidebarNewSearchTrigger,
   Sections: SidebarNewSections,
   Trigger: SidebarNewTrigger
 });
 
-exports.SidebarNewProvider = mainSidebar.MainSidebarProvider;
-exports.getIsLinkActive = mainSidebar.getIsLinkActive;
-exports.navItemClasses = mainSidebar.navItemClasses;
-exports.useSidebarNew = mainSidebar.useMainSidebar;
+exports.SidebarNewProvider = mainSidebarLinkActive.MainSidebarProvider;
+exports.getIsLinkActive = mainSidebarLinkActive.getIsLinkActive;
+exports.navItemClasses = mainSidebarLinkActive.navItemClasses;
+exports.useSidebarNew = mainSidebarLinkActive.useMainSidebar;
 exports.SidebarNew = SidebarNew;
 exports.SidebarNewBrand = SidebarNewBrand;
 exports.SidebarNewCommandHeader = SidebarNewCommandHeader;