tintora 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/Button/Button.d.ts +2 -2
  2. package/dist/IconButton/IconButton.d.ts +29 -0
  3. package/dist/TextField/TextField.d.ts +10 -0
  4. package/dist/index.cjs +1 -1
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +61 -10
  7. package/dist/tintora.css +1 -1
  8. package/package.json +13 -3
package/dist/Button/Button.d.ts CHANGED
@@ -2,9 +2,9 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
2
2
  import './Button.css';
3
3
  type ButtonVariants = 'primary' | 'secondary' | 'outline' | 'ghost';
4
4
  type ButtonSizes = 'small' | 'medium' | 'large';
5
- interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
5
+ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
6
6
  variant: ButtonVariants;
7
- size: ButtonSizes;
7
+ size?: ButtonSizes;
8
8
  leadingIcon?: ReactNode;
9
9
  trailingIcon?: ReactNode;
10
10
  }
package/dist/IconButton/IconButton.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import type { ReactNode } from 'react';
2
+ import { type ButtonProps } from '../Button/Button';
3
+ import './IconButton.css';
4
+ type IconButtonSizes = NonNullable<ButtonProps['size']>;
5
+ type Shared = Omit<ButtonProps, 'children' | 'type' | 'variant' | 'size' | 'leadingIcon' | 'trailingIcon' | 'aria-label'> & {
6
+ icon: ReactNode;
7
+ /** There is no visible text, so an accessible name is required. */
8
+ 'aria-label': string;
9
+ };
10
+ export type IconButtonProps = Shared & ({
11
+ /** Filled circle. 32 / 36 / 44. */
12
+ variant?: 'round';
13
+ /** Large is the default: it meets the 44px hit area. */
14
+ size?: IconButtonSizes;
15
+ selected?: never;
16
+ } | {
17
+ /** Bordered circle for use next to inputs. Fixed at 48. */
18
+ variant: 'field';
19
+ size?: never;
20
+ selected?: never;
21
+ } | {
22
+ /** Navigation item. Fixed at 44. */
23
+ variant: 'nav';
24
+ size?: never;
25
+ /** The current destination. Sets `aria-current="page"`. */
26
+ selected?: boolean;
27
+ });
28
+ export declare function IconButton({ icon, variant, size, selected, className, ...props }: IconButtonProps): import("react").JSX.Element;
29
+ export {};
package/dist/TextField/TextField.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { type InputHTMLAttributes } from 'react';
2
+ import './TextField.css';
3
+ export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
4
+ /** Always visible: a text field is never unlabeled. */
5
+ label: string;
6
+ hint?: string;
7
+ /** Replaces the hint and marks the input invalid. */
8
+ error?: string;
9
+ }
10
+ export declare function TextField({ label, hint, error, id, className, disabled, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, ...props }: TextFieldProps): 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");function t(e){var n,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(n=0;n<a;n++)e[n]&&(r=t(e[n]))&&(i&&(i+=` `),i+=r)}else for(r in e)e[r]&&(i&&(i+=` `),i+=r)}return i}function n(){for(var e,n,r=0,i=``,a=arguments.length;r<a;r++)(e=arguments[r])&&(n=t(e))&&(i&&(i+=` `),i+=n);return i}function r({children:t,className:r,variant:i,size:a,leadingIcon:o,trailingIcon:s,type:c=`button`,...l}){return(0,e.jsxs)(`button`,{type:c,className:n(`tintora-button`,`tintora-button--${i}`,`tintora-button--${a}`,{"tintora-button--leading-icon":!!o,"tintora-button--trailing-icon":!!s},r),...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})]})}exports.Button=r;
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})]})}var a={round:`secondary`,field:`secondary`,nav:`ghost`};function o({icon:t,variant:n=`round`,size:o,selected:s,className:c,...l}){let u=n===`round`?o??`large`:void 0;return(0,e.jsx)(i,{...l,variant:a[n],"aria-current":s?`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 s({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.IconButton=o,exports.TextField=s;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import './tokens.css';
2
2
  export { Button } from './Button/Button';
3
+ export { IconButton } from './IconButton/IconButton';
4
+ export { TextField } from './TextField/TextField';
package/dist/index.js CHANGED
@@ -1,29 +1,30 @@
1
1
  import { jsx as e, jsxs as t } from "react/jsx-runtime";
2
+ import { useId as n } from "react";
2
3
  //#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
3
- function n(e) {
4
- var t, r, i = "";
4
+ function r(e) {
5
+ var t, n, i = "";
5
6
  if (typeof e == "string" || typeof e == "number") i += e;
6
7
  else if (typeof e == "object") {
7
8
  if (Array.isArray(e)) {
8
9
  var a = e.length;
9
- for (t = 0; t < a; t++) e[t] && (r = n(e[t])) && (i && (i += " "), i += r);
10
- } else for (r in e) e[r] && (i && (i += " "), i += r);
10
+ for (t = 0; t < a; t++) e[t] && (n = r(e[t])) && (i && (i += " "), i += n);
11
+ } else for (n in e) e[n] && (i && (i += " "), i += n);
11
12
  }
12
13
  return i;
13
14
  }
14
- function r() {
15
- for (var e, t, r = 0, i = "", a = arguments.length; r < a; r++) (e = arguments[r]) && (t = n(e)) && (i && (i += " "), i += t);
15
+ function i() {
16
+ for (var e, t, n = 0, i = "", a = arguments.length; n < a; n++) (e = arguments[n]) && (t = r(e)) && (i && (i += " "), i += t);
16
17
  return i;
17
18
  }
18
19
  //#endregion
19
20
  //#region src/Button/Button.tsx
20
- function i({ children: n, className: i, variant: a, size: o, leadingIcon: s, trailingIcon: c, type: l = "button", ...u }) {
21
+ function a({ children: n, className: r, variant: a, size: o = "medium", leadingIcon: s, trailingIcon: c, type: l = "button", ...u }) {
21
22
  return /* @__PURE__ */ t("button", {
22
23
  type: l,
23
- className: r("tintora-button", `tintora-button--${a}`, `tintora-button--${o}`, {
24
+ className: i("tintora-button", `tintora-button--${a}`, `tintora-button--${o}`, {
24
25
  "tintora-button--leading-icon": !!s,
25
26
  "tintora-button--trailing-icon": !!c
26
- }, i),
27
+ }, r),
27
28
  ...u,
28
29
  children: [
29
30
  s && /* @__PURE__ */ e("span", {
@@ -41,4 +42,54 @@ function i({ children: n, className: i, variant: a, size: o, leadingIcon: s, tra
41
42
  });
42
43
  }
43
44
  //#endregion
44
- export { i as Button };
45
+ //#region src/IconButton/IconButton.tsx
46
+ var o = {
47
+ round: "secondary",
48
+ field: "secondary",
49
+ nav: "ghost"
50
+ };
51
+ function s({ icon: t, variant: n = "round", size: r, selected: s, className: c, ...l }) {
52
+ let u = n === "round" ? r ?? "large" : void 0;
53
+ return /* @__PURE__ */ e(a, {
54
+ ...l,
55
+ variant: o[n],
56
+ "aria-current": s ? "page" : void 0,
57
+ className: i("tintora-icon-button", `tintora-icon-button--${n}`, u && `tintora-icon-button--${u}`, c),
58
+ ...u && { size: u },
59
+ children: /* @__PURE__ */ e("span", {
60
+ className: "tintora-icon-button__icon",
61
+ "aria-hidden": "true",
62
+ children: t
63
+ })
64
+ });
65
+ }
66
+ //#endregion
67
+ //#region src/TextField/TextField.tsx
68
+ function c({ label: r, hint: a, error: o, id: s, className: c, disabled: l, "aria-describedby": u, "aria-invalid": d, ...f }) {
69
+ let p = n(), m = s ?? p, h = `${m}-message`, g = o ?? a;
70
+ return /* @__PURE__ */ t("div", {
71
+ className: i("tintora-textfield", l && "tintora-textfield--disabled", c),
72
+ children: [
73
+ /* @__PURE__ */ e("label", {
74
+ htmlFor: m,
75
+ className: "tintora-textfield__label",
76
+ children: r
77
+ }),
78
+ /* @__PURE__ */ e("input", {
79
+ ...f,
80
+ id: m,
81
+ disabled: l,
82
+ className: "tintora-textfield__input",
83
+ "aria-invalid": o ? !0 : d,
84
+ "aria-describedby": i(g && h, u) || void 0
85
+ }),
86
+ g && /* @__PURE__ */ e("span", {
87
+ id: h,
88
+ className: i("tintora-textfield__hint", o && "tintora-textfield__hint--error"),
89
+ children: g
90
+ })
91
+ ]
92
+ });
93
+ }
94
+ //#endregion
95
+ export { a as Button, s as IconButton, c as TextField };
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-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-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-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}
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-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-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-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);outline-offset:2px;outline:2px solid #0000;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)}.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)}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tintora",
3
- "version": "0.5.0",
3
+ "version": "0.7.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -34,11 +34,13 @@
34
34
  "./style.css": "./dist/tintora.css"
35
35
  },
36
36
  "scripts": {
37
- "build": "vite build && tsc --noEmit false --emitDeclarationOnly --declaration --rootDir src --outDir dist",
37
+ "build": "vite build && tsc -p tsconfig.build.json --noEmit false --emitDeclarationOnly --declaration --outDir dist",
38
38
  "dev": "vite build --watch",
39
39
  "storybook": "storybook dev -p 6006",
40
40
  "build-storybook": "storybook build",
41
41
  "typecheck": "tsc --noEmit",
42
+ "test": "vitest run",
43
+ "test:watch": "vitest",
42
44
  "lint": "eslint . && node scripts/check-tokens.mjs",
43
45
  "format": "prettier --write .",
44
46
  "format:check": "prettier --check .",
@@ -53,11 +55,16 @@
53
55
  "@commitlint/cli": "^21.2.3",
54
56
  "@commitlint/config-conventional": "^21.2.3",
55
57
  "@eslint/js": "^9.39.5",
58
+ "@storybook/addon-a11y": "^10.6.1",
56
59
  "@storybook/addon-docs": "^10.6.1",
57
60
  "@storybook/react-vite": "^10.6.1",
61
+ "@testing-library/jest-dom": "^7.0.1",
62
+ "@testing-library/react": "^16.3.3",
63
+ "@testing-library/user-event": "^14.6.7",
58
64
  "@types/react": "^19.3.0",
59
65
  "@types/react-dom": "^19.3.0",
60
66
  "@vitejs/plugin-react": "^6.1.2",
67
+ "axe-core": "^4.14.0",
61
68
  "clsx": "^2.1.1",
62
69
  "eslint": "^9.39.5",
63
70
  "eslint-config-prettier": "^10.1.8",
@@ -67,6 +74,7 @@
67
74
  "eslint-plugin-storybook": "^10.6.1",
68
75
  "globals": "^17.13.0",
69
76
  "husky": "^9.1.7",
77
+ "jsdom": "^30.1.2",
70
78
  "lint-staged": "^17.6.0",
71
79
  "prettier": "^3.9.10",
72
80
  "react": "^19.3.0",
@@ -76,7 +84,9 @@
76
84
  "storybook-addon-pseudo-states": "^10.6.1",
77
85
  "typescript": "^6.0.3",
78
86
  "typescript-eslint": "^8.71.1",
79
- "vite": "^8.3.4"
87
+ "vite": "^8.3.4",
88
+ "vitest": "^5.0.3",
89
+ "vitest-axe": "^0.1.0"
80
90
  },
81
91
  "packageManager": "pnpm@12.11.2"
82
92
  }