tempest-react-sdk 0.78.0 → 0.79.0

package/dist/components/OfflineIndicator/OfflineIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.cjs","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":"yMAoCA,SAAgB,EAAiB,CAC7B,WAAW,SACX,eAAe,sEACf,cAAc,yBACd,gBAAgB,IAChB,YACA,WACA,GAAG,GACmB,CACtB,IAAM,EAAS,EAAA,UAAU,EACnB,CAAC,EAAa,IAAA,EAAkB,EAAA,SAAA,CAAkB,EAAK,EACvD,GAAA,EAAgB,EAAA,OAAA,CAAgB,EAAK,EAe3C,IAbA,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAQ,CACT,EAAc,QAAU,GACxB,EAAe,EAAK,EACpB,MACJ,CACA,GAAI,CAAC,EAAc,SAAW,GAAiB,EAAG,OAClD,EAAc,QAAU,GACxB,EAAe,EAAI,EACnB,IAAM,EAAK,OAAO,eAAiB,EAAe,EAAK,EAAG,CAAa,EACvE,UAAa,OAAO,aAAa,CAAE,CACvC,EAAG,CAAC,EAAQ,CAAa,CAAC,EAEtB,GAAU,CAAC,EAAa,OAAO,KAEnC,IAAM,EAAgB,GAAU,EAChC,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,IACP,EAAA,QAAO,GACP,EAAgB,EAAA,QAAO,OAAS,EAAA,QAAO,QACvC,CACJ,EACA,KAAK,SACL,YAAU,SACV,GAAI,EAEH,SAAA,IACG,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,CACK,GACG,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAAM,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAE5D,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CAAU,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAEpE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,EAAgB,EAAc,CAAmB,CAAA,CAC1D,CAAA,CAAA,CAEL,CAAA,CAEb"}
+{"version":3,"file":"OfflineIndicator.cjs","names":["useOnline","useState","useRef","cn","styles","_Fragment","Wifi","CloudOff","require_cn","require_use_online","require_OfflineIndicator_module","react","react_jsx_runtime","lucide_react","OfflineIndicator","props","online","flashOnline","setFlashOnline","wasOfflineRef","onlineFlashMs","id","showingOnline","position","className","children","onlineLabel","offlineLabel"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":"A,yMAoCA,SAAgBc,EAAiB,CAC7B,WAAW,SACX,eAAe,sEACf,cAAc,yBACd,gBAAgB,IAChB,YACA,WACA,GAAGC,GACmB,CACtB,IAAMC,EAAShB,EAAAA,UAAU,EACnB,CAACiB,EAAaC,IAAA,EAAkBjB,EAAAA,SAAAA,CAAkB,EAAK,EACvDkB,GAAA,EAAgBjB,EAAAA,OAAAA,CAAgB,EAAK,EAe3C,IAbA,EAAAS,EAAA,UAAA,KAAgB,CACZ,GAAI,CAACK,EAAQ,CACT,EAAc,QAAU,GACxBE,EAAe,EAAK,EACpB,MACJ,CACA,GAAI,CAACC,EAAc,SAAWC,GAAiB,EAAG,OAClD,EAAc,QAAU,GACxBF,EAAe,EAAI,EACnB,IAAMG,EAAK,OAAO,eAAiBH,EAAe,EAAK,EAAGE,CAAa,EACvE,UAAa,OAAO,aAAaC,CAAE,CACvC,EAAG,CAACL,EAAQI,CAAa,CAAC,EAEtBJ,GAAU,CAACC,EAAa,OAAO,KAEnC,IAAMK,EAAgBN,GAAUC,EAChC,OACI,EAAAL,EAAA,IAAA,CAAC,MAAD,CACI,UAAWT,EAAAA,GACPC,EAAAA,QAAO,IACPA,EAAAA,QAAOmB,GACPD,EAAgBlB,EAAAA,QAAO,OAASA,EAAAA,QAAO,QACvCoB,CACJ,EACA,KAAK,SACL,YAAU,SACV,GAAIT,EAEH,SAAAU,IACG,EAAAb,EAAA,KAAA,CAAAP,EAAAA,SAAA,CAAA,SAAA,CACKiB,GACG,EAAAV,EAAA,IAAA,CAACN,EAAAA,KAAD,CAAM,UAAWF,EAAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAE5D,EAAAQ,EAAA,IAAA,CAACL,EAAAA,SAAD,CAAU,UAAWH,EAAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAEpE,EAAAQ,EAAA,IAAA,CAAC,OAAD,CAAA,SAAOU,EAAgBI,EAAcC,CAAmB,CAAA,CAC1D,CAAA,CAAA,CAEL,CAAA,CAEb,C"}

package/dist/components/OfflineIndicator/OfflineIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.js","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,EAAiB,EAC7B,cAAW,UACX,kBAAe,uEACf,iBAAc,0BACd,mBAAgB,KAChB,cACA,aACA,GAAG,KACmB;CACtB,IAAM,IAAS,EAAU,GACnB,CAAC,GAAa,KAAkB,EAAkB,EAAK,GACvD,IAAgB,EAAgB,EAAK;CAe3C,IAbA,QAAgB;EACZ,IAAI,CAAC,GAAQ;GAET,AADA,EAAc,UAAU,IACxB,EAAe,EAAK;GACpB;EACJ;EACA,IAAI,CAAC,EAAc,WAAW,KAAiB,GAAG;EAElD,AADA,EAAc,UAAU,IACxB,EAAe,EAAI;EACnB,IAAM,IAAK,OAAO,iBAAiB,EAAe,EAAK,GAAG,CAAa;EACvE,aAAa,OAAO,aAAa,CAAE;CACvC,GAAG,CAAC,GAAQ,CAAa,CAAC,GAEtB,KAAU,CAAC,GAAa,OAAO;CAEnC,IAAM,IAAgB,KAAU;CAChC,OACI,kBAAC,OAAD;EACI,WAAW,EACP,EAAO,KACP,EAAO,IACP,IAAgB,EAAO,SAAS,EAAO,SACvC,CACJ;EACA,MAAK;EACL,aAAU;EACV,GAAI;EAEH,UAAA,KACG,kBAAA,GAAA,EAAA,UAAA,CAEQ,EADH,IACI,IAEA,GAFD;GAAM,WAAW,EAAO;GAAM,MAAM;GAAI,eAAY;EAAQ,CAEI,GAEpE,kBAAC,QAAD,EAAA,UAAO,IAAgB,IAAc,EAAmB,CAAA,CAC1D,EAAA,CAAA;CAEL,CAAA;AAEb"}
+{"version":3,"file":"OfflineIndicator.js","names":["styles","_Fragment","OfflineIndicator_module_default","Fragment$1","OfflineIndicator","props","online","useOnline","flashOnline","setFlashOnline","useState","wasOfflineRef","useRef","useEffect","onlineFlashMs","id","showingOnline","cn","position","className","children","jsx","Wifi","CloudOff","onlineLabel","offlineLabel"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgBI,EAAiB,EAC7B,cAAW,UACX,kBAAe,uEACf,iBAAc,0BACd,mBAAgB,KAChB,cACA,aACA,GAAGC,KACmB;CACtB,IAAMC,IAASC,EAAU,GACnB,CAACC,GAAaC,KAAkBC,EAAkB,EAAK,GACvDC,IAAgBC,EAAgB,EAAK;CAe3C,IAbAC,QAAgB;EACZ,IAAI,CAACP,GAAQ;GAET,AADA,EAAc,UAAU,IACxBG,EAAe,EAAK;GACpB;EACJ;EACA,IAAI,CAACE,EAAc,WAAWG,KAAiB,GAAG;EAElD,AADA,EAAc,UAAU,IACxBL,EAAe,EAAI;EACnB,IAAMM,IAAK,OAAO,iBAAiBN,EAAe,EAAK,GAAGK,CAAa;EACvE,aAAa,OAAO,aAAaC,CAAE;CACvC,GAAG,CAACT,GAAQQ,CAAa,CAAC,GAEtBR,KAAU,CAACE,GAAa,OAAO;CAEnC,IAAMQ,IAAgBV,KAAUE;CAChC,OACI,kBAAC,OAAD;EACI,WAAWS,EACPjB,EAAO,KACPA,EAAOkB,IACPF,IAAgBhB,EAAO,SAASA,EAAO,SACvCmB,CACJ;EACA,MAAK;EACL,aAAU;EACV,GAAId;EAEH,UAAAe,KACG,kBAAAnB,GAAA,EAAA,UAAA,CAEQoB,EADHL,IACIM,IAEAC,GAFD;GAAM,WAAWvB,EAAO;GAAM,MAAM;GAAI,eAAY;EAAQ,CAEI,GAEpE,kBAAC,QAAD,EAAA,UAAOgB,IAAgBQ,IAAcC,EAAmB,CAAA,CAC1D,EAAA,CAAA;CAEL,CAAA;AAEb"}

package/dist/components/OfflineIndicator/OfflineIndicator.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.module.cjs","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"OfflineIndicator.module.cjs","names":["bar","top","bottom","offline","online","icon","OfflineIndicator_module_default"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}

package/dist/components/OfflineIndicator/OfflineIndicator.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.module.js","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"OfflineIndicator.module.js","names":["bar","top","bottom","offline","online","icon","OfflineIndicator_module_default"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}

package/dist/components/Page/Page.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.cjs","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":"wJAyCA,SAAgB,EAAK,CACjB,QACA,UACA,cACA,UACA,UACA,SACA,SAAS,GACT,YACA,WACA,GAAG,GACO,CACV,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,GAAU,EAAA,QAAO,OAAQ,CAAS,EAAG,GAAI,EAA1E,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CACI,MAAO,EACE,UACF,QACM,cACJ,SACZ,CAAA,EACA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,GAC1D,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,EAC9C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC3D,GAEd"}
+{"version":3,"file":"Page.cjs","names":["cn","styles","SectionHeader","require_cn","require_SectionHeader","require_Page_module","react_jsx_runtime","Page","props","padded","className","toolbar","footer"],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":"A,wJAyCA,SAAgBO,EAAK,CACjB,QACA,UACA,cACA,UACA,UACA,SACA,SAAS,GACT,YACA,WACA,GAAGC,GACO,CACV,OACI,EAAAF,EAAA,KAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,GAAGC,EAAAA,QAAO,KAAMQ,GAAUR,EAAAA,QAAO,OAAQS,CAAS,EAAG,GAAIF,EAA1E,SAAA,EACI,EAAAF,EAAA,IAAA,CAACJ,EAAAA,cAAD,CACI,MAAO,EACE,UACF,QACM,cACJ,SACZ,CAAA,EACAS,IAAW,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,QAAO,QAAU,SAAAU,CAAa,CAAA,GAC1D,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,QAAO,QAAU,UAAc,CAAA,EAC9CW,IAAU,EAAAN,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAWL,EAAAA,QAAO,OAAS,SAAAW,CAAe,CAAA,CAC3D,C,EAEd,C"}

package/dist/components/Page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":";;;;;AAyCA,SAAgB,EAAK,EACjB,UACA,YACA,gBACA,YACA,YACA,WACA,YAAS,IACT,cACA,aACA,GAAG,KACO;CACV,OACI,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAO,MAAM,KAAU,EAAO,QAAQ,CAAS;EAAG,GAAI;EAA1E,UAAA;GACI,kBAAC,GAAD;IACI,OAAO;IACE;IACF;IACM;IACJ;GACZ,CAAA;GACA,KAAW,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU,UAAA;GAAa,CAAA;GAC1D,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU;GAAc,CAAA;GAC9C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC3D;;AAEd"}
+{"version":3,"file":"Page.js","names":["styles","Page_module_default","Page","props","cn","padded","className","SectionHeader","toolbar","footer"],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":";;;;;AAyCA,SAAgBE,EAAK,EACjB,UACA,YACA,gBACA,YACA,YACA,WACA,YAAS,IACT,cACA,aACA,GAAGC,KACO;CACV,OACI,kBAAC,QAAD;EAAM,WAAWC,EAAGJ,EAAO,MAAMK,KAAUL,EAAO,QAAQM,CAAS;EAAG,GAAIH;EAA1E,UAAA;GACI,kBAACI,GAAD;IACI,OAAO;IACE;IACF;IACM;IACJ;GACZ,CAAA;GACAC,KAAW,kBAAC,OAAD;IAAK,WAAWR,EAAO;IAAU,UAAAQ;GAAa,CAAA;GAC1D,kBAAC,OAAD;IAAK,WAAWR,EAAO;IAAU;GAAc,CAAA;GAC9CS,KAAU,kBAAC,UAAD;IAAQ,WAAWT,EAAO;IAAS,UAAAS;GAAe,CAAA;EAC3D;;AAEd"}

package/dist/components/Page/Page.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.module.cjs","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}
+{"version":3,"file":"Page.module.cjs","names":["page","padded","toolbar","content","footer","Page_module_default"],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}

package/dist/components/Page/Page.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.module.js","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}
+{"version":3,"file":"Page.module.js","names":["page","padded","toolbar","content","footer","Page_module_default"],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}

package/dist/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.cjs","names":["useMemo","useRef","cn","styles","require_cn","require_Pagination_module","react","react_jsx_runtime","DEFAULT_PAGE_SIZE_OPTIONS","buildRange","totalPages","siblings","i","start","page","end","range","Pagination","pages","siblingCount","sizes","pageSize","pageSizeOptions","a","b","activePage","compactOnMobile","onPageSizeChange","className","totalItems","onPageChange","entry","index","event","opt"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;AA6CA,IAAM,IAAsC;CAAC;CAAI;CAAI;CAAI;AAAG;AAE5D,SAAS,EAAW,GAAc,GAAoB,GAAsC;CAExF,IAAI,KADe,IAAW,GAE1B,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MAAM,IAAI,CAAC;CAE7D,IAAM,IAAQ,KAAK,IAAI,GAAG,IAAO,KAAK,MAAM,IAAW,CAAC,CAAC,GACnD,IAAM,KAAK,IAAI,IAAa,GAAG,IAAQ,IAAW,CAAC,GACnD,IAA4B,CAAC,CAAC;CACpC,AAAI,IAAQ,KAAG,EAAM,KAAK,KAAK;CAC/B,KAAK,IAAI,IAAI,GAAO,KAAK,GAAK,KAAK,EAAM,KAAK,CAAC;CAG/C,OAFI,IAAM,IAAa,KAAG,EAAM,KAAK,KAAK,GAC1C,EAAM,KAAK,CAAU,GACd;AACX;AAgBA,SAAgB,EAAW,EACvB,SACA,eACA,iBACA,aACA,qBACA,qBAAkB,GAClB,eACA,kBAAe,GACf,qBAAkB,IAClB,gBACgB;CAChB,IAAM,IAAQ,QACJ,EAAW,GAAM,GAAY,CAAY,GAC/C;EAAC;EAAM;EAAY;CAAY,CACnC,GACM,IAAQ,QAEN,MAAa,KAAA,KAAa,EAAgB,SAAS,CAAQ,IACrD,IACA,CAAC,GAAG,GAAiB,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,GAC7D,CAAC,GAAU,CAAe,CAC9B,GACM,IAAa,EAAiC,IAAI;CASxD,OAPA,QAAgB;EACR,KACJ,EAAW,SAAS,iBAAiB;GAAE,OAAO;GAAW,QAAQ;EAAU,CAAC;CAChF,GAAG,CAAC,GAAM,CAAe,CAAC,GAEtB,KAAc,KAAK,CAAC,IAAyB,OAG7C,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,CAAS;EAAG,gBAAc,OAAO,CAAe;EAAnF,UAAA,CACI,kBAAC,OAAD;GAAK,WAAW,EAAO;GAClB,UAAA,OAAO,KAAe,WACjB,GAAG,EAAW,YAAY,MAAe,IAAI,KAAK,QAClD,UAAU,EAAK,MAAM;EAC1B,CAAA,GACL,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACI,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,eAAe,EAAa,KAAK,IAAI,GAAG,IAAO,CAAC,CAAC;KACjD,UAAU,KAAQ;KAClB,cAAW;KACd,UAAA;IAEO,CAAA;IACP,EAAM,KAAK,GAAO,MACf,MAAU,QACN,kBAAC,QAAD;KAEI,WAAW,EAAG,EAAO,UAAU,EAAO,OAAO;KAChD,UAAA;IAEK,GAJG,YAAY,GAIf,IAEN,kBAAC,UAAD;KACI,MAAK;KAEL,KAAK,MAAU,IAAO,IAAa,KAAA;KACnC,WAAW,EACP,EAAO,MACP,EAAO,SACP,MAAU,KAAQ,EAAO,MAC7B;KACA,eAAe,EAAa,CAAK;KACjC,gBAAc,MAAU,IAAO,SAAS,KAAA;KAEvC,UAAA;IACG,GAXC,CAWD,CAEhB;IACA,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,eAAe,EAAa,KAAK,IAAI,GAAY,IAAO,CAAC,CAAC;KAC1D,UAAU,KAAQ;KAClB,cAAW;KACd,UAAA;IAEO,CAAA;IACP,KACG,kBAAC,UAAD;KACI,WAAW,EAAO;KAClB,OAAO;KACP,WAAW,MAAU,EAAiB,OAAO,EAAM,OAAO,KAAK,CAAC;KAChE,cAAW;KAEV,UAAA,EAAM,KAAK,MACR,kBAAC,UAAD;MAAkB,OAAO;MAAzB,UAAA,CACK,GAAI,WACD;KAFK,GAAA,CAEL,CACX;IACG,CAAA;GAEX;EACJ,CAAA,CAAA;;AAEb"}
+{"version":3,"file":"Pagination.js","names":["styles","Pagination_module_default","DEFAULT_PAGE_SIZE_OPTIONS","buildRange","totalPages","siblings","i","start","page","end","range","Pagination","pages","useMemo","siblingCount","sizes","pageSize","pageSizeOptions","a","b","activePage","useRef","useEffect","compactOnMobile","onPageSizeChange","cn","className","totalItems","onPageChange","entry","index","event","opt"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;AA6CA,IAAME,IAAsC;CAAC;CAAI;CAAI;CAAI;AAAG;AAE5D,SAASC,EAAW,GAAc,GAAoB,GAAsC;CAExF,IAAIC,KADeC,IAAW,GAE1B,OAAO,MAAM,KAAK,EAAE,QAAQD,EAAW,IAAI,GAAG,MAAME,IAAI,CAAC;CAE7D,IAAMC,IAAQ,KAAK,IAAI,GAAGC,IAAO,KAAK,MAAMH,IAAW,CAAC,CAAC,GACnDI,IAAM,KAAK,IAAIL,IAAa,GAAGG,IAAQF,IAAW,CAAC,GACnDK,IAA4B,CAAC,CAAC;CACpC,AAAIH,IAAQ,KAAGG,EAAM,KAAK,KAAK;CAC/B,KAAK,IAAIJ,IAAIC,GAAOD,KAAKG,GAAK,KAAK,EAAM,KAAKH,CAAC;CAG/C,OAFIG,IAAML,IAAa,KAAGM,EAAM,KAAK,KAAK,GAC1CA,EAAM,KAAKN,CAAU,GACdM;AACX;AAgBA,SAAgBC,EAAW,EACvB,SACA,eACA,iBACA,aACA,qBACA,qBAAkBT,GAClB,eACA,kBAAe,GACf,qBAAkB,IAClB,gBACgB;CAChB,IAAMU,IAAQC,QACJV,EAAWK,GAAMJ,GAAYU,CAAY,GAC/C;EAACN;EAAMJ;EAAYU;CAAY,CACnC,GACMC,IAAQF,QAENG,MAAa,KAAA,KAAaC,EAAgB,SAASD,CAAQ,IACrDC,IACA,CAAC,GAAGA,GAAiBD,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAME,IAAIC,CAAC,GAC7D,CAACH,GAAUC,CAAe,CAC9B,GACMG,IAAaC,EAAiC,IAAI;CASxD,OAPAC,QAAgB;EACZ,AAAIC,KACJH,EAAW,SAAS,iBAAiB;GAAE,OAAO;GAAW,QAAQ;EAAU,CAAC;CAChF,GAAG,CAACZ,GAAMe,CAAe,CAAC,GAEtBnB,KAAc,KAAK,CAACoB,IAAyB,OAG7C,kBAAC,OAAD;EAAK,WAAWC,EAAGzB,EAAO,SAAS0B,CAAS;EAAG,gBAAc,OAAOH,CAAe;EAAnF,UAAA,CACI,kBAAC,OAAD;GAAK,WAAWvB,EAAO;GAClB,UAAA,OAAO2B,KAAe,WACjB,GAAGA,EAAW,YAAYA,MAAe,IAAI,KAAK,QAClD,UAAUnB,EAAK,MAAMJ;EAC1B,CAAA,GACL,kBAAC,OAAD;GAAK,WAAWJ,EAAO;GAAvB,UAAA;IACI,kBAAC,UAAD;KACI,MAAK;KACL,WAAWA,EAAO;KAClB,eAAe4B,EAAa,KAAK,IAAI,GAAGpB,IAAO,CAAC,CAAC;KACjD,UAAUA,KAAQ;KAClB,cAAW;KACd,UAAA;IAEO,CAAA;IACPI,EAAM,KAAK,GAAO,MACfiB,MAAU,QACN,kBAAC,QAAD;KAEI,WAAWJ,EAAGzB,EAAO,UAAUA,EAAO,OAAO;KAChD,UAAA;IAEK,GAJG,YAAY8B,GAIf,IAEN,kBAAC,UAAD;KACI,MAAK;KAEL,KAAKD,MAAUrB,IAAOY,IAAa,KAAA;KACnC,WAAWK,EACPzB,EAAO,MACPA,EAAO,SACP6B,MAAUrB,KAAQR,EAAO,MAC7B;KACA,eAAe4B,EAAaC,CAAK;KACjC,gBAAcA,MAAUrB,IAAO,SAAS,KAAA;KAEvC,UAAAqB;IACG,GAXCA,CAWD,CAEhB;IACA,kBAAC,UAAD;KACI,MAAK;KACL,WAAW7B,EAAO;KAClB,eAAe4B,EAAa,KAAK,IAAIxB,GAAYI,IAAO,CAAC,CAAC;KAC1D,UAAUA,KAAQJ;KAClB,cAAW;KACd,UAAA;IAEO,CAAA;IACPoB,KACG,kBAAC,UAAD;KACI,WAAWxB,EAAO;KAClB,OAAOgB;KACP,WAAW,MAAUQ,EAAiB,OAAOO,EAAM,OAAO,KAAK,CAAC;KAChE,cAAW;KAEV,UAAAhB,EAAM,KAAK,MACR,kBAAC,UAAD;MAAkB,OAAOiB;MAAzB,UAAA,CACKA,GAAI,WACD;KAFK,GAAAA,CAEL,CACX;IACG,CAAA;GAEX;EACJ,CAAA,CAAA;;AAEb"}

package/dist/components/Pagination/Pagination.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.module.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Pagination.module.cjs","names":["wrapper","controls","page","active","ellipsis","sizeSelect","summary","numeric","Pagination_module_default"],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}

package/dist/components/Pagination/Pagination.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.module.js","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Pagination.module.js","names":["wrapper","controls","page","active","ellipsis","sizeSelect","summary","numeric","Pagination_module_default"],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}

package/dist/components/PasswordInput/PasswordInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":"oIAmCA,IAAM,EAA0B,CAAC,cAAe,QAAS,WAAY,QAAS,WAAW,EAEzF,SAAgB,EAAyB,EAAiC,CACtE,GAAI,CAAC,EAAO,MAAO,GACnB,IAAI,EAAQ,EAMZ,OALI,EAAM,QAAU,IAAG,GAAS,GAC5B,EAAM,QAAU,KAAI,GAAS,GAC7B,QAAQ,KAAK,CAAK,GAAK,QAAQ,KAAK,CAAK,IAAG,GAAS,GACrD,QAAQ,KAAK,CAAK,IAAG,GAAS,GAC9B,eAAe,KAAK,CAAK,IAAG,GAAS,GAClC,KAAK,IAAI,EAAG,CAAK,CAC5B,CAQA,IAAa,GAAA,EAAgB,EAAA,WAAA,CACzB,SACI,CACI,QACA,aACA,QACA,OAAO,KACP,eAAe,GACf,WACA,iBAAiB,EACjB,eAAe,CAAE,KAAM,gBAAiB,KAAM,gBAAiB,EAC/D,YACA,QACA,eACA,KACA,GAAG,GAEP,EACF,CACE,IAAM,GAAA,EAAc,EAAA,MAAA,CAAM,EACpB,EAAU,GAAM,EAChB,EAAgB,EAChB,GAAG,EAAQ,QACX,EACE,GAAG,EAAQ,SACX,IAAA,GACF,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAkB,EAAK,EAEjD,EACF,GAAY,EAFI,OAAQ,GAAS,GAAgB,EAEZ,CAAW,EAEpD,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,EAAA,QAAO,GAAO,GAAS,EAAA,QAAO,MAAO,CAAS,EAAjF,SAAA,CACK,IACG,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAAS,EAAS,UAAW,EAAA,QAAO,MACtC,SAAA,CACE,CAAA,GAEX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAAvB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,QAAD,CACS,MACL,GAAI,EACJ,GAAI,EACG,QACO,eACd,KAAM,EAAW,OAAS,WAC1B,eAAc,CAAC,CAAC,EAChB,mBAAkB,EAClB,UAAW,EAAA,QAAO,KACrB,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAY,EAAW,EAAa,KAAO,EAAa,KACxD,eAAc,EACd,YAAe,EAAa,GAAO,CAAC,CAAE,EAErC,SAAA,EAAW,KAAO,IACf,CAAA,CACP,IACJ,IACG,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,SAAU,EAAA,QAAO,QAAQ,IAAmB,EACjE,aAAY,EAAe,GAF/B,SAAA,EAII,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,YACnB,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,MAAO,CAAE,MAAO,GAAI,EAAmB,EAAK,IAAI,EAAG,CAAI,CAAA,CAC5D,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,cACnB,SAAA,EAAe,EACd,CAAA,CACL,IAER,GACG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAG,EAAQ,QAAS,UAAW,EAAA,QAAO,UAC3C,SAAA,CACC,CAAA,EACN,GACA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAG,EAAQ,SAAU,UAAW,EAAA,QAAO,OAC5C,SAAA,CACC,CAAA,EACN,IACH,GAEb,CACJ"}
+{"version":3,"file":"PasswordInput.cjs","names":["forwardRef","useId","useState","cn","styles","require_cn","require_PasswordInput_module","react","react_jsx_runtime","DEFAULT_STRENGTH_LABELS","estimatePasswordStrength","value","score","PasswordInput","inputProps","generatedId","inputId","id","describedById","error","helperText","revealed","setRevealed","computedStrength","strength","defaultValue","size","className","label","toggleLabels","on","showStrength","strengthLabels"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":"A,oIAmCA,IAAMS,EAA0B,CAAC,cAAe,QAAS,WAAY,QAAS,WAAW,EAEzF,SAAgBC,EAAyB,EAAiC,CACtE,GAAI,CAACC,EAAO,MAAO,GACnB,IAAIC,EAAQ,EAMZ,OALID,EAAM,QAAU,IAAG,GAAS,GAC5BA,EAAM,QAAU,KAAI,GAAS,GAC7B,QAAQ,KAAKA,CAAK,GAAK,QAAQ,KAAKA,CAAK,IAAG,GAAS,GACrD,QAAQ,KAAKA,CAAK,IAAG,GAAS,GAC9B,eAAe,KAAKA,CAAK,IAAG,GAAS,GAClC,KAAK,IAAI,EAAGC,CAAK,CAC5B,CAQA,IAAaC,GAAA,EAAgBb,EAAAA,WAAAA,CACzB,SACI,CACI,QACA,aACA,QACA,OAAO,KACP,eAAe,GACf,WACA,iBAAiBS,EACjB,eAAe,CAAE,KAAM,gBAAiB,KAAM,gBAAiB,EAC/D,YACA,QACA,eACA,KACA,GAAGK,GAEP,EACF,CACE,IAAMC,GAAA,EAAcd,EAAAA,MAAAA,CAAM,EACpBe,EAAUC,GAAMF,EAChBG,EAAgBC,EAChB,GAAGH,EAAQ,QACXI,EACE,GAAGJ,EAAQ,SACX,IAAA,GACF,CAACK,EAAUC,IAAA,EAAepB,EAAAA,SAAAA,CAAkB,EAAK,EAEjDqB,EACFC,GAAYd,EAFI,OAAQC,GAASc,GAAgB,EAEZ,CAAW,EAEpD,OACI,EAAAjB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,QAASA,EAAAA,QAAOsB,GAAOP,GAASf,EAAAA,QAAO,MAAOuB,CAAS,EAAjF,SAAA,CACKC,IACG,EAAApB,EAAA,IAAA,CAAC,QAAD,CAAO,QAASQ,EAAS,UAAWZ,EAAAA,QAAO,MACtC,SAAAwB,CACE,CAAA,GAEX,EAAApB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,MAAvB,SAAA,EACI,EAAAI,EAAA,IAAA,CAAC,QAAD,CACS,MACL,GAAIM,EACJ,GAAIE,EACG,QACO,eACd,KAAMK,EAAW,OAAS,WAC1B,eAAc,CAAC,CAACF,EAChB,mBAAkBD,EAClB,UAAWd,EAAAA,QAAO,KACrB,CAAA,GACD,EAAAI,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWJ,EAAAA,QAAO,OAClB,aAAYiB,EAAWQ,EAAa,KAAOA,EAAa,KACxD,eAAcR,EACd,YAAeC,EAAa,GAAO,CAACQ,CAAE,EAErC,SAAAT,EAAW,KAAO,IACf,CAAA,CACP,C,GACJU,IACG,EAAAvB,EAAA,KAAA,CAAC,MAAD,CACI,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,SAAUA,EAAAA,QAAO,QAAQmB,IAAmB,EACjE,aAAYS,EAAeT,GAF/B,SAAA,EAII,EAAAf,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,YACnB,UAAA,EAAAI,EAAA,IAAA,CAAC,OAAD,CAAM,MAAO,CAAE,MAAO,GAAIe,EAAmB,EAAK,IAAI,EAAG,CAAI,CAAA,CAC5D,CAAA,GACL,EAAAf,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWJ,EAAAA,QAAO,cACnB,SAAA4B,EAAeT,EACd,CAAA,CACL,C,GAERJ,GACG,EAAAX,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAGQ,EAAQ,QAAS,UAAWZ,EAAAA,QAAO,UAC3C,SAAAe,CACC,CAAA,EACNC,GACA,EAAAZ,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAGQ,EAAQ,SAAU,UAAWZ,EAAAA,QAAO,OAC5C,SAAAgB,CACC,CAAA,EACN,IACH,C,EAEb,CACJ,E"}

package/dist/components/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":";;;;;AAmCA,IAAM,IAA0B;CAAC;CAAe;CAAS;CAAY;CAAS;AAAW;AAEzF,SAAgB,EAAyB,GAAiC;CACtE,IAAI,CAAC,GAAO,OAAO;CACnB,IAAI,IAAQ;CAMZ,OALI,EAAM,UAAU,MAAG,KAAS,IAC5B,EAAM,UAAU,OAAI,KAAS,IAC7B,QAAQ,KAAK,CAAK,KAAK,QAAQ,KAAK,CAAK,MAAG,KAAS,IACrD,QAAQ,KAAK,CAAK,MAAG,KAAS,IAC9B,eAAe,KAAK,CAAK,MAAG,KAAS,IAClC,KAAK,IAAI,GAAG,CAAK;AAC5B;AAQA,IAAa,IAAgB,EACzB,SACI,EACI,UACA,eACA,UACA,UAAO,MACP,kBAAe,IACf,aACA,oBAAiB,GACjB,kBAAe;CAAE,MAAM;CAAiB,MAAM;AAAiB,GAC/D,cACA,UACA,iBACA,OACA,GAAG,KAEP,GACF;CACE,IAAM,IAAc,EAAM,GACpB,IAAU,KAAM,GAChB,IAAgB,IAChB,GAAG,EAAQ,UACX,IACE,GAAG,EAAQ,WACX,KAAA,GACF,CAAC,GAAU,KAAe,EAAkB,EAAK,GAEjD,IACF,KAAY,EAFI,OAAQ,KAAS,KAAgB,EAEZ,CAAW;CAEpD,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,EAAO,IAAO,KAAS,EAAO,OAAO,CAAS;EAAjF,UAAA;GACK,KACG,kBAAC,SAAD;IAAO,SAAS;IAAS,WAAW,EAAO;IACtC,UAAA;GACE,CAAA;GAEX,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA,CACI,kBAAC,SAAD;KACS;KACL,GAAI;KACJ,IAAI;KACG;KACO;KACd,MAAM,IAAW,SAAS;KAC1B,gBAAc,CAAC,CAAC;KAChB,oBAAkB;KAClB,WAAW,EAAO;IACrB,CAAA,GACD,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,cAAY,IAAW,EAAa,OAAO,EAAa;KACxD,gBAAc;KACd,eAAe,GAAa,MAAO,CAAC,CAAE;KAErC,UAAA,IAAW,OAAO;IACf,CAAA,CACP;;GACJ,KACG,kBAAC,OAAD;IACI,WAAW,EAAG,EAAO,UAAU,EAAO,QAAQ,IAAmB;IACjE,cAAY,EAAe;IAF/B,UAAA,CAII,kBAAC,OAAD;KAAK,WAAW,EAAO;KACnB,UAAA,kBAAC,QAAD,EAAM,OAAO,EAAE,OAAO,GAAI,IAAmB,IAAK,IAAI,GAAG,EAAI,CAAA;IAC5D,CAAA,GACL,kBAAC,QAAD;KAAM,WAAW,EAAO;KACnB,UAAA,EAAe;IACd,CAAA,CACL;;GAER,IACG,kBAAC,QAAD;IAAM,IAAI,GAAG,EAAQ;IAAS,WAAW,EAAO;IAC3C,UAAA;GACC,CAAA,IACN,IACA,kBAAC,QAAD;IAAM,IAAI,GAAG,EAAQ;IAAU,WAAW,EAAO;IAC5C,UAAA;GACC,CAAA,IACN;EACH;;AAEb,CACJ"}
+{"version":3,"file":"PasswordInput.js","names":["styles","PasswordInput_module_default","DEFAULT_STRENGTH_LABELS","estimatePasswordStrength","value","score","PasswordInput","forwardRef","inputProps","generatedId","useId","inputId","id","describedById","error","helperText","revealed","setRevealed","useState","computedStrength","strength","defaultValue","cn","size","className","label","toggleLabels","on","showStrength","strengthLabels"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":";;;;;AAmCA,IAAME,IAA0B;CAAC;CAAe;CAAS;CAAY;CAAS;AAAW;AAEzF,SAAgBC,EAAyB,GAAiC;CACtE,IAAI,CAACC,GAAO,OAAO;CACnB,IAAIC,IAAQ;CAMZ,OALID,EAAM,UAAU,MAAG,KAAS,IAC5BA,EAAM,UAAU,OAAI,KAAS,IAC7B,QAAQ,KAAKA,CAAK,KAAK,QAAQ,KAAKA,CAAK,MAAG,KAAS,IACrD,QAAQ,KAAKA,CAAK,MAAG,KAAS,IAC9B,eAAe,KAAKA,CAAK,MAAG,KAAS,IAClC,KAAK,IAAI,GAAGC,CAAK;AAC5B;AAQA,IAAaC,IAAgBC,EACzB,SACI,EACI,UACA,eACA,UACA,UAAO,MACP,kBAAe,IACf,aACA,oBAAiBL,GACjB,kBAAe;CAAE,MAAM;CAAiB,MAAM;AAAiB,GAC/D,cACA,UACA,iBACA,OACA,GAAGM,KAEP,GACF;CACE,IAAMC,IAAcC,EAAM,GACpBC,IAAUC,KAAMH,GAChBI,IAAgBC,IAChB,GAAGH,EAAQ,UACXI,IACE,GAAGJ,EAAQ,WACX,KAAA,GACF,CAACK,GAAUC,KAAeC,EAAkB,EAAK,GAEjDC,IACFC,KAAYjB,EAFI,OAAQC,KAASiB,KAAgB,EAEZ,CAAW;CAEpD,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGtB,EAAO,SAASA,EAAOuB,IAAOT,KAASd,EAAO,OAAOwB,CAAS;EAAjF,UAAA;GACKC,KACG,kBAAC,SAAD;IAAO,SAASd;IAAS,WAAWX,EAAO;IACtC,UAAAyB;GACE,CAAA;GAEX,kBAAC,OAAD;IAAK,WAAWzB,EAAO;IAAvB,UAAA,CACI,kBAAC,SAAD;KACS;KACL,GAAIQ;KACJ,IAAIG;KACG;KACO;KACd,MAAMK,IAAW,SAAS;KAC1B,gBAAc,CAAC,CAACF;KAChB,oBAAkBD;KAClB,WAAWb,EAAO;IACrB,CAAA,GACD,kBAAC,UAAD;KACI,MAAK;KACL,WAAWA,EAAO;KAClB,cAAYgB,IAAWU,EAAa,OAAOA,EAAa;KACxD,gBAAcV;KACd,eAAeC,GAAa,MAAO,CAACU,CAAE;KAErC,UAAAX,IAAW,OAAO;IACf,CAAA,CACP;;GACJY,KACG,kBAAC,OAAD;IACI,WAAWN,EAAGtB,EAAO,UAAUA,EAAO,QAAQmB,IAAmB;IACjE,cAAYU,EAAeV;IAF/B,UAAA,CAII,kBAAC,OAAD;KAAK,WAAWnB,EAAO;KACnB,UAAA,kBAAC,QAAD,EAAM,OAAO,EAAE,OAAO,GAAImB,IAAmB,IAAK,IAAI,GAAG,EAAI,CAAA;IAC5D,CAAA,GACL,kBAAC,QAAD;KAAM,WAAWnB,EAAO;KACnB,UAAA6B,EAAeV;IACd,CAAA,CACL;;GAERL,IACG,kBAAC,QAAD;IAAM,IAAI,GAAGH,EAAQ;IAAS,WAAWX,EAAO;IAC3C,UAAAc;GACC,CAAA,IACNC,IACA,kBAAC,QAAD;IAAM,IAAI,GAAGJ,EAAQ;IAAU,WAAWX,EAAO;IAC5C,UAAAe;GACC,CAAA,IACN;EACH;;AAEb,CACJ"}

package/dist/components/PasswordInput/PasswordInput.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.module.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}
+{"version":3,"file":"PasswordInput.module.cjs","names":["wrapper","label","field","input","sm","md","lg","toggle","error","helper","errorText","strength","strengthBar","strengthLabel","level0","level1","level2","level3","level4","PasswordInput_module_default"],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}

package/dist/components/PasswordInput/PasswordInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.module.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}
+{"version":3,"file":"PasswordInput.module.js","names":["wrapper","label","field","input","sm","md","lg","toggle","error","helper","errorText","strength","strengthBar","strengthLabel","level0","level1","level2","level3","level4","PasswordInput_module_default"],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}

package/dist/components/PinInput/PinInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"file":"PinInput.cjs","names":["forwardRef","useId","useState","useRef","cn","styles","require_cn","require_PinInput_module","react","react_jsx_runtime","NUMERIC","ALNUM","PinInput","internalId","wrapperId","id","isControlled","value","internal","setInternal","defaultValue","current","cells","index","inputsRef","pattern","type","autoFocus","update","trimmed","next","length","onChange","onComplete","focusCell","safe","onCellChange","char","event","onCellKeyDown","onPaste","text","c","error","className","label","size","node","masked","cell","helperText"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}

package/dist/components/PinInput/PinInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.js","names":[],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"file":"PinInput.js","names":["styles","PinInput_module_default","NUMERIC","ALNUM","PinInput","forwardRef","internalId","useId","wrapperId","id","isControlled","value","internal","setInternal","useState","defaultValue","current","cells","index","inputsRef","useRef","pattern","type","autoFocus","update","trimmed","next","length","onChange","onComplete","focusCell","safe","onCellChange","char","event","onCellKeyDown","onPaste","text","c","cn","error","className","label","size","node","masked","cell","helperText"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}

package/dist/components/PinInput/PinInput.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.module.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}
+{"version":3,"file":"PinInput.module.cjs","names":["wrapper","label","cells","cell","sm","md","lg","error","helper","errorText","PinInput_module_default"],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}

package/dist/components/PinInput/PinInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.module.js","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}
+{"version":3,"file":"PinInput.module.js","names":["wrapper","label","cells","cell","sm","md","lg","error","helper","errorText","PinInput_module_default"],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}