@cavebatsofware/riposte-pickers 0.1.0

package/dist/language.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+interface Language {
+    /** Base language code (no region subtag), e.g. `en`. Passed to i18next. */
+    code: string;
+    /**
+     * Display name written in the language's own script (e.g. `Deutsch`,
+     * `中文`). Shown verbatim in the list so a reader recognizes their own
+     * language without a translation chain.
+     */
+    nativeName: string;
+}
+declare const DEFAULT_LANGUAGES: Language[];
+
+interface LanguagePickerProps {
+    /**
+     * `popover` (default): a globe-icon button in a header that opens a
+     * dropdown of languages. `inline`: the list rendered directly, for use
+     * inside a drawer.
+     */
+    variant?: "popover" | "inline";
+    /**
+     * i18next namespace holding the `language.*` keys. Defaults to `common`.
+     * Merge the package's `languageResources` into this namespace.
+     */
+    namespace?: string;
+    /** Catalog of selectable languages. Defaults to the bundled five. */
+    languages?: Language[];
+    /**
+     * Optional side effect fired after a successful switch, e.g. persisting the
+     * choice server-side. Receives the chosen base code. Rejections are caught
+     * so they never undo the local switch; handle errors inside the callback if
+     * you need to surface them.
+     */
+    onChange?: (code: string) => void | Promise<void>;
+}
+declare function LanguagePicker({ variant, namespace, languages, onChange, }: LanguagePickerProps): React.JSX.Element;
+
+export { DEFAULT_LANGUAGES, type Language, LanguagePicker, type LanguagePickerProps };

package/dist/language.js

@@ -0,0 +1,5 @@
+export { DEFAULT_LANGUAGES, LanguagePicker } from './chunk-IWUGV7HL.js';
+import './chunk-XWM3AYYR.js';
+import './chunk-6FAEMGAR.js';
+//# sourceMappingURL=language.js.map
+//# sourceMappingURL=language.js.map

package/dist/language.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"language.js"}

package/dist/shared.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+require('./chunk-U73YJG4C.cjs');
+var chunk7JL223UJ_cjs = require('./chunk-7JL223UJ.cjs');
+var chunk6OZDKKEP_cjs = require('./chunk-6OZDKKEP.cjs');
+
+
+
+Object.defineProperty(exports, "useRovingFocus", {
+  enumerable: true,
+  get: function () { return chunk7JL223UJ_cjs.useRovingFocus_default; }
+});
+Object.defineProperty(exports, "PopoverPicker", {
+  enumerable: true,
+  get: function () { return chunk6OZDKKEP_cjs.PopoverPicker; }
+});
+//# sourceMappingURL=shared.cjs.map
+//# sourceMappingURL=shared.cjs.map

package/dist/shared.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"shared.cjs"}

package/dist/shared.d.cts

@@ -0,0 +1,29 @@
+import React__default, { RefObject } from 'react';
+
+interface PopoverPickerProps {
+    variant?: "popover" | "inline";
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    className: string;
+    toggleAriaLabel: string;
+    toggleIcon: React__default.ReactNode;
+    popoverAriaLabel: string;
+    popoverRef?: React__default.Ref<HTMLDivElement> | null;
+    inlineRef?: React__default.Ref<HTMLDivElement> | null;
+    children: React__default.ReactNode;
+}
+declare function PopoverPicker({ variant, open, onOpenChange, className, toggleAriaLabel, toggleIcon, popoverAriaLabel, popoverRef, inlineRef, children, }: PopoverPickerProps): React__default.JSX.Element;
+
+interface RovingFocusOptions {
+    /** CSS selector for the navigable items. Defaults to the ARIA menu roles. */
+    selector?: string;
+    /** Arrow-key axis. Defaults to vertical. */
+    orientation?: "vertical" | "horizontal";
+    /** Wrap from the last item back to the first (and vice versa). Default true. */
+    wrap?: boolean;
+    /** Move DOM focus into the list on activation. Default true. */
+    autoFocus?: boolean;
+}
+declare function useRovingFocus(containerRef: RefObject<HTMLElement | null>, active: boolean, { selector, orientation, wrap, autoFocus, }?: RovingFocusOptions): void;
+
+export { PopoverPicker, type PopoverPickerProps, type RovingFocusOptions, useRovingFocus };

package/dist/shared.d.ts

@@ -0,0 +1,29 @@
+import React__default, { RefObject } from 'react';
+
+interface PopoverPickerProps {
+    variant?: "popover" | "inline";
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    className: string;
+    toggleAriaLabel: string;
+    toggleIcon: React__default.ReactNode;
+    popoverAriaLabel: string;
+    popoverRef?: React__default.Ref<HTMLDivElement> | null;
+    inlineRef?: React__default.Ref<HTMLDivElement> | null;
+    children: React__default.ReactNode;
+}
+declare function PopoverPicker({ variant, open, onOpenChange, className, toggleAriaLabel, toggleIcon, popoverAriaLabel, popoverRef, inlineRef, children, }: PopoverPickerProps): React__default.JSX.Element;
+
+interface RovingFocusOptions {
+    /** CSS selector for the navigable items. Defaults to the ARIA menu roles. */
+    selector?: string;
+    /** Arrow-key axis. Defaults to vertical. */
+    orientation?: "vertical" | "horizontal";
+    /** Wrap from the last item back to the first (and vice versa). Default true. */
+    wrap?: boolean;
+    /** Move DOM focus into the list on activation. Default true. */
+    autoFocus?: boolean;
+}
+declare function useRovingFocus(containerRef: RefObject<HTMLElement | null>, active: boolean, { selector, orientation, wrap, autoFocus, }?: RovingFocusOptions): void;
+
+export { PopoverPicker, type PopoverPickerProps, type RovingFocusOptions, useRovingFocus };

package/dist/shared.js

@@ -0,0 +1,5 @@
+import './chunk-ATS6MI5Q.js';
+export { useRovingFocus_default as useRovingFocus } from './chunk-XWM3AYYR.js';
+export { PopoverPicker } from './chunk-6FAEMGAR.js';
+//# sourceMappingURL=shared.js.map
+//# sourceMappingURL=shared.js.map

package/dist/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"shared.js"}

package/dist/theme.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var chunkGDYHLOSQ_cjs = require('./chunk-GDYHLOSQ.cjs');
+require('./chunk-6OZDKKEP.cjs');
+
+
+
+Object.defineProperty(exports, "COLORWAYS", {
+  enumerable: true,
+  get: function () { return chunkGDYHLOSQ_cjs.COLORWAYS; }
+});
+Object.defineProperty(exports, "DEFAULT_COLORWAY", {
+  enumerable: true,
+  get: function () { return chunkGDYHLOSQ_cjs.DEFAULT_COLORWAY; }
+});
+Object.defineProperty(exports, "DEFAULT_STORAGE_KEY", {
+  enumerable: true,
+  get: function () { return chunkGDYHLOSQ_cjs.DEFAULT_STORAGE_KEY; }
+});
+Object.defineProperty(exports, "ThemePicker", {
+  enumerable: true,
+  get: function () { return chunkGDYHLOSQ_cjs.ThemePicker; }
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () { return chunkGDYHLOSQ_cjs.ThemeProvider; }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () { return chunkGDYHLOSQ_cjs.useTheme; }
+});
+//# sourceMappingURL=theme.cjs.map
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"theme.cjs"}

package/dist/theme.d.cts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface Colorway {
+    /** Stable id; must match a `[data-theme="<id>"]` block in your CSS. */
+    id: string;
+    /** Fallback display label (i18n catalog labels take precedence in the UI). */
+    label: string;
+    /** CSS `background` value for the picker swatch (color or gradient). */
+    swatch: string;
+}
+type ThemeMode = "light" | "dark";
+interface ThemeContextValue {
+    /** Resolved theme id of record, e.g. `forest` or `forest-dark`. */
+    theme: string;
+    /** Set the theme by id; ignored if the id is not in the catalog. */
+    setTheme: (id: string) => void;
+    /** The active catalog. */
+    colorways: Colorway[];
+    /** Derived light/dark mode for the current theme. */
+    mode: ThemeMode;
+    /** Flip just the mode, keeping the current colorway. */
+    setMode: (mode: ThemeMode) => void;
+}
+declare const COLORWAYS: Colorway[];
+declare const DEFAULT_COLORWAY = "forest";
+declare const DEFAULT_STORAGE_KEY = "rs_theme_v1";
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** Colorway catalog. Defaults to the bundled riposte `COLORWAYS`. */
+    colorways?: Colorway[];
+    /** Colorway used when no choice is stored. Defaults to `forest`. */
+    defaultColorway?: string;
+    /** localStorage key for the persisted choice. Defaults to `rs_theme_v1`. */
+    storageKey?: string;
+}
+declare function ThemeProvider({ children, colorways, defaultColorway, storageKey, }: ThemeProviderProps): React.JSX.Element;
+
+interface ThemePickerProps {
+    /**
+     * `popover` (default): round icon button in a header that opens a popover
+     * grid. `inline`: the grid rendered directly, for use inside a drawer.
+     */
+    variant?: "popover" | "inline";
+    /**
+     * i18next namespace holding the `theme.*` keys. Defaults to `common`.
+     * Merge the package's `themeResources` into this namespace.
+     */
+    namespace?: string;
+}
+declare function ThemePicker({ variant, namespace }: ThemePickerProps): React.JSX.Element;
+
+export { COLORWAYS, type Colorway, DEFAULT_COLORWAY, DEFAULT_STORAGE_KEY, type ThemeContextValue, type ThemeMode, ThemePicker, type ThemePickerProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/dist/theme.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface Colorway {
+    /** Stable id; must match a `[data-theme="<id>"]` block in your CSS. */
+    id: string;
+    /** Fallback display label (i18n catalog labels take precedence in the UI). */
+    label: string;
+    /** CSS `background` value for the picker swatch (color or gradient). */
+    swatch: string;
+}
+type ThemeMode = "light" | "dark";
+interface ThemeContextValue {
+    /** Resolved theme id of record, e.g. `forest` or `forest-dark`. */
+    theme: string;
+    /** Set the theme by id; ignored if the id is not in the catalog. */
+    setTheme: (id: string) => void;
+    /** The active catalog. */
+    colorways: Colorway[];
+    /** Derived light/dark mode for the current theme. */
+    mode: ThemeMode;
+    /** Flip just the mode, keeping the current colorway. */
+    setMode: (mode: ThemeMode) => void;
+}
+declare const COLORWAYS: Colorway[];
+declare const DEFAULT_COLORWAY = "forest";
+declare const DEFAULT_STORAGE_KEY = "rs_theme_v1";
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** Colorway catalog. Defaults to the bundled riposte `COLORWAYS`. */
+    colorways?: Colorway[];
+    /** Colorway used when no choice is stored. Defaults to `forest`. */
+    defaultColorway?: string;
+    /** localStorage key for the persisted choice. Defaults to `rs_theme_v1`. */
+    storageKey?: string;
+}
+declare function ThemeProvider({ children, colorways, defaultColorway, storageKey, }: ThemeProviderProps): React.JSX.Element;
+
+interface ThemePickerProps {
+    /**
+     * `popover` (default): round icon button in a header that opens a popover
+     * grid. `inline`: the grid rendered directly, for use inside a drawer.
+     */
+    variant?: "popover" | "inline";
+    /**
+     * i18next namespace holding the `theme.*` keys. Defaults to `common`.
+     * Merge the package's `themeResources` into this namespace.
+     */
+    namespace?: string;
+}
+declare function ThemePicker({ variant, namespace }: ThemePickerProps): React.JSX.Element;
+
+export { COLORWAYS, type Colorway, DEFAULT_COLORWAY, DEFAULT_STORAGE_KEY, type ThemeContextValue, type ThemeMode, ThemePicker, type ThemePickerProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/dist/theme.js

@@ -0,0 +1,4 @@
+export { COLORWAYS, DEFAULT_COLORWAY, DEFAULT_STORAGE_KEY, ThemePicker, ThemeProvider, useTheme } from './chunk-A4OVAXLP.js';
+import './chunk-6FAEMGAR.js';
+//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"theme.js"}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@cavebatsofware/riposte-pickers",
+  "version": "0.1.0",
+  "description": "Accessible React theme and language pickers sharing one popover/roving-focus chassis, with a localStorage-backed theme engine. Extracted from riposte-social.",
+  "license": "GPL-3.0-only",
+  "author": "Grant DeFayette <grant@cavebatsofware.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cavebatsofware/riposte-pickers.git"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./theme": {
+      "import": {
+        "types": "./dist/theme.d.ts",
+        "default": "./dist/theme.js"
+      },
+      "require": {
+        "types": "./dist/theme.d.cts",
+        "default": "./dist/theme.cjs"
+      }
+    },
+    "./language": {
+      "import": {
+        "types": "./dist/language.d.ts",
+        "default": "./dist/language.js"
+      },
+      "require": {
+        "types": "./dist/language.d.cts",
+        "default": "./dist/language.cjs"
+      }
+    },
+    "./shared": {
+      "import": {
+        "types": "./dist/shared.d.ts",
+        "default": "./dist/shared.js"
+      },
+      "require": {
+        "types": "./dist/shared.d.cts",
+        "default": "./dist/shared.cjs"
+      }
+    },
+    "./i18n": {
+      "import": {
+        "types": "./dist/i18n/index.d.ts",
+        "default": "./dist/i18n/index.js"
+      },
+      "require": {
+        "types": "./dist/i18n/index.d.cts",
+        "default": "./dist/i18n/index.cjs"
+      }
+    },
+    "./styles": "./styles/index.css",
+    "./styles/palette.css": "./styles/palette.css",
+    "./styles/picker.css": "./styles/picker.css",
+    "./styles/language.css": "./styles/language.css"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-i18next": ">=13"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^17.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0"
+  }
+}

package/styles/index.css

@@ -0,0 +1,3 @@
+@import "./palette.css";
+@import "./picker.css";
+@import "./language.css";

package/styles/language.css

@@ -0,0 +1,89 @@
+/* ==========================================================================
+   Language picker
+   Globe-icon toggle that opens a list of supported languages, parallel to the
+   theme picker and meant for a header slot. The active language gets a check;
+   native names render in their own scripts (中文, etc.) so users recognize
+   their language at a glance without a translation chain. Consumes the shared
+   design tokens from palette.css.
+   ========================================================================== */
+.language-picker {
+  position: relative;
+}
+
+.language-picker-toggle {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--shadow-popover);
+  transition: background-color 0.15s, color 0.15s;
+}
+.language-picker-toggle:hover {
+  color: var(--color-primary);
+}
+
+.language-picker-popover {
+  position: absolute;
+  top: calc(100% + var(--spacing-2));
+  right: 0;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2);
+  min-width: 200px;
+  box-shadow: var(--shadow-popover);
+  z-index: 35;
+}
+
+.language-picker-title {
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-muted);
+  margin-bottom: var(--spacing-2);
+  padding: 0 var(--spacing-2);
+}
+
+.language-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.language-picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  text-align: left;
+}
+.language-picker-item:hover {
+  background: var(--color-overlay);
+}
+.language-picker-item.active {
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.language-picker-name {
+  flex: 1 1 auto;
+}
+
+.language-picker-check {
+  flex: 0 0 auto;
+  color: var(--color-primary);
+}