@ankhorage/zora 0.2.2 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.3.2
+
+### Patch Changes
+
+- 5348764: Sort imports
+
+## 0.3.1
+
+### Patch Changes
+
+- 798dc20: Add missing useZoraTheme file
+
+## 0.3.0
+
+### Minor Changes
+
+- 961422e: Export Icon component to public API
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -1,4 +1,4 @@
-# zora
+# ZORA
 
 <!-- markdownlint-disable MD013 MD033 -->
 
@@ -29,18 +29,35 @@ Wrap your app in `ZoraProvider`, then import components from
 
 ```tsx
 import React from 'react';
-import { Button, Card, Page, PageHeader, ZoraProvider } from '@ankhorage/zora';
+import {
+  AppShell,
+  Button,
+  Card,
+  Page,
+  PageHeader,
+  Toolbar,
+  ToolbarAction,
+  ZoraProvider,
+} from '@ankhorage/zora';
 
 export function App() {
   return (
     <ZoraProvider>
-      <Page header={<PageHeader title="Dashboard" description="Ready to build." />}>
-        <Card
-          actions={<Button>Continue</Button>}
-          description="ZORA provides composed UI surfaces for apps."
-          title="Welcome"
-        />
-      </Page>
+      <AppShell
+        topbar={
+          <Toolbar position="inline">
+            <ToolbarAction icon={{ name: 'menu-outline' }} label="Menu" />
+          </Toolbar>
+        }
+      >
+        <Page header={<PageHeader title="Dashboard" description="Ready to build." />}>
+          <Card
+            actions={<Button>Continue</Button>}
+            description="ZORA provides composed UI surfaces for apps."
+            title="Welcome"
+          />
+        </Page>
+      </AppShell>
     </ZoraProvider>
   );
 }
@@ -408,6 +425,35 @@ Picks these Surface `DrawerProps`: `closeOnBackdrop`, `onDismiss`, `position`,
 
 ## Layouts
 
+### `AppShell`
+
+Theme-aware application root shell with optional topbar and full-height content
+area. Use it as the outer app chrome inside `ZoraProvider`.
+
+```tsx
+<AppShell topbar={<Toolbar position="inline">{actions}</Toolbar>}>
+  <Page header={<PageHeader title="Dashboard" />}>{content}</Page>
+</AppShell>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | - | Main app content. |
+| `topbar` | `React.ReactNode` | - | Optional top app bar rendered above content. |
+| `testID` | `string` | - | Forwarded to the root Surface background container. |
+
+Inherited props:
+
+No inherited props. `AppShellProps` is declared directly by ZORA.
+
+</details>
+
+
 ### `Page`
 
 Constrained page container with optional header and footer slots.
@@ -1114,8 +1160,11 @@ const zoraTheme: ThemeConfig = {
 
 ## Public Exports
 
+Add `AppShell` to the public exports:
+
 ```ts
 export {
+  AppShell,
   AuthLayout,
   Badge,
   Button,
@@ -1154,8 +1203,11 @@ export {
   ZoraProvider,
   zoraTheme,
 };
+```
 
+```ts
 export type {
+  AppShellProps,
   AuthLayoutProps,
   BadgeProps,
   ButtonProps,
@@ -1198,15 +1250,16 @@ export type {
 
 ## Example App
 
-A complete Expo showcase lives in `examples/expo-showcase`. It renders every
-current ZORA component, pattern, layout, and theme entry point on one screen.
+A complete Expo showcase lives in `examples/expo-showcase`. It renders the
+current ZORA components, layouts, patterns, and theme entry points, including
+light/dark mode through `AppShell`.
 
 Run it locally:
 
 ```bash
 cd examples/expo-showcase
-npm install
-npm run web
+bun install
+bun run web
 ```
 
 The example imports `@ankhorage/zora` and demonstrates the package API in

package/dist/components/icon/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonIconSpec, IconProps } from '@ankhorage/surface';
+export { Icon } from '@ankhorage/surface';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon/index.d.ts.map

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

package/dist/components/icon/index.js

@@ -0,0 +1,2 @@
+export { Icon } from '@ankhorage/surface';
+//# sourceMappingURL=index.js.map

package/dist/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/theme/index.d.ts

@@ -1,5 +1,6 @@
 export type { ZoraThemeOverride } from './createZoraTheme';
 export { createZoraTheme } from './createZoraTheme';
+export { useZoraTheme } from './useZoraTheme';
 export type { ZoraProviderProps } from './ZoraProvider';
 export { ZoraProvider } from './ZoraProvider';
 export { zoraTheme } from './zoraTheme';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/theme/index.js

@@ -1,4 +1,5 @@
 export { createZoraTheme } from './createZoraTheme';
+export { useZoraTheme } from './useZoraTheme';
 export { ZoraProvider } from './ZoraProvider';
 export { zoraTheme } from './zoraTheme';
 //# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/theme/useZoraTheme.d.ts

@@ -0,0 +1,8 @@
+export declare function useZoraTheme(): {
+    theme: import("@ankhorage/surface").AnkhTheme;
+    mode: "light" | "dark";
+    setThemeConfig: (config: Partial<import("@ankhorage/contracts").ThemeConfig>) => void;
+    setMode: (mode: "light" | "dark") => void;
+    _hasProvider?: boolean;
+};
+//# sourceMappingURL=useZoraTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useZoraTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useZoraTheme.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY;;;;;;EAE3B"}

package/dist/theme/useZoraTheme.js

@@ -0,0 +1,5 @@
+import { useTheme } from '@ankhorage/surface';
+export function useZoraTheme() {
+    return useTheme();
+}
+//# sourceMappingURL=useZoraTheme.js.map

package/dist/theme/useZoraTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoraTheme.js","sourceRoot":"","sources":["../../src/theme/useZoraTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,UAAU,YAAY;IAC1B,OAAO,QAAQ,EAAE,CAAC;AACpB,CAAC"}

package/package.json

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