@umodeapporg/ui 0.1.0

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';\nimport { useSearchParams } from 'react-router-dom';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\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] = useSearchParams();\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,11 @@
+interface IControlledVoiceTextareaProps {
+    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,88 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { useVoiceTranscription, VOICE_COMMANDS } from "../../hooks/useVoiceTranscription.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import ControlledButton from "./ControlledButton.js";
+import ControlledTextarea from "./ControlledTextarea.js";
+const appendText = (current, addition) => {
+  if (!addition) return current;
+  const needsSpace = current.length > 0 && !/\s$/.test(current) && !/^[\s.,!?]/.test(addition);
+  return current + (needsSpace ? " " : "") + addition;
+};
+const applyVoiceUpdate = (current, update) => {
+  let next = current;
+  for (let i = 0; i < update.deleteWords; i += 1) {
+    next = next.replace(/\s*\S+\s*$/, "");
+  }
+  return appendText(next, update.insert);
+};
+const ControlledVoiceTextarea = ({
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  lang = "pt-BR",
+  className,
+  disabled
+}) => {
+  const { t } = useTranslation("ui");
+  const committedRef = useRef(value);
+  const { isSupported, isListening, toggle } = useVoiceTranscription({
+    lang,
+    onCommit: (update) => {
+      const next = applyVoiceUpdate(committedRef.current, update);
+      committedRef.current = next;
+      onChange(next);
+    },
+    onInterim: (text) => onChange(appendText(committedRef.current, text))
+  });
+  const handleManualChange = (next) => {
+    committedRef.current = next;
+    onChange(next);
+  };
+  const commandHint = VOICE_COMMANDS.map((command) => command.phrases[0]).join(", ");
+  return /* @__PURE__ */ jsxs("div", { className: classNames("relative w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      ControlledTextarea,
+      {
+        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,
+        {
+          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" : ""
+            }
+          )
+        }
+      ) })
+    ] })
+  ] });
+};
+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 { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { IVoiceTranscriptionUpdate, useVoiceTranscription, VOICE_COMMANDS } from '@/hooks/useVoiceTranscription';\n\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport ControlledTextarea from './ControlledTextarea';\n\ninterface IControlledVoiceTextareaProps {\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 appendText = (current: string, addition: string): string => {\n  if (!addition) return current;\n  const needsSpace = current.length > 0 && !/\\s$/.test(current) && !/^[\\s.,!?]/.test(addition);\n  return current + (needsSpace ? ' ' : '') + addition;\n};\n\nconst applyVoiceUpdate = (current: string, update: IVoiceTranscriptionUpdate): string => {\n  let next = current;\n  for (let i = 0; i < update.deleteWords; i += 1) {\n    next = next.replace(/\\s*\\S+\\s*$/, '');\n  }\n  return appendText(next, update.insert);\n};\n\nconst ControlledVoiceTextarea: React.FC<IControlledVoiceTextareaProps> = ({\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\n  const { isSupported, isListening, toggle } = useVoiceTranscription({\n    lang,\n    onCommit: (update) => {\n      const next = applyVoiceUpdate(committedRef.current, update);\n      committedRef.current = next;\n      onChange(next);\n    },\n    onInterim: (text) => onChange(appendText(committedRef.current, text)),\n  });\n\n  const handleManualChange = (next: string) => {\n    committedRef.current = next;\n    onChange(next);\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        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              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    </div>\n  );\n};\n\nexport default ControlledVoiceTextarea;\n"],"names":[],"mappings":";;;;;;;;;AAsBA,MAAM,aAAa,CAAC,SAAiB,aAA6B;AAChE,MAAI,CAAC,SAAU,QAAO;AACtB,QAAM,aAAa,QAAQ,SAAS,KAAK,CAAC,MAAM,KAAK,OAAO,KAAK,CAAC,YAAY,KAAK,QAAQ;AAC3F,SAAO,WAAW,aAAa,MAAM,MAAM;AAC7C;AAEA,MAAM,mBAAmB,CAAC,SAAiB,WAA8C;AACvF,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,OAAO,aAAa,KAAK,GAAG;AAC9C,WAAO,KAAK,QAAQ,cAAc,EAAE;AAAA,EACtC;AACA,SAAO,WAAW,MAAM,OAAO,MAAM;AACvC;AAEA,MAAM,0BAAmE,CAAC;AAAA,EACxE;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;AAEjC,QAAM,EAAE,aAAa,aAAa,OAAA,IAAW,sBAAsB;AAAA,IACjE;AAAA,IACA,UAAU,CAAC,WAAW;AACpB,YAAM,OAAO,iBAAiB,aAAa,SAAS,MAAM;AAC1D,mBAAa,UAAU;AACvB,eAAS,IAAI;AAAA,IACf;AAAA,IACA,WAAW,CAAC,SAAS,SAAS,WAAW,aAAa,SAAS,IAAI,CAAC;AAAA,EAAA,CACrE;AAED,QAAM,qBAAqB,CAAC,SAAiB;AAC3C,iBAAa,UAAU;AACvB,aAAS,IAAI;AAAA,EACf;AAEA,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,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,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,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -0,0 +1,8 @@
+import { default as ControlledInput } from './ControlledInput';
+type TControlledInputComponentProps = React.ComponentProps<typeof ControlledInput>;
+interface ICurrencyInputProps extends Omit<TControlledInputComponentProps, 'value' | 'onChange' | 'type'> {
+    value: string;
+    onChange: (value: string) => void;
+}
+declare const CurrencyInput: React.FC<ICurrencyInputProps>;
+export default CurrencyInput;

package/dist/components/Form/CurrencyInput.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { formatCurrency } from "../../helpers/formatHelpers.js";
+import ControlledInput from "./ControlledInput.js";
+const NUMERIC_INPUT_MODE = "numeric";
+const CurrencyInput = ({ value, onChange, ...rest }) => {
+  const parsed = value ? parseFloat(value) : NaN;
+  const display = Number.isNaN(parsed) ? "" : formatCurrency(Math.round(parsed * 100));
+  const handleChange = (event) => {
+    const digits = event.target.value.replace(/\D/g, "");
+    onChange(digits ? (Number(digits) / 100).toString() : "");
+  };
+  return /* @__PURE__ */ jsx(ControlledInput, { ...rest, inputMode: NUMERIC_INPUT_MODE, value: display, onChange: handleChange });
+};
+export {
+  CurrencyInput as default
+};
+//# sourceMappingURL=CurrencyInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyInput.js","sources":["../../../src/components/Form/CurrencyInput.tsx"],"sourcesContent":["import { formatCurrency } from '@/helpers/formatHelpers';\n\nimport ControlledInput from './ControlledInput';\n\nconst NUMERIC_INPUT_MODE = 'numeric' as const;\n\ntype TControlledInputComponentProps = React.ComponentProps<typeof ControlledInput>;\n\ninterface ICurrencyInputProps extends Omit<TControlledInputComponentProps, 'value' | 'onChange' | 'type'> {\n  value: string;\n  onChange: (value: string) => void;\n}\n\nconst CurrencyInput: React.FC<ICurrencyInputProps> = ({ value, onChange, ...rest }) => {\n  const parsed = value ? parseFloat(value) : NaN;\n  const display = Number.isNaN(parsed) ? '' : formatCurrency(Math.round(parsed * 100));\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const digits = event.target.value.replace(/\\D/g, '');\n    onChange(digits ? (Number(digits) / 100).toString() : '');\n  };\n\n  return <ControlledInput {...rest} inputMode={NUMERIC_INPUT_MODE} value={display} onChange={handleChange} />;\n};\n\nexport default CurrencyInput;\n"],"names":[],"mappings":";;;AAIA,MAAM,qBAAqB;AAS3B,MAAM,gBAA+C,CAAC,EAAE,OAAO,UAAU,GAAG,WAAW;AACrF,QAAM,SAAS,QAAQ,WAAW,KAAK,IAAI;AAC3C,QAAM,UAAU,OAAO,MAAM,MAAM,IAAI,KAAK,eAAe,KAAK,MAAM,SAAS,GAAG,CAAC;AAEnF,QAAM,eAAe,CAAC,UAA+C;AACnE,UAAM,SAAS,MAAM,OAAO,MAAM,QAAQ,OAAO,EAAE;AACnD,aAAS,UAAU,OAAO,MAAM,IAAI,KAAK,SAAA,IAAa,EAAE;AAAA,EAC1D;AAEA,SAAO,oBAAC,mBAAiB,GAAG,MAAM,WAAW,oBAAoB,OAAO,SAAS,UAAU,aAAA,CAAc;AAC3G;"}

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

@@ -0,0 +1,80 @@
+import { IUseFileAttachmentsResult, TFileUploader } from '../../hooks/useFileAttachments';
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+/** An extra entry in the attach menu, for a source only the host knows about (a camera dialog). */
+export interface IRichTextAttachAction {
+    key: string;
+    icon: SymbolCodepoints;
+    label: string;
+    onClick: () => void;
+}
+/**
+ * Files travel BESIDE the text: the host owns a list of attachments of its own (a chat message
+ * has one) and reads `controller.readyAttachments` when it saves.
+ */
+export interface IRichTextAttachmentsConfig {
+    controller: IUseFileAttachmentsResult;
+    extraActions?: Array<IRichTextAttachAction>;
+    /** The host already renders the staged previews somewhere else. */
+    hidePreviews?: boolean;
+    /** The host already wraps a wider drop target around this editor. */
+    hideDropzone?: boolean;
+}
+/**
+ * Files travel INSIDE the text: the upload result is written into the body as a chip, so the
+ * reference persists anywhere the HTML itself is stored and no host needs a new field.
+ */
+export interface IRichTextInlineUploadConfig {
+    uploadFile?: TFileUploader;
+    maxFiles?: number;
+    maxFileSizeBytes?: number;
+}
+interface IRichTextEditorProps {
+    value?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    minHeight?: number;
+    /** Rendered inside the toolbar row, right-aligned: host actions that belong to the field. */
+    toolbarSlot?: React.ReactNode;
+    /** Rendered in the editor's own bottom bar, after the controls the editor owns. */
+    actionsSlot?: React.ReactNode;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /** Fires when the editable area loses focus, for hosts that persist on blur. */
+    onBlur?: () => void;
+    /**
+     * Fires with the full HTML when the editor changes the content on its own, which today means
+     * an inline upload landing after the field already lost focus. A host that persists on blur
+     * would otherwise never hear about the file it just attached.
+     */
+    onCommit?: (html: string) => void;
+    /** 'bare' drops the border and focus ring: the host owns the chrome around the field. */
+    variant?: 'default' | 'bare';
+    /** Hosts with their own action bar (the chat composer) toggle the formatting row on demand. */
+    showToolbar?: boolean;
+    /** Renders the formatting toggle in the bottom bar and lets the editor own the row's state. */
+    formattingToggle?: boolean;
+    attachments?: IRichTextAttachmentsConfig;
+    inlineUpload?: IRichTextInlineUploadConfig;
+}
+export interface IRichTextEditorHandle {
+    focus: () => void;
+    /** Viewport rect of the caret, for anchoring a popover to what is being typed. */
+    getCaretRect: () => DOMRect | null;
+    /**
+     * Text typed after the trigger and before the caret, or null when the caret is not inside a
+     * trigger word. Drives both "is the mention menu relevant" and "what is being searched".
+     * Spaces are allowed inside the query (people have compound names); the host decides when a
+     * spaced query stopped matching anyone and closes the menu.
+     */
+    getMentionQuery: (trigger: string) => string | null;
+    /**
+     * Deletes the trigger AND the query the user typed after it, then writes the markup in their
+     * place, so picking someone from a mention menu replaces everything typed since the `@`
+     * instead of stacking the mention after it.
+     */
+    replaceTriggerWith: (trigger: string, query: string, html: string) => void;
+}
+declare const RichTextEditor: import('react').ForwardRefExoticComponent<IRichTextEditorProps & import('react').RefAttributes<IRichTextEditorHandle>>;
+export default RichTextEditor;