@ankhorage/zora 2.4.8 → 2.5.1

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\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/useZoraTheme.d.ts

@@ -1,7 +1,7 @@
 export declare function useZoraTheme(): {
     theme: import("@ankhorage/surface").SurfaceTheme;
     mode: "light" | "dark";
-    setThemeConfig: (config: Partial<import("@ankhorage/contracts").ThemeConfig>) => void;
+    setThemeConfig: (config: Partial<import("@ankhorage/surface").ThemeConfig>) => void;
     setMode: (mode: "light" | "dark") => void;
     _hasProvider?: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "2.4.8",
+  "version": "2.5.1",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.7",
-    "@ankhorage/contracts": "^1.7.0",
+    "@ankhorage/contracts": "^1.12.0",
     "@ankhorage/surface": "^2.0.2"
   },
   "files": [
@@ -63,6 +63,13 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./metadata": {
+      "react-native": "./src/metadata/index.ts",
+      "browser": "./src/metadata/index.ts",
+      "types": "./dist/metadata/index.d.ts",
+      "import": "./dist/metadata/index.js",
+      "default": "./dist/metadata/index.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {

package/src/index.ts

@@ -194,6 +194,7 @@ export { SidebarLayout } from './layout/sidebar-layout';
 export type { TopbarLayoutProps } from './layout/topbar-layout';
 export { TopbarLayout } from './layout/topbar-layout';
 export type {
+  ZoraBindableComponentType,
   ZoraComponentBlueprint,
   ZoraComponentCategory,
   ZoraComponentEventMeta,
@@ -209,7 +210,7 @@ export type {
   ZoraComponentPropValue,
   ZoraComponentSlotMeta,
 } from './metadata';
-export { ZORA_COMPONENT_META } from './metadata';
+export { ZORA_BINDABLE_COMPONENT_META, ZORA_COMPONENT_META } from './metadata';
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,
@@ -287,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/metadata/bindableComponentMeta.test.ts

@@ -0,0 +1,18 @@
+import type { UiComponentMetaRegistry } from '@ankhorage/contracts';
+import { describe, expect, it } from 'bun:test';
+
+import { ZORA_BINDABLE_COMPONENT_META } from './bindableComponentMeta';
+
+describe('ZORA bindable component metadata', () => {
+  it('matches the shared UI metadata registry shape', () => {
+    const registry: UiComponentMetaRegistry = ZORA_BINDABLE_COMPONENT_META;
+
+    expect(registry.Text?.bindings?.props?.text?.value.type).toBe('string');
+    expect(registry.Heading?.bindings?.props?.text?.value.type).toBe('string');
+    expect(registry.Button?.bindings?.props?.children?.value.type).toBe('string');
+    expect(registry.Input?.bindings?.props?.value?.value.type).toBe('string');
+    expect(registry.Select?.bindings?.props?.value?.value.type).toBe('string');
+    expect(registry.Image?.bindings?.props?.source?.value.type).toBe('imageAsset');
+    expect(registry.DataTable?.bindings?.props?.rows?.value.type).toBe('array');
+  });
+});

package/src/metadata/bindableComponentMeta.ts

@@ -0,0 +1,476 @@
+import type { UiComponentMetaRegistry } from '@ankhorage/contracts';
+
+export const ZORA_BINDABLE_COMPONENT_META = {
+  Text: {
+    name: 'Text',
+    category: 'component',
+    description: 'Displays app-facing text content.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        text: {
+          label: 'Text',
+          description: 'Text content rendered by the component.',
+          value: { type: 'string' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+    },
+    props: {
+      text: {
+        type: 'string',
+        category: 'Content',
+        label: 'Text',
+      },
+    },
+  },
+  Heading: {
+    name: 'Heading',
+    category: 'component',
+    description: 'Displays semantic heading text.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        text: {
+          label: 'Text',
+          description: 'Heading text rendered by the component.',
+          value: { type: 'string' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+    },
+    props: {
+      text: {
+        type: 'string',
+        category: 'Content',
+        label: 'Text',
+      },
+    },
+  },
+  Button: {
+    name: 'Button',
+    category: 'component',
+    description: 'Runs an action when pressed.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        children: {
+          label: 'Label',
+          description: 'Button label text.',
+          value: { type: 'string' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+        disabled: {
+          label: 'Disabled',
+          description: 'Whether the button is disabled.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+      events: {
+        press: {
+          label: 'Press',
+          description: 'Runs when the button is pressed.',
+          payload: {
+            eventType: 'button.press',
+            fields: [],
+          },
+        },
+      },
+    },
+    events: {
+      press: {
+        label: 'Press',
+        eventType: 'button.press',
+        description: 'Emitted when the button action runs.',
+        payloadFields: [],
+      },
+    },
+    props: {
+      children: {
+        type: 'string',
+        category: 'Content',
+        label: 'Label',
+      },
+      disabled: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Disabled',
+      },
+    },
+  },
+  Image: {
+    name: 'Image',
+    category: 'component',
+    description: 'Displays an image asset or remote image source.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        source: {
+          label: 'Source',
+          description: 'Image source or asset descriptor.',
+          value: {
+            type: 'imageAsset',
+            fields: [
+              { path: 'uri', type: 'string', label: 'URI' },
+              { path: 'width', type: 'number', label: 'Width' },
+              { path: 'height', type: 'number', label: 'Height' },
+              { path: 'alt', type: 'string', label: 'Alt text' },
+            ],
+          },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+    },
+    props: {
+      source: {
+        type: 'imageAsset',
+        category: 'Content',
+        label: 'Source',
+      },
+    },
+  },
+  Input: {
+    name: 'Input',
+    category: 'component',
+    description: 'Captures a single-line string value.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        value: {
+          label: 'Value',
+          description: 'Current input value.',
+          value: { type: 'string' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+        disabled: {
+          label: 'Disabled',
+          description: 'Whether the input is disabled.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+      events: {
+        changeText: {
+          label: 'Change text',
+          description: 'Runs when the input value changes.',
+          payload: {
+            eventType: 'input.changeText',
+            fields: [{ path: 'value', type: 'string', label: 'Value' }],
+          },
+        },
+      },
+    },
+    events: {
+      changeText: {
+        label: 'Change text',
+        eventType: 'input.changeText',
+        description: 'Emitted when the input value changes.',
+        payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+      },
+    },
+    props: {
+      value: {
+        type: 'string',
+        category: 'Content',
+        label: 'Value',
+      },
+      disabled: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Disabled',
+      },
+    },
+  },
+  Textarea: {
+    name: 'Textarea',
+    category: 'component',
+    description: 'Captures a multiline string value.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        value: {
+          label: 'Value',
+          description: 'Current textarea value.',
+          value: { type: 'string' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+        disabled: {
+          label: 'Disabled',
+          description: 'Whether the textarea is disabled.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+      events: {
+        changeText: {
+          label: 'Change text',
+          description: 'Runs when the textarea value changes.',
+          payload: {
+            eventType: 'textarea.changeText',
+            fields: [{ path: 'value', type: 'string', label: 'Value' }],
+          },
+        },
+      },
+    },
+    events: {
+      changeText: {
+        label: 'Change text',
+        eventType: 'textarea.changeText',
+        description: 'Emitted when the textarea value changes.',
+        payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+      },
+    },
+    props: {
+      value: {
+        type: 'string',
+        category: 'Content',
+        label: 'Value',
+      },
+      disabled: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Disabled',
+      },
+    },
+  },
+  Select: {
+    name: 'Select',
+    category: 'component',
+    description: 'Captures one selected string value.',
+    directManifestNode: false,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        value: {
+          label: 'Value',
+          description: 'Current selected value.',
+          value: { type: 'string' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+        disabled: {
+          label: 'Disabled',
+          description: 'Whether the select is disabled.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+      events: {
+        valueChange: {
+          label: 'Value change',
+          description: 'Runs when the selected value changes.',
+          payload: {
+            eventType: 'select.valueChange',
+            fields: [{ path: 'value', type: 'string', label: 'Value' }],
+          },
+        },
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        eventType: 'select.valueChange',
+        description: 'Emitted when the selected value changes.',
+        payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+      },
+    },
+    note: 'Form control component; not represented as a manifest node in v1.',
+    props: {
+      value: {
+        type: 'string',
+        category: 'Content',
+        label: 'Value',
+      },
+      disabled: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Disabled',
+      },
+    },
+  },
+  Checkbox: {
+    name: 'Checkbox',
+    category: 'component',
+    description: 'Captures a boolean checked state.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        checked: {
+          label: 'Checked',
+          description: 'Current checked state.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+        disabled: {
+          label: 'Disabled',
+          description: 'Whether the checkbox is disabled.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+      events: {
+        checkedChange: {
+          label: 'Checked change',
+          description: 'Runs when checked state changes.',
+          payload: {
+            eventType: 'checkbox.checkedChange',
+            fields: [{ path: 'checked', type: 'boolean', label: 'Checked' }],
+          },
+        },
+      },
+    },
+    events: {
+      checkedChange: {
+        label: 'Checked change',
+        eventType: 'checkbox.checkedChange',
+        description: 'Emitted when the checked state changes.',
+        payloadFields: [{ path: 'checked', type: 'boolean', label: 'Checked' }],
+      },
+    },
+    props: {
+      checked: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Checked',
+      },
+      disabled: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Disabled',
+      },
+    },
+  },
+  SwitchField: {
+    name: 'SwitchField',
+    category: 'pattern',
+    description: 'Captures a boolean switch value with a label.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        value: {
+          label: 'Value',
+          description: 'Current switch value.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+        disabled: {
+          label: 'Disabled',
+          description: 'Whether the switch is disabled.',
+          value: { type: 'boolean' },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+      events: {
+        valueChange: {
+          label: 'Value change',
+          description: 'Runs when the switch value changes.',
+          payload: {
+            eventType: 'switchField.valueChange',
+            fields: [{ path: 'value', type: 'boolean', label: 'Value' }],
+          },
+        },
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        eventType: 'switchField.valueChange',
+        description: 'Emitted when the switch value changes.',
+        payloadFields: [{ path: 'value', type: 'boolean', label: 'Value' }],
+      },
+    },
+    props: {
+      value: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Value',
+      },
+      disabled: {
+        type: 'boolean',
+        category: 'State',
+        label: 'Disabled',
+      },
+    },
+  },
+  List: {
+    name: 'List',
+    category: 'pattern',
+    description: 'Renders a collection of list items.',
+    directManifestNode: true,
+    allowedChildren: ['ListSection', 'ListRow'],
+    bindings: {
+      props: {
+        items: {
+          label: 'Items',
+          description: 'Collection rendered by the list.',
+          value: {
+            type: 'array',
+            itemType: 'object',
+          },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+    },
+    props: {
+      items: {
+        type: 'array',
+        category: 'Data',
+        label: 'Items',
+      },
+    },
+  },
+  DataTable: {
+    name: 'DataTable',
+    category: 'component',
+    description: 'Renders tabular records.',
+    directManifestNode: true,
+    allowedChildren: [],
+    bindings: {
+      props: {
+        rows: {
+          label: 'Rows',
+          description: 'Rows rendered by the table.',
+          value: {
+            type: 'array',
+            itemType: 'record',
+          },
+          acceptsFallback: true,
+          acceptsTransforms: true,
+        },
+      },
+    },
+    props: {
+      rows: {
+        type: 'array',
+        category: 'Data',
+        label: 'Rows',
+      },
+    },
+  },
+} as const satisfies UiComponentMetaRegistry;
+
+export type ZoraBindableComponentType = keyof typeof ZORA_BINDABLE_COMPONENT_META;

package/src/metadata/index.ts

@@ -1,3 +1,5 @@
+export type { ZoraBindableComponentType } from './bindableComponentMeta';
+export { ZORA_BINDABLE_COMPONENT_META } from './bindableComponentMeta';
 export { ZORA_COMPONENT_META } from './componentMeta';
 export type {
   ZoraComponentBlueprint,