@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Form/ControlledTabsPrimitives.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import classNames from "classnames";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const TabsContext = createContext({ active: "" });
+const TabsRoot = ({ value, children, className }) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { active: value }, children: /* @__PURE__ */ jsx("div", { className: mergeClasses("block", className), children }) });
+const TabsHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", { role: "tablist", className: mergeClasses("relative flex", className), children });
+const Tab = forwardRef(
+  ({ value, disabled = false, className, children, ...rest }, ref) => {
+    const { active } = useContext(TabsContext);
+    const isActive = active === value;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tab",
+        "data-value": value,
+        "aria-selected": isActive,
+        tabIndex: disabled ? -1 : 0,
+        className: mergeClasses(
+          classNames(
+            "relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive",
+            isActive ? "border-brand" : "border-transparent",
+            { "pointer-events-none opacity-50": disabled }
+          ),
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+const TabsBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("block w-full", className), children });
+const TabPanel = ({ value, children, className }) => {
+  const { active } = useContext(TabsContext);
+  const isActive = active === value;
+  return /* @__PURE__ */ jsx("div", { role: "tabpanel", hidden: !isActive, className: mergeClasses(className, classNames({ "!hidden": !isActive })), children });
+};
+export {
+  Tab,
+  TabPanel,
+  TabsBody,
+  TabsHeader,
+  TabsRoot
+};
+//# sourceMappingURL=ControlledTabsPrimitives.js.map

package/dist/components/Form/ControlledTabsPrimitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledTabsPrimitives.js","sources":["../../../src/components/Form/ControlledTabsPrimitives.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface ITabsContext {\n  active: string;\n}\n\nconst TabsContext = createContext<ITabsContext>({ active: '' });\n\ninterface ITabsRootProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsRoot: React.FC<ITabsRootProps> = ({ value, children, className }) => (\n  <TabsContext.Provider value={{ active: value }}>\n    <div className={mergeClasses('block', className)}>{children}</div>\n  </TabsContext.Provider>\n);\n\ninterface ITabsHeaderProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsHeader: React.FC<ITabsHeaderProps> = ({ children, className }) => (\n  <div role=\"tablist\" className={mergeClasses('relative flex', className)}>\n    {children}\n  </div>\n);\n\ninterface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  value: string;\n  disabled?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/**\n * Rendered as a div with role=\"tab\", not a native button: a tab can carry its own controls\n * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid\n * HTML that silently breaks the inner controls.\n *\n * The active underline lives on the tab itself rather than on a separate sliding indicator,\n * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.\n */\nexport const Tab = forwardRef<HTMLDivElement, ITabProps>(\n  ({ value, disabled = false, className, children, ...rest }, ref) => {\n    const { active } = useContext(TabsContext);\n    const isActive = active === value;\n\n    return (\n      <div\n        ref={ref}\n        role=\"tab\"\n        // ControlledTabs locates tabs by this attribute to scroll the header.\n        data-value={value}\n        aria-selected={isActive}\n        tabIndex={disabled ? -1 : 0}\n        className={mergeClasses(\n          classNames(\n            'relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive',\n            isActive ? 'border-brand' : 'border-transparent',\n            { 'pointer-events-none opacity-50': disabled },\n          ),\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nTab.displayName = 'Tab';\n\ninterface ITabsBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsBody: React.FC<ITabsBodyProps> = ({ children, className }) => (\n  <div className={mergeClasses('block w-full', className)}>{children}</div>\n);\n\ninterface ITabPanelProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus\n * and scroll position of every tab the user is not looking at.\n */\nexport const TabPanel: React.FC<ITabPanelProps> = ({ value, children, className }) => {\n  const { active } = useContext(TabsContext);\n  const isActive = active === value;\n\n  // `hidden` goes AFTER the consumer classes on purpose: a `tabPanelClassName` such as\n  // `flex flex-col` is a display utility too, so merged the other way round it would win over\n  // `hidden` and every inactive panel would render stacked under the active one.\n  return (\n    <div role=\"tabpanel\" hidden={!isActive} className={mergeClasses(className, classNames({ '!hidden': !isActive }))}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,cAAc,cAA4B,EAAE,QAAQ,IAAI;AAQvD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBACpE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,MAAA,GACrC,UAAA,oBAAC,OAAA,EAAI,WAAW,aAAa,SAAS,SAAS,GAAI,SAAA,CAAS,EAAA,CAC9D;AAQK,MAAM,aAAyC,CAAC,EAAE,UAAU,gBACjE,oBAAC,OAAA,EAAI,MAAK,WAAU,WAAW,aAAa,iBAAiB,SAAS,GACnE,SAAA,CACH;AAkBK,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QAEL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,UACT;AAAA,YACE;AAAA,YACA,WAAW,iBAAiB;AAAA,YAC5B,EAAE,kCAAkC,SAAA;AAAA,UAAS;AAAA,UAE/C;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,IAAI,cAAc;AAOX,MAAM,WAAqC,CAAC,EAAE,UAAU,UAAA,MAC7D,oBAAC,OAAA,EAAI,WAAW,aAAa,gBAAgB,SAAS,GAAI,SAAA,CAAS;AAa9D,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBAAgB;AACpF,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,WAAW,WAAW;AAK5B,6BACG,OAAA,EAAI,MAAK,YAAW,QAAQ,CAAC,UAAU,WAAW,aAAa,WAAW,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,GAC5G,UACH;AAEJ;"}

package/dist/components/Form/ControlledTextarea.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export type TTextareaResize = 'none' | 'vertical';
+interface IControlledTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'> {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    resize?: TTextareaResize;
+    className?: string;
+    containerClassName?: string;
+    /** Reaches the native textarea, for hosts that must focus or measure it imperatively. */
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+}
+/**
+ * The label is rendered as the placeholder and as the accessible name, mirroring
+ * ControlledInput: a floating label animates onto the border and relies on pseudo-element
+ * border segments to cut a notch, which breaks wherever the border is overridden.
+ *
+ * Background, border and focus ring come from the form base layer in index.css, so this
+ * component names no colour for them.
+ */
+declare const ControlledTextarea: React.FC<IControlledTextareaProps>;
+export default ControlledTextarea;

package/dist/components/Form/ControlledTextarea.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const RESIZE_CLASS = {
+  none: "resize-none",
+  vertical: "resize-y"
+};
+const ControlledTextarea = ({
+  label,
+  error = false,
+  errorMessage,
+  resize = "vertical",
+  className,
+  containerClassName,
+  textareaRef,
+  rows = 4,
+  placeholder,
+  "aria-label": ariaLabel,
+  ...rest
+}) => /* @__PURE__ */ jsxs("div", { className: classNames("w-full", containerClassName), children: [
+  /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      rows,
+      placeholder: placeholder ?? label,
+      "aria-label": ariaLabel ?? label,
+      "aria-invalid": error || void 0,
+      className: mergeClasses(
+        classNames(
+          "w-full rounded-lg border px-3 py-2.5 text-sm text-foreground transition-colors",
+          "placeholder:text-foreground-faint disabled:cursor-not-allowed disabled:bg-muted",
+          RESIZE_CLASS[resize],
+          { "border-danger focus:border-danger": error }
+        ),
+        className
+      ),
+      ...rest
+    }
+  ),
+  error && errorMessage && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-danger-emphasis", children: errorMessage })
+] });
+export {
+  ControlledTextarea as default
+};
+//# sourceMappingURL=ControlledTextarea.js.map

package/dist/components/Form/ControlledTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledTextarea.js","sources":["../../../src/components/Form/ControlledTextarea.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TTextareaResize = 'none' | 'vertical';\n\ninterface IControlledTextareaProps extends Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'className' | 'style'\n> {\n  label?: string;\n  error?: boolean;\n  errorMessage?: string;\n  resize?: TTextareaResize;\n  className?: string;\n  containerClassName?: string;\n  /** Reaches the native textarea, for hosts that must focus or measure it imperatively. */\n  textareaRef?: React.Ref<HTMLTextAreaElement>;\n}\n\nconst RESIZE_CLASS: Record<TTextareaResize, string> = {\n  none: 'resize-none',\n  vertical: 'resize-y',\n};\n\n/**\n * The label is rendered as the placeholder and as the accessible name, mirroring\n * ControlledInput: a floating label animates onto the border and relies on pseudo-element\n * border segments to cut a notch, which breaks wherever the border is overridden.\n *\n * Background, border and focus ring come from the form base layer in index.css, so this\n * component names no colour for them.\n */\nconst ControlledTextarea: React.FC<IControlledTextareaProps> = ({\n  label,\n  error = false,\n  errorMessage,\n  resize = 'vertical',\n  className,\n  containerClassName,\n  textareaRef,\n  rows = 4,\n  placeholder,\n  'aria-label': ariaLabel,\n  ...rest\n}) => (\n  <div className={classNames('w-full', containerClassName)}>\n    <textarea\n      ref={textareaRef}\n      rows={rows}\n      placeholder={placeholder ?? label}\n      aria-label={ariaLabel ?? label}\n      aria-invalid={error || undefined}\n      className={mergeClasses(\n        classNames(\n          'w-full rounded-lg border px-3 py-2.5 text-sm text-foreground transition-colors',\n          'placeholder:text-foreground-faint disabled:cursor-not-allowed disabled:bg-muted',\n          RESIZE_CLASS[resize],\n          { 'border-danger focus:border-danger': error },\n        ),\n        className,\n      )}\n      {...rest}\n    />\n\n    {error && errorMessage && <div className=\"mt-1 text-xs text-danger-emphasis\">{errorMessage}</div>}\n  </div>\n);\n\nexport default ControlledTextarea;\n"],"names":[],"mappings":";;;AAqBA,MAAM,eAAgD;AAAA,EACpD,MAAM;AAAA,EACN,UAAU;AACZ;AAUA,MAAM,qBAAyD,CAAC;AAAA,EAC9D;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,2BACG,OAAA,EAAI,WAAW,WAAW,UAAU,kBAAkB,GACrD,UAAA;AAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa,eAAe;AAAA,MAC5B,cAAY,aAAa;AAAA,MACzB,gBAAc,SAAS;AAAA,MACvB,WAAW;AAAA,QACT;AAAA,UACE;AAAA,UACA;AAAA,UACA,aAAa,MAAM;AAAA,UACnB,EAAE,qCAAqC,MAAA;AAAA,QAAM;AAAA,QAE/C;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA,EAGL,SAAS,gBAAgB,oBAAC,OAAA,EAAI,WAAU,qCAAqC,UAAA,aAAA,CAAa;AAAA,EAAA,CAC7F;"}

package/dist/components/Form/ControlledTimeline.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+interface ITimelineSectionProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const ControlledTimelineRoot: React.FC<ITimelineSectionProps>;
+interface IControlledTimelineItemProps extends ITimelineSectionProps {
+    /** Width of the icon column the connector line centres itself in. */
+    railWidth?: string;
+}
+export declare const ControlledTimelineItem: React.FC<IControlledTimelineItemProps>;
+/**
+ * Spans the item and centres itself in the icon column, whose width comes from the item's
+ * `--timeline-rail`. That keeps the line under icons of different sizes without measuring.
+ */
+export declare const ControlledTimelineConnector: React.FC<ITimelineSectionProps>;
+export declare const ControlledTimelineHeader: React.FC<ITimelineSectionProps>;
+export declare const ControlledTimelineIcon: React.FC<ITimelineSectionProps>;
+export declare const ControlledTimelineBody: React.FC<ITimelineSectionProps>;
+interface IControlledTimelineProps {
+    title: string;
+    description: React.ReactNode;
+    iconColor?: string;
+}
+declare const ControlledTimeline: React.FC<IControlledTimelineProps>;
+export default ControlledTimeline;

package/dist/components/Form/ControlledTimeline.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const DEFAULT_RAIL_WIDTH = "1.75rem";
+const ControlledTimelineRoot = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("flex w-full flex-col", className), children });
+const ControlledTimelineItem = ({
+  children,
+  className,
+  railWidth = DEFAULT_RAIL_WIDTH
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: { "--timeline-rail": railWidth },
+    className: mergeClasses("relative flex flex-col gap-2", className),
+    children
+  }
+);
+const ControlledTimelineConnector = ({ children, className }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "aria-hidden": true,
+    className: mergeClasses(
+      "absolute left-0 top-0 flex h-full w-[var(--timeline-rail,1.75rem)] justify-center",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "h-full w-0.5 bg-border" }),
+      children
+    ]
+  }
+);
+const ControlledTimelineHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("relative flex items-center gap-4", className), children });
+const ControlledTimelineIcon = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: mergeClasses(
+      "relative z-[2] flex w-[var(--timeline-rail,1.75rem)] shrink-0 items-center justify-center rounded-full",
+      className
+    ),
+    children
+  }
+);
+const ControlledTimelineBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("flex gap-4 pl-[var(--timeline-rail,1.75rem)]", className), children });
+const ControlledTimeline = ({ title, description, iconColor = "bg-scrim" }) => /* @__PURE__ */ jsx(ControlledTimelineRoot, { children: /* @__PURE__ */ jsxs(ControlledTimelineItem, { railWidth: "0.75rem", children: [
+  /* @__PURE__ */ jsx(ControlledTimelineConnector, {}),
+  /* @__PURE__ */ jsxs(ControlledTimelineHeader, { className: "h-3", children: [
+    /* @__PURE__ */ jsx(ControlledTimelineIcon, { className: mergeClasses("aspect-square", iconColor) }),
+    /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-foreground", children: title })
+  ] }),
+  /* @__PURE__ */ jsx(ControlledTimelineBody, { className: "pb-8", children: description })
+] }) });
+export {
+  ControlledTimelineBody,
+  ControlledTimelineConnector,
+  ControlledTimelineHeader,
+  ControlledTimelineIcon,
+  ControlledTimelineItem,
+  ControlledTimelineRoot,
+  ControlledTimeline as default
+};
+//# sourceMappingURL=ControlledTimeline.js.map

package/dist/components/Form/ControlledTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledTimeline.js","sources":["../../../src/components/Form/ControlledTimeline.tsx"],"sourcesContent":["import React from 'react';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nconst DEFAULT_RAIL_WIDTH = '1.75rem';\n\ninterface ITimelineSectionProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const ControlledTimelineRoot: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n  <div className={mergeClasses('flex w-full flex-col', className)}>{children}</div>\n);\n\ninterface IControlledTimelineItemProps extends ITimelineSectionProps {\n  /** Width of the icon column the connector line centres itself in. */\n  railWidth?: string;\n}\n\nexport const ControlledTimelineItem: React.FC<IControlledTimelineItemProps> = ({\n  children,\n  className,\n  railWidth = DEFAULT_RAIL_WIDTH,\n}) => (\n  <div\n    style={{ '--timeline-rail': railWidth } as React.CSSProperties}\n    className={mergeClasses('relative flex flex-col gap-2', className)}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Spans the item and centres itself in the icon column, whose width comes from the item's\n * `--timeline-rail`. That keeps the line under icons of different sizes without measuring.\n */\nexport const ControlledTimelineConnector: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n  <div\n    aria-hidden\n    className={mergeClasses(\n      'absolute left-0 top-0 flex h-full w-[var(--timeline-rail,1.75rem)] justify-center',\n      className,\n    )}\n  >\n    <span className=\"h-full w-0.5 bg-border\" />\n    {children}\n  </div>\n);\n\nexport const ControlledTimelineHeader: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n  <div className={mergeClasses('relative flex items-center gap-4', className)}>{children}</div>\n);\n\nexport const ControlledTimelineIcon: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n  <div\n    className={mergeClasses(\n      'relative z-[2] flex w-[var(--timeline-rail,1.75rem)] shrink-0 items-center justify-center rounded-full',\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport const ControlledTimelineBody: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n  <div className={mergeClasses('flex gap-4 pl-[var(--timeline-rail,1.75rem)]', className)}>{children}</div>\n);\n\ninterface IControlledTimelineProps {\n  title: string;\n  description: React.ReactNode;\n  iconColor?: string;\n}\n\nconst ControlledTimeline: React.FC<IControlledTimelineProps> = ({ title, description, iconColor = 'bg-scrim' }) => (\n  <ControlledTimelineRoot>\n    <ControlledTimelineItem railWidth=\"0.75rem\">\n      <ControlledTimelineConnector />\n      <ControlledTimelineHeader className=\"h-3\">\n        <ControlledTimelineIcon className={mergeClasses('aspect-square', iconColor)} />\n        <span className=\"text-base font-semibold text-foreground\">{title}</span>\n      </ControlledTimelineHeader>\n      <ControlledTimelineBody className=\"pb-8\">{description}</ControlledTimelineBody>\n    </ControlledTimelineItem>\n  </ControlledTimelineRoot>\n);\n\nexport default ControlledTimeline;\n"],"names":[],"mappings":";;AAIA,MAAM,qBAAqB;AAOpB,MAAM,yBAA0D,CAAC,EAAE,UAAU,UAAA,MAClF,oBAAC,OAAA,EAAI,WAAW,aAAa,wBAAwB,SAAS,GAAI,SAAA,CAAS;AAQtE,MAAM,yBAAiE,CAAC;AAAA,EAC7E;AAAA,EACA;AAAA,EACA,YAAY;AACd,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO,EAAE,mBAAmB,UAAA;AAAA,IAC5B,WAAW,aAAa,gCAAgC,SAAS;AAAA,IAEhE;AAAA,EAAA;AACH;AAOK,MAAM,8BAA+D,CAAC,EAAE,UAAU,gBACvF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAW;AAAA,IACX,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,yBAAA,CAAyB;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AACH;AAGK,MAAM,2BAA4D,CAAC,EAAE,UAAU,UAAA,MACpF,oBAAC,OAAA,EAAI,WAAW,aAAa,oCAAoC,SAAS,GAAI,SAAA,CAAS;AAGlF,MAAM,yBAA0D,CAAC,EAAE,UAAU,gBAClF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGD;AAAA,EAAA;AACH;AAGK,MAAM,yBAA0D,CAAC,EAAE,UAAU,UAAA,MAClF,oBAAC,OAAA,EAAI,WAAW,aAAa,gDAAgD,SAAS,GAAI,SAAA,CAAS;AASrG,MAAM,qBAAyD,CAAC,EAAE,OAAO,aAAa,YAAY,WAAA,MAChG,oBAAC,wBAAA,EACC,UAAA,qBAAC,wBAAA,EAAuB,WAAU,WAChC,UAAA;AAAA,EAAA,oBAAC,6BAAA,EAA4B;AAAA,EAC7B,qBAAC,0BAAA,EAAyB,WAAU,OAClC,UAAA;AAAA,IAAA,oBAAC,wBAAA,EAAuB,WAAW,aAAa,iBAAiB,SAAS,GAAG;AAAA,IAC7E,oBAAC,QAAA,EAAK,WAAU,2CAA2C,UAAA,MAAA,CAAM;AAAA,EAAA,GACnE;AAAA,EACA,oBAAC,wBAAA,EAAuB,WAAU,QAAQ,UAAA,YAAA,CAAY;AAAA,EAAA,CACxD,EAAA,CACF;"}

package/dist/components/Form/ControlledViewToggle.d.ts

@@ -0,0 +1,74 @@
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+export type TControlledViewToggleSize = 'sm' | 'md';
+export interface IControlledViewToggleOption<V extends string = string> {
+    value: V;
+    /** Optional icon; options without one render their label as text instead. */
+    icon?: SymbolCodepoints;
+    /**
+     * Option name. Rendered as visible text when the option has no icon or when
+     * `showLabels` is on; otherwise shown as the option's tooltip.
+     */
+    label: string;
+    /**
+     * Replaces the label in the tooltip when the option needs to explain itself, not just be named.
+     * The label stays the accessible name, so it must remain short.
+     */
+    tooltip?: string;
+    /** Counter badge next to the label, as in ControlledTabs. Hidden when null/undefined. */
+    count?: number | null;
+    /** Replaces the counter badge with a spinner while this option's data loads. */
+    loading?: boolean;
+}
+interface IControlledViewToggleBaseProps<V extends string = string> {
+    options: Array<IControlledViewToggleOption<V>>;
+    /** Renders every option's label as visible text next to its icon. */
+    showLabels?: boolean;
+    /** `md` (default) pairs with page-level controls; `sm` matches compact filter bars. */
+    size?: TControlledViewToggleSize;
+    /** Disables every option, keeping the current selection visible. */
+    disabled?: boolean;
+    /**
+     * Mirrors the selection in the URL, on by default like `ControlledTabs`. Turn it off for toggles
+     * that hold form state (a weekday picker, an AND/OR combinator) or that live inside a drawer,
+     * where the selection is not page state and should not reach the URL.
+     */
+    syncWithUrl?: boolean;
+    /**
+     * Query param used when `syncWithUrl` is on, defaults to `view`. A page holding more than one
+     * synced toggle must give each a unique key: the first one mounted keeps the param and the others
+     * stop writing (with a warning in development) instead of overwriting each other.
+     *
+     * Lifecycle mirrors `ControlledTabs`: on mount an existing valid param wins over `value` and is
+     * pushed to the host through `onChange`; with no param (or an invalid one) the current value is
+     * stamped into the URL right away. From there on the host selection is the authority and every
+     * change rewrites the param, always preserving the other params and replacing the history entry.
+     * In `multiple` mode values are comma separated and an empty selection removes the param.
+     */
+    urlParamKey?: string;
+    className?: string;
+}
+interface IControlledViewToggleSingleProps<V extends string = string> extends IControlledViewToggleBaseProps<V> {
+    multiple?: false;
+    value: V;
+    onChange: (value: V) => void;
+}
+interface IControlledViewToggleMultipleProps<V extends string = string> extends IControlledViewToggleBaseProps<V> {
+    multiple: true;
+    value: Array<V>;
+    /** Receives the whole next selection, which may be empty. */
+    onChange: (values: Array<V>) => void;
+}
+export type TControlledViewToggleProps<V extends string = string> = IControlledViewToggleSingleProps<V> | IControlledViewToggleMultipleProps<V>;
+/**
+ * Segmented toggle for switching between visualization modes (e.g. cards /
+ * list / grouped). Options can be icon-only, text-only or icon + text, and the
+ * component is generic over the option value union so hosts keep their own mode
+ * types. Clicking the already-active option fires `onChange` again, letting
+ * hosts react to re-selection (e.g. reopening a configuration dialog).
+ *
+ * With `multiple`, it becomes a segmented multi-select: `value` is the selected
+ * array, clicking an option adds or removes it, and `onChange` receives the
+ * whole next selection, which may be empty.
+ */
+declare const ControlledViewToggle: <V extends string = string>(props: TControlledViewToggleProps<V>) => import("react").JSX.Element;
+export default ControlledViewToggle;

package/dist/components/Form/ControlledViewToggle.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, Fragment } from "react";
+import classNames from "classnames";
+import ControlledButton from "./ControlledButton.js";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import LoadingSpinner from "../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import { formatNumber } from "../../helpers/formatHelpers.js";
+import { uiLogger } from "../../helpers/uiLogger.js";
+import { TABS_URL_PARAM, claimUrlParam, releaseUrlParam, ownsUrlParam, queueUrlParamUpdate, URL_PARAM_PRIORITY } from "../../helpers/urlParamSync.js";
+const DEFAULT_URL_PARAM_KEY = "view";
+const SIZE_STYLES = {
+  sm: {
+    // Inner radius mirrors the container radius minus its padding, so the active
+    // segment stays concentric with the outer border.
+    container: "h-9 gap-1 rounded-xl",
+    button: "h-7 rounded-lg px-2.5",
+    textClass: "text-xs",
+    // One step darker than md so the segments match the neighbouring controls
+    // in the compact filter bars this size is used by.
+    inactive: "text-foreground-muted hover:bg-muted-hover hover:text-foreground",
+    icon: 16
+  },
+  // leading-[18px] matches the icon height so icon-only, text-only and
+  // icon + text options all keep the same button height.
+  md: {
+    container: "gap-1 rounded-lg shadow-sm",
+    button: "rounded-md px-2.5 py-1.5",
+    textClass: "text-sm leading-[18px]",
+    inactive: "text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted",
+    icon: 18
+  }
+};
+const ControlledViewToggle = (props) => {
+  const {
+    options,
+    showLabels = false,
+    size = "md",
+    disabled = false,
+    syncWithUrl = true,
+    urlParamKey = DEFAULT_URL_PARAM_KEY,
+    className
+  } = props;
+  const styles = SIZE_STYLES[size];
+  const { searchParams, setSearchParams } = useUiNavigation();
+  const safeOptions = useMemo(() => Array.isArray(options) ? options : [], [options]);
+  const selectedValues = props.multiple ? Array.isArray(props.value) ? props.value : [] : [props.value];
+  const serializedValue = selectedValues.join(",");
+  const hasReadUrlSelectionRef = useRef(false);
+  const pendingUrlSelectionRef = useRef(null);
+  const ownerIdRef = useRef({});
+  const isUrlParamReserved = urlParamKey === TABS_URL_PARAM;
+  const isUrlSyncEnabled = syncWithUrl && !isUrlParamReserved;
+  useEffect(() => {
+    if (!syncWithUrl) return;
+    if (isUrlParamReserved) {
+      uiLogger.warn(
+        `[ControlledViewToggle] "${TABS_URL_PARAM}" belongs to ControlledTabs. Give this toggle its own urlParamKey: it will not write to the URL.`
+      );
+      return;
+    }
+    const ownerId = ownerIdRef.current;
+    if (!claimUrlParam(urlParamKey, ownerId, URL_PARAM_PRIORITY.viewToggle)) {
+      uiLogger.warn(
+        `[ControlledViewToggle] More than one control syncs "${urlParamKey}". Give each one a unique urlParamKey: this instance will not write to the URL.`
+      );
+    }
+    return () => releaseUrlParam(urlParamKey, ownerId);
+  }, [syncWithUrl, isUrlParamReserved, urlParamKey]);
+  useEffect(() => {
+    if (!isUrlSyncEnabled || !ownsUrlParam(urlParamKey, ownerIdRef.current)) return;
+    const rawParam = searchParams.get(urlParamKey) ?? "";
+    if (pendingUrlSelectionRef.current !== null) {
+      if (serializedValue === pendingUrlSelectionRef.current) pendingUrlSelectionRef.current = null;
+      return;
+    }
+    if (!hasReadUrlSelectionRef.current) {
+      hasReadUrlSelectionRef.current = true;
+      const optionValues = new Set(safeOptions.map((option) => option.value));
+      const urlValues = rawParam.split(",").map((rawValue) => rawValue.trim()).filter((rawValue) => optionValues.has(rawValue));
+      if (urlValues.length) {
+        const urlSelection = urlValues.join(",");
+        if (urlSelection !== serializedValue) {
+          pendingUrlSelectionRef.current = urlSelection;
+          if (props.multiple) props.onChange(urlValues);
+          else props.onChange(urlValues[0]);
+        }
+        return;
+      }
+    }
+    if (rawParam === serializedValue) return;
+    queueUrlParamUpdate(urlParamKey, serializedValue, setSearchParams);
+  }, [isUrlSyncEnabled, urlParamKey, searchParams, safeOptions, serializedValue, setSearchParams, props]);
+  const handleSelectOption = (optionValue) => {
+    if (!props.multiple) {
+      props.onChange(optionValue);
+      return;
+    }
+    const currentValues = Array.isArray(props.value) ? props.value : [];
+    props.onChange(
+      currentValues.includes(optionValue) ? currentValues.filter((selectedValue) => selectedValue !== optionValue) : [...currentValues, optionValue]
+    );
+  };
+  const renderOptionCounter = (option, isActive) => {
+    if (option.loading) return /* @__PURE__ */ jsx(LoadingSpinner, { size: 3 });
+    if (option.count === void 0 || option.count === null) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: classNames(
+          "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 py-px text-[11px] font-medium leading-none",
+          isActive ? "bg-glass/25 text-white" : "bg-muted-hover text-foreground-subtle"
+        ),
+        children: formatNumber(option.count)
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        "inline-flex shrink-0 items-center border border-border bg-surface p-1",
+        styles.container,
+        className
+      ),
+      children: safeOptions.map((option) => {
+        const isActive = selectedValues.includes(option.value);
+        const showText = showLabels || !option.icon;
+        const button = /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            "aria-pressed": isActive,
+            disabled,
+            onClick: () => handleSelectOption(option.value),
+            className: classNames(
+              "flex items-center justify-center gap-1.5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand-border disabled:cursor-not-allowed",
+              styles.button,
+              isActive ? "bg-brand text-brand-fg shadow-sm" : styles.inactive
+            ),
+            children: [
+              option.icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: option.icon, size: styles.icon }),
+              showText && /* @__PURE__ */ jsx("span", { className: classNames("whitespace-nowrap font-medium", styles.textClass), children: option.label }),
+              renderOptionCounter(option, isActive)
+            ]
+          }
+        );
+        return showText ? /* @__PURE__ */ jsx(Fragment, { children: button }, option.value) : /* @__PURE__ */ jsx(ControlledTooltip, { content: option.tooltip ?? option.label, children: button }, option.value);
+      })
+    }
+  );
+};
+export {
+  ControlledViewToggle as default
+};
+//# sourceMappingURL=ControlledViewToggle.js.map

package/dist/components/Form/ControlledViewToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledViewToggle.js","sources":["../../../src/components/Form/ControlledViewToggle.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { formatNumber } from '@/helpers/formatHelpers';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport {\n  claimUrlParam,\n  ownsUrlParam,\n  queueUrlParamUpdate,\n  releaseUrlParam,\n  TABS_URL_PARAM,\n  URL_PARAM_PRIORITY,\n} from '@/helpers/urlParamSync';\n\nexport type TControlledViewToggleSize = 'sm' | 'md';\n\nexport interface IControlledViewToggleOption<V extends string = string> {\n  value: V;\n  /** Optional icon; options without one render their label as text instead. */\n  icon?: SymbolCodepoints;\n  /**\n   * Option name. Rendered as visible text when the option has no icon or when\n   * `showLabels` is on; otherwise shown as the option's tooltip.\n   */\n  label: string;\n  /**\n   * Replaces the label in the tooltip when the option needs to explain itself, not just be named.\n   * The label stays the accessible name, so it must remain short.\n   */\n  tooltip?: string;\n  /** Counter badge next to the label, as in ControlledTabs. Hidden when null/undefined. */\n  count?: number | null;\n  /** Replaces the counter badge with a spinner while this option's data loads. */\n  loading?: boolean;\n}\n\ninterface IControlledViewToggleBaseProps<V extends string = string> {\n  options: Array<IControlledViewToggleOption<V>>;\n  /** Renders every option's label as visible text next to its icon. */\n  showLabels?: boolean;\n  /** `md` (default) pairs with page-level controls; `sm` matches compact filter bars. */\n  size?: TControlledViewToggleSize;\n  /** Disables every option, keeping the current selection visible. */\n  disabled?: boolean;\n  /**\n   * Mirrors the selection in the URL, on by default like `ControlledTabs`. Turn it off for toggles\n   * that hold form state (a weekday picker, an AND/OR combinator) or that live inside a drawer,\n   * where the selection is not page state and should not reach the URL.\n   */\n  syncWithUrl?: boolean;\n  /**\n   * Query param used when `syncWithUrl` is on, defaults to `view`. A page holding more than one\n   * synced toggle must give each a unique key: the first one mounted keeps the param and the others\n   * stop writing (with a warning in development) instead of overwriting each other.\n   *\n   * Lifecycle mirrors `ControlledTabs`: on mount an existing valid param wins over `value` and is\n   * pushed to the host through `onChange`; with no param (or an invalid one) the current value is\n   * stamped into the URL right away. From there on the host selection is the authority and every\n   * change rewrites the param, always preserving the other params and replacing the history entry.\n   * In `multiple` mode values are comma separated and an empty selection removes the param.\n   */\n  urlParamKey?: string;\n  className?: string;\n}\n\ninterface IControlledViewToggleSingleProps<V extends string = string> extends IControlledViewToggleBaseProps<V> {\n  multiple?: false;\n  value: V;\n  onChange: (value: V) => void;\n}\n\ninterface IControlledViewToggleMultipleProps<V extends string = string> extends IControlledViewToggleBaseProps<V> {\n  multiple: true;\n  value: Array<V>;\n  /** Receives the whole next selection, which may be empty. */\n  onChange: (values: Array<V>) => void;\n}\n\nexport type TControlledViewToggleProps<V extends string = string> =\n  IControlledViewToggleSingleProps<V> | IControlledViewToggleMultipleProps<V>;\n\nconst DEFAULT_URL_PARAM_KEY = 'view';\n\nconst SIZE_STYLES: Record<\n  TControlledViewToggleSize,\n  { container: string; button: string; textClass: string; inactive: string; icon: number }\n> = {\n  sm: {\n    // Inner radius mirrors the container radius minus its padding, so the active\n    // segment stays concentric with the outer border.\n    container: 'h-9 gap-1 rounded-xl',\n    button: 'h-7 rounded-lg px-2.5',\n    textClass: 'text-xs',\n    // One step darker than md so the segments match the neighbouring controls\n    // in the compact filter bars this size is used by.\n    inactive: 'text-foreground-muted hover:bg-muted-hover hover:text-foreground',\n    icon: 16,\n  },\n  // leading-[18px] matches the icon height so icon-only, text-only and\n  // icon + text options all keep the same button height.\n  md: {\n    container: 'gap-1 rounded-lg shadow-sm',\n    button: 'rounded-md px-2.5 py-1.5',\n    textClass: 'text-sm leading-[18px]',\n    inactive: 'text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted',\n    icon: 18,\n  },\n};\n\n/**\n * Segmented toggle for switching between visualization modes (e.g. cards /\n * list / grouped). Options can be icon-only, text-only or icon + text, and the\n * component is generic over the option value union so hosts keep their own mode\n * types. Clicking the already-active option fires `onChange` again, letting\n * hosts react to re-selection (e.g. reopening a configuration dialog).\n *\n * With `multiple`, it becomes a segmented multi-select: `value` is the selected\n * array, clicking an option adds or removes it, and `onChange` receives the\n * whole next selection, which may be empty.\n */\nconst ControlledViewToggle = <V extends string = string>(props: TControlledViewToggleProps<V>) => {\n  const {\n    options,\n    showLabels = false,\n    size = 'md',\n    disabled = false,\n    syncWithUrl = true,\n    urlParamKey = DEFAULT_URL_PARAM_KEY,\n    className,\n  } = props;\n  const styles = SIZE_STYLES[size];\n  const { searchParams, setSearchParams } = useUiNavigation();\n\n  const safeOptions = useMemo(() => (Array.isArray(options) ? options : []), [options]);\n  const selectedValues = props.multiple ? (Array.isArray(props.value) ? props.value : []) : [props.value];\n  const serializedValue = selectedValues.join(',');\n\n  const hasReadUrlSelectionRef = useRef(false);\n  const pendingUrlSelectionRef = useRef<string | null>(null);\n  const ownerIdRef = useRef<object>({});\n\n  const isUrlParamReserved = urlParamKey === TABS_URL_PARAM;\n  const isUrlSyncEnabled = syncWithUrl && !isUrlParamReserved;\n\n  useEffect(() => {\n    if (!syncWithUrl) return;\n\n    if (isUrlParamReserved) {\n      uiLogger.warn(\n        `[ControlledViewToggle] \"${TABS_URL_PARAM}\" belongs to ControlledTabs. ` +\n          'Give this toggle its own urlParamKey: it will not write to the URL.',\n      );\n      return;\n    }\n\n    const ownerId = ownerIdRef.current;\n\n    if (!claimUrlParam(urlParamKey, ownerId, URL_PARAM_PRIORITY.viewToggle)) {\n      uiLogger.warn(\n        `[ControlledViewToggle] More than one control syncs \"${urlParamKey}\". ` +\n          'Give each one a unique urlParamKey: this instance will not write to the URL.',\n      );\n    }\n\n    return () => releaseUrlParam(urlParamKey, ownerId);\n  }, [syncWithUrl, isUrlParamReserved, urlParamKey]);\n\n  // Um efeito só, em duas fases. Na montagem o parâmetro manda: existindo um valor válido ele é\n  // aplicado no host, e a escrita fica suspensa até o host adotá-lo (senão o valor padrão seria\n  // gravado por cima do que veio na URL). Não existindo, o valor atual é carimbado na hora. Depois\n  // disso a seleção do host é a autoridade e a URL apenas a reflete.\n  useEffect(() => {\n    if (!isUrlSyncEnabled || !ownsUrlParam(urlParamKey, ownerIdRef.current)) return;\n\n    const rawParam = searchParams.get(urlParamKey) ?? '';\n\n    if (pendingUrlSelectionRef.current !== null) {\n      if (serializedValue === pendingUrlSelectionRef.current) pendingUrlSelectionRef.current = null;\n      return;\n    }\n\n    if (!hasReadUrlSelectionRef.current) {\n      hasReadUrlSelectionRef.current = true;\n\n      const optionValues = new Set(safeOptions.map((option) => option.value));\n      const urlValues = rawParam\n        .split(',')\n        .map((rawValue) => rawValue.trim())\n        .filter((rawValue): rawValue is V => optionValues.has(rawValue as V));\n\n      if (urlValues.length) {\n        const urlSelection = urlValues.join(',');\n        if (urlSelection !== serializedValue) {\n          pendingUrlSelectionRef.current = urlSelection;\n          if (props.multiple) props.onChange(urlValues);\n          else props.onChange(urlValues[0]);\n        }\n        return;\n      }\n    }\n\n    if (rawParam === serializedValue) return;\n\n    queueUrlParamUpdate(urlParamKey, serializedValue, setSearchParams);\n  }, [isUrlSyncEnabled, urlParamKey, searchParams, safeOptions, serializedValue, setSearchParams, props]);\n\n  const handleSelectOption = (optionValue: V) => {\n    if (!props.multiple) {\n      props.onChange(optionValue);\n      return;\n    }\n\n    const currentValues = Array.isArray(props.value) ? props.value : [];\n    props.onChange(\n      currentValues.includes(optionValue)\n        ? currentValues.filter((selectedValue) => selectedValue !== optionValue)\n        : [...currentValues, optionValue],\n    );\n  };\n\n  const renderOptionCounter = (option: IControlledViewToggleOption<V>, isActive: boolean) => {\n    if (option.loading) return <LoadingSpinner size={3} />;\n    if (option.count === undefined || option.count === null) return null;\n\n    return (\n      <span\n        className={classNames(\n          'inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 py-px text-[11px] font-medium leading-none',\n          isActive ? 'bg-glass/25 text-white' : 'bg-muted-hover text-foreground-subtle',\n        )}\n      >\n        {formatNumber(option.count)}\n      </span>\n    );\n  };\n\n  return (\n    <div\n      className={classNames(\n        'inline-flex shrink-0 items-center border border-border bg-surface p-1',\n        styles.container,\n        className,\n      )}\n    >\n      {safeOptions.map((option) => {\n        const isActive = selectedValues.includes(option.value);\n        const showText = showLabels || !option.icon;\n\n        const button = (\n          <ControlledButton\n            defaultHtmlButton\n            aria-pressed={isActive}\n            disabled={disabled}\n            onClick={() => handleSelectOption(option.value)}\n            className={classNames(\n              'flex items-center justify-center gap-1.5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand-border disabled:cursor-not-allowed',\n              styles.button,\n              isActive ? 'bg-brand text-brand-fg shadow-sm' : styles.inactive,\n            )}\n          >\n            {option.icon && <MaterialSymbol icon={option.icon} size={styles.icon} />}\n            {showText && (\n              <span className={classNames('whitespace-nowrap font-medium', styles.textClass)}>{option.label}</span>\n            )}\n            {renderOptionCounter(option, isActive)}\n          </ControlledButton>\n        );\n\n        // The tooltip only adds value when the label is not already visible.\n        return showText ? (\n          <Fragment key={option.value}>{button}</Fragment>\n        ) : (\n          <ControlledTooltip key={option.value} content={option.tooltip ?? option.label}>\n            {button}\n          </ControlledTooltip>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ControlledViewToggle;\n"],"names":[],"mappings":"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"}

package/dist/components/Form/ControlledVoiceTextarea.d.ts

@@ -0,0 +1,13 @@
+interface IControlledVoiceTextareaProps {
+    /** Reaches the field itself, so a `FieldLabel` can point at it. */
+    id?: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    rows?: number;
+    lang?: string;
+    className?: string;
+    disabled?: boolean;
+}
+declare const ControlledVoiceTextarea: React.FC<IControlledVoiceTextareaProps>;
+export default ControlledVoiceTextarea;

package/dist/components/Form/ControlledVoiceTextarea.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { useVoiceTranscription, VOICE_COMMANDS, applyVoiceUpdate, appendInterimTranscript } from "../../hooks/useVoiceTranscription.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import ControlledButton from "./ControlledButton.js";
+import ControlledTextarea from "./ControlledTextarea.js";
+const ControlledVoiceTextarea = ({
+  id,
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  lang = "pt-BR",
+  className,
+  disabled
+}) => {
+  const { t } = useTranslation("ui");
+  const committedRef = useRef(value);
+  const lastEmittedValueRef = useRef(value);
+  useEffect(() => {
+    if (value === lastEmittedValueRef.current) return;
+    committedRef.current = value;
+    lastEmittedValueRef.current = value;
+  }, [value]);
+  const emitValue = (next) => {
+    lastEmittedValueRef.current = next;
+    onChange(next);
+  };
+  const { isSupported, isListening, error, toggle } = useVoiceTranscription({
+    lang,
+    onCommit: (update) => {
+      const next = applyVoiceUpdate(committedRef.current, update);
+      committedRef.current = next;
+      emitValue(next);
+    },
+    onInterim: (text) => emitValue(appendInterimTranscript(committedRef.current, text))
+  });
+  const handleManualChange = (next) => {
+    committedRef.current = next;
+    emitValue(next);
+  };
+  const errorMessageByCode = {
+    permission: t("voiceInput.errors.permission"),
+    microphone: t("voiceInput.errors.microphone"),
+    network: t("voiceInput.errors.network"),
+    unavailable: t("voiceInput.errors.unavailable")
+  };
+  const commandHint = VOICE_COMMANDS.map((command) => command.phrases[0]).join(", ");
+  return /* @__PURE__ */ jsxs("div", { className: classNames("relative w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      ControlledTextarea,
+      {
+        id,
+        value,
+        rows,
+        resize: "none",
+        disabled,
+        placeholder,
+        onChange: (e) => handleManualChange(e.target.value),
+        className: "pr-12"
+      }
+    ),
+    isSupported && /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("voiceInput.commandsHint", { commands: commandHint }), className: "w-56", children: /* @__PURE__ */ jsx("span", { className: "flex size-7 items-center justify-center rounded-full text-foreground-faint", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "help", size: 16 }) }) }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: isListening ? t("voiceInput.stop") : t("voiceInput.start"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": isListening ? t("voiceInput.stop") : t("voiceInput.start"),
+          defaultHtmlButton: true,
+          disabled,
+          onClick: toggle,
+          className: classNames(
+            "flex size-8 items-center justify-center rounded-full transition-colors",
+            isListening ? "bg-danger-soft text-danger-emphasis hover:bg-danger-soft" : "text-foreground-faint hover:bg-muted-hover hover:text-brand-emphasis"
+          ),
+          children: /* @__PURE__ */ jsx(
+            MaterialSymbol,
+            {
+              icon: isListening ? "stop" : "mic",
+              size: 18,
+              className: isListening ? "animate-pulse" : ""
+            }
+          )
+        }
+      ) })
+    ] }),
+    isSupported && error && /* @__PURE__ */ jsxs("span", { role: "alert", className: "mt-1 flex items-center gap-1 text-xs text-danger-emphasis", children: [
+      /* @__PURE__ */ jsx(MaterialSymbol, { icon: "mic_off", size: 14 }),
+      errorMessageByCode[error]
+    ] })
+  ] });
+};
+export {
+  ControlledVoiceTextarea as default
+};
+//# sourceMappingURL=ControlledVoiceTextarea.js.map

package/dist/components/Form/ControlledVoiceTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledVoiceTextarea.js","sources":["../../../src/components/Form/ControlledVoiceTextarea.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport {\n  appendInterimTranscript,\n  applyVoiceUpdate,\n  TVoiceTranscriptionError,\n  useVoiceTranscription,\n  VOICE_COMMANDS,\n} from '@/hooks/useVoiceTranscription';\n\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport ControlledTextarea from './ControlledTextarea';\n\ninterface IControlledVoiceTextareaProps {\n  /** Reaches the field itself, so a `FieldLabel` can point at it. */\n  id?: string;\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  rows?: number;\n  lang?: string;\n  className?: string;\n  disabled?: boolean;\n}\n\nconst ControlledVoiceTextarea: React.FC<IControlledVoiceTextareaProps> = ({\n  id,\n  value,\n  onChange,\n  placeholder,\n  rows = 4,\n  lang = 'pt-BR',\n  className,\n  disabled,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const committedRef = useRef(value);\n  const lastEmittedValueRef = useRef(value);\n\n  useEffect(() => {\n    if (value === lastEmittedValueRef.current) return;\n    committedRef.current = value;\n    lastEmittedValueRef.current = value;\n  }, [value]);\n\n  const emitValue = (next: string) => {\n    lastEmittedValueRef.current = next;\n    onChange(next);\n  };\n\n  const { isSupported, isListening, error, toggle } = useVoiceTranscription({\n    lang,\n    onCommit: (update) => {\n      const next = applyVoiceUpdate(committedRef.current, update);\n      committedRef.current = next;\n      emitValue(next);\n    },\n    onInterim: (text) => emitValue(appendInterimTranscript(committedRef.current, text)),\n  });\n\n  const handleManualChange = (next: string) => {\n    committedRef.current = next;\n    emitValue(next);\n  };\n\n  const errorMessageByCode: Record<TVoiceTranscriptionError, string> = {\n    permission: t('voiceInput.errors.permission'),\n    microphone: t('voiceInput.errors.microphone'),\n    network: t('voiceInput.errors.network'),\n    unavailable: t('voiceInput.errors.unavailable'),\n  };\n\n  const commandHint = VOICE_COMMANDS.map((command) => command.phrases[0]).join(', ');\n\n  return (\n    <div className={classNames('relative w-full', className)}>\n      <ControlledTextarea\n        id={id}\n        value={value}\n        rows={rows}\n        resize=\"none\"\n        disabled={disabled}\n        placeholder={placeholder}\n        onChange={(e) => handleManualChange(e.target.value)}\n        className=\"pr-12\"\n      />\n\n      {isSupported && (\n        <div className=\"absolute right-2 top-2 flex items-center gap-1\">\n          <ControlledTooltip content={t('voiceInput.commandsHint', { commands: commandHint })} className=\"w-56\">\n            <span className=\"flex size-7 items-center justify-center rounded-full text-foreground-faint\">\n              <MaterialSymbol icon=\"help\" size={16} />\n            </span>\n          </ControlledTooltip>\n          <ControlledTooltip content={isListening ? t('voiceInput.stop') : t('voiceInput.start')}>\n            <ControlledButton\n              aria-label={isListening ? t('voiceInput.stop') : t('voiceInput.start')}\n              defaultHtmlButton\n              disabled={disabled}\n              onClick={toggle}\n              className={classNames(\n                'flex size-8 items-center justify-center rounded-full transition-colors',\n                isListening\n                  ? 'bg-danger-soft text-danger-emphasis hover:bg-danger-soft'\n                  : 'text-foreground-faint hover:bg-muted-hover hover:text-brand-emphasis',\n              )}\n            >\n              <MaterialSymbol\n                icon={isListening ? 'stop' : 'mic'}\n                size={18}\n                className={isListening ? 'animate-pulse' : ''}\n              />\n            </ControlledButton>\n          </ControlledTooltip>\n        </div>\n      )}\n\n      {isSupported && error && (\n        <span role=\"alert\" className=\"mt-1 flex items-center gap-1 text-xs text-danger-emphasis\">\n          <MaterialSymbol icon=\"mic_off\" size={14} />\n          {errorMessageByCode[error]}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default ControlledVoiceTextarea;\n"],"names":[],"mappings":";;;;;;;;;AA8BA,MAAM,0BAAmE,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,sBAAsB,OAAO,KAAK;AAExC,YAAU,MAAM;AACd,QAAI,UAAU,oBAAoB,QAAS;AAC3C,iBAAa,UAAU;AACvB,wBAAoB,UAAU;AAAA,EAChC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,YAAY,CAAC,SAAiB;AAClC,wBAAoB,UAAU;AAC9B,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,EAAE,aAAa,aAAa,OAAO,OAAA,IAAW,sBAAsB;AAAA,IACxE;AAAA,IACA,UAAU,CAAC,WAAW;AACpB,YAAM,OAAO,iBAAiB,aAAa,SAAS,MAAM;AAC1D,mBAAa,UAAU;AACvB,gBAAU,IAAI;AAAA,IAChB;AAAA,IACA,WAAW,CAAC,SAAS,UAAU,wBAAwB,aAAa,SAAS,IAAI,CAAC;AAAA,EAAA,CACnF;AAED,QAAM,qBAAqB,CAAC,SAAiB;AAC3C,iBAAa,UAAU;AACvB,cAAU,IAAI;AAAA,EAChB;AAEA,QAAM,qBAA+D;AAAA,IACnE,YAAY,EAAE,8BAA8B;AAAA,IAC5C,YAAY,EAAE,8BAA8B;AAAA,IAC5C,SAAS,EAAE,2BAA2B;AAAA,IACtC,aAAa,EAAE,+BAA+B;AAAA,EAAA;AAGhD,QAAM,cAAc,eAAe,IAAI,CAAC,YAAY,QAAQ,QAAQ,CAAC,CAAC,EAAE,KAAK,IAAI;AAEjF,8BACG,OAAA,EAAI,WAAW,WAAW,mBAAmB,SAAS,GACrD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,UAAU,CAAC,MAAM,mBAAmB,EAAE,OAAO,KAAK;AAAA,QAClD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGX,eACC,qBAAC,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,MAAA,oBAAC,mBAAA,EAAkB,SAAS,EAAE,2BAA2B,EAAE,UAAU,YAAA,CAAa,GAAG,WAAU,QAC7F,8BAAC,QAAA,EAAK,WAAU,8EACd,UAAA,oBAAC,gBAAA,EAAe,MAAK,QAAO,MAAM,IAAI,EAAA,CACxC,EAAA,CACF;AAAA,MACA,oBAAC,qBAAkB,SAAS,cAAc,EAAE,iBAAiB,IAAI,EAAE,kBAAkB,GACnF,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAY,cAAc,EAAE,iBAAiB,IAAI,EAAE,kBAAkB;AAAA,UACrE,mBAAiB;AAAA,UACjB;AAAA,UACA,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,cACI,6DACA;AAAA,UAAA;AAAA,UAGN,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,cAAc,SAAS;AAAA,cAC7B,MAAM;AAAA,cACN,WAAW,cAAc,kBAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA,EACF,CACF;AAAA,IAAA,GACF;AAAA,IAGD,eAAe,SACd,qBAAC,UAAK,MAAK,SAAQ,WAAU,6DAC3B,UAAA;AAAA,MAAA,oBAAC,gBAAA,EAAe,MAAK,WAAU,MAAM,IAAI;AAAA,MACxC,mBAAmB,KAAK;AAAA,IAAA,EAAA,CAC3B;AAAA,EAAA,GAEJ;AAEJ;"}