@ankhorage/zora 2.9.3 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.10.0
+
+### Minor Changes
+
+- 3c1f70f: Add a reusable `ThemeModeToggle` that switches the canonical ZORA light/dark runtime mode with accessible sun/moon affordances.
+
 ## 2.9.3
 
 ### Patch Changes

package/dist/theme/ThemeModeToggle.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeModeToggleProps } from './ThemeModeToggleProps';
+export declare function ThemeModeToggle({ disabled, size, testID }: ThemeModeToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeModeToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeToggle.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAU,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BAgBrF"}

package/dist/theme/ThemeModeToggle.js

@@ -0,0 +1,9 @@
+import { IconButton } from '../components/icon-button';
+import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
+import { useZoraTheme } from './useZoraTheme';
+export function ThemeModeToggle({ disabled, size = 'm', testID }) {
+    const { mode, setMode } = useZoraTheme();
+    const state = resolveThemeModeToggleState(mode);
+    return (<IconButton color="neutral" disabled={disabled} icon={{ name: state.iconName }} label={state.label} onPress={() => setMode(state.nextMode)} size={size} testID={testID} variant="ghost"/>);
+}
+//# sourceMappingURL=ThemeModeToggle.js.map

package/dist/theme/ThemeModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeToggle.js","sourceRoot":"","sources":["../../src/theme/ThemeModeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,GAAG,EAAE,MAAM,EAAwB;IACpF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IACzC,MAAM,KAAK,GAAG,2BAA2B,CAAC,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,CAAC,UAAU,CACT,KAAK,CAAC,SAAS,CACf,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CACvC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,OAAO,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { IconButton } from '../components/icon-button';\nimport { resolveThemeModeToggleState } from './resolveThemeModeToggleState';\nimport type { ThemeModeToggleProps } from './ThemeModeToggleProps';\nimport { useZoraTheme } from './useZoraTheme';\n\nexport function ThemeModeToggle({ disabled, size = 'm', testID }: ThemeModeToggleProps) {\n  const { mode, setMode } = useZoraTheme();\n  const state = resolveThemeModeToggleState(mode);\n\n  return (\n    <IconButton\n      color=\"neutral\"\n      disabled={disabled}\n      icon={{ name: state.iconName }}\n      label={state.label}\n      onPress={() => setMode(state.nextMode)}\n      size={size}\n      testID={testID}\n      variant=\"ghost\"\n    />\n  );\n}\n"]}

package/dist/theme/ThemeModeToggleProps.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonProps } from '../components/icon-button';
+export type ThemeModeToggleProps = Pick<IconButtonProps, 'disabled' | 'size' | 'testID'>;
+//# sourceMappingURL=ThemeModeToggleProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeToggleProps.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModeToggleProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC"}

package/dist/theme/ThemeModeToggleProps.js

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

package/dist/theme/ThemeModeToggleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeToggleProps.js","sourceRoot":"","sources":["../../src/theme/ThemeModeToggleProps.ts"],"names":[],"mappings":"","sourcesContent":["import type { IconButtonProps } from '../components/icon-button';\n\nexport type ThemeModeToggleProps = Pick<IconButtonProps, 'disabled' | 'size' | 'testID'>;\n"]}

package/dist/theme/index.d.ts

@@ -1,4 +1,6 @@
 export { createZoraThemeConfig } from './createZoraThemeConfig';
+export { ThemeModeToggle } from './ThemeModeToggle';
+export type { ThemeModeToggleProps } from './ThemeModeToggleProps';
 export type { ZoraComputedTheme, ZoraComputedThemeMode, ZoraTheme, ZoraThemeId, ZoraThemeMode, } from './types';
 export { useZoraTheme } from './useZoraTheme';
 export { withZoraThemeScope } from './withZoraThemeScope';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,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,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,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"}

package/dist/theme/index.js

@@ -1,4 +1,5 @@
 export { createZoraThemeConfig } from './createZoraThemeConfig';
+export { ThemeModeToggle } from './ThemeModeToggle';
 export { useZoraTheme } from './useZoraTheme';
 export { withZoraThemeScope } from './withZoraThemeScope';
 export { zoraDefaultTheme } from './zoraDefaultTheme';

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAQhE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { createZoraThemeConfig } from './createZoraThemeConfig';\nexport type {\n  ZoraComputedTheme,\n  ZoraComputedThemeMode,\n  ZoraTheme,\n  ZoraThemeId,\n  ZoraThemeMode,\n} from './types';\nexport { useZoraTheme } from './useZoraTheme';\nexport { withZoraThemeScope } from './withZoraThemeScope';\nexport type { ZoraBaseProps } from './ZoraBaseProps';\nexport { zoraDefaultTheme } from './zoraDefaultTheme';\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,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { createZoraThemeConfig } from './createZoraThemeConfig';\nexport { ThemeModeToggle } from './ThemeModeToggle';\nexport type { ThemeModeToggleProps } from './ThemeModeToggleProps';\nexport type {\n  ZoraComputedTheme,\n  ZoraComputedThemeMode,\n  ZoraTheme,\n  ZoraThemeId,\n  ZoraThemeMode,\n} from './types';\nexport { useZoraTheme } from './useZoraTheme';\nexport { withZoraThemeScope } from './withZoraThemeScope';\nexport type { ZoraBaseProps } from './ZoraBaseProps';\nexport { zoraDefaultTheme } from './zoraDefaultTheme';\nexport type { ZoraProviderProps } from './ZoraProvider';\nexport { ZoraProvider } from './ZoraProvider';\nexport type { ZoraThemeScopeProps } from './ZoraThemeScope';\nexport { ZoraThemeScope } from './ZoraThemeScope';\n"]}

package/dist/theme/resolveThemeModeToggleState.d.ts

@@ -0,0 +1,9 @@
+import type { ZoraThemeMode } from './types';
+interface ThemeModeToggleState {
+    readonly iconName: 'moon-outline' | 'sunny-outline';
+    readonly label: 'Use dark mode' | 'Use light mode';
+    readonly nextMode: ZoraThemeMode;
+}
+export declare function resolveThemeModeToggleState(mode: ZoraThemeMode): ThemeModeToggleState;
+export {};
+//# sourceMappingURL=resolveThemeModeToggleState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveThemeModeToggleState.d.ts","sourceRoot":"","sources":["../../src/theme/resolveThemeModeToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,eAAe,CAAC;IACpD,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,gBAAgB,CAAC;IACnD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;CAClC;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,aAAa,GAAG,oBAAoB,CAYrF"}

package/dist/theme/resolveThemeModeToggleState.js

@@ -0,0 +1,14 @@
+export function resolveThemeModeToggleState(mode) {
+    return mode === 'dark'
+        ? {
+            iconName: 'sunny-outline',
+            label: 'Use light mode',
+            nextMode: 'light',
+        }
+        : {
+            iconName: 'moon-outline',
+            label: 'Use dark mode',
+            nextMode: 'dark',
+        };
+}
+//# sourceMappingURL=resolveThemeModeToggleState.js.map

package/dist/theme/resolveThemeModeToggleState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveThemeModeToggleState.js","sourceRoot":"","sources":["../../src/theme/resolveThemeModeToggleState.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,2BAA2B,CAAC,IAAmB;IAC7D,OAAO,IAAI,KAAK,MAAM;QACpB,CAAC,CAAC;YACE,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,gBAAgB;YACvB,QAAQ,EAAE,OAAO;SAClB;QACH,CAAC,CAAC;YACE,QAAQ,EAAE,cAAc;YACxB,KAAK,EAAE,eAAe;YACtB,QAAQ,EAAE,MAAM;SACjB,CAAC;AACR,CAAC","sourcesContent":["import type { ZoraThemeMode } from './types';\n\ninterface ThemeModeToggleState {\n  readonly iconName: 'moon-outline' | 'sunny-outline';\n  readonly label: 'Use dark mode' | 'Use light mode';\n  readonly nextMode: ZoraThemeMode;\n}\n\nexport function resolveThemeModeToggleState(mode: ZoraThemeMode): ThemeModeToggleState {\n  return mode === 'dark'\n    ? {\n        iconName: 'sunny-outline',\n        label: 'Use light mode',\n        nextMode: 'light',\n      }\n    : {\n        iconName: 'moon-outline',\n        label: 'Use dark mode',\n        nextMode: 'dark',\n      };\n}\n"]}

package/package.json

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

package/src/theme/ThemeModeToggle.tsx

@@ -0,0 +1,22 @@
+import { IconButton } from '../components/icon-button';
+import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
+import type { ThemeModeToggleProps } from './ThemeModeToggleProps';
+import { useZoraTheme } from './useZoraTheme';
+
+export function ThemeModeToggle({ disabled, size = 'm', testID }: ThemeModeToggleProps) {
+  const { mode, setMode } = useZoraTheme();
+  const state = resolveThemeModeToggleState(mode);
+
+  return (
+    <IconButton
+      color="neutral"
+      disabled={disabled}
+      icon={{ name: state.iconName }}
+      label={state.label}
+      onPress={() => setMode(state.nextMode)}
+      size={size}
+      testID={testID}
+      variant="ghost"
+    />
+  );
+}

package/src/theme/ThemeModeToggleProps.ts

@@ -0,0 +1,3 @@
+import type { IconButtonProps } from '../components/icon-button';
+
+export type ThemeModeToggleProps = Pick<IconButtonProps, 'disabled' | 'size' | 'testID'>;

package/src/theme/index.ts

@@ -1,4 +1,6 @@
 export { createZoraThemeConfig } from './createZoraThemeConfig';
+export { ThemeModeToggle } from './ThemeModeToggle';
+export type { ThemeModeToggleProps } from './ThemeModeToggleProps';
 export type {
   ZoraComputedTheme,
   ZoraComputedThemeMode,

package/src/theme/resolveThemeModeToggleState.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
+
+describe('resolveThemeModeToggleState', () => {
+  test('offers dark mode while light mode is active', () => {
+    expect(resolveThemeModeToggleState('light')).toEqual({
+      iconName: 'moon-outline',
+      label: 'Use dark mode',
+      nextMode: 'dark',
+    });
+  });
+
+  test('offers light mode while dark mode is active', () => {
+    expect(resolveThemeModeToggleState('dark')).toEqual({
+      iconName: 'sunny-outline',
+      label: 'Use light mode',
+      nextMode: 'light',
+    });
+  });
+});

package/src/theme/resolveThemeModeToggleState.ts

@@ -0,0 +1,21 @@
+import type { ZoraThemeMode } from './types';
+
+interface ThemeModeToggleState {
+  readonly iconName: 'moon-outline' | 'sunny-outline';
+  readonly label: 'Use dark mode' | 'Use light mode';
+  readonly nextMode: ZoraThemeMode;
+}
+
+export function resolveThemeModeToggleState(mode: ZoraThemeMode): ThemeModeToggleState {
+  return mode === 'dark'
+    ? {
+        iconName: 'sunny-outline',
+        label: 'Use light mode',
+        nextMode: 'light',
+      }
+    : {
+        iconName: 'moon-outline',
+        label: 'Use dark mode',
+        nextMode: 'dark',
+      };
+}