tintora 0.19.0 → 0.21.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.
- package/dist/Checkbox/Checkbox.d.ts +1 -1
- package/dist/Switch/Switch.d.ts +1 -1
- package/dist/Toast/Toast.d.ts +29 -0
- package/dist/Toast/ToastIcons.d.ts +5 -0
- package/dist/Tooltip/Tooltip.d.ts +2 -22
- package/dist/hooks/useEscapeKey.d.ts +2 -0
- package/dist/hooks/useLatest.d.ts +5 -0
- package/dist/hooks/useOutsidePress.d.ts +6 -0
- package/dist/hooks/useTopLayerPosition.d.ts +9 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +341 -150
- package/dist/tintora.css +1 -1
- package/dist/utils/placement.d.ts +30 -0
- package/package.json +1 -1
- /package/dist/{useCheckedState.d.ts → hooks/useCheckedState.d.ts} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type InputHTMLAttributes } from 'react';
|
|
2
|
-
import { type CheckedStateProps } from '../useCheckedState';
|
|
2
|
+
import { type CheckedStateProps } from '../hooks/useCheckedState';
|
|
3
3
|
import './Checkbox.css';
|
|
4
4
|
interface CheckboxBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'children' | 'checked' | 'defaultChecked' | 'onChange'> {
|
|
5
5
|
/** Names the checkbox for assistive tech, e.g. "Select all". Required. */
|
package/dist/Switch/Switch.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { InputHTMLAttributes } from 'react';
|
|
2
|
-
import { type CheckedStateProps } from '../useCheckedState';
|
|
2
|
+
import { type CheckedStateProps } from '../hooks/useCheckedState';
|
|
3
3
|
import './Switch.css';
|
|
4
4
|
interface SwitchBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'children' | 'checked' | 'defaultChecked' | 'onChange'> {
|
|
5
5
|
/** Names the switch for assistive tech, e.g. "Wi-Fi". Required. */
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
|
+
import './Toast.css';
|
|
3
|
+
type ToastStatus = 'success' | 'error' | 'info' | 'warning';
|
|
4
|
+
export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> {
|
|
5
|
+
/** The message. */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/** Picks the icon and its colour. */
|
|
8
|
+
status?: ToastStatus;
|
|
9
|
+
/** One text button, e.g. Undo or Retry. */
|
|
10
|
+
action?: {
|
|
11
|
+
label: string;
|
|
12
|
+
onClick: () => void;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Called by the close button and when `duration` runs out. The parent
|
|
16
|
+
* removes the toast; Toast is controlled, like Modal.
|
|
17
|
+
*/
|
|
18
|
+
onDismiss: () => void;
|
|
19
|
+
/**
|
|
20
|
+
* Ms before `onDismiss` fires. The clock pauses while the toast is hovered
|
|
21
|
+
* or has focus, and resumes with the time that was left. 0 turns
|
|
22
|
+
* auto-dismiss off. @default 5000
|
|
23
|
+
*/
|
|
24
|
+
duration?: number;
|
|
25
|
+
/** Show the 4px bar for the time left. Needs a `duration` above 0. @default false */
|
|
26
|
+
timerBar?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export declare function Toast({ status, children, action, onDismiss, duration, timerBar, className, ...props }: ToastProps): import("react").JSX.Element;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function SuccessIcon(): import("react").JSX.Element;
|
|
2
|
+
export declare function ErrorIcon(): import("react").JSX.Element;
|
|
3
|
+
export declare function InfoIcon(): import("react").JSX.Element;
|
|
4
|
+
export declare function WarningIcon(): import("react").JSX.Element;
|
|
5
|
+
export declare function CloseIcon(): import("react").JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type ReactElement } from 'react';
|
|
2
|
+
import { type Placement } from '../utils/placement';
|
|
2
3
|
import './Tooltip.css';
|
|
3
|
-
export type TooltipPlacement =
|
|
4
|
+
export type TooltipPlacement = Placement;
|
|
4
5
|
export interface TooltipProps {
|
|
5
6
|
/** The text. Required, and what a screen reader announces. */
|
|
6
7
|
content: string;
|
|
@@ -16,25 +17,4 @@ export interface TooltipProps {
|
|
|
16
17
|
}>;
|
|
17
18
|
className?: string;
|
|
18
19
|
}
|
|
19
|
-
interface Size {
|
|
20
|
-
width: number;
|
|
21
|
-
height: number;
|
|
22
|
-
}
|
|
23
|
-
interface Position {
|
|
24
|
-
top: number;
|
|
25
|
-
left: number;
|
|
26
|
-
/** The side it really opens on: the requested one, or the opposite if flipped. */
|
|
27
|
-
placement: TooltipPlacement;
|
|
28
|
-
/** Distance in px from the tooltip's start edge to the arrow's centre. */
|
|
29
|
-
arrowOffset: number;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Viewport coordinates for the tooltip's top-left corner, given the trigger's
|
|
33
|
-
* rect, the tooltip's own size, the side it should open on and the viewport.
|
|
34
|
-
* It flips to the opposite side when there is no room, and is kept inside the
|
|
35
|
-
* viewport along the other axis (the arrow then moves to keep pointing at the
|
|
36
|
-
* trigger).
|
|
37
|
-
*/
|
|
38
|
-
export declare function getPosition(anchor: DOMRect, tooltip: Size, requested: TooltipPlacement, viewport?: Size): Position;
|
|
39
20
|
export declare function Tooltip({ title, content, shortcut, children, className, placement, }: TooltipProps): import("react").JSX.Element;
|
|
40
|
-
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Calls `onPress` when a pointer goes down outside `ref`, while `active`.
|
|
4
|
+
* A `popover="manual"` has no light dismiss of its own, so components add it.
|
|
5
|
+
*/
|
|
6
|
+
export declare function useOutsidePress(active: boolean, ref: RefObject<HTMLElement | null>, onPress: () => void): void;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type DependencyList, type RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Shows a `popover="manual"` element in the top layer (so no card clips it)
|
|
4
|
+
* and returns where `place` says it goes. `place` measures the trigger and the
|
|
5
|
+
* popup, so it runs once the popup is in the DOM, again when `deps` change,
|
|
6
|
+
* and whenever the page scrolls or resizes, because the popup is fixed to the
|
|
7
|
+
* viewport. The result is `null` while closed.
|
|
8
|
+
*/
|
|
9
|
+
export declare function useTopLayerPosition<T>(open: boolean, popupRef: RefObject<HTMLElement | null>, place: () => T | null, deps: DependencyList): T | null;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +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})]})}var P=(0,e.createContext)(null);function F(){let t=(0,e.useContext)(P);if(!t)throw Error(`ToggleItem must be rendered inside a Toggle`);return t}function I({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)(P.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 L({value:e,children:n,className:i,disabled:a,onClick:o,...s}){let c=F(),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 R=10,z=100,B=8,V=12,H={top:`bottom`,bottom:`top`,left:`right`,right:`left`},U=(e,t,n)=>Math.min(Math.max(e,t),Math.max(t,n));function W(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)+R+B,o=i(n);return o>=a||i(H[n])<=o?n:H[n]}function G(e,t,n,r={width:window.innerWidth,height:window.innerHeight}){let i=W(e,t,n,r),a=i===`top`||i===`bottom`,o,s;switch(i){case`top`:o=e.y-t.height-R,s=e.x+e.width/2-t.width/2;break;case`bottom`:o=e.y+e.height+R,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-R;break;case`right`:o=e.y+e.height/2-t.height/2,s=e.x+e.width+R}a?s=U(s,B,r.width-t.width-B):o=U(o,B,r.height-t.height-B);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:U(c,V,l-V)}}function K({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),z)};(0,e.useLayoutEffect)(()=>{let e=h.current,t=m.current?.firstElementChild;!u||!e||!t?p(null):(e.showPopover(),p(G(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.Toggle=I,exports.ToggleItem=L,exports.Tooltip=K;
|
|
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`})]})}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.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export { Spinner } from './Spinner/Spinner';
|
|
|
17
17
|
export { Switch, type SwitchProps } from './Switch/Switch';
|
|
18
18
|
export { Tag } from './Tag/Tag';
|
|
19
19
|
export { TextField } from './TextField/TextField';
|
|
20
|
+
export { Toast, type ToastProps } from './Toast/Toast';
|
|
20
21
|
export { Toggle, type ToggleProps } from './Toggle/Toggle';
|
|
21
22
|
export { ToggleItem, type ToggleItemProps } from './Toggle/ToggleItem';
|
|
22
23
|
export { Tooltip } from './Tooltip/Tooltip';
|
package/dist/index.js
CHANGED
|
@@ -136,7 +136,7 @@ function v({ selected: e = !1, className: t, ...n }) {
|
|
|
136
136
|
});
|
|
137
137
|
}
|
|
138
138
|
//#endregion
|
|
139
|
-
//#region src/useCheckedState.ts
|
|
139
|
+
//#region src/hooks/useCheckedState.ts
|
|
140
140
|
function y({ checked: e, defaultChecked: t = !1, onCheckedChange: n }) {
|
|
141
141
|
let [r, i] = s(t), a = e !== void 0;
|
|
142
142
|
return {
|
|
@@ -408,16 +408,63 @@ function M({ className: e, disabled: t, ...n }) {
|
|
|
408
408
|
});
|
|
409
409
|
}
|
|
410
410
|
//#endregion
|
|
411
|
+
//#region src/hooks/useLatest.ts
|
|
412
|
+
function N(e) {
|
|
413
|
+
let t = o(e);
|
|
414
|
+
return r(() => {
|
|
415
|
+
t.current = e;
|
|
416
|
+
}, [e]), t;
|
|
417
|
+
}
|
|
418
|
+
//#endregion
|
|
419
|
+
//#region src/hooks/useOutsidePress.ts
|
|
420
|
+
function P(e, t, n) {
|
|
421
|
+
let i = N(n);
|
|
422
|
+
r(() => {
|
|
423
|
+
if (!e) return;
|
|
424
|
+
let n = (e) => {
|
|
425
|
+
t.current?.contains(e.target) || i.current();
|
|
426
|
+
};
|
|
427
|
+
return document.addEventListener("pointerdown", n), () => document.removeEventListener("pointerdown", n);
|
|
428
|
+
}, [
|
|
429
|
+
e,
|
|
430
|
+
t,
|
|
431
|
+
i
|
|
432
|
+
]);
|
|
433
|
+
}
|
|
434
|
+
//#endregion
|
|
435
|
+
//#region src/hooks/useTopLayerPosition.ts
|
|
436
|
+
function F(e, t, n, r) {
|
|
437
|
+
let [i, o] = s(null);
|
|
438
|
+
return a(() => {
|
|
439
|
+
let r = t.current;
|
|
440
|
+
if (!e || !r) {
|
|
441
|
+
o(null);
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
r.showPopover();
|
|
445
|
+
let i = () => o(n()), a = (e) => {
|
|
446
|
+
r.contains(e.target) || i();
|
|
447
|
+
};
|
|
448
|
+
return i(), window.addEventListener("scroll", a, !0), window.addEventListener("resize", i), () => {
|
|
449
|
+
window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", i);
|
|
450
|
+
};
|
|
451
|
+
}, [
|
|
452
|
+
e,
|
|
453
|
+
t,
|
|
454
|
+
...r
|
|
455
|
+
]), i;
|
|
456
|
+
}
|
|
457
|
+
//#endregion
|
|
411
458
|
//#region src/Select/SelectContext.ts
|
|
412
|
-
var
|
|
413
|
-
let e = n(
|
|
459
|
+
var I = t(null), L = () => {
|
|
460
|
+
let e = n(I);
|
|
414
461
|
if (!e) throw Error("SelectOption must be rendered inside a Select");
|
|
415
462
|
return e;
|
|
416
463
|
};
|
|
417
464
|
//#endregion
|
|
418
465
|
//#region src/Select/SelectOption.tsx
|
|
419
|
-
function
|
|
420
|
-
let { select: r, activate: i, optionId: a, value: o, activeValue: s } =
|
|
466
|
+
function ee({ label: e, value: t, disabled: n }) {
|
|
467
|
+
let { select: r, activate: i, optionId: a, value: o, activeValue: s } = L();
|
|
421
468
|
return /* @__PURE__ */ c("div", {
|
|
422
469
|
id: a(t),
|
|
423
470
|
role: "option",
|
|
@@ -431,99 +478,87 @@ function F({ label: e, value: t, disabled: n }) {
|
|
|
431
478
|
}
|
|
432
479
|
//#endregion
|
|
433
480
|
//#region src/Select/Select.tsx
|
|
434
|
-
var
|
|
435
|
-
function
|
|
436
|
-
let
|
|
437
|
-
for (let r = e + n; r >= 0 && r < t.length; r += n) if (
|
|
481
|
+
var R = 4;
|
|
482
|
+
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 }) {
|
|
483
|
+
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) => {
|
|
484
|
+
for (let r = e + n; r >= 0 && r < t.length; r += n) if (N(r)) return r;
|
|
438
485
|
return e;
|
|
439
|
-
},
|
|
440
|
-
let e =
|
|
486
|
+
}, B = () => {
|
|
487
|
+
let e = z(t.length, -1);
|
|
441
488
|
return e === t.length ? -1 : e;
|
|
442
|
-
},
|
|
443
|
-
|
|
444
|
-
},
|
|
445
|
-
let t =
|
|
446
|
-
t < 0 || !
|
|
447
|
-
},
|
|
448
|
-
if (
|
|
489
|
+
}, V = (e) => t.findIndex((t) => t.value === e), H = () => {
|
|
490
|
+
k(M >= 0 && N(M) ? M : L()), D(!0);
|
|
491
|
+
}, U = () => D(!1), W = (e) => {
|
|
492
|
+
let t = V(e);
|
|
493
|
+
t < 0 || !N(t) || (U(), e !== j && (A || T(e), f?.(e)));
|
|
494
|
+
}, G = (e) => {
|
|
495
|
+
if (g?.(e), e.defaultPrevented) return;
|
|
449
496
|
let { key: n } = e;
|
|
450
|
-
if (n === "Tab") return
|
|
451
|
-
if (!
|
|
497
|
+
if (n === "Tab") return U();
|
|
498
|
+
if (!E) {
|
|
452
499
|
[
|
|
453
500
|
"Enter",
|
|
454
501
|
" ",
|
|
455
502
|
"ArrowDown",
|
|
456
503
|
"ArrowUp"
|
|
457
|
-
].includes(n) && (e.preventDefault(),
|
|
504
|
+
].includes(n) && (e.preventDefault(), H());
|
|
458
505
|
return;
|
|
459
506
|
}
|
|
460
507
|
let r = {
|
|
461
|
-
ArrowDown: () =>
|
|
462
|
-
ArrowUp: () =>
|
|
463
|
-
Home:
|
|
464
|
-
End:
|
|
508
|
+
ArrowDown: () => O < 0 ? L() : z(O, 1),
|
|
509
|
+
ArrowUp: () => O < 0 ? L() : z(O, -1),
|
|
510
|
+
Home: L,
|
|
511
|
+
End: B
|
|
465
512
|
};
|
|
466
|
-
n in r ? (e.preventDefault(),
|
|
467
|
-
},
|
|
468
|
-
|
|
469
|
-
},
|
|
470
|
-
let e =
|
|
471
|
-
if (!e || !t) return;
|
|
472
|
-
let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom +
|
|
473
|
-
|
|
474
|
-
top: i || !a ? n.bottom +
|
|
513
|
+
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());
|
|
514
|
+
}, K = (e) => {
|
|
515
|
+
_?.(e), e.key === " " && e.preventDefault();
|
|
516
|
+
}, q = F(E, C, () => {
|
|
517
|
+
let e = C.current, t = S.current;
|
|
518
|
+
if (!e || !t) return null;
|
|
519
|
+
let n = t.getBoundingClientRect(), r = e.offsetHeight, i = n.bottom + R + r <= window.innerHeight, a = n.top - R - r >= 0;
|
|
520
|
+
return {
|
|
521
|
+
top: i || !a ? n.bottom + R : n.top - R - r,
|
|
475
522
|
left: n.left,
|
|
476
523
|
minWidth: n.width
|
|
477
|
-
});
|
|
478
|
-
}, X = (e) => {
|
|
479
|
-
g?.(e), !e.defaultPrevented && (D ? G() : W());
|
|
480
|
-
};
|
|
481
|
-
a(() => {
|
|
482
|
-
D && (w.current?.showPopover(), Y());
|
|
483
|
-
}, [D]), r(() => {
|
|
484
|
-
if (!D) return;
|
|
485
|
-
let e = (e) => {
|
|
486
|
-
S.current?.contains(e.target) || G();
|
|
487
|
-
}, t = (e) => {
|
|
488
|
-
w.current?.contains(e.target) || Y();
|
|
489
|
-
};
|
|
490
|
-
return document.addEventListener("pointerdown", e), window.addEventListener("scroll", t, !0), window.addEventListener("resize", Y), () => {
|
|
491
|
-
document.removeEventListener("pointerdown", e), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", Y);
|
|
492
524
|
};
|
|
493
|
-
}, [
|
|
494
|
-
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
|
|
525
|
+
}, []), J = (e) => {
|
|
526
|
+
h?.(e), !e.defaultPrevented && (E ? U() : H());
|
|
527
|
+
};
|
|
528
|
+
P(E, x, U), r(() => {
|
|
529
|
+
E && O >= 0 && C.current?.children.item(O)?.scrollIntoView?.({ block: "nearest" });
|
|
530
|
+
}, [E, O]);
|
|
531
|
+
let Y = (e) => `${b}-option-${V(e)}`, X = E ? t[O]?.value ?? null : null, Z = t[M]?.label;
|
|
532
|
+
return /* @__PURE__ */ c(I.Provider, {
|
|
498
533
|
value: {
|
|
499
|
-
value:
|
|
500
|
-
activeValue:
|
|
501
|
-
select:
|
|
502
|
-
optionId:
|
|
503
|
-
activate: (e) =>
|
|
534
|
+
value: j,
|
|
535
|
+
activeValue: X,
|
|
536
|
+
select: W,
|
|
537
|
+
optionId: Y,
|
|
538
|
+
activate: (e) => k(V(e))
|
|
504
539
|
},
|
|
505
540
|
children: /* @__PURE__ */ l("div", {
|
|
506
|
-
ref:
|
|
541
|
+
ref: x,
|
|
507
542
|
className: "tintora-select",
|
|
508
543
|
children: [
|
|
509
544
|
/* @__PURE__ */ l("button", {
|
|
510
|
-
...
|
|
511
|
-
ref:
|
|
545
|
+
...y,
|
|
546
|
+
ref: S,
|
|
512
547
|
type: "button",
|
|
513
548
|
role: "combobox",
|
|
514
|
-
"aria-label":
|
|
549
|
+
"aria-label": v,
|
|
515
550
|
"aria-haspopup": "listbox",
|
|
516
|
-
"aria-expanded":
|
|
517
|
-
"aria-controls":
|
|
518
|
-
"aria-activedescendant":
|
|
551
|
+
"aria-expanded": E,
|
|
552
|
+
"aria-controls": E ? b : void 0,
|
|
553
|
+
"aria-activedescendant": X === null ? void 0 : Y(X),
|
|
519
554
|
disabled: n,
|
|
520
|
-
className: d("tintora-select__trigger",
|
|
521
|
-
onClick:
|
|
522
|
-
onKeyDown:
|
|
523
|
-
onKeyUp:
|
|
555
|
+
className: d("tintora-select__trigger", m),
|
|
556
|
+
onClick: J,
|
|
557
|
+
onKeyDown: G,
|
|
558
|
+
onKeyUp: K,
|
|
524
559
|
children: [/* @__PURE__ */ c("span", {
|
|
525
|
-
className: d("tintora-select__value",
|
|
526
|
-
children:
|
|
560
|
+
className: d("tintora-select__value", Z === void 0 && "tintora-select__value--placeholder"),
|
|
561
|
+
children: Z ?? u
|
|
527
562
|
}), /* @__PURE__ */ c("svg", {
|
|
528
563
|
className: "tintora-select__chevron",
|
|
529
564
|
width: "10",
|
|
@@ -538,21 +573,21 @@ function L({ defaultValue: e, options: t, disabled: n, value: u, placeholder: f,
|
|
|
538
573
|
children: /* @__PURE__ */ c("path", { d: "M6 9l6 6 6-6" })
|
|
539
574
|
})]
|
|
540
575
|
}),
|
|
541
|
-
|
|
542
|
-
ref:
|
|
543
|
-
id:
|
|
576
|
+
E && /* @__PURE__ */ c("div", {
|
|
577
|
+
ref: C,
|
|
578
|
+
id: b,
|
|
544
579
|
role: "listbox",
|
|
545
|
-
"aria-label":
|
|
580
|
+
"aria-label": v,
|
|
546
581
|
popover: "manual",
|
|
547
582
|
className: "tintora-select__menu",
|
|
548
|
-
style:
|
|
583
|
+
style: q ?? {},
|
|
549
584
|
onMouseDown: (e) => e.preventDefault(),
|
|
550
|
-
children: t.map((e) => /* @__PURE__ */ c(
|
|
585
|
+
children: t.map((e) => /* @__PURE__ */ c(ee, { ...e }, e.value))
|
|
551
586
|
}),
|
|
552
|
-
|
|
587
|
+
p && /* @__PURE__ */ c("input", {
|
|
553
588
|
type: "hidden",
|
|
554
|
-
name:
|
|
555
|
-
value:
|
|
589
|
+
name: p,
|
|
590
|
+
value: j ?? "",
|
|
556
591
|
disabled: n
|
|
557
592
|
})
|
|
558
593
|
]
|
|
@@ -561,7 +596,7 @@ function L({ defaultValue: e, options: t, disabled: n, value: u, placeholder: f,
|
|
|
561
596
|
}
|
|
562
597
|
//#endregion
|
|
563
598
|
//#region src/Skeleton/Skeleton.tsx
|
|
564
|
-
function
|
|
599
|
+
function B({ width: e, height: t, className: n, style: r, ...i }) {
|
|
565
600
|
let a = {
|
|
566
601
|
...e !== void 0 && { width: e },
|
|
567
602
|
...t !== void 0 && { height: t }
|
|
@@ -578,7 +613,7 @@ function R({ width: e, height: t, className: n, style: r, ...i }) {
|
|
|
578
613
|
}
|
|
579
614
|
//#endregion
|
|
580
615
|
//#region src/Switch/Switch.tsx
|
|
581
|
-
function
|
|
616
|
+
function V({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ...i }) {
|
|
582
617
|
let a = y({
|
|
583
618
|
checked: e,
|
|
584
619
|
defaultChecked: t,
|
|
@@ -601,7 +636,7 @@ function z({ checked: e, defaultChecked: t, onCheckedChange: n, className: r, ..
|
|
|
601
636
|
}
|
|
602
637
|
//#endregion
|
|
603
638
|
//#region src/Tag/Tag.tsx
|
|
604
|
-
function
|
|
639
|
+
function H({ children: e, className: t, variant: n = "neutral", size: r = "medium", ...i }) {
|
|
605
640
|
return /* @__PURE__ */ c("span", {
|
|
606
641
|
...i,
|
|
607
642
|
className: d("tintora-tag", `tintora-tag--${n}`, `tintora-tag--${r}`, t),
|
|
@@ -610,7 +645,7 @@ function B({ children: e, className: t, variant: n = "neutral", size: r = "mediu
|
|
|
610
645
|
}
|
|
611
646
|
//#endregion
|
|
612
647
|
//#region src/TextField/TextField.tsx
|
|
613
|
-
function
|
|
648
|
+
function U({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "aria-describedby": s, "aria-invalid": u, ...f }) {
|
|
614
649
|
let p = i(), m = r ?? p, h = `${m}-message`, g = n ?? t;
|
|
615
650
|
return /* @__PURE__ */ l("div", {
|
|
616
651
|
className: d("tintora-textfield", o && "tintora-textfield--disabled", a),
|
|
@@ -637,16 +672,157 @@ function V({ label: e, hint: t, error: n, id: r, className: a, disabled: o, "ari
|
|
|
637
672
|
});
|
|
638
673
|
}
|
|
639
674
|
//#endregion
|
|
675
|
+
//#region src/Toast/ToastIcons.tsx
|
|
676
|
+
function W() {
|
|
677
|
+
return /* @__PURE__ */ c("svg", {
|
|
678
|
+
width: "20",
|
|
679
|
+
height: "20",
|
|
680
|
+
viewBox: "0 0 24 24",
|
|
681
|
+
fill: "none",
|
|
682
|
+
stroke: "var(--tintora-toast-icon-success)",
|
|
683
|
+
strokeWidth: "2",
|
|
684
|
+
strokeLinecap: "round",
|
|
685
|
+
strokeLinejoin: "round",
|
|
686
|
+
"aria-hidden": "true",
|
|
687
|
+
style: { flex: "0 0 auto" },
|
|
688
|
+
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" })
|
|
689
|
+
});
|
|
690
|
+
}
|
|
691
|
+
function G() {
|
|
692
|
+
return /* @__PURE__ */ c("svg", {
|
|
693
|
+
width: "20",
|
|
694
|
+
height: "20",
|
|
695
|
+
viewBox: "0 0 24 24",
|
|
696
|
+
fill: "none",
|
|
697
|
+
stroke: "var(--tintora-toast-icon-error)",
|
|
698
|
+
strokeWidth: "2",
|
|
699
|
+
strokeLinecap: "round",
|
|
700
|
+
strokeLinejoin: "round",
|
|
701
|
+
"aria-hidden": "true",
|
|
702
|
+
style: { flex: "0 0 auto" },
|
|
703
|
+
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" })
|
|
704
|
+
});
|
|
705
|
+
}
|
|
706
|
+
function K() {
|
|
707
|
+
return /* @__PURE__ */ c("svg", {
|
|
708
|
+
width: "20",
|
|
709
|
+
height: "20",
|
|
710
|
+
viewBox: "0 0 24 24",
|
|
711
|
+
fill: "none",
|
|
712
|
+
stroke: "var(--tintora-toast-icon-info)",
|
|
713
|
+
strokeWidth: "2",
|
|
714
|
+
strokeLinecap: "round",
|
|
715
|
+
strokeLinejoin: "round",
|
|
716
|
+
"aria-hidden": "true",
|
|
717
|
+
style: { flex: "0 0 auto" },
|
|
718
|
+
children: /* @__PURE__ */ c("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" })
|
|
719
|
+
});
|
|
720
|
+
}
|
|
721
|
+
function q() {
|
|
722
|
+
return /* @__PURE__ */ c("svg", {
|
|
723
|
+
width: "20",
|
|
724
|
+
height: "20",
|
|
725
|
+
viewBox: "0 0 24 24",
|
|
726
|
+
fill: "none",
|
|
727
|
+
stroke: "var(--tintora-toast-icon-warning)",
|
|
728
|
+
strokeWidth: "2",
|
|
729
|
+
strokeLinecap: "round",
|
|
730
|
+
strokeLinejoin: "round",
|
|
731
|
+
"aria-hidden": "true",
|
|
732
|
+
style: { flex: "0 0 auto" },
|
|
733
|
+
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" })
|
|
734
|
+
});
|
|
735
|
+
}
|
|
736
|
+
function J() {
|
|
737
|
+
return /* @__PURE__ */ c("svg", {
|
|
738
|
+
width: "14",
|
|
739
|
+
height: "14",
|
|
740
|
+
viewBox: "0 0 24 24",
|
|
741
|
+
fill: "none",
|
|
742
|
+
stroke: "currentColor",
|
|
743
|
+
strokeWidth: "2.2",
|
|
744
|
+
strokeLinecap: "round",
|
|
745
|
+
"aria-hidden": "true",
|
|
746
|
+
children: /* @__PURE__ */ c("path", { d: "M18 6L6 18M6 6l12 12" })
|
|
747
|
+
});
|
|
748
|
+
}
|
|
749
|
+
//#endregion
|
|
750
|
+
//#region src/Toast/Toast.tsx
|
|
751
|
+
var Y = {
|
|
752
|
+
success: /* @__PURE__ */ c(W, {}),
|
|
753
|
+
error: /* @__PURE__ */ c(G, {}),
|
|
754
|
+
info: /* @__PURE__ */ c(K, {}),
|
|
755
|
+
warning: /* @__PURE__ */ c(q, {})
|
|
756
|
+
};
|
|
757
|
+
function X({ status: e, children: t, action: n, onDismiss: i, duration: a = 5e3, timerBar: u = !1, className: f, ...p }) {
|
|
758
|
+
let [m, h] = s(!1), [g, _] = s(!1), v = m || g, y = N(i), b = o(a);
|
|
759
|
+
r(() => {
|
|
760
|
+
b.current = a;
|
|
761
|
+
}, [a]), r(() => {
|
|
762
|
+
if (a <= 0 || v) return;
|
|
763
|
+
let e = Date.now(), t = setTimeout(() => y.current(), b.current);
|
|
764
|
+
return () => {
|
|
765
|
+
clearTimeout(t), b.current -= Date.now() - e;
|
|
766
|
+
};
|
|
767
|
+
}, [
|
|
768
|
+
a,
|
|
769
|
+
v,
|
|
770
|
+
y
|
|
771
|
+
]);
|
|
772
|
+
let x = u && a > 0, S = { "--tintora-toast-animation-duration": `${a}ms` };
|
|
773
|
+
return /* @__PURE__ */ l("div", {
|
|
774
|
+
...p,
|
|
775
|
+
role: "status",
|
|
776
|
+
className: d("tintora-toast", x && "tintora-toast--timer", v && "tintora-toast--paused", f),
|
|
777
|
+
onMouseEnter: (e) => {
|
|
778
|
+
p.onMouseEnter?.(e), h(!0);
|
|
779
|
+
},
|
|
780
|
+
onMouseLeave: (e) => {
|
|
781
|
+
p.onMouseLeave?.(e), h(!1);
|
|
782
|
+
},
|
|
783
|
+
onFocus: (e) => {
|
|
784
|
+
p.onFocus?.(e), _(!0);
|
|
785
|
+
},
|
|
786
|
+
onBlur: (e) => {
|
|
787
|
+
p.onBlur?.(e), e.currentTarget.contains(e.relatedTarget) || _(!1);
|
|
788
|
+
},
|
|
789
|
+
children: [
|
|
790
|
+
e && Y[e],
|
|
791
|
+
/* @__PURE__ */ c("span", {
|
|
792
|
+
className: "tintora-toast__message",
|
|
793
|
+
children: t
|
|
794
|
+
}),
|
|
795
|
+
n && /* @__PURE__ */ c("button", {
|
|
796
|
+
type: "button",
|
|
797
|
+
className: "tintora-toast__action",
|
|
798
|
+
onClick: n.onClick,
|
|
799
|
+
children: n.label
|
|
800
|
+
}),
|
|
801
|
+
/* @__PURE__ */ c("button", {
|
|
802
|
+
type: "button",
|
|
803
|
+
className: "tintora-toast__close",
|
|
804
|
+
"aria-label": "Dismiss",
|
|
805
|
+
onClick: i,
|
|
806
|
+
children: /* @__PURE__ */ c(J, {})
|
|
807
|
+
}),
|
|
808
|
+
x && /* @__PURE__ */ c("span", {
|
|
809
|
+
className: "tintora-toast__progress",
|
|
810
|
+
style: S
|
|
811
|
+
})
|
|
812
|
+
]
|
|
813
|
+
});
|
|
814
|
+
}
|
|
815
|
+
//#endregion
|
|
640
816
|
//#region src/Toggle/ToggleContext.ts
|
|
641
|
-
var
|
|
642
|
-
function
|
|
643
|
-
let e = n(
|
|
817
|
+
var Z = t(null);
|
|
818
|
+
function te() {
|
|
819
|
+
let e = n(Z);
|
|
644
820
|
if (!e) throw Error("ToggleItem must be rendered inside a Toggle");
|
|
645
821
|
return e;
|
|
646
822
|
}
|
|
647
823
|
//#endregion
|
|
648
824
|
//#region src/Toggle/Toggle.tsx
|
|
649
|
-
function
|
|
825
|
+
function ne({ children: e, value: t, defaultValue: n, onValueChange: r, disabled: i = !1, className: u, ...f }) {
|
|
650
826
|
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({
|
|
651
827
|
x: 0,
|
|
652
828
|
width: 0
|
|
@@ -673,7 +849,7 @@ function W({ children: e, value: t, defaultValue: n, onValueChange: r, disabled:
|
|
|
673
849
|
"--tintora-toggle-thumb-x": `${y.x}px`,
|
|
674
850
|
"--tintora-toggle-thumb-width": `${y.width}px`
|
|
675
851
|
};
|
|
676
|
-
return /* @__PURE__ */ c(
|
|
852
|
+
return /* @__PURE__ */ c(Z.Provider, {
|
|
677
853
|
value: {
|
|
678
854
|
value: g,
|
|
679
855
|
select: (e) => {
|
|
@@ -696,8 +872,8 @@ function W({ children: e, value: t, defaultValue: n, onValueChange: r, disabled:
|
|
|
696
872
|
}
|
|
697
873
|
//#endregion
|
|
698
874
|
//#region src/Toggle/ToggleItem.tsx
|
|
699
|
-
function
|
|
700
|
-
let o =
|
|
875
|
+
function re({ value: e, children: t, className: n, disabled: r, onClick: i, ...a }) {
|
|
876
|
+
let o = te(), s = (t) => {
|
|
701
877
|
i?.(t), t.defaultPrevented || o.select(e);
|
|
702
878
|
};
|
|
703
879
|
return /* @__PURE__ */ c("button", {
|
|
@@ -711,94 +887,109 @@ function G({ value: e, children: t, className: n, disabled: r, onClick: i, ...a
|
|
|
711
887
|
});
|
|
712
888
|
}
|
|
713
889
|
//#endregion
|
|
714
|
-
//#region src/
|
|
715
|
-
var
|
|
890
|
+
//#region src/utils/placement.ts
|
|
891
|
+
var ie = {
|
|
892
|
+
gap: 10,
|
|
893
|
+
margin: 8,
|
|
894
|
+
arrowInset: 12
|
|
895
|
+
}, Q = {
|
|
716
896
|
top: "bottom",
|
|
717
897
|
bottom: "top",
|
|
718
898
|
left: "right",
|
|
719
899
|
right: "left"
|
|
720
|
-
},
|
|
721
|
-
function
|
|
722
|
-
let
|
|
900
|
+
}, $ = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
|
|
901
|
+
function ae(e, t, n, r, { gap: i, margin: a }) {
|
|
902
|
+
let o = (t) => {
|
|
723
903
|
switch (t) {
|
|
724
904
|
case "top": return e.top;
|
|
725
905
|
case "bottom": return r.height - e.bottom;
|
|
726
906
|
case "left": return e.left;
|
|
727
907
|
case "right": return r.width - e.right;
|
|
728
908
|
}
|
|
729
|
-
},
|
|
730
|
-
return
|
|
909
|
+
}, s = (n === "top" || n === "bottom" ? t.height : t.width) + i + a, c = o(n);
|
|
910
|
+
return c >= s || o(Q[n]) <= c ? n : Q[n];
|
|
731
911
|
}
|
|
732
|
-
function
|
|
912
|
+
function oe(e, t, n, r = {
|
|
733
913
|
width: window.innerWidth,
|
|
734
914
|
height: window.innerHeight
|
|
735
|
-
}) {
|
|
736
|
-
let
|
|
737
|
-
|
|
915
|
+
}, i = {}) {
|
|
916
|
+
let a = {
|
|
917
|
+
...ie,
|
|
918
|
+
...i
|
|
919
|
+
}, { gap: o, margin: s, arrowInset: c } = a, l = ae(e, t, n, r, a), u = l === "top" || l === "bottom", d, f;
|
|
920
|
+
switch (l) {
|
|
738
921
|
case "top":
|
|
739
|
-
|
|
922
|
+
d = e.y - t.height - o, f = e.x + e.width / 2 - t.width / 2;
|
|
740
923
|
break;
|
|
741
924
|
case "bottom":
|
|
742
|
-
|
|
925
|
+
d = e.y + e.height + o, f = e.x + e.width / 2 - t.width / 2;
|
|
743
926
|
break;
|
|
744
927
|
case "left":
|
|
745
|
-
|
|
928
|
+
d = e.y + e.height / 2 - t.height / 2, f = e.x - t.width - o;
|
|
746
929
|
break;
|
|
747
|
-
case "right":
|
|
930
|
+
case "right": d = e.y + e.height / 2 - t.height / 2, f = e.x + e.width + o;
|
|
748
931
|
}
|
|
749
|
-
|
|
750
|
-
let
|
|
932
|
+
u ? f = $(f, s, r.width - t.width - s) : d = $(d, s, r.height - t.height - s);
|
|
933
|
+
let p = u ? e.x + e.width / 2 - f : e.y + e.height / 2 - d, m = u ? t.width : t.height;
|
|
751
934
|
return {
|
|
752
|
-
top:
|
|
753
|
-
left:
|
|
754
|
-
placement:
|
|
755
|
-
arrowOffset:
|
|
935
|
+
top: d,
|
|
936
|
+
left: f,
|
|
937
|
+
placement: l,
|
|
938
|
+
arrowOffset: $(p, c, m - c)
|
|
756
939
|
};
|
|
757
940
|
}
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
941
|
+
//#endregion
|
|
942
|
+
//#region src/hooks/useEscapeKey.ts
|
|
943
|
+
function se(e, t) {
|
|
944
|
+
let n = N(t);
|
|
945
|
+
r(() => {
|
|
946
|
+
if (!e) return;
|
|
947
|
+
let t = (e) => {
|
|
948
|
+
e.key === "Escape" && n.current();
|
|
949
|
+
};
|
|
950
|
+
return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
|
|
951
|
+
}, [e, n]);
|
|
952
|
+
}
|
|
953
|
+
//#endregion
|
|
954
|
+
//#region src/Tooltip/Tooltip.tsx
|
|
955
|
+
var ce = 100;
|
|
956
|
+
function le({ title: t, content: n, shortcut: a, children: u, className: f, placement: p = "top" }) {
|
|
957
|
+
let m = i(), [h, g] = s(!1), _ = o(null), v = o(null), y = o(void 0), b = () => {
|
|
958
|
+
window.clearTimeout(y.current), g(!0);
|
|
959
|
+
}, x = () => {
|
|
960
|
+
window.clearTimeout(y.current), y.current = window.setTimeout(() => g(!1), ce);
|
|
961
|
+
}, S = F(h, v, () => {
|
|
962
|
+
let e = v.current, t = _.current?.firstElementChild;
|
|
963
|
+
return !e || !t ? null : oe(t.getBoundingClientRect(), {
|
|
767
964
|
width: e.offsetWidth,
|
|
768
965
|
height: e.offsetHeight
|
|
769
|
-
},
|
|
966
|
+
}, p);
|
|
770
967
|
}, [
|
|
771
|
-
|
|
772
|
-
m,
|
|
968
|
+
p,
|
|
773
969
|
t,
|
|
774
970
|
n,
|
|
775
|
-
|
|
776
|
-
])
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
}, [g]), r(() => () => window.clearTimeout(S.current), []);
|
|
783
|
-
let T = v ? {
|
|
784
|
-
top: v.top,
|
|
785
|
-
left: v.left,
|
|
786
|
-
"--tintora-tooltip-arrow-offset": `${v.arrowOffset}px`
|
|
971
|
+
a
|
|
972
|
+
]);
|
|
973
|
+
se(h, () => g(!1)), r(() => () => window.clearTimeout(y.current), []);
|
|
974
|
+
let C = S ? {
|
|
975
|
+
top: S.top,
|
|
976
|
+
left: S.left,
|
|
977
|
+
"--tintora-tooltip-arrow-offset": `${S.arrowOffset}px`
|
|
787
978
|
} : { visibility: "hidden" };
|
|
788
979
|
return /* @__PURE__ */ l("span", {
|
|
789
|
-
ref:
|
|
980
|
+
ref: _,
|
|
790
981
|
className: "tintora-tooltip",
|
|
791
|
-
onMouseEnter:
|
|
792
|
-
onMouseLeave:
|
|
793
|
-
onFocus:
|
|
794
|
-
onBlur:
|
|
795
|
-
children: [e(
|
|
796
|
-
id:
|
|
797
|
-
ref:
|
|
982
|
+
onMouseEnter: b,
|
|
983
|
+
onMouseLeave: x,
|
|
984
|
+
onFocus: b,
|
|
985
|
+
onBlur: x,
|
|
986
|
+
children: [e(u, { "aria-describedby": d(u.props["aria-describedby"], h && m) || void 0 }), h && /* @__PURE__ */ l("div", {
|
|
987
|
+
id: m,
|
|
988
|
+
ref: v,
|
|
798
989
|
role: "tooltip",
|
|
799
990
|
popover: "manual",
|
|
800
|
-
style:
|
|
801
|
-
className: d("tintora-tooltip__content", `tintora-tooltip__content--${
|
|
991
|
+
style: C,
|
|
992
|
+
className: d("tintora-tooltip__content", `tintora-tooltip__content--${S?.placement ?? p}`, t && "tintora-tooltip__content--rich", f),
|
|
802
993
|
children: [
|
|
803
994
|
t && /* @__PURE__ */ c("span", {
|
|
804
995
|
className: "tintora-tooltip__title",
|
|
@@ -808,13 +999,13 @@ function ee({ title: t, content: n, shortcut: u, children: f, className: p, plac
|
|
|
808
999
|
className: "tintora-tooltip__text",
|
|
809
1000
|
children: n
|
|
810
1001
|
}),
|
|
811
|
-
|
|
1002
|
+
a && /* @__PURE__ */ c("kbd", {
|
|
812
1003
|
className: "tintora-tooltip__shortcut",
|
|
813
|
-
children:
|
|
1004
|
+
children: a
|
|
814
1005
|
})
|
|
815
1006
|
]
|
|
816
1007
|
})]
|
|
817
1008
|
});
|
|
818
1009
|
}
|
|
819
1010
|
//#endregion
|
|
820
|
-
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,
|
|
1011
|
+
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/tintora.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--tintora-color-accent:#ee6b25;--tintora-color-accent-deep:#c94e0c;--tintora-color-success:#4cc56b;--tintora-color-planned:#f2698c;--tintora-color-heart:#c42a56;--tintora-color-steps:#1f7a38;--tintora-color-sleep:#2f4fc4;--tintora-color-ink:#1d1c1c;--tintora-color-white:#fff;--tintora-color-destructive:#b3261e;--tintora-color-on-accent:#1d0e04;--tintora-color-on-accent-deep:var(--tintora-color-white);--tintora-color-on-success:#0d200f;--tintora-color-on-planned:#260a13;--tintora-color-on-heart:var(--tintora-color-white);--tintora-color-on-steps:var(--tintora-color-white);--tintora-color-on-sleep:var(--tintora-color-white);--tintora-color-on-destructive:var(--tintora-color-white);--tintora-text-on-card-muted:#55524f;--tintora-chip-fg:#3c3a38;--tintora-chip-bg:#efedeb;--tintora-chip-bg-hover:#e4e1de;--tintora-chip-selected-fg:#8f3604;--tintora-chip-selected-bg:var(--tintora-color-white);--tintora-tint-accent:#fdeadd;--tintora-tint-heart:#fbe0e8;--tintora-tint-steps:#dcf3e1;--tintora-tint-sleep:#e0e7fb;--tintora-menu-bg:var(--tintora-color-white);--tintora-menu-border:#1d1c1c1a;--tintora-menu-shadow:0 16px 32px #00000038;--tintora-menu-item-hover:#1d1c1c12;--tintora-menu-item-destructive:var(--tintora-color-destructive);--tintora-chart-grid:#ece9e6;--tintora-chart-axis:#6f6b68;--tintora-chart-track:#e6e4e2;--tintora-surface-menu-row:#ffffff0d;--tintora-font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--tintora-font-weight-regular:400;--tintora-font-weight-medium:500;--tintora-font-weight-semibold:600;--tintora-font-weight-bold:700;--tintora-font-weight-extrabold:800;--tintora-line-height-tight:1.2;--tintora-font-display:700 1.625rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-title:700 1.125rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-heading:700 .9375rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-label:700 .78125rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-body:500 .75rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-caption:400 .6875rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-stat-value:800 1.5625rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-subtitle:700 .875rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-button:700 .8125rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-button-sm:700 .75rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-tracking-tight:-.02em;--tintora-tracking-snug:-.01em;--tintora-tracking-wide:.04em;--tintora-radius-2:2px;--tintora-radius-4:4px;--tintora-radius-6:6px;--tintora-radius-7:7px;--tintora-radius-8:8px;--tintora-radius-9:9px;--tintora-radius-10:10px;--tintora-radius-12:12px;--tintora-radius-14:14px;--tintora-radius-16:16px;--tintora-radius-18:18px;--tintora-radius-20:20px;--tintora-radius-22:22px;--tintora-radius-26:26px;--tintora-radius-28:28px;--tintora-radius-30:30px;--tintora-radius-32:32px;--tintora-radius-34:34px;--tintora-radius-38:38px;--tintora-radius-40:40px;--tintora-radius-pill:9999px;--tintora-radius-card:var(--tintora-radius-20);--tintora-radius-panel:var(--tintora-radius-32);--tintora-shadow-selected:0 14px 30px #c94e0c73;--tintora-shadow-primary:0 8px 20px #c94e0c59;--tintora-shadow-accent:0 8px 20px #ee6b2566;--tintora-shadow-focus-ring:0 0 0 3px #ee6b2547;--tintora-shadow-menu:0 16px 32px #00000073;--tintora-shadow-tooltip:0 8px 20px #00000040;--tintora-shadow-knob:0 2px 4px #0000004d;--tintora-shadow-sheet:0 -16px 40px #00000059;--tintora-blur-glass:28px;--tintora-duration-fast:.15s;--tintora-duration-base:.2s;--tintora-opacity-disabled:.45}:root,[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--tintora-bg:linear-gradient(180deg, #3e3b3a, #222020);--tintora-surface-glass:linear-gradient(180deg, #3e3b3acc, #222020e6);--tintora-surface-card:#fbfaf9;--tintora-surface-row:#ffffff0f;--tintora-surface-field:#100f0f9e;--tintora-surface-menu:#1e1c1cf7;--tintora-text:var(--tintora-color-white);--tintora-text-muted:#ffffffb8;--tintora-text-faint:#ffffffa6;--tintora-text-nav-idle:#ffffffc7;--tintora-text-day:#ffffffd1;--tintora-text-error:#ff9a8a;--tintora-border-glass:#ffffff14;--tintora-border-card:transparent;--tintora-border-row:#ffffff0f;--tintora-border-field:#ffffff14;--tintora-border-field-hover:#ffffff52;--tintora-line:#ffffff1a;--tintora-line-strong:#ffffff52;--tintora-fill-subtle:#ffffff1a;--tintora-fill-subtle-hover:#fff3;--tintora-fill-subtle-pressed:#ffffff47;--tintora-fill-ghost-hover:#ffffff1f;--tintora-fill-day-hover:#ffffff24;--tintora-tag-bg:#ffffff24;--tintora-tag-fg:var(--tintora-color-white);--tintora-focus:var(--tintora-color-accent);--tintora-ring:var(--tintora-color-white);--tintora-shadow-glass:0 30px 60px #00000059;--tintora-shadow-card:0 10px 24px #0000002e;--tintora-shadow-card-hover:0 18px 36px #00000052;--tintora-bg-glow:radial-gradient(60% 50% at 6% 8%, #deccb080, transparent 62%), radial-gradient(50% 45% at 96% 10%, #846a5680, transparent 62%);--tintora-text-placeholder:#ffffff9e;--tintora-scrim:#0a090999;--tintora-surface-modal:linear-gradient(180deg, #403c3b, #2a2726);--tintora-border-modal:#ffffff1f;--tintora-shadow-modal:0 40px 80px #00000080;--tintora-surface-popover:#2b2928;--tintora-border-popover:#ffffff24;--tintora-shadow-popover:0 24px 48px #00000073;--tintora-surface-tooltip:#fbfaf9;--tintora-text-on-tooltip:var(--tintora-color-ink);--tintora-text-on-tooltip-muted:#5a5754;--tintora-tooltip-kbd-bg:#1d1c1c1a;--tintora-surface-toast:#fbfaf9;--tintora-text-on-toast:var(--tintora-color-ink);--tintora-text-on-toast-muted:#5a5754;--tintora-toast-action:var(--tintora-color-accent-deep);--tintora-shadow-toast:0 16px 36px #0006;--tintora-toast-icon-success:var(--tintora-color-steps);--tintora-toast-icon-error:var(--tintora-color-destructive);--tintora-toast-icon-info:var(--tintora-color-sleep);--tintora-toast-icon-warning:#8a5600;--tintora-status-info-bg:#7896ff24;--tintora-status-info-border:#96afff61;--tintora-status-info-fg:#a9bcff;--tintora-status-success-bg:#4cc56b24;--tintora-status-success-border:#4cc56b66;--tintora-status-success-fg:#6ddb8b;--tintora-status-warning-bg:#f2a33a26;--tintora-status-warning-border:#f2a33a6b;--tintora-status-warning-fg:#f5b45a;--tintora-status-error-bg:#ff826e26;--tintora-status-error-border:#ff8c786b;--tintora-status-error-fg:var(--tintora-text-error);--tintora-control-fill:var(--tintora-color-accent);--tintora-control-on-fill:var(--tintora-color-on-accent);--tintora-control-border:#fff9;--tintora-control-hover-tint:#ee6b2529;--tintora-switch-track:#ffffff4d;--tintora-switch-track-hover:#fff6;--tintora-shimmer:linear-gradient(90deg, #ffffff14 0%, #fff3 50%, #ffffff14 100%)}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--tintora-bg:linear-gradient(180deg, #fcfaf7, #f2ebe4);--tintora-surface-glass:linear-gradient(180deg, #ffffffb3, #ffffff80);--tintora-surface-card:#fff;--tintora-surface-row:#ffffffd9;--tintora-surface-field:#ffffffd9;--tintora-surface-menu:#2a2827;--tintora-text:var(--tintora-color-ink);--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:var(--tintora-color-destructive);--tintora-border-glass:#ffffffd9;--tintora-border-card:#1d1c1c0d;--tintora-border-row:#1d1c1c0f;--tintora-border-field:#1d1c1c14;--tintora-border-field-hover:#1d1c1c4d;--tintora-line:#1d1c1c1a;--tintora-line-strong:#1d1c1c4d;--tintora-fill-subtle:#1d1c1c12;--tintora-fill-subtle-hover:#1d1c1c24;--tintora-fill-subtle-pressed:#1d1c1c33;--tintora-fill-ghost-hover:#1d1c1c14;--tintora-fill-day-hover:#1d1c1c1a;--tintora-tag-bg:#1d1c1c12;--tintora-tag-fg:var(--tintora-color-ink);--tintora-focus:var(--tintora-color-accent-deep);--tintora-ring:var(--tintora-color-ink);--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033;--tintora-bg-glow:radial-gradient(60% 50% at 6% 8%, #ffd6ace6, transparent 62%), radial-gradient(50% 45% at 96% 10%, #ffeed6f2, transparent 62%);--tintora-text-placeholder:#5f5b58;--tintora-scrim:#1d1c1c73;--tintora-surface-modal:#fff;--tintora-border-modal:#1d1c1c0f;--tintora-shadow-modal:0 40px 80px #3c281459;--tintora-surface-popover:#fff;--tintora-border-popover:#1d1c1c1a;--tintora-shadow-popover:0 24px 48px #3c281438;--tintora-surface-tooltip:#2a2827;--tintora-text-on-tooltip:var(--tintora-color-white);--tintora-text-on-tooltip-muted:#ffffffc7;--tintora-tooltip-kbd-bg:#ffffff2e;--tintora-surface-toast:#2a2827;--tintora-text-on-toast:var(--tintora-color-white);--tintora-text-on-toast-muted:#ffffffbf;--tintora-toast-action:#ff9a5c;--tintora-shadow-toast:0 16px 36px #3c281459;--tintora-toast-icon-success:var(--tintora-color-success);--tintora-toast-icon-error:#ff9a8a;--tintora-toast-icon-info:#9db4ff;--tintora-toast-icon-warning:#f2a33a;--tintora-status-info-bg:#2f4fc414;--tintora-status-info-border:#2f4fc447;--tintora-status-info-fg:var(--tintora-color-sleep);--tintora-status-success-bg:#1f7a3817;--tintora-status-success-border:#1f7a384d;--tintora-status-success-fg:var(--tintora-color-steps);--tintora-status-warning-bg:#a86a0a1a;--tintora-status-warning-border:#a86a0a52;--tintora-status-warning-fg:#8a5600;--tintora-status-error-bg:#b3261e14;--tintora-status-error-border:#b3261e47;--tintora-status-error-fg:var(--tintora-text-error);--tintora-control-fill:var(--tintora-color-accent-deep);--tintora-control-on-fill:var(--tintora-color-white);--tintora-control-border:#1d1c1c8c;--tintora-control-hover-tint:#ee6b2529;--tintora-switch-track:#1d1c1c61;--tintora-switch-track-hover:#1d1c1c80;--tintora-shimmer:linear-gradient(90deg, #1d1c1c12 0%, #1d1c1c29 50%, #1d1c1c12 100%)}@media (prefers-color-scheme:light){:root:not([data-theme]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--tintora-bg:linear-gradient(180deg, #fcfaf7, #f2ebe4);--tintora-surface-glass:linear-gradient(180deg, #ffffffb3, #ffffff80);--tintora-surface-card:#fff;--tintora-surface-row:#ffffffd9;--tintora-surface-field:#ffffffd9;--tintora-surface-menu:#2a2827;--tintora-text:var(--tintora-color-ink);--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:var(--tintora-color-destructive);--tintora-border-glass:#ffffffd9;--tintora-border-card:#1d1c1c0d;--tintora-border-row:#1d1c1c0f;--tintora-border-field:#1d1c1c14;--tintora-border-field-hover:#1d1c1c4d;--tintora-line:#1d1c1c1a;--tintora-line-strong:#1d1c1c4d;--tintora-fill-subtle:#1d1c1c12;--tintora-fill-subtle-hover:#1d1c1c24;--tintora-fill-subtle-pressed:#1d1c1c33;--tintora-fill-ghost-hover:#1d1c1c14;--tintora-fill-day-hover:#1d1c1c1a;--tintora-tag-bg:#1d1c1c12;--tintora-tag-fg:var(--tintora-color-ink);--tintora-focus:var(--tintora-color-accent-deep);--tintora-ring:var(--tintora-color-ink);--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033;--tintora-bg-glow:radial-gradient(60% 50% at 6% 8%, #ffd6ace6, transparent 62%), radial-gradient(50% 45% at 96% 10%, #ffeed6f2, transparent 62%);--tintora-text-placeholder:#5f5b58;--tintora-scrim:#1d1c1c73;--tintora-surface-modal:#fff;--tintora-border-modal:#1d1c1c0f;--tintora-shadow-modal:0 40px 80px #3c281459;--tintora-surface-popover:#fff;--tintora-border-popover:#1d1c1c1a;--tintora-shadow-popover:0 24px 48px #3c281438;--tintora-surface-tooltip:#2a2827;--tintora-text-on-tooltip:var(--tintora-color-white);--tintora-text-on-tooltip-muted:#ffffffc7;--tintora-tooltip-kbd-bg:#ffffff2e;--tintora-surface-toast:#2a2827;--tintora-text-on-toast:var(--tintora-color-white);--tintora-text-on-toast-muted:#ffffffbf;--tintora-toast-action:#ff9a5c;--tintora-shadow-toast:0 16px 36px #3c281459;--tintora-toast-icon-success:var(--tintora-color-success);--tintora-toast-icon-error:#ff9a8a;--tintora-toast-icon-info:#9db4ff;--tintora-toast-icon-warning:#f2a33a;--tintora-status-info-bg:#2f4fc414;--tintora-status-info-border:#2f4fc447;--tintora-status-info-fg:var(--tintora-color-sleep);--tintora-status-success-bg:#1f7a3817;--tintora-status-success-border:#1f7a384d;--tintora-status-success-fg:var(--tintora-color-steps);--tintora-status-warning-bg:#a86a0a1a;--tintora-status-warning-border:#a86a0a52;--tintora-status-warning-fg:#8a5600;--tintora-status-error-bg:#b3261e14;--tintora-status-error-border:#b3261e47;--tintora-status-error-fg:var(--tintora-text-error);--tintora-control-fill:var(--tintora-color-accent-deep);--tintora-control-on-fill:var(--tintora-color-white);--tintora-control-border:#1d1c1c8c;--tintora-control-hover-tint:#ee6b2529;--tintora-switch-track:#1d1c1c61;--tintora-switch-track-hover:#1d1c1c80;--tintora-shimmer:linear-gradient(90deg, #1d1c1c12 0%, #1d1c1c29 50%, #1d1c1c12 100%)}}.tintora-avatar{border-radius:var(--tintora-radius-pill);color:var(--tintora-color-ink);font:var(--tintora-font-body);font-size:var(--tintora-avatar-font-size);font-weight:var(--tintora-font-weight-bold);background:linear-gradient(135deg,#f1d9bf,#c9a07a);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.tintora-avatar>img{object-fit:cover;width:100%;height:100%}.tintora-avatar--small{--tintora-avatar-font-size:.6875rem;width:32px;height:32px;font-weight:var(--tintora-font-weight-bold)}.tintora-avatar--medium{--tintora-avatar-font-size:.8125rem;width:40px;height:40px;font-weight:var(--tintora-font-weight-bold)}.tintora-avatar--large{--tintora-avatar-font-size:.875rem;width:44px;height:44px;font-weight:var(--tintora-font-weight-bold)}.tintora-spinner{flex-shrink:0;animation:.9s linear infinite tintora-spin}@keyframes tintora-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.tintora-spinner{animation:none}}.tintora-button{--tintora-button-border:1px solid transparent;box-sizing:border-box;cursor:pointer;outline-offset:2px;height:var(--tintora-button-height);padding:0 var(--tintora-button-padding-x);border:var(--tintora-button-border);border-radius:var(--tintora-button-border-radius);font-family:inherit;font-size:var(--tintora-button-font-size);font-weight:var(--tintora-button-font-weight);color:var(--tintora-button-fg);background-color:var(--tintora-button-bg);box-shadow:var(--tintora-button-shadow,none);outline:none;justify-content:center;align-items:center;gap:8px;display:inline-flex}.tintora-button--small{--tintora-button-height:32px;--tintora-button-padding-x:14px;--tintora-button-border-radius:16px;--tintora-button-font-size:12px;--tintora-button-font-weight:var(--tintora-font-weight-bold)}.tintora-button--medium{--tintora-button-height:40px;--tintora-button-padding-x:18px;--tintora-button-border-radius:20px;--tintora-button-font-size:13px;--tintora-button-font-weight:var(--tintora-font-weight-bold)}.tintora-button--large{--tintora-button-height:48px;--tintora-button-padding-x:24px;--tintora-button-border-radius:24px;--tintora-button-font-size:14px;--tintora-button-font-weight:var(--tintora-font-weight-bold)}.tintora-button__icon{flex-shrink:0;display:inline-flex}.tintora-button--leading-icon{padding-inline-start:calc(var(--tintora-button-padding-x) - 4px)}.tintora-button--trailing-icon{padding-inline-end:calc(var(--tintora-button-padding-x) - 4px)}.tintora-button--primary{--tintora-button-fg:var(--tintora-color-on-accent-deep);--tintora-button-bg:var(--tintora-color-accent-deep);--tintora-button-shadow:var(--tintora-shadow-primary);--tintora-button-filter-hover:brightness(1.14);--tintora-button-filter-pressed:brightness(.9)}.tintora-button--secondary{--tintora-button-fg:var(--tintora-text);--tintora-button-bg:var(--tintora-fill-subtle);--tintora-button-bg-hover:var(--tintora-fill-subtle-hover);--tintora-button-bg-pressed:var(--tintora-fill-subtle-pressed)}.tintora-button--outline{--tintora-button-border:1px solid var(--tintora-line-strong);--tintora-button-fg:var(--tintora-text);--tintora-button-bg:transparent;--tintora-button-bg-hover:var(--tintora-fill-ghost-hover);--tintora-button-bg-pressed:var(--tintora-fill-subtle)}.tintora-button--ghost{--tintora-button-fg:var(--tintora-text-muted);--tintora-button-fg-hover:var(--tintora-text);--tintora-button-fg-pressed:var(--tintora-text);--tintora-button-bg:transparent;--tintora-button-bg-hover:var(--tintora-fill-ghost-hover);--tintora-button-bg-pressed:var(--tintora-fill-subtle)}.tintora-button:enabled:hover{color:var(--tintora-button-fg-hover,var(--tintora-button-fg));background-color:var(--tintora-button-bg-hover,var(--tintora-button-bg));filter:var(--tintora-button-filter-hover,none)}.tintora-button:enabled:active{color:var(--tintora-button-fg-pressed,var(--tintora-button-fg));background-color:var(--tintora-button-bg-pressed,var(--tintora-button-bg));filter:var(--tintora-button-filter-pressed,none);transform:translateY(1px)}.tintora-button:focus-visible{outline:2px solid var(--tintora-focus)}.tintora-button:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed;box-shadow:none}.tintora-button--loading:disabled{opacity:.85;cursor:progress}.tintora-card{box-sizing:border-box;font:inherit;text-align:start;border:1px solid #0000;justify-content:space-between;align-items:center;gap:12px;margin:0;display:flex}.tintora-card--surface{border-color:var(--tintora-border-card);border-radius:var(--tintora-radius-card);background:var(--tintora-surface-card);box-shadow:var(--tintora-shadow-card);color:var(--tintora-color-ink);--tintora-card-text-muted:var(--tintora-text-on-card-muted);padding:18px 18px 18px 20px}.tintora-card--row{border-color:var(--tintora-border-row);border-radius:var(--tintora-radius-18);background:var(--tintora-surface-row);color:var(--tintora-text);--tintora-card-text-muted:var(--tintora-text-faint);justify-content:flex-start;padding:10px 6px 10px 10px}.tintora-card--selectable{cursor:pointer;width:100%}@media (prefers-reduced-motion:no-preference){.tintora-card--selectable{transition:transform .15s,box-shadow .15s,background-color .15s}}.tintora-card--selectable:not(.tintora-card--selected):hover{box-shadow:var(--tintora-shadow-card-hover);transform:translateY(-3px)}.tintora-card--selectable:focus-visible{outline:2px solid var(--tintora-focus);outline-offset:2px}.tintora-card--selectable:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-card--selected{background:var(--tintora-color-accent-deep);box-shadow:var(--tintora-shadow-selected);color:var(--tintora-color-on-accent-deep);--tintora-card-text-muted:var(--tintora-color-on-accent-deep);border-color:#0000}.tintora-card--selected .tintora-tag--card{background-color:var(--tintora-chip-selected-bg);color:var(--tintora-chip-selected-fg);font-weight:var(--tintora-font-weight-bold)}.tintora-checkbox{flex-shrink:0;width:22px;height:22px;display:inline-block;position:relative}.tintora-checkbox__input{opacity:0;cursor:pointer;width:44px;height:44px;margin:0;position:absolute;inset:-11px}.tintora-checkbox__box{box-sizing:border-box;border:2px solid var(--tintora-control-border);border-radius:var(--tintora-radius-7);outline-offset:2px;pointer-events:none;background:0 0;justify-content:center;align-items:center;transition:background .15s,border-color .15s;display:flex;position:absolute;inset:0}.tintora-checkbox__check,.tintora-checkbox__dash{stroke:var(--tintora-control-on-fill);opacity:0;position:absolute}.tintora-checkbox__input:enabled:hover+.tintora-checkbox__box{border-color:var(--tintora-control-fill);background:var(--tintora-control-hover-tint)}.tintora-checkbox__input:checked+.tintora-checkbox__box,.tintora-checkbox__input:indeterminate+.tintora-checkbox__box{border-color:var(--tintora-control-fill);background:var(--tintora-control-fill)}.tintora-checkbox__input:checked+.tintora-checkbox__box .tintora-checkbox__check{opacity:1}.tintora-checkbox__input:indeterminate+.tintora-checkbox__box .tintora-checkbox__check{opacity:0}.tintora-checkbox__input:indeterminate+.tintora-checkbox__box .tintora-checkbox__dash{opacity:1}.tintora-checkbox__input:focus-visible+.tintora-checkbox__box{outline:2px solid var(--tintora-focus)}.tintora-checkbox__input:disabled{cursor:not-allowed}.tintora-checkbox__input:disabled+.tintora-checkbox__box{opacity:var(--tintora-opacity-disabled)}@media (prefers-reduced-motion:reduce){.tintora-checkbox__box{transition:none}}.tintora-chip{border-radius:var(--tintora-radius-12);background-color:var(--tintora-chip-bg);color:var(--tintora-chip-fg);font:var(--tintora-font-caption);font-weight:var(--tintora-font-weight-semibold);cursor:pointer;outline-offset:2px;border:0;outline:none;align-items:center;padding:6px 12px;display:inline-flex}.tintora-chip:enabled:hover:not([aria-pressed=true]){background-color:var(--tintora-chip-bg-hover)}.tintora-chip[aria-pressed=true]{background-color:var(--tintora-chip-selected-bg);color:var(--tintora-chip-selected-fg);font-weight:var(--tintora-font-weight-bold)}.tintora-chip:focus-visible{outline:2px solid var(--tintora-focus)}.tintora-chip:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-dot{box-sizing:border-box;forced-color-adjust:none;flex-shrink:0;display:inline-block}.tintora-dot--unread{border-radius:var(--tintora-radius-pill);background-color:var(--tintora-color-accent);width:8px;height:8px}.tintora-dot--read{border-radius:var(--tintora-radius-pill);border:1.5px solid var(--tintora-text-faint);width:8px;height:8px}.tintora-dot--tick{background-color:var(--tintora-color-accent);border-radius:2px;width:3px;height:15px}.tintora-button.tintora-icon-button{--tintora-button-padding-x:0px}.tintora-icon-button{width:var(--tintora-button-height);flex-shrink:0}.tintora-icon-button__icon{display:inline-flex}.tintora-icon-button__icon svg{width:var(--tintora-icon-button-icon-size);height:var(--tintora-icon-button-icon-size)}.tintora-icon-button.tintora-icon-button--small{--tintora-button-height:32px;--tintora-icon-button-icon-size:14px}.tintora-icon-button.tintora-icon-button--medium{--tintora-button-height:36px;--tintora-icon-button-icon-size:15px}.tintora-icon-button.tintora-icon-button--large{--tintora-button-height:44px;--tintora-icon-button-icon-size:18px}.tintora-icon-button.tintora-icon-button--round{--tintora-button-border-radius:var(--tintora-radius-pill)}.tintora-icon-button.tintora-icon-button--field{--tintora-button-height:48px;--tintora-button-border-radius:var(--tintora-radius-pill);--tintora-button-border:1px solid var(--tintora-border-field);--tintora-button-fg:var(--tintora-text);--tintora-button-bg:var(--tintora-surface-field);--tintora-button-bg-hover:var(--tintora-surface-field);--tintora-button-bg-pressed:var(--tintora-fill-subtle);--tintora-icon-button-icon-size:18px}.tintora-icon-button--field:enabled:hover{border-color:var(--tintora-border-field-hover)}.tintora-icon-button--field:enabled:active{border-color:var(--tintora-border-field)}.tintora-icon-button.tintora-icon-button--nav{--tintora-button-height:44px;--tintora-button-border-radius:var(--tintora-radius-14);--tintora-button-fg:var(--tintora-text-nav-idle);--tintora-button-fg-hover:var(--tintora-text);--tintora-button-fg-pressed:var(--tintora-text);--tintora-button-bg:transparent;--tintora-button-bg-hover:var(--tintora-fill-ghost-hover);--tintora-button-bg-pressed:var(--tintora-fill-ghost-hover);--tintora-icon-button-icon-size:20px}.tintora-icon-button.tintora-icon-button--nav[aria-current=page]{--tintora-button-fg:#fff;--tintora-button-fg-hover:#fff;--tintora-button-fg-pressed:#fff;--tintora-button-bg:var(--tintora-color-accent);--tintora-button-bg-hover:var(--tintora-color-accent);--tintora-button-bg-pressed:var(--tintora-color-accent);--tintora-button-shadow:var(--tintora-shadow-accent)}.tintora-modal{box-sizing:border-box;width:min(var(--tintora-modal-width), calc(100vw - 32px));border:1px solid var(--tintora-border-modal);border-radius:var(--tintora-radius-32);max-width:none;max-height:calc(100vh - 32px);font-family:var(--tintora-font-family);color:var(--tintora-text);background:var(--tintora-surface-modal);box-shadow:var(--tintora-shadow-modal);flex-direction:column;gap:18px;padding:28px;overflow:auto}.tintora-modal[open]{display:flex}.tintora-modal::backdrop{background:var(--tintora-scrim)}@media (prefers-reduced-motion:no-preference){.tintora-modal,.tintora-modal::backdrop{opacity:0;transition:opacity .2s ease, scale .2s ease, overlay .2s allow-discrete, display .2s allow-discrete}.tintora-modal{scale:.96}.tintora-modal[open],.tintora-modal[open]::backdrop{opacity:1}.tintora-modal[open]{scale:1}@starting-style{.tintora-modal[open],.tintora-modal[open]::backdrop{opacity:0}.tintora-modal[open]{scale:.96}}}body:has(.tintora-modal:modal){overflow:hidden}.tintora-modal--sm{--tintora-modal-width:400px}.tintora-modal--md{--tintora-modal-width:520px}.tintora-modal--lg{--tintora-modal-width:640px}.tintora-modal--center{text-align:center;align-items:center}.tintora-modal__close{position:absolute;top:18px;right:18px}.tintora-modal__title{font-size:20px;font-weight:var(--tintora-font-weight-bold);line-height:var(--tintora-line-height-tight);margin:0;padding-inline-end:44px}.tintora-modal--center .tintora-modal__title{padding-inline:0}.tintora-modal__description{color:var(--tintora-text-muted);margin:8px 0 0;font-size:13.5px;line-height:1.55}.tintora-modal__icon{border:1px solid var(--tintora-modal-status-border);border-radius:var(--tintora-radius-pill);width:52px;height:52px;color:var(--tintora-modal-status-fg);background:var(--tintora-modal-status-bg);justify-content:center;align-items:center;display:flex}.tintora-modal--center .tintora-modal__icon{width:64px;height:64px}.tintora-modal__icon svg{width:24px;height:24px}.tintora-modal--center .tintora-modal__icon svg{width:30px;height:30px}.tintora-modal__icon--success{--tintora-modal-status-bg:var(--tintora-status-success-bg);--tintora-modal-status-border:var(--tintora-status-success-border);--tintora-modal-status-fg:var(--tintora-status-success-fg)}.tintora-modal__icon--error{--tintora-modal-status-bg:var(--tintora-status-error-bg);--tintora-modal-status-border:var(--tintora-status-error-border);--tintora-modal-status-fg:var(--tintora-status-error-fg)}.tintora-modal__icon--info{--tintora-modal-status-bg:var(--tintora-status-info-bg);--tintora-modal-status-border:var(--tintora-status-info-border);--tintora-modal-status-fg:var(--tintora-status-info-fg)}.tintora-modal__icon--warning{--tintora-modal-status-bg:var(--tintora-status-warning-bg);--tintora-modal-status-border:var(--tintora-status-warning-border);--tintora-modal-status-fg:var(--tintora-status-warning-fg)}.tintora-modal__actions{justify-content:flex-end;gap:10px;padding-top:6px;display:flex}.tintora-modal--center .tintora-modal__actions{flex-direction:column;align-self:stretch}.tintora-progress-bar{flex-direction:column;gap:6px;display:flex}.tintora-progress-bar__header{font:var(--tintora-font-label);font-weight:var(--tintora-font-weight-semibold);justify-content:space-between;display:flex}.tintora-progress-bar__value{color:var(--tintora-text-muted)}.tintora-progress-bar__track{border-radius:var(--tintora-radius-pill);background:var(--tintora-fill-subtle-hover);height:8px;position:relative;overflow:hidden}.tintora-progress-bar__fill{border-radius:var(--tintora-radius-4);background:var(--tintora-control-fill);height:100%;position:absolute;top:0;left:0}.tintora-progress-bar__fill--complete{background:var(--tintora-status-success-fg)}.tintora-progress-bar__fill--indeterminate{width:40%;animation:1.3s ease-in-out infinite tintora-indeterminate}@keyframes tintora-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.tintora-progress-bar__fill--indeterminate{animation:none}}.tintora-radio{flex-shrink:0;width:22px;height:22px;display:inline-block;position:relative}.tintora-radio__input{opacity:0;cursor:pointer;width:44px;height:44px;margin:0;position:absolute;inset:-11px}.tintora-radio__circle{box-sizing:border-box;border:2px solid var(--tintora-control-border);border-radius:var(--tintora-radius-pill);outline-offset:2px;pointer-events:none;background:0 0;justify-content:center;align-items:center;transition:background .15s,border-color .15s;display:flex;position:absolute;inset:0}.tintora-radio__circle:after{content:"";border-radius:var(--tintora-radius-pill);background:var(--tintora-control-fill);opacity:0;width:10px;height:10px}.tintora-radio__input:enabled:hover+.tintora-radio__circle{border-color:var(--tintora-control-fill);background:var(--tintora-control-hover-tint)}.tintora-radio__input:checked+.tintora-radio__circle{border-color:var(--tintora-control-fill);background:0 0}.tintora-radio__input:checked+.tintora-radio__circle:after{opacity:1}.tintora-radio__input:focus-visible+.tintora-radio__circle{outline:2px solid var(--tintora-focus)}.tintora-radio__input:disabled{cursor:not-allowed}.tintora-radio__input:disabled+.tintora-radio__circle{opacity:var(--tintora-opacity-disabled)}@media (prefers-reduced-motion:reduce){.tintora-radio__circle{transition:none}}.tintora-search-input{--tintora-search-input-font-size:.8125rem;--tintora-search-input-clear-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");box-sizing:border-box;border:1px solid var(--tintora-border-field);border-radius:var(--tintora-radius-pill);height:48px;color:var(--tintora-text-muted);background-color:var(--tintora-surface-field);align-items:center;gap:10px;padding:0 18px;display:flex}.tintora-search-input--disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-search-input__icon{flex-shrink:0;width:16px;height:16px}.tintora-search-input__input{min-width:0;font-family:inherit;font-size:var(--tintora-search-input-font-size);color:var(--tintora-text);background:0 0;border:0;outline:0;flex:1;padding:0}.tintora-search-input__input::placeholder{color:var(--tintora-text-muted);opacity:1}.tintora-search-input__input:disabled{cursor:not-allowed}.tintora-search-input__input::-webkit-search-decoration{display:none}.tintora-search-input__input::-webkit-search-cancel-button{appearance:none;cursor:pointer;background-color:var(--tintora-text-muted);width:16px;height:16px;-webkit-mask:var(--tintora-search-input-clear-icon) center / contain no-repeat;-webkit-mask:var(--tintora-search-input-clear-icon) center / contain no-repeat;mask:var(--tintora-search-input-clear-icon) center / contain no-repeat}.tintora-search-input:not(.tintora-search-input--disabled):hover{border-color:var(--tintora-border-field-hover)}.tintora-search-input:focus-within{border-color:var(--tintora-focus);box-shadow:var(--tintora-shadow-focus-ring);outline-offset:2px;outline:2px solid #0000}.tintora-search-input__input::-webkit-search-cancel-button{appearance:none;cursor:pointer;background-color:var(--tintora-text-muted);width:16px;height:16px;-webkit-mask:var(--tintora-search-input-clear-icon) center / contain no-repeat;mask:var(--tintora-search-input-clear-icon) center / contain no-repeat}.tintora-search-input__input::-webkit-search-cancel-button:hover{background-color:var(--tintora-focus)}.tintora-select{--tintora-select-font-size:.71875rem;display:inline-block;position:relative}.tintora-select__trigger{box-sizing:border-box;border-radius:var(--tintora-radius-14);height:28px;font-family:inherit;font-size:var(--tintora-select-font-size);font-weight:var(--tintora-font-weight-medium);color:var(--tintora-chip-fg);background-color:var(--tintora-chip-bg);cursor:pointer;border:0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.tintora-select__trigger:enabled:hover,.tintora-select__trigger[aria-expanded=true]{background-color:var(--tintora-chip-bg-hover)}.tintora-select__trigger:focus-visible{box-shadow:var(--tintora-shadow-focus-ring);outline-offset:2px;outline:2px solid #0000}.tintora-select__trigger:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-select__value--placeholder{color:var(--tintora-text-on-card-muted)}.tintora-select__chevron{flex-shrink:0}.tintora-select__trigger[aria-expanded=true] .tintora-select__chevron{transform:rotate(180deg)}.tintora-select__menu{box-sizing:border-box;border:1px solid var(--tintora-menu-border);border-radius:var(--tintora-radius-14);max-height:50vh;color:var(--tintora-color-ink);background:var(--tintora-menu-bg);box-shadow:var(--tintora-menu-shadow);flex-direction:column;gap:2px;margin:0;padding:6px;display:flex;inset:auto;overflow-y:auto}.tintora-select__option{box-sizing:border-box;border-radius:var(--tintora-radius-12);min-height:32px;font:var(--tintora-font-body);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding:0 10px;display:flex}.tintora-select__option--active{background:var(--tintora-menu-item-hover)}.tintora-select__option[aria-selected=true]{font-weight:var(--tintora-font-weight-bold);color:var(--tintora-color-accent-deep);background:var(--tintora-tint-accent)}.tintora-select__option[aria-disabled=true]{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}@media (pointer:coarse){.tintora-select__option{min-height:44px}}@media (forced-colors:active){.tintora-select__option--active{outline-offset:-2px;outline:2px solid highlight}}.tintora-skeleton{border-radius:var(--tintora-radius-pill);background:var(--tintora-shimmer);background-size:200% 100%;flex-shrink:0;width:100%;height:14px;animation:1.4s linear infinite tintora-shimmer;display:block}@keyframes tintora-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.tintora-skeleton{animation:none}}.tintora-switch{flex-shrink:0;width:44px;height:26px;display:inline-block;position:relative}.tintora-switch__input{opacity:0;cursor:pointer;width:100%;height:calc(100% + 18px);margin:0;position:absolute;inset:-9px 0}.tintora-switch__track{--tintora-switch-offset:3px;border-radius:var(--tintora-radius-pill);background:var(--tintora-switch-track);outline-offset:2px;pointer-events:none;transition:background .2s;position:absolute;inset:0}.tintora-switch__track:after{content:"";top:var(--tintora-switch-offset);left:var(--tintora-switch-offset);border-radius:var(--tintora-radius-pill);background:var(--tintora-color-white);width:20px;height:20px;box-shadow:var(--tintora-shadow-knob);transition:transform .2s;position:absolute}.tintora-switch__input:hover+.tintora-switch__track{background:var(--tintora-switch-track-hover)}.tintora-switch__input:checked+.tintora-switch__track{background:var(--tintora-control-fill)}.tintora-switch__input:checked+.tintora-switch__track:after{transform:translate(18px)}.tintora-switch__input:focus-visible+.tintora-switch__track{outline:2px solid var(--tintora-focus)}.tintora-switch__input:disabled{cursor:not-allowed}.tintora-switch__input:disabled+.tintora-switch__track{opacity:var(--tintora-opacity-disabled);background:var(--tintora-switch-track)}.tintora-switch__input:disabled:checked+.tintora-switch__track{background:var(--tintora-control-fill)}@media (prefers-reduced-motion:reduce){.tintora-switch__track,.tintora-switch__track:after{transition:none}}.tintora-tag{white-space:nowrap;font:var(--tintora-font-caption);font-weight:var(--tintora-font-weight-semibold);display:inline-block}.tintora-tag--neutral{background-color:var(--tintora-tag-bg);color:var(--tintora-tag-fg)}.tintora-tag--success{background-color:var(--tintora-color-success);color:var(--tintora-color-on-success)}.tintora-tag--accent{background-color:var(--tintora-color-accent-deep);color:var(--tintora-color-on-accent-deep);font-weight:var(--tintora-font-weight-bold)}.tintora-tag--card{background-color:var(--tintora-chip-bg);color:var(--tintora-chip-fg)}.tintora-tag--small{border-radius:var(--tintora-radius-8);padding:2px 8px}.tintora-tag--medium{border-radius:var(--tintora-radius-8);padding:3px 9px}.tintora-tag--large{border-radius:var(--tintora-radius-12);padding:5px 12px}.tintora-textfield{--tintora-textfield-font-size:.8125rem;flex-direction:column;gap:8px;display:inline-flex}.tintora-textfield--disabled{opacity:var(--tintora-opacity-disabled)}.tintora-textfield__label{font:var(--tintora-font-body);font-weight:var(--tintora-font-weight-semibold);color:var(--tintora-text)}.tintora-textfield__input{box-sizing:border-box;border:1px solid var(--tintora-border-field);border-radius:var(--tintora-radius-16);height:48px;font-family:inherit;font-size:var(--tintora-textfield-font-size);color:var(--tintora-text);background-color:var(--tintora-surface-field);padding:0 16px}.tintora-textfield__input::placeholder{color:var(--tintora-text-muted);opacity:1}.tintora-textfield__input:enabled:hover{border-color:var(--tintora-border-field-hover)}.tintora-textfield__input:focus-visible{border-color:var(--tintora-focus);box-shadow:var(--tintora-shadow-focus-ring);outline-offset:2px;outline:2px solid #0000}.tintora-textfield__input[aria-invalid=true]{border-color:var(--tintora-text-error)}.tintora-textfield__input:disabled{cursor:not-allowed}.tintora-textfield__hint{font:var(--tintora-font-caption);color:var(--tintora-text-faint)}.tintora-textfield__hint--error{color:var(--tintora-text-error)}.tintora-toggle{border-radius:var(--tintora-radius-pill);background-color:var(--tintora-fill-subtle);gap:4px;padding:5px;display:inline-flex;position:relative}.tintora-toggle--disabled{opacity:var(--tintora-opacity-disabled)}.tintora-toggle__item{box-sizing:border-box;border-radius:var(--tintora-radius-pill);min-width:34px;height:34px;color:var(--tintora-text-nav-idle);font:var(--tintora-font-label);cursor:pointer;outline-offset:2px;z-index:1;background:0 0;border:0;outline:none;justify-content:center;align-items:center;padding:0 8px;transition:color .2s;display:inline-flex}.tintora-toggle__item[aria-pressed=true]{color:#fff}.tintora-toggle__thumb{width:var(--tintora-toggle-thumb-width);border-radius:var(--tintora-radius-pill);background-color:var(--tintora-color-accent);transform:translateX(var(--tintora-toggle-thumb-x));pointer-events:none;transition:transform .2s;position:absolute;inset-block:5px;inset-inline-start:0}@media (prefers-reduced-motion:reduce){.tintora-toggle__thumb,.tintora-toggle__item{transition:none}}.tintora-toggle__item:focus-visible{outline:2px solid var(--tintora-focus)}.tintora-toggle__item:disabled{cursor:not-allowed}.tintora-toggle:not(.tintora-toggle--disabled) .tintora-toggle__item:disabled{opacity:var(--tintora-opacity-disabled)}.tintora-tooltip{display:contents}.tintora-tooltip__content{box-sizing:border-box;border-radius:var(--tintora-radius-10);width:max-content;font:var(--tintora-font-body);font-weight:var(--tintora-font-weight-semibold);white-space:nowrap;color:var(--tintora-text-on-tooltip);background:var(--tintora-surface-tooltip);box-shadow:var(--tintora-shadow-tooltip);border:0;align-items:center;gap:10px;margin:0;padding:6px 10px;display:inline-flex;inset:auto;overflow:visible}.tintora-tooltip__content:before{content:"";background:inherit;width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tintora-tooltip__content--top:before{bottom:-4px;left:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__content--bottom:before{top:-4px;left:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__content--left:before{right:-4px;top:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__content--right:before{left:-4px;top:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__shortcut{border-radius:var(--tintora-radius-6);font:var(--tintora-font-caption);font-weight:var(--tintora-font-weight-bold);background:var(--tintora-tooltip-kbd-bg);margin-right:-2px;padding:2px 6px}.tintora-tooltip__content--rich{border-radius:var(--tintora-radius-12);width:220px;font-weight:var(--tintora-font-weight-medium);white-space:normal;padding:10px 12px;display:block}.tintora-tooltip__title{font:var(--tintora-font-label);display:block}.tintora-tooltip__text{min-width:0}.tintora-tooltip__content--rich .tintora-tooltip__text{color:var(--tintora-text-on-tooltip-muted);margin-top:2px;line-height:1.45;display:block}.tintora-tooltip__content--rich .tintora-tooltip__shortcut{margin-top:8px;display:inline-block}@media (prefers-reduced-motion:no-preference){.tintora-tooltip__content{animation:.12s ease-out tintora-tooltip-in}}@keyframes tintora-tooltip-in{0%{opacity:0}}
|
|
1
|
+
:root{--tintora-color-accent:#ee6b25;--tintora-color-accent-deep:#c94e0c;--tintora-color-success:#4cc56b;--tintora-color-planned:#f2698c;--tintora-color-heart:#c42a56;--tintora-color-steps:#1f7a38;--tintora-color-sleep:#2f4fc4;--tintora-color-ink:#1d1c1c;--tintora-color-white:#fff;--tintora-color-destructive:#b3261e;--tintora-color-on-accent:#1d0e04;--tintora-color-on-accent-deep:var(--tintora-color-white);--tintora-color-on-success:#0d200f;--tintora-color-on-planned:#260a13;--tintora-color-on-heart:var(--tintora-color-white);--tintora-color-on-steps:var(--tintora-color-white);--tintora-color-on-sleep:var(--tintora-color-white);--tintora-color-on-destructive:var(--tintora-color-white);--tintora-text-on-card-muted:#55524f;--tintora-chip-fg:#3c3a38;--tintora-chip-bg:#efedeb;--tintora-chip-bg-hover:#e4e1de;--tintora-chip-selected-fg:#8f3604;--tintora-chip-selected-bg:var(--tintora-color-white);--tintora-tint-accent:#fdeadd;--tintora-tint-heart:#fbe0e8;--tintora-tint-steps:#dcf3e1;--tintora-tint-sleep:#e0e7fb;--tintora-menu-bg:var(--tintora-color-white);--tintora-menu-border:#1d1c1c1a;--tintora-menu-shadow:0 16px 32px #00000038;--tintora-menu-item-hover:#1d1c1c12;--tintora-menu-item-destructive:var(--tintora-color-destructive);--tintora-chart-grid:#ece9e6;--tintora-chart-axis:#6f6b68;--tintora-chart-track:#e6e4e2;--tintora-surface-menu-row:#ffffff0d;--tintora-font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--tintora-font-weight-regular:400;--tintora-font-weight-medium:500;--tintora-font-weight-semibold:600;--tintora-font-weight-bold:700;--tintora-font-weight-extrabold:800;--tintora-line-height-tight:1.2;--tintora-font-display:700 1.625rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-title:700 1.125rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-heading:700 .9375rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-label:700 .78125rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-body:500 .75rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-caption:400 .6875rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-stat-value:800 1.5625rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-subtitle:700 .875rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-button:700 .8125rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-font-button-sm:700 .75rem/var(--tintora-line-height-tight) var(--tintora-font-family);--tintora-tracking-tight:-.02em;--tintora-tracking-snug:-.01em;--tintora-tracking-wide:.04em;--tintora-radius-2:2px;--tintora-radius-4:4px;--tintora-radius-6:6px;--tintora-radius-7:7px;--tintora-radius-8:8px;--tintora-radius-9:9px;--tintora-radius-10:10px;--tintora-radius-12:12px;--tintora-radius-14:14px;--tintora-radius-16:16px;--tintora-radius-18:18px;--tintora-radius-20:20px;--tintora-radius-22:22px;--tintora-radius-26:26px;--tintora-radius-28:28px;--tintora-radius-30:30px;--tintora-radius-32:32px;--tintora-radius-34:34px;--tintora-radius-38:38px;--tintora-radius-40:40px;--tintora-radius-pill:9999px;--tintora-radius-card:var(--tintora-radius-20);--tintora-radius-panel:var(--tintora-radius-32);--tintora-shadow-selected:0 14px 30px #c94e0c73;--tintora-shadow-primary:0 8px 20px #c94e0c59;--tintora-shadow-accent:0 8px 20px #ee6b2566;--tintora-shadow-focus-ring:0 0 0 3px #ee6b2547;--tintora-shadow-menu:0 16px 32px #00000073;--tintora-shadow-tooltip:0 8px 20px #00000040;--tintora-shadow-knob:0 2px 4px #0000004d;--tintora-shadow-sheet:0 -16px 40px #00000059;--tintora-blur-glass:28px;--tintora-duration-fast:.15s;--tintora-duration-base:.2s;--tintora-opacity-disabled:.45}:root,[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--tintora-bg:linear-gradient(180deg, #3e3b3a, #222020);--tintora-surface-glass:linear-gradient(180deg, #3e3b3acc, #222020e6);--tintora-surface-card:#fbfaf9;--tintora-surface-row:#ffffff0f;--tintora-surface-field:#100f0f9e;--tintora-surface-menu:#1e1c1cf7;--tintora-text:var(--tintora-color-white);--tintora-text-muted:#ffffffb8;--tintora-text-faint:#ffffffa6;--tintora-text-nav-idle:#ffffffc7;--tintora-text-day:#ffffffd1;--tintora-text-error:#ff9a8a;--tintora-border-glass:#ffffff14;--tintora-border-card:transparent;--tintora-border-row:#ffffff0f;--tintora-border-field:#ffffff14;--tintora-border-field-hover:#ffffff52;--tintora-line:#ffffff1a;--tintora-line-strong:#ffffff52;--tintora-fill-subtle:#ffffff1a;--tintora-fill-subtle-hover:#fff3;--tintora-fill-subtle-pressed:#ffffff47;--tintora-fill-ghost-hover:#ffffff1f;--tintora-fill-day-hover:#ffffff24;--tintora-tag-bg:#ffffff24;--tintora-tag-fg:var(--tintora-color-white);--tintora-focus:var(--tintora-color-accent);--tintora-ring:var(--tintora-color-white);--tintora-shadow-glass:0 30px 60px #00000059;--tintora-shadow-card:0 10px 24px #0000002e;--tintora-shadow-card-hover:0 18px 36px #00000052;--tintora-bg-glow:radial-gradient(60% 50% at 6% 8%, #deccb080, transparent 62%), radial-gradient(50% 45% at 96% 10%, #846a5680, transparent 62%);--tintora-text-placeholder:#ffffff9e;--tintora-scrim:#0a090999;--tintora-surface-modal:linear-gradient(180deg, #403c3b, #2a2726);--tintora-border-modal:#ffffff1f;--tintora-shadow-modal:0 40px 80px #00000080;--tintora-surface-popover:#2b2928;--tintora-border-popover:#ffffff24;--tintora-shadow-popover:0 24px 48px #00000073;--tintora-surface-tooltip:#fbfaf9;--tintora-text-on-tooltip:var(--tintora-color-ink);--tintora-text-on-tooltip-muted:#5a5754;--tintora-tooltip-kbd-bg:#1d1c1c1a;--tintora-surface-toast:#fbfaf9;--tintora-text-on-toast:var(--tintora-color-ink);--tintora-text-on-toast-muted:#5a5754;--tintora-toast-action:var(--tintora-color-accent-deep);--tintora-shadow-toast:0 16px 36px #0006;--tintora-toast-icon-success:var(--tintora-color-steps);--tintora-toast-icon-error:var(--tintora-color-destructive);--tintora-toast-icon-info:var(--tintora-color-sleep);--tintora-toast-icon-warning:#8a5600;--tintora-status-info-bg:#7896ff24;--tintora-status-info-border:#96afff61;--tintora-status-info-fg:#a9bcff;--tintora-status-success-bg:#4cc56b24;--tintora-status-success-border:#4cc56b66;--tintora-status-success-fg:#6ddb8b;--tintora-status-warning-bg:#f2a33a26;--tintora-status-warning-border:#f2a33a6b;--tintora-status-warning-fg:#f5b45a;--tintora-status-error-bg:#ff826e26;--tintora-status-error-border:#ff8c786b;--tintora-status-error-fg:var(--tintora-text-error);--tintora-control-fill:var(--tintora-color-accent);--tintora-control-on-fill:var(--tintora-color-on-accent);--tintora-control-border:#fff9;--tintora-control-hover-tint:#ee6b2529;--tintora-switch-track:#ffffff4d;--tintora-switch-track-hover:#fff6;--tintora-shimmer:linear-gradient(90deg, #ffffff14 0%, #fff3 50%, #ffffff14 100%)}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--tintora-bg:linear-gradient(180deg, #fcfaf7, #f2ebe4);--tintora-surface-glass:linear-gradient(180deg, #ffffffb3, #ffffff80);--tintora-surface-card:#fff;--tintora-surface-row:#ffffffd9;--tintora-surface-field:#ffffffd9;--tintora-surface-menu:#2a2827;--tintora-text:var(--tintora-color-ink);--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:var(--tintora-color-destructive);--tintora-border-glass:#ffffffd9;--tintora-border-card:#1d1c1c0d;--tintora-border-row:#1d1c1c0f;--tintora-border-field:#1d1c1c14;--tintora-border-field-hover:#1d1c1c4d;--tintora-line:#1d1c1c1a;--tintora-line-strong:#1d1c1c4d;--tintora-fill-subtle:#1d1c1c12;--tintora-fill-subtle-hover:#1d1c1c24;--tintora-fill-subtle-pressed:#1d1c1c33;--tintora-fill-ghost-hover:#1d1c1c14;--tintora-fill-day-hover:#1d1c1c1a;--tintora-tag-bg:#1d1c1c12;--tintora-tag-fg:var(--tintora-color-ink);--tintora-focus:var(--tintora-color-accent-deep);--tintora-ring:var(--tintora-color-ink);--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033;--tintora-bg-glow:radial-gradient(60% 50% at 6% 8%, #ffd6ace6, transparent 62%), radial-gradient(50% 45% at 96% 10%, #ffeed6f2, transparent 62%);--tintora-text-placeholder:#5f5b58;--tintora-scrim:#1d1c1c73;--tintora-surface-modal:#fff;--tintora-border-modal:#1d1c1c0f;--tintora-shadow-modal:0 40px 80px #3c281459;--tintora-surface-popover:#fff;--tintora-border-popover:#1d1c1c1a;--tintora-shadow-popover:0 24px 48px #3c281438;--tintora-surface-tooltip:#2a2827;--tintora-text-on-tooltip:var(--tintora-color-white);--tintora-text-on-tooltip-muted:#ffffffc7;--tintora-tooltip-kbd-bg:#ffffff2e;--tintora-surface-toast:#2a2827;--tintora-text-on-toast:var(--tintora-color-white);--tintora-text-on-toast-muted:#ffffffbf;--tintora-toast-action:#ff9a5c;--tintora-shadow-toast:0 16px 36px #3c281459;--tintora-toast-icon-success:var(--tintora-color-success);--tintora-toast-icon-error:#ff9a8a;--tintora-toast-icon-info:#9db4ff;--tintora-toast-icon-warning:#f2a33a;--tintora-status-info-bg:#2f4fc414;--tintora-status-info-border:#2f4fc447;--tintora-status-info-fg:var(--tintora-color-sleep);--tintora-status-success-bg:#1f7a3817;--tintora-status-success-border:#1f7a384d;--tintora-status-success-fg:var(--tintora-color-steps);--tintora-status-warning-bg:#a86a0a1a;--tintora-status-warning-border:#a86a0a52;--tintora-status-warning-fg:#8a5600;--tintora-status-error-bg:#b3261e14;--tintora-status-error-border:#b3261e47;--tintora-status-error-fg:var(--tintora-text-error);--tintora-control-fill:var(--tintora-color-accent-deep);--tintora-control-on-fill:var(--tintora-color-white);--tintora-control-border:#1d1c1c8c;--tintora-control-hover-tint:#ee6b2529;--tintora-switch-track:#1d1c1c61;--tintora-switch-track-hover:#1d1c1c80;--tintora-shimmer:linear-gradient(90deg, #1d1c1c12 0%, #1d1c1c29 50%, #1d1c1c12 100%)}@media (prefers-color-scheme:light){:root:not([data-theme]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--tintora-bg:linear-gradient(180deg, #fcfaf7, #f2ebe4);--tintora-surface-glass:linear-gradient(180deg, #ffffffb3, #ffffff80);--tintora-surface-card:#fff;--tintora-surface-row:#ffffffd9;--tintora-surface-field:#ffffffd9;--tintora-surface-menu:#2a2827;--tintora-text:var(--tintora-color-ink);--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:var(--tintora-color-destructive);--tintora-border-glass:#ffffffd9;--tintora-border-card:#1d1c1c0d;--tintora-border-row:#1d1c1c0f;--tintora-border-field:#1d1c1c14;--tintora-border-field-hover:#1d1c1c4d;--tintora-line:#1d1c1c1a;--tintora-line-strong:#1d1c1c4d;--tintora-fill-subtle:#1d1c1c12;--tintora-fill-subtle-hover:#1d1c1c24;--tintora-fill-subtle-pressed:#1d1c1c33;--tintora-fill-ghost-hover:#1d1c1c14;--tintora-fill-day-hover:#1d1c1c1a;--tintora-tag-bg:#1d1c1c12;--tintora-tag-fg:var(--tintora-color-ink);--tintora-focus:var(--tintora-color-accent-deep);--tintora-ring:var(--tintora-color-ink);--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033;--tintora-bg-glow:radial-gradient(60% 50% at 6% 8%, #ffd6ace6, transparent 62%), radial-gradient(50% 45% at 96% 10%, #ffeed6f2, transparent 62%);--tintora-text-placeholder:#5f5b58;--tintora-scrim:#1d1c1c73;--tintora-surface-modal:#fff;--tintora-border-modal:#1d1c1c0f;--tintora-shadow-modal:0 40px 80px #3c281459;--tintora-surface-popover:#fff;--tintora-border-popover:#1d1c1c1a;--tintora-shadow-popover:0 24px 48px #3c281438;--tintora-surface-tooltip:#2a2827;--tintora-text-on-tooltip:var(--tintora-color-white);--tintora-text-on-tooltip-muted:#ffffffc7;--tintora-tooltip-kbd-bg:#ffffff2e;--tintora-surface-toast:#2a2827;--tintora-text-on-toast:var(--tintora-color-white);--tintora-text-on-toast-muted:#ffffffbf;--tintora-toast-action:#ff9a5c;--tintora-shadow-toast:0 16px 36px #3c281459;--tintora-toast-icon-success:var(--tintora-color-success);--tintora-toast-icon-error:#ff9a8a;--tintora-toast-icon-info:#9db4ff;--tintora-toast-icon-warning:#f2a33a;--tintora-status-info-bg:#2f4fc414;--tintora-status-info-border:#2f4fc447;--tintora-status-info-fg:var(--tintora-color-sleep);--tintora-status-success-bg:#1f7a3817;--tintora-status-success-border:#1f7a384d;--tintora-status-success-fg:var(--tintora-color-steps);--tintora-status-warning-bg:#a86a0a1a;--tintora-status-warning-border:#a86a0a52;--tintora-status-warning-fg:#8a5600;--tintora-status-error-bg:#b3261e14;--tintora-status-error-border:#b3261e47;--tintora-status-error-fg:var(--tintora-text-error);--tintora-control-fill:var(--tintora-color-accent-deep);--tintora-control-on-fill:var(--tintora-color-white);--tintora-control-border:#1d1c1c8c;--tintora-control-hover-tint:#ee6b2529;--tintora-switch-track:#1d1c1c61;--tintora-switch-track-hover:#1d1c1c80;--tintora-shimmer:linear-gradient(90deg, #1d1c1c12 0%, #1d1c1c29 50%, #1d1c1c12 100%)}}.tintora-avatar{border-radius:var(--tintora-radius-pill);color:var(--tintora-color-ink);font:var(--tintora-font-body);font-size:var(--tintora-avatar-font-size);font-weight:var(--tintora-font-weight-bold);background:linear-gradient(135deg,#f1d9bf,#c9a07a);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.tintora-avatar>img{object-fit:cover;width:100%;height:100%}.tintora-avatar--small{--tintora-avatar-font-size:.6875rem;width:32px;height:32px;font-weight:var(--tintora-font-weight-bold)}.tintora-avatar--medium{--tintora-avatar-font-size:.8125rem;width:40px;height:40px;font-weight:var(--tintora-font-weight-bold)}.tintora-avatar--large{--tintora-avatar-font-size:.875rem;width:44px;height:44px;font-weight:var(--tintora-font-weight-bold)}.tintora-spinner{flex-shrink:0;animation:.9s linear infinite tintora-spin}@keyframes tintora-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.tintora-spinner{animation:none}}.tintora-button{--tintora-button-border:1px solid transparent;box-sizing:border-box;cursor:pointer;outline-offset:2px;height:var(--tintora-button-height);padding:0 var(--tintora-button-padding-x);border:var(--tintora-button-border);border-radius:var(--tintora-button-border-radius);font-family:inherit;font-size:var(--tintora-button-font-size);font-weight:var(--tintora-button-font-weight);color:var(--tintora-button-fg);background-color:var(--tintora-button-bg);box-shadow:var(--tintora-button-shadow,none);outline:none;justify-content:center;align-items:center;gap:8px;display:inline-flex}.tintora-button--small{--tintora-button-height:32px;--tintora-button-padding-x:14px;--tintora-button-border-radius:16px;--tintora-button-font-size:12px;--tintora-button-font-weight:var(--tintora-font-weight-bold)}.tintora-button--medium{--tintora-button-height:40px;--tintora-button-padding-x:18px;--tintora-button-border-radius:20px;--tintora-button-font-size:13px;--tintora-button-font-weight:var(--tintora-font-weight-bold)}.tintora-button--large{--tintora-button-height:48px;--tintora-button-padding-x:24px;--tintora-button-border-radius:24px;--tintora-button-font-size:14px;--tintora-button-font-weight:var(--tintora-font-weight-bold)}.tintora-button__icon{flex-shrink:0;display:inline-flex}.tintora-button--leading-icon{padding-inline-start:calc(var(--tintora-button-padding-x) - 4px)}.tintora-button--trailing-icon{padding-inline-end:calc(var(--tintora-button-padding-x) - 4px)}.tintora-button--primary{--tintora-button-fg:var(--tintora-color-on-accent-deep);--tintora-button-bg:var(--tintora-color-accent-deep);--tintora-button-shadow:var(--tintora-shadow-primary);--tintora-button-filter-hover:brightness(1.14);--tintora-button-filter-pressed:brightness(.9)}.tintora-button--secondary{--tintora-button-fg:var(--tintora-text);--tintora-button-bg:var(--tintora-fill-subtle);--tintora-button-bg-hover:var(--tintora-fill-subtle-hover);--tintora-button-bg-pressed:var(--tintora-fill-subtle-pressed)}.tintora-button--outline{--tintora-button-border:1px solid var(--tintora-line-strong);--tintora-button-fg:var(--tintora-text);--tintora-button-bg:transparent;--tintora-button-bg-hover:var(--tintora-fill-ghost-hover);--tintora-button-bg-pressed:var(--tintora-fill-subtle)}.tintora-button--ghost{--tintora-button-fg:var(--tintora-text-muted);--tintora-button-fg-hover:var(--tintora-text);--tintora-button-fg-pressed:var(--tintora-text);--tintora-button-bg:transparent;--tintora-button-bg-hover:var(--tintora-fill-ghost-hover);--tintora-button-bg-pressed:var(--tintora-fill-subtle)}.tintora-button:enabled:hover{color:var(--tintora-button-fg-hover,var(--tintora-button-fg));background-color:var(--tintora-button-bg-hover,var(--tintora-button-bg));filter:var(--tintora-button-filter-hover,none)}.tintora-button:enabled:active{color:var(--tintora-button-fg-pressed,var(--tintora-button-fg));background-color:var(--tintora-button-bg-pressed,var(--tintora-button-bg));filter:var(--tintora-button-filter-pressed,none);transform:translateY(1px)}.tintora-button:focus-visible{outline:2px solid var(--tintora-focus)}.tintora-button:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed;box-shadow:none}.tintora-button--loading:disabled{opacity:.85;cursor:progress}.tintora-card{box-sizing:border-box;font:inherit;text-align:start;border:1px solid #0000;justify-content:space-between;align-items:center;gap:12px;margin:0;display:flex}.tintora-card--surface{border-color:var(--tintora-border-card);border-radius:var(--tintora-radius-card);background:var(--tintora-surface-card);box-shadow:var(--tintora-shadow-card);color:var(--tintora-color-ink);--tintora-card-text-muted:var(--tintora-text-on-card-muted);padding:18px 18px 18px 20px}.tintora-card--row{border-color:var(--tintora-border-row);border-radius:var(--tintora-radius-18);background:var(--tintora-surface-row);color:var(--tintora-text);--tintora-card-text-muted:var(--tintora-text-faint);justify-content:flex-start;padding:10px 6px 10px 10px}.tintora-card--selectable{cursor:pointer;width:100%}@media (prefers-reduced-motion:no-preference){.tintora-card--selectable{transition:transform .15s,box-shadow .15s,background-color .15s}}.tintora-card--selectable:not(.tintora-card--selected):hover{box-shadow:var(--tintora-shadow-card-hover);transform:translateY(-3px)}.tintora-card--selectable:focus-visible{outline:2px solid var(--tintora-focus);outline-offset:2px}.tintora-card--selectable:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-card--selected{background:var(--tintora-color-accent-deep);box-shadow:var(--tintora-shadow-selected);color:var(--tintora-color-on-accent-deep);--tintora-card-text-muted:var(--tintora-color-on-accent-deep);border-color:#0000}.tintora-card--selected .tintora-tag--card{background-color:var(--tintora-chip-selected-bg);color:var(--tintora-chip-selected-fg);font-weight:var(--tintora-font-weight-bold)}.tintora-checkbox{flex-shrink:0;width:22px;height:22px;display:inline-block;position:relative}.tintora-checkbox__input{opacity:0;cursor:pointer;width:44px;height:44px;margin:0;position:absolute;inset:-11px}.tintora-checkbox__box{box-sizing:border-box;border:2px solid var(--tintora-control-border);border-radius:var(--tintora-radius-7);outline-offset:2px;pointer-events:none;background:0 0;justify-content:center;align-items:center;transition:background .15s,border-color .15s;display:flex;position:absolute;inset:0}.tintora-checkbox__check,.tintora-checkbox__dash{stroke:var(--tintora-control-on-fill);opacity:0;position:absolute}.tintora-checkbox__input:enabled:hover+.tintora-checkbox__box{border-color:var(--tintora-control-fill);background:var(--tintora-control-hover-tint)}.tintora-checkbox__input:checked+.tintora-checkbox__box,.tintora-checkbox__input:indeterminate+.tintora-checkbox__box{border-color:var(--tintora-control-fill);background:var(--tintora-control-fill)}.tintora-checkbox__input:checked+.tintora-checkbox__box .tintora-checkbox__check{opacity:1}.tintora-checkbox__input:indeterminate+.tintora-checkbox__box .tintora-checkbox__check{opacity:0}.tintora-checkbox__input:indeterminate+.tintora-checkbox__box .tintora-checkbox__dash{opacity:1}.tintora-checkbox__input:focus-visible+.tintora-checkbox__box{outline:2px solid var(--tintora-focus)}.tintora-checkbox__input:disabled{cursor:not-allowed}.tintora-checkbox__input:disabled+.tintora-checkbox__box{opacity:var(--tintora-opacity-disabled)}@media (prefers-reduced-motion:reduce){.tintora-checkbox__box{transition:none}}.tintora-chip{border-radius:var(--tintora-radius-12);background-color:var(--tintora-chip-bg);color:var(--tintora-chip-fg);font:var(--tintora-font-caption);font-weight:var(--tintora-font-weight-semibold);cursor:pointer;outline-offset:2px;border:0;outline:none;align-items:center;padding:6px 12px;display:inline-flex}.tintora-chip:enabled:hover:not([aria-pressed=true]){background-color:var(--tintora-chip-bg-hover)}.tintora-chip[aria-pressed=true]{background-color:var(--tintora-chip-selected-bg);color:var(--tintora-chip-selected-fg);font-weight:var(--tintora-font-weight-bold)}.tintora-chip:focus-visible{outline:2px solid var(--tintora-focus)}.tintora-chip:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-dot{box-sizing:border-box;forced-color-adjust:none;flex-shrink:0;display:inline-block}.tintora-dot--unread{border-radius:var(--tintora-radius-pill);background-color:var(--tintora-color-accent);width:8px;height:8px}.tintora-dot--read{border-radius:var(--tintora-radius-pill);border:1.5px solid var(--tintora-text-faint);width:8px;height:8px}.tintora-dot--tick{background-color:var(--tintora-color-accent);border-radius:2px;width:3px;height:15px}.tintora-button.tintora-icon-button{--tintora-button-padding-x:0px}.tintora-icon-button{width:var(--tintora-button-height);flex-shrink:0}.tintora-icon-button__icon{display:inline-flex}.tintora-icon-button__icon svg{width:var(--tintora-icon-button-icon-size);height:var(--tintora-icon-button-icon-size)}.tintora-icon-button.tintora-icon-button--small{--tintora-button-height:32px;--tintora-icon-button-icon-size:14px}.tintora-icon-button.tintora-icon-button--medium{--tintora-button-height:36px;--tintora-icon-button-icon-size:15px}.tintora-icon-button.tintora-icon-button--large{--tintora-button-height:44px;--tintora-icon-button-icon-size:18px}.tintora-icon-button.tintora-icon-button--round{--tintora-button-border-radius:var(--tintora-radius-pill)}.tintora-icon-button.tintora-icon-button--field{--tintora-button-height:48px;--tintora-button-border-radius:var(--tintora-radius-pill);--tintora-button-border:1px solid var(--tintora-border-field);--tintora-button-fg:var(--tintora-text);--tintora-button-bg:var(--tintora-surface-field);--tintora-button-bg-hover:var(--tintora-surface-field);--tintora-button-bg-pressed:var(--tintora-fill-subtle);--tintora-icon-button-icon-size:18px}.tintora-icon-button--field:enabled:hover{border-color:var(--tintora-border-field-hover)}.tintora-icon-button--field:enabled:active{border-color:var(--tintora-border-field)}.tintora-icon-button.tintora-icon-button--nav{--tintora-button-height:44px;--tintora-button-border-radius:var(--tintora-radius-14);--tintora-button-fg:var(--tintora-text-nav-idle);--tintora-button-fg-hover:var(--tintora-text);--tintora-button-fg-pressed:var(--tintora-text);--tintora-button-bg:transparent;--tintora-button-bg-hover:var(--tintora-fill-ghost-hover);--tintora-button-bg-pressed:var(--tintora-fill-ghost-hover);--tintora-icon-button-icon-size:20px}.tintora-icon-button.tintora-icon-button--nav[aria-current=page]{--tintora-button-fg:#fff;--tintora-button-fg-hover:#fff;--tintora-button-fg-pressed:#fff;--tintora-button-bg:var(--tintora-color-accent);--tintora-button-bg-hover:var(--tintora-color-accent);--tintora-button-bg-pressed:var(--tintora-color-accent);--tintora-button-shadow:var(--tintora-shadow-accent)}.tintora-modal{box-sizing:border-box;width:min(var(--tintora-modal-width), calc(100vw - 32px));border:1px solid var(--tintora-border-modal);border-radius:var(--tintora-radius-32);max-width:none;max-height:calc(100vh - 32px);font-family:var(--tintora-font-family);color:var(--tintora-text);background:var(--tintora-surface-modal);box-shadow:var(--tintora-shadow-modal);flex-direction:column;gap:18px;padding:28px;overflow:auto}.tintora-modal[open]{display:flex}.tintora-modal::backdrop{background:var(--tintora-scrim)}@media (prefers-reduced-motion:no-preference){.tintora-modal,.tintora-modal::backdrop{opacity:0;transition:opacity .2s ease, scale .2s ease, overlay .2s allow-discrete, display .2s allow-discrete}.tintora-modal{scale:.96}.tintora-modal[open],.tintora-modal[open]::backdrop{opacity:1}.tintora-modal[open]{scale:1}@starting-style{.tintora-modal[open],.tintora-modal[open]::backdrop{opacity:0}.tintora-modal[open]{scale:.96}}}body:has(.tintora-modal:modal){overflow:hidden}.tintora-modal--sm{--tintora-modal-width:400px}.tintora-modal--md{--tintora-modal-width:520px}.tintora-modal--lg{--tintora-modal-width:640px}.tintora-modal--center{text-align:center;align-items:center}.tintora-modal__close{position:absolute;top:18px;right:18px}.tintora-modal__title{font-size:20px;font-weight:var(--tintora-font-weight-bold);line-height:var(--tintora-line-height-tight);margin:0;padding-inline-end:44px}.tintora-modal--center .tintora-modal__title{padding-inline:0}.tintora-modal__description{color:var(--tintora-text-muted);margin:8px 0 0;font-size:13.5px;line-height:1.55}.tintora-modal__icon{border:1px solid var(--tintora-modal-status-border);border-radius:var(--tintora-radius-pill);width:52px;height:52px;color:var(--tintora-modal-status-fg);background:var(--tintora-modal-status-bg);justify-content:center;align-items:center;display:flex}.tintora-modal--center .tintora-modal__icon{width:64px;height:64px}.tintora-modal__icon svg{width:24px;height:24px}.tintora-modal--center .tintora-modal__icon svg{width:30px;height:30px}.tintora-modal__icon--success{--tintora-modal-status-bg:var(--tintora-status-success-bg);--tintora-modal-status-border:var(--tintora-status-success-border);--tintora-modal-status-fg:var(--tintora-status-success-fg)}.tintora-modal__icon--error{--tintora-modal-status-bg:var(--tintora-status-error-bg);--tintora-modal-status-border:var(--tintora-status-error-border);--tintora-modal-status-fg:var(--tintora-status-error-fg)}.tintora-modal__icon--info{--tintora-modal-status-bg:var(--tintora-status-info-bg);--tintora-modal-status-border:var(--tintora-status-info-border);--tintora-modal-status-fg:var(--tintora-status-info-fg)}.tintora-modal__icon--warning{--tintora-modal-status-bg:var(--tintora-status-warning-bg);--tintora-modal-status-border:var(--tintora-status-warning-border);--tintora-modal-status-fg:var(--tintora-status-warning-fg)}.tintora-modal__actions{justify-content:flex-end;gap:10px;padding-top:6px;display:flex}.tintora-modal--center .tintora-modal__actions{flex-direction:column;align-self:stretch}.tintora-progress-bar{flex-direction:column;gap:6px;display:flex}.tintora-progress-bar__header{font:var(--tintora-font-label);font-weight:var(--tintora-font-weight-semibold);justify-content:space-between;display:flex}.tintora-progress-bar__value{color:var(--tintora-text-muted)}.tintora-progress-bar__track{border-radius:var(--tintora-radius-pill);background:var(--tintora-fill-subtle-hover);height:8px;position:relative;overflow:hidden}.tintora-progress-bar__fill{border-radius:var(--tintora-radius-4);background:var(--tintora-control-fill);height:100%;position:absolute;top:0;left:0}.tintora-progress-bar__fill--complete{background:var(--tintora-status-success-fg)}.tintora-progress-bar__fill--indeterminate{width:40%;animation:1.3s ease-in-out infinite tintora-indeterminate}@keyframes tintora-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.tintora-progress-bar__fill--indeterminate{animation:none}}.tintora-radio{flex-shrink:0;width:22px;height:22px;display:inline-block;position:relative}.tintora-radio__input{opacity:0;cursor:pointer;width:44px;height:44px;margin:0;position:absolute;inset:-11px}.tintora-radio__circle{box-sizing:border-box;border:2px solid var(--tintora-control-border);border-radius:var(--tintora-radius-pill);outline-offset:2px;pointer-events:none;background:0 0;justify-content:center;align-items:center;transition:background .15s,border-color .15s;display:flex;position:absolute;inset:0}.tintora-radio__circle:after{content:"";border-radius:var(--tintora-radius-pill);background:var(--tintora-control-fill);opacity:0;width:10px;height:10px}.tintora-radio__input:enabled:hover+.tintora-radio__circle{border-color:var(--tintora-control-fill);background:var(--tintora-control-hover-tint)}.tintora-radio__input:checked+.tintora-radio__circle{border-color:var(--tintora-control-fill);background:0 0}.tintora-radio__input:checked+.tintora-radio__circle:after{opacity:1}.tintora-radio__input:focus-visible+.tintora-radio__circle{outline:2px solid var(--tintora-focus)}.tintora-radio__input:disabled{cursor:not-allowed}.tintora-radio__input:disabled+.tintora-radio__circle{opacity:var(--tintora-opacity-disabled)}@media (prefers-reduced-motion:reduce){.tintora-radio__circle{transition:none}}.tintora-search-input{--tintora-search-input-font-size:.8125rem;--tintora-search-input-clear-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");box-sizing:border-box;border:1px solid var(--tintora-border-field);border-radius:var(--tintora-radius-pill);height:48px;color:var(--tintora-text-muted);background-color:var(--tintora-surface-field);align-items:center;gap:10px;padding:0 18px;display:flex}.tintora-search-input--disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-search-input__icon{flex-shrink:0;width:16px;height:16px}.tintora-search-input__input{min-width:0;font-family:inherit;font-size:var(--tintora-search-input-font-size);color:var(--tintora-text);background:0 0;border:0;outline:0;flex:1;padding:0}.tintora-search-input__input::placeholder{color:var(--tintora-text-muted);opacity:1}.tintora-search-input__input:disabled{cursor:not-allowed}.tintora-search-input__input::-webkit-search-decoration{display:none}.tintora-search-input__input::-webkit-search-cancel-button{appearance:none;cursor:pointer;background-color:var(--tintora-text-muted);width:16px;height:16px;-webkit-mask:var(--tintora-search-input-clear-icon) center / contain no-repeat;-webkit-mask:var(--tintora-search-input-clear-icon) center / contain no-repeat;mask:var(--tintora-search-input-clear-icon) center / contain no-repeat}.tintora-search-input:not(.tintora-search-input--disabled):hover{border-color:var(--tintora-border-field-hover)}.tintora-search-input:focus-within{border-color:var(--tintora-focus);box-shadow:var(--tintora-shadow-focus-ring);outline-offset:2px;outline:2px solid #0000}.tintora-search-input__input::-webkit-search-cancel-button{appearance:none;cursor:pointer;background-color:var(--tintora-text-muted);width:16px;height:16px;-webkit-mask:var(--tintora-search-input-clear-icon) center / contain no-repeat;mask:var(--tintora-search-input-clear-icon) center / contain no-repeat}.tintora-search-input__input::-webkit-search-cancel-button:hover{background-color:var(--tintora-focus)}.tintora-select{--tintora-select-font-size:.71875rem;display:inline-block;position:relative}.tintora-select__trigger{box-sizing:border-box;border-radius:var(--tintora-radius-14);height:28px;font-family:inherit;font-size:var(--tintora-select-font-size);font-weight:var(--tintora-font-weight-medium);color:var(--tintora-chip-fg);background-color:var(--tintora-chip-bg);cursor:pointer;border:0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.tintora-select__trigger:enabled:hover,.tintora-select__trigger[aria-expanded=true]{background-color:var(--tintora-chip-bg-hover)}.tintora-select__trigger:focus-visible{box-shadow:var(--tintora-shadow-focus-ring);outline-offset:2px;outline:2px solid #0000}.tintora-select__trigger:disabled{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}.tintora-select__value--placeholder{color:var(--tintora-text-on-card-muted)}.tintora-select__chevron{flex-shrink:0}.tintora-select__trigger[aria-expanded=true] .tintora-select__chevron{transform:rotate(180deg)}.tintora-select__menu{box-sizing:border-box;border:1px solid var(--tintora-menu-border);border-radius:var(--tintora-radius-14);max-height:50vh;color:var(--tintora-color-ink);background:var(--tintora-menu-bg);box-shadow:var(--tintora-menu-shadow);flex-direction:column;gap:2px;margin:0;padding:6px;display:flex;inset:auto;overflow-y:auto}.tintora-select__option{box-sizing:border-box;border-radius:var(--tintora-radius-12);min-height:32px;font:var(--tintora-font-body);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding:0 10px;display:flex}.tintora-select__option--active{background:var(--tintora-menu-item-hover)}.tintora-select__option[aria-selected=true]{font-weight:var(--tintora-font-weight-bold);color:var(--tintora-color-accent-deep);background:var(--tintora-tint-accent)}.tintora-select__option[aria-disabled=true]{opacity:var(--tintora-opacity-disabled);cursor:not-allowed}@media (pointer:coarse){.tintora-select__option{min-height:44px}}@media (forced-colors:active){.tintora-select__option--active{outline-offset:-2px;outline:2px solid highlight}}.tintora-skeleton{border-radius:var(--tintora-radius-pill);background:var(--tintora-shimmer);background-size:200% 100%;flex-shrink:0;width:100%;height:14px;animation:1.4s linear infinite tintora-shimmer;display:block}@keyframes tintora-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.tintora-skeleton{animation:none}}.tintora-switch{flex-shrink:0;width:44px;height:26px;display:inline-block;position:relative}.tintora-switch__input{opacity:0;cursor:pointer;width:100%;height:calc(100% + 18px);margin:0;position:absolute;inset:-9px 0}.tintora-switch__track{--tintora-switch-offset:3px;border-radius:var(--tintora-radius-pill);background:var(--tintora-switch-track);outline-offset:2px;pointer-events:none;transition:background .2s;position:absolute;inset:0}.tintora-switch__track:after{content:"";top:var(--tintora-switch-offset);left:var(--tintora-switch-offset);border-radius:var(--tintora-radius-pill);background:var(--tintora-color-white);width:20px;height:20px;box-shadow:var(--tintora-shadow-knob);transition:transform .2s;position:absolute}.tintora-switch__input:hover+.tintora-switch__track{background:var(--tintora-switch-track-hover)}.tintora-switch__input:checked+.tintora-switch__track{background:var(--tintora-control-fill)}.tintora-switch__input:checked+.tintora-switch__track:after{transform:translate(18px)}.tintora-switch__input:focus-visible+.tintora-switch__track{outline:2px solid var(--tintora-focus)}.tintora-switch__input:disabled{cursor:not-allowed}.tintora-switch__input:disabled+.tintora-switch__track{opacity:var(--tintora-opacity-disabled);background:var(--tintora-switch-track)}.tintora-switch__input:disabled:checked+.tintora-switch__track{background:var(--tintora-control-fill)}@media (prefers-reduced-motion:reduce){.tintora-switch__track,.tintora-switch__track:after{transition:none}}.tintora-tag{white-space:nowrap;font:var(--tintora-font-caption);font-weight:var(--tintora-font-weight-semibold);display:inline-block}.tintora-tag--neutral{background-color:var(--tintora-tag-bg);color:var(--tintora-tag-fg)}.tintora-tag--success{background-color:var(--tintora-color-success);color:var(--tintora-color-on-success)}.tintora-tag--accent{background-color:var(--tintora-color-accent-deep);color:var(--tintora-color-on-accent-deep);font-weight:var(--tintora-font-weight-bold)}.tintora-tag--card{background-color:var(--tintora-chip-bg);color:var(--tintora-chip-fg)}.tintora-tag--small{border-radius:var(--tintora-radius-8);padding:2px 8px}.tintora-tag--medium{border-radius:var(--tintora-radius-8);padding:3px 9px}.tintora-tag--large{border-radius:var(--tintora-radius-12);padding:5px 12px}.tintora-textfield{--tintora-textfield-font-size:.8125rem;flex-direction:column;gap:8px;display:inline-flex}.tintora-textfield--disabled{opacity:var(--tintora-opacity-disabled)}.tintora-textfield__label{font:var(--tintora-font-body);font-weight:var(--tintora-font-weight-semibold);color:var(--tintora-text)}.tintora-textfield__input{box-sizing:border-box;border:1px solid var(--tintora-border-field);border-radius:var(--tintora-radius-16);height:48px;font-family:inherit;font-size:var(--tintora-textfield-font-size);color:var(--tintora-text);background-color:var(--tintora-surface-field);padding:0 16px}.tintora-textfield__input::placeholder{color:var(--tintora-text-muted);opacity:1}.tintora-textfield__input:enabled:hover{border-color:var(--tintora-border-field-hover)}.tintora-textfield__input:focus-visible{border-color:var(--tintora-focus);box-shadow:var(--tintora-shadow-focus-ring);outline-offset:2px;outline:2px solid #0000}.tintora-textfield__input[aria-invalid=true]{border-color:var(--tintora-text-error)}.tintora-textfield__input:disabled{cursor:not-allowed}.tintora-textfield__hint{font:var(--tintora-font-caption);color:var(--tintora-text-faint)}.tintora-textfield__hint--error{color:var(--tintora-text-error)}.tintora-toast{box-sizing:border-box;border-radius:var(--tintora-radius-18);background:var(--tintora-surface-toast);min-height:52px;color:var(--tintora-text-on-toast);box-shadow:var(--tintora-shadow-toast);align-items:center;gap:12px;padding:10px 10px 10px 16px;display:flex}.tintora-toast--timer{min-height:56px;padding:10px 10px 14px 16px;position:relative;overflow:hidden}.tintora-toast__message{min-width:0;font:var(--tintora-font-button);font-weight:var(--tintora-font-weight-semibold);flex:1}.tintora-toast__action{border-radius:var(--tintora-radius-pill);height:32px;font-family:inherit;font:var(--tintora-font-button);font-weight:var(--tintora-font-weight-extrabold);color:var(--tintora-toast-action);cursor:pointer;background:0 0;border:0;padding:0 12px;display:inline-block}.tintora-toast__close{border-radius:var(--tintora-radius-pill);width:32px;height:32px;color:var(--tintora-text-on-toast-muted);cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-items:center;display:flex}.tintora-toast__progress{background:var(--tintora-toast-action);width:100%;height:4px;animation:progress-bar var(--tintora-toast-animation-duration) forwards;position:absolute;bottom:0;left:0}.tintora-toast--paused .tintora-toast__progress{animation-play-state:paused}@keyframes progress-bar{0%{width:100%}to{width:0}}@media (prefers-reduced-motion:reduce){.tintora-toast__progress{display:none}}.tintora-toggle{border-radius:var(--tintora-radius-pill);background-color:var(--tintora-fill-subtle);gap:4px;padding:5px;display:inline-flex;position:relative}.tintora-toggle--disabled{opacity:var(--tintora-opacity-disabled)}.tintora-toggle__item{box-sizing:border-box;border-radius:var(--tintora-radius-pill);min-width:34px;height:34px;color:var(--tintora-text-nav-idle);font:var(--tintora-font-label);cursor:pointer;outline-offset:2px;z-index:1;background:0 0;border:0;outline:none;justify-content:center;align-items:center;padding:0 8px;transition:color .2s;display:inline-flex}.tintora-toggle__item[aria-pressed=true]{color:#fff}.tintora-toggle__thumb{width:var(--tintora-toggle-thumb-width);border-radius:var(--tintora-radius-pill);background-color:var(--tintora-color-accent);transform:translateX(var(--tintora-toggle-thumb-x));pointer-events:none;transition:transform .2s;position:absolute;inset-block:5px;inset-inline-start:0}@media (prefers-reduced-motion:reduce){.tintora-toggle__thumb,.tintora-toggle__item{transition:none}}.tintora-toggle__item:focus-visible{outline:2px solid var(--tintora-focus)}.tintora-toggle__item:disabled{cursor:not-allowed}.tintora-toggle:not(.tintora-toggle--disabled) .tintora-toggle__item:disabled{opacity:var(--tintora-opacity-disabled)}.tintora-tooltip{display:contents}.tintora-tooltip__content{box-sizing:border-box;border-radius:var(--tintora-radius-10);width:max-content;font:var(--tintora-font-body);font-weight:var(--tintora-font-weight-semibold);white-space:nowrap;color:var(--tintora-text-on-tooltip);background:var(--tintora-surface-tooltip);box-shadow:var(--tintora-shadow-tooltip);border:0;align-items:center;gap:10px;margin:0;padding:6px 10px;display:inline-flex;inset:auto;overflow:visible}.tintora-tooltip__content:before{content:"";background:inherit;width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tintora-tooltip__content--top:before{bottom:-4px;left:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__content--bottom:before{top:-4px;left:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__content--left:before{right:-4px;top:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__content--right:before{left:-4px;top:calc(var(--tintora-tooltip-arrow-offset,50%) - 4px)}.tintora-tooltip__shortcut{border-radius:var(--tintora-radius-6);font:var(--tintora-font-caption);font-weight:var(--tintora-font-weight-bold);background:var(--tintora-tooltip-kbd-bg);margin-right:-2px;padding:2px 6px}.tintora-tooltip__content--rich{border-radius:var(--tintora-radius-12);width:220px;font-weight:var(--tintora-font-weight-medium);white-space:normal;padding:10px 12px;display:block}.tintora-tooltip__title{font:var(--tintora-font-label);display:block}.tintora-tooltip__text{min-width:0}.tintora-tooltip__content--rich .tintora-tooltip__text{color:var(--tintora-text-on-tooltip-muted);margin-top:2px;line-height:1.45;display:block}.tintora-tooltip__content--rich .tintora-tooltip__shortcut{margin-top:8px;display:inline-block}@media (prefers-reduced-motion:no-preference){.tintora-tooltip__content{animation:.12s ease-out tintora-tooltip-in}}@keyframes tintora-tooltip-in{0%{opacity:0}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/** Where to put a popup (tooltip, popover) next to its trigger. */
|
|
2
|
+
export type Placement = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
+
export interface PlacementOptions {
|
|
4
|
+
/** Space between the anchor and the popup (an arrow sits inside it). */
|
|
5
|
+
gap: number;
|
|
6
|
+
/** Closest the popup may get to a viewport edge. */
|
|
7
|
+
margin: number;
|
|
8
|
+
/** Keeps the arrow clear of the popup's rounded corners. */
|
|
9
|
+
arrowInset: number;
|
|
10
|
+
}
|
|
11
|
+
export interface Size {
|
|
12
|
+
width: number;
|
|
13
|
+
height: number;
|
|
14
|
+
}
|
|
15
|
+
export interface Position {
|
|
16
|
+
top: number;
|
|
17
|
+
left: number;
|
|
18
|
+
/** The side it really opens on: the requested one, or the opposite if flipped. */
|
|
19
|
+
placement: Placement;
|
|
20
|
+
/** Distance in px from the popup's start edge to the arrow's centre. */
|
|
21
|
+
arrowOffset: number;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Viewport coordinates for the popup's top-left corner, given the trigger's
|
|
25
|
+
* rect, the popup's own size, the side it should open on and the viewport.
|
|
26
|
+
* It flips to the opposite side when there is no room, and is kept inside the
|
|
27
|
+
* viewport along the other axis (the arrow then moves to keep pointing at the
|
|
28
|
+
* trigger).
|
|
29
|
+
*/
|
|
30
|
+
export declare function getPosition(anchor: DOMRect, tooltip: Size, requested: Placement, viewport?: Size, options?: Partial<PlacementOptions>): Position;
|
package/package.json
CHANGED
|
File without changes
|