@bmsuisse/ui 0.15.0 → 0.16.0

package/dist/index.js

@@ -29,7 +29,16 @@ var buttonVariants = cva(
         // Tailwind theme (this package doesn't define them) — same pattern as AlertBox's
         // warning/info/success colors, which assume tokens the shared theme doesn't have.
         "swiss-primary": "bg-swiss-primary text-swiss-primary-foreground font-semibold shadow-sm hover:bg-swiss-primary-hover hover:-translate-y-px active:translate-y-px",
-        "swiss-secondary": "border border-input bg-background font-semibold text-foreground shadow-sm hover:bg-accent hover:-translate-y-px active:translate-y-px"
+        "swiss-secondary": "border border-input bg-background font-semibold text-foreground shadow-sm hover:bg-accent hover:-translate-y-px active:translate-y-px",
+        // Violet "AI action" accent, in the same three weights as default/outline/ghost.
+        // Fixed Tailwind palette rather than a token — same choice as Badge's `warning`
+        // and AlertBox/StatusBadge's warning/info/success tones: the shared theme has no
+        // `ai` color, and unlike `swiss-primary` these should work in a consuming app with
+        // zero setup. Tints go through `violet-500/N` (not per-mode `violet-50`/`-950`
+        // shades) so one class list reads correctly on both light and dark surfaces.
+        ai: "bg-violet-600 text-white shadow-sm hover:bg-violet-600/90",
+        "ai-subtle": "border border-violet-500/30 bg-violet-500/10 text-violet-700 hover:bg-violet-500/20 dark:text-violet-300",
+        "ai-ghost": "text-violet-700 hover:bg-violet-500/10 dark:text-violet-300"
       },
       size: {
         default: "h-9 px-3",
@@ -2187,8 +2196,10 @@ var KpiCard = memo(function KpiCard2({
   progressLabel,
   segments,
   centerValue,
+  background,
   testId
 }) {
+  const bgStyle = background ? { background } : void 0;
   if (variant === "hero") {
     return /* @__PURE__ */ jsxs18(
       "div",
@@ -2196,8 +2207,8 @@ var KpiCard = memo(function KpiCard2({
         "data-testid": testId,
         className: "relative col-span-2 flex min-w-0 flex-1 flex-col gap-1.5 overflow-hidden rounded-2xl p-4 md:p-3 lg:col-span-1 lg:max-w-[340px] lg:min-w-[260px]",
         style: {
-          background: "var(--color-primary)",
-          boxShadow: "0 2px 10px color-mix(in oklch, var(--color-primary) 18%, transparent)"
+          background: background ?? "var(--color-primary)",
+          boxShadow: `0 2px 10px color-mix(in oklch, ${background ?? "var(--color-primary)"} 18%, transparent)`
         },
         children: [
           /* @__PURE__ */ jsxs18("div", { className: "relative flex items-start justify-between", children: [
@@ -2241,6 +2252,7 @@ var KpiCard = memo(function KpiCard2({
       "div",
       {
         "data-testid": testId,
+        style: bgStyle,
         className: cn(
           "flex h-full min-w-0 flex-1 flex-col gap-1.5 overflow-hidden rounded-2xl border border-border bg-card p-3 transition-shadow md:p-2.5",
           href && "hover:border-primary/20 hover:shadow-md"
@@ -2282,7 +2294,7 @@ var KpiCard = memo(function KpiCard2({
   }
   if (variant === "donut") {
     const total = segments?.reduce((sum, s) => sum + s.value, 0) ?? 0;
-    return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, className: "rounded-xl border border-border bg-card p-5", children: [
+    return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
       /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
         /* @__PURE__ */ jsx35("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
         Icon2 && /* @__PURE__ */ jsx35("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx35(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
@@ -2319,7 +2331,7 @@ var KpiCard = memo(function KpiCard2({
   const prefix = isSuffix ? null : parts?.[0];
   const number = isSuffix ? parts[0] : parts?.[1] ?? parts?.[0];
   const suffix = isSuffix ? parts[1] : null;
-  return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, className: "rounded-xl border border-border bg-card p-5", children: [
+  return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
     /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
       /* @__PURE__ */ jsx35("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
       Icon2 && /* @__PURE__ */ jsx35("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx35(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
@@ -2700,10 +2712,326 @@ function SidebarNav({ children, className, ...rest }) {
   ] });
 }
 
+// src/patterns/ai/AiButton.tsx
+import { Sparkles } from "lucide-react";
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+var AiButton = forwardRef17(
+  ({ variant = "ai-subtle", loading = false, icon: Icon2 = Sparkles, disabled, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+    Button,
+    {
+      ref,
+      variant,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx41(LoadingSpinner, { size: "sm", className: "[&_svg]:text-current" }) : /* @__PURE__ */ jsx41(Icon2, { className: "h-4 w-4", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  )
+);
+AiButton.displayName = "AiButton";
+
+// src/patterns/ai/AiExplainButton.tsx
+import { RefreshCw, Sparkles as Sparkles2 } from "lucide-react";
+import { useState as useState12 } from "react";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+function AiExplainButton({
+  onExplain,
+  label = "Explain",
+  title,
+  align = "start",
+  contentClassName = "w-80",
+  size = "sm",
+  ...props
+}) {
+  const [open, setOpen] = useState12(false);
+  const [loading, setLoading] = useState12(false);
+  const [content, setContent] = useState12(null);
+  const [error, setError] = useState12(null);
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setContent(await onExplain());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleOpenChange = (next) => {
+    setOpen(next);
+    if (next && content === null && error === null && !loading) void load();
+  };
+  return /* @__PURE__ */ jsxs24(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(AiButton, { size, ...props, children: label }) }),
+    /* @__PURE__ */ jsxs24(PopoverContent, { align, className: contentClassName, children: [
+      /* @__PURE__ */ jsxs24("p", { className: "mb-2 flex items-center gap-1.5 text-sm font-semibold", children: [
+        /* @__PURE__ */ jsx42(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+        title ?? label
+      ] }),
+      loading ? /* @__PURE__ */ jsx42(LoadingSpinner, { size: "sm", label: "Thinking\u2026", className: "text-sm text-muted-foreground" }) : error ? /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-start gap-2", children: [
+        /* @__PURE__ */ jsx42("div", { role: "alert", className: "w-full", children: /* @__PURE__ */ jsx42(AlertBox, { variant: "error", children: error }) }),
+        /* @__PURE__ */ jsxs24(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void load(), children: [
+          /* @__PURE__ */ jsx42(RefreshCw, { className: "h-4 w-4", "aria-hidden": "true" }),
+          "Try again"
+        ] })
+      ] }) : /* @__PURE__ */ jsx42("div", { className: "max-h-80 overflow-y-auto text-sm leading-relaxed", children: content })
+    ] })
+  ] });
+}
+
+// src/patterns/ai/VoiceInputButton.tsx
+import { Mic, MicOff } from "lucide-react";
+import { forwardRef as forwardRef18 } from "react";
+
+// src/patterns/ai/useSpeechRecognition.ts
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef6, useState as useState13 } from "react";
+function getCtor() {
+  if (typeof window === "undefined") return void 0;
+  const w = window;
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+}
+function browserEngine() {
+  const Ctor = getCtor();
+  return Ctor ? new Ctor() : null;
+}
+function describeSpeechError(code) {
+  switch (code) {
+    case "aborted":
+      return null;
+    case "not-allowed":
+    case "service-not-allowed":
+      return "Microphone access is blocked. Allow it in the browser's site settings and try again.";
+    case "audio-capture":
+      return "No microphone was found.";
+    case "no-speech":
+      return "No speech was detected.";
+    case "network":
+      return "Speech recognition needs a network connection.";
+    default:
+      return `Speech recognition failed (${code}).`;
+  }
+}
+function useSpeechRecognition({
+  lang,
+  onResult,
+  onError,
+  engine
+} = {}) {
+  const [listening, setListening] = useState13(false);
+  const [interim, setInterim] = useState13("");
+  const [error, setError] = useState13(null);
+  const recognitionRef = useRef6(null);
+  const onResultRef = useRef6(onResult);
+  const onErrorRef = useRef6(onError);
+  const engineRef = useRef6(engine);
+  onResultRef.current = onResult;
+  onErrorRef.current = onError;
+  engineRef.current = engine;
+  const supported = engine !== void 0 || getCtor() !== void 0;
+  const stop = useCallback2(() => {
+    recognitionRef.current?.stop();
+  }, []);
+  const start = useCallback2(() => {
+    if (recognitionRef.current) return;
+    const recognition = engineRef.current ? engineRef.current() : browserEngine();
+    if (!recognition) return;
+    recognition.lang = lang ?? (typeof document !== "undefined" ? document.documentElement.lang : "") ?? "";
+    if (!recognition.lang) recognition.lang = "en-US";
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.onresult = (event) => {
+      let pending = "";
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        if (!result) continue;
+        if (result.isFinal) onResultRef.current?.(result[0].transcript.trim());
+        else pending += result[0].transcript;
+      }
+      setInterim(pending);
+    };
+    recognition.onerror = (event) => {
+      setError(event.error);
+      onErrorRef.current?.(event.error);
+    };
+    recognition.onend = () => {
+      recognitionRef.current = null;
+      setListening(false);
+      setInterim("");
+    };
+    recognitionRef.current = recognition;
+    setError(null);
+    setInterim("");
+    setListening(true);
+    recognition.start();
+  }, [lang]);
+  const toggle = useCallback2(() => {
+    if (recognitionRef.current) stop();
+    else start();
+  }, [start, stop]);
+  useEffect6(() => () => recognitionRef.current?.abort(), []);
+  return { supported, listening, interim, error, start, stop, toggle };
+}
+
+// src/patterns/ai/VoiceInputButton.tsx
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+var VoiceInputButton = forwardRef18(
+  ({
+    onTranscript,
+    onError,
+    lang,
+    engine,
+    label,
+    startLabel = "Start dictation",
+    stopLabel = "Stop dictation",
+    showInterim = false,
+    size,
+    disabled,
+    className,
+    ...props
+  }, ref) => {
+    const { supported, listening, interim, toggle } = useSpeechRecognition({
+      lang,
+      onResult: onTranscript,
+      onError,
+      engine
+    });
+    const unsupportedTitle = "Speech recognition isn't available in this browser";
+    return (
+      // `title` lives on the wrapper, not the button: buttonVariants sets
+      // `disabled:pointer-events-none`, so a disabled button never shows its own.
+      /* @__PURE__ */ jsxs25("span", { className: "inline-flex min-w-0 items-center gap-2", title: supported ? void 0 : unsupportedTitle, children: [
+        /* @__PURE__ */ jsxs25(
+          Button,
+          {
+            ref,
+            type: "button",
+            variant: "outline",
+            size: size ?? (label ? "default" : "icon"),
+            onClick: toggle,
+            disabled: disabled || !supported,
+            "aria-label": label ? void 0 : supported ? listening ? stopLabel : startLabel : unsupportedTitle,
+            "aria-pressed": supported ? listening : void 0,
+            className: cn(
+              listening && "border-destructive bg-destructive/10 text-red-800 hover:bg-destructive/15 hover:text-red-800 dark:text-red-300 dark:hover:text-red-300",
+              className
+            ),
+            ...props,
+            children: [
+              supported ? /* @__PURE__ */ jsx43(Mic, { className: cn("h-4 w-4", listening && "animate-pulse motion-reduce:animate-none"), "aria-hidden": "true" }) : /* @__PURE__ */ jsx43(MicOff, { className: "h-4 w-4", "aria-hidden": "true" }),
+              label
+            ]
+          }
+        ),
+        showInterim && interim ? /* @__PURE__ */ jsx43("span", { "aria-live": "polite", className: "truncate text-sm text-muted-foreground italic", children: interim }) : null
+      ] })
+    );
+  }
+);
+VoiceInputButton.displayName = "VoiceInputButton";
+
+// src/patterns/ai/VoiceTranscript.tsx
+import { Undo2, Wand2 } from "lucide-react";
+import { useState as useState14 } from "react";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+function VoiceTranscript({
+  value,
+  onChange,
+  onTransform,
+  transformLabel = "Transform with AI",
+  placeholder = "Speak or type\u2026",
+  lang,
+  engine,
+  rows = 4,
+  disabled,
+  className,
+  ...props
+}) {
+  const [loading, setLoading] = useState14(false);
+  const [error, setError] = useState14(null);
+  const [previous, setPrevious] = useState14(null);
+  const append = (chunk) => {
+    onChange(value ? `${value.trimEnd()} ${chunk}` : chunk);
+  };
+  const transform = async () => {
+    if (!onTransform) return;
+    const before = value;
+    setLoading(true);
+    setError(null);
+    try {
+      const next = await onTransform(before);
+      setPrevious(before);
+      onChange(next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const undo = () => {
+    if (previous === null) return;
+    onChange(previous);
+    setPrevious(null);
+  };
+  return /* @__PURE__ */ jsxs26("div", { className: cn("flex flex-col gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx44(
+      Textarea,
+      {
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        rows,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx44(
+        VoiceInputButton,
+        {
+          onTranscript: append,
+          onError: (code) => setError(describeSpeechError(code)),
+          lang,
+          engine,
+          label: "Dictate",
+          size: "sm",
+          showInterim: true,
+          disabled: disabled || loading
+        }
+      ),
+      onTransform ? /* @__PURE__ */ jsx44(
+        AiButton,
+        {
+          variant: "ai",
+          size: "sm",
+          icon: Wand2,
+          loading,
+          disabled: disabled || value.trim().length === 0,
+          onClick: () => void transform(),
+          children: transformLabel
+        }
+      ) : null,
+      previous !== null && !loading ? /* @__PURE__ */ jsxs26(Button, { type: "button", variant: "ghost", size: "sm", onClick: undo, children: [
+        /* @__PURE__ */ jsx44(Undo2, { className: "h-4 w-4", "aria-hidden": "true" }),
+        "Undo"
+      ] }) : null
+    ] }),
+    error ? (
+      // AlertBox has no `role` prop, so the live region wraps it; same shape
+      // a consuming app's own form errors take.
+      /* @__PURE__ */ jsx44("div", { role: "alert", children: /* @__PURE__ */ jsx44(AlertBox, { variant: "error", children: error }) })
+    ) : null
+  ] });
+}
+
 // src/patterns/stepper/Stepper.tsx
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { Check as Check5, Plus } from "lucide-react";
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function Stepper({
   step,
   maxStep,
@@ -2715,8 +3043,8 @@ function Stepper({
   scrollTestId = "stepper-scroll",
   newTestId
 }) {
-  const stepRefs = useRef6(/* @__PURE__ */ new Map());
-  useEffect6(() => {
+  const stepRefs = useRef7(/* @__PURE__ */ new Map());
+  useEffect7(() => {
     const activeStep = stepRefs.current.get(step);
     activeStep?.scrollIntoView({ block: "nearest", inline: "center" });
   }, [step]);
@@ -2724,19 +3052,19 @@ function Stepper({
     // onNew is pinned outside the horizontally-scrolling region below (a sibling of
     // it, not a child) so its own edge never scrolls off-screen along with the
     // later steps once the scroller's min-width doesn't fit the viewport.
-    /* @__PURE__ */ jsxs23("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx41("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsxs27("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx45("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx45(
         "div",
         {
           "data-testid": scrollTestId,
           className: "flex w-full items-center gap-0 overflow-x-auto px-2 py-1",
-          children: /* @__PURE__ */ jsx41("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
+          children: /* @__PURE__ */ jsx45("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
             const done = step > n;
             const active = step === n;
             const navigable = n <= maxStep && n !== step;
             const last = i === steps.length - 1;
-            return /* @__PURE__ */ jsxs23("li", { className: cn("flex items-start", !last && "flex-1"), children: [
-              /* @__PURE__ */ jsxs23(
+            return /* @__PURE__ */ jsxs27("li", { className: cn("flex items-start", !last && "flex-1"), children: [
+              /* @__PURE__ */ jsxs27(
                 "button",
                 {
                   ref: (element) => {
@@ -2752,17 +3080,17 @@ function Stepper({
                     navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx41(
+                    /* @__PURE__ */ jsx45(
                       "div",
                       {
                         className: cn(
                           "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors",
                           done ? "bg-primary/15 text-primary" : active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                         ),
-                        children: done ? /* @__PURE__ */ jsx41(Check5, { className: "h-3 w-3" }) : n
+                        children: done ? /* @__PURE__ */ jsx45(Check5, { className: "h-3 w-3" }) : n
                       }
                     ),
-                    /* @__PURE__ */ jsx41(
+                    /* @__PURE__ */ jsx45(
                       "span",
                       {
                         className: cn(
@@ -2772,11 +3100,11 @@ function Stepper({
                         children: label
                       }
                     ),
-                    /* @__PURE__ */ jsx41("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
+                    /* @__PURE__ */ jsx45("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
                   ]
                 }
               ),
-              !last && /* @__PURE__ */ jsx41(
+              !last && /* @__PURE__ */ jsx45(
                 "div",
                 {
                   className: cn(
@@ -2789,7 +3117,7 @@ function Stepper({
           }) })
         }
       ) }),
-      onNew && /* @__PURE__ */ jsxs23(
+      onNew && /* @__PURE__ */ jsxs27(
         "button",
         {
           "data-testid": newTestId,
@@ -2797,7 +3125,7 @@ function Stepper({
           title: newLabel,
           className: "flex shrink-0 items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-[12px] font-semibold text-foreground transition-colors hover:bg-muted/50",
           children: [
-            /* @__PURE__ */ jsx41(Plus, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx45(Plus, { className: "h-3.5 w-3.5" }),
             newLabel
           ]
         }
@@ -2806,6 +3134,8 @@ function Stepper({
   );
 }
 export {
+  AiButton,
+  AiExplainButton,
   AlertBox,
   Badge,
   Button,
@@ -2905,14 +3235,18 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  VoiceInputButton,
+  VoiceTranscript,
   badgeVariants,
   buttonVariants,
   cn,
+  describeSpeechError,
   getConfirmButtonPlacement,
   isWindowsPlatform,
   loadingSpinnerIconVariants,
   sheetVariants,
   useMediaQuery,
-  useSidebarCollapsed
+  useSidebarCollapsed,
+  useSpeechRecognition
 };
 //# sourceMappingURL=index.js.map