npm - tempest-react-sdk - Versions diffs - 0.62.0 → 0.64.0 - Mend

tempest-react-sdk 0.62.0 → 0.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (808) hide show

package/dist/components/ContextMenu/ContextMenu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../Portal/Portal.cjs"),n=require("./ContextMenu.module.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(e){return`separator`in e&&e.separator===!0}function o({items:o,children:s,className:c}){let[l,u]=(0,r.useState)(!1),[d,f]=(0,r.useState)({x:0,y:0}),[p,m]=(0,r.useState)(-1),h=(0,r.useId)(),g=(0,r.useRef)(null),_=(0,r.useRef)([]),v=o.map((e,t)=>!a(e)&&!e.disabled?t:-1).filter(e=>e!==-1),y=(0,r.useCallback)(()=>{u(!1),m(-1)},[]),b=e=>{e.preventDefault(),f({x:e.clientX,y:e.clientY}),m(-1),u(!0)};(0,r.useEffect)(()=>{if(!l)return;let e=e=>{if(e.key===`Escape`){y();return}if(e.key===`ArrowDown`){e.preventDefault();let t=v.indexOf(p),n=v[(t+1)%v.length]??-1;m(n),_.current[n]?.focus()}if(e.key===`ArrowUp`){e.preventDefault();let t=v.indexOf(p),n=v[(t-1+v.length)%v.length]??-1;m(n),_.current[n]?.focus()}},t=e=>{g.current&&!g.current.contains(e.target)&&y()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t)}},[l,p,v,y]);let x=e=>{e.onSelect?.(),y()};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`span`,{className:n.default.root,onContextMenu:b,children:s}),l&&(0,i.jsx)(t.Portal,{children:(0,i.jsx)(`ul`,{ref:g,id:h,role:`menu`,className:e.cn(n.default.menu,c),style:{top:d.y,left:d.x},children:o.map((t,r)=>a(t)?(0,i.jsx)(`li`,{role:`separator`,className:n.default.separator,"aria-hidden":!0},`separator-${r}`):(0,i.jsx)(`li`,{role:`none`,children:(0,i.jsx)(`button`,{ref:e=>{_.current[r]=e},type:`button`,role:`menuitem`,className:e.cn(n.default.item,t.danger&&n.default.danger,p===r&&n.default.active),disabled:t.disabled,onClick:()=>x(t),onMouseEnter:()=>m(r),children:t.label})},`item-${r}`))})})]})}exports.ContextMenu=o;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/Portal.cjs"),n=require("./ContextMenu.module.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=10;function o(e){return`separator`in e&&e.separator===!0}function s({items:s,children:l,className:u,trigger:d=`contextmenu`,longPressDelay:f=500,viewportMargin:p=8}){let[m,h]=(0,r.useState)(!1),[g,_]=(0,r.useState)({x:0,y:0}),[v,y]=(0,r.useState)(-1),b=(0,r.useId)(),[x,S]=(0,r.useState)(null),C=(0,r.useRef)([]),w=(0,r.useRef)(null),T=(0,r.useRef)(null),E=s.map((e,t)=>!o(e)&&!e.disabled?t:-1).filter(e=>e!==-1),D=(0,r.useCallback)(()=>{h(!1),y(-1)},[]),O=(0,r.useCallback)(e=>{_(e),y(-1),h(!0)},[]),k=(0,r.useCallback)(()=>{w.current!==null&&(clearTimeout(w.current),w.current=null),T.current=null},[]);(0,r.useEffect)(()=>k,[k]);let A=e=>{d!==`click`&&(e.preventDefault(),O({x:e.clientX,y:e.clientY}))},j=e=>{d!==`contextmenu`&&O({x:e.clientX,y:e.clientY})},M=e=>{if(f<=0||e.pointerType===`mouse`)return;let t={x:e.clientX,y:e.clientY};T.current=t,k(),T.current=t,w.current=setTimeout(()=>{w.current=null,T.current=null,c(),O(t)},f)},N=e=>{let t=T.current;t&&w.current!==null&&Math.hypot(e.clientX-t.x,e.clientY-t.y)>a&&k()};(0,r.useEffect)(()=>{if(!m)return;let e=e=>{if(e.key===`Escape`){D();return}let t=t=>{e.preventDefault(),y(t),C.current[t]?.focus()};if(E.length===0)return;let n=E.indexOf(v);e.key===`ArrowDown`&&t(E[(n+1)%E.length]??-1),e.key===`ArrowUp`&&t(E[(n-1+E.length)%E.length]??-1),e.key===`Home`&&t(E[0]??-1),e.key===`End`&&t(E[E.length-1]??-1)},t=e=>{x&&!x.contains(e.target)&&D()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),window.addEventListener(`resize`,D),window.addEventListener(`scroll`,D,!0),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t),window.removeEventListener(`resize`,D),window.removeEventListener(`scroll`,D,!0)}},[m,v,E,D,x]),(0,r.useLayoutEffect)(()=>{if(!m||!x)return;x.focus({preventScroll:!0});let{offsetWidth:e,offsetHeight:t}=x;if(e===0&&t===0)return;let n=window.innerWidth-e-p,r=window.innerHeight-t-p,i=Math.max(p,Math.min(g.x,n)),a=Math.max(p,Math.min(g.y,r));(i!==g.x||a!==g.y)&&_({x:i,y:a})},[m,x,g.x,g.y,p]);let P=e=>{e.onSelect?.(),D()};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`span`,{className:n.default.root,onContextMenu:A,onClick:j,onPointerDown:M,onPointerMove:N,onPointerUp:k,onPointerCancel:k,children:l}),m&&(0,i.jsx)(t.Portal,{children:(0,i.jsx)(`ul`,{ref:S,id:b,role:`menu`,"aria-orientation":`vertical`,tabIndex:-1,className:e.cn(n.default.menu,u),style:{top:g.y,left:g.x},children:s.map((t,r)=>o(t)?(0,i.jsx)(`li`,{role:`separator`,className:n.default.separator,"aria-hidden":!0},`separator-${r}`):(0,i.jsx)(`li`,{role:`none`,children:(0,i.jsx)(`button`,{ref:e=>{C.current[r]=e},type:`button`,role:`menuitem`,className:e.cn(n.default.item,t.danger&&n.default.danger,v===r&&n.default.active),disabled:t.disabled,onClick:()=>P(t),onMouseEnter:()=>y(r),children:t.label})},`item-${r}`))})})]})}function c(){typeof window>`u`||window.addEventListener(`click`,e=>{e.preventDefault(),e.stopPropagation()},{capture:!0,once:!0})}exports.ContextMenu=s;
 //# sourceMappingURL=ContextMenu.cjs.map

package/dist/components/ContextMenu/ContextMenu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/*\n @tempest-limits function-lines — the body positions the menu against the pointer,\n * flips it inside the viewport, and owns roving focus for the keyboard path — one\n * geometry computed from one anchor point.\n /\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n \| {\n label: ReactNode;\n onSelect?: () => void;\n disabled?: boolean;\n danger?: boolean;\n }\n \| { separator: true };\n\nexport interface ContextMenuProps {\n /* Menu entries — selectable items and separators. /\n items: ContextMenuItem[];\n /* Trigger area. Right-clicking anywhere within opens the menu at the cursor. /\n children: ReactNode;\n /* Extra class names forwarded to the menu element. /\n className?: string;\n}\n\ninterface Position {\n x: number;\n y: number;\n}\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n return \"separator\" in item && item.separator === true;\n}\n\n/\n Right-click context menu.\n \n - Opens at the cursor position on `onContextMenu` (default browser menu suppressed).\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking contexts.\n * - Closes on outside click, Escape, or item selection.\n * - Arrow Up/Down move focus across selectable items; Enter activates the focused item.\n \n @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({ items, children, className }: ContextMenuProps) {\n const [open, setOpen] = useState(false);\n const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const id = useId();\n const menuRef = useRef<HTMLUListElement>(null);\n const itemRefs = useRef<Array<HTMLButtonElement \| null>>([]);\n\n const selectableIndexes = items\n .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n .filter((i) => i !== -1);\n\n const close = useCallback((): void => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const handleContextMenu = (event: React.MouseEvent): void => {\n event.preventDefault();\n setPosition({ x: event.clientX, y: event.clientY });\n setActiveIndex(-1);\n setOpen(true);\n };\n\n useEffect(() => {\n if (!open) return;\n const onKey = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") {\n close();\n return;\n }\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n const current = selectableIndexes.indexOf(activeIndex);\n const next = selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1;\n setActiveIndex(next);\n itemRefs.current[next]?.focus();\n }\n if (event.key === \"ArrowUp\") {\n event.preventDefault();\n const current = selectableIndexes.indexOf(activeIndex);\n const prev =\n selectableIndexes[\n (current - 1 + selectableIndexes.length) % selectableIndexes.length\n ] ?? -1;\n setActiveIndex(prev);\n itemRefs.current[prev]?.focus();\n }\n };\n const onDown = (event: MouseEvent): void => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) close();\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"mousedown\", onDown);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"mousedown\", onDown);\n };\n }, [open, activeIndex, selectableIndexes, close]);\n\n const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n item.onSelect?.();\n close();\n };\n\n return (\n <>\n <span className={styles.root} onContextMenu={handleContextMenu}>\n {children}\n </span>\n {open && (\n <Portal>\n <ul\n ref={menuRef}\n id={id}\n role=\"menu\"\n className={cn(styles.menu, className)}\n style={{ top: position.y, left: position.x }}\n >\n {items.map((item, index) => {\n if (isSeparator(item)) {\n return (\n <li\n key={`separator-${index}`}\n role=\"separator\"\n className={styles.separator}\n aria-hidden\n />\n );\n }\n return (\n <li key={`item-${index}`} role=\"none\">\n <button\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"menuitem\"\n className={cn(\n styles.item,\n item.danger && styles.danger,\n activeIndex === index && styles.active,\n )}\n disabled={item.disabled}\n onClick={() => handleSelect(item)}\n onMouseEnter={() => setActiveIndex(index)}\n >\n {item.label}\n </button>\n </li>\n );\n })}\n </ul>\n </Portal>\n )}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"ContextMenu.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/*\n @tempest-limits file-lines function-lines — the body owns one anchor point and\n * everything that reads from it: the three ways a menu opens (right click, long\n * press, click), the clamp that keeps it inside the viewport, and roving focus\n * for the keyboard path. Splitting them would hand the same geometry to three\n * files.\n /\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n \| {\n label: ReactNode;\n onSelect?: () => void;\n disabled?: boolean;\n danger?: boolean;\n }\n \| { separator: true };\n\n/* How the menu is opened by a pointer. Touch always gets the long press. /\nexport type ContextMenuTrigger = \"contextmenu\" \| \"click\" \| \"both\";\n\nexport interface ContextMenuProps {\n /* Menu entries — selectable items and separators. /\n items: ContextMenuItem[];\n /* Trigger area. Right-clicking anywhere within opens the menu at the cursor. /\n children: ReactNode;\n /* Extra class names forwarded to the menu element. /\n className?: string;\n /\n Which pointer gesture opens the menu. Default `\"contextmenu\"`.\n \n `\"click\"` is the `⋮` button case, where a right click is the wrong gesture\n * on the desktop and impossible on touch. `\"both\"` keeps the right click and\n * adds the left one.\n /\n trigger?: ContextMenuTrigger;\n /\n Hold, in ms, that opens the menu from a coarse pointer. Default `500`.\n \n Set `0` to turn the long press off. It is on by default because touch has\n * no right click: measured in Chrome with touch emulation (Pixel 7 and\n * iPhone 13 profiles), a 900 ms hold fires `pointerdown`, `touchstart`,\n * `pointerup`, `touchend` and `click` — and no `contextmenu` at all. Every\n * action behind this menu was unreachable on a phone.\n /\n longPressDelay?: number;\n /\n Gap, in px, kept between the menu and the edge of the viewport. Default `8`.\n /\n viewportMargin?: number;\n}\n\ninterface Position {\n x: number;\n y: number;\n}\n\n/* Movement, in px, that reads as a scroll rather than a hold. /\nconst LONG_PRESS_MOVE_TOLERANCE = 10;\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n return \"separator\" in item && item.separator === true;\n}\n\n/\n Context menu — right click, long press, or click.\n \n - Opens at the pointer on `contextmenu`, and on a long press from touch or pen,\n * which is the gesture those pointers have instead of a right click. `trigger`\n * adds or replaces the mouse gesture; the long press is independent of it.\n * - Clamped inside the viewport after it mounts, so a menu opened near an edge\n * moves in rather than overflowing — measured before the clamp: a 180 px menu\n * opened at `x=235` in a 320 px window ran 95 px off screen, cutting the right\n * edge off every label.\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking\n * contexts.\n * - Closes on outside click, Escape, scroll, resize, or item selection.\n * - Arrow Up/Down move focus across selectable items and wrap; Home/End jump to\n * the ends; Enter activates the focused item. The menu itself takes focus when\n * it opens, so a screen reader announces it instead of staying on the trigger.\n \n @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n /\nexport function ContextMenu({\n items,\n children,\n className,\n trigger = \"contextmenu\",\n longPressDelay = 500,\n viewportMargin = 8,\n}: ContextMenuProps) {\n const [open, setOpen] = useState(false);\n const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const id = useId();\n const [menuNode, setMenuNode] = useState<HTMLUListElement \| null>(null);\n const itemRefs = useRef<Array<HTMLButtonElement \| null>>([]);\n const longPressTimer = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const longPressOrigin = useRef<Position \| null>(null);\n\n const selectableIndexes = items\n .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n .filter((i) => i !== -1);\n\n const close = useCallback((): void => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const openAt = useCallback((point: Position): void => {\n setPosition(point);\n setActiveIndex(-1);\n setOpen(true);\n }, []);\n\n const cancelLongPress = useCallback((): void => {\n if (longPressTimer.current !== null) {\n clearTimeout(longPressTimer.current);\n longPressTimer.current = null;\n }\n longPressOrigin.current = null;\n }, []);\n\n useEffect(() => cancelLongPress, [cancelLongPress]);\n\n const handleContextMenu = (event: React.MouseEvent): void => {\n if (trigger === \"click\") return;\n event.preventDefault();\n openAt({ x: event.clientX, y: event.clientY });\n };\n\n const handleClick = (event: React.MouseEvent): void => {\n if (trigger === \"contextmenu\") return;\n openAt({ x: event.clientX, y: event.clientY });\n };\n\n /\n Start the hold that stands in for a right click on a coarse pointer.\n \n A mouse is excluded: it has `contextmenu`, and holding the left button is\n * how a drag starts.\n /\n const handlePointerDown = (event: ReactPointerEvent): void => {\n if (longPressDelay <= 0 \|\| event.pointerType === \"mouse\") return;\n const point = { x: event.clientX, y: event.clientY };\n longPressOrigin.current = point;\n cancelLongPress();\n longPressOrigin.current = point;\n longPressTimer.current = setTimeout(() => {\n longPressTimer.current = null;\n longPressOrigin.current = null;\n suppressNextClick();\n openAt(point);\n }, longPressDelay);\n };\n\n /\n Cancel the hold once the finger travels — otherwise every scroll that\n * starts on the trigger opens a menu, which is the difference between a\n * usable long press and an infuriating one.\n /\n const handlePointerMove = (event: ReactPointerEvent): void => {\n const origin = longPressOrigin.current;\n if (!origin \|\| longPressTimer.current === null) return;\n if (\n Math.hypot(event.clientX - origin.x, event.clientY - origin.y) >\n LONG_PRESS_MOVE_TOLERANCE\n ) {\n cancelLongPress();\n }\n };\n\n useEffect(() => {\n if (!open) return;\n const onKey = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") {\n close();\n return;\n }\n const move = (next: number): void => {\n event.preventDefault();\n setActiveIndex(next);\n itemRefs.current[next]?.focus();\n };\n if (selectableIndexes.length === 0) return;\n const current = selectableIndexes.indexOf(activeIndex);\n if (event.key === \"ArrowDown\") {\n move(selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1);\n }\n if (event.key === \"ArrowUp\") {\n move(\n selectableIndexes[\n (current - 1 + selectableIndexes.length) % selectableIndexes.length\n ] ?? -1,\n );\n }\n if (event.key === \"Home\") {\n move(selectableIndexes[0] ?? -1);\n }\n if (event.key === \"End\") {\n move(selectableIndexes[selectableIndexes.length - 1] ?? -1);\n }\n };\n const onDown = (event: MouseEvent): void => {\n if (menuNode && !menuNode.contains(event.target as Node)) close();\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"mousedown\", onDown);\n window.addEventListener(\"resize\", close);\n window.addEventListener(\"scroll\", close, true);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"mousedown\", onDown);\n window.removeEventListener(\"resize\", close);\n window.removeEventListener(\"scroll\", close, true);\n };\n }, [open, activeIndex, selectableIndexes, close, menuNode]);\n\n /\n Pull the menu inside the viewport, and take focus.\n \n Keyed off the node rather than off `open`, because {@link Portal} renders\n * `null` on its first pass and mounts on an effect — an effect that reads a\n * ref when `open` flips runs while the menu does not exist yet, measures\n * nothing and focuses nothing. A callback ref in state is what makes this\n * run on the render that has the element.\n \n `useLayoutEffect` runs before paint, so the menu is never painted at the\n * overflowing position first.\n \n The size comes from `offsetWidth`/`offsetHeight` rather than from\n * `getBoundingClientRect`, which reports the transformed box: the menu\n * enters at `scale(0.96)`, so the rect is 4% small and the clamp lets the\n * grown menu back over the edge. Measured in Chrome at 320 px wide, a 180 px\n * menu came back at `right: 316` against a margin that asked for 312.\n /\n useLayoutEffect(() => {\n if (!open \|\| !menuNode) return;\n menuNode.focus({ preventScroll: true });\n const { offsetWidth, offsetHeight } = menuNode;\n if (offsetWidth === 0 && offsetHeight === 0) return;\n const maxLeft = window.innerWidth - offsetWidth - viewportMargin;\n const maxTop = window.innerHeight - offsetHeight - viewportMargin;\n const left = Math.max(viewportMargin, Math.min(position.x, maxLeft));\n const top = Math.max(viewportMargin, Math.min(position.y, maxTop));\n if (left !== position.x \|\| top !== position.y) setPosition({ x: left, y: top });\n }, [open, menuNode, position.x, position.y, viewportMargin]);\n\n const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n item.onSelect?.();\n close();\n };\n\n return (\n <>\n <span\n className={styles.root}\n onContextMenu={handleContextMenu}\n onClick={handleClick}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={cancelLongPress}\n onPointerCancel={cancelLongPress}\n >\n {children}\n </span>\n {open && (\n <Portal>\n <ul\n ref={setMenuNode}\n id={id}\n role=\"menu\"\n aria-orientation=\"vertical\"\n tabIndex={-1}\n className={cn(styles.menu, className)}\n style={{ top: position.y, left: position.x }}\n >\n {items.map((item, index) => {\n if (isSeparator(item)) {\n return (\n <li\n key={`separator-${index}`}\n role=\"separator\"\n className={styles.separator}\n aria-hidden\n />\n );\n }\n return (\n <li key={`item-${index}`} role=\"none\">\n <button\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"menuitem\"\n className={cn(\n styles.item,\n item.danger && styles.danger,\n activeIndex === index && styles.active,\n )}\n disabled={item.disabled}\n onClick={() => handleSelect(item)}\n onMouseEnter={() => setActiveIndex(index)}\n >\n {item.label}\n </button>\n </li>\n );\n })}\n </ul>\n </Portal>\n )}\n </>\n );\n}\n\n/\n Swallow the click a finger leaves behind after a long press.\n \n The hold fires while the finger is still down, so the browser goes on to\n * deliver `pointerup` and then `click` to whatever is under it — measured, that\n * is the same element the menu was just opened from. Without this, opening the\n * menu on a chat bubble also opens the bubble.\n \n Capture phase and `once`, so the listener never outlives the gesture that\n * installed it, and a later genuine click is untouched.\n */\nfunction suppressNextClick(): void {\n if (typeof window === \"undefined\") return;\n window.addEventListener(\n \"click\",\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n },\n { capture: true, once: true },\n );\n}\n"],"mappings":"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"}

package/dist/components/ContextMenu/ContextMenu.js CHANGED Viewed

@@ -1,91 +1,143 @@
 import { cn as e } from "../../utils/cn.js";
 import { Portal as t } from "../Portal/Portal.js";
 import n from "./ContextMenu.module.js";
-import { useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as r, useEffect as i, useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/ContextMenu/ContextMenu.tsx
-function d(e) {
+var f = 10;
+function p(e) {
 	return "separator" in e && e.separator === !0;
 }
-function f({ items: f, children: p, className: m }) {
-	let [h, g] = s(!1), [_, v] = s({
+function m({ items: m, children: g, className: _, trigger: v = "contextmenu", longPressDelay: y = 500, viewportMargin: b = 8 }) {
+	let [x, S] = c(!1), [C, w] = c({
 		x: 0,
 		y: 0
-	}), [y, b] = s(-1), x = a(), S = o(null), C = o([]), w = f.map((e, t) => !d(e) && !e.disabled ? t : -1).filter((e) => e !== -1), T = r(() => {
-		g(!1), b(-1);
-	}, []), E = (e) => {
-		e.preventDefault(), v({
+	}), [T, E] = c(-1), D = a(), [O, k] = c(null), A = s([]), j = s(null), M = s(null), N = m.map((e, t) => !p(e) && !e.disabled ? t : -1).filter((e) => e !== -1), P = r(() => {
+		S(!1), E(-1);
+	}, []), F = r((e) => {
+		w(e), E(-1), S(!0);
+	}, []), I = r(() => {
+		j.current !== null && (clearTimeout(j.current), j.current = null), M.current = null;
+	}, []);
+	i(() => I, [I]);
+	let L = (e) => {
+		v !== "click" && (e.preventDefault(), F({
 			x: e.clientX,
 			y: e.clientY
-		}), b(-1), g(!0);
+		}));
+	}, R = (e) => {
+		v !== "contextmenu" && F({
+			x: e.clientX,
+			y: e.clientY
+		});
+	}, z = (e) => {
+		if (y <= 0 || e.pointerType === "mouse") return;
+		let t = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		M.current = t, I(), M.current = t, j.current = setTimeout(() => {
+			j.current = null, M.current = null, h(), F(t);
+		}, y);
+	}, B = (e) => {
+		let t = M.current;
+		t && j.current !== null && Math.hypot(e.clientX - t.x, e.clientY - t.y) > f && I();
 	};
 	i(() => {
-		if (!h) return;
+		if (!x) return;
 		let e = (e) => {
 			if (e.key === "Escape") {
-				T();
+				P();
 				return;
 			}
-			if (e.key === "ArrowDown") {
-				e.preventDefault();
-				let t = w.indexOf(y), n = w[(t + 1) % w.length] ?? -1;
-				b(n), C.current[n]?.focus();
-			}
-			if (e.key === "ArrowUp") {
-				e.preventDefault();
-				let t = w.indexOf(y), n = w[(t - 1 + w.length) % w.length] ?? -1;
-				b(n), C.current[n]?.focus();
-			}
+			let t = (t) => {
+				e.preventDefault(), E(t), A.current[t]?.focus();
+			};
+			if (N.length === 0) return;
+			let n = N.indexOf(T);
+			e.key === "ArrowDown" && t(N[(n + 1) % N.length] ?? -1), e.key === "ArrowUp" && t(N[(n - 1 + N.length) % N.length] ?? -1), e.key === "Home" && t(N[0] ?? -1), e.key === "End" && t(N[N.length - 1] ?? -1);
 		}, t = (e) => {
-			S.current && !S.current.contains(e.target) && T();
+			O && !O.contains(e.target) && P();
 		};
-		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), () => {
-			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t);
+		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), window.addEventListener("resize", P), window.addEventListener("scroll", P, !0), () => {
+			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t), window.removeEventListener("resize", P), window.removeEventListener("scroll", P, !0);
 		};
 	}, [
-		h,
-		y,
-		w,
-		T
+		x,
+		T,
+		N,
+		P,
+		O
+	]), o(() => {
+		if (!x || !O) return;
+		O.focus({ preventScroll: !0 });
+		let { offsetWidth: e, offsetHeight: t } = O;
+		if (e === 0 && t === 0) return;
+		let n = window.innerWidth - e - b, r = window.innerHeight - t - b, i = Math.max(b, Math.min(C.x, n)), a = Math.max(b, Math.min(C.y, r));
+		(i !== C.x || a !== C.y) && w({
+			x: i,
+			y: a
+		});
+	}, [
+		x,
+		O,
+		C.x,
+		C.y,
+		b
 	]);
-	let D = (e) => {
-		e.onSelect?.(), T();
+	let V = (e) => {
+		e.onSelect?.(), P();
 	};
-	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
 		className: n.root,
-		onContextMenu: E,
-		children: p
-	}), h && /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l("ul", {
-		ref: S,
-		id: x,
+		onContextMenu: L,
+		onClick: R,
+		onPointerDown: z,
+		onPointerMove: B,
+		onPointerUp: I,
+		onPointerCancel: I,
+		children: g
+	}), x && /* @__PURE__ */ u(t, { children: /* @__PURE__ */ u("ul", {
+		ref: k,
+		id: D,
 		role: "menu",
-		className: e(n.menu, m),
+		"aria-orientation": "vertical",
+		tabIndex: -1,
+		className: e(n.menu, _),
 		style: {
-			top: _.y,
-			left: _.x
+			top: C.y,
+			left: C.x
 		},
-		children: f.map((t, r) => d(t) ? /* @__PURE__ */ l("li", {
+		children: m.map((t, r) => p(t) ? /* @__PURE__ */ u("li", {
 			role: "separator",
 			className: n.separator,
 			"aria-hidden": !0
-		}, `separator-${r}`) : /* @__PURE__ */ l("li", {
+		}, `separator-${r}`) : /* @__PURE__ */ u("li", {
 			role: "none",
-			children: /* @__PURE__ */ l("button", {
+			children: /* @__PURE__ */ u("button", {
 				ref: (e) => {
-					C.current[r] = e;
+					A.current[r] = e;
 				},
 				type: "button",
 				role: "menuitem",
-				className: e(n.item, t.danger && n.danger, y === r && n.active),
+				className: e(n.item, t.danger && n.danger, T === r && n.active),
 				disabled: t.disabled,
-				onClick: () => D(t),
-				onMouseEnter: () => b(r),
+				onClick: () => V(t),
+				onMouseEnter: () => E(r),
 				children: t.label
 			})
 		}, `item-${r}`))
 	}) })] });
 }
+function h() {
+	typeof window > "u" || window.addEventListener("click", (e) => {
+		e.preventDefault(), e.stopPropagation();
+	}, {
+		capture: !0,
+		once: !0
+	});
+}
 //#endregion
-export { f as ContextMenu };
+export { m as ContextMenu };
 //# sourceMappingURL=ContextMenu.js.map

package/dist/components/ContextMenu/ContextMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/*\n @tempest-limits function-lines — the body positions the menu against the pointer,\n * flips it inside the viewport, and owns roving focus for the keyboard path — one\n * geometry computed from one anchor point.\n /\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n \| {\n label: ReactNode;\n onSelect?: () => void;\n disabled?: boolean;\n danger?: boolean;\n }\n \| { separator: true };\n\nexport interface ContextMenuProps {\n /* Menu entries — selectable items and separators. /\n items: ContextMenuItem[];\n /* Trigger area. Right-clicking anywhere within opens the menu at the cursor. /\n children: ReactNode;\n /* Extra class names forwarded to the menu element. /\n className?: string;\n}\n\ninterface Position {\n x: number;\n y: number;\n}\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n return \"separator\" in item && item.separator === true;\n}\n\n/\n Right-click context menu.\n \n - Opens at the cursor position on `onContextMenu` (default browser menu suppressed).\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking contexts.\n * - Closes on outside click, Escape, or item selection.\n * - Arrow Up/Down move focus across selectable items; Enter activates the focused item.\n \n @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({ items, children, className }: ContextMenuProps) {\n const [open, setOpen] = useState(false);\n const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const id = useId();\n const menuRef = useRef<HTMLUListElement>(null);\n const itemRefs = useRef<Array<HTMLButtonElement \| null>>([]);\n\n const selectableIndexes = items\n .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n .filter((i) => i !== -1);\n\n const close = useCallback((): void => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const handleContextMenu = (event: React.MouseEvent): void => {\n event.preventDefault();\n setPosition({ x: event.clientX, y: event.clientY });\n setActiveIndex(-1);\n setOpen(true);\n };\n\n useEffect(() => {\n if (!open) return;\n const onKey = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") {\n close();\n return;\n }\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n const current = selectableIndexes.indexOf(activeIndex);\n const next = selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1;\n setActiveIndex(next);\n itemRefs.current[next]?.focus();\n }\n if (event.key === \"ArrowUp\") {\n event.preventDefault();\n const current = selectableIndexes.indexOf(activeIndex);\n const prev =\n selectableIndexes[\n (current - 1 + selectableIndexes.length) % selectableIndexes.length\n ] ?? -1;\n setActiveIndex(prev);\n itemRefs.current[prev]?.focus();\n }\n };\n const onDown = (event: MouseEvent): void => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) close();\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"mousedown\", onDown);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"mousedown\", onDown);\n };\n }, [open, activeIndex, selectableIndexes, close]);\n\n const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n item.onSelect?.();\n close();\n };\n\n return (\n <>\n <span className={styles.root} onContextMenu={handleContextMenu}>\n {children}\n </span>\n {open && (\n <Portal>\n <ul\n ref={menuRef}\n id={id}\n role=\"menu\"\n className={cn(styles.menu, className)}\n style={{ top: position.y, left: position.x }}\n >\n {items.map((item, index) => {\n if (isSeparator(item)) {\n return (\n <li\n key={`separator-${index}`}\n role=\"separator\"\n className={styles.separator}\n aria-hidden\n />\n );\n }\n return (\n <li key={`item-${index}`} role=\"none\">\n <button\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"menuitem\"\n className={cn(\n styles.item,\n item.danger && styles.danger,\n activeIndex === index && styles.active,\n )}\n disabled={item.disabled}\n onClick={() => handleSelect(item)}\n onMouseEnter={() => setActiveIndex(index)}\n >\n {item.label}\n </button>\n </li>\n );\n })}\n </ul>\n </Portal>\n )}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/*\n @tempest-limits file-lines function-lines — the body owns one anchor point and\n * everything that reads from it: the three ways a menu opens (right click, long\n * press, click), the clamp that keeps it inside the viewport, and roving focus\n * for the keyboard path. Splitting them would hand the same geometry to three\n * files.\n /\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n \| {\n label: ReactNode;\n onSelect?: () => void;\n disabled?: boolean;\n danger?: boolean;\n }\n \| { separator: true };\n\n/* How the menu is opened by a pointer. Touch always gets the long press. /\nexport type ContextMenuTrigger = \"contextmenu\" \| \"click\" \| \"both\";\n\nexport interface ContextMenuProps {\n /* Menu entries — selectable items and separators. /\n items: ContextMenuItem[];\n /* Trigger area. Right-clicking anywhere within opens the menu at the cursor. /\n children: ReactNode;\n /* Extra class names forwarded to the menu element. /\n className?: string;\n /\n Which pointer gesture opens the menu. Default `\"contextmenu\"`.\n \n `\"click\"` is the `⋮` button case, where a right click is the wrong gesture\n * on the desktop and impossible on touch. `\"both\"` keeps the right click and\n * adds the left one.\n /\n trigger?: ContextMenuTrigger;\n /\n Hold, in ms, that opens the menu from a coarse pointer. Default `500`.\n \n Set `0` to turn the long press off. It is on by default because touch has\n * no right click: measured in Chrome with touch emulation (Pixel 7 and\n * iPhone 13 profiles), a 900 ms hold fires `pointerdown`, `touchstart`,\n * `pointerup`, `touchend` and `click` — and no `contextmenu` at all. Every\n * action behind this menu was unreachable on a phone.\n /\n longPressDelay?: number;\n /\n Gap, in px, kept between the menu and the edge of the viewport. Default `8`.\n /\n viewportMargin?: number;\n}\n\ninterface Position {\n x: number;\n y: number;\n}\n\n/* Movement, in px, that reads as a scroll rather than a hold. /\nconst LONG_PRESS_MOVE_TOLERANCE = 10;\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n return \"separator\" in item && item.separator === true;\n}\n\n/\n Context menu — right click, long press, or click.\n \n - Opens at the pointer on `contextmenu`, and on a long press from touch or pen,\n * which is the gesture those pointers have instead of a right click. `trigger`\n * adds or replaces the mouse gesture; the long press is independent of it.\n * - Clamped inside the viewport after it mounts, so a menu opened near an edge\n * moves in rather than overflowing — measured before the clamp: a 180 px menu\n * opened at `x=235` in a 320 px window ran 95 px off screen, cutting the right\n * edge off every label.\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking\n * contexts.\n * - Closes on outside click, Escape, scroll, resize, or item selection.\n * - Arrow Up/Down move focus across selectable items and wrap; Home/End jump to\n * the ends; Enter activates the focused item. The menu itself takes focus when\n * it opens, so a screen reader announces it instead of staying on the trigger.\n \n @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n /\nexport function ContextMenu({\n items,\n children,\n className,\n trigger = \"contextmenu\",\n longPressDelay = 500,\n viewportMargin = 8,\n}: ContextMenuProps) {\n const [open, setOpen] = useState(false);\n const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const id = useId();\n const [menuNode, setMenuNode] = useState<HTMLUListElement \| null>(null);\n const itemRefs = useRef<Array<HTMLButtonElement \| null>>([]);\n const longPressTimer = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const longPressOrigin = useRef<Position \| null>(null);\n\n const selectableIndexes = items\n .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n .filter((i) => i !== -1);\n\n const close = useCallback((): void => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const openAt = useCallback((point: Position): void => {\n setPosition(point);\n setActiveIndex(-1);\n setOpen(true);\n }, []);\n\n const cancelLongPress = useCallback((): void => {\n if (longPressTimer.current !== null) {\n clearTimeout(longPressTimer.current);\n longPressTimer.current = null;\n }\n longPressOrigin.current = null;\n }, []);\n\n useEffect(() => cancelLongPress, [cancelLongPress]);\n\n const handleContextMenu = (event: React.MouseEvent): void => {\n if (trigger === \"click\") return;\n event.preventDefault();\n openAt({ x: event.clientX, y: event.clientY });\n };\n\n const handleClick = (event: React.MouseEvent): void => {\n if (trigger === \"contextmenu\") return;\n openAt({ x: event.clientX, y: event.clientY });\n };\n\n /\n Start the hold that stands in for a right click on a coarse pointer.\n \n A mouse is excluded: it has `contextmenu`, and holding the left button is\n * how a drag starts.\n /\n const handlePointerDown = (event: ReactPointerEvent): void => {\n if (longPressDelay <= 0 \|\| event.pointerType === \"mouse\") return;\n const point = { x: event.clientX, y: event.clientY };\n longPressOrigin.current = point;\n cancelLongPress();\n longPressOrigin.current = point;\n longPressTimer.current = setTimeout(() => {\n longPressTimer.current = null;\n longPressOrigin.current = null;\n suppressNextClick();\n openAt(point);\n }, longPressDelay);\n };\n\n /\n Cancel the hold once the finger travels — otherwise every scroll that\n * starts on the trigger opens a menu, which is the difference between a\n * usable long press and an infuriating one.\n /\n const handlePointerMove = (event: ReactPointerEvent): void => {\n const origin = longPressOrigin.current;\n if (!origin \|\| longPressTimer.current === null) return;\n if (\n Math.hypot(event.clientX - origin.x, event.clientY - origin.y) >\n LONG_PRESS_MOVE_TOLERANCE\n ) {\n cancelLongPress();\n }\n };\n\n useEffect(() => {\n if (!open) return;\n const onKey = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") {\n close();\n return;\n }\n const move = (next: number): void => {\n event.preventDefault();\n setActiveIndex(next);\n itemRefs.current[next]?.focus();\n };\n if (selectableIndexes.length === 0) return;\n const current = selectableIndexes.indexOf(activeIndex);\n if (event.key === \"ArrowDown\") {\n move(selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1);\n }\n if (event.key === \"ArrowUp\") {\n move(\n selectableIndexes[\n (current - 1 + selectableIndexes.length) % selectableIndexes.length\n ] ?? -1,\n );\n }\n if (event.key === \"Home\") {\n move(selectableIndexes[0] ?? -1);\n }\n if (event.key === \"End\") {\n move(selectableIndexes[selectableIndexes.length - 1] ?? -1);\n }\n };\n const onDown = (event: MouseEvent): void => {\n if (menuNode && !menuNode.contains(event.target as Node)) close();\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"mousedown\", onDown);\n window.addEventListener(\"resize\", close);\n window.addEventListener(\"scroll\", close, true);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"mousedown\", onDown);\n window.removeEventListener(\"resize\", close);\n window.removeEventListener(\"scroll\", close, true);\n };\n }, [open, activeIndex, selectableIndexes, close, menuNode]);\n\n /\n Pull the menu inside the viewport, and take focus.\n \n Keyed off the node rather than off `open`, because {@link Portal} renders\n * `null` on its first pass and mounts on an effect — an effect that reads a\n * ref when `open` flips runs while the menu does not exist yet, measures\n * nothing and focuses nothing. A callback ref in state is what makes this\n * run on the render that has the element.\n \n `useLayoutEffect` runs before paint, so the menu is never painted at the\n * overflowing position first.\n \n The size comes from `offsetWidth`/`offsetHeight` rather than from\n * `getBoundingClientRect`, which reports the transformed box: the menu\n * enters at `scale(0.96)`, so the rect is 4% small and the clamp lets the\n * grown menu back over the edge. Measured in Chrome at 320 px wide, a 180 px\n * menu came back at `right: 316` against a margin that asked for 312.\n /\n useLayoutEffect(() => {\n if (!open \|\| !menuNode) return;\n menuNode.focus({ preventScroll: true });\n const { offsetWidth, offsetHeight } = menuNode;\n if (offsetWidth === 0 && offsetHeight === 0) return;\n const maxLeft = window.innerWidth - offsetWidth - viewportMargin;\n const maxTop = window.innerHeight - offsetHeight - viewportMargin;\n const left = Math.max(viewportMargin, Math.min(position.x, maxLeft));\n const top = Math.max(viewportMargin, Math.min(position.y, maxTop));\n if (left !== position.x \|\| top !== position.y) setPosition({ x: left, y: top });\n }, [open, menuNode, position.x, position.y, viewportMargin]);\n\n const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n item.onSelect?.();\n close();\n };\n\n return (\n <>\n <span\n className={styles.root}\n onContextMenu={handleContextMenu}\n onClick={handleClick}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={cancelLongPress}\n onPointerCancel={cancelLongPress}\n >\n {children}\n </span>\n {open && (\n <Portal>\n <ul\n ref={setMenuNode}\n id={id}\n role=\"menu\"\n aria-orientation=\"vertical\"\n tabIndex={-1}\n className={cn(styles.menu, className)}\n style={{ top: position.y, left: position.x }}\n >\n {items.map((item, index) => {\n if (isSeparator(item)) {\n return (\n <li\n key={`separator-${index}`}\n role=\"separator\"\n className={styles.separator}\n aria-hidden\n />\n );\n }\n return (\n <li key={`item-${index}`} role=\"none\">\n <button\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n type=\"button\"\n role=\"menuitem\"\n className={cn(\n styles.item,\n item.danger && styles.danger,\n activeIndex === index && styles.active,\n )}\n disabled={item.disabled}\n onClick={() => handleSelect(item)}\n onMouseEnter={() => setActiveIndex(index)}\n >\n {item.label}\n </button>\n </li>\n );\n })}\n </ul>\n </Portal>\n )}\n </>\n );\n}\n\n/\n Swallow the click a finger leaves behind after a long press.\n \n The hold fires while the finger is still down, so the browser goes on to\n * deliver `pointerup` and then `click` to whatever is under it — measured, that\n * is the same element the menu was just opened from. Without this, opening the\n * menu on a chat bubble also opens the bubble.\n \n Capture phase and `once`, so the listener never outlives the gesture that\n * installed it, and a later genuine click is untouched.\n */\nfunction suppressNextClick(): void {\n if (typeof window === \"undefined\") return;\n window.addEventListener(\n \"click\",\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n },\n { capture: true, once: true },\n );\n}\n"],"mappings":"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"}

package/dist/components/ContextMenu/ContextMenu.module.cjs CHANGED Viewed

@@ -1,2 +1,3 @@
+require("../../styles/component/ContextMenu.css");
 var e=`tempest_root_OxRHj`,t=`tempest_menu_MDn4t`,n=`tempest_tempest-context-menu-in_fNuOl`,r=`tempest_item_PoiMY`,i=`tempest_active_ATcDu`,a=`tempest_danger_COgly`,o=`tempest_separator_omuCz`,s={root:e,menu:t,tempestContextMenuIn:n,item:r,active:i,danger:a,separator:o};exports.active=i,exports.danger=a,exports.default=s,exports.item=r,exports.menu=t,exports.root=e,exports.separator=o,exports.tempestContextMenuIn=n;
 //# sourceMappingURL=ContextMenu.module.cjs.map

package/dist/components/ContextMenu/ContextMenu.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.module.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.module.css"],"sourcesContent":[".root {\n display: contents;\n}\n\n.menu {\n position: fixed;\n z-index: var(--tempest-z-popover);\n min-width: 180px;\n max-width: 320px;\n background-color: var(--tempest-bg);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n box-shadow: var(--tempest-shadow-lg);\n padding: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-base);\n list-style: none;\n margin: 0;\n animation: tempest-context-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-2);\n width: 100%;\n padding: var(--tempest-space-2) var(--tempest-space-3);\n background: none;\n border: none;\n border-radius: var(--tempest-radius-sm);\n color: var(--tempest-text);\n font-family: inherit;\n font-size: inherit;\n line-height: var(--tempest-leading-snug);\n text-align: left;\n cursor: pointer;\n transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .item:hover:not(:disabled) {\n background-color: var(--tempest-surface);\n }\n}\n\n.item:focus,\n.item.active {\n outline: none;\n background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.item.danger {\n color: var(--tempest-danger);\n}\n\n.separator {\n height: 1px;\n background-color: var(--tempest-border);\n margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-context-menu-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .menu {\n animation: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ContextMenu.module.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.module.css"],"sourcesContent":[".root {\n display: contents;\n}\n\n/\n A hold on a coarse pointer is this component's right click, and the platform\n * has its own ideas about what a hold means: iOS raises the callout and both\n * platforms start a text selection. Scoped to `pointer: coarse` so a mouse user\n * keeps ordinary selection over the same content.\n /\n@media (pointer: coarse) {\n .root {\n -webkit-touch-callout: none;\n user-select: none;\n }\n}\n\n/\n * The menu takes focus when it opens so a screen reader announces it, and that\n * focus gets no ring of its own: measured in Chrome, focusing it from a long\n * press still matches `:focus-visible`, which drew a heavy ring around the whole\n * menu after every touch. The indicator that matters is on the focused item,\n * which is where the arrow keys move next.\n */\n.menu:focus {\n outline: none;\n}\n\n.menu {\n position: fixed;\n z-index: var(--tempest-z-popover);\n min-width: 180px;\n max-width: 320px;\n background-color: var(--tempest-bg);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n box-shadow: var(--tempest-shadow-lg);\n padding: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-base);\n list-style: none;\n margin: 0;\n animation: tempest-context-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-2);\n width: 100%;\n padding: var(--tempest-space-2) var(--tempest-space-3);\n background: none;\n border: none;\n border-radius: var(--tempest-radius-sm);\n color: var(--tempest-text);\n font-family: inherit;\n font-size: inherit;\n line-height: var(--tempest-leading-snug);\n text-align: left;\n cursor: pointer;\n transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .item:hover:not(:disabled) {\n background-color: var(--tempest-surface);\n }\n}\n\n.item:focus,\n.item.active {\n outline: none;\n background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.item.danger {\n color: var(--tempest-danger);\n}\n\n.separator {\n height: 1px;\n background-color: var(--tempest-border);\n margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-context-menu-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .menu {\n animation: none;\n }\n}\n"],"mappings":";"}

package/dist/components/ContextMenu/ContextMenu.module.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import "../../styles/component/ContextMenu.css";
 //#region src/components/ContextMenu/ContextMenu.module.css
 var e = "tempest_root_OxRHj", t = "tempest_menu_MDn4t", n = "tempest_tempest-context-menu-in_fNuOl", r = "tempest_item_PoiMY", i = "tempest_active_ATcDu", a = "tempest_danger_COgly", o = "tempest_separator_omuCz", s = {
 	root: e,

package/dist/components/ContextMenu/ContextMenu.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.module.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.module.css"],"sourcesContent":[".root {\n display: contents;\n}\n\n.menu {\n position: fixed;\n z-index: var(--tempest-z-popover);\n min-width: 180px;\n max-width: 320px;\n background-color: var(--tempest-bg);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n box-shadow: var(--tempest-shadow-lg);\n padding: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-base);\n list-style: none;\n margin: 0;\n animation: tempest-context-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-2);\n width: 100%;\n padding: var(--tempest-space-2) var(--tempest-space-3);\n background: none;\n border: none;\n border-radius: var(--tempest-radius-sm);\n color: var(--tempest-text);\n font-family: inherit;\n font-size: inherit;\n line-height: var(--tempest-leading-snug);\n text-align: left;\n cursor: pointer;\n transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .item:hover:not(:disabled) {\n background-color: var(--tempest-surface);\n }\n}\n\n.item:focus,\n.item.active {\n outline: none;\n background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.item.danger {\n color: var(--tempest-danger);\n}\n\n.separator {\n height: 1px;\n background-color: var(--tempest-border);\n margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-context-menu-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .menu {\n animation: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ContextMenu.module.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.module.css"],"sourcesContent":[".root {\n display: contents;\n}\n\n/\n A hold on a coarse pointer is this component's right click, and the platform\n * has its own ideas about what a hold means: iOS raises the callout and both\n * platforms start a text selection. Scoped to `pointer: coarse` so a mouse user\n * keeps ordinary selection over the same content.\n /\n@media (pointer: coarse) {\n .root {\n -webkit-touch-callout: none;\n user-select: none;\n }\n}\n\n/\n * The menu takes focus when it opens so a screen reader announces it, and that\n * focus gets no ring of its own: measured in Chrome, focusing it from a long\n * press still matches `:focus-visible`, which drew a heavy ring around the whole\n * menu after every touch. The indicator that matters is on the focused item,\n * which is where the arrow keys move next.\n */\n.menu:focus {\n outline: none;\n}\n\n.menu {\n position: fixed;\n z-index: var(--tempest-z-popover);\n min-width: 180px;\n max-width: 320px;\n background-color: var(--tempest-bg);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n box-shadow: var(--tempest-shadow-lg);\n padding: var(--tempest-space-1);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-base);\n list-style: none;\n margin: 0;\n animation: tempest-context-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n display: flex;\n align-items: center;\n gap: var(--tempest-space-2);\n width: 100%;\n padding: var(--tempest-space-2) var(--tempest-space-3);\n background: none;\n border: none;\n border-radius: var(--tempest-radius-sm);\n color: var(--tempest-text);\n font-family: inherit;\n font-size: inherit;\n line-height: var(--tempest-leading-snug);\n text-align: left;\n cursor: pointer;\n transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .item:hover:not(:disabled) {\n background-color: var(--tempest-surface);\n }\n}\n\n.item:focus,\n.item.active {\n outline: none;\n background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.item.danger {\n color: var(--tempest-danger);\n}\n\n.separator {\n height: 1px;\n background-color: var(--tempest-border);\n margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-context-menu-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .menu {\n animation: none;\n }\n}\n"],"mappings":";"}

package/dist/components/CopyButton/CopyButton.module.cjs CHANGED Viewed

@@ -1,2 +1,3 @@
+require("../../styles/component/CopyButton.css");
 var e=`tempest_button_58f9i`,t=`tempest_copied_WkLgR`,n={button:e,copied:t};exports.button=e,exports.copied=t,exports.default=n;
 //# sourceMappingURL=CopyButton.module.cjs.map

package/dist/components/CopyButton/CopyButton.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyButton.module.cjs","names":[],"sources":["../../../src/components/CopyButton/CopyButton.module.css"],"sourcesContent":[".button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--tempest-space-1);\n padding: var(--tempest-space-1) var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-sm);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n line-height: var(--tempest-leading-snug);\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.button:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.copied {\n color: var(--tempest-primary-foreground, var(--tempest-text-on-primary));\n background-color: var(--tempest-primary);\n border-color: var(--tempest-primary);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CopyButton.module.cjs","names":[],"sources":["../../../src/components/CopyButton/CopyButton.module.css"],"sourcesContent":[".button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--tempest-space-1);\n padding: var(--tempest-space-1) var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-sm);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n line-height: var(--tempest-leading-snug);\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.button:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.copied {\n color: var(--tempest-primary-foreground, var(--tempest-text-on-primary));\n background-color: var(--tempest-primary);\n border-color: var(--tempest-primary);\n}\n"],"mappings":";"}

package/dist/components/CopyButton/CopyButton.module.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import "../../styles/component/CopyButton.css";
 //#region src/components/CopyButton/CopyButton.module.css
 var e = "tempest_button_58f9i", t = "tempest_copied_WkLgR", n = {
 	button: e,

package/dist/components/CopyButton/CopyButton.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyButton.module.js","names":[],"sources":["../../../src/components/CopyButton/CopyButton.module.css"],"sourcesContent":[".button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--tempest-space-1);\n padding: var(--tempest-space-1) var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-sm);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n line-height: var(--tempest-leading-snug);\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.button:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.copied {\n color: var(--tempest-primary-foreground, var(--tempest-text-on-primary));\n background-color: var(--tempest-primary);\n border-color: var(--tempest-primary);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CopyButton.module.js","names":[],"sources":["../../../src/components/CopyButton/CopyButton.module.css"],"sourcesContent":[".button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--tempest-space-1);\n padding: var(--tempest-space-1) var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-sm);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n line-height: var(--tempest-leading-snug);\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.button:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.copied {\n color: var(--tempest-primary-foreground, var(--tempest-text-on-primary));\n background-color: var(--tempest-primary);\n border-color: var(--tempest-primary);\n}\n"],"mappings":";"}

package/dist/components/DataList/DataList.module.cjs CHANGED Viewed

@@ -1,2 +1,3 @@
+require("../../styles/component/DataList.css");
 var e=`tempest_list_bAP4Q`,t=`tempest_item_oRy5T`,n={list:e,item:t};exports.default=n,exports.item=t,exports.list=e;
 //# sourceMappingURL=DataList.module.cjs.map

package/dist/components/DataList/DataList.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataList.module.cjs","names":[],"sources":["../../../src/components/DataList/DataList.module.css"],"sourcesContent":[".list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.item {\n margin: 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DataList.module.cjs","names":[],"sources":["../../../src/components/DataList/DataList.module.css"],"sourcesContent":[".list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.item {\n margin: 0;\n}\n"],"mappings":";"}

package/dist/components/DataList/DataList.module.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import "../../styles/component/DataList.css";
 //#region src/components/DataList/DataList.module.css
 var e = "tempest_list_bAP4Q", t = "tempest_item_oRy5T", n = {
 	list: e,

package/dist/components/DataList/DataList.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataList.module.js","names":[],"sources":["../../../src/components/DataList/DataList.module.css"],"sourcesContent":[".list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.item {\n margin: 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DataList.module.js","names":[],"sources":["../../../src/components/DataList/DataList.module.css"],"sourcesContent":[".list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.item {\n margin: 0;\n}\n"],"mappings":";"}

package/dist/components/DataTable/DataTable.module.cjs CHANGED Viewed

@@ -1,2 +1,3 @@
+require("../../styles/component/DataTable.css");
 var e=`tempest_wrapper_iB6ka`,t=`tempest_search_2y-yM`,n=`tempest_pending_AzPOe`,r=`tempest_loading_o14rI`,i=`tempest_loadingRow_PsjGm`,a=`tempest_sortButton_9p6w4`,o=`tempest_sortIndicator_bZMlH`,s=`tempest_cellWrap_8-ugE`,c=`tempest_cellButton_BgVe-`,l=`tempest_cellButtonInvalid_6MDdd`,u=`tempest_cellEditor_LfeJW`,d=`tempest_cellEditorInvalid_J7e2W`,f=`tempest_cellError_CRf3e`,p={wrapper:e,search:t,pending:n,loading:r,loadingRow:i,sortButton:a,sortIndicator:o,cellWrap:s,cellButton:c,cellButtonInvalid:l,cellEditor:u,cellEditorInvalid:d,cellError:f};exports.cellButton=c,exports.cellButtonInvalid=l,exports.cellEditor=u,exports.cellEditorInvalid=d,exports.cellError=f,exports.cellWrap=s,exports.default=p,exports.loading=r,exports.loadingRow=i,exports.pending=n,exports.search=t,exports.sortButton=a,exports.sortIndicator=o,exports.wrapper=e;
 //# sourceMappingURL=DataTable.module.cjs.map

package/dist/components/DataTable/DataTable.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.module.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n max-width: 20rem;\n}\n\n/\n A page swap keeps the rows it already has, dimmed. Replacing them with a\n * spinner would collapse the table to nothing and bounce whatever sits below it\n * back up, which is the jump the user's cursor was resting on.\n /\n.pending {\n opacity: 0.6;\n transition: opacity var(--tempest-duration-fast, 120ms) ease;\n pointer-events: none;\n}\n\n.loading {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n padding: var(--tempest-space-3, 0.75rem) 0;\n}\n\n.loadingRow {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--tempest-space-4, 1rem);\n align-items: center;\n}\n\n.sortButton {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0;\n border: none;\n background: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n user-select: none;\n}\n\n.sortIndicator {\n font-size: 0.75em;\n opacity: 0.7;\n}\n\n/ ── Inline editing ─────────────────────────────────────────────────────────── /\n\n.cellWrap {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1, 0.25rem);\n align-items: stretch;\n width: 100%;\n}\n\n/\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n /\n.cellButton {\n position: relative;\n display: block;\n width: 100%;\n margin: calc(-1 var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px dashed transparent;\n border-bottom-color: var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background: none;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n}\n\n.cellButton:hover {\n border-color: var(--tempest-border-strong);\n background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n /\n@media (pointer: coarse) {\n .cellButton::after {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 var(--tempest-space-3, 0.75rem));\n inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n }\n}\n\n.cellButton[aria-busy=\"true\"] {\n opacity: 0.6;\n}\n\n.cellEditor {\n width: 100%;\n min-width: 0;\n margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px solid var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-bg);\n font: inherit;\n color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n outline: none;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n padding: 0.125rem var(--tempest-space-2, 0.5rem);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-danger-bg);\n color: var(--tempest-danger-fg);\n font-size: var(--tempest-text-sm);\n line-height: 1.4;\n white-space: normal;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DataTable.module.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n max-width: 20rem;\n}\n\n/\n A page swap keeps the rows it already has, dimmed. Replacing them with a\n * spinner would collapse the table to nothing and bounce whatever sits below it\n * back up, which is the jump the user's cursor was resting on.\n /\n.pending {\n opacity: 0.6;\n transition: opacity var(--tempest-duration-fast, 120ms) ease;\n pointer-events: none;\n}\n\n.loading {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n padding: var(--tempest-space-3, 0.75rem) 0;\n}\n\n.loadingRow {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--tempest-space-4, 1rem);\n align-items: center;\n}\n\n.sortButton {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0;\n border: none;\n background: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n user-select: none;\n}\n\n.sortIndicator {\n font-size: 0.75em;\n opacity: 0.7;\n}\n\n/ ── Inline editing ─────────────────────────────────────────────────────────── /\n\n.cellWrap {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1, 0.25rem);\n align-items: stretch;\n width: 100%;\n}\n\n/\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n /\n.cellButton {\n position: relative;\n display: block;\n width: 100%;\n margin: calc(-1 var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px dashed transparent;\n border-bottom-color: var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background: none;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n}\n\n.cellButton:hover {\n border-color: var(--tempest-border-strong);\n background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n /\n@media (pointer: coarse) {\n .cellButton::after {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 var(--tempest-space-3, 0.75rem));\n inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n }\n}\n\n.cellButton[aria-busy=\"true\"] {\n opacity: 0.6;\n}\n\n.cellEditor {\n width: 100%;\n min-width: 0;\n margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px solid var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-bg);\n font: inherit;\n color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n outline: none;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n padding: 0.125rem var(--tempest-space-2, 0.5rem);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-danger-bg);\n color: var(--tempest-danger-fg);\n font-size: var(--tempest-text-sm);\n line-height: 1.4;\n white-space: normal;\n}\n"],"mappings":";"}

package/dist/components/DataTable/DataTable.module.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import "../../styles/component/DataTable.css";
 //#region src/components/DataTable/DataTable.module.css
 var e = "tempest_wrapper_iB6ka", t = "tempest_search_2y-yM", n = "tempest_pending_AzPOe", r = "tempest_loading_o14rI", i = "tempest_loadingRow_PsjGm", a = "tempest_sortButton_9p6w4", o = "tempest_sortIndicator_bZMlH", s = "tempest_cellWrap_8-ugE", c = "tempest_cellButton_BgVe-", l = "tempest_cellButtonInvalid_6MDdd", u = "tempest_cellEditor_LfeJW", d = "tempest_cellEditorInvalid_J7e2W", f = "tempest_cellError_CRf3e", p = {
 	wrapper: e,

package/dist/components/DataTable/DataTable.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.module.js","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n max-width: 20rem;\n}\n\n/\n A page swap keeps the rows it already has, dimmed. Replacing them with a\n * spinner would collapse the table to nothing and bounce whatever sits below it\n * back up, which is the jump the user's cursor was resting on.\n /\n.pending {\n opacity: 0.6;\n transition: opacity var(--tempest-duration-fast, 120ms) ease;\n pointer-events: none;\n}\n\n.loading {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n padding: var(--tempest-space-3, 0.75rem) 0;\n}\n\n.loadingRow {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--tempest-space-4, 1rem);\n align-items: center;\n}\n\n.sortButton {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0;\n border: none;\n background: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n user-select: none;\n}\n\n.sortIndicator {\n font-size: 0.75em;\n opacity: 0.7;\n}\n\n/ ── Inline editing ─────────────────────────────────────────────────────────── /\n\n.cellWrap {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1, 0.25rem);\n align-items: stretch;\n width: 100%;\n}\n\n/\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n /\n.cellButton {\n position: relative;\n display: block;\n width: 100%;\n margin: calc(-1 var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px dashed transparent;\n border-bottom-color: var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background: none;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n}\n\n.cellButton:hover {\n border-color: var(--tempest-border-strong);\n background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n /\n@media (pointer: coarse) {\n .cellButton::after {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 var(--tempest-space-3, 0.75rem));\n inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n }\n}\n\n.cellButton[aria-busy=\"true\"] {\n opacity: 0.6;\n}\n\n.cellEditor {\n width: 100%;\n min-width: 0;\n margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px solid var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-bg);\n font: inherit;\n color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n outline: none;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n padding: 0.125rem var(--tempest-space-2, 0.5rem);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-danger-bg);\n color: var(--tempest-danger-fg);\n font-size: var(--tempest-text-sm);\n line-height: 1.4;\n white-space: normal;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DataTable.module.js","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n max-width: 20rem;\n}\n\n/\n A page swap keeps the rows it already has, dimmed. Replacing them with a\n * spinner would collapse the table to nothing and bounce whatever sits below it\n * back up, which is the jump the user's cursor was resting on.\n /\n.pending {\n opacity: 0.6;\n transition: opacity var(--tempest-duration-fast, 120ms) ease;\n pointer-events: none;\n}\n\n.loading {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-3, 0.75rem);\n padding: var(--tempest-space-3, 0.75rem) 0;\n}\n\n.loadingRow {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n gap: var(--tempest-space-4, 1rem);\n align-items: center;\n}\n\n.sortButton {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0;\n border: none;\n background: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n user-select: none;\n}\n\n.sortIndicator {\n font-size: 0.75em;\n opacity: 0.7;\n}\n\n/ ── Inline editing ─────────────────────────────────────────────────────────── /\n\n.cellWrap {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-1, 0.25rem);\n align-items: stretch;\n width: 100%;\n}\n\n/\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n /\n.cellButton {\n position: relative;\n display: block;\n width: 100%;\n margin: calc(-1 var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px dashed transparent;\n border-bottom-color: var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background: none;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n}\n\n.cellButton:hover {\n border-color: var(--tempest-border-strong);\n background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n /\n@media (pointer: coarse) {\n .cellButton::after {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 var(--tempest-space-3, 0.75rem));\n inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n }\n}\n\n.cellButton[aria-busy=\"true\"] {\n opacity: 0.6;\n}\n\n.cellEditor {\n width: 100%;\n min-width: 0;\n margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n border: 1px solid var(--tempest-border-strong);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-bg);\n font: inherit;\n color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n outline: none;\n box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n border-color: var(--tempest-danger-border);\n}\n\n/\n The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n padding: 0.125rem var(--tempest-space-2, 0.5rem);\n border-radius: var(--tempest-radius-sm, 0.25rem);\n background-color: var(--tempest-danger-bg);\n color: var(--tempest-danger-fg);\n font-size: var(--tempest-text-sm);\n line-height: 1.4;\n white-space: normal;\n}\n"],"mappings":";"}

package/dist/components/DateRangePicker/DateRangePicker.module.cjs CHANGED Viewed

@@ -1,2 +1,3 @@
+require("../../styles/component/DateRangePicker.css");
 var e=`tempest_root_fVC66`,t=`tempest_header_sTdRM`,n=`tempest_headerSpacer_nqeNO`,r=`tempest_nav_7nFJE`,i=`tempest_months_fbwtK`,a=`tempest_month_0WfUc`,o=`tempest_title_OGQrm`,s=`tempest_weekdays_nYTrg`,c=`tempest_grid_O0eUF`,l=`tempest_weekday_cy-Mz`,u=`tempest_day_-V6FX`,d=`tempest_outside_3otid`,f=`tempest_today_gwmhs`,p=`tempest_inRange_iQJYA`,m=`tempest_selected_DRsBO`,h=`tempest_rangeStart_-Oe1u`,g=`tempest_rangeEnd_mUaKW`,_={root:e,header:t,headerSpacer:n,nav:r,months:i,month:a,title:o,weekdays:s,grid:c,weekday:l,day:u,outside:d,today:f,inRange:p,selected:m,rangeStart:h,rangeEnd:g};exports.day=u,exports.default=_,exports.grid=c,exports.header=t,exports.headerSpacer=n,exports.inRange=p,exports.month=a,exports.months=i,exports.nav=r,exports.outside=d,exports.rangeEnd=g,exports.rangeStart=h,exports.root=e,exports.selected=m,exports.title=o,exports.today=f,exports.weekday=l,exports.weekdays=s;
 //# sourceMappingURL=DateRangePicker.module.cjs.map

package/dist/components/DateRangePicker/DateRangePicker.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangePicker.module.cjs","names":[],"sources":["../../../src/components/DateRangePicker/DateRangePicker.module.css"],"sourcesContent":[".root {\n display: inline-flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n padding: var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n user-select: none;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--tempest-space-2);\n}\n\n.headerSpacer {\n flex: 1;\n}\n\n.nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-size: var(--tempest-text-lg);\n line-height: 1;\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.nav:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.nav: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.months {\n display: flex;\n flex-wrap: wrap;\n gap: var(--tempest-space-5);\n}\n\n.month {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.title {\n text-align: center;\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-semibold);\n}\n\n.weekdays,\n.grid {\n display: grid;\n grid-template-columns: repeat(7, 2.25rem);\n gap: var(--tempest-space-1);\n}\n\n.weekday {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 1.5rem;\n font-size: var(--tempest-text-2xs);\n font-weight: var(--tempest-weight-semibold);\n color: var(--tempest-text-muted);\n text-transform: uppercase;\n}\n\n.day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.25rem;\n height: 2.25rem;\n border: 1px solid transparent;\n border-radius: var(--tempest-radius-md);\n background-color: transparent;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n cursor: pointer;\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.day:hover:not(:disabled) {\n background-color: var(--tempest-surface-2);\n}\n\n.day: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.day:disabled {\n color: var(--tempest-text-muted);\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.outside {\n /* No extra opacity: subtle-on-surface already reads as de-emphasised, and\n fading it further dropped the contrast to 2.11:1 (WCAG AA needs 4.5:1)\n for dates that are still clickable. */\n color: var(--tempest-text-subtle);\n}\n\n.today {\n font-weight: var(--tempest-weight-semibold);\n border-color: var(--tempest-primary);\n}\n\n.inRange {\n background-color: var(--tempest-primary-soft);\n color: var(--tempest-primary-on-soft);\n border-radius: 0;\n}\n\n.selected,\n.selected:hover {\n background-color: var(--tempest-primary);\n color: var(--tempest-primary-foreground);\n border-color: var(--tempest-primary);\n}\n\n.rangeStart {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rangeEnd {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DateRangePicker.module.cjs","names":[],"sources":["../../../src/components/DateRangePicker/DateRangePicker.module.css"],"sourcesContent":[".root {\n display: inline-flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n padding: var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n user-select: none;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--tempest-space-2);\n}\n\n.headerSpacer {\n flex: 1;\n}\n\n.nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-size: var(--tempest-text-lg);\n line-height: 1;\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.nav:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.nav: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.months {\n display: flex;\n flex-wrap: wrap;\n gap: var(--tempest-space-5);\n}\n\n.month {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.title {\n text-align: center;\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-semibold);\n}\n\n.weekdays,\n.grid {\n display: grid;\n grid-template-columns: repeat(7, 2.25rem);\n gap: var(--tempest-space-1);\n}\n\n.weekday {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 1.5rem;\n font-size: var(--tempest-text-2xs);\n font-weight: var(--tempest-weight-semibold);\n color: var(--tempest-text-muted);\n text-transform: uppercase;\n}\n\n.day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.25rem;\n height: 2.25rem;\n border: 1px solid transparent;\n border-radius: var(--tempest-radius-md);\n background-color: transparent;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n cursor: pointer;\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.day:hover:not(:disabled) {\n background-color: var(--tempest-surface-2);\n}\n\n.day: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.day:disabled {\n color: var(--tempest-text-muted);\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.outside {\n /* No extra opacity: subtle-on-surface already reads as de-emphasised, and\n fading it further dropped the contrast to 2.11:1 (WCAG AA needs 4.5:1)\n for dates that are still clickable. */\n color: var(--tempest-text-subtle);\n}\n\n.today {\n font-weight: var(--tempest-weight-semibold);\n border-color: var(--tempest-primary);\n}\n\n.inRange {\n background-color: var(--tempest-primary-soft);\n color: var(--tempest-primary-on-soft);\n border-radius: 0;\n}\n\n.selected,\n.selected:hover {\n background-color: var(--tempest-primary);\n color: var(--tempest-primary-foreground);\n border-color: var(--tempest-primary);\n}\n\n.rangeStart {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rangeEnd {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n"],"mappings":";"}

package/dist/components/DateRangePicker/DateRangePicker.module.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import "../../styles/component/DateRangePicker.css";
 //#region src/components/DateRangePicker/DateRangePicker.module.css
 var e = "tempest_root_fVC66", t = "tempest_header_sTdRM", n = "tempest_headerSpacer_nqeNO", r = "tempest_nav_7nFJE", i = "tempest_months_fbwtK", a = "tempest_month_0WfUc", o = "tempest_title_OGQrm", s = "tempest_weekdays_nYTrg", c = "tempest_grid_O0eUF", l = "tempest_weekday_cy-Mz", u = "tempest_day_-V6FX", d = "tempest_outside_3otid", f = "tempest_today_gwmhs", p = "tempest_inRange_iQJYA", m = "tempest_selected_DRsBO", h = "tempest_rangeStart_-Oe1u", g = "tempest_rangeEnd_mUaKW", _ = {
 	root: e,

package/dist/components/DateRangePicker/DateRangePicker.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangePicker.module.js","names":[],"sources":["../../../src/components/DateRangePicker/DateRangePicker.module.css"],"sourcesContent":[".root {\n display: inline-flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n padding: var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n user-select: none;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--tempest-space-2);\n}\n\n.headerSpacer {\n flex: 1;\n}\n\n.nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-size: var(--tempest-text-lg);\n line-height: 1;\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.nav:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.nav: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.months {\n display: flex;\n flex-wrap: wrap;\n gap: var(--tempest-space-5);\n}\n\n.month {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.title {\n text-align: center;\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-semibold);\n}\n\n.weekdays,\n.grid {\n display: grid;\n grid-template-columns: repeat(7, 2.25rem);\n gap: var(--tempest-space-1);\n}\n\n.weekday {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 1.5rem;\n font-size: var(--tempest-text-2xs);\n font-weight: var(--tempest-weight-semibold);\n color: var(--tempest-text-muted);\n text-transform: uppercase;\n}\n\n.day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.25rem;\n height: 2.25rem;\n border: 1px solid transparent;\n border-radius: var(--tempest-radius-md);\n background-color: transparent;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n cursor: pointer;\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.day:hover:not(:disabled) {\n background-color: var(--tempest-surface-2);\n}\n\n.day: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.day:disabled {\n color: var(--tempest-text-muted);\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.outside {\n /* No extra opacity: subtle-on-surface already reads as de-emphasised, and\n fading it further dropped the contrast to 2.11:1 (WCAG AA needs 4.5:1)\n for dates that are still clickable. */\n color: var(--tempest-text-subtle);\n}\n\n.today {\n font-weight: var(--tempest-weight-semibold);\n border-color: var(--tempest-primary);\n}\n\n.inRange {\n background-color: var(--tempest-primary-soft);\n color: var(--tempest-primary-on-soft);\n border-radius: 0;\n}\n\n.selected,\n.selected:hover {\n background-color: var(--tempest-primary);\n color: var(--tempest-primary-foreground);\n border-color: var(--tempest-primary);\n}\n\n.rangeStart {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rangeEnd {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DateRangePicker.module.js","names":[],"sources":["../../../src/components/DateRangePicker/DateRangePicker.module.css"],"sourcesContent":[".root {\n display: inline-flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n padding: var(--tempest-space-3);\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-lg);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-family: var(--tempest-font-sans);\n user-select: none;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--tempest-space-2);\n}\n\n.headerSpacer {\n flex: 1;\n}\n\n.nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border: 1px solid var(--tempest-border);\n border-radius: var(--tempest-radius-md);\n background-color: var(--tempest-surface);\n color: var(--tempest-text);\n font-size: var(--tempest-text-lg);\n line-height: 1;\n cursor: pointer;\n transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.nav:hover {\n background-color: var(--tempest-surface-2);\n}\n\n.nav: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.months {\n display: flex;\n flex-wrap: wrap;\n gap: var(--tempest-space-5);\n}\n\n.month {\n display: flex;\n flex-direction: column;\n gap: var(--tempest-space-2);\n}\n\n.title {\n text-align: center;\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-semibold);\n}\n\n.weekdays,\n.grid {\n display: grid;\n grid-template-columns: repeat(7, 2.25rem);\n gap: var(--tempest-space-1);\n}\n\n.weekday {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 1.5rem;\n font-size: var(--tempest-text-2xs);\n font-weight: var(--tempest-weight-semibold);\n color: var(--tempest-text-muted);\n text-transform: uppercase;\n}\n\n.day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.25rem;\n height: 2.25rem;\n border: 1px solid transparent;\n border-radius: var(--tempest-radius-md);\n background-color: transparent;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n cursor: pointer;\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.day:hover:not(:disabled) {\n background-color: var(--tempest-surface-2);\n}\n\n.day: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.day:disabled {\n color: var(--tempest-text-muted);\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.outside {\n /* No extra opacity: subtle-on-surface already reads as de-emphasised, and\n fading it further dropped the contrast to 2.11:1 (WCAG AA needs 4.5:1)\n for dates that are still clickable. */\n color: var(--tempest-text-subtle);\n}\n\n.today {\n font-weight: var(--tempest-weight-semibold);\n border-color: var(--tempest-primary);\n}\n\n.inRange {\n background-color: var(--tempest-primary-soft);\n color: var(--tempest-primary-on-soft);\n border-radius: 0;\n}\n\n.selected,\n.selected:hover {\n background-color: var(--tempest-primary);\n color: var(--tempest-primary-foreground);\n border-color: var(--tempest-primary);\n}\n\n.rangeStart {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rangeEnd {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n"],"mappings":";"}

package/dist/components/DescriptionList/DescriptionList.module.cjs CHANGED Viewed

@@ -1,2 +1,3 @@
+require("../../styles/component/DescriptionList.css");
 var e=`tempest_list_fwIXq`,t=`tempest_term_QkQNZ`,n=`tempest_description_e1bNN`,r={list:e,term:t,description:n};exports.default=r,exports.description=n,exports.list=e,exports.term=t;
 //# sourceMappingURL=DescriptionList.module.cjs.map

package/dist/components/DescriptionList/DescriptionList.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DescriptionList.module.cjs","names":[],"sources":["../../../src/components/DescriptionList/DescriptionList.module.css"],"sourcesContent":[".list {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: var(--tempest-space-1) var(--tempest-space-4);\n margin: 0;\n}\n\n.term {\n color: var(--tempest-text-subtle);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n}\n\n.description {\n margin: 0;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DescriptionList.module.cjs","names":[],"sources":["../../../src/components/DescriptionList/DescriptionList.module.css"],"sourcesContent":[".list {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: var(--tempest-space-1) var(--tempest-space-4);\n margin: 0;\n}\n\n.term {\n color: var(--tempest-text-subtle);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n}\n\n.description {\n margin: 0;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n}\n"],"mappings":";"}

package/dist/components/DescriptionList/DescriptionList.module.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import "../../styles/component/DescriptionList.css";
 //#region src/components/DescriptionList/DescriptionList.module.css
 var e = "tempest_list_fwIXq", t = "tempest_term_QkQNZ", n = "tempest_description_e1bNN", r = {
 	list: e,

package/dist/components/DescriptionList/DescriptionList.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DescriptionList.module.js","names":[],"sources":["../../../src/components/DescriptionList/DescriptionList.module.css"],"sourcesContent":[".list {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: var(--tempest-space-1) var(--tempest-space-4);\n margin: 0;\n}\n\n.term {\n color: var(--tempest-text-subtle);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n}\n\n.description {\n margin: 0;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DescriptionList.module.js","names":[],"sources":["../../../src/components/DescriptionList/DescriptionList.module.css"],"sourcesContent":[".list {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: var(--tempest-space-1) var(--tempest-space-4);\n margin: 0;\n}\n\n.term {\n color: var(--tempest-text-subtle);\n font-size: var(--tempest-text-sm);\n font-weight: var(--tempest-weight-medium);\n}\n\n.description {\n margin: 0;\n color: var(--tempest-text);\n font-size: var(--tempest-text-sm);\n}\n"],"mappings":";"}

package/dist/components/Divider/Divider.module.cjs CHANGED Viewed

@@ -1,2 +1,3 @@
+require("../../styles/component/Divider.css");
 var e=`tempest_divider_KSGsi`,t=`tempest_horizontal_pZ05Y`,n=`tempest_bare_elDbS`,r=`tempest_vertical_p-jD4`,i=`tempest_dashed_JWxCU`,a=`tempest_alignStart_QAIi1`,o=`tempest_alignEnd_eZDwa`,s={divider:e,horizontal:t,bare:n,vertical:r,dashed:i,alignStart:a,alignEnd:o};exports.alignEnd=o,exports.alignStart=a,exports.bare=n,exports.dashed=i,exports.default=s,exports.divider=e,exports.horizontal=t,exports.vertical=r;
 //# sourceMappingURL=Divider.module.cjs.map