@joinskips/brand 7.0.0-develop.132 → 7.0.0-develop.138

package/chat/components/Welcome.js

@@ -84,9 +84,10 @@ export function CodeStep({ words, length, noMatch, ranOut, resendAfterMs = RESEN
                         }, onBlur: () => {
                             setFocused(false);
                         }, accessibilityLabel: words.codeLabel, "aria-invalid": error !== null, ...describedBy(error === null ? undefined : errorId), inputMode: "numeric", autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, 
-                        // Unseen, not just clear: the boxes draw the digits and the focus, and a checker would read clear text as
-                        // text with no contrast.
-                        className: "absolute inset-0 opacity-0" })] }), error ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
+                        // The boxes draw the digits and the focus. Clear on iOS, which hands no taps to a view under 0.01 alpha.
+                        // Unseen elsewhere: Android would draw a long press's selection over the boxes, and a web checker would read
+                        // clear text as text with no contrast.
+                        className: "absolute inset-0 ios:text-transparent android:opacity-0 web:opacity-0" })] }), error ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
                             onSubmit(code);
                         } })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joinskips/brand",
-  "version": "7.0.0-develop.132",
+  "version": "7.0.0-develop.138",
   "description": "Skips design tokens, Onest, logos, favicons, interface icons, member pictures and app icons.",
   "license": "UNLICENSED",
   "homepage": "https://brand.joinskips.com",
@@ -13,6 +13,10 @@
       "types": "./chat/index.d.ts",
       "default": "./chat/index.js"
     },
+    "./ui": {
+      "types": "./ui/index.d.ts",
+      "default": "./ui/index.js"
+    },
     "./*": "./*"
   },
   "dependencies": {

package/ui/ThemeToggle.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType } from 'react';
+import { type Theme } from './theme.ts';
+/** The icons the theme button draws, from the brand's interface icons, which each app already draws. */
+export type ThemeIconName = 'sun' | 'moon' | 'monitor';
+export interface ThemeIconProps {
+    name: ThemeIconName;
+    color: string;
+    size: number;
+}
+export interface ThemeToggleProps {
+    /** The theme the app has now. */
+    choice: Theme;
+    /** What a press does with the next theme: the app stores and applies it. */
+    onChoose: (next: Theme) => void;
+    Icon: ComponentType<ThemeIconProps>;
+    /** The icons' colour, as the app's header draws its other icons. */
+    color: string;
+    /** The button's box, to fit the app's header. */
+    className?: string;
+    size?: number;
+}
+/** One icon that turns into the next as the choice moves on: the sun, the moon, the monitor. */
+export declare function ThemeToggle({ choice, onChoose, Icon, color, className, size }: ThemeToggleProps): import("react").JSX.Element;

package/ui/ThemeToggle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import { SWITCH_TO_LABEL, THEMES, nextTheme } from "./theme.js";
+const ICONS = { light: 'sun', dark: 'moon', system: 'monitor' };
+const ICON_SIZE = 24;
+/** One icon that turns into the next as the choice moves on: the sun, the moon, the monitor. */
+export function ThemeToggle({ choice, onChoose, Icon, color, className = '', size = ICON_SIZE }) {
+    const next = nextTheme(choice);
+    return (_jsx(Pressable, { role: "button", accessibilityLabel: SWITCH_TO_LABEL[next], hitSlop: 8, onPress: () => {
+            onChoose(next);
+        }, className: `items-center justify-center ${className}`, children: THEMES.map((theme) => (_jsx(View, { "aria-hidden": true, className: `absolute transition-[rotate,scale,opacity] duration-200 ease-standard ${theme === choice ? 'scale-100 rotate-0 opacity-100' : 'scale-50 rotate-90 opacity-0'}`, children: _jsx(Icon, { name: ICONS[theme], color: color, size: size }) }, theme))) }));
+}

package/ui/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeToggle, type ThemeIconName, type ThemeIconProps, type ThemeToggleProps } from './ThemeToggle.tsx';
+export { SWITCH_TO_LABEL, THEMES, nextTheme, type Theme } from './theme.ts';

package/ui/index.js

@@ -0,0 +1,2 @@
+export { ThemeToggle } from "./ThemeToggle.js";
+export { SWITCH_TO_LABEL, THEMES, nextTheme } from "./theme.js";

package/ui/theme.d.ts

@@ -0,0 +1,6 @@
+/** The theme a visitor picks: light, dark, or follow the system. Each app stores and applies it its own way. */
+export type Theme = 'light' | 'dark' | 'system';
+export declare const THEMES: readonly Theme[];
+export declare function nextTheme(theme: Theme): Theme;
+/** The theme button is named for what a press does next. */
+export declare const SWITCH_TO_LABEL: Readonly<Record<Theme, string>>;

package/ui/theme.js

@@ -0,0 +1,12 @@
+export const THEMES = ['light', 'dark', 'system'];
+/** The theme button cycles light, then dark, then back to the system. */
+const NEXT = { light: 'dark', dark: 'system', system: 'light' };
+export function nextTheme(theme) {
+    return NEXT[theme];
+}
+/** The theme button is named for what a press does next. */
+export const SWITCH_TO_LABEL = {
+    light: 'Switch to the light theme',
+    dark: 'Switch to the dark theme',
+    system: 'Follow the system theme',
+};