@caffeinebounce/ui 0.62.2

package/dist/settings.d.ts

@@ -0,0 +1,216 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+
+interface SettingsPage {
+    /** Unique page/tab identifier */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Optional icon for the tab */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Page content (typically contains SettingsSection components) */
+    content: ReactNode;
+    /** Show loading state for this page */
+    loading?: boolean;
+}
+interface SettingsLayoutProps {
+    /** Page title */
+    title?: string;
+    /** Page description */
+    description?: string;
+    /** Settings pages/tabs with their content */
+    pages: SettingsPage[];
+    /** Default active page (defaults to first page) */
+    defaultPage?: string;
+    /** Sync active tab with URL hash */
+    syncWithHash?: boolean;
+    /** Tab orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Additional class name for the container */
+    className?: string;
+    /** Container size */
+    containerSize?: "default" | "narrow" | "wide" | "full";
+}
+/**
+ * SettingsLayout - A complete settings page layout with tabs
+ *
+ * Apps define pages (tabs) that contain sections of related settings.
+ * - **Pages/Tabs**: Top-level navigation (Account, Accessibility, etc.)
+ * - **Sections**: Groups of related settings within a page (use SettingsSection)
+ * - **Rows**: Individual settings with controls (use SettingsRow)
+ *
+ * @example
+ * ```tsx
+ * <SettingsLayout
+ *   title="Settings"
+ *   description="Manage your account and preferences"
+ *   pages={[
+ *     {
+ *       id: "accessibility",
+ *       label: "Accessibility",
+ *       icon: Accessibility,
+ *       content: (
+ *         <>
+ *           <SettingsSection title="Display" description="Visual preferences">
+ *             <SettingsRow label="Reduce motion" htmlFor="reduce-motion">
+ *               <Switch id="reduce-motion" />
+ *             </SettingsRow>
+ *           </SettingsSection>
+ *           <SettingsSection title="Keyboard" description="Keyboard preferences">
+ *             <SettingsRow label="Show shortcuts" htmlFor="shortcuts">
+ *               <Switch id="shortcuts" />
+ *             </SettingsRow>
+ *           </SettingsSection>
+ *         </>
+ *       ),
+ *     },
+ *   ]}
+ *   syncWithHash
+ * />
+ * ```
+ */
+declare function SettingsLayout({ title, description, pages, defaultPage, syncWithHash, orientation, className, containerSize, }: SettingsLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsRowProps {
+    /** Setting label */
+    label: string;
+    /** Setting description */
+    description?: string;
+    /** The control (Switch, Select, etc.) */
+    children: ReactNode;
+    /** HTML id for the control (for label association) */
+    htmlFor?: string;
+    /** Additional class name */
+    className?: string;
+    /** Layout direction */
+    layout?: "horizontal" | "vertical";
+}
+/**
+ * SettingsRow - A single setting with label, description, and control
+ *
+ * @example
+ * ```tsx
+ * <SettingsRow
+ *   label="Show keyboard shortcuts"
+ *   description="Display keyboard shortcut hints throughout the interface"
+ *   htmlFor="keyboard-shortcuts"
+ * >
+ *   <Switch
+ *     id="keyboard-shortcuts"
+ *     checked={showShortcuts}
+ *     onCheckedChange={setShowShortcuts}
+ *   />
+ * </SettingsRow>
+ * ```
+ */
+declare function SettingsRow({ label, description, children, htmlFor, className, layout, }: SettingsRowProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsSectionProps {
+    /** Section title */
+    title: string;
+    /** Section description */
+    description?: string;
+    /** Section content - typically setting rows/controls */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Whether to wrap in a card (default: true) */
+    card?: boolean;
+}
+/**
+ * SettingsSection - A group of related settings within a tab
+ *
+ * Use this to organize settings into logical groups. Each section
+ * has a title, optional description, and contains setting controls.
+ *
+ * @example
+ * ```tsx
+ * <SettingsSection
+ *   title="Display"
+ *   description="Control how content is displayed"
+ * >
+ *   <SettingsRow
+ *     label="Reduce motion"
+ *     description="Minimize animations"
+ *   >
+ *     <Switch checked={reduceMotion} onCheckedChange={setReduceMotion} />
+ *   </SettingsRow>
+ * </SettingsSection>
+ * ```
+ */
+declare function SettingsSection({ title, description, children, className, card, }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsTabContentProps {
+    /** Tab ID that this content belongs to */
+    tabId: string;
+    /** Show loading spinner */
+    loading?: boolean;
+    /** Tab content */
+    children: ReactNode;
+}
+/**
+ * SettingsTabContent - Wrapper for individual tab content panels
+ *
+ * @example
+ * ```tsx
+ * <SettingsTabContent tabId="account" loading={isLoading}>
+ *   <AccountSettings />
+ * </SettingsTabContent>
+ * ```
+ */
+declare function SettingsTabContent({ tabId, loading, children, }: SettingsTabContentProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsTab {
+    /** Unique tab identifier */
+    id: string;
+    /** Tab label text */
+    label: string;
+    /** Optional icon component */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+}
+interface SettingsTabsProps {
+    /** List of tabs to display */
+    tabs: SettingsTab[];
+    /** Currently active tab id */
+    activeTab: string;
+    /** Callback when tab changes */
+    onTabChange: (tabId: string) => void;
+    /** Tab content (use SettingsTabContent components) */
+    children: ReactNode;
+    /** Sync active tab with URL hash */
+    syncWithHash?: boolean;
+    /** Tab orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Additional class name for the container */
+    className?: string;
+}
+/**
+ * SettingsTabs - A reusable tabbed settings layout component
+ *
+ * @example
+ * ```tsx
+ * <SettingsTabs
+ *   tabs={[
+ *     { id: 'account', label: 'Account', icon: User },
+ *     { id: 'security', label: 'Security', icon: Shield },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   syncWithHash
+ * >
+ *   <SettingsTabContent tabId="account">
+ *     <AccountSettings />
+ *   </SettingsTabContent>
+ *   <SettingsTabContent tabId="security">
+ *     <SecuritySettings />
+ *   </SettingsTabContent>
+ * </SettingsTabs>
+ * ```
+ */
+declare function SettingsTabs({ tabs, activeTab, onTabChange, children, syncWithHash, orientation, className, }: SettingsTabsProps): react_jsx_runtime.JSX.Element;
+
+export { SettingsLayout, type SettingsLayoutProps, type SettingsPage, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, type SettingsTab, SettingsTabContent, type SettingsTabContentProps, SettingsTabs, type SettingsTabsProps };

package/dist/settings.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var chunkZOA7B32D_js = require('./chunk-ZOA7B32D.js');
+require('./chunk-EYJJQVV4.js');
+require('./chunk-33JR5SYE.js');
+require('./chunk-MVYRNJA6.js');
+require('./chunk-C4UT5V3P.js');
+require('./chunk-HMAMMC72.js');
+require('./chunk-6TGV2DNP.js');
+require('./chunk-Q256HRYD.js');
+require('./chunk-ADIDI7AJ.js');
+
+
+
+Object.defineProperty(exports, "SettingsLayout", {
+  enumerable: true,
+  get: function () { return chunkZOA7B32D_js.SettingsLayout; }
+});
+Object.defineProperty(exports, "SettingsRow", {
+  enumerable: true,
+  get: function () { return chunkZOA7B32D_js.SettingsRow; }
+});
+Object.defineProperty(exports, "SettingsSection", {
+  enumerable: true,
+  get: function () { return chunkZOA7B32D_js.SettingsSection; }
+});
+Object.defineProperty(exports, "SettingsTabContent", {
+  enumerable: true,
+  get: function () { return chunkZOA7B32D_js.SettingsTabContent; }
+});
+Object.defineProperty(exports, "SettingsTabs", {
+  enumerable: true,
+  get: function () { return chunkZOA7B32D_js.SettingsTabs; }
+});

package/dist/settings.mjs

@@ -0,0 +1,9 @@
+export { SettingsLayout, SettingsRow, SettingsSection, SettingsTabContent, SettingsTabs } from './chunk-OLAAXLXY.mjs';
+import './chunk-YL7RZRHM.mjs';
+import './chunk-KHCC5UKW.mjs';
+import './chunk-GMBGWOCR.mjs';
+import './chunk-RVEFPVZF.mjs';
+import './chunk-HBLKVQIQ.mjs';
+import './chunk-VBD4Q5LL.mjs';
+import './chunk-MHZXUOGN.mjs';
+import './chunk-IMKLN273.mjs';

package/dist/shared-Dqn36QHZ.d.cts

@@ -0,0 +1,4 @@
+type MarketingSectionTone = "default" | "muted" | "accent";
+type MarketingSectionPadding = "sm" | "md" | "lg";
+
+export type { MarketingSectionPadding as M, MarketingSectionTone as a };

package/dist/shared-Dqn36QHZ.d.ts

@@ -0,0 +1,4 @@
+type MarketingSectionTone = "default" | "muted" | "accent";
+type MarketingSectionPadding = "sm" | "md" | "lg";
+
+export type { MarketingSectionPadding as M, MarketingSectionTone as a };