tintora 0.20.0 → 0.21.0

package/dist/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { type InputHTMLAttributes } from 'react';
-import { type CheckedStateProps } from '../useCheckedState';
+import { type CheckedStateProps } from '../hooks/useCheckedState';
 import './Checkbox.css';
 interface CheckboxBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'children' | 'checked' | 'defaultChecked' | 'onChange'> {
     /** Names the checkbox for assistive tech, e.g. "Select all". Required. */

package/dist/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import type { InputHTMLAttributes } from 'react';
-import { type CheckedStateProps } from '../useCheckedState';
+import { type CheckedStateProps } from '../hooks/useCheckedState';
 import './Switch.css';
 interface SwitchBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'children' | 'checked' | 'defaultChecked' | 'onChange'> {
     /** Names the switch for assistive tech, e.g. "Wi-Fi". Required. */

package/dist/Tooltip/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import { type ReactElement } from 'react';
+import { type Placement } from '../utils/placement';
 import './Tooltip.css';
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipPlacement = Placement;
 export interface TooltipProps {
     /** The text. Required, and what a screen reader announces. */
     content: string;
@@ -16,25 +17,4 @@ export interface TooltipProps {
     }>;
     className?: string;
 }
-interface Size {
-    width: number;
-    height: number;
-}
-interface Position {
-    top: number;
-    left: number;
-    /** The side it really opens on: the requested one, or the opposite if flipped. */
-    placement: TooltipPlacement;
-    /** Distance in px from the tooltip's start edge to the arrow's centre. */
-    arrowOffset: number;
-}
-/**
- * Viewport coordinates for the tooltip's top-left corner, given the trigger's
- * rect, the tooltip's own size, the side it should open on and the viewport.
- * It flips to the opposite side when there is no room, and is kept inside the
- * viewport along the other axis (the arrow then moves to keep pointing at the
- * trigger).
- */
-export declare function getPosition(anchor: DOMRect, tooltip: Size, requested: TooltipPlacement, viewport?: Size): Position;
 export declare function Tooltip({ title, content, shortcut, children, className, placement, }: TooltipProps): import("react").JSX.Element;
-export {};

package/dist/hooks/useEscapeKey.d.ts

@@ -0,0 +1,2 @@
+/** Calls `onEscape` when Escape is pressed anywhere, while `active`. */
+export declare function useEscapeKey(active: boolean, onEscape: () => void): void;

package/dist/hooks/useLatest.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A ref that always holds the latest `value`. Lets a long-lived listener or
+ * timer call the newest callback without being torn down for each new one.
+ */
+export declare function useLatest<T>(value: T): import("react").RefObject<T>;

package/dist/hooks/useOutsidePress.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+/**
+ * Calls `onPress` when a pointer goes down outside `ref`, while `active`.
+ * A `popover="manual"` has no light dismiss of its own, so components add it.
+ */
+export declare function useOutsidePress(active: boolean, ref: RefObject<HTMLElement | null>, onPress: () => void): void;

package/dist/hooks/useTopLayerPosition.d.ts

@@ -0,0 +1,9 @@
+import { type DependencyList, type RefObject } from 'react';
+/**
+ * Shows a `popover="manual"` element in the top layer (so no card clips it)
+ * and returns where `place` says it goes. `place` measures the trigger and the
+ * popup, so it runs once the popup is in the DOM, again when `deps` change,
+ * and whenever the page scrolls or resizes, because the popup is fixed to the
+ * viewport. The result is `null` while closed.
+ */
+export declare function useTopLayerPosition<T>(open: boolean, popupRef: RefObject<HTMLElement | null>, place: () => T | null, deps: DependencyList): T | null;

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(e){var t,r,i=``;if(typeof e==`string`||typeof e==`number`)i+=e;else if(typeof e==`object`){if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(r=n(e[t]))&&(i&&(i+=` `),i+=r)}else for(r in e)e[r]&&(i&&(i+=` `),i+=r)}return i}function r(){for(var e,t,r=0,i=``,a=arguments.length;r<a;r++)(e=arguments[r])&&(t=n(e))&&(i&&(i+=` `),i+=t);return i}function i(e){if(!e.length)return``;let t=e.trim().split(/\s+/).map(e=>e.match(/\p{L}\p{M}*/u)?.[0]).filter(e=>!!e);return`${t[0]??``}${t.length>1?t.at(-1)??``:``}`.toLocaleUpperCase()}function a({name:n,src:a,size:o=`medium`,className:s,...c}){let[l,u]=(0,e.useState)(),d=!!a&&a!==l;return(0,t.jsx)(`span`,{role:`img`,"aria-label":n,...c,className:r(`tintora-avatar`,`tintora-avatar--${o}`,s),children:d?(0,t.jsx)(`img`,{src:a,alt:``,onError:()=>u(a)}):i(n)})}var o={small:{width:16,height:16,strokeWidth:3.5},medium:{width:24,height:24,strokeWidth:3},large:{width:40,height:40,strokeWidth:2.4}};function s({size:e=`medium`,color:n=`accent`}){let{width:r,height:i,strokeWidth:a}=o[e];return(0,t.jsxs)(`svg`,{className:`tintora-spinner`,width:r,height:i,viewBox:`0 0 24 24`,fill:`none`,role:`img`,"aria-label":`Loading`,children:[(0,t.jsx)(`circle`,{cx:`12`,cy:`12`,r:`9`,stroke:`currentColor`,strokeOpacity:n===`accent`?.25:.35,strokeWidth:a}),(0,t.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9`,stroke:n===`accent`?`var(--tintora-control-fill)`:`currentColor`,strokeWidth:a,strokeLinecap:`round`})]})}function c({children:e,className:n,variant:i,size:a=`medium`,leadingIcon:o,trailingIcon:c,type:l=`button`,loading:u=!1,disabled:d,...f}){return(0,t.jsxs)(`button`,{type:l,className:r(`tintora-button`,`tintora-button--${i}`,`tintora-button--${a}`,{"tintora-button--leading-icon":!!o||u,"tintora-button--loading":u,"tintora-button--trailing-icon":!!c},n),disabled:d||u,"aria-busy":u||void 0,...f,children:[u&&(0,t.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:(0,t.jsx)(s,{size:`small`,color:`current`})}),!u&&o&&(0,t.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:o}),e,c&&(0,t.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:c})]})}function l({as:e=`article`,variant:n=`surface`,className:i,...a}){return(0,t.jsx)(e,{...a,className:r(`tintora-card`,`tintora-card--${n}`,i)})}function u({selected:e=!1,className:n,...i}){return(0,t.jsx)(`button`,{...i,type:`button`,"aria-pressed":e,className:r(`tintora-card`,`tintora-card--surface`,`tintora-card--selectable`,e&&`tintora-card--selected`,n)})}function d({checked:t,defaultChecked:n=!1,onCheckedChange:r}){let[i,a]=(0,e.useState)(n),o=t!==void 0;return{checked:o?t:i,onChange:e=>{o||a(e.target.checked),r?.(e.target.checked)}}}function f({checked:n,defaultChecked:i,onCheckedChange:a,indeterminate:o=!1,className:s,...c}){let l=(0,e.useRef)(null),u=d({checked:n,defaultChecked:i,onCheckedChange:a});return(0,e.useLayoutEffect)(()=>{l.current&&(l.current.indeterminate=o)}),(0,t.jsxs)(`span`,{className:r(`tintora-checkbox`,s),children:[(0,t.jsx)(`input`,{...c,ref:l,type:`checkbox`,className:`tintora-checkbox__input`,checked:u.checked,onChange:u.onChange}),(0,t.jsxs)(`span`,{className:`tintora-checkbox__box`,"aria-hidden":`true`,children:[(0,t.jsx)(`svg`,{className:`tintora-checkbox__check`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,t.jsx)(`path`,{d:`M5 12.5l4.5 4.5L19 7.5`})}),(0,t.jsx)(`svg`,{className:`tintora-checkbox__dash`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,children:(0,t.jsx)(`path`,{d:`M6 12h12`})})]})]})}function p({children:e,selected:n,className:i,"aria-pressed":a,...o}){return(0,t.jsx)(`button`,{...o,type:`button`,className:r(`tintora-chip`,i),"aria-pressed":n??a,children:e})}function m({variant:e=`unread`,label:n,className:i,...a}){return(0,t.jsx)(`span`,{...a,className:r(`tintora-dot`,`tintora-dot--${e}`,i),role:n?`img`:void 0,"aria-label":n,"aria-hidden":!n||void 0})}var h={round:`secondary`,field:`secondary`,nav:`ghost`};function g({icon:e,variant:n=`round`,size:i,selected:a,className:o,...s}){let l=n===`round`?i??`large`:void 0;return(0,t.jsx)(c,{...s,variant:h[n],"aria-current":a?`page`:void 0,className:r(`tintora-icon-button`,`tintora-icon-button--${n}`,l&&`tintora-icon-button--${l}`,o),...l&&{size:l},children:(0,t.jsx)(`span`,{className:`tintora-icon-button__icon`,"aria-hidden":`true`,children:e})})}var _=()=>(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,children:(0,t.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})});function v({open:n,onClose:i,title:a,description:o,icon:s,status:c=`info`,actions:l,size:u=`md`,align:d=`start`,role:f=`dialog`,closeButton:p=!0,className:m,children:h,...v}){let y=(0,e.useRef)(null),b=(0,e.useId)(),x=(0,e.useId)();return(0,e.useEffect)(()=>{let e=y.current;e&&(n&&!e.open?(e.showModal(),e.querySelector(`[data-autofocus]`)?.focus()):!n&&e.open&&e.close())},[n]),(0,t.jsxs)(`dialog`,{...v,ref:y,role:f,"aria-labelledby":b,"aria-describedby":o?x:void 0,className:r(`tintora-modal`,`tintora-modal--${u}`,d===`center`&&`tintora-modal--center`,m),onCancel:e=>{e.preventDefault(),i()},onClick:e=>{f===`dialog`&&e.target===e.currentTarget&&i()},children:[s&&(0,t.jsx)(`span`,{className:r(`tintora-modal__icon`,`tintora-modal__icon--${c}`),"aria-hidden":`true`,children:s}),(0,t.jsxs)(`div`,{className:`tintora-modal__text`,children:[(0,t.jsx)(`h2`,{id:b,className:`tintora-modal__title`,children:a}),o&&(0,t.jsx)(`p`,{id:x,className:`tintora-modal__description`,children:o})]}),p&&(0,t.jsx)(g,{className:`tintora-modal__close`,size:`medium`,"aria-label":`Close`,icon:(0,t.jsx)(_,{}),onClick:i}),h,l&&(0,t.jsx)(`div`,{className:`tintora-modal__actions`,children:l})]})}function y({title:n,progress:i,indeterminate:a,valueLabel:o,className:s,"aria-label":c}){let l=(0,e.useId)(),u=a?void 0:Math.min(100,Math.max(0,Number.isFinite(i)?i:0)),d=u===100,f=o??(a?`Indeterminate`:`${u}%`);return(0,t.jsxs)(`div`,{className:r(`tintora-progress-bar`,s),children:[n&&(0,t.jsxs)(`div`,{className:`tintora-progress-bar__header`,children:[(0,t.jsx)(`span`,{id:l,children:n}),(0,t.jsx)(`span`,{className:`tintora-progress-bar__value`,children:f})]}),(0,t.jsx)(`div`,{role:`progressbar`,"aria-label":c,"aria-labelledby":n?l:void 0,"aria-valuemin":a?void 0:0,"aria-valuemax":a?void 0:100,"aria-valuenow":u,"aria-valuetext":o,className:`tintora-progress-bar__track`,children:(0,t.jsx)(`div`,{className:r(`tintora-progress-bar__fill`,{"tintora-progress-bar__fill--indeterminate":a,"tintora-progress-bar__fill--complete":d}),style:u===void 0?void 0:{width:`${u}%`}})})]})}var b=(0,e.createContext)(null);function x(){let t=(0,e.useContext)(b);if(!t)throw Error(`Radio must be rendered inside a RadioGroup`);return t}function S({value:e,className:n,disabled:i,...a}){let o=x();return(0,t.jsxs)(`span`,{className:r(`tintora-radio`,n),children:[(0,t.jsx)(`input`,{...a,type:`radio`,className:`tintora-radio__input`,name:o.name,value:e,checked:o.value===e,disabled:i||o.disabled,onChange:()=>o.select(e)}),(0,t.jsx)(`span`,{className:`tintora-radio__circle`,"aria-hidden":`true`})]})}function C({value:n,defaultValue:i,onValueChange:a,disabled:o=!1,name:s,className:c,...l}){let u=(0,e.useId)(),[d,f]=(0,e.useState)(i??null),p=n!==void 0,m=p?n:d;return(0,t.jsx)(b.Provider,{value:{name:s??u,value:m,select:e=>{e!==m&&(p||f(e),a?.(e))},disabled:o},children:(0,t.jsx)(`div`,{...l,role:`radiogroup`,className:r(`tintora-radio-group`,c)})})}function w({className:e,disabled:n,...i}){return(0,t.jsxs)(`label`,{className:r(`tintora-search-input`,n&&`tintora-search-input--disabled`,e),children:[(0,t.jsxs)(`svg`,{className:`tintora-search-input__icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,"aria-hidden":`true`,children:[(0,t.jsx)(`circle`,{cx:`11`,cy:`11`,r:`7`}),(0,t.jsx)(`path`,{d:`M20 20l-3.5-3.5`})]}),(0,t.jsx)(`input`,{...i,type:`search`,disabled:n,className:`tintora-search-input__input`})]})}var T=(0,e.createContext)(null),E=()=>{let t=(0,e.useContext)(T);if(!t)throw Error(`SelectOption must be rendered inside a Select`);return t};function D({label:e,value:n,disabled:i}){let{select:a,activate:o,optionId:s,value:c,activeValue:l}=E();return(0,t.jsx)(`div`,{id:s(n),role:`option`,"aria-selected":c===n,"aria-disabled":i||void 0,className:r(`tintora-select__option`,l===n&&`tintora-select__option--active`),onClick:()=>a(n),onMouseMove:()=>!i&&o(n),children:e})}var O=4;function k({defaultValue:n,options:i,disabled:a,value:o,placeholder:s,onValueChange:c,name:l,className:u,onClick:d,onKeyDown:f,onKeyUp:p,"aria-label":m,...h}){let g=(0,e.useId)(),_=(0,e.useRef)(null),v=(0,e.useRef)(null),y=(0,e.useRef)(null),[b,x]=(0,e.useState)(n??null),[S,C]=(0,e.useState)(!1),[w,E]=(0,e.useState)(-1),[k,A]=(0,e.useState)({}),j=o!==void 0,M=j?o:b,N=i.findIndex(e=>e.value===M),P=e=>i[e]?.disabled!==!0,F=()=>i.findIndex((e,t)=>P(t)),I=(e,t)=>{for(let n=e+t;n>=0&&n<i.length;n+=t)if(P(n))return n;return e},L=()=>{let e=I(i.length,-1);return e===i.length?-1:e},R=e=>i.findIndex(t=>t.value===e),z=()=>{E(N>=0&&P(N)?N:F()),C(!0)},B=()=>C(!1),V=e=>{let t=R(e);t<0||!P(t)||(B(),e!==M&&(j||x(e),c?.(e)))},H=e=>{if(f?.(e),e.defaultPrevented)return;let{key:t}=e;if(t===`Tab`)return B();if(!S){[`Enter`,` `,`ArrowDown`,`ArrowUp`].includes(t)&&(e.preventDefault(),z());return}let n={ArrowDown:()=>w<0?F():I(w,1),ArrowUp:()=>w<0?F():I(w,-1),Home:F,End:L};t in n?(e.preventDefault(),E(n[t]())):t===`Enter`||t===` `?(e.preventDefault(),w>=0?V(i[w].value):B()):t===`Escape`&&(e.preventDefault(),B())},U=e=>{p?.(e),e.key===` `&&e.preventDefault()},W=()=>{let e=y.current,t=v.current;if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.offsetHeight,i=n.bottom+O+r<=window.innerHeight,a=n.top-O-r>=0;A({top:i||!a?n.bottom+O:n.top-O-r,left:n.left,minWidth:n.width})},G=e=>{d?.(e),!e.defaultPrevented&&(S?B():z())};(0,e.useLayoutEffect)(()=>{S&&(y.current?.showPopover(),W())},[S]),(0,e.useEffect)(()=>{if(!S)return;let e=e=>{_.current?.contains(e.target)||B()},t=e=>{y.current?.contains(e.target)||W()};return document.addEventListener(`pointerdown`,e),window.addEventListener(`scroll`,t,!0),window.addEventListener(`resize`,W),()=>{document.removeEventListener(`pointerdown`,e),window.removeEventListener(`scroll`,t,!0),window.removeEventListener(`resize`,W)}},[S]),(0,e.useEffect)(()=>{S&&w>=0&&y.current?.children.item(w)?.scrollIntoView?.({block:`nearest`})},[S,w]);let K=e=>`${g}-option-${R(e)}`,q=S?i[w]?.value??null:null,J=i[N]?.label;return(0,t.jsx)(T.Provider,{value:{value:M,activeValue:q,select:V,optionId:K,activate:e=>E(R(e))},children:(0,t.jsxs)(`div`,{ref:_,className:`tintora-select`,children:[(0,t.jsxs)(`button`,{...h,ref:v,type:`button`,role:`combobox`,"aria-label":m,"aria-haspopup":`listbox`,"aria-expanded":S,"aria-controls":S?g:void 0,"aria-activedescendant":q===null?void 0:K(q),disabled:a,className:r(`tintora-select__trigger`,u),onClick:G,onKeyDown:H,onKeyUp:U,children:[(0,t.jsx)(`span`,{className:r(`tintora-select__value`,J===void 0&&`tintora-select__value--placeholder`),children:J??s}),(0,t.jsx)(`svg`,{className:`tintora-select__chevron`,width:`10`,height:`10`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M6 9l6 6 6-6`})})]}),S&&(0,t.jsx)(`div`,{ref:y,id:g,role:`listbox`,"aria-label":m,popover:`manual`,className:`tintora-select__menu`,style:k,onMouseDown:e=>e.preventDefault(),children:i.map(e=>(0,t.jsx)(D,{...e},e.value))}),l&&(0,t.jsx)(`input`,{type:`hidden`,name:l,value:M??``,disabled:a})]})})}function A({width:e,height:n,className:i,style:a,...o}){let s={...e!==void 0&&{width:e},...n!==void 0&&{height:n}};return(0,t.jsx)(`span`,{...o,"aria-hidden":`true`,className:r(`tintora-skeleton`,i),style:{...s,...a}})}function j({checked:e,defaultChecked:n,onCheckedChange:i,className:a,...o}){let s=d({checked:e,defaultChecked:n,onCheckedChange:i});return(0,t.jsxs)(`span`,{className:r(`tintora-switch`,a),children:[(0,t.jsx)(`input`,{...o,type:`checkbox`,role:`switch`,className:`tintora-switch__input`,checked:s.checked,onChange:s.onChange}),(0,t.jsx)(`span`,{className:`tintora-switch__track`,"aria-hidden":`true`})]})}function M({children:e,className:n,variant:i=`neutral`,size:a=`medium`,...o}){return(0,t.jsx)(`span`,{...o,className:r(`tintora-tag`,`tintora-tag--${i}`,`tintora-tag--${a}`,n),children:e})}function N({label:n,hint:i,error:a,id:o,className:s,disabled:c,"aria-describedby":l,"aria-invalid":u,...d}){let f=(0,e.useId)(),p=o??f,m=`${p}-message`,h=a??i;return(0,t.jsxs)(`div`,{className:r(`tintora-textfield`,c&&`tintora-textfield--disabled`,s),children:[(0,t.jsx)(`label`,{htmlFor:p,className:`tintora-textfield__label`,children:n}),(0,t.jsx)(`input`,{...d,id:p,disabled:c,className:`tintora-textfield__input`,"aria-invalid":a?!0:u,"aria-describedby":r(h&&m,l)||void 0}),h&&(0,t.jsx)(`span`,{id:m,className:r(`tintora-textfield__hint`,a&&`tintora-textfield__hint--error`),children:h})]})}function P(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-success)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8`})})}function F(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-error)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6`})})}function I(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-info)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01`})})}function L(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-warning)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01`})})}function R(){return(0,t.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.2`,strokeLinecap:`round`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})})}var z={success:(0,t.jsx)(P,{}),error:(0,t.jsx)(F,{}),info:(0,t.jsx)(I,{}),warning:(0,t.jsx)(L,{})};function B({status:n,children:i,action:a,onDismiss:o,duration:s=5e3,timerBar:c=!1,className:l,...u}){let[d,f]=(0,e.useState)(!1),[p,m]=(0,e.useState)(!1),h=d||p,g=(0,e.useRef)(o);(0,e.useEffect)(()=>{g.current=o},[o]);let _=(0,e.useRef)(s);(0,e.useEffect)(()=>{_.current=s},[s]),(0,e.useEffect)(()=>{if(s<=0||h)return;let e=Date.now(),t=setTimeout(()=>g.current(),_.current);return()=>{clearTimeout(t),_.current-=Date.now()-e}},[s,h]);let v=c&&s>0,y={"--tintora-toast-animation-duration":`${s}ms`};return(0,t.jsxs)(`div`,{...u,role:`status`,className:r(`tintora-toast`,v&&`tintora-toast--timer`,h&&`tintora-toast--paused`,l),onMouseEnter:e=>{u.onMouseEnter?.(e),f(!0)},onMouseLeave:e=>{u.onMouseLeave?.(e),f(!1)},onFocus:e=>{u.onFocus?.(e),m(!0)},onBlur:e=>{u.onBlur?.(e),e.currentTarget.contains(e.relatedTarget)||m(!1)},children:[n&&z[n],(0,t.jsx)(`span`,{className:`tintora-toast__message`,children:i}),a&&(0,t.jsx)(`button`,{type:`button`,className:`tintora-toast__action`,onClick:a.onClick,children:a.label}),(0,t.jsx)(`button`,{type:`button`,className:`tintora-toast__close`,"aria-label":`Dismiss`,onClick:o,children:(0,t.jsx)(R,{})}),v&&(0,t.jsx)(`span`,{className:`tintora-toast__progress`,style:y})]})}var V=(0,e.createContext)(null);function H(){let t=(0,e.useContext)(V);if(!t)throw Error(`ToggleItem must be rendered inside a Toggle`);return t}function U({children:n,value:i,defaultValue:a,onValueChange:o,disabled:s=!1,className:c,...l}){let[u,d]=(0,e.useState)(a),f=i!==void 0,p=f?i:u,m=n.findIndex(e=>e.props.value===p),h=(0,e.useRef)(null),[g,_]=(0,e.useState)({x:0,width:0});(0,e.useLayoutEffect)(()=>{let e=h.current;if(!e)return;let t=()=>{let t=e.children.item(m);if(!t)return;let n={x:t.offsetLeft,width:t.offsetWidth};_(e=>e.x===n.x&&e.width===n.width?e:n)};t();let n=new ResizeObserver(t);return n.observe(e),()=>{n.disconnect()}},[m]);let v={"--tintora-toggle-thumb-x":`${g.x}px`,"--tintora-toggle-thumb-width":`${g.width}px`};return(0,t.jsx)(V.Provider,{value:{value:p,select:e=>{e!==p&&(f||d(e),o?.(e))},disabled:s},children:(0,t.jsxs)(`div`,{...l,role:`group`,ref:h,className:r(`tintora-toggle`,s&&`tintora-toggle--disabled`,c),children:[n,(0,t.jsx)(`span`,{"aria-hidden":`true`,className:`tintora-toggle__thumb`,style:v})]})})}function W({value:e,children:n,className:i,disabled:a,onClick:o,...s}){let c=H(),l=t=>{o?.(t),t.defaultPrevented||c.select(e)};return(0,t.jsx)(`button`,{...s,type:`button`,className:r(`tintora-toggle__item`,i),"aria-pressed":c.value===e,disabled:a||c.disabled,onClick:l,children:n})}var G=10,K=100,q=8,J=12,Y={top:`bottom`,bottom:`top`,left:`right`,right:`left`},X=(e,t,n)=>Math.min(Math.max(e,t),Math.max(t,n));function Z(e,t,n,r){let i=t=>{switch(t){case`top`:return e.top;case`bottom`:return r.height-e.bottom;case`left`:return e.left;case`right`:return r.width-e.right}},a=(n===`top`||n===`bottom`?t.height:t.width)+G+q,o=i(n);return o>=a||i(Y[n])<=o?n:Y[n]}function Q(e,t,n,r={width:window.innerWidth,height:window.innerHeight}){let i=Z(e,t,n,r),a=i===`top`||i===`bottom`,o,s;switch(i){case`top`:o=e.y-t.height-G,s=e.x+e.width/2-t.width/2;break;case`bottom`:o=e.y+e.height+G,s=e.x+e.width/2-t.width/2;break;case`left`:o=e.y+e.height/2-t.height/2,s=e.x-t.width-G;break;case`right`:o=e.y+e.height/2-t.height/2,s=e.x+e.width+G}a?s=X(s,q,r.width-t.width-q):o=X(o,q,r.height-t.height-q);let c=a?e.x+e.width/2-s:e.y+e.height/2-o,l=a?t.width:t.height;return{top:o,left:s,placement:i,arrowOffset:X(c,J,l-J)}}function $({title:n,content:i,shortcut:a,children:o,className:s,placement:c=`top`}){let l=(0,e.useId)(),[u,d]=(0,e.useState)(!1),[f,p]=(0,e.useState)(null),m=(0,e.useRef)(null),h=(0,e.useRef)(null),g=(0,e.useRef)(void 0),_=()=>{window.clearTimeout(g.current),d(!0)},v=()=>{window.clearTimeout(g.current),g.current=window.setTimeout(()=>d(!1),K)};(0,e.useLayoutEffect)(()=>{let e=h.current,t=m.current?.firstElementChild;!u||!e||!t?p(null):(e.showPopover(),p(Q(t.getBoundingClientRect(),{width:e.offsetWidth,height:e.offsetHeight},c)))},[u,c,n,i,a]),(0,e.useEffect)(()=>{if(!u)return;let e=e=>{e.key===`Escape`&&d(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[u]),(0,e.useEffect)(()=>()=>window.clearTimeout(g.current),[]);let y=f?{top:f.top,left:f.left,"--tintora-tooltip-arrow-offset":`${f.arrowOffset}px`}:{visibility:`hidden`};return(0,t.jsxs)(`span`,{ref:m,className:`tintora-tooltip`,onMouseEnter:_,onMouseLeave:v,onFocus:_,onBlur:v,children:[(0,e.cloneElement)(o,{"aria-describedby":r(o.props[`aria-describedby`],u&&l)||void 0}),u&&(0,t.jsxs)(`div`,{id:l,ref:h,role:`tooltip`,popover:`manual`,style:y,className:r(`tintora-tooltip__content`,`tintora-tooltip__content--${f?.placement??c}`,n&&`tintora-tooltip__content--rich`,s),children:[n&&(0,t.jsx)(`span`,{className:`tintora-tooltip__title`,children:n}),(0,t.jsx)(`span`,{className:`tintora-tooltip__text`,children:i}),a&&(0,t.jsx)(`kbd`,{className:`tintora-tooltip__shortcut`,children:a})]})]})}exports.Avatar=a,exports.Button=c,exports.Card=l,exports.Checkbox=f,exports.Chip=p,exports.Dot=m,exports.IconButton=g,exports.Modal=v,exports.ProgressBar=y,exports.Radio=S,exports.RadioGroup=C,exports.SearchInput=w,exports.Select=k,exports.SelectableCard=u,exports.Skeleton=A,exports.Spinner=s,exports.Switch=j,exports.Tag=M,exports.TextField=N,exports.Toast=B,exports.Toggle=U,exports.ToggleItem=W,exports.Tooltip=$;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(e){var t,r,i=``;if(typeof e==`string`||typeof e==`number`)i+=e;else if(typeof e==`object`){if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(r=n(e[t]))&&(i&&(i+=` `),i+=r)}else for(r in e)e[r]&&(i&&(i+=` `),i+=r)}return i}function r(){for(var e,t,r=0,i=``,a=arguments.length;r<a;r++)(e=arguments[r])&&(t=n(e))&&(i&&(i+=` `),i+=t);return i}function i(e){if(!e.length)return``;let t=e.trim().split(/\s+/).map(e=>e.match(/\p{L}\p{M}*/u)?.[0]).filter(e=>!!e);return`${t[0]??``}${t.length>1?t.at(-1)??``:``}`.toLocaleUpperCase()}function a({name:n,src:a,size:o=`medium`,className:s,...c}){let[l,u]=(0,e.useState)(),d=!!a&&a!==l;return(0,t.jsx)(`span`,{role:`img`,"aria-label":n,...c,className:r(`tintora-avatar`,`tintora-avatar--${o}`,s),children:d?(0,t.jsx)(`img`,{src:a,alt:``,onError:()=>u(a)}):i(n)})}var o={small:{width:16,height:16,strokeWidth:3.5},medium:{width:24,height:24,strokeWidth:3},large:{width:40,height:40,strokeWidth:2.4}};function s({size:e=`medium`,color:n=`accent`}){let{width:r,height:i,strokeWidth:a}=o[e];return(0,t.jsxs)(`svg`,{className:`tintora-spinner`,width:r,height:i,viewBox:`0 0 24 24`,fill:`none`,role:`img`,"aria-label":`Loading`,children:[(0,t.jsx)(`circle`,{cx:`12`,cy:`12`,r:`9`,stroke:`currentColor`,strokeOpacity:n===`accent`?.25:.35,strokeWidth:a}),(0,t.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9`,stroke:n===`accent`?`var(--tintora-control-fill)`:`currentColor`,strokeWidth:a,strokeLinecap:`round`})]})}function c({children:e,className:n,variant:i,size:a=`medium`,leadingIcon:o,trailingIcon:c,type:l=`button`,loading:u=!1,disabled:d,...f}){return(0,t.jsxs)(`button`,{type:l,className:r(`tintora-button`,`tintora-button--${i}`,`tintora-button--${a}`,{"tintora-button--leading-icon":!!o||u,"tintora-button--loading":u,"tintora-button--trailing-icon":!!c},n),disabled:d||u,"aria-busy":u||void 0,...f,children:[u&&(0,t.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:(0,t.jsx)(s,{size:`small`,color:`current`})}),!u&&o&&(0,t.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:o}),e,c&&(0,t.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:c})]})}function l({as:e=`article`,variant:n=`surface`,className:i,...a}){return(0,t.jsx)(e,{...a,className:r(`tintora-card`,`tintora-card--${n}`,i)})}function u({selected:e=!1,className:n,...i}){return(0,t.jsx)(`button`,{...i,type:`button`,"aria-pressed":e,className:r(`tintora-card`,`tintora-card--surface`,`tintora-card--selectable`,e&&`tintora-card--selected`,n)})}function d({checked:t,defaultChecked:n=!1,onCheckedChange:r}){let[i,a]=(0,e.useState)(n),o=t!==void 0;return{checked:o?t:i,onChange:e=>{o||a(e.target.checked),r?.(e.target.checked)}}}function f({checked:n,defaultChecked:i,onCheckedChange:a,indeterminate:o=!1,className:s,...c}){let l=(0,e.useRef)(null),u=d({checked:n,defaultChecked:i,onCheckedChange:a});return(0,e.useLayoutEffect)(()=>{l.current&&(l.current.indeterminate=o)}),(0,t.jsxs)(`span`,{className:r(`tintora-checkbox`,s),children:[(0,t.jsx)(`input`,{...c,ref:l,type:`checkbox`,className:`tintora-checkbox__input`,checked:u.checked,onChange:u.onChange}),(0,t.jsxs)(`span`,{className:`tintora-checkbox__box`,"aria-hidden":`true`,children:[(0,t.jsx)(`svg`,{className:`tintora-checkbox__check`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,t.jsx)(`path`,{d:`M5 12.5l4.5 4.5L19 7.5`})}),(0,t.jsx)(`svg`,{className:`tintora-checkbox__dash`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,children:(0,t.jsx)(`path`,{d:`M6 12h12`})})]})]})}function p({children:e,selected:n,className:i,"aria-pressed":a,...o}){return(0,t.jsx)(`button`,{...o,type:`button`,className:r(`tintora-chip`,i),"aria-pressed":n??a,children:e})}function m({variant:e=`unread`,label:n,className:i,...a}){return(0,t.jsx)(`span`,{...a,className:r(`tintora-dot`,`tintora-dot--${e}`,i),role:n?`img`:void 0,"aria-label":n,"aria-hidden":!n||void 0})}var h={round:`secondary`,field:`secondary`,nav:`ghost`};function g({icon:e,variant:n=`round`,size:i,selected:a,className:o,...s}){let l=n===`round`?i??`large`:void 0;return(0,t.jsx)(c,{...s,variant:h[n],"aria-current":a?`page`:void 0,className:r(`tintora-icon-button`,`tintora-icon-button--${n}`,l&&`tintora-icon-button--${l}`,o),...l&&{size:l},children:(0,t.jsx)(`span`,{className:`tintora-icon-button__icon`,"aria-hidden":`true`,children:e})})}var _=()=>(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,children:(0,t.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})});function v({open:n,onClose:i,title:a,description:o,icon:s,status:c=`info`,actions:l,size:u=`md`,align:d=`start`,role:f=`dialog`,closeButton:p=!0,className:m,children:h,...v}){let y=(0,e.useRef)(null),b=(0,e.useId)(),x=(0,e.useId)();return(0,e.useEffect)(()=>{let e=y.current;e&&(n&&!e.open?(e.showModal(),e.querySelector(`[data-autofocus]`)?.focus()):!n&&e.open&&e.close())},[n]),(0,t.jsxs)(`dialog`,{...v,ref:y,role:f,"aria-labelledby":b,"aria-describedby":o?x:void 0,className:r(`tintora-modal`,`tintora-modal--${u}`,d===`center`&&`tintora-modal--center`,m),onCancel:e=>{e.preventDefault(),i()},onClick:e=>{f===`dialog`&&e.target===e.currentTarget&&i()},children:[s&&(0,t.jsx)(`span`,{className:r(`tintora-modal__icon`,`tintora-modal__icon--${c}`),"aria-hidden":`true`,children:s}),(0,t.jsxs)(`div`,{className:`tintora-modal__text`,children:[(0,t.jsx)(`h2`,{id:b,className:`tintora-modal__title`,children:a}),o&&(0,t.jsx)(`p`,{id:x,className:`tintora-modal__description`,children:o})]}),p&&(0,t.jsx)(g,{className:`tintora-modal__close`,size:`medium`,"aria-label":`Close`,icon:(0,t.jsx)(_,{}),onClick:i}),h,l&&(0,t.jsx)(`div`,{className:`tintora-modal__actions`,children:l})]})}function y({title:n,progress:i,indeterminate:a,valueLabel:o,className:s,"aria-label":c}){let l=(0,e.useId)(),u=a?void 0:Math.min(100,Math.max(0,Number.isFinite(i)?i:0)),d=u===100,f=o??(a?`Indeterminate`:`${u}%`);return(0,t.jsxs)(`div`,{className:r(`tintora-progress-bar`,s),children:[n&&(0,t.jsxs)(`div`,{className:`tintora-progress-bar__header`,children:[(0,t.jsx)(`span`,{id:l,children:n}),(0,t.jsx)(`span`,{className:`tintora-progress-bar__value`,children:f})]}),(0,t.jsx)(`div`,{role:`progressbar`,"aria-label":c,"aria-labelledby":n?l:void 0,"aria-valuemin":a?void 0:0,"aria-valuemax":a?void 0:100,"aria-valuenow":u,"aria-valuetext":o,className:`tintora-progress-bar__track`,children:(0,t.jsx)(`div`,{className:r(`tintora-progress-bar__fill`,{"tintora-progress-bar__fill--indeterminate":a,"tintora-progress-bar__fill--complete":d}),style:u===void 0?void 0:{width:`${u}%`}})})]})}var b=(0,e.createContext)(null);function x(){let t=(0,e.useContext)(b);if(!t)throw Error(`Radio must be rendered inside a RadioGroup`);return t}function S({value:e,className:n,disabled:i,...a}){let o=x();return(0,t.jsxs)(`span`,{className:r(`tintora-radio`,n),children:[(0,t.jsx)(`input`,{...a,type:`radio`,className:`tintora-radio__input`,name:o.name,value:e,checked:o.value===e,disabled:i||o.disabled,onChange:()=>o.select(e)}),(0,t.jsx)(`span`,{className:`tintora-radio__circle`,"aria-hidden":`true`})]})}function C({value:n,defaultValue:i,onValueChange:a,disabled:o=!1,name:s,className:c,...l}){let u=(0,e.useId)(),[d,f]=(0,e.useState)(i??null),p=n!==void 0,m=p?n:d;return(0,t.jsx)(b.Provider,{value:{name:s??u,value:m,select:e=>{e!==m&&(p||f(e),a?.(e))},disabled:o},children:(0,t.jsx)(`div`,{...l,role:`radiogroup`,className:r(`tintora-radio-group`,c)})})}function w({className:e,disabled:n,...i}){return(0,t.jsxs)(`label`,{className:r(`tintora-search-input`,n&&`tintora-search-input--disabled`,e),children:[(0,t.jsxs)(`svg`,{className:`tintora-search-input__icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,"aria-hidden":`true`,children:[(0,t.jsx)(`circle`,{cx:`11`,cy:`11`,r:`7`}),(0,t.jsx)(`path`,{d:`M20 20l-3.5-3.5`})]}),(0,t.jsx)(`input`,{...i,type:`search`,disabled:n,className:`tintora-search-input__input`})]})}function T(t){let n=(0,e.useRef)(t);return(0,e.useEffect)(()=>{n.current=t},[t]),n}function E(t,n,r){let i=T(r);(0,e.useEffect)(()=>{if(!t)return;let e=e=>{n.current?.contains(e.target)||i.current()};return document.addEventListener(`pointerdown`,e),()=>document.removeEventListener(`pointerdown`,e)},[t,n,i])}function D(t,n,r,i){let[a,o]=(0,e.useState)(null);return(0,e.useLayoutEffect)(()=>{let e=n.current;if(!t||!e){o(null);return}e.showPopover();let i=()=>o(r()),a=t=>{e.contains(t.target)||i()};return i(),window.addEventListener(`scroll`,a,!0),window.addEventListener(`resize`,i),()=>{window.removeEventListener(`scroll`,a,!0),window.removeEventListener(`resize`,i)}},[t,n,...i]),a}var O=(0,e.createContext)(null),k=()=>{let t=(0,e.useContext)(O);if(!t)throw Error(`SelectOption must be rendered inside a Select`);return t};function A({label:e,value:n,disabled:i}){let{select:a,activate:o,optionId:s,value:c,activeValue:l}=k();return(0,t.jsx)(`div`,{id:s(n),role:`option`,"aria-selected":c===n,"aria-disabled":i||void 0,className:r(`tintora-select__option`,l===n&&`tintora-select__option--active`),onClick:()=>a(n),onMouseMove:()=>!i&&o(n),children:e})}var j=4;function M({defaultValue:n,options:i,disabled:a,value:o,placeholder:s,onValueChange:c,name:l,className:u,onClick:d,onKeyDown:f,onKeyUp:p,"aria-label":m,...h}){let g=(0,e.useId)(),_=(0,e.useRef)(null),v=(0,e.useRef)(null),y=(0,e.useRef)(null),[b,x]=(0,e.useState)(n??null),[S,C]=(0,e.useState)(!1),[w,T]=(0,e.useState)(-1),k=o!==void 0,M=k?o:b,N=i.findIndex(e=>e.value===M),P=e=>i[e]?.disabled!==!0,F=()=>i.findIndex((e,t)=>P(t)),I=(e,t)=>{for(let n=e+t;n>=0&&n<i.length;n+=t)if(P(n))return n;return e},L=()=>{let e=I(i.length,-1);return e===i.length?-1:e},R=e=>i.findIndex(t=>t.value===e),z=()=>{T(N>=0&&P(N)?N:F()),C(!0)},B=()=>C(!1),V=e=>{let t=R(e);t<0||!P(t)||(B(),e!==M&&(k||x(e),c?.(e)))},H=e=>{if(f?.(e),e.defaultPrevented)return;let{key:t}=e;if(t===`Tab`)return B();if(!S){[`Enter`,` `,`ArrowDown`,`ArrowUp`].includes(t)&&(e.preventDefault(),z());return}let n={ArrowDown:()=>w<0?F():I(w,1),ArrowUp:()=>w<0?F():I(w,-1),Home:F,End:L};t in n?(e.preventDefault(),T(n[t]())):t===`Enter`||t===` `?(e.preventDefault(),w>=0?V(i[w].value):B()):t===`Escape`&&(e.preventDefault(),B())},U=e=>{p?.(e),e.key===` `&&e.preventDefault()},W=D(S,y,()=>{let e=y.current,t=v.current;if(!e||!t)return null;let n=t.getBoundingClientRect(),r=e.offsetHeight,i=n.bottom+j+r<=window.innerHeight,a=n.top-j-r>=0;return{top:i||!a?n.bottom+j:n.top-j-r,left:n.left,minWidth:n.width}},[]),G=e=>{d?.(e),!e.defaultPrevented&&(S?B():z())};E(S,_,B),(0,e.useEffect)(()=>{S&&w>=0&&y.current?.children.item(w)?.scrollIntoView?.({block:`nearest`})},[S,w]);let K=e=>`${g}-option-${R(e)}`,q=S?i[w]?.value??null:null,J=i[N]?.label;return(0,t.jsx)(O.Provider,{value:{value:M,activeValue:q,select:V,optionId:K,activate:e=>T(R(e))},children:(0,t.jsxs)(`div`,{ref:_,className:`tintora-select`,children:[(0,t.jsxs)(`button`,{...h,ref:v,type:`button`,role:`combobox`,"aria-label":m,"aria-haspopup":`listbox`,"aria-expanded":S,"aria-controls":S?g:void 0,"aria-activedescendant":q===null?void 0:K(q),disabled:a,className:r(`tintora-select__trigger`,u),onClick:G,onKeyDown:H,onKeyUp:U,children:[(0,t.jsx)(`span`,{className:r(`tintora-select__value`,J===void 0&&`tintora-select__value--placeholder`),children:J??s}),(0,t.jsx)(`svg`,{className:`tintora-select__chevron`,width:`10`,height:`10`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M6 9l6 6 6-6`})})]}),S&&(0,t.jsx)(`div`,{ref:y,id:g,role:`listbox`,"aria-label":m,popover:`manual`,className:`tintora-select__menu`,style:W??{},onMouseDown:e=>e.preventDefault(),children:i.map(e=>(0,t.jsx)(A,{...e},e.value))}),l&&(0,t.jsx)(`input`,{type:`hidden`,name:l,value:M??``,disabled:a})]})})}function N({width:e,height:n,className:i,style:a,...o}){let s={...e!==void 0&&{width:e},...n!==void 0&&{height:n}};return(0,t.jsx)(`span`,{...o,"aria-hidden":`true`,className:r(`tintora-skeleton`,i),style:{...s,...a}})}function P({checked:e,defaultChecked:n,onCheckedChange:i,className:a,...o}){let s=d({checked:e,defaultChecked:n,onCheckedChange:i});return(0,t.jsxs)(`span`,{className:r(`tintora-switch`,a),children:[(0,t.jsx)(`input`,{...o,type:`checkbox`,role:`switch`,className:`tintora-switch__input`,checked:s.checked,onChange:s.onChange}),(0,t.jsx)(`span`,{className:`tintora-switch__track`,"aria-hidden":`true`})]})}function F({children:e,className:n,variant:i=`neutral`,size:a=`medium`,...o}){return(0,t.jsx)(`span`,{...o,className:r(`tintora-tag`,`tintora-tag--${i}`,`tintora-tag--${a}`,n),children:e})}function I({label:n,hint:i,error:a,id:o,className:s,disabled:c,"aria-describedby":l,"aria-invalid":u,...d}){let f=(0,e.useId)(),p=o??f,m=`${p}-message`,h=a??i;return(0,t.jsxs)(`div`,{className:r(`tintora-textfield`,c&&`tintora-textfield--disabled`,s),children:[(0,t.jsx)(`label`,{htmlFor:p,className:`tintora-textfield__label`,children:n}),(0,t.jsx)(`input`,{...d,id:p,disabled:c,className:`tintora-textfield__input`,"aria-invalid":a?!0:u,"aria-describedby":r(h&&m,l)||void 0}),h&&(0,t.jsx)(`span`,{id:m,className:r(`tintora-textfield__hint`,a&&`tintora-textfield__hint--error`),children:h})]})}function L(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-success)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8`})})}function R(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-error)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6`})})}function z(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-info)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01`})})}function B(){return(0,t.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-toast-icon-warning)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`},children:(0,t.jsx)(`path`,{d:`M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01`})})}function V(){return(0,t.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.2`,strokeLinecap:`round`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})})}var H={success:(0,t.jsx)(L,{}),error:(0,t.jsx)(R,{}),info:(0,t.jsx)(z,{}),warning:(0,t.jsx)(B,{})};function U({status:n,children:i,action:a,onDismiss:o,duration:s=5e3,timerBar:c=!1,className:l,...u}){let[d,f]=(0,e.useState)(!1),[p,m]=(0,e.useState)(!1),h=d||p,g=T(o),_=(0,e.useRef)(s);(0,e.useEffect)(()=>{_.current=s},[s]),(0,e.useEffect)(()=>{if(s<=0||h)return;let e=Date.now(),t=setTimeout(()=>g.current(),_.current);return()=>{clearTimeout(t),_.current-=Date.now()-e}},[s,h,g]);let v=c&&s>0,y={"--tintora-toast-animation-duration":`${s}ms`};return(0,t.jsxs)(`div`,{...u,role:`status`,className:r(`tintora-toast`,v&&`tintora-toast--timer`,h&&`tintora-toast--paused`,l),onMouseEnter:e=>{u.onMouseEnter?.(e),f(!0)},onMouseLeave:e=>{u.onMouseLeave?.(e),f(!1)},onFocus:e=>{u.onFocus?.(e),m(!0)},onBlur:e=>{u.onBlur?.(e),e.currentTarget.contains(e.relatedTarget)||m(!1)},children:[n&&H[n],(0,t.jsx)(`span`,{className:`tintora-toast__message`,children:i}),a&&(0,t.jsx)(`button`,{type:`button`,className:`tintora-toast__action`,onClick:a.onClick,children:a.label}),(0,t.jsx)(`button`,{type:`button`,className:`tintora-toast__close`,"aria-label":`Dismiss`,onClick:o,children:(0,t.jsx)(V,{})}),v&&(0,t.jsx)(`span`,{className:`tintora-toast__progress`,style:y})]})}var W=(0,e.createContext)(null);function G(){let t=(0,e.useContext)(W);if(!t)throw Error(`ToggleItem must be rendered inside a Toggle`);return t}function K({children:n,value:i,defaultValue:a,onValueChange:o,disabled:s=!1,className:c,...l}){let[u,d]=(0,e.useState)(a),f=i!==void 0,p=f?i:u,m=n.findIndex(e=>e.props.value===p),h=(0,e.useRef)(null),[g,_]=(0,e.useState)({x:0,width:0});(0,e.useLayoutEffect)(()=>{let e=h.current;if(!e)return;let t=()=>{let t=e.children.item(m);if(!t)return;let n={x:t.offsetLeft,width:t.offsetWidth};_(e=>e.x===n.x&&e.width===n.width?e:n)};t();let n=new ResizeObserver(t);return n.observe(e),()=>{n.disconnect()}},[m]);let v={"--tintora-toggle-thumb-x":`${g.x}px`,"--tintora-toggle-thumb-width":`${g.width}px`};return(0,t.jsx)(W.Provider,{value:{value:p,select:e=>{e!==p&&(f||d(e),o?.(e))},disabled:s},children:(0,t.jsxs)(`div`,{...l,role:`group`,ref:h,className:r(`tintora-toggle`,s&&`tintora-toggle--disabled`,c),children:[n,(0,t.jsx)(`span`,{"aria-hidden":`true`,className:`tintora-toggle__thumb`,style:v})]})})}function q({value:e,children:n,className:i,disabled:a,onClick:o,...s}){let c=G(),l=t=>{o?.(t),t.defaultPrevented||c.select(e)};return(0,t.jsx)(`button`,{...s,type:`button`,className:r(`tintora-toggle__item`,i),"aria-pressed":c.value===e,disabled:a||c.disabled,onClick:l,children:n})}var J={gap:10,margin:8,arrowInset:12},Y={top:`bottom`,bottom:`top`,left:`right`,right:`left`},X=(e,t,n)=>Math.min(Math.max(e,t),Math.max(t,n));function Z(e,t,n,r,{gap:i,margin:a}){let o=t=>{switch(t){case`top`:return e.top;case`bottom`:return r.height-e.bottom;case`left`:return e.left;case`right`:return r.width-e.right}},s=(n===`top`||n===`bottom`?t.height:t.width)+i+a,c=o(n);return c>=s||o(Y[n])<=c?n:Y[n]}function Q(e,t,n,r={width:window.innerWidth,height:window.innerHeight},i={}){let a={...J,...i},{gap:o,margin:s,arrowInset:c}=a,l=Z(e,t,n,r,a),u=l===`top`||l===`bottom`,d,f;switch(l){case`top`:d=e.y-t.height-o,f=e.x+e.width/2-t.width/2;break;case`bottom`:d=e.y+e.height+o,f=e.x+e.width/2-t.width/2;break;case`left`:d=e.y+e.height/2-t.height/2,f=e.x-t.width-o;break;case`right`:d=e.y+e.height/2-t.height/2,f=e.x+e.width+o}u?f=X(f,s,r.width-t.width-s):d=X(d,s,r.height-t.height-s);let p=u?e.x+e.width/2-f:e.y+e.height/2-d,m=u?t.width:t.height;return{top:d,left:f,placement:l,arrowOffset:X(p,c,m-c)}}function $(t,n){let r=T(n);(0,e.useEffect)(()=>{if(!t)return;let e=e=>{e.key===`Escape`&&r.current()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[t,r])}var ee=100;function te({title:n,content:i,shortcut:a,children:o,className:s,placement:c=`top`}){let l=(0,e.useId)(),[u,d]=(0,e.useState)(!1),f=(0,e.useRef)(null),p=(0,e.useRef)(null),m=(0,e.useRef)(void 0),h=()=>{window.clearTimeout(m.current),d(!0)},g=()=>{window.clearTimeout(m.current),m.current=window.setTimeout(()=>d(!1),ee)},_=D(u,p,()=>{let e=p.current,t=f.current?.firstElementChild;return!e||!t?null:Q(t.getBoundingClientRect(),{width:e.offsetWidth,height:e.offsetHeight},c)},[c,n,i,a]);$(u,()=>d(!1)),(0,e.useEffect)(()=>()=>window.clearTimeout(m.current),[]);let v=_?{top:_.top,left:_.left,"--tintora-tooltip-arrow-offset":`${_.arrowOffset}px`}:{visibility:`hidden`};return(0,t.jsxs)(`span`,{ref:f,className:`tintora-tooltip`,onMouseEnter:h,onMouseLeave:g,onFocus:h,onBlur:g,children:[(0,e.cloneElement)(o,{"aria-describedby":r(o.props[`aria-describedby`],u&&l)||void 0}),u&&(0,t.jsxs)(`div`,{id:l,ref:p,role:`tooltip`,popover:`manual`,style:v,className:r(`tintora-tooltip__content`,`tintora-tooltip__content--${_?.placement??c}`,n&&`tintora-tooltip__content--rich`,s),children:[n&&(0,t.jsx)(`span`,{className:`tintora-tooltip__title`,children:n}),(0,t.jsx)(`span`,{className:`tintora-tooltip__text`,children:i}),a&&(0,t.jsx)(`kbd`,{className:`tintora-tooltip__shortcut`,children:a})]})]})}exports.Avatar=a,exports.Button=c,exports.Card=l,exports.Checkbox=f,exports.Chip=p,exports.Dot=m,exports.IconButton=g,exports.Modal=v,exports.ProgressBar=y,exports.Radio=S,exports.RadioGroup=C,exports.SearchInput=w,exports.Select=M,exports.SelectableCard=u,exports.Skeleton=N,exports.Spinner=s,exports.Switch=P,exports.Tag=F,exports.TextField=I,exports.Toast=U,exports.Toggle=K,exports.ToggleItem=q,exports.Tooltip=te;

package/dist/index.js

@@ -136,7 +136,7 @@ function v({ selected: e = !1, className: t, ...n }) {
 	});
 }
 //#endregion
-//#region src/useCheckedState.ts
+//#region src/hooks/useCheckedState.ts
 function y({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
 	let [r, i] = s(t), a = e !== void 0;
 	return {
@@ -383,7 +383,7 @@ function j({ value: e, defaultValue: t, onValueChange: n, disabled: r = !1, name
 }
 //#endregion
 //#region src/SearchInput/SearchInput.tsx
-function ee({ className: e, disabled: t, ...n }) {
+function M({ className: e, disabled: t, ...n }) {
 	return /* @__PURE__ */ l("label", {
 		className: d("tintora-search-input", t && "tintora-search-input--disabled", e),
 		children: [/* @__PURE__ */ l("svg", {
@@ -408,16 +408,63 @@ function ee({ className: e, disabled: t, ...n }) {
 	});
 }
 //#endregion
+//#region src/hooks/useLatest.ts
+function N(e) {
+	let t = o(e);
+	return r(() => {
+		t.current = e;
+	}, [e]), t;
+}
+//#endregion
+//#region src/hooks/useOutsidePress.ts
+function P(e, t, n) {
+	let i = N(n);
+	r(() => {
+		if (!e) return;
+		let n = (e) => {
+			t.current?.contains(e.target) || i.current();
+		};
+		return document.addEventListener("pointerdown", n), () => document.removeEventListener("pointerdown", n);
+	}, [
+		e,
+		t,
+		i
+	]);
+}
+//#endregion
+//#region src/hooks/useTopLayerPosition.ts
+function F(e, t, n, r) {
+	let [i, o] = s(null);
+	return a(() => {
+		let r = t.current;
+		if (!e || !r) {
+			o(null);
+			return;
+		}
+		r.showPopover();
+		let i = () => o(n()), a = (e) => {
+			r.contains(e.target) || i();
+		};
+		return i(), window.addEventListener("scroll", a, !0), window.addEventListener("resize", i), () => {
+			window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", i);
+		};
+	}, [
+		e,
+		t,
+		...r
+	]), i;
+}
+//#endregion
 //#region src/Select/SelectContext.ts
-var M = t(null), N = () => {
-	let e = n(M);
+var I = t(null), L = () => {
+	let e = n(I);
 	if (!e) throw Error("SelectOption must be rendered inside a Select");
 	return e;
 };
 //#endregion
 //#region src/Select/SelectOption.tsx
-function te({ label: e, value: t, disabled: n }) {
-	let { select: r, activate: i, optionId: a, value: o, activeValue: s } = N();
+function ee({ label: e, value: t, disabled: n }) {
+	let { select: r, activate: i, optionId: a, value: o, activeValue: s } = L();
 	return /* @__PURE__ */ c("div", {
 		id: a(t),
 		role: "option",
@@ -431,24 +478,24 @@ function te({ label: e, value: t, disabled: n }) {
 }
 //#endregion
 //#region src/Select/Select.tsx
-var P = 4;
-function F({ defaultValue: e, options: t, disabled: n, value: u, placeholder: f, onValueChange: p, name: m, className: h, onClick: g, onKeyDown: _, onKeyUp: v, "aria-label": y, ...b }) {
-	let x = i(), S = o(null), C = o(null), w = o(null), [T, E] = s(e ?? null), [D, O] = s(!1), [k, A] = s(-1), [j, ee] = s({}), N = u !== void 0, F = N ? u : T, I = t.findIndex((e) => e.value === F), L = (e) => t[e]?.disabled !== !0, R = () => t.findIndex((e, t) => L(t)), z = (e, n) => {
-		for (let r = e + n; r >= 0 && r < t.length; r += n) if (L(r)) return r;
+var R = 4;
+function z({ defaultValue: e, options: t, disabled: n, value: a, placeholder: u, onValueChange: f, name: p, className: m, onClick: h, onKeyDown: g, onKeyUp: _, "aria-label": v, ...y }) {
+	let b = i(), x = o(null), S = o(null), C = o(null), [w, T] = s(e ?? null), [E, D] = s(!1), [O, k] = s(-1), A = a !== void 0, j = A ? a : w, M = t.findIndex((e) => e.value === j), N = (e) => t[e]?.disabled !== !0, L = () => t.findIndex((e, t) => N(t)), z = (e, n) => {
+		for (let r = e + n; r >= 0 && r < t.length; r += n) if (N(r)) return r;
 		return e;
 	}, B = () => {
 		let e = z(t.length, -1);
 		return e === t.length ? -1 : e;
 	}, V = (e) => t.findIndex((t) => t.value === e), H = () => {
-		A(I >= 0 && L(I) ? I : R()), O(!0);
-	}, U = () => O(!1), W = (e) => {
+		k(M >= 0 && N(M) ? M : L()), D(!0);
+	}, U = () => D(!1), W = (e) => {
 		let t = V(e);
-		t < 0 || !L(t) || (U(), e !== F && (N || E(e), p?.(e)));
-	}, ne = (e) => {
-		if (_?.(e), e.defaultPrevented) return;
+		t < 0 || !N(t) || (U(), e !== j && (A || T(e), f?.(e)));
+	}, G = (e) => {
+		if (g?.(e), e.defaultPrevented) return;
 		let { key: n } = e;
 		if (n === "Tab") return U();
-		if (!D) {
+		if (!E) {
 			[
 				"Enter",
 				" ",
@@ -458,72 +505,60 @@ function F({ defaultValue: e, options: t, disabled: n, value: u, placeholder: f,
 			return;
 		}
 		let r = {
-			ArrowDown: () => k < 0 ? R() : z(k, 1),
-			ArrowUp: () => k < 0 ? R() : z(k, -1),
-			Home: R,
+			ArrowDown: () => O < 0 ? L() : z(O, 1),
+			ArrowUp: () => O < 0 ? L() : z(O, -1),
+			Home: L,
 			End: B
 		};
-		n in r ? (e.preventDefault(), A(r[n]())) : n === "Enter" || n === " " ? (e.preventDefault(), k >= 0 ? W(t[k].value) : U()) : n === "Escape" && (e.preventDefault(), U());
-	}, G = (e) => {
-		v?.(e), e.key === " " && e.preventDefault();
-	}, K = () => {
-		let e = w.current, t = C.current;
-		if (!e || !t) return;
-		let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + P + r <= window.innerHeight, a = n.top - P - r >= 0;
-		ee({
-			top: i || !a ? n.bottom + P : n.top - P - r,
+		n in r ? (e.preventDefault(), k(r[n]())) : n === "Enter" || n === " " ? (e.preventDefault(), O >= 0 ? W(t[O].value) : U()) : n === "Escape" && (e.preventDefault(), U());
+	}, K = (e) => {
+		_?.(e), e.key === " " && e.preventDefault();
+	}, q = F(E, C, () => {
+		let e = C.current, t = S.current;
+		if (!e || !t) return null;
+		let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + R + r <= window.innerHeight, a = n.top - R - r >= 0;
+		return {
+			top: i || !a ? n.bottom + R : n.top - R - r,
 			left: n.left,
 			minWidth: n.width
-		});
-	}, q = (e) => {
-		g?.(e), !e.defaultPrevented && (D ? U() : H());
-	};
-	a(() => {
-		D && (w.current?.showPopover(), K());
-	}, [D]), r(() => {
-		if (!D) return;
-		let e = (e) => {
-			S.current?.contains(e.target) || U();
-		}, t = (e) => {
-			w.current?.contains(e.target) || K();
 		};
-		return document.addEventListener("pointerdown", e), window.addEventListener("scroll", t, !0), window.addEventListener("resize", K), () => {
-			document.removeEventListener("pointerdown", e), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", K);
-		};
-	}, [D]), r(() => {
-		D && k >= 0 && w.current?.children.item(k)?.scrollIntoView?.({ block: "nearest" });
-	}, [D, k]);
-	let J = (e) => `${x}-option-${V(e)}`, Y = D ? t[k]?.value ?? null : null, X = t[I]?.label;
-	return /* @__PURE__ */ c(M.Provider, {
+	}, []), J = (e) => {
+		h?.(e), !e.defaultPrevented && (E ? U() : H());
+	};
+	P(E, x, U), r(() => {
+		E && O >= 0 && C.current?.children.item(O)?.scrollIntoView?.({ block: "nearest" });
+	}, [E, O]);
+	let Y = (e) => `${b}-option-${V(e)}`, X = E ? t[O]?.value ?? null : null, Z = t[M]?.label;
+	return /* @__PURE__ */ c(I.Provider, {
 		value: {
-			value: F,
-			activeValue: Y,
+			value: j,
+			activeValue: X,
 			select: W,
-			optionId: J,
-			activate: (e) => A(V(e))
+			optionId: Y,
+			activate: (e) => k(V(e))
 		},
 		children: /* @__PURE__ */ l("div", {
-			ref: S,
+			ref: x,
 			className: "tintora-select",
 			children: [
 				/* @__PURE__ */ l("button", {
-					...b,
-					ref: C,
+					...y,
+					ref: S,
 					type: "button",
 					role: "combobox",
-					"aria-label": y,
+					"aria-label": v,
 					"aria-haspopup": "listbox",
-					"aria-expanded": D,
-					"aria-controls": D ? x : void 0,
-					"aria-activedescendant": Y === null ? void 0 : J(Y),
+					"aria-expanded": E,
+					"aria-controls": E ? b : void 0,
+					"aria-activedescendant": X === null ? void 0 : Y(X),
 					disabled: n,
-					className: d("tintora-select__trigger", h),
-					onClick: q,
-					onKeyDown: ne,
-					onKeyUp: G,
+					className: d("tintora-select__trigger", m),
+					onClick: J,
+					onKeyDown: G,
+					onKeyUp: K,
 					children: [/* @__PURE__ */ c("span", {
-						className: d("tintora-select__value", X === void 0 && "tintora-select__value--placeholder"),
-						children: X ?? f
+						className: d("tintora-select__value", Z === void 0 && "tintora-select__value--placeholder"),
+						children: Z ?? u
 					}), /* @__PURE__ */ c("svg", {
 						className: "tintora-select__chevron",
 						width: "10",
@@ -538,21 +573,21 @@ function F({ defaultValue: e, options: t, disabled: n, value: u, placeholder: f,
 						children: /* @__PURE__ */ c("path", { d: "M6 9l6 6 6-6" })
 					})]
 				}),
-				D && /* @__PURE__ */ c("div", {
-					ref: w,
-					id: x,
+				E && /* @__PURE__ */ c("div", {
+					ref: C,
+					id: b,
 					role: "listbox",
-					"aria-label": y,
+					"aria-label": v,
 					popover: "manual",
 					className: "tintora-select__menu",
-					style: j,
+					style: q ?? {},
 					onMouseDown: (e) => e.preventDefault(),
-					children: t.map((e) => /* @__PURE__ */ c(te, { ...e }, e.value))
+					children: t.map((e) => /* @__PURE__ */ c(ee, { ...e }, e.value))
 				}),
-				m && /* @__PURE__ */ c("input", {
+				p && /* @__PURE__ */ c("input", {
 					type: "hidden",
-					name: m,
-					value: F ?? "",
+					name: p,
+					value: j ?? "",
 					disabled: n
 				})
 			]
@@ -561,7 +596,7 @@ function F({ defaultValue: e, options: t, disabled: n, value: u, placeholder: f,
 }
 //#endregion
 //#region src/Skeleton/Skeleton.tsx
-function I({ width: e, height: t, className: n, style: r, ...i }) {
+function B({ width: e, height: t, className: n, style: r, ...i }) {
 	let a = {
 		...e !== void 0 && { width: e },
 		...t !== void 0 && { height: t }
@@ -578,7 +613,7 @@ function I({ width: e, height: t, className: n, style: r, ...i }) {
 }
 //#endregion
 //#region src/Switch/Switch.tsx
-function L({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ...i }) {
+function V({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ...i }) {
 	let a = y({
 		checked: e,
 		defaultChecked: t,
@@ -601,7 +636,7 @@ function L({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ..
 }
 //#endregion
 //#region src/Tag/Tag.tsx
-function R({ children: e, className: t, variant: n = "neutral", size: r = "medium", ...i }) {
+function H({ children: e, className: t, variant: n = "neutral", size: r = "medium", ...i }) {
 	return /* @__PURE__ */ c("span", {
 		...i,
 		className: d("tintora-tag", `tintora-tag--${n}`, `tintora-tag--${r}`, t),
@@ -610,7 +645,7 @@ function R({ children: e, className: t, variant: n = "neutral", size: r = "mediu
 }
 //#endregion
 //#region src/TextField/TextField.tsx
-function z({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "aria-describedby": s, "aria-invalid": u, ...f }) {
+function U({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "aria-describedby": s, "aria-invalid": u, ...f }) {
 	let p = i(), m = r ?? p, h = `${m}-message`, g = n ?? t;
 	return /* @__PURE__ */ l("div", {
 		className: d("tintora-textfield", o && "tintora-textfield--disabled", a),
@@ -638,7 +673,7 @@ function z({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "ari
 }
 //#endregion
 //#region src/Toast/ToastIcons.tsx
-function B() {
+function W() {
 	return /* @__PURE__ */ c("svg", {
 		width: "20",
 		height: "20",
@@ -653,7 +688,7 @@ function B() {
 		children: /* @__PURE__ */ c("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" })
 	});
 }
-function V() {
+function G() {
 	return /* @__PURE__ */ c("svg", {
 		width: "20",
 		height: "20",
@@ -668,7 +703,7 @@ function V() {
 		children: /* @__PURE__ */ c("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
 	});
 }
-function H() {
+function K() {
 	return /* @__PURE__ */ c("svg", {
 		width: "20",
 		height: "20",
@@ -683,7 +718,7 @@ function H() {
 		children: /* @__PURE__ */ c("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" })
 	});
 }
-function U() {
+function q() {
 	return /* @__PURE__ */ c("svg", {
 		width: "20",
 		height: "20",
@@ -698,7 +733,7 @@ function U() {
 		children: /* @__PURE__ */ c("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" })
 	});
 }
-function W() {
+function J() {
 	return /* @__PURE__ */ c("svg", {
 		width: "14",
 		height: "14",
@@ -713,18 +748,14 @@ function W() {
 }
 //#endregion
 //#region src/Toast/Toast.tsx
-var ne = {
-	success: /* @__PURE__ */ c(B, {}),
-	error: /* @__PURE__ */ c(V, {}),
-	info: /* @__PURE__ */ c(H, {}),
-	warning: /* @__PURE__ */ c(U, {})
+var Y = {
+	success: /* @__PURE__ */ c(W, {}),
+	error: /* @__PURE__ */ c(G, {}),
+	info: /* @__PURE__ */ c(K, {}),
+	warning: /* @__PURE__ */ c(q, {})
 };
-function G({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3, timerBar: u = !1, className: f, ...p }) {
-	let [m, h] = s(!1), [g, _] = s(!1), v = m || g, y = o(i);
-	r(() => {
-		y.current = i;
-	}, [i]);
-	let b = o(a);
+function X({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3, timerBar: u = !1, className: f, ...p }) {
+	let [m, h] = s(!1), [g, _] = s(!1), v = m || g, y = N(i), b = o(a);
 	r(() => {
 		b.current = a;
 	}, [a]), r(() => {
@@ -733,7 +764,11 @@ function G({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3,
 		return () => {
 			clearTimeout(t), b.current -= Date.now() - e;
 		};
-	}, [a, v]);
+	}, [
+		a,
+		v,
+		y
+	]);
 	let x = u && a > 0, S = { "--tintora-toast-animation-duration": `${a}ms` };
 	return /* @__PURE__ */ l("div", {
 		...p,
@@ -752,7 +787,7 @@ function G({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3,
 			p.onBlur?.(e), e.currentTarget.contains(e.relatedTarget) || _(!1);
 		},
 		children: [
-			e && ne[e],
+			e && Y[e],
 			/* @__PURE__ */ c("span", {
 				className: "tintora-toast__message",
 				children: t
@@ -768,7 +803,7 @@ function G({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3,
 				className: "tintora-toast__close",
 				"aria-label": "Dismiss",
 				onClick: i,
-				children: /* @__PURE__ */ c(W, {})
+				children: /* @__PURE__ */ c(J, {})
 			}),
 			x && /* @__PURE__ */ c("span", {
 				className: "tintora-toast__progress",
@@ -779,15 +814,15 @@ function G({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3,
 }
 //#endregion
 //#region src/Toggle/ToggleContext.ts
-var K = t(null);
-function q() {
-	let e = n(K);
+var Z = t(null);
+function te() {
+	let e = n(Z);
 	if (!e) throw Error("ToggleItem must be rendered inside a Toggle");
 	return e;
 }
 //#endregion
 //#region src/Toggle/Toggle.tsx
-function J({ children: e, value: t, defaultValue: n, onValueChange: r, disabled: i = !1, className: u, ...f }) {
+function ne({ children: e, value: t, defaultValue: n, onValueChange: r, disabled: i = !1, className: u, ...f }) {
 	let [p, m] = s(n), h = t !== void 0, g = h ? t : p, _ = e.findIndex((e) => e.props.value === g), v = o(null), [y, b] = s({
 		x: 0,
 		width: 0
@@ -814,7 +849,7 @@ function J({ children: e, value: t, defaultValue: n, onValueChange: r, disabled:
 		"--tintora-toggle-thumb-x": `${y.x}px`,
 		"--tintora-toggle-thumb-width": `${y.width}px`
 	};
-	return /* @__PURE__ */ c(K.Provider, {
+	return /* @__PURE__ */ c(Z.Provider, {
 		value: {
 			value: g,
 			select: (e) => {
@@ -837,8 +872,8 @@ function J({ children: e, value: t, defaultValue: n, onValueChange: r, disabled:
 }
 //#endregion
 //#region src/Toggle/ToggleItem.tsx
-function Y({ value: e, children: t, className: n, disabled: r, onClick: i, ...a }) {
-	let o = q(), s = (t) => {
+function re({ value: e, children: t, className: n, disabled: r, onClick: i, ...a }) {
+	let o = te(), s = (t) => {
 		i?.(t), t.defaultPrevented || o.select(e);
 	};
 	return /* @__PURE__ */ c("button", {
@@ -852,94 +887,109 @@ function Y({ value: e, children: t, className: n, disabled: r, onClick: i, ...a
 	});
 }
 //#endregion
-//#region src/Tooltip/Tooltip.tsx
-var X = 10, re = 100, Z = 8, ie = 12, Q = {
+//#region src/utils/placement.ts
+var ie = {
+	gap: 10,
+	margin: 8,
+	arrowInset: 12
+}, Q = {
 	top: "bottom",
 	bottom: "top",
 	left: "right",
 	right: "left"
 }, $ = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
-function ae(e, t, n, r) {
-	let i = (t) => {
+function ae(e, t, n, r, { gap: i, margin: a }) {
+	let o = (t) => {
 		switch (t) {
 			case "top": return e.top;
 			case "bottom": return r.height - e.bottom;
 			case "left": return e.left;
 			case "right": return r.width - e.right;
 		}
-	}, a = (n === "top" || n === "bottom" ? t.height : t.width) + X + Z, o = i(n);
-	return o >= a || i(Q[n]) <= o ? n : Q[n];
+	}, s = (n === "top" || n === "bottom" ? t.height : t.width) + i + a, c = o(n);
+	return c >= s || o(Q[n]) <= c ? n : Q[n];
 }
 function oe(e, t, n, r = {
 	width: window.innerWidth,
 	height: window.innerHeight
-}) {
-	let i = ae(e, t, n, r), a = i === "top" || i === "bottom", o, s;
-	switch (i) {
+}, i = {}) {
+	let a = {
+		...ie,
+		...i
+	}, { gap: o, margin: s, arrowInset: c } = a, l = ae(e, t, n, r, a), u = l === "top" || l === "bottom", d, f;
+	switch (l) {
 		case "top":
-			o = e.y - t.height - X, s = e.x + e.width / 2 - t.width / 2;
+			d = e.y - t.height - o, f = e.x + e.width / 2 - t.width / 2;
 			break;
 		case "bottom":
-			o = e.y + e.height + X, s = e.x + e.width / 2 - t.width / 2;
+			d = e.y + e.height + o, f = e.x + e.width / 2 - t.width / 2;
 			break;
 		case "left":
-			o = e.y + e.height / 2 - t.height / 2, s = e.x - t.width - X;
+			d = e.y + e.height / 2 - t.height / 2, f = e.x - t.width - o;
 			break;
-		case "right": o = e.y + e.height / 2 - t.height / 2, s = e.x + e.width + X;
+		case "right": d = e.y + e.height / 2 - t.height / 2, f = e.x + e.width + o;
 	}
-	a ? s = $(s, Z, r.width - t.width - Z) : o = $(o, Z, r.height - t.height - Z);
-	let c = a ? e.x + e.width / 2 - s : e.y + e.height / 2 - o, l = a ? t.width : t.height;
+	u ? f = $(f, s, r.width - t.width - s) : d = $(d, s, r.height - t.height - s);
+	let p = u ? e.x + e.width / 2 - f : e.y + e.height / 2 - d, m = u ? t.width : t.height;
 	return {
-		top: o,
-		left: s,
-		placement: i,
-		arrowOffset: $(c, ie, l - ie)
+		top: d,
+		left: f,
+		placement: l,
+		arrowOffset: $(p, c, m - c)
 	};
 }
-function se({ title: t, content: n, shortcut: u, children: f, className: p, placement: m = "top" }) {
-	let h = i(), [g, _] = s(!1), [v, y] = s(null), b = o(null), x = o(null), S = o(void 0), C = () => {
-		window.clearTimeout(S.current), _(!0);
-	}, w = () => {
-		window.clearTimeout(S.current), S.current = window.setTimeout(() => _(!1), re);
-	};
-	a(() => {
-		let e = x.current, t = b.current?.firstElementChild;
-		!g || !e || !t ? y(null) : (e.showPopover(), y(oe(t.getBoundingClientRect(), {
+//#endregion
+//#region src/hooks/useEscapeKey.ts
+function se(e, t) {
+	let n = N(t);
+	r(() => {
+		if (!e) return;
+		let t = (e) => {
+			e.key === "Escape" && n.current();
+		};
+		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+	}, [e, n]);
+}
+//#endregion
+//#region src/Tooltip/Tooltip.tsx
+var ce = 100;
+function le({ title: t, content: n, shortcut: a, children: u, className: f, placement: p = "top" }) {
+	let m = i(), [h, g] = s(!1), _ = o(null), v = o(null), y = o(void 0), b = () => {
+		window.clearTimeout(y.current), g(!0);
+	}, x = () => {
+		window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1), ce);
+	}, S = F(h, v, () => {
+		let e = v.current, t = _.current?.firstElementChild;
+		return !e || !t ? null : oe(t.getBoundingClientRect(), {
 			width: e.offsetWidth,
 			height: e.offsetHeight
-		}, m)));
+		}, p);
 	}, [
-		g,
-		m,
+		p,
 		t,
 		n,
-		u
-	]), r(() => {
-		if (!g) return;
-		let e = (e) => {
-			e.key === "Escape" && _(!1);
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [g]), r(() => () => window.clearTimeout(S.current), []);
-	let T = v ? {
-		top: v.top,
-		left: v.left,
-		"--tintora-tooltip-arrow-offset": `${v.arrowOffset}px`
+		a
+	]);
+	se(h, () => g(!1)), r(() => () => window.clearTimeout(y.current), []);
+	let C = S ? {
+		top: S.top,
+		left: S.left,
+		"--tintora-tooltip-arrow-offset": `${S.arrowOffset}px`
 	} : { visibility: "hidden" };
 	return /* @__PURE__ */ l("span", {
-		ref: b,
+		ref: _,
 		className: "tintora-tooltip",
-		onMouseEnter: C,
-		onMouseLeave: w,
-		onFocus: C,
-		onBlur: w,
-		children: [e(f, { "aria-describedby": d(f.props["aria-describedby"], g && h) || void 0 }), g && /* @__PURE__ */ l("div", {
-			id: h,
-			ref: x,
+		onMouseEnter: b,
+		onMouseLeave: x,
+		onFocus: b,
+		onBlur: x,
+		children: [e(u, { "aria-describedby": d(u.props["aria-describedby"], h && m) || void 0 }), h && /* @__PURE__ */ l("div", {
+			id: m,
+			ref: v,
 			role: "tooltip",
 			popover: "manual",
-			style: T,
-			className: d("tintora-tooltip__content", `tintora-tooltip__content--${v?.placement ?? m}`, t && "tintora-tooltip__content--rich", p),
+			style: C,
+			className: d("tintora-tooltip__content", `tintora-tooltip__content--${S?.placement ?? p}`, t && "tintora-tooltip__content--rich", f),
 			children: [
 				t && /* @__PURE__ */ c("span", {
 					className: "tintora-tooltip__title",
@@ -949,13 +999,13 @@ function se({ title: t, content: n, shortcut: u, children: f, className: p, plac
 					className: "tintora-tooltip__text",
 					children: n
 				}),
-				u && /* @__PURE__ */ c("kbd", {
+				a && /* @__PURE__ */ c("kbd", {
 					className: "tintora-tooltip__shortcut",
-					children: u
+					children: a
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { p as Avatar, g as Button, _ as Card, b as Checkbox, x as Chip, S as Dot, w as IconButton, E as Modal, D as ProgressBar, A as Radio, j as RadioGroup, ee as SearchInput, F as Select, v as SelectableCard, I as Skeleton, h as Spinner, L as Switch, R as Tag, z as TextField, G as Toast, J as Toggle, Y as ToggleItem, se as Tooltip };
+export { p as Avatar, g as Button, _ as Card, b as Checkbox, x as Chip, S as Dot, w as IconButton, E as Modal, D as ProgressBar, A as Radio, j as RadioGroup, M as SearchInput, z as Select, v as SelectableCard, B as Skeleton, h as Spinner, V as Switch, H as Tag, U as TextField, X as Toast, ne as Toggle, re as ToggleItem, le as Tooltip };

package/dist/utils/placement.d.ts

@@ -0,0 +1,30 @@
+/** Where to put a popup (tooltip, popover) next to its trigger. */
+export type Placement = 'top' | 'bottom' | 'left' | 'right';
+export interface PlacementOptions {
+    /** Space between the anchor and the popup (an arrow sits inside it). */
+    gap: number;
+    /** Closest the popup may get to a viewport edge. */
+    margin: number;
+    /** Keeps the arrow clear of the popup's rounded corners. */
+    arrowInset: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Position {
+    top: number;
+    left: number;
+    /** The side it really opens on: the requested one, or the opposite if flipped. */
+    placement: Placement;
+    /** Distance in px from the popup's start edge to the arrow's centre. */
+    arrowOffset: number;
+}
+/**
+ * Viewport coordinates for the popup's top-left corner, given the trigger's
+ * rect, the popup's own size, the side it should open on and the viewport.
+ * It flips to the opposite side when there is no room, and is kept inside the
+ * viewport along the other axis (the arrow then moves to keep pointing at the
+ * trigger).
+ */
+export declare function getPosition(anchor: DOMRect, tooltip: Size, requested: Placement, viewport?: Size, options?: Partial<PlacementOptions>): Position;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tintora",
-    "version": "0.20.0",
+    "version": "0.21.0",
     "license": "MIT",
     "type": "module",
     "repository": {