@ankhorage/zora 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- 961422e: Export Icon component to public API
+
+## 0.2.2
+
+### Patch Changes
+
+- 6e7fd59: update zora version in the example app
+
 ## 0.2.1
 
 ### 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/package.json

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