@grazziotin/react-components-next 2.0.0 → 2.2.0

package/dist/accessibility/index.mjs

@@ -1,9 +1,15 @@
 import { nvl } from '../chunk-BWW3F4R4.mjs';
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from 'react-toastify';
 import SayEngine from 'react-say';
-import { useState, useCallback, useMemo, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { useCallback, useState, useMemo, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-// src/components/accessibility/say/utils/constants.ts
+var DEFAULT_SAY_RATE = 1.4;
+var DEFAULT_SAY_VOLUME = 1;
+var DEFAULT_SAY_PITCH = 0.8;
+var DEFAULT_SAY_VIBRATE_DURATION = 500;
+var DEFAULT_SAY_VOICE = "Google portugu\xEAs do Brasil";
 var SPEECH_APIS = ["speechSynthesis", "SpeechSynthesisUtterance"];
 function hasSpeechSupport() {
   return SPEECH_APIS.every((api) => api in globalThis);
@@ -24,50 +30,11 @@ function getSpeechSupport() {
     SpeechSynthesisUtterance: globalThis.SpeechSynthesisUtterance
   };
 }
-var DEFAULT_SAY_VOICE = "Google portugu\xEAs do Brasil";
-var DEFAULT_SAY_RATE = 1.4;
-var DEFAULT_SAY_PITCH = 0.8;
-var DEFAULT_SAY_VOLUME = 1;
-var DEFAULT_SAY_NOTIFY_AUTO_CLOSE = 1500;
-var DEFAULT_SAY_VIBRATE_DURATION = 500;
 function defaultShouldVibrate(type) {
-  return !type || type === "warning";
+  return type === "warning";
 }
-function useSay({
-  onNotify,
-  defaultNotifyType = "success",
-  vibrateDuration = DEFAULT_SAY_VIBRATE_DURATION,
-  defaultNotifyAutoClose = DEFAULT_SAY_NOTIFY_AUTO_CLOSE,
-  shouldVibrate = defaultShouldVibrate
-} = {}) {
-  const [isSpeaking, setIsSpeaking] = useState(false);
-  const [textSpeaking, setTextSpeaking] = useState("");
-  const say = useCallback(
-    (text, options) => {
-      const type = options == null ? void 0 : options.type;
-      const notify = nvl(options == null ? void 0 : options.notify, true);
-      const vibrate = nvl(options == null ? void 0 : options.vibrate, true);
-      setIsSpeaking(true);
-      setTextSpeaking(text);
-      if (notify && type !== false && onNotify) {
-        onNotify(text, {
-          type: nvl(type, defaultNotifyType),
-          autoClose: nvl(options == null ? void 0 : options.autoClose, defaultNotifyAutoClose)
-        });
-      }
-      if (vibrate && shouldVibrate(type) && navigator.vibrate) {
-        navigator.vibrate(vibrateDuration);
-      }
-    },
-    [
-      onNotify,
-      shouldVibrate,
-      vibrateDuration,
-      defaultNotifyType,
-      defaultNotifyAutoClose
-    ]
-  );
-  return { say, isSpeaking, textSpeaking, setIsSpeaking };
+function showSayNotify(text, { type = "success", autoClose = 4500 }) {
+  toast(text, { type, autoClose });
 }
 function useSpeechPonyfill() {
   const ponyfill = useMemo(() => getSpeechSupport(), []);
@@ -101,26 +68,71 @@ function Say({
   volume = DEFAULT_SAY_VOLUME
 }) {
   const { voices, ponyfill } = useSpeechPonyfill();
+  const canSpeak = isSpeaking && voices.length > 0 && ponyfill;
   const handleEnd = useCallback(() => {
     setIsSpeaking(false);
     onEnd == null ? void 0 : onEnd();
   }, [setIsSpeaking, onEnd]);
-  if (!isSpeaking || voices.length === 0 || !ponyfill) return null;
-  return /* @__PURE__ */ jsx(
-    SayEngine,
-    {
-      text,
-      rate,
-      pitch,
-      volume,
-      onEnd: handleEnd,
-      onStart,
-      ponyfill,
-      voice: voices.find((v) => v.name === voice)
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToastContainer,
+      {
+        limit: 3,
+        draggable: true,
+        newestOnTop: true,
+        pauseOnHover: true,
+        closeOnClick: true,
+        autoClose: 4500,
+        pauseOnFocusLoss: true,
+        closeButton: false,
+        position: "top-right",
+        style: { fontSize: "14px" }
+      }
+    ),
+    canSpeak && /* @__PURE__ */ jsx(
+      SayEngine,
+      {
+        text,
+        rate,
+        pitch,
+        volume,
+        onEnd: handleEnd,
+        onStart,
+        ponyfill,
+        voice: voices.find((v) => v.name === voice)
+      }
+    )
+  ] });
 }
 var say_default = Say;
+function useSay({
+  notifyAutoClose = 4500,
+  vibrateDuration = DEFAULT_SAY_VIBRATE_DURATION,
+  shouldVibrate = defaultShouldVibrate
+} = {}) {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [textSpeaking, setTextSpeaking] = useState("");
+  const handleSay = useCallback(
+    (text, options) => {
+      const notify = nvl(options.notify, true);
+      const vibrate = nvl(options.vibrate, true);
+      const { type } = options;
+      setIsSpeaking(true);
+      setTextSpeaking(text);
+      if (notify) {
+        showSayNotify(text, {
+          type,
+          autoClose: nvl(options.autoClose, notifyAutoClose)
+        });
+      }
+      if (vibrate && shouldVibrate(type) && navigator.vibrate) {
+        navigator.vibrate(vibrateDuration);
+      }
+    },
+    [shouldVibrate, vibrateDuration, notifyAutoClose]
+  );
+  return { handleSay, isSpeaking, textSpeaking, setIsSpeaking };
+}
 
 export { say_default as Say, useSay };
 //# sourceMappingURL=index.mjs.map

package/dist/accessibility/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/accessibility/say/utils/constants.ts","../../src/components/accessibility/say/use-say.ts","../../src/components/accessibility/say/use-speech-ponyfill.ts","../../src/components/accessibility/say/index.tsx"],"names":["useState","useCallback"],"mappings":"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","file":"index.mjs","sourcesContent":["import type { SpeechPonyfill } from \"./interface\";\r\n\r\nexport const SPEECH_APIS = [\"speechSynthesis\", \"SpeechSynthesisUtterance\"];\r\n\r\nexport function hasSpeechSupport(): boolean {\r\n  return SPEECH_APIS.every((api) => api in globalThis);\r\n}\r\n\r\nexport function voicesAreEqual(\r\n  current: SpeechSynthesisVoice[],\r\n  next: SpeechSynthesisVoice[],\r\n): boolean {\r\n  if (current.length !== next.length) return false;\r\n\r\n  return current.every(\r\n    (v, i) => v.name === next[i]?.name && v.lang === next[i]?.lang,\r\n  );\r\n}\r\n\r\nexport function getSpeechSupport(): SpeechPonyfill | null {\r\n  if (!hasSpeechSupport()) return null;\r\n\r\n  return {\r\n    speechSynthesis: globalThis.speechSynthesis,\r\n    SpeechSynthesisUtterance: globalThis.SpeechSynthesisUtterance,\r\n  };\r\n}\r\n\r\nexport const DEFAULT_SAY_VOICE = \"Google português do Brasil\";\r\nexport const DEFAULT_SAY_RATE = 1.4;\r\nexport const DEFAULT_SAY_PITCH = 0.8;\r\nexport const DEFAULT_SAY_VOLUME = 1;\r\nexport const DEFAULT_SAY_NOTIFY_AUTO_CLOSE = 1500;\r\nexport const DEFAULT_SAY_VIBRATE_DURATION = 500;\r\n\r\nexport function defaultShouldVibrate(\r\n  type?: import(\"./interface\").SayFeedbackType | false,\r\n): boolean {\r\n  return !type || type === \"warning\";\r\n}\r\n\r\nconst sayConstants = `\r\nSintetiza texto em fala via Web Speech API (\\`react-say\\`), com hook \\`useSay\\` para notificação e vibração.\r\n\r\n**Importação:**\r\n\\`\\`\\`tsx\r\nimport { Say, useSay } from \"@grazziotin/react-components-next/accessibility\";\r\n\\`\\`\\`\r\n\r\n**Uso básico:**\r\n\\`\\`\\`tsx\r\nconst { say, isSpeaking, textSpeaking, setIsSpeaking } = useSay({\r\n  onNotify: (text, { type }) => toast(text, { type }),\r\n});\r\n\r\n<>\r\n  <Say\r\n    isSpeaking={isSpeaking}\r\n    text={textSpeaking}\r\n    setIsSpeaking={setIsSpeaking}\r\n  />\r\n  <button type=\"button\" onClick={() => say(\"Operação concluída\")}>\r\n    Falar\r\n  </button>\r\n</>\r\n\\`\\`\\`\r\n\r\nRequer suporte a \\`speechSynthesis\\` no navegador. A voz padrão é \\`Google português do Brasil\\`.\r\n`;\r\n\r\nexport default sayConstants;\r\n","import {\r\n  defaultShouldVibrate,\r\n  DEFAULT_SAY_NOTIFY_AUTO_CLOSE,\r\n  DEFAULT_SAY_VIBRATE_DURATION,\r\n} from \"./utils/constants\";\r\nimport type {\r\n  UseSayReturn,\r\n  UseSayOptions,\r\n  SayCallOptions,\r\n} from \"./utils/interface\";\r\nimport { nvl } from \"@/functions\";\r\nimport { useCallback, useState } from \"react\";\r\n\r\n/**\r\n * Hook para disparar fala, notificação e vibração de forma configurável.\r\n *\r\n * @example\r\n * ```tsx\r\n * const { say, isSpeaking, textSpeaking, setIsSpeaking } = useSay({\r\n *   onNotify: (text, { type }) => toast(text, { type }),\r\n * });\r\n *\r\n * <Say\r\n *   isSpeaking={isSpeaking}\r\n *   text={textSpeaking}\r\n *   setIsSpeaking={setIsSpeaking}\r\n * />\r\n *\r\n * <button type=\"button\" onClick={() => say(\"Operação concluída\")}>\r\n *   Falar\r\n * </button>\r\n * ```\r\n */\r\nexport function useSay({\r\n  onNotify,\r\n  defaultNotifyType = \"success\",\r\n  vibrateDuration = DEFAULT_SAY_VIBRATE_DURATION,\r\n  defaultNotifyAutoClose = DEFAULT_SAY_NOTIFY_AUTO_CLOSE,\r\n  shouldVibrate = defaultShouldVibrate,\r\n}: UseSayOptions = {}): UseSayReturn {\r\n  const [isSpeaking, setIsSpeaking] = useState(false);\r\n  const [textSpeaking, setTextSpeaking] = useState(\"\");\r\n\r\n  const say = useCallback(\r\n    (text: string, options?: SayCallOptions) => {\r\n      const type = options?.type;\r\n      const notify = nvl(options?.notify, true);\r\n      const vibrate = nvl(options?.vibrate, true);\r\n\r\n      setIsSpeaking(true);\r\n      setTextSpeaking(text);\r\n\r\n      if (notify && type !== false && onNotify) {\r\n        onNotify(text, {\r\n          type: nvl(type, defaultNotifyType),\r\n          autoClose: nvl(options?.autoClose, defaultNotifyAutoClose),\r\n        });\r\n      }\r\n\r\n      if (vibrate && shouldVibrate(type) && navigator.vibrate) {\r\n        navigator.vibrate(vibrateDuration);\r\n      }\r\n    },\r\n    [\r\n      onNotify,\r\n      shouldVibrate,\r\n      vibrateDuration,\r\n      defaultNotifyType,\r\n      defaultNotifyAutoClose,\r\n    ],\r\n  );\r\n\r\n  return { say, isSpeaking, textSpeaking, setIsSpeaking };\r\n}\r\n","import {\r\n  getSpeechSupport,\r\n  hasSpeechSupport,\r\n  voicesAreEqual,\r\n} from \"./utils/constants\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\n\r\nexport function useSpeechPonyfill() {\r\n  const ponyfill = useMemo(() => getSpeechSupport(), []);\r\n  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);\r\n\r\n  useEffect(() => {\r\n    if (!hasSpeechSupport()) return;\r\n\r\n    const synthesis = globalThis.speechSynthesis;\r\n\r\n    const updateVoices = () => {\r\n      setVoices((current) => {\r\n        const next = synthesis.getVoices();\r\n        return voicesAreEqual(current, next) ? current : next;\r\n      });\r\n    };\r\n\r\n    synthesis.onvoiceschanged = updateVoices;\r\n    updateVoices();\r\n\r\n    return () => {\r\n      synthesis.onvoiceschanged = null;\r\n    };\r\n  }, []);\r\n\r\n  return { voices, ponyfill };\r\n}\r\n","\"use client\";\r\n\r\nimport {\r\n  DEFAULT_SAY_PITCH,\r\n  DEFAULT_SAY_RATE,\r\n  DEFAULT_SAY_VOICE,\r\n  DEFAULT_SAY_VOLUME,\r\n} from \"./utils/constants\";\r\nimport SayEngine from \"react-say\";\r\nexport { useSay } from \"./use-say\";\r\nimport React, { useCallback } from \"react\";\r\nimport type { SayProps } from \"./utils/interface\";\r\nimport { useSpeechPonyfill } from \"./use-speech-ponyfill\";\r\n\r\n/**\r\n * Sintetiza texto em fala via Web Speech API (`react-say`).\r\n * Use com {@link useSay} para controlar `isSpeaking`, `text` e `setIsSpeaking`.\r\n *\r\n * @example\r\n * ```tsx\r\n * const { say, isSpeaking, textSpeaking, setIsSpeaking } = useSay({\r\n *   onNotify: (text, { type }) => toast(text, { type }),\r\n * });\r\n *\r\n * return (\r\n *   <>\r\n *     <Say\r\n *       isSpeaking={isSpeaking}\r\n *       text={textSpeaking}\r\n *       setIsSpeaking={setIsSpeaking}\r\n *       voice=\"Google português do Brasil\"\r\n *       rate={1.4}\r\n *     />\r\n *     <button type=\"button\" onClick={() => say(\"Pronto\")}>Falar</button>\r\n *   </>\r\n * );\r\n * ```\r\n */\r\nfunction Say({\r\n  text,\r\n  onEnd,\r\n  onStart,\r\n  isSpeaking,\r\n  setIsSpeaking,\r\n  rate = DEFAULT_SAY_RATE,\r\n  voice = DEFAULT_SAY_VOICE,\r\n  pitch = DEFAULT_SAY_PITCH,\r\n  volume = DEFAULT_SAY_VOLUME,\r\n}: Readonly<SayProps>): React.ReactElement | null {\r\n  const { voices, ponyfill } = useSpeechPonyfill();\r\n\r\n  const handleEnd = useCallback(() => {\r\n    setIsSpeaking(false);\r\n    onEnd?.();\r\n  }, [setIsSpeaking, onEnd]);\r\n\r\n  if (!isSpeaking || voices.length === 0 || !ponyfill) return null;\r\n\r\n  return (\r\n    <SayEngine\r\n      text={text}\r\n      rate={rate}\r\n      pitch={pitch}\r\n      volume={volume}\r\n      onEnd={handleEnd}\r\n      onStart={onStart}\r\n      ponyfill={ponyfill}\r\n      voice={voices.find((v) => v.name === voice)}\r\n    />\r\n  );\r\n}\r\n\r\nexport default Say;\r\n"]}
+{"version":3,"sources":["../../src/components/accessibility/say/utils/constants.ts","../../src/components/accessibility/say/use-speech-ponyfill.ts","../../src/components/accessibility/say/index.tsx","../../src/components/accessibility/say/use-say.ts"],"names":["useState","useCallback"],"mappings":"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","file":"index.mjs","sourcesContent":["import type {\r\n  SayFeedbackType,\r\n  SayNotifyOptions,\r\n  SpeechPonyfill,\r\n} from \"./interface\";\r\nimport { toast } from \"react-toastify\";\r\n\r\nexport const DEFAULT_SAY_RATE = 1.4;\r\nexport const DEFAULT_SAY_VOLUME = 1;\r\nexport const DEFAULT_SAY_PITCH = 0.8;\r\nexport const DEFAULT_SAY_VIBRATE_DURATION = 500;\r\nexport const DEFAULT_SAY_VOICE = \"Google português do Brasil\";\r\nexport const SPEECH_APIS = [\"speechSynthesis\", \"SpeechSynthesisUtterance\"];\r\n\r\nexport function hasSpeechSupport(): boolean {\r\n  return SPEECH_APIS.every((api) => api in globalThis);\r\n}\r\n\r\nexport function voicesAreEqual(\r\n  current: SpeechSynthesisVoice[],\r\n  next: SpeechSynthesisVoice[],\r\n): boolean {\r\n  if (current.length !== next.length) return false;\r\n  return current.every(\r\n    (v, i) => v.name === next[i]?.name && v.lang === next[i]?.lang,\r\n  );\r\n}\r\n\r\nexport function getSpeechSupport(): SpeechPonyfill | null {\r\n  if (!hasSpeechSupport()) return null;\r\n  return {\r\n    speechSynthesis: globalThis.speechSynthesis,\r\n    SpeechSynthesisUtterance: globalThis.SpeechSynthesisUtterance,\r\n  };\r\n}\r\n\r\nexport function defaultShouldVibrate(type: SayFeedbackType): boolean {\r\n  return type === \"warning\";\r\n}\r\n\r\n/** Exibe toast integrado do {@link Say}. */\r\nexport function showSayNotify(\r\n  text: string,\r\n  { type = \"success\", autoClose = 4500 }: SayNotifyOptions,\r\n): void {\r\n  toast(text, { type, autoClose });\r\n}\r\n\r\nconst sayConstants = `\r\nSintetiza texto em fala via Web Speech API (\\`react-say\\`), com toast integrado (\\`react-toastify\\`) e vibração.\r\n\r\n**Importação:**\r\n\\`\\`\\`tsx\r\nimport { Say, useSay } from \"@grazziotin/react-components-next/accessibility\";\r\n\\`\\`\\`\r\n\r\n**Uso básico:**\r\n\\`\\`\\`tsx\r\nconst { handleSay, isSpeaking, textSpeaking, setIsSpeaking } = useSay();\r\n\r\n<>\r\n  <Say\r\n    isSpeaking={isSpeaking}\r\n    text={textSpeaking}\r\n    setIsSpeaking={setIsSpeaking}\r\n  />\r\n  <button type=\"button\" onClick={() => handleSay(\"Operação concluída\", { type: \"success\" })}>\r\n    Falar\r\n  </button>\r\n</>\r\nonSuccess: (r) => handleSay(r.status, { type: \"success\" })\r\n\\`\\`\\`\r\n\r\nMonte \\`<Say />\\` uma vez no layout. Toast e CSS já vêm embutidos.\r\nUse \\`notify: false\\` para falar sem toast: \\`handleSay(texto, { type: \"default\", notify: false })\\`.\r\n`;\r\nexport default sayConstants;\r\n","import {\r\n  voicesAreEqual,\r\n  getSpeechSupport,\r\n  hasSpeechSupport,\r\n} from \"./utils/constants\";\r\n\r\nimport { useEffect, useMemo, useState } from \"react\";\r\n\r\nexport function useSpeechPonyfill() {\r\n  const ponyfill = useMemo(() => getSpeechSupport(), []);\r\n  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);\r\n\r\n  useEffect(() => {\r\n    if (!hasSpeechSupport()) return;\r\n    const synthesis = globalThis.speechSynthesis;\r\n\r\n    const updateVoices = () => {\r\n      setVoices((current) => {\r\n        const next = synthesis.getVoices();\r\n        return voicesAreEqual(current, next) ? current : next;\r\n      });\r\n    };\r\n\r\n    synthesis.onvoiceschanged = updateVoices;\r\n    updateVoices();\r\n\r\n    return () => {\r\n      synthesis.onvoiceschanged = null;\r\n    };\r\n  }, []);\r\n\r\n  return { voices, ponyfill };\r\n}\r\n","\"use client\";\r\nimport \"react-toastify/dist/ReactToastify.css\";\r\n\r\nimport {\r\n  DEFAULT_SAY_PITCH,\r\n  DEFAULT_SAY_RATE,\r\n  DEFAULT_SAY_VOICE,\r\n  DEFAULT_SAY_VOLUME,\r\n} from \"./utils/constants\";\r\nimport SayEngine from \"react-say\";\r\nimport React, { useCallback } from \"react\";\r\nimport { ToastContainer } from \"react-toastify\";\r\nimport type { SayProps } from \"./utils/interface\";\r\nimport { useSpeechPonyfill } from \"./use-speech-ponyfill\";\r\n\r\n/**\r\n * Sintetiza texto em fala via Web Speech API (`react-say`).\r\n * Inclui toast integrado para notificações do {@link useSay}.\r\n *\r\n * @example\r\n * ```tsx\r\n * const { handleSay, isSpeaking, textSpeaking, setIsSpeaking } = useSay();\r\n *\r\n * return (\r\n *   <>\r\n *     <Say\r\n *       isSpeaking={isSpeaking}\r\n *       text={textSpeaking}\r\n *       setIsSpeaking={setIsSpeaking}\r\n *     />\r\n *     <button type=\"button\" onClick={() => handleSay(\"Pronto\", { type: \"success\" })}>\r\n *       Falar\r\n *     </button>\r\n *   </>\r\n * );\r\n * ```\r\n */\r\nfunction Say({\r\n  text,\r\n  onEnd,\r\n  onStart,\r\n  isSpeaking,\r\n  setIsSpeaking,\r\n  rate = DEFAULT_SAY_RATE,\r\n  voice = DEFAULT_SAY_VOICE,\r\n  pitch = DEFAULT_SAY_PITCH,\r\n  volume = DEFAULT_SAY_VOLUME,\r\n}: Readonly<SayProps>): React.ReactElement {\r\n  const { voices, ponyfill } = useSpeechPonyfill();\r\n  const canSpeak = isSpeaking && voices.length > 0 && ponyfill;\r\n\r\n  const handleEnd = useCallback(() => {\r\n    setIsSpeaking(false);\r\n    onEnd?.();\r\n  }, [setIsSpeaking, onEnd]);\r\n\r\n  return (\r\n    <>\r\n      <ToastContainer\r\n        limit={3}\r\n        draggable\r\n        newestOnTop\r\n        pauseOnHover\r\n        closeOnClick\r\n        autoClose={4500}\r\n        pauseOnFocusLoss\r\n        closeButton={false}\r\n        position=\"top-right\"\r\n        style={{ fontSize: \"14px\" }}\r\n      />\r\n      {canSpeak && (\r\n        <SayEngine\r\n          text={text}\r\n          rate={rate}\r\n          pitch={pitch}\r\n          volume={volume}\r\n          onEnd={handleEnd}\r\n          onStart={onStart}\r\n          ponyfill={ponyfill}\r\n          voice={voices.find((v) => v.name === voice)}\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n}\r\nexport default Say;\r\n","import {\r\n  showSayNotify,\r\n  defaultShouldVibrate,\r\n  DEFAULT_SAY_VIBRATE_DURATION,\r\n} from \"./utils/constants\";\r\nimport type {\r\n  SayCallOptions,\r\n  UseSayReturn,\r\n  UseSayOptions,\r\n} from \"./utils/interface\";\r\nimport { nvl } from \"@/functions\";\r\nimport { useCallback, useState } from \"react\";\r\n\r\n/**\r\n * Hook para disparar fala, toast integrado e vibração.\r\n *\r\n * @example\r\n * ```tsx\r\n * const { handleSay, isSpeaking, textSpeaking, setIsSpeaking } = useSay();\r\n *\r\n * <Say\r\n *   isSpeaking={isSpeaking}\r\n *   text={textSpeaking}\r\n *   setIsSpeaking={setIsSpeaking}\r\n * />\r\n *\r\n * handleSay(\"Operação concluída\", { type: \"success\" });\r\n * handleSay(\"Atenção\", { type: \"warning\" });\r\n * handleSay(\"Apenas fala\", { type: \"default\", notify: false });\r\n * ```\r\n */\r\nexport function useSay({\r\n  notifyAutoClose = 4500,\r\n  vibrateDuration = DEFAULT_SAY_VIBRATE_DURATION,\r\n  shouldVibrate = defaultShouldVibrate,\r\n}: UseSayOptions = {}): UseSayReturn {\r\n  const [isSpeaking, setIsSpeaking] = useState(false);\r\n  const [textSpeaking, setTextSpeaking] = useState(\"\");\r\n\r\n  const handleSay = useCallback(\r\n    (text: string, options: SayCallOptions) => {\r\n      const notify = nvl(options.notify, true);\r\n      const vibrate = nvl(options.vibrate, true);\r\n      const { type } = options;\r\n\r\n      setIsSpeaking(true);\r\n      setTextSpeaking(text);\r\n\r\n      if (notify) {\r\n        showSayNotify(text, {\r\n          type,\r\n          autoClose: nvl(options.autoClose, notifyAutoClose),\r\n        });\r\n      }\r\n\r\n      if (vibrate && shouldVibrate(type) && navigator.vibrate) {\r\n        navigator.vibrate(vibrateDuration);\r\n      }\r\n    },\r\n    [shouldVibrate, vibrateDuration, notifyAutoClose],\r\n  );\r\n\r\n  return { handleSay, isSpeaking, textSpeaking, setIsSpeaking };\r\n}\r\n"]}

package/dist/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-600:oklch(57.7% .245 27.325);--color-red-900:oklch(39.6% .141 25.723);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-900:oklch(41.4% .112 45.904);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-800:oklch(44.8% .119 151.328);--color-green-900:oklch(39.3% .095 152.535);--color-teal-500:oklch(70.4% .14 182.503);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-900:oklch(37.9% .146 265.522);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-1{margin-left:calc(var(--spacing) * 1)}.block{display:block}.block\!{display:block!important}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.h-5{height:calc(var(--spacing) * 5)}.h-15{height:calc(var(--spacing) * 15)}.h-full{height:100%}.min-h-\[210px\]\!{min-height:210px!important}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing) * 2)}.w-5{width:calc(var(--spacing) * 5)}.w-80{width:calc(var(--spacing) * 80)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}.truncate\!{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-tl-md{border-top-left-radius:var(--radius-md)}.rounded-bl-md{border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-gray-200{border-color:var(--color-gray-200)}.border-green-200{border-color:var(--color-green-200)}.border-green-500{border-color:var(--color-green-500)}.border-red-200{border-color:var(--color-red-200)}.bg-\(--primary-color\){background-color:var(--primary-color)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-600{background-color:var(--color-red-600)}.bg-teal-500{background-color:var(--color-teal-500)}.bg-white{background-color:var(--color-white)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\!{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-xs\!{font-size:var(--text-xs)!important;line-height:var(--tw-leading,var(--text-xs--line-height))!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.font-semibold\!{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-amber-900{color:var(--color-amber-900)}.text-black{color:var(--color-black)}.text-black\/80{color:#000c}@supports (color:color-mix(in lab, red, red)){.text-black\/80{color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.text-blue-900{color:var(--color-blue-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.text-red-900{color:var(--color-red-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.shadow-\[0_2px_6px_-1px_rgba\(0\,0\,0\,\.16\)\,0_6px_18px_-1px_rgba\(0\,0\,0\,\.06\)\]{--tw-shadow:0 2px 6px -1px var(--tw-shadow-color,#00000029), 0 6px 18px -1px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.select-none{-webkit-user-select:none;user-select:none}.disabled\:opacity-50:disabled{opacity:.5}}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-800:oklch(44.8% .119 151.328);--color-teal-500:oklch(70.4% .14 182.503);--color-blue-500:oklch(62.3% .214 259.815);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-3xl:48rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-1{margin-left:calc(var(--spacing) * 1)}.block\!{display:block!important}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.h-5{height:calc(var(--spacing) * 5)}.h-15{height:calc(var(--spacing) * 15)}.h-full{height:100%}.min-h-\[210px\]\!{min-height:210px!important}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing) * 2)}.w-5{width:calc(var(--spacing) * 5)}.w-80{width:calc(var(--spacing) * 80)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing) * 2)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}.truncate\!{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-tl-md{border-top-left-radius:var(--radius-md)}.rounded-bl-md{border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-green-500{border-color:var(--color-green-500)}.bg-\(--primary-color\){background-color:var(--primary-color)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-red-600{background-color:var(--color-red-600)}.bg-teal-500{background-color:var(--color-teal-500)}.bg-white{background-color:var(--color-white)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\!{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-xs\!{font-size:var(--text-xs)!important;line-height:var(--tw-leading,var(--text-xs--line-height))!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.font-semibold\!{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-black{color:var(--color-black)}.text-black\/80{color:#000c}@supports (color:color-mix(in lab, red, red)){.text-black\/80{color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-800{color:var(--color-green-800)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.shadow-\[0_2px_6px_-1px_rgba\(0\,0\,0\,\.16\)\,0_6px_18px_-1px_rgba\(0\,0\,0\,\.06\)\]{--tw-shadow:0 2px 6px -1px var(--tw-shadow-color,#00000029), 0 6px 18px -1px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.select-none{-webkit-user-select:none;user-select:none}.disabled\:opacity-50:disabled{opacity:.5}}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/dist/ui/index.d.mts

@@ -455,11 +455,14 @@ type FilterInputSelectItem<T, M extends boolean = false> = InputSelectProps<T, M
  * Campo {@link InputSelect} no drawer com tipos heterogêneos.
  * Cada item pode ter `options` de um tipo diferente na mesma lista.
  */
-type FilterInputSelectField<M extends boolean = boolean> = InputSelectProps<unknown, M> & InputSelectGridProps;
-/** Lista de campos {@link InputSelect} no drawer (tipos de opção independentes por item). */
-type FilterInputSelectProps<M extends boolean = boolean> = FilterInputSelectField<M>[];
+type FilterInputSelectField<M extends boolean = false> = InputSelectProps<unknown, M> & InputSelectGridProps;
+/**
+ * Lista de campos {@link InputSelect} no drawer.
+ * Cada item pode ter tipo de opção e seleção única/múltipla diferentes.
+ */
+type FilterInputSelectProps = (FilterInputSelectField<false> | FilterInputSelectField<true>)[];
 /** Campo do drawer: {@link Input} ou {@link InputSelect}. */
-type FilterDrawerField = FilterInputProps | FilterInputSelectField;
+type FilterDrawerField = FilterInputProps | FilterInputSelectField<false> | FilterInputSelectField<true>;
 /**
  * Propriedades do componente {@link FilterDrawer}.
  */
@@ -514,6 +517,6 @@ declare const Filter: ({ title, inputs, onClear, onSubmit, inputSelect, }: Filte
  *   order: 1,
  * })
  */
-declare function filterInputSelect<T extends object, M extends boolean = false>(props: InputSelectProps<T, M> & InputSelectGridProps): FilterInputSelectField<M>;
+declare function filterInputSelect<T extends object, M extends boolean = false>(props: InputSelectProps<T, M> & InputSelectGridProps): M extends true ? FilterInputSelectField<true> : FilterInputSelectField<false>;
 
 export { Card, type CardClassName, type CardProps, DataTable, type DataTableProps, Dialog, type DialogProps, Filter, type FilterCardProps, type FilterDrawerField, type FilterDrawerProps, type FilterInputProps, type FilterInputSelectField, type FilterInputSelectItem, type FilterInputSelectProps, type FilterProps, Input, type InputProps, InputSelect, type InputSelectGridProps, type InputSelectProps, type InputType, Tab, type TabColorProps, type TabProps, Tabs, type TabsProps, filterInputSelect };

package/dist/ui/index.d.ts

@@ -455,11 +455,14 @@ type FilterInputSelectItem<T, M extends boolean = false> = InputSelectProps<T, M
  * Campo {@link InputSelect} no drawer com tipos heterogêneos.
  * Cada item pode ter `options` de um tipo diferente na mesma lista.
  */
-type FilterInputSelectField<M extends boolean = boolean> = InputSelectProps<unknown, M> & InputSelectGridProps;
-/** Lista de campos {@link InputSelect} no drawer (tipos de opção independentes por item). */
-type FilterInputSelectProps<M extends boolean = boolean> = FilterInputSelectField<M>[];
+type FilterInputSelectField<M extends boolean = false> = InputSelectProps<unknown, M> & InputSelectGridProps;
+/**
+ * Lista de campos {@link InputSelect} no drawer.
+ * Cada item pode ter tipo de opção e seleção única/múltipla diferentes.
+ */
+type FilterInputSelectProps = (FilterInputSelectField<false> | FilterInputSelectField<true>)[];
 /** Campo do drawer: {@link Input} ou {@link InputSelect}. */
-type FilterDrawerField = FilterInputProps | FilterInputSelectField;
+type FilterDrawerField = FilterInputProps | FilterInputSelectField<false> | FilterInputSelectField<true>;
 /**
  * Propriedades do componente {@link FilterDrawer}.
  */
@@ -514,6 +517,6 @@ declare const Filter: ({ title, inputs, onClear, onSubmit, inputSelect, }: Filte
  *   order: 1,
  * })
  */
-declare function filterInputSelect<T extends object, M extends boolean = false>(props: InputSelectProps<T, M> & InputSelectGridProps): FilterInputSelectField<M>;
+declare function filterInputSelect<T extends object, M extends boolean = false>(props: InputSelectProps<T, M> & InputSelectGridProps): M extends true ? FilterInputSelectField<true> : FilterInputSelectField<false>;
 
 export { Card, type CardClassName, type CardProps, DataTable, type DataTableProps, Dialog, type DialogProps, Filter, type FilterCardProps, type FilterDrawerField, type FilterDrawerProps, type FilterInputProps, type FilterInputSelectField, type FilterInputSelectItem, type FilterInputSelectProps, type FilterProps, Input, type InputProps, InputSelect, type InputSelectGridProps, type InputSelectProps, type InputType, Tab, type TabColorProps, type TabProps, Tabs, type TabsProps, filterInputSelect };

package/dist/ui/index.js

@@ -892,11 +892,26 @@ var FilterDrawer = ({
   const m1120 = material.useMediaQuery("(max-width:1120px)");
   const allInputs = mergeFilterFields(inputs, inputSelect);
   const renderField = (field, index) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (isInputSelect(field)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: (_a = field.xs) != null ? _a : 1, children: /* @__PURE__ */ jsxRuntime.jsx(input_select_default, __spreadProps(__spreadValues({}, field), { id: `inputSM${index}`, fullWidth: true })) }, `inputSelect-${index}`);
+      if (field.multiple) {
+        return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: (_a = field.xs) != null ? _a : 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+          input_select_default,
+          __spreadProps(__spreadValues({}, field), {
+            id: `inputSM${index}`,
+            fullWidth: true
+          })
+        ) }, `inputSelect-${index}`);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: (_b = field.xs) != null ? _b : 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+        input_select_default,
+        __spreadProps(__spreadValues({}, field), {
+          id: `inputSM${index}`,
+          fullWidth: true
+        })
+      ) }, `inputSelect-${index}`);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: (_b = field.xs) != null ? _b : 1, children: /* @__PURE__ */ jsxRuntime.jsx(input_default, __spreadProps(__spreadValues({}, field), { fullWidth: true })) }, `input-${index}`);
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: (_c = field.xs) != null ? _c : 1, children: /* @__PURE__ */ jsxRuntime.jsx(input_default, __spreadProps(__spreadValues({}, field), { fullWidth: true })) }, `input-${index}`);
   };
   const handleSubmit = (event) => {
     event.preventDefault();