tintora 0.9.0 → 0.10.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/Toggle/Toggle.d.ts +29 -0
- package/dist/Toggle/ToggleContext.d.ts +9 -0
- package/dist/Toggle/ToggleItem.d.ts +11 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +125 -51
- package/dist/tintora.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactElement } from 'react';
|
|
2
|
+
import './Toggle.css';
|
|
3
|
+
import type { ToggleItemProps } from './ToggleItem';
|
|
4
|
+
interface ToggleBaseProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> {
|
|
5
|
+
/** Names the group for assistive tech, e.g. "Theme". Required. */
|
|
6
|
+
'aria-label': string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Exactly two items. */
|
|
9
|
+
children: [
|
|
10
|
+
ReactElement<ToggleItemProps<T>>,
|
|
11
|
+
ReactElement<ToggleItemProps<T>>
|
|
12
|
+
];
|
|
13
|
+
}
|
|
14
|
+
/** The parent owns the value: it passes `value` and updates it in `onValueChange`. */
|
|
15
|
+
interface ControlledProps<T extends string> {
|
|
16
|
+
value: T;
|
|
17
|
+
onValueChange: (value: T) => void;
|
|
18
|
+
defaultValue?: never;
|
|
19
|
+
}
|
|
20
|
+
/** The Toggle owns the value, starting from `defaultValue`. */
|
|
21
|
+
interface UncontrolledProps<T extends string> {
|
|
22
|
+
value?: never;
|
|
23
|
+
defaultValue: T;
|
|
24
|
+
onValueChange?: (value: T) => void;
|
|
25
|
+
}
|
|
26
|
+
/** Exactly one of controlled (`value`) or uncontrolled (`defaultValue`). */
|
|
27
|
+
export type ToggleProps<T extends string = string> = ToggleBaseProps<T> & (ControlledProps<T> | UncontrolledProps<T>);
|
|
28
|
+
export declare function Toggle<T extends string>({ children, value, defaultValue, onValueChange, disabled, className, ...props }: ToggleProps<T>): import("react").JSX.Element;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface ToggleContextValue {
|
|
2
|
+
/** The selected item's value. */
|
|
3
|
+
value: string;
|
|
4
|
+
select: (value: string) => void;
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const ToggleContext: import("react").Context<ToggleContextValue | null>;
|
|
8
|
+
export declare function useToggleContext(): ToggleContextValue;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ToggleItemProps<T extends string = string> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'value' | 'children'> & {
|
|
3
|
+
value: T;
|
|
4
|
+
} & ({
|
|
5
|
+
children: string;
|
|
6
|
+
'aria-label'?: string;
|
|
7
|
+
} | {
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
'aria-label': string;
|
|
10
|
+
});
|
|
11
|
+
export declare function ToggleItem<T extends string>({ value, children, className, disabled, onClick, ...props }: ToggleItemProps<T>): import("react").JSX.Element;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("react");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({children:t,className:n,variant:i,size:a=`medium`,leadingIcon:o,trailingIcon:s,type:c=`button`,...l}){return(0,e.jsxs)(`button`,{type:c,className:r(`tintora-button`,`tintora-button--${i}`,`tintora-button--${a}`,{"tintora-button--leading-icon":!!o,"tintora-button--trailing-icon":!!s},n),...l,children:[o&&(0,e.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:o}),t,s&&(0,e.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:s})]})}function a({children:t,selected:n,className:i,"aria-pressed":a,...o}){return(0,e.jsx)(`button`,{...o,type:`button`,className:r(`tintora-chip`,i),"aria-pressed":n??a,children:t})}function o({variant:t=`unread`,label:n,className:i,...a}){return(0,e.jsx)(`span`,{...a,className:r(`tintora-dot`,`tintora-dot--${t}`,i),role:n?`img`:void 0,"aria-label":n,"aria-hidden":!n||void 0})}var s={round:`secondary`,field:`secondary`,nav:`ghost`};function c({icon:t,variant:n=`round`,size:a,selected:o,className:c,...l}){let u=n===`round`?a??`large`:void 0;return(0,e.jsx)(i,{...l,variant:s[n],"aria-current":o?`page`:void 0,className:r(`tintora-icon-button`,`tintora-icon-button--${n}`,u&&`tintora-icon-button--${u}`,c),...u&&{size:u},children:(0,e.jsx)(`span`,{className:`tintora-icon-button__icon`,"aria-hidden":`true`,children:t})})}function l({className:t,disabled:n,...i}){return(0,e.jsxs)(`label`,{className:r(`tintora-search-input`,n&&`tintora-search-input--disabled`,t),children:[(0,e.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,e.jsx)(`circle`,{cx:`11`,cy:`11`,r:`7`}),(0,e.jsx)(`path`,{d:`M20 20l-3.5-3.5`})]}),(0,e.jsx)(`input`,{...i,type:`search`,disabled:n,className:`tintora-search-input__input`})]})}function u({children:t,className:n,variant:i=`neutral`,size:a=`medium`,...o}){return(0,e.jsx)(`span`,{...o,className:r(`tintora-tag`,`tintora-tag--${i}`,`tintora-tag--${a}`,n),children:t})}function d({label:n,hint:i,error:a,id:o,className:s,disabled:c,"aria-describedby":l,"aria-invalid":u,...d}){let f=(0,t.useId)(),p=o??f,m=`${p}-message`,h=a??i;return(0,e.jsxs)(`div`,{className:r(`tintora-textfield`,c&&`tintora-textfield--disabled`,s),children:[(0,e.jsx)(`label`,{htmlFor:p,className:`tintora-textfield__label`,children:n}),(0,e.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,e.jsx)(`span`,{id:m,className:r(`tintora-textfield__hint`,a&&`tintora-textfield__hint--error`),children:h})]})}exports.Button=i,exports.Chip=a,exports.Dot=o,exports.IconButton=c,exports.SearchInput=l,exports.Tag=u,exports.TextField=d;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("react");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({children:t,className:n,variant:i,size:a=`medium`,leadingIcon:o,trailingIcon:s,type:c=`button`,...l}){return(0,e.jsxs)(`button`,{type:c,className:r(`tintora-button`,`tintora-button--${i}`,`tintora-button--${a}`,{"tintora-button--leading-icon":!!o,"tintora-button--trailing-icon":!!s},n),...l,children:[o&&(0,e.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:o}),t,s&&(0,e.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:s})]})}function a({children:t,selected:n,className:i,"aria-pressed":a,...o}){return(0,e.jsx)(`button`,{...o,type:`button`,className:r(`tintora-chip`,i),"aria-pressed":n??a,children:t})}function o({variant:t=`unread`,label:n,className:i,...a}){return(0,e.jsx)(`span`,{...a,className:r(`tintora-dot`,`tintora-dot--${t}`,i),role:n?`img`:void 0,"aria-label":n,"aria-hidden":!n||void 0})}var s={round:`secondary`,field:`secondary`,nav:`ghost`};function c({icon:t,variant:n=`round`,size:a,selected:o,className:c,...l}){let u=n===`round`?a??`large`:void 0;return(0,e.jsx)(i,{...l,variant:s[n],"aria-current":o?`page`:void 0,className:r(`tintora-icon-button`,`tintora-icon-button--${n}`,u&&`tintora-icon-button--${u}`,c),...u&&{size:u},children:(0,e.jsx)(`span`,{className:`tintora-icon-button__icon`,"aria-hidden":`true`,children:t})})}function l({className:t,disabled:n,...i}){return(0,e.jsxs)(`label`,{className:r(`tintora-search-input`,n&&`tintora-search-input--disabled`,t),children:[(0,e.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,e.jsx)(`circle`,{cx:`11`,cy:`11`,r:`7`}),(0,e.jsx)(`path`,{d:`M20 20l-3.5-3.5`})]}),(0,e.jsx)(`input`,{...i,type:`search`,disabled:n,className:`tintora-search-input__input`})]})}function u({children:t,className:n,variant:i=`neutral`,size:a=`medium`,...o}){return(0,e.jsx)(`span`,{...o,className:r(`tintora-tag`,`tintora-tag--${i}`,`tintora-tag--${a}`,n),children:t})}function d({label:n,hint:i,error:a,id:o,className:s,disabled:c,"aria-describedby":l,"aria-invalid":u,...d}){let f=(0,t.useId)(),p=o??f,m=`${p}-message`,h=a??i;return(0,e.jsxs)(`div`,{className:r(`tintora-textfield`,c&&`tintora-textfield--disabled`,s),children:[(0,e.jsx)(`label`,{htmlFor:p,className:`tintora-textfield__label`,children:n}),(0,e.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,e.jsx)(`span`,{id:m,className:r(`tintora-textfield__hint`,a&&`tintora-textfield__hint--error`),children:h})]})}var f=(0,t.createContext)(null);function p(){let e=(0,t.useContext)(f);if(!e)throw Error(`ToggleItem must be rendered inside a Toggle`);return e}function m({children:n,value:i,defaultValue:a,onValueChange:o,disabled:s=!1,className:c,...l}){let[u,d]=(0,t.useState)(a),p=i!==void 0,m=p?i:u,h=n.findIndex(e=>e.props.value===m),g=(0,t.useRef)(null),[_,v]=(0,t.useState)({x:0,width:0});(0,t.useLayoutEffect)(()=>{let e=g.current;if(!e)return;let t=()=>{let t=e.children.item(h);if(!t)return;let n={x:t.offsetLeft,width:t.offsetWidth};v(e=>e.x===n.x&&e.width===n.width?e:n)};t();let n=new ResizeObserver(t);return n.observe(e),()=>{n.disconnect()}},[h]);let y={"--tintora-toggle-thumb-x":`${_.x}px`,"--tintora-toggle-thumb-width":`${_.width}px`};return(0,e.jsx)(f.Provider,{value:{value:m,select:e=>{e!==m&&(p||d(e),o?.(e))},disabled:s},children:(0,e.jsxs)(`div`,{...l,role:`group`,ref:g,className:r(`tintora-toggle`,s&&`tintora-toggle--disabled`,c),children:[n,(0,e.jsx)(`span`,{"aria-hidden":`true`,className:`tintora-toggle__thumb`,style:y})]})})}function h({value:t,children:n,className:i,disabled:a,onClick:o,...s}){let c=p(),l=e=>{o?.(e),e.defaultPrevented||c.select(t)};return(0,e.jsx)(`button`,{...s,type:`button`,className:r(`tintora-toggle__item`,i),"aria-pressed":c.value===t,disabled:a||c.disabled,onClick:l,children:n})}exports.Button=i,exports.Chip=a,exports.Dot=o,exports.IconButton=c,exports.SearchInput=l,exports.Tag=u,exports.TextField=d,exports.Toggle=m,exports.ToggleItem=h;
|
package/dist/index.d.ts
CHANGED
|
@@ -6,3 +6,5 @@ export { IconButton } from './IconButton/IconButton';
|
|
|
6
6
|
export { SearchInput } from './SearchInput/SearchInput';
|
|
7
7
|
export { Tag } from './Tag/Tag';
|
|
8
8
|
export { TextField } from './TextField/TextField';
|
|
9
|
+
export { Toggle, type ToggleProps } from './Toggle/Toggle';
|
|
10
|
+
export { ToggleItem, type ToggleItemProps } from './Toggle/ToggleItem';
|
package/dist/index.js
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
1
|
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { createContext as n, useContext as r, useId as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
|
|
3
3
|
//#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
|
|
4
|
-
function
|
|
5
|
-
var t, n,
|
|
6
|
-
if (typeof e == "string" || typeof e == "number")
|
|
4
|
+
function c(e) {
|
|
5
|
+
var t, n, r = "";
|
|
6
|
+
if (typeof e == "string" || typeof e == "number") r += e;
|
|
7
7
|
else if (typeof e == "object") {
|
|
8
8
|
if (Array.isArray(e)) {
|
|
9
|
-
var
|
|
10
|
-
for (t = 0; t <
|
|
11
|
-
} else for (n in e) e[n] && (
|
|
9
|
+
var i = e.length;
|
|
10
|
+
for (t = 0; t < i; t++) e[t] && (n = c(e[t])) && (r && (r += " "), r += n);
|
|
11
|
+
} else for (n in e) e[n] && (r && (r += " "), r += n);
|
|
12
12
|
}
|
|
13
|
-
return
|
|
13
|
+
return r;
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
for (var e, t, n = 0,
|
|
17
|
-
return
|
|
15
|
+
function l() {
|
|
16
|
+
for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = c(e)) && (r && (r += " "), r += t);
|
|
17
|
+
return r;
|
|
18
18
|
}
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/Button/Button.tsx
|
|
21
|
-
function
|
|
21
|
+
function u({ children: n, className: r, variant: i, size: a = "medium", leadingIcon: o, trailingIcon: s, type: c = "button", ...u }) {
|
|
22
22
|
return /* @__PURE__ */ t("button", {
|
|
23
|
-
type:
|
|
24
|
-
className:
|
|
25
|
-
"tintora-button--leading-icon": !!
|
|
26
|
-
"tintora-button--trailing-icon": !!
|
|
23
|
+
type: c,
|
|
24
|
+
className: l("tintora-button", `tintora-button--${i}`, `tintora-button--${a}`, {
|
|
25
|
+
"tintora-button--leading-icon": !!o,
|
|
26
|
+
"tintora-button--trailing-icon": !!s
|
|
27
27
|
}, r),
|
|
28
28
|
...u,
|
|
29
29
|
children: [
|
|
30
|
-
|
|
30
|
+
o && /* @__PURE__ */ e("span", {
|
|
31
31
|
className: "tintora-button__icon",
|
|
32
32
|
"aria-hidden": "true",
|
|
33
|
-
children:
|
|
33
|
+
children: o
|
|
34
34
|
}),
|
|
35
35
|
n,
|
|
36
|
-
|
|
36
|
+
s && /* @__PURE__ */ e("span", {
|
|
37
37
|
className: "tintora-button__icon",
|
|
38
38
|
"aria-hidden": "true",
|
|
39
|
-
children:
|
|
39
|
+
children: s
|
|
40
40
|
})
|
|
41
41
|
]
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
44
|
//#endregion
|
|
45
45
|
//#region src/Chip/Chip.tsx
|
|
46
|
-
function
|
|
46
|
+
function d({ children: t, selected: n, className: r, "aria-pressed": i, ...a }) {
|
|
47
47
|
return /* @__PURE__ */ e("button", {
|
|
48
|
-
...
|
|
48
|
+
...a,
|
|
49
49
|
type: "button",
|
|
50
|
-
className:
|
|
51
|
-
"aria-pressed": n ??
|
|
50
|
+
className: l("tintora-chip", r),
|
|
51
|
+
"aria-pressed": n ?? i,
|
|
52
52
|
children: t
|
|
53
53
|
});
|
|
54
54
|
}
|
|
55
55
|
//#endregion
|
|
56
56
|
//#region src/Dot/Dot.tsx
|
|
57
|
-
function
|
|
57
|
+
function f({ variant: t = "unread", label: n, className: r, ...i }) {
|
|
58
58
|
return /* @__PURE__ */ e("span", {
|
|
59
|
-
...
|
|
60
|
-
className:
|
|
59
|
+
...i,
|
|
60
|
+
className: l("tintora-dot", `tintora-dot--${t}`, r),
|
|
61
61
|
role: n ? "img" : void 0,
|
|
62
62
|
"aria-label": n,
|
|
63
63
|
"aria-hidden": !n || void 0
|
|
@@ -65,19 +65,19 @@ function s({ variant: t = "unread", label: n, className: r, ...a }) {
|
|
|
65
65
|
}
|
|
66
66
|
//#endregion
|
|
67
67
|
//#region src/IconButton/IconButton.tsx
|
|
68
|
-
var
|
|
68
|
+
var p = {
|
|
69
69
|
round: "secondary",
|
|
70
70
|
field: "secondary",
|
|
71
71
|
nav: "ghost"
|
|
72
72
|
};
|
|
73
|
-
function
|
|
74
|
-
let
|
|
75
|
-
return /* @__PURE__ */ e(
|
|
76
|
-
...
|
|
77
|
-
variant:
|
|
78
|
-
"aria-current":
|
|
79
|
-
className:
|
|
80
|
-
...
|
|
73
|
+
function m({ icon: t, variant: n = "round", size: r, selected: i, className: a, ...o }) {
|
|
74
|
+
let s = n === "round" ? r ?? "large" : void 0;
|
|
75
|
+
return /* @__PURE__ */ e(u, {
|
|
76
|
+
...o,
|
|
77
|
+
variant: p[n],
|
|
78
|
+
"aria-current": i ? "page" : void 0,
|
|
79
|
+
className: l("tintora-icon-button", `tintora-icon-button--${n}`, s && `tintora-icon-button--${s}`, a),
|
|
80
|
+
...s && { size: s },
|
|
81
81
|
children: /* @__PURE__ */ e("span", {
|
|
82
82
|
className: "tintora-icon-button__icon",
|
|
83
83
|
"aria-hidden": "true",
|
|
@@ -87,9 +87,9 @@ function l({ icon: t, variant: n = "round", size: r, selected: o, className: s,
|
|
|
87
87
|
}
|
|
88
88
|
//#endregion
|
|
89
89
|
//#region src/SearchInput/SearchInput.tsx
|
|
90
|
-
function
|
|
90
|
+
function h({ className: n, disabled: r, ...i }) {
|
|
91
91
|
return /* @__PURE__ */ t("label", {
|
|
92
|
-
className:
|
|
92
|
+
className: l("tintora-search-input", r && "tintora-search-input--disabled", n),
|
|
93
93
|
children: [/* @__PURE__ */ t("svg", {
|
|
94
94
|
className: "tintora-search-input__icon",
|
|
95
95
|
viewBox: "0 0 24 24",
|
|
@@ -104,7 +104,7 @@ function u({ className: n, disabled: r, ...a }) {
|
|
|
104
104
|
r: "7"
|
|
105
105
|
}), /* @__PURE__ */ e("path", { d: "M20 20l-3.5-3.5" })]
|
|
106
106
|
}), /* @__PURE__ */ e("input", {
|
|
107
|
-
...
|
|
107
|
+
...i,
|
|
108
108
|
type: "search",
|
|
109
109
|
disabled: r,
|
|
110
110
|
className: "tintora-search-input__input"
|
|
@@ -113,40 +113,114 @@ function u({ className: n, disabled: r, ...a }) {
|
|
|
113
113
|
}
|
|
114
114
|
//#endregion
|
|
115
115
|
//#region src/Tag/Tag.tsx
|
|
116
|
-
function
|
|
116
|
+
function g({ children: t, className: n, variant: r = "neutral", size: i = "medium", ...a }) {
|
|
117
117
|
return /* @__PURE__ */ e("span", {
|
|
118
|
-
...
|
|
119
|
-
className:
|
|
118
|
+
...a,
|
|
119
|
+
className: l("tintora-tag", `tintora-tag--${r}`, `tintora-tag--${i}`, n),
|
|
120
120
|
children: t
|
|
121
121
|
});
|
|
122
122
|
}
|
|
123
123
|
//#endregion
|
|
124
124
|
//#region src/TextField/TextField.tsx
|
|
125
|
-
function
|
|
126
|
-
let p =
|
|
125
|
+
function _({ label: n, hint: r, error: a, id: o, className: s, disabled: c, "aria-describedby": u, "aria-invalid": d, ...f }) {
|
|
126
|
+
let p = i(), m = o ?? p, h = `${m}-message`, g = a ?? r;
|
|
127
127
|
return /* @__PURE__ */ t("div", {
|
|
128
|
-
className:
|
|
128
|
+
className: l("tintora-textfield", c && "tintora-textfield--disabled", s),
|
|
129
129
|
children: [
|
|
130
130
|
/* @__PURE__ */ e("label", {
|
|
131
131
|
htmlFor: m,
|
|
132
132
|
className: "tintora-textfield__label",
|
|
133
|
-
children:
|
|
133
|
+
children: n
|
|
134
134
|
}),
|
|
135
135
|
/* @__PURE__ */ e("input", {
|
|
136
136
|
...f,
|
|
137
137
|
id: m,
|
|
138
|
-
disabled:
|
|
138
|
+
disabled: c,
|
|
139
139
|
className: "tintora-textfield__input",
|
|
140
|
-
"aria-invalid":
|
|
141
|
-
"aria-describedby":
|
|
140
|
+
"aria-invalid": a ? !0 : d,
|
|
141
|
+
"aria-describedby": l(g && h, u) || void 0
|
|
142
142
|
}),
|
|
143
143
|
g && /* @__PURE__ */ e("span", {
|
|
144
144
|
id: h,
|
|
145
|
-
className:
|
|
145
|
+
className: l("tintora-textfield__hint", a && "tintora-textfield__hint--error"),
|
|
146
146
|
children: g
|
|
147
147
|
})
|
|
148
148
|
]
|
|
149
149
|
});
|
|
150
150
|
}
|
|
151
151
|
//#endregion
|
|
152
|
-
|
|
152
|
+
//#region src/Toggle/ToggleContext.ts
|
|
153
|
+
var v = n(null);
|
|
154
|
+
function y() {
|
|
155
|
+
let e = r(v);
|
|
156
|
+
if (!e) throw Error("ToggleItem must be rendered inside a Toggle");
|
|
157
|
+
return e;
|
|
158
|
+
}
|
|
159
|
+
//#endregion
|
|
160
|
+
//#region src/Toggle/Toggle.tsx
|
|
161
|
+
function b({ children: n, value: r, defaultValue: i, onValueChange: c, disabled: u = !1, className: d, ...f }) {
|
|
162
|
+
let [p, m] = s(i), h = r !== void 0, g = h ? r : p, _ = n.findIndex((e) => e.props.value === g), y = o(null), [b, x] = s({
|
|
163
|
+
x: 0,
|
|
164
|
+
width: 0
|
|
165
|
+
});
|
|
166
|
+
a(() => {
|
|
167
|
+
let e = y.current;
|
|
168
|
+
if (!e) return;
|
|
169
|
+
let t = () => {
|
|
170
|
+
let t = e.children.item(_);
|
|
171
|
+
if (!t) return;
|
|
172
|
+
let n = {
|
|
173
|
+
x: t.offsetLeft,
|
|
174
|
+
width: t.offsetWidth
|
|
175
|
+
};
|
|
176
|
+
x((e) => e.x === n.x && e.width === n.width ? e : n);
|
|
177
|
+
};
|
|
178
|
+
t();
|
|
179
|
+
let n = new ResizeObserver(t);
|
|
180
|
+
return n.observe(e), () => {
|
|
181
|
+
n.disconnect();
|
|
182
|
+
};
|
|
183
|
+
}, [_]);
|
|
184
|
+
let S = {
|
|
185
|
+
"--tintora-toggle-thumb-x": `${b.x}px`,
|
|
186
|
+
"--tintora-toggle-thumb-width": `${b.width}px`
|
|
187
|
+
};
|
|
188
|
+
return /* @__PURE__ */ e(v.Provider, {
|
|
189
|
+
value: {
|
|
190
|
+
value: g,
|
|
191
|
+
select: (e) => {
|
|
192
|
+
e !== g && (h || m(e), c?.(e));
|
|
193
|
+
},
|
|
194
|
+
disabled: u
|
|
195
|
+
},
|
|
196
|
+
children: /* @__PURE__ */ t("div", {
|
|
197
|
+
...f,
|
|
198
|
+
role: "group",
|
|
199
|
+
ref: y,
|
|
200
|
+
className: l("tintora-toggle", u && "tintora-toggle--disabled", d),
|
|
201
|
+
children: [n, /* @__PURE__ */ e("span", {
|
|
202
|
+
"aria-hidden": "true",
|
|
203
|
+
className: "tintora-toggle__thumb",
|
|
204
|
+
style: S
|
|
205
|
+
})]
|
|
206
|
+
})
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
//#endregion
|
|
210
|
+
//#region src/Toggle/ToggleItem.tsx
|
|
211
|
+
function x({ value: t, children: n, className: r, disabled: i, onClick: a, ...o }) {
|
|
212
|
+
let s = y(), c = (e) => {
|
|
213
|
+
a?.(e), e.defaultPrevented || s.select(t);
|
|
214
|
+
};
|
|
215
|
+
return /* @__PURE__ */ e("button", {
|
|
216
|
+
...o,
|
|
217
|
+
type: "button",
|
|
218
|
+
className: l("tintora-toggle__item", r),
|
|
219
|
+
"aria-pressed": s.value === t,
|
|
220
|
+
disabled: i || s.disabled,
|
|
221
|
+
onClick: c,
|
|
222
|
+
children: n
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
//#endregion
|
|
226
|
+
export { u as Button, d as Chip, f as Dot, m as IconButton, h as SearchInput, g as Tag, _ as TextField, b as Toggle, x as ToggleItem };
|
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-on-accent:#1d0e04;--tintora-color-on-accent-deep:#fff;--tintora-color-on-success:#0d200f;--tintora-color-on-planned:#260a13;--tintora-color-on-heart:#fff;--tintora-color-on-steps:#fff;--tintora-color-on-sleep:#fff;--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:#fff;--tintora-tint-accent:#fdeadd;--tintora-tint-heart:#fbe0e8;--tintora-tint-steps:#dcf3e1;--tintora-tint-sleep:#e0e7fb;--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-radius-8:8px;--tintora-radius-12:12px;--tintora-radius-14:14px;--tintora-radius-16:16px;--tintora-radius-18:18px;--tintora-radius-20:20px;--tintora-radius-26:26px;--tintora-radius-32:32px;--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-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:#fff;--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:#fff;--tintora-focus:#ee6b25;--tintora-ring:#fff;--tintora-shadow-glass:0 30px 60px #00000059;--tintora-shadow-card:0 10px 24px #0000002e;--tintora-shadow-card-hover:0 18px 36px #00000052}[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:#1d1c1c;--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:#b3261e;--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:#1d1c1c;--tintora-focus:#c94e0c;--tintora-ring:#1d1c1c;--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033}@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:#1d1c1c;--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:#b3261e;--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:#1d1c1c;--tintora-focus:#c94e0c;--tintora-ring:#1d1c1c;--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033}}.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-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-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-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)}
|
|
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-on-accent:#1d0e04;--tintora-color-on-accent-deep:#fff;--tintora-color-on-success:#0d200f;--tintora-color-on-planned:#260a13;--tintora-color-on-heart:#fff;--tintora-color-on-steps:#fff;--tintora-color-on-sleep:#fff;--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:#fff;--tintora-tint-accent:#fdeadd;--tintora-tint-heart:#fbe0e8;--tintora-tint-steps:#dcf3e1;--tintora-tint-sleep:#e0e7fb;--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-radius-8:8px;--tintora-radius-12:12px;--tintora-radius-14:14px;--tintora-radius-16:16px;--tintora-radius-18:18px;--tintora-radius-20:20px;--tintora-radius-26:26px;--tintora-radius-32:32px;--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-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:#fff;--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:#fff;--tintora-focus:#ee6b25;--tintora-ring:#fff;--tintora-shadow-glass:0 30px 60px #00000059;--tintora-shadow-card:0 10px 24px #0000002e;--tintora-shadow-card-hover:0 18px 36px #00000052}[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:#1d1c1c;--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:#b3261e;--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:#1d1c1c;--tintora-focus:#c94e0c;--tintora-ring:#1d1c1c;--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033}@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:#1d1c1c;--tintora-text-muted:#5a5754;--tintora-text-faint:#5a5754;--tintora-text-nav-idle:#4a4745;--tintora-text-day:#2b2927;--tintora-text-error:#b3261e;--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:#1d1c1c;--tintora-focus:#c94e0c;--tintora-ring:#1d1c1c;--tintora-shadow-glass:0 30px 60px #60402024;--tintora-shadow-card:0 10px 24px #6040201a;--tintora-shadow-card-hover:0 18px 36px #60402033}}.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-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-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-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)}
|
|
2
2
|
/*$vite$:1*/
|