@ankhorage/zora 12.1.0 → 14.0.0

package/dist/theme/ZoraThemeScope.d.ts

@@ -5,5 +5,6 @@ export interface ZoraThemeScopeProps {
     themeId?: ZoraThemeId;
     mode?: ZoraThemeMode;
 }
+/*** Applies nested ZORA theme overrides without installing another Surface theme runtime. */
 export declare function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 //# sourceMappingURL=ZoraThemeScope.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAmCD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,mBAAmB,mSAO9E"}
+{"version":3,"file":"ZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,6FAA6F;AAC7F,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,mBAAmB,mSAO9E"}

package/dist/theme/ZoraThemeScope.js

@@ -2,6 +2,15 @@ import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/
 import React, { useMemo } from 'react';
 import { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';
 import { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
+/*** Applies nested ZORA theme overrides without installing another Surface theme runtime. */
+export function ZoraThemeScope({ children, themeId, mode }) {
+    if (mode === undefined && themeId === undefined)
+        return children;
+    return (<ZoraThemeScopeInner mode={mode} themeId={themeId}>
+      {children}
+    </ZoraThemeScopeInner>);
+}
+/*** Resolves and provides the scoped Surface and ZORA theme runtime values. */
 function ZoraThemeScopeInner({ children, themeId, mode }) {
     const parentSurface = useTheme();
     const parentRuntime = useZoraThemeRuntime();
@@ -21,15 +30,8 @@ function ZoraThemeScopeInner({ children, themeId, mode }) {
         _hasProvider: true,
     }), [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme]);
     const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);
-    return (<ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>
-      <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>
-    </ZoraThemeRuntimeContext.Provider>);
-}
-export function ZoraThemeScope({ children, themeId, mode }) {
-    if (mode === undefined && themeId === undefined)
-        return children;
-    return (<ZoraThemeScopeInner mode={mode} themeId={themeId}>
-      {children}
-    </ZoraThemeScopeInner>);
+    return (<ZoraThemeRuntimeContext value={scopedRuntimeValue}>
+      <ThemeContext value={scopedSurfaceValue}>{children}</ThemeContext>
+    </ZoraThemeRuntimeContext>);
 }
 //# sourceMappingURL=ZoraThemeScope.js.map

package/dist/theme/ZoraThemeScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQzF,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC3E,MAAM,aAAa,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,mBAAmB,EAAE,CAAC;IAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,aAAa,GAAG,wBAAwB,CAAC;QAC7C,cAAc,EAAE,OAAO;QACvB,gBAAgB,EAAE,aAAa,CAAC,OAAO;KACxC,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC;IAC9C,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC;IAChD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,EACzD,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,CACzC,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,cAAc,EAAE,aAAa,CAAC,cAAc;QAC5C,YAAY,EAAE,IAAI;KACnB,CAAC,EACF,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,cAAc,EAAE,UAAU,EAAE,WAAW,CAAC,CAC/E,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAExF,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC1D;MAAA,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CACrF;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC7E,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC;IACjE,OAAO,CACL,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAChD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAC;AACJ,CAAC","sourcesContent":["import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';\nimport React, { useMemo } from 'react';\n\nimport { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';\nimport type { ZoraThemeId, ZoraThemeMode } from './types';\nimport { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraThemeScopeProps {\n  children: React.ReactNode;\n  themeId?: ZoraThemeId;\n  mode?: ZoraThemeMode;\n}\n\nfunction ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {\n  const parentSurface = useTheme();\n  const parentRuntime = useZoraThemeRuntime();\n  const { activeFontId } = useFontContext();\n  const scopedThemeId = resolveZoraScopedThemeId({\n    desiredThemeId: themeId,\n    inheritedThemeId: parentRuntime.themeId,\n  });\n  const scopedMode = mode ?? parentSurface.mode;\n  const sourceConfig = parentSurface.theme.config;\n  const scopedTheme = useMemo(\n    () => createTheme(sourceConfig, scopedMode, activeFontId),\n    [sourceConfig, scopedMode, activeFontId],\n  );\n  const scopedSurfaceValue = useMemo(\n    () => ({\n      theme: scopedTheme,\n      mode: scopedMode,\n      setMode: parentSurface.setMode,\n      setThemeConfig: parentSurface.setThemeConfig,\n      _hasProvider: true,\n    }),\n    [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme],\n  );\n  const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>\n      <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n\nexport function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {\n  if (mode === undefined && themeId === undefined) return children;\n  return (\n    <ZoraThemeScopeInner mode={mode} themeId={themeId}>\n      {children}\n    </ZoraThemeScopeInner>\n  );\n}\n"]}
+{"version":3,"file":"ZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQzF,6FAA6F;AAC7F,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC7E,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC;IACjE,OAAO,CACL,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAChD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAC;AACJ,CAAC;AAED,+EAA+E;AAC/E,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC3E,MAAM,aAAa,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,mBAAmB,EAAE,CAAC;IAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,aAAa,GAAG,wBAAwB,CAAC;QAC7C,cAAc,EAAE,OAAO;QACvB,gBAAgB,EAAE,aAAa,CAAC,OAAO;KACxC,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC;IAC9C,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC;IAChD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,EACzD,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,CACzC,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,cAAc,EAAE,aAAa,CAAC,cAAc;QAC5C,YAAY,EAAE,IAAI;KACnB,CAAC,EACF,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,cAAc,EAAE,UAAU,EAAE,WAAW,CAAC,CAC/E,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAExF,OAAO,CACL,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CACjD;MAAA,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,CACnE;IAAA,EAAE,uBAAuB,CAAC,CAC3B,CAAC;AACJ,CAAC","sourcesContent":["import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';\nimport React, { useMemo } from 'react';\n\nimport { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';\nimport type { ZoraThemeId, ZoraThemeMode } from './types';\nimport { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraThemeScopeProps {\n  children: React.ReactNode;\n  themeId?: ZoraThemeId;\n  mode?: ZoraThemeMode;\n}\n\n/*** Applies nested ZORA theme overrides without installing another Surface theme runtime. */\nexport function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {\n  if (mode === undefined && themeId === undefined) return children;\n  return (\n    <ZoraThemeScopeInner mode={mode} themeId={themeId}>\n      {children}\n    </ZoraThemeScopeInner>\n  );\n}\n\n/*** Resolves and provides the scoped Surface and ZORA theme runtime values. */\nfunction ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {\n  const parentSurface = useTheme();\n  const parentRuntime = useZoraThemeRuntime();\n  const { activeFontId } = useFontContext();\n  const scopedThemeId = resolveZoraScopedThemeId({\n    desiredThemeId: themeId,\n    inheritedThemeId: parentRuntime.themeId,\n  });\n  const scopedMode = mode ?? parentSurface.mode;\n  const sourceConfig = parentSurface.theme.config;\n  const scopedTheme = useMemo(\n    () => createTheme(sourceConfig, scopedMode, activeFontId),\n    [sourceConfig, scopedMode, activeFontId],\n  );\n  const scopedSurfaceValue = useMemo(\n    () => ({\n      theme: scopedTheme,\n      mode: scopedMode,\n      setMode: parentSurface.setMode,\n      setThemeConfig: parentSurface.setThemeConfig,\n      _hasProvider: true,\n    }),\n    [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme],\n  );\n  const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);\n\n  return (\n    <ZoraThemeRuntimeContext value={scopedRuntimeValue}>\n      <ThemeContext value={scopedSurfaceValue}>{children}</ThemeContext>\n    </ZoraThemeRuntimeContext>\n  );\n}\n"]}

package/dist/theme/index.d.ts

@@ -4,7 +4,7 @@ export type { ThemeModeToggleProps } from './ThemeModeToggleProps';
 export { useZoraTheme } from './useZoraTheme';
 export { withZoraThemeScope } from './withZoraThemeScope';
 export type { ZoraBaseProps } from './ZoraBaseProps';
-export type { ZoraProviderProps } from './ZoraProvider';
+export type { ZoraProviderProps, ZoraToastCapability } from './ZoraProvider';
 export { ZoraProvider } from './ZoraProvider';
 export type { ZoraThemeScopeProps } from './ZoraThemeScope';
 export { ZoraThemeScope } from './ZoraThemeScope';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export * from './public';\nexport { ThemeModeToggle } from './ThemeModeToggle';\nexport type { ThemeModeToggleProps } from './ThemeModeToggleProps';\nexport { useZoraTheme } from './useZoraTheme';\nexport { withZoraThemeScope } from './withZoraThemeScope';\nexport type { ZoraBaseProps } from './ZoraBaseProps';\nexport type { ZoraProviderProps } from './ZoraProvider';\nexport { ZoraProvider } from './ZoraProvider';\nexport type { ZoraThemeScopeProps } from './ZoraThemeScope';\nexport { ZoraThemeScope } from './ZoraThemeScope';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export * from './public';\nexport { ThemeModeToggle } from './ThemeModeToggle';\nexport type { ThemeModeToggleProps } from './ThemeModeToggleProps';\nexport { useZoraTheme } from './useZoraTheme';\nexport { withZoraThemeScope } from './withZoraThemeScope';\nexport type { ZoraBaseProps } from './ZoraBaseProps';\nexport type { ZoraProviderProps, ZoraToastCapability } from './ZoraProvider';\nexport { ZoraProvider } from './ZoraProvider';\nexport type { ZoraThemeScopeProps } from './ZoraThemeScope';\nexport { ZoraThemeScope } from './ZoraThemeScope';\n"]}

package/dist/types/accordion.d.ts

@@ -0,0 +1,23 @@
+import type { AccordionItemProps as SurfaceAccordionItemProps, AccordionMode, AccordionMultipleProps as SurfaceAccordionMultipleProps, AccordionSingleProps as SurfaceAccordionSingleProps, ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+export type { AccordionMode } from '@ankhorage/surface';
+export type AccordionSingleProps = ZoraBaseProps & Omit<SurfaceAccordionSingleProps, 'children'> & {
+    children?: React.ReactNode;
+};
+export type AccordionMultipleProps = ZoraBaseProps & Omit<SurfaceAccordionMultipleProps, 'children'> & {
+    children?: React.ReactNode;
+};
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export type AccordionItemProps = ZoraBaseProps & Omit<SurfaceAccordionItemProps, 'children'> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: ButtonIconSpec;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+};
+export interface AccordionPresentationContextValue {
+    mode: AccordionMode;
+    openValues: readonly string[];
+}
+//# sourceMappingURL=accordion.d.ts.map

package/dist/types/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/types/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,IAAI,yBAAyB,EAC/C,aAAa,EACb,sBAAsB,IAAI,6BAA6B,EACvD,oBAAoB,IAAI,2BAA2B,EACnD,cAAc,EACf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAC9C,IAAI,CAAC,2BAA2B,EAAE,UAAU,CAAC,GAAG;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAChD,IAAI,CAAC,6BAA6B,EAAE,UAAU,CAAC,GAAG;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAC5C,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GAAG;IAC5C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B"}

package/dist/types/accordion.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=accordion.js.map

package/dist/types/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/types/accordion.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  AccordionItemProps as SurfaceAccordionItemProps,\n  AccordionMode,\n  AccordionMultipleProps as SurfaceAccordionMultipleProps,\n  AccordionSingleProps as SurfaceAccordionSingleProps,\n  ButtonIconSpec,\n} from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBaseProps } from '../theme/ZoraBaseProps';\n\nexport type { AccordionMode } from '@ankhorage/surface';\n\nexport type AccordionSingleProps = ZoraBaseProps &\n  Omit<SurfaceAccordionSingleProps, 'children'> & {\n    children?: React.ReactNode;\n  };\n\nexport type AccordionMultipleProps = ZoraBaseProps &\n  Omit<SurfaceAccordionMultipleProps, 'children'> & {\n    children?: React.ReactNode;\n  };\n\nexport type AccordionProps = AccordionSingleProps | AccordionMultipleProps;\n\nexport type AccordionItemProps = ZoraBaseProps &\n  Omit<SurfaceAccordionItemProps, 'children'> & {\n    title: React.ReactNode;\n    description?: React.ReactNode;\n    icon?: ButtonIconSpec;\n    actions?: React.ReactNode;\n    children?: React.ReactNode;\n  };\n\nexport interface AccordionPresentationContextValue {\n  mode: AccordionMode;\n  openValues: readonly string[];\n}\n"]}

package/dist/types/provider.d.ts

@@ -0,0 +1,19 @@
+import type { ThemeConfig } from '@ankhorage/contracts';
+import type { ToastProviderProps as SurfaceToastProviderProps } from '@ankhorage/surface';
+import type React from 'react';
+import type { ZoraTheme, ZoraThemeMode } from '../theme/types';
+export type ZoraToastCapability = boolean | Omit<SurfaceToastProviderProps, 'children'>;
+export interface ZoraProviderProps {
+    children: React.ReactNode;
+    theme?: ZoraTheme;
+    themeConfig?: ThemeConfig;
+    initialMode?: ZoraThemeMode;
+    toast?: ZoraToastCapability;
+    bottomSheet?: boolean;
+}
+export interface ZoraRuntimeCapabilitiesProps {
+    children: React.ReactNode;
+    toast?: ZoraToastCapability;
+    bottomSheet?: boolean;
+}
+//# sourceMappingURL=provider.d.ts.map

package/dist/types/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/types/provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,IAAI,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;AAExF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}

package/dist/types/provider.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=provider.js.map

package/dist/types/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../src/types/provider.ts"],"names":[],"mappings":"","sourcesContent":["import type { ThemeConfig } from '@ankhorage/contracts';\nimport type { ToastProviderProps as SurfaceToastProviderProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraTheme, ZoraThemeMode } from '../theme/types';\n\nexport type ZoraToastCapability = boolean | Omit<SurfaceToastProviderProps, 'children'>;\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  themeConfig?: ThemeConfig;\n  initialMode?: ZoraThemeMode;\n  toast?: ZoraToastCapability;\n  bottomSheet?: boolean;\n}\n\nexport interface ZoraRuntimeCapabilitiesProps {\n  children: React.ReactNode;\n  toast?: ZoraToastCapability;\n  bottomSheet?: boolean;\n}\n"]}

package/dist/types/toast.d.ts

@@ -0,0 +1,9 @@
+import type { ToastController as SurfaceToastController, ToastOptions as SurfaceToastOptions, ToastProps as SurfaceToastProps, ToastProviderProps as SurfaceToastProviderProps, ToastStatus as SurfaceToastStatus } from '@ankhorage/surface';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+export type ToastStatus = SurfaceToastStatus;
+export type ToastOptions = SurfaceToastOptions;
+export type ToastController = SurfaceToastController;
+export type ToastProviderProps = SurfaceToastProviderProps;
+export interface ToastProps extends ZoraBaseProps, Omit<SurfaceToastProps, 'testID'> {
+}
+//# sourceMappingURL=toast.d.ts.map

package/dist/types/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/types/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,IAAI,sBAAsB,EACzC,YAAY,IAAI,mBAAmB,EACnC,UAAU,IAAI,iBAAiB,EAC/B,kBAAkB,IAAI,yBAAyB,EAC/C,WAAW,IAAI,kBAAkB,EAClC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,kBAAkB,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC;AACrD,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAE3D,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC;CAAG"}

package/dist/types/toast.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toast.js.map

package/dist/types/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../src/types/toast.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ToastController as SurfaceToastController,\n  ToastOptions as SurfaceToastOptions,\n  ToastProps as SurfaceToastProps,\n  ToastProviderProps as SurfaceToastProviderProps,\n  ToastStatus as SurfaceToastStatus,\n} from '@ankhorage/surface';\n\nimport type { ZoraBaseProps } from '../theme/ZoraBaseProps';\n\nexport type ToastStatus = SurfaceToastStatus;\nexport type ToastOptions = SurfaceToastOptions;\nexport type ToastController = SurfaceToastController;\nexport type ToastProviderProps = SurfaceToastProviderProps;\n\nexport interface ToastProps extends ZoraBaseProps, Omit<SurfaceToastProps, 'testID'> {}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "12.1.0",
+  "version": "14.0.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -42,7 +42,7 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.0",
     "@ankhorage/contracts": "^12.0.1",
-    "@ankhorage/surface": "^4.2.0",
+    "@ankhorage/surface": "^4.4.0",
     "@ankhorage/utility": "^0.8.0",
     "expo-document-picker": "~57.0.1",
     "expo-image-picker": "~57.0.16"

package/src/features/accordion/accordionItemMeta.ts

@@ -0,0 +1,46 @@
+import type { ZoraComponentMeta } from '../../metadata';
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+
+export const accordionItemMeta = {
+  name: 'AccordionItem',
+  category: 'component',
+  description: 'One expandable accordion item with authored content and optional actions.',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  blueprint: {
+    label: 'Accordion item',
+    defaultProps: { value: 'item', title: 'Accordion item' },
+  },
+  slots: {
+    actions: {
+      label: 'Actions',
+      allowedChildren: ['Button', 'ButtonGroup', 'IconButton'],
+    },
+  },
+  props: {
+    value: {
+      type: 'string',
+      category: 'Behavior',
+      label: 'Value',
+      authoring: { authority: 'instance' },
+    },
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      authoring: { authority: 'instance' },
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+      authoring: { authority: 'instance' },
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/accordion/accordionMeta.ts

@@ -0,0 +1,34 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const accordionMeta = {
+  name: 'Accordion',
+  category: 'component',
+  description: 'Groups expandable content items with single or multiple expansion behavior.',
+  directManifestNode: true,
+  allowedChildren: ['AccordionItem'],
+  blueprint: {
+    label: 'Accordion',
+    defaultProps: { type: 'single', collapsible: true },
+  },
+  props: {
+    type: {
+      type: 'enum',
+      category: 'Behavior',
+      label: 'Expansion mode',
+      enum: ['single', 'multiple'],
+      default: 'single',
+    },
+    collapsible: {
+      type: 'boolean',
+      category: 'Behavior',
+      label: 'Collapsible',
+      default: true,
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/accordion/adapters/inbound/Accordion.tsx

@@ -0,0 +1,94 @@
+import { Accordion as SurfaceAccordion } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type {
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSingleProps,
+} from '../../../../types/accordion';
+import { AccordionPresentationContext } from '../../composition/AccordionPresentationContext';
+
+/*** Renders a ZORA accordion backed by Surface expansion and accessibility mechanics. */
+export const Accordion = withZoraThemeScope(AccordionInner);
+
+/*** Routes the public accordion union to its single or multiple Surface contract. */
+function AccordionInner(props: AccordionProps) {
+  if (props.type === 'multiple') {
+    return <MultipleAccordion {...props} />;
+  }
+
+  return <SingleAccordion {...props} />;
+}
+
+/*** Mirrors Surface multiple-value state for ZORA presentation only. */
+function MultipleAccordion({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  defaultValue,
+  interactionPolicy,
+  onValueChange,
+  value,
+  ...surfaceProps
+}: AccordionMultipleProps) {
+  const [presentationValues, setPresentationValues] = React.useState<readonly string[]>(
+    () => value ?? defaultValue ?? [],
+  );
+  const openValues = value ?? presentationValues;
+
+  return (
+    <AccordionPresentationContext value={{ mode: 'multiple', openValues }}>
+      <SurfaceAccordion
+        {...surfaceProps}
+        defaultValue={defaultValue}
+        interactionPolicy={interactionPolicy}
+        onValueChange={(nextValues) => {
+          setPresentationValues(nextValues);
+          onValueChange?.(nextValues);
+        }}
+        type="multiple"
+        value={value}
+      >
+        {children}
+      </SurfaceAccordion>
+    </AccordionPresentationContext>
+  );
+}
+
+/*** Mirrors Surface single-value state for ZORA presentation only. */
+function SingleAccordion({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  defaultValue,
+  interactionPolicy,
+  onValueChange,
+  type: _type,
+  value,
+  ...surfaceProps
+}: AccordionSingleProps) {
+  const [presentationValue, setPresentationValue] = React.useState<string | undefined>(
+    () => value ?? defaultValue,
+  );
+  const openValue = value ?? presentationValue;
+  const openValues = openValue === undefined ? [] : [openValue];
+
+  return (
+    <AccordionPresentationContext value={{ mode: 'single', openValues }}>
+      <SurfaceAccordion
+        {...surfaceProps}
+        defaultValue={defaultValue}
+        interactionPolicy={interactionPolicy}
+        onValueChange={(nextValue) => {
+          setPresentationValue(nextValue);
+          onValueChange?.(nextValue);
+        }}
+        type="single"
+        value={value}
+      >
+        {children}
+      </SurfaceAccordion>
+    </AccordionPresentationContext>
+  );
+}

package/src/features/accordion/adapters/inbound/AccordionItem.tsx

@@ -0,0 +1,86 @@
+import {
+  AccordionContent as SurfaceAccordionContent,
+  AccordionItem as SurfaceAccordionItem,
+  AccordionTrigger as SurfaceAccordionTrigger,
+} from '@ankhorage/surface';
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { AccordionItemProps } from '../../../../types/accordion';
+import { Icon } from '../../../icon/public';
+import { Box, Divider, Stack } from '../../../layout/public';
+import { Heading, Text } from '../../../typography/public';
+import { AccordionPresentationContext } from '../../composition/AccordionPresentationContext';
+
+/*** Renders one opinionated ZORA accordion item over Surface trigger/content primitives. */
+export const AccordionItem = withZoraThemeScope(AccordionItemInner);
+
+const triggerStyle: ViewStyle = { flex: 1 };
+
+/*** Composes the item header, optional actions, expanded content, and separator. */
+function AccordionItemInner({
+  themeId: _themeId,
+  mode: _mode,
+  actions,
+  children,
+  description,
+  disabled,
+  icon,
+  interactionPolicy,
+  testID,
+  title,
+  value,
+  ...surfaceItemProps
+}: AccordionItemProps) {
+  const presentation = React.use(AccordionPresentationContext);
+  if (!presentation) {
+    throw new Error('AccordionItem must be rendered inside Accordion.');
+  }
+
+  const open = presentation.openValues.includes(value);
+
+  return (
+    <SurfaceAccordionItem
+      {...surfaceItemProps}
+      disabled={disabled}
+      interactionPolicy={interactionPolicy}
+      testID={testID}
+      value={value}
+    >
+      <Stack gap="none">
+        <Stack align="center" direction="row" gap="s">
+          <Box flex={1}>
+            <SurfaceAccordionTrigger interactionPolicy={interactionPolicy} style={triggerStyle}>
+              <Box px="m" py="m">
+                <Stack align="center" direction="row" gap="m">
+                  {icon ? <Icon {...icon} /> : null}
+                  <Box flex={1}>
+                    <Stack gap="xs">
+                      <Heading level={4}>{title}</Heading>
+                      {description ? (
+                        <Text emphasis="muted" variant="bodySmall">
+                          {description}
+                        </Text>
+                      ) : null}
+                    </Stack>
+                  </Box>
+                  <Icon name={open ? 'chevron-up-outline' : 'chevron-down-outline'} size="m" />
+                </Stack>
+              </Box>
+            </SurfaceAccordionTrigger>
+          </Box>
+          {actions ? <Box pr="m">{actions}</Box> : null}
+        </Stack>
+
+        <SurfaceAccordionContent>
+          <Box px="m" pb="m">
+            <Stack gap="m">{children}</Stack>
+          </Box>
+        </SurfaceAccordionContent>
+
+        <Divider />
+      </Stack>
+    </SurfaceAccordionItem>
+  );
+}

package/src/features/accordion/composition/AccordionPresentationContext.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+import type { AccordionPresentationContextValue } from '../../../types/accordion';
+
+export const AccordionPresentationContext =
+  React.createContext<AccordionPresentationContextValue | null>(null);

package/src/features/accordion/public.ts

@@ -0,0 +1,9 @@
+export type {
+  AccordionItemProps,
+  AccordionMode,
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSingleProps,
+} from '../../types/accordion';
+export { Accordion } from './adapters/inbound/Accordion';
+export { AccordionItem } from './adapters/inbound/AccordionItem';

package/src/features/bottom-sheet/public.test.ts

@@ -22,18 +22,21 @@ describe('ZORA BottomSheet public contract', () => {
     expect(workletsPeer).toBeDefined();
   });
 
-  test('installs the shared provider and removes picker ActionSheet dependencies', async () => {
-    const [provider, datePicker, timePicker] = await Promise.all([
-      Bun.file('src/theme/ZoraProvider.tsx').text(),
-      Bun.file('src/features/date-picker/adapters/inbound/DatePicker.tsx').text(),
-      Bun.file('src/features/time-picker/adapters/inbound/TimePicker.tsx').text(),
-    ]);
+  test('installs BottomSheet only in the enabled native runtime capability host', async () => {
+    const [provider, nativeCapabilities, webCapabilities, nativeDatePicker, nativeTimePicker] =
+      await Promise.all([
+        Bun.file('src/theme/ZoraProvider.tsx').text(),
+        Bun.file('src/theme/ZoraRuntimeCapabilities.native.tsx').text(),
+        Bun.file('src/theme/ZoraRuntimeCapabilities.web.tsx').text(),
+        Bun.file('src/features/date-picker/adapters/inbound/DatePicker.native.tsx').text(),
+        Bun.file('src/features/time-picker/adapters/inbound/TimePicker.native.tsx').text(),
+      ]);
 
-    expect(provider).toContain('<BottomSheetProvider>{children}</BottomSheetProvider>');
-    expect(provider).not.toContain('GestureHandlerRootView');
-    expect(datePicker).toContain('useBottomSheet()');
-    expect(timePicker).toContain('useBottomSheet()');
-    expect(datePicker).not.toContain("from '../action-sheet'");
-    expect(timePicker).not.toContain("from '../action-sheet'");
+    expect(provider).toContain('<ZoraRuntimeCapabilities');
+    expect(provider).not.toContain('BottomSheetProvider');
+    expect(nativeCapabilities).toContain('<BottomSheetProvider>');
+    expect(webCapabilities).not.toContain('BottomSheetProvider');
+    expect(nativeDatePicker).toContain('useBottomSheet()');
+    expect(nativeTimePicker).toContain('useBottomSheet()');
   });
 });

package/src/features/date-picker/adapters/inbound/DatePicker.native.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { DatePickerProps } from '../../../../types/date-picker';
+import { useBottomSheet } from '../../../bottom-sheet/public';
+import { DatePickerContent } from '../../composition/DatePickerContent';
+import { DatePickerField } from '../../composition/DatePickerField';
+import { DatePickerTrigger } from '../../composition/DatePickerTrigger';
+import { formatLocalDate } from '../../utils/localDate';
+
+/*** Renders DatePicker with native BottomSheet presentation. */
+export const DatePicker = withZoraThemeScope(DatePickerInner);
+
+/*** Connects the shared DatePicker field and content to the native BottomSheet host. */
+function DatePickerInner({ themeId: _themeId, mode: _mode, ...props }: DatePickerProps) {
+  const { dismiss, present } = useBottomSheet();
+
+  const openPicker = React.useCallback(() => {
+    if (props.interactionPolicy === 'passive') return;
+
+    present({
+      content: (
+        <DatePickerContent
+          description={props.description}
+          interactionPolicy={props.interactionPolicy}
+          label={props.label}
+          maxDate={props.maxDate}
+          minDate={props.minDate}
+          onDismiss={dismiss}
+          onSelect={(date) => {
+            props.onValueChange?.(formatLocalDate(date));
+            dismiss();
+          }}
+          testID={props.testID}
+          value={props.value}
+        />
+      ),
+    });
+  }, [dismiss, present, props]);
+
+  return (
+    <DatePickerField {...props}>
+      <DatePickerTrigger {...props} onPress={openPicker} />
+    </DatePickerField>
+  );
+}