@ankhorage/zora 2.5.0 → 2.5.2

package/dist/patterns/responsive-panel/ResponsivePanel.d.ts

@@ -1,4 +1,16 @@
 import React from 'react';
 import type { ResponsivePanelProps } from './types';
+/***
+ * Adaptive secondary surface that can render as an inline panel, drawer, or modal.
+ *
+ * Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
+ * content to work across compact mobile screens and wider desktop layouts.
+ *
+ * @readme
+ * @example Scrollable wide panel
+ * ```tsx
+ * <ResponsivePanel open title="APIs" size="wide" scroll="content">...</ResponsivePanel>
+ * ```
+ */
 export declare const ResponsivePanel: (props: ResponsivePanelProps) => React.ReactElement | null;
 //# sourceMappingURL=ResponsivePanel.d.ts.map

package/dist/patterns/responsive-panel/ResponsivePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.d.ts","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/ResponsivePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAoEpD,eAAO,MAAM,eAAe,4DAA2C,CAAC"}
+{"version":3,"file":"ResponsivePanel.d.ts","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/ResponsivePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,oBAAoB,EAA8C,MAAM,SAAS,CAAC;AA0IhG;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,4DAA2C,CAAC"}

package/dist/patterns/responsive-panel/ResponsivePanel.js

@@ -1,27 +1,92 @@
 import React from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import { Drawer } from '../../components/drawer';
 import { Modal } from '../../components/modal';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
-function ResponsivePanelInner({ themeId: _themeId, mode: _mode, title, description, actions, footer, children, open, onOpenChange, side = 'right', desktopMode = 'inline', mobileMode = 'drawer', compact = true, testID, }) {
+function resolvePanelWidth(size) {
+    switch (size) {
+        case 'compact':
+            return 300;
+        case 'wide':
+            return 420;
+        case 'extraWide':
+            return 560;
+        case 'default':
+        default:
+            return 360;
+    }
+}
+function resolveModalWidth(size) {
+    switch (size) {
+        case 'compact':
+            return 'narrow';
+        case 'wide':
+        case 'extraWide':
+            return 'wide';
+        case 'default':
+            return 'default';
+        default:
+            return undefined;
+    }
+}
+function renderPanelBody(children, scroll) {
+    if (children == null)
+        return null;
+    if (scroll === 'content') {
+        return (<ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator style={styles.scrollBody}>
+        {children}
+      </ScrollView>);
+    }
+    return children;
+}
+function ResponsivePanelInner({ themeId: _themeId, mode: _mode, title, description, actions, footer, children, open, onOpenChange, side = 'right', desktopMode = 'inline', mobileMode = 'drawer', compact = true, size, scroll = 'none', testID, }) {
     if (!open)
         return null;
+    const body = renderPanelBody(children, scroll);
     // For now, we assume desktopMode determines the rendering.
     // In a real app, this would react to window size.
     if (desktopMode === 'floating') {
         if (mobileMode === 'modal') {
-            return (<Modal description={description} footer={footer} onDismiss={() => onOpenChange(false)} testID={testID} title={title} visible={open}>
-          {children}
+            const modalWidth = resolveModalWidth(size);
+            return (<Modal description={description} footer={footer} onDismiss={() => onOpenChange(false)} testID={testID} title={title} visible={open} width={modalWidth}>
+          {body}
         </Modal>);
         }
         return (<Drawer description={description} footer={footer} onDismiss={() => onOpenChange(false)} position={side} testID={testID} title={title} visible={open}>
-        {children}
+        {body}
       </Drawer>);
     }
-    // default: inline -> Panel
-    return (<Panel actions={actions} compact={compact} description={description} footer={footer} testID={testID} title={title}>
-      {children}
+    const panel = (<Panel actions={actions} compact={compact} description={description} footer={footer} testID={testID} title={title}>
+      {body}
     </Panel>);
+    if (size === undefined)
+        return panel;
+    return <View style={[styles.inlineSizedPanel, { width: resolvePanelWidth(size) }]}>{panel}</View>;
 }
+const styles = StyleSheet.create({
+    inlineSizedPanel: {
+        maxWidth: '100%',
+    },
+    scrollBody: {
+        flexGrow: 0,
+        maxHeight: '100%',
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+});
+/***
+ * Adaptive secondary surface that can render as an inline panel, drawer, or modal.
+ *
+ * Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
+ * content to work across compact mobile screens and wider desktop layouts.
+ *
+ * @readme
+ * @example Scrollable wide panel
+ * ```tsx
+ * <ResponsivePanel open title="APIs" size="wide" scroll="content">...</ResponsivePanel>
+ * ```
+ */
 export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);
 //# sourceMappingURL=ResponsivePanel.js.map

package/dist/patterns/responsive-panel/ResponsivePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.js","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/ResponsivePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,SAAS,oBAAoB,CAAC,EAC5B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,IAAI,GAAG,OAAO,EACd,WAAW,GAAG,QAAQ,EACtB,UAAU,GAAG,QAAQ,EACrB,OAAO,GAAG,IAAI,EACd,MAAM,GACe;IACrB,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,2DAA2D;IAC3D,kDAAkD;IAClD,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QAC/B,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;YAC3B,OAAO,CACL,CAAC,KAAK,CACJ,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CACrC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,IAAI,CAAC,CAEd;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,KAAK,CAAC,CACT,CAAC;QACJ,CAAC;QAED,OAAO,CACL,CAAC,MAAM,CACL,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CACrC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,IAAI,CAAC,CAEd;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC;IAED,2BAA2B;IAC3B,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CAEb;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Drawer } from '../../components/drawer';\nimport { Modal } from '../../components/modal';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { ResponsivePanelProps } from './types';\n\nfunction ResponsivePanelInner({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  actions,\n  footer,\n  children,\n  open,\n  onOpenChange,\n  side = 'right',\n  desktopMode = 'inline',\n  mobileMode = 'drawer',\n  compact = true,\n  testID,\n}: ResponsivePanelProps) {\n  if (!open) return null;\n\n  // For now, we assume desktopMode determines the rendering.\n  // In a real app, this would react to window size.\n  if (desktopMode === 'floating') {\n    if (mobileMode === 'modal') {\n      return (\n        <Modal\n          description={description}\n          footer={footer}\n          onDismiss={() => onOpenChange(false)}\n          testID={testID}\n          title={title}\n          visible={open}\n        >\n          {children}\n        </Modal>\n      );\n    }\n\n    return (\n      <Drawer\n        description={description}\n        footer={footer}\n        onDismiss={() => onOpenChange(false)}\n        position={side}\n        testID={testID}\n        title={title}\n        visible={open}\n      >\n        {children}\n      </Drawer>\n    );\n  }\n\n  // default: inline -> Panel\n  return (\n    <Panel\n      actions={actions}\n      compact={compact}\n      description={description}\n      footer={footer}\n      testID={testID}\n      title={title}\n    >\n      {children}\n    </Panel>\n  );\n}\n\nexport const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);\n"]}
+{"version":3,"file":"ResponsivePanel.js","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/ResponsivePanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ScrollView, StyleSheet, View } from 'react-native';\n\nimport { Drawer } from '../../components/drawer';\nimport { Modal } from '../../components/modal';\nimport type { ZoraContentWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { ResponsivePanelProps, ResponsivePanelScroll, ResponsivePanelSize } from './types';\n\nfunction resolvePanelWidth(size: ResponsivePanelSize): number {\n  switch (size) {\n    case 'compact':\n      return 300;\n    case 'wide':\n      return 420;\n    case 'extraWide':\n      return 560;\n    case 'default':\n    default:\n      return 360;\n  }\n}\n\nfunction resolveModalWidth(size: ResponsivePanelSize | undefined): ZoraContentWidth | undefined {\n  switch (size) {\n    case 'compact':\n      return 'narrow';\n    case 'wide':\n    case 'extraWide':\n      return 'wide';\n    case 'default':\n      return 'default';\n    default:\n      return undefined;\n  }\n}\n\nfunction renderPanelBody(children: React.ReactNode, scroll: ResponsivePanelScroll) {\n  if (children == null) return null;\n\n  if (scroll === 'content') {\n    return (\n      <ScrollView\n        contentContainerStyle={styles.scrollContent}\n        keyboardShouldPersistTaps=\"handled\"\n        showsVerticalScrollIndicator\n        style={styles.scrollBody}\n      >\n        {children}\n      </ScrollView>\n    );\n  }\n\n  return children;\n}\n\nfunction ResponsivePanelInner({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  actions,\n  footer,\n  children,\n  open,\n  onOpenChange,\n  side = 'right',\n  desktopMode = 'inline',\n  mobileMode = 'drawer',\n  compact = true,\n  size,\n  scroll = 'none',\n  testID,\n}: ResponsivePanelProps) {\n  if (!open) return null;\n\n  const body = renderPanelBody(children, scroll);\n\n  // For now, we assume desktopMode determines the rendering.\n  // In a real app, this would react to window size.\n  if (desktopMode === 'floating') {\n    if (mobileMode === 'modal') {\n      const modalWidth = resolveModalWidth(size);\n\n      return (\n        <Modal\n          description={description}\n          footer={footer}\n          onDismiss={() => onOpenChange(false)}\n          testID={testID}\n          title={title}\n          visible={open}\n          width={modalWidth}\n        >\n          {body}\n        </Modal>\n      );\n    }\n\n    return (\n      <Drawer\n        description={description}\n        footer={footer}\n        onDismiss={() => onOpenChange(false)}\n        position={side}\n        testID={testID}\n        title={title}\n        visible={open}\n      >\n        {body}\n      </Drawer>\n    );\n  }\n\n  const panel = (\n    <Panel\n      actions={actions}\n      compact={compact}\n      description={description}\n      footer={footer}\n      testID={testID}\n      title={title}\n    >\n      {body}\n    </Panel>\n  );\n\n  if (size === undefined) return panel;\n\n  return <View style={[styles.inlineSizedPanel, { width: resolvePanelWidth(size) }]}>{panel}</View>;\n}\n\nconst styles = StyleSheet.create({\n  inlineSizedPanel: {\n    maxWidth: '100%',\n  },\n  scrollBody: {\n    flexGrow: 0,\n    maxHeight: '100%',\n  },\n  scrollContent: {\n    flexGrow: 1,\n  },\n});\n\n/***\n * Adaptive secondary surface that can render as an inline panel, drawer, or modal.\n *\n * Use `ResponsivePanel` for tool panes and admin/detail flows that need the same\n * content to work across compact mobile screens and wider desktop layouts.\n *\n * @readme\n * @example Scrollable wide panel\n * ```tsx\n * <ResponsivePanel open title=\"APIs\" size=\"wide\" scroll=\"content\">...</ResponsivePanel>\n * ```\n */\nexport const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);\n"]}

package/dist/patterns/responsive-panel/types.d.ts

@@ -3,6 +3,8 @@ import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export type ResponsivePanelSide = 'left' | 'right';
 export type ResponsivePanelDesktopMode = 'inline' | 'floating';
 export type ResponsivePanelMobileMode = 'drawer' | 'modal';
+export type ResponsivePanelSize = 'compact' | 'default' | 'wide' | 'extraWide';
+export type ResponsivePanelScroll = 'none' | 'content';
 export interface ResponsivePanelProps extends ZoraBaseProps {
     title?: React.ReactNode;
     description?: React.ReactNode;
@@ -15,5 +17,7 @@ export interface ResponsivePanelProps extends ZoraBaseProps {
     desktopMode?: ResponsivePanelDesktopMode;
     mobileMode?: ResponsivePanelMobileMode;
     compact?: boolean;
+    size?: ResponsivePanelSize;
+    scroll?: ResponsivePanelScroll;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/patterns/responsive-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC/D,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC/D,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC;AAC/E,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC"}

package/dist/patterns/responsive-panel/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ResponsivePanelSide = 'left' | 'right';\nexport type ResponsivePanelDesktopMode = 'inline' | 'floating';\nexport type ResponsivePanelMobileMode = 'drawer' | 'modal';\n\nexport interface ResponsivePanelProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  side?: ResponsivePanelSide;\n  desktopMode?: ResponsivePanelDesktopMode;\n  mobileMode?: ResponsivePanelMobileMode;\n  compact?: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/responsive-panel/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ResponsivePanelSide = 'left' | 'right';\nexport type ResponsivePanelDesktopMode = 'inline' | 'floating';\nexport type ResponsivePanelMobileMode = 'drawer' | 'modal';\nexport type ResponsivePanelSize = 'compact' | 'default' | 'wide' | 'extraWide';\nexport type ResponsivePanelScroll = 'none' | 'content';\n\nexport interface ResponsivePanelProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  side?: ResponsivePanelSide;\n  desktopMode?: ResponsivePanelDesktopMode;\n  mobileMode?: ResponsivePanelMobileMode;\n  compact?: boolean;\n  size?: ResponsivePanelSize;\n  scroll?: ResponsivePanelScroll;\n}\n"]}

package/dist/theme/ZoraProvider.d.ts

@@ -5,5 +5,17 @@ export interface ZoraProviderProps {
     theme?: ZoraTheme;
     initialMode?: ZoraThemeMode;
 }
+/***
+ * Installs the ZORA theme runtime and underlying Surface theme provider.
+ *
+ * Wrap an app with `ZoraProvider` once near the root so components, patterns,
+ * layouts, and theme hooks resolve the same design tokens and color mode.
+ *
+ * @readme
+ * @example App provider
+ * ```tsx
+ * <ZoraProvider initialMode="light"><App /></ZoraProvider>
+ * ```
+ */
 export declare function ZoraProvider({ children, theme, initialMode, }: ZoraProviderProps): React.JSX.Element;
 //# sourceMappingURL=ZoraProvider.d.ts.map

package/dist/theme/ZoraProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAqB,GACtB,EAAE,iBAAiB,qBAUnB"}
+{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAqB,GACtB,EAAE,iBAAiB,qBAUnB"}

package/dist/theme/ZoraProvider.js

@@ -3,6 +3,18 @@ import React from 'react';
 import { createZoraThemeConfig } from './createZoraThemeConfig';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
 import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
+/***
+ * Installs the ZORA theme runtime and underlying Surface theme provider.
+ *
+ * Wrap an app with `ZoraProvider` once near the root so components, patterns,
+ * layouts, and theme hooks resolve the same design tokens and color mode.
+ *
+ * @readme
+ * @example App provider
+ * ```tsx
+ * <ZoraProvider initialMode="light"><App /></ZoraProvider>
+ * ```
+ */
 export function ZoraProvider({ children, theme = zoraDefaultTheme, initialMode = 'light', }) {
     const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);
     return (<ZoraThemeRuntimeContext.Provider value={runtimeValue}>

package/dist/theme/ZoraProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQpE,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/F,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACnF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  initialMode?: ZoraThemeMode;\n}\n\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>\n        {children}\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQpE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/F,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACnF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  initialMode?: ZoraThemeMode;\n}\n\n/***\n * Installs the ZORA theme runtime and underlying Surface theme provider.\n *\n * Wrap an app with `ZoraProvider` once near the root so components, patterns,\n * layouts, and theme hooks resolve the same design tokens and color mode.\n *\n * @readme\n * @example App provider\n * ```tsx\n * <ZoraProvider initialMode=\"light\"><App /></ZoraProvider>\n * ```\n */\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>\n        {children}\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/components/button/Button.tsx

@@ -20,4 +20,16 @@ function ButtonInner({
   );
 }
 
+/***
+ * Theme-aware action control for primary, secondary, destructive, and neutral actions.
+ *
+ * Use `Button` for explicit user actions that should follow ZORA's semantic color,
+ * variant, and size recipes across React Native and React Native Web.
+ *
+ * @readme
+ * @example Basic action
+ * ```tsx
+ * <Button color="primary" variant="solid" onPress={save}>Save</Button>
+ * ```
+ */
 export const Button = withZoraThemeScope(ButtonInner);

package/src/components/card/Card.tsx

@@ -70,4 +70,16 @@ function CardInner({
   );
 }
 
+/***
+ * Structured content container with built-in heading, description, actions, and footer slots.
+ *
+ * Use `Card` for reusable content blocks that should inherit ZORA spacing,
+ * radius, tone, and responsive header layout without hand-assembling primitives.
+ *
+ * @readme
+ * @example Content card
+ * ```tsx
+ * <Card title="Project" description="Latest activity">...</Card>
+ * ```
+ */
 export const Card = withZoraThemeScope(CardInner);

package/src/components/heading/Heading.tsx

@@ -91,4 +91,16 @@ function HeadingInner({
   );
 }
 
+/***
+ * Structured title primitive for accessible page, section, and card headings.
+ *
+ * `Heading` gives consumers a ZORA-owned title API with semantic levels,
+ * responsive sizes, and theme-aware emphasis while preserving header semantics.
+ *
+ * @readme
+ * @example Section title
+ * ```tsx
+ * <Heading level={2} size="xl">Account settings</Heading>
+ * ```
+ */
 export const Heading = withZoraThemeScope(HeadingInner);

package/src/components/input/Input.tsx

@@ -62,4 +62,16 @@ function InputInner({
   );
 }
 
+/***
+ * Theme-aware text input with semantic sizing and optional leading/trailing icon slots.
+ *
+ * Use `Input` for single-line form controls that need ZORA styling, disabled/read-only
+ * handling, and accessible trailing actions without dropping into Surface directly.
+ *
+ * @readme
+ * @example Search input
+ * ```tsx
+ * <Input placeholder="Search" leadingIcon={{ name: 'search-outline' }} />
+ * ```
+ */
 export const Input = withZoraThemeScope(InputInner);

package/src/components/text/Text.tsx

@@ -88,4 +88,16 @@ function TextInner({
   );
 }
 
+/***
+ * Structured copy primitive for theme-aware app text.
+ *
+ * `Text` owns normal body, caption, label, code, and supporting-copy variants so
+ * consumers do not need to import lower-level Surface typography directly.
+ *
+ * @readme
+ * @example Muted supporting copy
+ * ```tsx
+ * <Text variant="bodySmall" emphasis="muted">Updated just now</Text>
+ * ```
+ */
 export const Text = withZoraThemeScope(TextInner);

package/src/index.ts

@@ -288,7 +288,9 @@ export type {
   ResponsivePanelDesktopMode,
   ResponsivePanelMobileMode,
   ResponsivePanelProps,
+  ResponsivePanelScroll,
   ResponsivePanelSide,
+  ResponsivePanelSize,
 } from './patterns/responsive-panel';
 export { ResponsivePanel } from './patterns/responsive-panel';
 export type { SectionHeaderProps } from './patterns/section-header';

package/src/layout/app-shell/AppShell.tsx

@@ -33,6 +33,18 @@ function AppShellInner({
   );
 }
 
+/***
+ * Root application shell with stable header, content, footer, and overlay slots.
+ *
+ * `AppShell` provides the top-level layout frame for cross-platform apps while
+ * leaving navigation, toolbars, and overlays composable through explicit slots.
+ *
+ * @readme
+ * @example App frame
+ * ```tsx
+ * <AppShell header={<AppBar title="Dashboard" />}>...</AppShell>
+ * ```
+ */
 export const AppShell = withZoraThemeScope(AppShellInner);
 
 const styles = StyleSheet.create({

package/src/patterns/empty-state/EmptyState.tsx

@@ -55,4 +55,16 @@ function EmptyStateInner({
   );
 }
 
+/***
+ * Reusable fallback state for empty lists, missing data, or first-run experiences.
+ *
+ * `EmptyState` combines concise copy with optional primary and secondary actions
+ * so apps can guide users without custom card and button wiring.
+ *
+ * @readme
+ * @example Empty project list
+ * ```tsx
+ * <EmptyState title="No projects yet" primaryAction={{ label: 'Create project', onPress }} />
+ * ```
+ */
 export const EmptyState = withZoraThemeScope(EmptyStateInner);

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -1,10 +1,59 @@
 import React from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { Drawer } from '../../components/drawer';
 import { Modal } from '../../components/modal';
+import type { ZoraContentWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
-import type { ResponsivePanelProps } from './types';
+import type { ResponsivePanelProps, ResponsivePanelScroll, ResponsivePanelSize } from './types';
+
+function resolvePanelWidth(size: ResponsivePanelSize): number {
+  switch (size) {
+    case 'compact':
+      return 300;
+    case 'wide':
+      return 420;
+    case 'extraWide':
+      return 560;
+    case 'default':
+    default:
+      return 360;
+  }
+}
+
+function resolveModalWidth(size: ResponsivePanelSize | undefined): ZoraContentWidth | undefined {
+  switch (size) {
+    case 'compact':
+      return 'narrow';
+    case 'wide':
+    case 'extraWide':
+      return 'wide';
+    case 'default':
+      return 'default';
+    default:
+      return undefined;
+  }
+}
+
+function renderPanelBody(children: React.ReactNode, scroll: ResponsivePanelScroll) {
+  if (children == null) return null;
+
+  if (scroll === 'content') {
+    return (
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator
+        style={styles.scrollBody}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return children;
+}
 
 function ResponsivePanelInner({
   themeId: _themeId,
@@ -20,14 +69,20 @@ function ResponsivePanelInner({
   desktopMode = 'inline',
   mobileMode = 'drawer',
   compact = true,
+  size,
+  scroll = 'none',
   testID,
 }: ResponsivePanelProps) {
   if (!open) return null;
 
+  const body = renderPanelBody(children, scroll);
+
   // For now, we assume desktopMode determines the rendering.
   // In a real app, this would react to window size.
   if (desktopMode === 'floating') {
     if (mobileMode === 'modal') {
+      const modalWidth = resolveModalWidth(size);
+
       return (
         <Modal
           description={description}
@@ -36,8 +91,9 @@ function ResponsivePanelInner({
           testID={testID}
           title={title}
           visible={open}
+          width={modalWidth}
         >
-          {children}
+          {body}
         </Modal>
       );
     }
@@ -52,13 +108,12 @@ function ResponsivePanelInner({
         title={title}
         visible={open}
       >
-        {children}
+        {body}
       </Drawer>
     );
   }
 
-  // default: inline -> Panel
-  return (
+  const panel = (
     <Panel
       actions={actions}
       compact={compact}
@@ -67,9 +122,38 @@ function ResponsivePanelInner({
       testID={testID}
       title={title}
     >
-      {children}
+      {body}
     </Panel>
   );
+
+  if (size === undefined) return panel;
+
+  return <View style={[styles.inlineSizedPanel, { width: resolvePanelWidth(size) }]}>{panel}</View>;
 }
 
+const styles = StyleSheet.create({
+  inlineSizedPanel: {
+    maxWidth: '100%',
+  },
+  scrollBody: {
+    flexGrow: 0,
+    maxHeight: '100%',
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+});
+
+/***
+ * Adaptive secondary surface that can render as an inline panel, drawer, or modal.
+ *
+ * Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
+ * content to work across compact mobile screens and wider desktop layouts.
+ *
+ * @readme
+ * @example Scrollable wide panel
+ * ```tsx
+ * <ResponsivePanel open title="APIs" size="wide" scroll="content">...</ResponsivePanel>
+ * ```
+ */
 export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);

package/src/patterns/responsive-panel/types.ts

@@ -5,6 +5,8 @@ import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export type ResponsivePanelSide = 'left' | 'right';
 export type ResponsivePanelDesktopMode = 'inline' | 'floating';
 export type ResponsivePanelMobileMode = 'drawer' | 'modal';
+export type ResponsivePanelSize = 'compact' | 'default' | 'wide' | 'extraWide';
+export type ResponsivePanelScroll = 'none' | 'content';
 
 export interface ResponsivePanelProps extends ZoraBaseProps {
   title?: React.ReactNode;
@@ -18,4 +20,6 @@ export interface ResponsivePanelProps extends ZoraBaseProps {
   desktopMode?: ResponsivePanelDesktopMode;
   mobileMode?: ResponsivePanelMobileMode;
   compact?: boolean;
+  size?: ResponsivePanelSize;
+  scroll?: ResponsivePanelScroll;
 }

package/src/theme/ZoraProvider.tsx

@@ -12,6 +12,18 @@ export interface ZoraProviderProps {
   initialMode?: ZoraThemeMode;
 }
 
+/***
+ * Installs the ZORA theme runtime and underlying Surface theme provider.
+ *
+ * Wrap an app with `ZoraProvider` once near the root so components, patterns,
+ * layouts, and theme hooks resolve the same design tokens and color mode.
+ *
+ * @readme
+ * @example App provider
+ * ```tsx
+ * <ZoraProvider initialMode="light"><App /></ZoraProvider>
+ * ```
+ */
 export function ZoraProvider({
   children,
   theme = zoraDefaultTheme,