tempest-react-sdk 0.23.0 → 0.25.0

package/dist/components/Tooltip/Tooltip.js

@@ -1,43 +1,34 @@
-import { jsxs as p, jsx as d } from "react/jsx-runtime";
-import { useState as b, useId as g, cloneElement as h } from "react";
-import { cn as T } from "../../utils/cn.js";
-import o from "./Tooltip.module.css.js";
-function E({
-  content: l,
-  placement: u = "top",
-  children: c,
-  disabled: a = !1,
-  openDelay: m = 150
-}) {
-  const [t, r] = b(!1), n = g();
-  let e = null;
-  function i() {
-    a || (e && clearTimeout(e), e = setTimeout(() => r(!0), m));
-  }
-  function s() {
-    e && (clearTimeout(e), e = null), r(!1);
-  }
-  const f = h(c, {
-    onMouseEnter: i,
-    onMouseLeave: s,
-    onFocus: i,
-    onBlur: s,
-    "aria-describedby": t ? n : void 0
-  });
-  return /* @__PURE__ */ p("span", { className: o.trigger, children: [
-    f,
-    t && /* @__PURE__ */ d(
-      "span",
-      {
-        id: n,
-        role: "tooltip",
-        className: T(o.bubble, o[u]),
-        children: l
-      }
-    )
-  ] });
+import { cn as e } from "../../utils/cn.js";
+import t from "./Tooltip.module.js";
+import { cloneElement as n, useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Tooltip/Tooltip.tsx
+function s({ content: s, placement: c = "top", children: l, disabled: u = !1, openDelay: d = 150 }) {
+	let [f, p] = i(!1), m = r(), h = null;
+	function g() {
+		u || (h && clearTimeout(h), h = setTimeout(() => p(!0), d));
+	}
+	function _() {
+		h &&= (clearTimeout(h), null), p(!1);
+	}
+	let v = n(l, {
+		onMouseEnter: g,
+		onMouseLeave: _,
+		onFocus: g,
+		onBlur: _,
+		"aria-describedby": f ? m : void 0
+	});
+	return /* @__PURE__ */ o("span", {
+		className: t.trigger,
+		children: [v, f && /* @__PURE__ */ a("span", {
+			id: m,
+			role: "tooltip",
+			className: e(t.bubble, t[c]),
+			children: s
+		})]
+	});
 }
-export {
-  E as Tooltip
-};
-//# sourceMappingURL=Tooltip.js.map
+//#endregion
+export { s as Tooltip };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n}\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const tooltipId = useId();\n    let timer: ReturnType<typeof setTimeout> | null = null;\n\n    function show(): void {\n        if (disabled) return;\n        if (timer) clearTimeout(timer);\n        timer = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        if (timer) {\n            clearTimeout(timer);\n            timer = null;\n        }\n        setOpen(false);\n    }\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    return (\n        <span className={styles.trigger}>\n            {trigger}\n            {open && (\n                <span\n                    id={tooltipId}\n                    role=\"tooltip\"\n                    className={cn(styles.bubble, styles[placement])}\n                >\n                    {content}\n                </span>\n            )}\n        </span>\n    );\n}\n"],"names":["Tooltip","content","placement","children","disabled","openDelay","open","setOpen","useState","tooltipId","useId","timer","show","hide","trigger","cloneElement","jsxs","styles","jsx","cn"],"mappings":";;;;AAyBO,SAASA,EAAQ;AAAA,EACpB,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,GAAiB;AACb,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAkB,EAAK,GACzCC,IAAYC,EAAA;AAClB,MAAIC,IAA8C;AAElD,WAASC,IAAa;AAClB,IAAIR,MACAO,kBAAoBA,CAAK,GAC7BA,IAAQ,WAAW,MAAMJ,EAAQ,EAAI,GAAGF,CAAS;AAAA,EACrD;AAEA,WAASQ,IAAa;AAClB,IAAIF,MACA,aAAaA,CAAK,GAClBA,IAAQ,OAEZJ,EAAQ,EAAK;AAAA,EACjB;AAEA,QAAMO,IAAUC,EAAaZ,GAAU;AAAA,IACnC,cAAcS;AAAA,IACd,cAAcC;AAAA,IACd,SAASD;AAAA,IACT,QAAQC;AAAA,IACR,oBAAoBP,IAAOG,IAAY;AAAA,EAAA,CACf;AAE5B,SACI,gBAAAO,EAAC,QAAA,EAAK,WAAWC,EAAO,SACnB,UAAA;AAAA,IAAAH;AAAA,IACAR,KACG,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAIT;AAAA,QACJ,MAAK;AAAA,QACL,WAAWU,EAAGF,EAAO,QAAQA,EAAOf,CAAS,CAAC;AAAA,QAE7C,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GAER;AAER;"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n}\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const tooltipId = useId();\n    let timer: ReturnType<typeof setTimeout> | null = null;\n\n    function show(): void {\n        if (disabled) return;\n        if (timer) clearTimeout(timer);\n        timer = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        if (timer) {\n            clearTimeout(timer);\n            timer = null;\n        }\n        setOpen(false);\n    }\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    return (\n        <span className={styles.trigger}>\n            {trigger}\n            {open && (\n                <span\n                    id={tooltipId}\n                    role=\"tooltip\"\n                    className={cn(styles.bubble, styles[placement])}\n                >\n                    {content}\n                </span>\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;AAyBA,SAAgB,EAAQ,EACpB,YACA,eAAY,OACZ,aACA,cAAW,IACX,eAAY,OACC;CACb,IAAM,CAAC,GAAM,KAAW,EAAkB,EAAK,GACzC,IAAY,EAAM,GACpB,IAA8C;CAElD,SAAS,IAAa;EACd,MACA,KAAO,aAAa,CAAK,GAC7B,IAAQ,iBAAiB,EAAQ,EAAI,GAAG,CAAS;CACrD;CAEA,SAAS,IAAa;EAKlB,AAJA,AAEI,OADA,aAAa,CAAK,GACV,OAEZ,EAAQ,EAAK;CACjB;CAEA,IAAM,IAAU,EAAa,GAAU;EACnC,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,oBAAoB,IAAO,IAAY,KAAA;CAC3C,CAA4B;CAE5B,OACI,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACK,GACA,KACG,kBAAC,QAAD;GACI,IAAI;GACJ,MAAK;GACL,WAAW,EAAG,EAAO,QAAQ,EAAO,EAAU;aAE7C;EACC,CAAA,CAER;;AAEd"}

package/dist/components/Tooltip/Tooltip.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_trigger_Dmc5E`,t=`tempest_bubble_TPGHB`,n=`tempest_tempest-tooltip-in_csYeZ`,r=`tempest_top_m2tnn`,i=`tempest_bottom_9Twz4`,a=`tempest_left_UPdrG`,o=`tempest_right_CV--T`,s={trigger:e,bubble:t,tempestTooltipIn:n,top:r,bottom:i,left:a,right:o};exports.bottom=i,exports.bubble=t,exports.default=s,exports.left=a,exports.right=o,exports.tempestTooltipIn=n,exports.top=r,exports.trigger=e;
+//# sourceMappingURL=Tooltip.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Tooltip/Tooltip.module.js

@@ -0,0 +1,14 @@
+//#region src/components/Tooltip/Tooltip.module.css
+var e = "tempest_trigger_Dmc5E", t = "tempest_bubble_TPGHB", n = "tempest_tempest-tooltip-in_csYeZ", r = "tempest_top_m2tnn", i = "tempest_bottom_9Twz4", a = "tempest_left_UPdrG", o = "tempest_right_CV--T", s = {
+	trigger: e,
+	bubble: t,
+	tempestTooltipIn: n,
+	top: r,
+	bottom: i,
+	left: a,
+	right: o
+};
+//#endregion
+export { i as bottom, t as bubble, s as default, a as left, o as right, n as tempestTooltipIn, r as top, e as trigger };
+
+//# sourceMappingURL=Tooltip.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":""}

package/dist/components/TreeView/TreeView.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("./TreeView.module.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("lucide-react");function a(e,t,n=0,r=null,i=[]){for(let o of e){let e=Array.isArray(o.children),s=e&&t.has(o.id);i.push({node:o,depth:n,parentId:r,hasChildren:e,expanded:s}),s&&o.children&&a(o.children,t,n+1,o.id,i)}return i}function o({nodes:o,expandedIds:s,defaultExpandedIds:c=[],onExpandedChange:l,selectedId:u,defaultSelectedId:d=null,onSelect:f,toggleOnSelect:p=!0,label:m,className:h}){let g=s!==void 0,[_,v]=(0,n.useState)(c),y=g?s:_,b=u!==void 0,[x,S]=(0,n.useState)(d),C=b?u:x,w=(0,n.useMemo)(()=>new Set(y),[y]),T=(0,n.useMemo)(()=>a(o,w),[o,w]),[E,D]=(0,n.useState)(null),O=(0,n.useRef)(null),k=E??C??T.find(e=>!e.node.disabled)?.node.id??null,A=(0,n.useCallback)(e=>{g||v(e),l?.(e)},[g,l]),j=(0,n.useCallback)(e=>{A(y.includes(e)?y.filter(t=>t!==e):[...y,e])},[y,A]),M=(0,n.useCallback)(e=>{e.node.disabled||(b||S(e.node.id),D(e.node.id),f?.(e.node),e.hasChildren&&p&&j(e.node.id))},[f,b,j,p]),N=(0,n.useCallback)(e=>{D(e),(O.current?.querySelector(`[data-tree-id="${e}"]`))?.focus()},[]),P=(0,n.useCallback)((e,t)=>{for(let n=e+t;n>=0&&n<T.length;n+=t)if(!T[n].node.disabled){N(T[n].node.id);return}},[T,N]),F=(0,n.useCallback)((e,t,n)=>{switch(e.key){case`ArrowDown`:e.preventDefault(),P(n,1);break;case`ArrowUp`:e.preventDefault(),P(n,-1);break;case`ArrowRight`:e.preventDefault(),t.hasChildren&&!t.expanded?j(t.node.id):t.expanded&&P(n,1);break;case`ArrowLeft`:e.preventDefault(),t.expanded?j(t.node.id):t.parentId&&N(t.parentId);break;case`Home`:e.preventDefault(),P(-1,1);break;case`End`:e.preventDefault(),P(T.length,-1);break;case`Enter`:case` `:e.preventDefault(),M(t);break;default:break}},[P,T.length,M,j,N]);return(0,r.jsx)(`ul`,{ref:O,role:`tree`,"aria-label":m,className:e.cn(t.default.tree,h),children:T.map((n,a)=>{let o=C===n.node.id;return(0,r.jsx)(`li`,{role:`treeitem`,"aria-expanded":n.hasChildren?n.expanded:void 0,"aria-selected":o,"aria-level":n.depth+1,"aria-disabled":n.node.disabled||void 0,className:t.default.item,children:(0,r.jsxs)(`div`,{"data-tree-id":n.node.id,className:e.cn(t.default.row,o&&t.default.selected,n.node.disabled&&t.default.disabled),style:{paddingInlineStart:`calc(${n.depth} * var(--tempest-space-5))`},tabIndex:k===n.node.id&&!n.node.disabled?0:-1,onClick:()=>M(n),onFocus:()=>D(n.node.id),onKeyDown:e=>F(e,n,a),children:[n.hasChildren?(0,r.jsx)(`span`,{className:e.cn(t.default.chevron,n.expanded&&t.default.chevronOpen),"aria-hidden":`true`,onClick:e=>{e.stopPropagation(),n.node.disabled||j(n.node.id)},children:(0,r.jsx)(i.ChevronRight,{size:14})}):(0,r.jsx)(`span`,{className:t.default.chevronPlaceholder,"aria-hidden":`true`}),n.node.icon?(0,r.jsx)(`span`,{className:t.default.icon,"aria-hidden":`true`,children:n.node.icon}):null,(0,r.jsx)(`span`,{className:t.default.label,children:n.node.label})]})},n.node.id)})})}exports.TreeView=o;
+//# sourceMappingURL=TreeView.cjs.map

package/dist/components/TreeView/TreeView.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.cjs","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":"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"}

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,124 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "./TreeView.module.js";
+import { useCallback as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ChevronRight as c } from "lucide-react";
+//#region src/components/TreeView/TreeView.tsx
+function l(e, t, n = 0, r = null, i = []) {
+	for (let a of e) {
+		let e = Array.isArray(a.children), o = e && t.has(a.id);
+		i.push({
+			node: a,
+			depth: n,
+			parentId: r,
+			hasChildren: e,
+			expanded: o
+		}), o && a.children && l(a.children, t, n + 1, a.id, i);
+	}
+	return i;
+}
+function u({ nodes: u, expandedIds: d, defaultExpandedIds: f = [], onExpandedChange: p, selectedId: m, defaultSelectedId: h = null, onSelect: g, toggleOnSelect: _ = !0, label: v, className: y }) {
+	let b = d !== void 0, [x, S] = a(f), C = b ? d : x, w = m !== void 0, [T, E] = a(h), D = w ? m : T, O = r(() => new Set(C), [C]), k = r(() => l(u, O), [u, O]), [A, j] = a(null), M = i(null), N = A ?? D ?? k.find((e) => !e.node.disabled)?.node.id ?? null, P = n((e) => {
+		b || S(e), p?.(e);
+	}, [b, p]), F = n((e) => {
+		P(C.includes(e) ? C.filter((t) => t !== e) : [...C, e]);
+	}, [C, P]), I = n((e) => {
+		e.node.disabled || (w || E(e.node.id), j(e.node.id), g?.(e.node), e.hasChildren && _ && F(e.node.id));
+	}, [
+		g,
+		w,
+		F,
+		_
+	]), L = n((e) => {
+		j(e), (M.current?.querySelector(`[data-tree-id="${e}"]`))?.focus();
+	}, []), R = n((e, t) => {
+		for (let n = e + t; n >= 0 && n < k.length; n += t) if (!k[n].node.disabled) {
+			L(k[n].node.id);
+			return;
+		}
+	}, [k, L]), z = n((e, t, n) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), R(n, 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), R(n, -1);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), t.hasChildren && !t.expanded ? F(t.node.id) : t.expanded && R(n, 1);
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), t.expanded ? F(t.node.id) : t.parentId && L(t.parentId);
+				break;
+			case "Home":
+				e.preventDefault(), R(-1, 1);
+				break;
+			case "End":
+				e.preventDefault(), R(k.length, -1);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), I(t);
+				break;
+			default: break;
+		}
+	}, [
+		R,
+		k.length,
+		I,
+		F,
+		L
+	]);
+	return /* @__PURE__ */ o("ul", {
+		ref: M,
+		role: "tree",
+		"aria-label": v,
+		className: e(t.tree, y),
+		children: k.map((n, r) => {
+			let i = D === n.node.id;
+			return /* @__PURE__ */ o("li", {
+				role: "treeitem",
+				"aria-expanded": n.hasChildren ? n.expanded : void 0,
+				"aria-selected": i,
+				"aria-level": n.depth + 1,
+				"aria-disabled": n.node.disabled || void 0,
+				className: t.item,
+				children: /* @__PURE__ */ s("div", {
+					"data-tree-id": n.node.id,
+					className: e(t.row, i && t.selected, n.node.disabled && t.disabled),
+					style: { paddingInlineStart: `calc(${n.depth} * var(--tempest-space-5))` },
+					tabIndex: N === n.node.id && !n.node.disabled ? 0 : -1,
+					onClick: () => I(n),
+					onFocus: () => j(n.node.id),
+					onKeyDown: (e) => z(e, n, r),
+					children: [
+						n.hasChildren ? /* @__PURE__ */ o("span", {
+							className: e(t.chevron, n.expanded && t.chevronOpen),
+							"aria-hidden": "true",
+							onClick: (e) => {
+								e.stopPropagation(), n.node.disabled || F(n.node.id);
+							},
+							children: /* @__PURE__ */ o(c, { size: 14 })
+						}) : /* @__PURE__ */ o("span", {
+							className: t.chevronPlaceholder,
+							"aria-hidden": "true"
+						}),
+						n.node.icon ? /* @__PURE__ */ o("span", {
+							className: t.icon,
+							"aria-hidden": "true",
+							children: n.node.icon
+						}) : null,
+						/* @__PURE__ */ o("span", {
+							className: t.label,
+							children: n.node.label
+						})
+					]
+				})
+			}, n.node.id);
+		})
+	});
+}
+//#endregion
+export { u as TreeView };
+
+//# sourceMappingURL=TreeView.js.map

package/dist/components/TreeView/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":";;;;;;AA2DA,SAAS,EACL,GACA,GACA,IAAQ,GACR,IAA0B,MAC1B,IAAkB,CAAC,GACT;CACV,KAAK,IAAM,KAAQ,GAAO;EACtB,IAAM,IAAc,MAAM,QAAQ,EAAK,QAAQ,GACzC,IAAW,KAAe,EAAY,IAAI,EAAK,EAAE;EAEvD,AADA,EAAI,KAAK;GAAE;GAAM;GAAO;GAAU;GAAa;EAAS,CAAC,GACrD,KAAY,EAAK,YACjB,EAAQ,EAAK,UAAU,GAAa,IAAQ,GAAG,EAAK,IAAI,CAAG;CAEnE;CACA,OAAO;AACX;AAoCA,SAAgB,EAAS,EACrB,UACA,gBACA,wBAAqB,CAAC,GACtB,qBACA,eACA,uBAAoB,MACpB,aACA,oBAAiB,IACjB,UACA,gBACc;CACd,IAAM,IAAqB,MAAgB,KAAA,GACrC,CAAC,GAAkB,KAAuB,EAAmB,CAAkB,GAC/E,IAAW,IAAqB,IAAc,GAE9C,IAAsB,MAAe,KAAA,GACrC,CAAC,GAAkB,KAAuB,EAAwB,CAAiB,GACnF,IAAW,IAAsB,IAAa,GAE9C,IAAc,QAAc,IAAI,IAAI,CAAQ,GAAG,CAAC,CAAQ,CAAC,GACzD,IAAO,QAAc,EAAQ,GAAO,CAAW,GAAG,CAAC,GAAO,CAAW,CAAC,GAEtE,CAAC,GAAW,KAAgB,EAAwB,IAAI,GACxD,IAAe,EAAyB,IAAI,GAE5C,IACF,KAAa,KAAY,EAAK,MAAM,MAAQ,CAAC,EAAI,KAAK,QAAQ,CAAC,EAAE,KAAK,MAAM,MAE1E,IAAc,GACf,MAAyB;EAEtB,AADK,KAAoB,EAAoB,CAAI,GACjD,IAAmB,CAAI;CAC3B,GACA,CAAC,GAAoB,CAAgB,CACzC,GAEM,IAAS,GACV,MAAqB;EAClB,EACI,EAAS,SAAS,CAAE,IAAI,EAAS,QAAQ,MAAM,MAAM,CAAE,IAAI,CAAC,GAAG,GAAU,CAAE,CAC/E;CACJ,GACA,CAAC,GAAU,CAAW,CAC1B,GAEM,IAAS,GACV,MAAwB;EACjB,EAAI,KAAK,aACR,KAAqB,EAAoB,EAAI,KAAK,EAAE,GACzD,EAAa,EAAI,KAAK,EAAE,GACxB,IAAW,EAAI,IAAI,GACf,EAAI,eAAe,KAAgB,EAAO,EAAI,KAAK,EAAE;CAC7D,GACA;EAAC;EAAU;EAAqB;EAAQ;CAAc,CAC1D,GAGM,IAAW,GAAa,MAAqB;EAG/C,AAFA,EAAa,CAAE,IACC,EAAa,SAAS,cAA2B,kBAAkB,EAAG,GAAG,EAAA,EAChF,MAAM;CACnB,GAAG,CAAC,CAAC,GAEC,IAAY,GACb,GAAc,MAAwB;EACnC,KAAK,IAAI,IAAQ,IAAO,GAAO,KAAS,KAAK,IAAQ,EAAK,QAAQ,KAAS,GACvE,IAAI,CAAC,EAAK,EAAM,CAAC,KAAK,UAAU;GAC5B,EAAS,EAAK,EAAM,CAAC,KAAK,EAAE;GAC5B;EACJ;CAER,GACA,CAAC,GAAM,CAAQ,CACnB,GAEM,IAAgB,GACjB,GAAsC,GAAe,MAAwB;EAC1E,QAAQ,EAAM,KAAd;GACI,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,GAAO,CAAC;IAClB;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,GAAO,EAAE;IACnB;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACjB,EAAI,eAAe,CAAC,EAAI,WAAU,EAAO,EAAI,KAAK,EAAE,IAC/C,EAAI,YAAU,EAAU,GAAO,CAAC;IACzC;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACjB,EAAI,WACJ,EAAO,EAAI,KAAK,EAAE,IACX,EAAI,YACX,EAAS,EAAI,QAAQ;IAEzB;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,IAAI,CAAC;IACf;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,EAAK,QAAQ,EAAE;IACzB;GACJ,KAAK;GACL,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAO,CAAG;IACV;GACJ,SACI;EACR;CACJ,GACA;EAAC;EAAW,EAAK;EAAQ;EAAQ;EAAQ;CAAQ,CACrD;CAEA,OACI,kBAAC,MAAD;EACI,KAAK;EACL,MAAK;EACL,cAAY;EACZ,WAAW,EAAG,EAAO,MAAM,CAAS;YAEnC,EAAK,KAAK,GAAK,MAAU;GACtB,IAAM,IAAa,MAAa,EAAI,KAAK;GACzC,OACI,kBAAC,MAAD;IAEI,MAAK;IACL,iBAAe,EAAI,cAAc,EAAI,WAAW,KAAA;IAChD,iBAAe;IACf,cAAY,EAAI,QAAQ;IACxB,iBAAe,EAAI,KAAK,YAAY,KAAA;IACpC,WAAW,EAAO;cAElB,kBAAC,OAAD;KACI,gBAAc,EAAI,KAAK;KACvB,WAAW,EACP,EAAO,KACP,KAAc,EAAO,UACrB,EAAI,KAAK,YAAY,EAAO,QAChC;KACA,OAAO,EACH,oBAAoB,QAAQ,EAAI,MAAM,4BAC1C;KACA,UAAU,MAAa,EAAI,KAAK,MAAM,CAAC,EAAI,KAAK,WAAW,IAAI;KAC/D,eAAe,EAAO,CAAG;KACzB,eAAe,EAAa,EAAI,KAAK,EAAE;KACvC,YAAY,MAAU,EAAc,GAAO,GAAK,CAAK;eAbzD;MAeK,EAAI,cACD,kBAAC,QAAD;OACI,WAAW,EACP,EAAO,SACP,EAAI,YAAY,EAAO,WAC3B;OACA,eAAY;OACZ,UAAU,MAAU;QAEhB,AADA,EAAM,gBAAgB,GACjB,EAAI,KAAK,YAAU,EAAO,EAAI,KAAK,EAAE;OAC9C;iBAEA,kBAAC,GAAD,EAAc,MAAM,GAAK,CAAA;MACvB,CAAA,IAEN,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAoB,eAAY;MAAQ,CAAA;MAEnE,EAAI,KAAK,OACN,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;iBACrC,EAAI,KAAK;MACR,CAAA,IACN;MACJ,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAQ,EAAI,KAAK;MAAY,CAAA;KACpD;;GACL,GA/CK,EAAI,KAAK,EA+Cd;EAEZ,CAAC;CACD,CAAA;AAEZ"}

package/dist/components/TreeView/TreeView.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_tree_velMm`,t=`tempest_item_A2xw2`,n=`tempest_row_BsqpV`,r=`tempest_selected_uhjg8`,i=`tempest_disabled_vKxfJ`,a=`tempest_chevron_5v99r`,o=`tempest_chevronOpen_H3jAu`,s=`tempest_chevronPlaceholder_j0xjc`,c=`tempest_icon_O4r1C`,l=`tempest_label_MqR1B`,u={tree:e,item:t,row:n,selected:r,disabled:i,chevron:a,chevronOpen:o,chevronPlaceholder:s,icon:c,label:l};exports.chevron=a,exports.chevronOpen=o,exports.chevronPlaceholder=s,exports.default=u,exports.disabled=i,exports.icon=c,exports.item=t,exports.label=l,exports.row=n,exports.selected=r,exports.tree=e;
+//# sourceMappingURL=TreeView.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.module.cjs","names":[],"sources":["../../../src/components/TreeView/TreeView.module.css"],"sourcesContent":[".tree {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n}\n\n.item {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.row {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding-block: var(--tempest-space-2);\n    padding-inline-end: var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    user-select: none;\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.row:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-offset) * -1);\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.selected:hover {\n    background-color: var(--tempest-primary-soft-hover);\n}\n\n.disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.disabled:hover {\n    background-color: transparent;\n}\n\n.chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--tempest-radius-xs);\n    color: var(--tempest-text-muted);\n    transition: transform var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.chevron:hover {\n    background-color: var(--tempest-surface-3);\n}\n\n.chevronOpen {\n    transform: rotate(90deg);\n}\n\n.chevronPlaceholder {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    color: var(--tempest-text-muted);\n}\n\n.label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .row,\n    .chevron {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/TreeView/TreeView.module.js

@@ -0,0 +1,17 @@
+//#region src/components/TreeView/TreeView.module.css
+var e = "tempest_tree_velMm", t = "tempest_item_A2xw2", n = "tempest_row_BsqpV", r = "tempest_selected_uhjg8", i = "tempest_disabled_vKxfJ", a = "tempest_chevron_5v99r", o = "tempest_chevronOpen_H3jAu", s = "tempest_chevronPlaceholder_j0xjc", c = "tempest_icon_O4r1C", l = "tempest_label_MqR1B", u = {
+	tree: e,
+	item: t,
+	row: n,
+	selected: r,
+	disabled: i,
+	chevron: a,
+	chevronOpen: o,
+	chevronPlaceholder: s,
+	icon: c,
+	label: l
+};
+//#endregion
+export { a as chevron, o as chevronOpen, s as chevronPlaceholder, u as default, i as disabled, c as icon, t as item, l as label, n as row, r as selected, e as tree };
+
+//# sourceMappingURL=TreeView.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.module.js","names":[],"sources":["../../../src/components/TreeView/TreeView.module.css"],"sourcesContent":[".tree {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n}\n\n.item {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.row {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding-block: var(--tempest-space-2);\n    padding-inline-end: var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    user-select: none;\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.row:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-offset) * -1);\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.selected:hover {\n    background-color: var(--tempest-primary-soft-hover);\n}\n\n.disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.disabled:hover {\n    background-color: transparent;\n}\n\n.chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--tempest-radius-xs);\n    color: var(--tempest-text-muted);\n    transition: transform var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.chevron:hover {\n    background-color: var(--tempest-surface-3);\n}\n\n.chevronOpen {\n    transform: rotate(90deg);\n}\n\n.chevronPlaceholder {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    color: var(--tempest-text-muted);\n}\n\n.label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .row,\n    .chevron {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/TruncateText/TruncateText.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("../../utils/cn.cjs"),a=require("./TruncateText.module.css.cjs");function i({lines:e=1,className:t,style:n,children:r,...c}){const u={...n,"--tempest-clamp-lines":e};return s.jsx("div",{className:l.cn(a.default.clamp,t),style:u,...c,children:r})}exports.TruncateText=i;
-//# sourceMappingURL=TruncateText.cjs.map
+const e=require("../../utils/cn.cjs"),t=require("./TruncateText.module.cjs");let n=require("react/jsx-runtime");function r({lines:r=1,className:i,style:a,children:o,...s}){let c={...a,"--tempest-clamp-lines":r};return(0,n.jsx)(`div`,{className:e.cn(t.default.clamp,i),style:c,...s,children:o})}exports.TruncateText=r;
+//# sourceMappingURL=TruncateText.cjs.map

package/dist/components/TruncateText/TruncateText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TruncateText.cjs","sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"names":["TruncateText","lines","className","style","children","props","mergedStyle","jsx","cn","styles"],"mappings":"gMAmBO,SAASA,EAAa,CACzB,MAAAC,EAAQ,EACR,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,EAAsB,CAClB,MAAMC,EAAc,CAChB,GAAGH,EACH,wBAAyBF,CAAA,EAG7B,OACIM,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,GAAGC,EAAAA,QAAO,MAAOP,CAAS,EAAG,MAAOI,EAAc,GAAGD,EAChE,SAAAD,CAAA,CACL,CAER"}
+{"version":3,"file":"TruncateText.cjs","names":[],"sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"gHAmBA,SAAgB,EAAa,CACzB,QAAQ,EACR,YACA,QACA,WACA,GAAG,GACe,CAClB,IAAM,EAAc,CAChB,GAAG,EACH,wBAAyB,CAC7B,EAEA,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,MAAO,EAAa,GAAI,EAChE,UACA,CAAA,CAEb"}

package/dist/components/TruncateText/TruncateText.js

@@ -1,20 +1,20 @@
-import { jsx as c } from "react/jsx-runtime";
-import { cn as l } from "../../utils/cn.js";
-import n from "./TruncateText.module.css.js";
-function f({
-  lines: t = 1,
-  className: e,
-  style: m,
-  children: r,
-  ...o
-}) {
-  const s = {
-    ...m,
-    "--tempest-clamp-lines": t
-  };
-  return /* @__PURE__ */ c("div", { className: l(n.clamp, e), style: s, ...o, children: r });
+import { cn as e } from "../../utils/cn.js";
+import t from "./TruncateText.module.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/TruncateText/TruncateText.tsx
+function r({ lines: r = 1, className: i, style: a, children: o, ...s }) {
+	let c = {
+		...a,
+		"--tempest-clamp-lines": r
+	};
+	return /* @__PURE__ */ n("div", {
+		className: e(t.clamp, i),
+		style: c,
+		...s,
+		children: o
+	});
 }
-export {
-  f as TruncateText
-};
-//# sourceMappingURL=TruncateText.js.map
+//#endregion
+export { r as TruncateText };
+
+//# sourceMappingURL=TruncateText.js.map

package/dist/components/TruncateText/TruncateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TruncateText.js","sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"names":["TruncateText","lines","className","style","children","props","mergedStyle","jsx","cn","styles"],"mappings":";;;AAmBO,SAASA,EAAa;AAAA,EACzB,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,GAAsB;AAClB,QAAMC,IAAc;AAAA,IAChB,GAAGH;AAAA,IACH,yBAAyBF;AAAA,EAAA;AAG7B,SACI,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,OAAOP,CAAS,GAAG,OAAOI,GAAc,GAAGD,GAChE,UAAAD,EAAA,CACL;AAER;"}
+{"version":3,"file":"TruncateText.js","names":[],"sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;AAmBA,SAAgB,EAAa,EACzB,WAAQ,GACR,cACA,UACA,aACA,GAAG,KACe;CAClB,IAAM,IAAc;EAChB,GAAG;EACH,yBAAyB;CAC7B;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,OAAO,CAAS;EAAG,OAAO;EAAa,GAAI;EAChE;CACA,CAAA;AAEb"}

package/dist/components/TruncateText/TruncateText.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_clamp_r43C-`,t={clamp:e};exports.clamp=e,exports.default=t;
+//# sourceMappingURL=TruncateText.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TruncateText.module.cjs","names":[],"sources":["../../../src/components/TruncateText/TruncateText.module.css"],"sourcesContent":[".clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--tempest-clamp-lines, 1);\n    line-clamp: var(--tempest-clamp-lines, 1);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n"],"mappings":""}

package/dist/components/TruncateText/TruncateText.module.js

@@ -0,0 +1,6 @@
+//#region src/components/TruncateText/TruncateText.module.css
+var e = "tempest_clamp_r43C-", t = { clamp: e };
+//#endregion
+export { e as clamp, t as default };
+
+//# sourceMappingURL=TruncateText.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TruncateText.module.js","names":[],"sources":["../../../src/components/TruncateText/TruncateText.module.css"],"sourcesContent":[".clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--tempest-clamp-lines, 1);\n    line-clamp: var(--tempest-clamp-lines, 1);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n"],"mappings":""}

package/dist/components/UpdatePrompt/UpdatePrompt.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("lucide-react"),d=require("../../utils/cn.cjs"),t=require("./UpdatePrompt.module.css.cjs");function m({open:s,onUpdate:i,onDismiss:a,message:l="Uma nova versão está disponível.",actionLabel:n="Atualizar",position:o="bottom",className:u,...c}){return s?e.jsxs("div",{className:d.cn(t.default.prompt,t.default[o],u),role:"alert","aria-live":"assertive",...c,children:[e.jsx(r.RefreshCw,{className:t.default.icon,size:18,"aria-hidden":"true"}),e.jsx("span",{className:t.default.message,children:l}),e.jsx("button",{type:"button",className:t.default.action,onClick:i,children:n}),a&&e.jsx("button",{type:"button",className:t.default.dismiss,"aria-label":"Dispensar",onClick:a,children:e.jsx(r.X,{size:16,"aria-hidden":"true"})})]}):null}exports.UpdatePrompt=m;
-//# sourceMappingURL=UpdatePrompt.cjs.map
+const e=require("../../utils/cn.cjs"),t=require("./UpdatePrompt.module.cjs");let n=require("react/jsx-runtime"),r=require("lucide-react");function i({open:i,onUpdate:a,onDismiss:o,message:s=`Uma nova versão está disponível.`,actionLabel:c=`Atualizar`,position:l=`bottom`,className:u,...d}){return i?(0,n.jsxs)(`div`,{className:e.cn(t.default.prompt,t.default[l],u),role:`alert`,"aria-live":`assertive`,...d,children:[(0,n.jsx)(r.RefreshCw,{className:t.default.icon,size:18,"aria-hidden":`true`}),(0,n.jsx)(`span`,{className:t.default.message,children:s}),(0,n.jsx)(`button`,{type:`button`,className:t.default.action,onClick:a,children:c}),o&&(0,n.jsx)(`button`,{type:`button`,className:t.default.dismiss,"aria-label":`Dispensar`,onClick:o,children:(0,n.jsx)(r.X,{size:16,"aria-hidden":`true`})})]}):null}exports.UpdatePrompt=i;
+//# sourceMappingURL=UpdatePrompt.cjs.map

package/dist/components/UpdatePrompt/UpdatePrompt.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatePrompt.cjs","sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"names":["UpdatePrompt","open","onUpdate","onDismiss","message","actionLabel","position","className","props","jsxs","cn","styles","jsx","RefreshCw","X"],"mappings":"0NAiCO,SAASA,EAAa,CACzB,KAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,mCACV,YAAAC,EAAc,YACd,SAAAC,EAAW,SACX,UAAAC,EACA,GAAGC,CACP,EAAsB,CAClB,OAAKP,EAEDQ,EAAAA,KAAC,MAAA,CACG,UAAWC,EAAAA,GAAGC,UAAO,OAAQA,EAAAA,QAAOL,CAAQ,EAAGC,CAAS,EACxD,KAAK,QACL,YAAU,YACT,GAAGC,EAEJ,SAAA,CAAAI,MAACC,EAAAA,WAAU,UAAWF,EAAAA,QAAO,KAAM,KAAM,GAAI,cAAY,OAAO,EAChEC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,QAAU,SAAAP,EAAQ,EAC1CQ,EAAAA,IAAC,UAAO,KAAK,SAAS,UAAWD,UAAO,OAAQ,QAAST,EACpD,SAAAG,CAAA,CACL,EACCF,GACGS,EAAAA,IAAC,SAAA,CACG,KAAK,SACL,UAAWD,EAAAA,QAAO,QAClB,aAAW,YACX,QAASR,EAET,SAAAS,EAAAA,IAACE,IAAA,CAAE,KAAM,GAAI,cAAY,MAAA,CAAO,CAAA,CAAA,CACpC,CAAA,CAAA,EArBM,IAyBtB"}
+{"version":3,"file":"UpdatePrompt.cjs","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"0IAiCA,SAAgB,EAAa,CACzB,OACA,WACA,YACA,UAAU,mCACV,cAAc,YACd,WAAW,SACX,YACA,GAAG,GACe,CAElB,OADK,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAW,CAAS,EACxD,KAAK,QACL,YAAU,YACV,GAAI,WAJR,EAMI,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAW,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,CAAc,CAAA,GAChD,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,OAAQ,QAAS,WACpD,CACG,CAAA,EACP,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,aAAW,YACX,QAAS,YAET,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAG,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC7B,CAAA,CAEX,IAvBS,IAyBtB"}

package/dist/components/UpdatePrompt/UpdatePrompt.js

@@ -1,43 +1,44 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { RefreshCw as p, X as d } from "lucide-react";
-import { cn as u } from "../../utils/cn.js";
-import e from "./UpdatePrompt.module.css.js";
-function N({
-  open: a,
-  onUpdate: i,
-  onDismiss: t,
-  message: s = "Uma nova versão está disponível.",
-  actionLabel: o = "Atualizar",
-  position: n = "bottom",
-  className: l,
-  ...m
-}) {
-  return a ? /* @__PURE__ */ c(
-    "div",
-    {
-      className: u(e.prompt, e[n], l),
-      role: "alert",
-      "aria-live": "assertive",
-      ...m,
-      children: [
-        /* @__PURE__ */ r(p, { className: e.icon, size: 18, "aria-hidden": "true" }),
-        /* @__PURE__ */ r("span", { className: e.message, children: s }),
-        /* @__PURE__ */ r("button", { type: "button", className: e.action, onClick: i, children: o }),
-        t && /* @__PURE__ */ r(
-          "button",
-          {
-            type: "button",
-            className: e.dismiss,
-            "aria-label": "Dispensar",
-            onClick: t,
-            children: /* @__PURE__ */ r(d, { size: 16, "aria-hidden": "true" })
-          }
-        )
-      ]
-    }
-  ) : null;
+import { cn as e } from "../../utils/cn.js";
+import t from "./UpdatePrompt.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { RefreshCw as i, X as a } from "lucide-react";
+//#region src/components/UpdatePrompt/UpdatePrompt.tsx
+function o({ open: o, onUpdate: s, onDismiss: c, message: l = "Uma nova versão está disponível.", actionLabel: u = "Atualizar", position: d = "bottom", className: f, ...p }) {
+	return o ? /* @__PURE__ */ r("div", {
+		className: e(t.prompt, t[d], f),
+		role: "alert",
+		"aria-live": "assertive",
+		...p,
+		children: [
+			/* @__PURE__ */ n(i, {
+				className: t.icon,
+				size: 18,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ n("span", {
+				className: t.message,
+				children: l
+			}),
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				className: t.action,
+				onClick: s,
+				children: u
+			}),
+			c && /* @__PURE__ */ n("button", {
+				type: "button",
+				className: t.dismiss,
+				"aria-label": "Dispensar",
+				onClick: c,
+				children: /* @__PURE__ */ n(a, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	}) : null;
 }
-export {
-  N as UpdatePrompt
-};
-//# sourceMappingURL=UpdatePrompt.js.map
+//#endregion
+export { o as UpdatePrompt };
+
+//# sourceMappingURL=UpdatePrompt.js.map