@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/layout/left-nav-layout/left-nav-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-nav-section.js","sources":["../../../../src/components/layout/left-nav-layout/left-nav-section.tsx"],"sourcesContent":["import { ReactNode, useState, useRef, useEffect } from 'react';\nimport Icon from '../../system/icon/icon';\n\nexport type LeftNavSectionProps = {\n  /** Section content (typically LeftNavItem components) */\n  children: ReactNode;\n  /** Optional section header label (hidden in collapsed mode) */\n  label?: string;\n  /** Additional CSS classes applied to the section container */\n  className?: string;\n  /** Enable collapsible behavior for the section */\n  collapsible?: boolean;\n  /** Default collapsed state (only applies when collapsible is true) */\n  defaultCollapsed?: boolean;\n  /** Unique identifier for localStorage persistence. If not provided, label is used. */\n  id?: string;\n};\n\n/**\n * LeftNavSection - Section grouping for LeftNavLayout navigation items\n *\n * Groups related navigation items together with an optional label.\n * In collapsed mode, the label is hidden but the grouping is preserved.\n * Supports collapsible behavior with smooth animations and localStorage persistence.\n *\n * @example\n * ```tsx\n * <LeftNavSection label=\"Main\">\n *   <LeftNavItem icon={<HomeIcon />} href=\"/\">Home</LeftNavItem>\n *   <LeftNavItem icon={<DashboardIcon />} href=\"/dashboard\">Dashboard</LeftNavItem>\n * </LeftNavSection>\n *\n * <LeftNavSection label=\"Settings\" collapsible defaultCollapsed id=\"settings-section\">\n *   <LeftNavItem icon={<SettingsIcon />} href=\"/settings\">Settings</LeftNavItem>\n * </LeftNavSection>\n * ```\n */\nfunction LeftNavSection({\n  children,\n  label,\n  className = '',\n  collapsible = false,\n  defaultCollapsed = false,\n  id\n}: Readonly<LeftNavSectionProps>) {\n  const STORAGE_KEY = 'left-nav-sections';\n\n  // Generate unique identifier from id or label\n  const sectionId = id || label || null;\n\n  // Helper to read all section states from localStorage\n  const getSectionStates = (): Record<string, boolean> => {\n    if (typeof window === 'undefined') return {};\n\n    try {\n      const stored = localStorage.getItem(STORAGE_KEY);\n      return stored ? JSON.parse(stored) : {};\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.warn('Failed to read section states from localStorage:', error);\n      return {};\n    }\n  };\n\n  // Helper to save a section state to localStorage\n  const saveSectionState = (sectionKey: string, collapsed: boolean) => {\n    try {\n      const states = getSectionStates();\n      states[sectionKey] = collapsed;\n      localStorage.setItem(STORAGE_KEY, JSON.stringify(states));\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.warn('Failed to save section state to localStorage:', error);\n    }\n  };\n\n  // Initialize collapsed state from localStorage if collapsible\n  const [isCollapsed, setIsCollapsed] = useState(() => {\n    if (!collapsible || !sectionId) return defaultCollapsed;\n\n    const states = getSectionStates();\n    return sectionId in states ? states[sectionId] : defaultCollapsed;\n  });\n\n  const [isNavCollapsed, setIsNavCollapsed] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const sectionRef = useRef<HTMLDivElement>(null);\n\n  // Check if parent nav is collapsed (icon-only mode)\n  useEffect(() => {\n    const checkNavCollapsed = () => {\n      const navElement = sectionRef.current?.closest('nav');\n      if (navElement) {\n        setIsNavCollapsed(navElement.getAttribute('data-collapsed') === 'true');\n      }\n    };\n\n    checkNavCollapsed();\n\n    const navElement = sectionRef.current?.closest('nav');\n    if (navElement) {\n      const observer = new MutationObserver(checkNavCollapsed);\n      observer.observe(navElement, {\n        attributes: true,\n        attributeFilter: ['data-collapsed']\n      });\n      return () => observer.disconnect();\n    }\n\n    return undefined;\n  }, []);\n\n  const toggleCollapsed = () => {\n    if (collapsible) {\n      const newState = !isCollapsed;\n      setIsCollapsed(newState);\n\n      // Persist to localStorage\n      if (sectionId) {\n        saveSectionState(sectionId, newState);\n      }\n    }\n  };\n\n  // Auto-expand when nav is in icon-only mode\n  const effectiveCollapsed = isNavCollapsed ? false : isCollapsed;\n\n  return (\n    <div ref={sectionRef} className={`py-1 [&:last-child>*:last-child]:hidden ${className}`}>\n      {/* Section Label - Hidden in collapsed mode */}\n      {label && (\n        <div\n          className={`\n            px-3 mb-1.5 mt-1\n            text-xs font-semibold uppercase tracking-wider\n            text-muted-foreground\n            [nav[data-collapsed='true']_&]:hidden\n            ${collapsible ? 'cursor-pointer hover:text-foreground transition-colors flex items-center justify-between gap-2' : ''}\n          `}\n          onClick={toggleCollapsed}\n          role={collapsible ? 'button' : undefined}\n          aria-expanded={collapsible ? !effectiveCollapsed : undefined}\n          tabIndex={collapsible ? 0 : undefined}\n          onKeyDown={\n            collapsible\n              ? (e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    toggleCollapsed();\n                  }\n                }\n              : undefined\n          }\n        >\n          <span>{label}</span>\n          {collapsible && (\n            <Icon\n              name=\"chevron-down\"\n              size=\"xs\"\n              className={`transition-transform duration-200 ${effectiveCollapsed ? '-rotate-90' : ''}`}\n            />\n          )}\n        </div>\n      )}\n\n      {/* Section Items */}\n      <div\n        ref={contentRef}\n        className={`space-y-0.5 overflow-hidden transition-all duration-200 ${effectiveCollapsed && collapsible ? 'max-h-0 opacity-0' : 'max-h-[2000px] opacity-100'}`}\n      >\n        {children}\n      </div>\n\n      {/* Divider - Subtle separator between sections (hidden on last section) */}\n      <div className=\"h-px bg-border mx-3 mt-1.5\" aria-hidden=\"true\" />\n    </div>\n  );\n}\n\nLeftNavSection.displayName = 'LeftNavSection';\n\nexport default LeftNavSection;\n"],"names":["navElement"],"mappings":"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"}

package/dist/components/layout/page/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Page } from './page';
+export type { PageProps } from './page';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/layout/page/page.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type PageProps = {
+    /** Page content */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * Page - Semantic wrapper for page-level content
+ * Provides consistent structure with main element and background styling
+ */
+declare function Page({ children, className }: Readonly<PageProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Page {
+    var displayName: string;
+}
+export default Page;
+//# sourceMappingURL=page.d.ts.map

package/dist/components/layout/page/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,SAAS,GAAG;IACtB,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAE9D;kBAFQ,IAAI;;;AAMb,eAAe,IAAI,CAAC"}

package/dist/components/layout/page/page.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+function Page({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("main", { className: `min-h-screen bg-background ${className}`, children });
+}
+Page.displayName = "Page";
+export {
+  Page as default
+};
+//# sourceMappingURL=page.js.map

package/dist/components/layout/page/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sources":["../../../../src/components/layout/page/page.tsx"],"sourcesContent":["import React from 'react';\n\nexport type PageProps = {\n  /** Page content */\n  children: React.ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n};\n\n/**\n * Page - Semantic wrapper for page-level content\n * Provides consistent structure with main element and background styling\n */\nfunction Page({ children, className = '' }: Readonly<PageProps>) {\n  return <main className={`min-h-screen bg-background ${className}`}>{children}</main>;\n}\n\nPage.displayName = 'Page';\n\nexport default Page;\n"],"names":[],"mappings":";AAaA,SAAS,KAAK,EAAE,UAAU,YAAY,MAA2B;AAC/D,6BAAQ,QAAA,EAAK,WAAW,8BAA8B,SAAS,IAAK,UAAS;AAC/E;AAEA,KAAK,cAAc;"}

package/dist/components/layout/page-header/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './page-header';
+export type { PageHeaderProps } from './page-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/page-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/layout/page-header/page-header.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export type PageHeaderProps = {
+    /** Page title text */
+    title: string;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Optional badge or label component displayed next to the title */
+    badge?: React.ReactNode;
+    /** Additional CSS classes applied to the header container */
+    className?: string;
+};
+/**
+ * PageHeader - Standard page title and description layout
+ * Used at the top of demo/showcase pages
+ */
+declare function PageHeader({ title, description, badge, className }: Readonly<PageHeaderProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace PageHeader {
+    var displayName: string;
+}
+export default PageHeader;
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/layout/page-header/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-header/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,eAAe,GAAG;IAC5B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAa3F;kBAbQ,UAAU;;;AAiBnB,eAAe,UAAU,CAAC"}

package/dist/components/layout/page-header/page-header.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Heading from "../../typography/heading/heading.js";
+import Text from "../../typography/text/text.js";
+function PageHeader({ title, description, badge, className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: `mb-8 sm:mb-12 ${className}`, children: [
+    /* @__PURE__ */ jsxs(Heading, { level: 1, hasMargin: true, children: [
+      title,
+      " ",
+      badge
+    ] }),
+    description && /* @__PURE__ */ jsx(Text, { hasMargin: true, variant: "muted", className: "mt-2", children: description })
+  ] });
+}
+PageHeader.displayName = "PageHeader";
+export {
+  PageHeader as default
+};
+//# sourceMappingURL=page-header.js.map

package/dist/components/layout/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","sources":["../../../../src/components/layout/page-header/page-header.tsx"],"sourcesContent":["import React from 'react';\n\nimport Heading from '../../typography/heading/heading';\nimport Text from '../../typography/text/text';\n\nexport type PageHeaderProps = {\n  /** Page title text */\n  title: string;\n  /** Optional description text displayed below the title */\n  description?: string;\n  /** Optional badge or label component displayed next to the title */\n  badge?: React.ReactNode;\n  /** Additional CSS classes applied to the header container */\n  className?: string;\n};\n\n/**\n * PageHeader - Standard page title and description layout\n * Used at the top of demo/showcase pages\n */\nfunction PageHeader({ title, description, badge, className = '' }: Readonly<PageHeaderProps>) {\n  return (\n    <div className={`mb-8 sm:mb-12 ${className}`}>\n      <Heading level={1} hasMargin>\n        {title} {badge}\n      </Heading>\n      {description && (\n        <Text hasMargin variant=\"muted\" className=\"mt-2\">\n          {description}\n        </Text>\n      )}\n    </div>\n  );\n}\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"names":[],"mappings":";;;AAoBA,SAAS,WAAW,EAAE,OAAO,aAAa,OAAO,YAAY,MAAiC;AAC5F,SACE,qBAAC,OAAA,EAAI,WAAW,iBAAiB,SAAS,IACxC,UAAA;AAAA,IAAA,qBAAC,SAAA,EAAQ,OAAO,GAAG,WAAS,MACzB,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MAAE;AAAA,IAAA,GACX;AAAA,IACC,mCACE,MAAA,EAAK,WAAS,MAAC,SAAQ,SAAQ,WAAU,QACvC,UAAA,YAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEA,WAAW,cAAc;"}

package/dist/components/layout/page-transition/index.d.ts

@@ -0,0 +1,3 @@
+export { PageTransition } from './page-transition';
+export type { PageTransitionProps } from './page-transition';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/page-transition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-transition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/layout/page-transition/page-transition.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+export interface PageTransitionProps {
+    /** Page content */
+    children: React.ReactNode;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Animation type */
+    type?: 'fade' | 'slide' | 'scale' | 'none';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * PageTransition - Centralized transition component for smooth animations
+ *
+ * The standard way to add animated transitions in Hydn UI.
+ * Use this component instead of custom CSS animations for consistency.
+ *
+ * Features:
+ * - Multiple animation types (fade, slide, scale)
+ * - Customizable duration
+ * - Lightweight CSS animations using Tailwind's animate-in utilities
+ * - Accessible (respects prefers-reduced-motion)
+ * - Already used internally by Tabs component
+ *
+ * @example
+ * ```tsx
+ * // Basic fade transition
+ * <PageTransition>
+ *   <YourPageContent />
+ * </PageTransition>
+ *
+ * // Slide animation
+ * <PageTransition type="slide">
+ *   <YourPageContent />
+ * </PageTransition>
+ *
+ * // Custom duration
+ * <PageTransition type="fade" duration={500}>
+ *   <YourPageContent />
+ * </PageTransition>
+ *
+ * // With React Router
+ * <Route path="/about" element={
+ *   <PageTransition>
+ *     <AboutPage />
+ *   </PageTransition>
+ * } />
+ * ```
+ */
+export declare const PageTransition: React.FC<PageTransitionProps>;
+export default PageTransition;
+//# sourceMappingURL=page-transition.d.ts.map

package/dist/components/layout/page-transition/page-transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-transition.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page-transition/page-transition.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6CxD,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/components/layout/page-transition/page-transition.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+const PageTransition = ({
+  children,
+  duration = 300,
+  type = "fade",
+  className = ""
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setIsVisible(true);
+      });
+    });
+  }, []);
+  const getAnimationStyles = () => {
+    if (type === "none") return "";
+    const baseClasses = "transition-all ease-out";
+    const durationClass = `duration-[${duration}ms]`;
+    if (!isVisible) {
+      switch (type) {
+        case "fade":
+          return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;
+        case "slide":
+          return `${baseClasses} ${durationClass} opacity-0 translate-y-3`;
+        case "scale":
+          return `${baseClasses} ${durationClass} opacity-0 scale-[0.99]`;
+        default:
+          return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;
+      }
+    } else {
+      return `${baseClasses} ${durationClass} opacity-100 translate-y-0 scale-100`;
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: `${getAnimationStyles()} ${className}`.trim(), children });
+};
+PageTransition.displayName = "PageTransition";
+export {
+  PageTransition,
+  PageTransition as default
+};
+//# sourceMappingURL=page-transition.js.map

package/dist/components/layout/page-transition/page-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-transition.js","sources":["../../../../src/components/layout/page-transition/page-transition.tsx"],"sourcesContent":["/**\n * PageTransition Component\n *\n * ARCHITECTURE NOTE:\n * This is the centralized transition component for Hydn UI.\n * It replaces custom CSS transitions and ensures consistency across the library.\n *\n * Components using PageTransition:\n * - Tabs component (for tab content switching)\n * - App layouts (for page route transitions)\n *\n * ❌ DON'T: Create new custom transition CSS classes\n * ✅ DO: Use this component for any transition needs\n */\n\nimport React from 'react';\n\nexport interface PageTransitionProps {\n  /** Page content */\n  children: React.ReactNode;\n  /** Animation duration in milliseconds */\n  duration?: number;\n  /** Animation type */\n  type?: 'fade' | 'slide' | 'scale' | 'none';\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * PageTransition - Centralized transition component for smooth animations\n *\n * The standard way to add animated transitions in Hydn UI.\n * Use this component instead of custom CSS animations for consistency.\n *\n * Features:\n * - Multiple animation types (fade, slide, scale)\n * - Customizable duration\n * - Lightweight CSS animations using Tailwind's animate-in utilities\n * - Accessible (respects prefers-reduced-motion)\n * - Already used internally by Tabs component\n *\n * @example\n * ```tsx\n * // Basic fade transition\n * <PageTransition>\n *   <YourPageContent />\n * </PageTransition>\n *\n * // Slide animation\n * <PageTransition type=\"slide\">\n *   <YourPageContent />\n * </PageTransition>\n *\n * // Custom duration\n * <PageTransition type=\"fade\" duration={500}>\n *   <YourPageContent />\n * </PageTransition>\n *\n * // With React Router\n * <Route path=\"/about\" element={\n *   <PageTransition>\n *     <AboutPage />\n *   </PageTransition>\n * } />\n * ```\n */\nexport const PageTransition: React.FC<PageTransitionProps> = ({\n  children,\n  duration = 300,\n  type = 'fade',\n  className = ''\n}) => {\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  // Trigger animation on mount with slight delay for smoother effect\n  React.useEffect(() => {\n    // Double RAF for better reliability and smoother start\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        setIsVisible(true);\n      });\n    });\n  }, []);\n\n  // Animation class mapping - using standard CSS transitions for reliability\n  const getAnimationStyles = () => {\n    if (type === 'none') return '';\n\n    // Use ease-out for smoother, more natural animation\n    const baseClasses = 'transition-all ease-out';\n    const durationClass = `duration-[${duration}ms]`;\n\n    if (!isVisible) {\n      // Initial state (hidden)\n      switch (type) {\n        case 'fade':\n          return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;\n        case 'slide':\n          return `${baseClasses} ${durationClass} opacity-0 translate-y-3`;\n        case 'scale':\n          return `${baseClasses} ${durationClass} opacity-0 scale-[0.99]`;\n        default:\n          return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;\n      }\n    } else {\n      // Animated state (visible)\n      return `${baseClasses} ${durationClass} opacity-100 translate-y-0 scale-100`;\n    }\n  };\n\n  return <div className={`${getAnimationStyles()} ${className}`.trim()}>{children}</div>;\n};\n\nPageTransition.displayName = 'PageTransition';\n\nexport default PageTransition;\n"],"names":[],"mappings":";;AAkEO,MAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AACd,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAGtD,QAAM,UAAU,MAAM;AAEpB,0BAAsB,MAAM;AAC1B,4BAAsB,MAAM;AAC1B,qBAAa,IAAI;AAAA,MACnB,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAGL,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS,OAAQ,QAAO;AAG5B,UAAM,cAAc;AACpB,UAAM,gBAAgB,aAAa,QAAQ;AAE3C,QAAI,CAAC,WAAW;AAEd,cAAQ,MAAA;AAAA,QACN,KAAK;AACH,iBAAO,GAAG,WAAW,IAAI,aAAa;AAAA,QACxC,KAAK;AACH,iBAAO,GAAG,WAAW,IAAI,aAAa;AAAA,QACxC,KAAK;AACH,iBAAO,GAAG,WAAW,IAAI,aAAa;AAAA,QACxC;AACE,iBAAO,GAAG,WAAW,IAAI,aAAa;AAAA,MAAA;AAAA,IAE5C,OAAO;AAEL,aAAO,GAAG,WAAW,IAAI,aAAa;AAAA,IACxC;AAAA,EACF;AAEA,SAAO,oBAAC,OAAA,EAAI,WAAW,GAAG,mBAAA,CAAoB,IAAI,SAAS,GAAG,KAAA,GAAS,SAAA,CAAS;AAClF;AAEA,eAAe,cAAc;"}

package/dist/components/layout/section/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './section';
+export type { SectionProps } from './section';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/layout/section/section.d.ts

@@ -0,0 +1,35 @@
+import { SectionPaddingSize } from '../../../theme/size-tokens';
+export interface SectionProps {
+    /**
+     * Content to render inside the section
+     */
+    children: React.ReactNode;
+    /**
+     * Background variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'muted' | 'primary' | 'dark';
+    /**
+     * Vertical padding size - uses unified size system
+     * @default 'lg'
+     */
+    padding?: SectionPaddingSize;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+}
+/**
+ * Section component for page layout sections
+ * Uses unified size system from theme/size-tokens
+ */
+declare function Section({ children, variant, padding, className, id }: SectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Section {
+    var displayName: string;
+}
+export default Section;
+//# sourceMappingURL=section.d.ts.map

package/dist/components/layout/section/section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhF,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEnD;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAmB,EAAE,OAAgB,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,YAAY,2CAkBhG;kBAlBQ,OAAO;;;AAsBhB,eAAe,OAAO,CAAC"}

package/dist/components/layout/section/section.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { sectionPadding } from "../../../theme/size-tokens.js";
+function Section({ children, variant = "default", padding = "none", className, id }) {
+  const paddingClasses = sectionPadding[padding];
+  const variantClasses = {
+    default: "bg-background",
+    muted: "bg-muted/20",
+    primary: "bg-primary text-primary-foreground",
+    dark: "bg-background-dark text-foreground-dark"
+  };
+  const classes = ["w-full", paddingClasses, variantClasses[variant], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("section", { id, className: classes, children });
+}
+Section.displayName = "Section";
+export {
+  Section as default
+};
+//# sourceMappingURL=section.js.map

package/dist/components/layout/section/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sources":["../../../../src/components/layout/section/section.tsx"],"sourcesContent":["import { sectionPadding, SectionPaddingSize } from '../../../theme/size-tokens';\n\nexport interface SectionProps {\n  /**\n   * Content to render inside the section\n   */\n  children: React.ReactNode;\n\n  /**\n   * Background variant\n   * @default 'default'\n   */\n  variant?: 'default' | 'muted' | 'primary' | 'dark';\n\n  /**\n   * Vertical padding size - uses unified size system\n   * @default 'lg'\n   */\n  padding?: SectionPaddingSize;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n\n  /**\n   * HTML id attribute\n   */\n  id?: string;\n}\n\n/**\n * Section component for page layout sections\n * Uses unified size system from theme/size-tokens\n */\nfunction Section({ children, variant = 'default', padding = 'none', className, id }: SectionProps) {\n  const paddingClasses = sectionPadding[padding];\n\n  // Build variant classes\n  const variantClasses = {\n    default: 'bg-background',\n    muted: 'bg-muted/20',\n    primary: 'bg-primary text-primary-foreground',\n    dark: 'bg-background-dark text-foreground-dark'\n  };\n\n  const classes = ['w-full', paddingClasses, variantClasses[variant], className].filter(Boolean).join(' ');\n\n  return (\n    <section id={id} className={classes}>\n      {children}\n    </section>\n  );\n}\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"names":[],"mappings":";;AAmCA,SAAS,QAAQ,EAAE,UAAU,UAAU,WAAW,UAAU,QAAQ,WAAW,MAAoB;AACjG,QAAM,iBAAiB,eAAe,OAAO;AAG7C,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAGR,QAAM,UAAU,CAAC,UAAU,gBAAgB,eAAe,OAAO,GAAG,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEvG,SACE,oBAAC,WAAA,EAAQ,IAAQ,WAAW,SACzB,UACH;AAEJ;AAEA,QAAQ,cAAc;"}

package/dist/components/layout/section-header/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './section-header';
+export type { SectionHeaderProps } from './section-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/section-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/layout/section-header/section-header.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export type SectionHeaderProps = {
+    /** Section heading text */
+    title: string;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Optional badge or label component displayed next to the title */
+    badge?: React.ReactNode;
+    /** HTML heading level (h2, h3, or h4) */
+    level?: 2 | 3 | 4;
+    /** Additional CSS classes applied to the header container */
+    className?: string;
+};
+/**
+ * SectionHeader - Standard section title and description layout
+ * Used for section headings within demo/showcase pages
+ */
+declare function SectionHeader({ title, description, badge, level, className }: Readonly<SectionHeaderProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace SectionHeader {
+    var displayName: string;
+}
+export default SectionHeader;
+//# sourceMappingURL=section-header.d.ts.map

package/dist/components/layout/section-header/section-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section-header/section-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yCAAyC;IACzC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAS,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAS5G;kBATQ,aAAa;;;AAatB,eAAe,aAAa,CAAC"}

package/dist/components/layout/section-header/section-header.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Heading from "../../typography/heading/heading.js";
+import Text from "../../typography/text/text.js";
+function SectionHeader({ title, description, badge, level = 2, className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(Heading, { level, hasMargin: true, children: [
+      title,
+      " ",
+      badge
+    ] }),
+    description && /* @__PURE__ */ jsx(Text, { hasMargin: true, children: description })
+  ] });
+}
+SectionHeader.displayName = "SectionHeader";
+export {
+  SectionHeader as default
+};
+//# sourceMappingURL=section-header.js.map

package/dist/components/layout/section-header/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.js","sources":["../../../../src/components/layout/section-header/section-header.tsx"],"sourcesContent":["import React from 'react';\n\nimport Heading from '../../typography/heading/heading';\nimport Text from '../../typography/text/text';\n\nexport type SectionHeaderProps = {\n  /** Section heading text */\n  title: string;\n  /** Optional description text displayed below the title */\n  description?: string;\n  /** Optional badge or label component displayed next to the title */\n  badge?: React.ReactNode;\n  /** HTML heading level (h2, h3, or h4) */\n  level?: 2 | 3 | 4;\n  /** Additional CSS classes applied to the header container */\n  className?: string;\n};\n\n/**\n * SectionHeader - Standard section title and description layout\n * Used for section headings within demo/showcase pages\n */\nfunction SectionHeader({ title, description, badge, level = 2, className = '' }: Readonly<SectionHeaderProps>) {\n  return (\n    <div className={className}>\n      <Heading level={level} hasMargin>\n        {title} {badge}\n      </Heading>\n      {description && <Text hasMargin>{description}</Text>}\n    </div>\n  );\n}\n\nSectionHeader.displayName = 'SectionHeader';\n\nexport default SectionHeader;\n"],"names":[],"mappings":";;;AAsBA,SAAS,cAAc,EAAE,OAAO,aAAa,OAAO,QAAQ,GAAG,YAAY,MAAoC;AAC7G,SACE,qBAAC,SAAI,WACH,UAAA;AAAA,IAAA,qBAAC,SAAA,EAAQ,OAAc,WAAS,MAC7B,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MAAE;AAAA,IAAA,GACX;AAAA,IACC,eAAe,oBAAC,MAAA,EAAK,WAAS,MAAE,UAAA,YAAA,CAAY;AAAA,EAAA,GAC/C;AAEJ;AAEA,cAAc,cAAc;"}

package/dist/components/layout/settings-page/index.d.ts

@@ -0,0 +1,4 @@
+export { SettingsPage, type SettingsPageProps } from './settings-page';
+export { SettingsSection, type SettingsSectionProps } from './settings-section';
+export { SettingItem, type SettingItemProps } from './setting-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/settings-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/settings-page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/layout/settings-page/setting-item.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+export interface SettingItemProps {
+    /** Setting label/description */
+    label: string;
+    /** Setting control (Switch, Select, Button, etc.) */
+    children: ReactNode;
+    /** Additional help text below the label */
+    helpText?: string;
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * SettingItem - Individual setting row
+ *
+ * Displays a setting label with its control (Switch, Select, etc.).
+ * Automatically handles layout and styling for consistency.
+ *
+ * Features:
+ * - Horizontal layout (default) for switches and compact controls
+ * - Vertical layout for form selects and larger controls
+ * - Optional help text
+ * - Hover state for better UX
+ *
+ * @example
+ * ```tsx
+ * // Horizontal (switches, radios)
+ * <SettingItem label="Enable notifications">
+ *   <Switch checked={enabled} onChange={handleChange} />
+ * </SettingItem>
+ *
+ * // Vertical (selects, textareas)
+ * <SettingItem label="Language" layout="vertical">
+ *   <FormSelect value={language}>...</FormSelect>
+ * </SettingItem>
+ *
+ * // With help text
+ * <SettingItem
+ *   label="Data sharing"
+ *   helpText="Help us improve by sharing anonymous usage data"
+ * >
+ *   <Switch checked={share} onChange={handleChange} />
+ * </SettingItem>
+ * ```
+ */
+export declare const SettingItem: {
+    ({ label, children, helpText, layout, className }: SettingItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SettingItem;
+//# sourceMappingURL=setting-item.d.ts.map

package/dist/components/layout/settings-page/setting-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setting-item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/settings-page/setting-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,WAAW;uDAA0E,gBAAgB;;CAkCjH,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/components/layout/settings-page/setting-item.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Text from "../../typography/text/text.js";
+const SettingItem = ({ label, children, helpText, layout = "horizontal", className = "" }) => {
+  if (layout === "vertical") {
+    return /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className}`, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", children: label }),
+        helpText && /* @__PURE__ */ jsx(Text, { size: "xs", variant: "muted", className: "mt-1", children: helpText })
+      ] }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center justify-between py-2 px-3 rounded-lg hover:bg-base-200/50 transition-colors ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 mr-4", children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: label }),
+          helpText && /* @__PURE__ */ jsx(Text, { size: "xs", variant: "muted", className: "mt-1", children: helpText })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children })
+      ]
+    }
+  );
+};
+SettingItem.displayName = "SettingItem";
+export {
+  SettingItem
+};
+//# sourceMappingURL=setting-item.js.map

package/dist/components/layout/settings-page/setting-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setting-item.js","sources":["../../../../src/components/layout/settings-page/setting-item.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport Text from '../../typography/text/text';\n\nexport interface SettingItemProps {\n  /** Setting label/description */\n  label: string;\n  /** Setting control (Switch, Select, Button, etc.) */\n  children: ReactNode;\n  /** Additional help text below the label */\n  helpText?: string;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * SettingItem - Individual setting row\n *\n * Displays a setting label with its control (Switch, Select, etc.).\n * Automatically handles layout and styling for consistency.\n *\n * Features:\n * - Horizontal layout (default) for switches and compact controls\n * - Vertical layout for form selects and larger controls\n * - Optional help text\n * - Hover state for better UX\n *\n * @example\n * ```tsx\n * // Horizontal (switches, radios)\n * <SettingItem label=\"Enable notifications\">\n *   <Switch checked={enabled} onChange={handleChange} />\n * </SettingItem>\n *\n * // Vertical (selects, textareas)\n * <SettingItem label=\"Language\" layout=\"vertical\">\n *   <FormSelect value={language}>...</FormSelect>\n * </SettingItem>\n *\n * // With help text\n * <SettingItem\n *   label=\"Data sharing\"\n *   helpText=\"Help us improve by sharing anonymous usage data\"\n * >\n *   <Switch checked={share} onChange={handleChange} />\n * </SettingItem>\n * ```\n */\nexport const SettingItem = ({ label, children, helpText, layout = 'horizontal', className = '' }: SettingItemProps) => {\n  if (layout === 'vertical') {\n    return (\n      <div className={`space-y-2 ${className}`}>\n        <div>\n          <Text size=\"sm\" weight=\"medium\">\n            {label}\n          </Text>\n          {helpText && (\n            <Text size=\"xs\" variant=\"muted\" className=\"mt-1\">\n              {helpText}\n            </Text>\n          )}\n        </div>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`flex items-center justify-between py-2 px-3 rounded-lg hover:bg-base-200/50 transition-colors ${className}`}\n    >\n      <div className=\"flex-1 mr-4\">\n        <Text size=\"sm\">{label}</Text>\n        {helpText && (\n          <Text size=\"xs\" variant=\"muted\" className=\"mt-1\">\n            {helpText}\n          </Text>\n        )}\n      </div>\n      <div className=\"shrink-0\">{children}</div>\n    </div>\n  );\n};\n\nSettingItem.displayName = 'SettingItem';\n\nexport default SettingItem;\n"],"names":[],"mappings":";;AAkDO,MAAM,cAAc,CAAC,EAAE,OAAO,UAAU,UAAU,SAAS,cAAc,YAAY,SAA2B;AACrH,MAAI,WAAW,YAAY;AACzB,WACE,qBAAC,OAAA,EAAI,WAAW,aAAa,SAAS,IACpC,UAAA;AAAA,MAAA,qBAAC,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,QAAO,UACpB,UAAA,OACH;AAAA,QACC,gCACE,MAAA,EAAK,MAAK,MAAK,SAAQ,SAAQ,WAAU,QACvC,UAAA,SAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MACC;AAAA,IAAA,GACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iGAAiG,SAAS;AAAA,MAErH,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAK,MAAK,MAAM,UAAA,OAAM;AAAA,UACtB,gCACE,MAAA,EAAK,MAAK,MAAK,SAAQ,SAAQ,WAAU,QACvC,UAAA,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACA,oBAAC,OAAA,EAAI,WAAU,YAAY,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;AAEA,YAAY,cAAc;"}

package/dist/components/layout/settings-page/settings-page.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export interface SettingsPageProps {
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Settings sections */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * SettingsPage - Consistent wrapper for settings pages
+ *
+ * Provides standard layout and styling for settings/preferences pages.
+ * Use with SettingsSection and SettingItem for complete consistency.
+ *
+ * @example
+ * ```tsx
+ * <SettingsPage
+ *   title="Privacy Settings"
+ *   description="Control your privacy and data sharing preferences"
+ * >
+ *   <SettingsSection title="Profile Visibility">
+ *     <SettingItem label="Make profile visible">
+ *       <Switch checked={visible} onChange={handleChange} />
+ *     </SettingItem>
+ *   </SettingsSection>
+ * </SettingsPage>
+ * ```
+ */
+export declare const SettingsPage: {
+    ({ title, description, children, className }: SettingsPageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SettingsPage;
+//# sourceMappingURL=settings-page.d.ts.map

package/dist/components/layout/settings-page/settings-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/settings-page/settings-page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,WAAW,iBAAiB;IAChC,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY;kDAAsD,iBAAiB;;CAW/F,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/components/layout/settings-page/settings-page.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Heading from "../../typography/heading/heading.js";
+import Text from "../../typography/text/text.js";
+import Stack from "../stack/stack.js";
+const SettingsPage = ({ title, description, children, className = "" }) => {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: "lg", className, children: [
+    /* @__PURE__ */ jsxs(Stack, { spacing: "sm", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 1, children: title }),
+      description && /* @__PURE__ */ jsx(Text, { variant: "muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { spacing: "xl", children })
+  ] });
+};
+SettingsPage.displayName = "SettingsPage";
+export {
+  SettingsPage
+};
+//# sourceMappingURL=settings-page.js.map

package/dist/components/layout/settings-page/settings-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.js","sources":["../../../../src/components/layout/settings-page/settings-page.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport Heading from '../../typography/heading/heading';\nimport Text from '../../typography/text/text';\nimport Stack from '../stack/stack';\n\nexport interface SettingsPageProps {\n  /** Page title */\n  title: string;\n  /** Page description */\n  description?: string;\n  /** Settings sections */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * SettingsPage - Consistent wrapper for settings pages\n *\n * Provides standard layout and styling for settings/preferences pages.\n * Use with SettingsSection and SettingItem for complete consistency.\n *\n * @example\n * ```tsx\n * <SettingsPage\n *   title=\"Privacy Settings\"\n *   description=\"Control your privacy and data sharing preferences\"\n * >\n *   <SettingsSection title=\"Profile Visibility\">\n *     <SettingItem label=\"Make profile visible\">\n *       <Switch checked={visible} onChange={handleChange} />\n *     </SettingItem>\n *   </SettingsSection>\n * </SettingsPage>\n * ```\n */\nexport const SettingsPage = ({ title, description, children, className = '' }: SettingsPageProps) => {\n  return (\n    <Stack spacing=\"lg\" className={className}>\n      <Stack spacing=\"sm\">\n        <Heading level={1}>{title}</Heading>\n        {description && <Text variant=\"muted\">{description}</Text>}\n      </Stack>\n\n      <Stack spacing=\"xl\">{children}</Stack>\n    </Stack>\n  );\n};\n\nSettingsPage.displayName = 'SettingsPage';\n\nexport default SettingsPage;\n"],"names":[],"mappings":";;;;AAqCO,MAAM,eAAe,CAAC,EAAE,OAAO,aAAa,UAAU,YAAY,SAA4B;AACnG,SACE,qBAAC,OAAA,EAAM,SAAQ,MAAK,WAClB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,SAAQ,MACb,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAQ,OAAO,GAAI,UAAA,OAAM;AAAA,MACzB,eAAe,oBAAC,MAAA,EAAK,SAAQ,SAAS,UAAA,YAAA,CAAY;AAAA,IAAA,GACrD;AAAA,IAEA,oBAAC,OAAA,EAAM,SAAQ,MAAM,SAAA,CAAS;AAAA,EAAA,GAChC;AAEJ;AAEA,aAAa,cAAc;"}

package/dist/components/layout/settings-page/settings-section.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export interface SettingsSectionProps {
+    /** Section title */
+    title: string;
+    /** Section description (optional) */
+    description?: string;
+    /** Setting items or custom content */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * SettingsSection - Group related settings together
+ *
+ * Creates a visually distinct section within a SettingsPage.
+ * Use with SettingItem components for individual settings.
+ *
+ * @example
+ * ```tsx
+ * <SettingsSection
+ *   title="Appearance"
+ *   description="Customize how the app looks"
+ * >
+ *   <SettingItem label="Theme">
+ *     <FormSelect value={theme}>...</FormSelect>
+ *   </SettingItem>
+ * </SettingsSection>
+ * ```
+ */
+export declare const SettingsSection: {
+    ({ title, description, children, className }: SettingsSectionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SettingsSection;
+//# sourceMappingURL=settings-section.d.ts.map

package/dist/components/layout/settings-page/settings-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/settings-page/settings-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,MAAM,WAAW,oBAAoB;IACnC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe;kDAAsD,oBAAoB;;CAgBrG,CAAC;AAIF,eAAe,eAAe,CAAC"}