@webority/ui-react 0.18.1 → 0.20.0

package/dist/types/components/AppModal.d.ts

@@ -6,7 +6,7 @@
  * @param {import('react').ReactNode} [props.eyebrow] A small kicker label above the title.
  * @param {import('react').ReactNode} [props.title]
  * @param {import('react').ReactNode} [props.subtitle]
- * @param {string} [props.headerIcon] Bootstrap Icons name
+ * @param {string} [props.headerIcon] library icon name
  * @param {'default'|'danger'|'success'|'warning'} [props.tone='default'] Tints the header icon
  *   and eyebrow to signal intent — a destructive or a success dialog reads it from the header.
  * @param {boolean} [props.dismissible=true] Show the header close (×) button. Pair with

package/dist/types/components/AppMultiSelect.d.ts

@@ -30,7 +30,7 @@ import "@webority/ui-elements";
  * @param {string} [props.customInvalidMessage] Message for a refused typed entry
  *   (default "Enter a valid value.").
  * @param {boolean} [props.disabled]
- * @param {string} [props.icon] Leading glyph inside the control (a Bootstrap Icons name).
+ * @param {string} [props.icon] Leading glyph inside the control (a library icon name).
  * @param {'sm'|'lg'} [props.size] Control size around the default.
  * @param {boolean} [props.collapseChips=false] Keep the chosen chips on one row and fold the
  *   overflow into a "+N" counter, rather than letting the control grow.

package/dist/types/components/AppShell.d.ts

@@ -2,7 +2,7 @@ export type NavItemShape = {
     key?: string;
     label: string;
     /**
-     * Bootstrap Icons name — or a node, so a
+     * library icon name, or a node, so a
      * product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
      */
     icon?: string | import('react').ReactNode;
@@ -32,7 +32,7 @@ export type NavItemShape = {
  * @typedef {object} NavItemShape
  * @property {string} [key]
  * @property {string} label
- * @property {string|import('react').ReactNode} [icon] Bootstrap Icons name — or a node, so a
+ * @property {string|import('react').ReactNode} [icon] library icon name, or a node, so a
  *   product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
  * @property {string} href
  * @property {import('react').ReactNode} [badge] A count or short status at the row's end.

package/dist/types/components/AppThemeToggle.d.ts

@@ -0,0 +1,50 @@
+/**
+ * The light/dark switch: flips the whole page's theme with a page-wide effect (a wave rising
+ * from the bottom, a circle growing from the press, a wipe, blinds, or a fade). Two shapes:
+ * `variant="icon"` (default), one action disc that cycles through the modes, and
+ * `variant="segmented"`, one option per mode laid out like `AppSegmented`, so each mode is a
+ * button of its own. It owns the theme either way: it reads the stored choice, writes
+ * `data-theme` and `data-bs-theme` on `<html>` (which the design system and Bootstrap both
+ * read), and remembers the choice in localStorage under `storageKey`.
+ *
+ * Mount it anywhere in the chrome; two on one page stay in step. To avoid a wrong-theme flash
+ * before React runs, stamp the stored choice in an inline script in `<head>` (see the catalogue
+ * page); the component then takes over from that state.
+ *
+ * The effect needs the View Transitions API; without it, under `prefers-reduced-motion`, or when
+ * the page already shows the requested theme (dark to auto on a dark system), the switch is
+ * instant. Dark always comes up from the bottom and light down from the top, for the effects
+ * that have a direction.
+ *
+ * @param {object} props
+ * @param {"icon"|"segmented"} [props.variant="icon"] One cycling disc, or one option per mode.
+ * @param {"wave"|"circle"|"slide"|"blinds"|"fade"|"none"} [props.effect="wave"] The page-wide effect.
+ * @param {boolean} [props.includeAuto=false] Offer a third, system-following mode: light, dark, auto.
+ * @param {string} [props.storageKey="theme"] The localStorage key the choice is kept under.
+ * @param {number} [props.duration] Effect length in ms; each effect has its own default.
+ * @param {string} [props.label="Theme"] Accessible name: the disc's tooltip ("Theme: dark") or the segmented group's name.
+ * @param {string} [props.lightLabel="Light"] The segmented variant's option text for light.
+ * @param {string} [props.darkLabel="Dark"] The segmented variant's option text for dark.
+ * @param {string} [props.autoLabel="System"] The segmented variant's option text for auto.
+ * @param {string} [props.name] The segmented variant's field name (what groups its radios). Defaults to a generated one.
+ * @param {"sm"|"md"|"lg"|"xl"} [props.size="md"] The disc's glyph size (16/20/24/28px, the disc scales with it) or the segmented strip's size.
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"] The disc's preferred tooltip side.
+ * @param {(mode: "light"|"dark"|"auto") => void} [props.onChange] Fires with the new mode once it is applied.
+ * @param {string} [props.className]
+ */
+export default function AppThemeToggle({ variant, effect, includeAuto, storageKey, duration, label, lightLabel, darkLabel, autoLabel, name, size, tooltipPlacement, onChange, className, ...rest }: {
+    variant?: "icon" | "segmented";
+    effect?: "wave" | "circle" | "slide" | "blinds" | "fade" | "none";
+    includeAuto?: boolean;
+    storageKey?: string;
+    duration?: number;
+    label?: string;
+    lightLabel?: string;
+    darkLabel?: string;
+    autoLabel?: string;
+    name?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
+    onChange?: (mode: "light" | "dark" | "auto") => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppTimePicker.d.ts

@@ -16,6 +16,8 @@ import "@webority/ui-elements";
  * @param {boolean} [props.required]
  * @param {string} [props.hint]
  * @param {string} [props.error]
+ * @param {import('react').ReactNode} [props.help] Content for the label info-tip.
+ * @param {string} [props.helpLabel="More information"] aria-label for the info-tip button.
  * @param {string} [props.name]
  * @param {string} [props.min]               Time in "HH:mm" format
  * @param {string} [props.max]               Time in "HH:mm" format

package/dist/types/index.d.ts

@@ -80,6 +80,7 @@ export { default as AppTableToolbar } from "./components/AppTableToolbar.jsx";
 export { default as AppTabs } from "./components/AppTabs.jsx";
 export { default as AppTagInput } from "./components/AppTagInput.jsx";
 export { default as AppTextarea } from "./components/AppTextarea.jsx";
+export { default as AppThemeToggle } from "./components/AppThemeToggle.jsx";
 export { default as AppTimeline } from "./components/AppTimeline.jsx";
 export { default as AppTimePicker } from "./components/AppTimePicker.jsx";
 export { default as AppToast } from "./components/AppToast.jsx";