@techsio/ui-kit 0.4.0 → 0.4.1

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 (5) hide show
  1. package/dist/src/atoms/link-button.d.ts +32 -32
  2. package/dist/src/molecules/switch.d.ts +18 -18
  3. package/dist/src/molecules/toast.d.ts +24 -24
  4. package/package.json +12 -5
  5. package/src/tokens/theme.css +95 -0
package/dist/src/atoms/link-button.d.ts CHANGED
@@ -3,61 +3,61 @@ import type { VariantProps } from "tailwind-variants";
3
3
  import { type IconProps, type IconType } from "./icon";
4
4
  declare const linkButton: import("tailwind-variants").TVReturnType<{} | {
5
5
  variant: {
6
- primary: import("tailwind-variants").ClassValue | {
7
- base?: import("tailwind-variants").ClassValue;
6
+ primary: import("tailwind-merge").ClassNameValue | {
7
+ base?: import("tailwind-merge").ClassNameValue;
8
8
  };
9
- secondary: import("tailwind-variants").ClassValue | {
10
- base?: import("tailwind-variants").ClassValue;
9
+ secondary: import("tailwind-merge").ClassNameValue | {
10
+ base?: import("tailwind-merge").ClassNameValue;
11
11
  };
12
- tertiary: import("tailwind-variants").ClassValue | {
13
- base?: import("tailwind-variants").ClassValue;
12
+ tertiary: import("tailwind-merge").ClassNameValue | {
13
+ base?: import("tailwind-merge").ClassNameValue;
14
14
  };
15
- danger: import("tailwind-variants").ClassValue | {
16
- base?: import("tailwind-variants").ClassValue;
15
+ danger: import("tailwind-merge").ClassNameValue | {
16
+ base?: import("tailwind-merge").ClassNameValue;
17
17
  };
18
- warning: import("tailwind-variants").ClassValue | {
19
- base?: import("tailwind-variants").ClassValue;
18
+ warning: import("tailwind-merge").ClassNameValue | {
19
+ base?: import("tailwind-merge").ClassNameValue;
20
20
  };
21
21
  };
22
22
  theme: {
23
- solid: import("tailwind-variants").ClassValue | {
24
- base?: import("tailwind-variants").ClassValue;
23
+ solid: import("tailwind-merge").ClassNameValue | {
24
+ base?: import("tailwind-merge").ClassNameValue;
25
25
  };
26
- light: import("tailwind-variants").ClassValue | {
27
- base?: import("tailwind-variants").ClassValue;
26
+ light: import("tailwind-merge").ClassNameValue | {
27
+ base?: import("tailwind-merge").ClassNameValue;
28
28
  };
29
- borderless: import("tailwind-variants").ClassValue | {
30
- base?: import("tailwind-variants").ClassValue;
29
+ borderless: import("tailwind-merge").ClassNameValue | {
30
+ base?: import("tailwind-merge").ClassNameValue;
31
31
  };
32
- outlined: import("tailwind-variants").ClassValue | {
33
- base?: import("tailwind-variants").ClassValue;
32
+ outlined: import("tailwind-merge").ClassNameValue | {
33
+ base?: import("tailwind-merge").ClassNameValue;
34
34
  };
35
- unstyled: import("tailwind-variants").ClassValue | {
36
- base?: import("tailwind-variants").ClassValue;
35
+ unstyled: import("tailwind-merge").ClassNameValue | {
36
+ base?: import("tailwind-merge").ClassNameValue;
37
37
  };
38
38
  };
39
39
  uppercase: {
40
- true: import("tailwind-variants").ClassValue | {
41
- base?: import("tailwind-variants").ClassValue;
40
+ true: import("tailwind-merge").ClassNameValue | {
41
+ base?: import("tailwind-merge").ClassNameValue;
42
42
  };
43
43
  };
44
44
  size: {
45
- sm: import("tailwind-variants").ClassValue | {
46
- base?: import("tailwind-variants").ClassValue;
45
+ sm: import("tailwind-merge").ClassNameValue | {
46
+ base?: import("tailwind-merge").ClassNameValue;
47
47
  };
48
- md: import("tailwind-variants").ClassValue | {
49
- base?: import("tailwind-variants").ClassValue;
48
+ md: import("tailwind-merge").ClassNameValue | {
49
+ base?: import("tailwind-merge").ClassNameValue;
50
50
  };
51
- lg: import("tailwind-variants").ClassValue | {
52
- base?: import("tailwind-variants").ClassValue;
51
+ lg: import("tailwind-merge").ClassNameValue | {
52
+ base?: import("tailwind-merge").ClassNameValue;
53
53
  };
54
- current: import("tailwind-variants").ClassValue | {
55
- base?: import("tailwind-variants").ClassValue;
54
+ current: import("tailwind-merge").ClassNameValue | {
55
+ base?: import("tailwind-merge").ClassNameValue;
56
56
  };
57
57
  };
58
58
  block: {
59
- true: import("tailwind-variants").ClassValue | {
60
- base?: import("tailwind-variants").ClassValue;
59
+ true: import("tailwind-merge").ClassNameValue | {
60
+ base?: import("tailwind-merge").ClassNameValue;
61
61
  };
62
62
  };
63
63
  }, undefined, "data-disabled:cursor-not-allowed", {
package/dist/src/molecules/switch.d.ts CHANGED
@@ -2,22 +2,22 @@ import { type ReactNode } from "react";
2
2
  import type { VariantProps } from "tailwind-variants";
3
3
  declare const switchVariants: import("tailwind-variants").TVReturnType<{
4
4
  [key: string]: {
5
- [key: string]: import("tailwind-variants").ClassValue | {
6
- label?: import("tailwind-variants").ClassValue;
7
- root?: import("tailwind-variants").ClassValue;
8
- control?: import("tailwind-variants").ClassValue;
9
- hiddenInput?: import("tailwind-variants").ClassValue;
10
- thumb?: import("tailwind-variants").ClassValue;
5
+ [key: string]: import("tailwind-merge").ClassNameValue | {
6
+ label?: import("tailwind-merge").ClassNameValue;
7
+ root?: import("tailwind-merge").ClassNameValue;
8
+ control?: import("tailwind-merge").ClassNameValue;
9
+ hiddenInput?: import("tailwind-merge").ClassNameValue;
10
+ thumb?: import("tailwind-merge").ClassNameValue;
11
11
  };
12
12
  };
13
13
  } | {
14
14
  [x: string]: {
15
- [x: string]: import("tailwind-variants").ClassValue | {
16
- label?: import("tailwind-variants").ClassValue;
17
- root?: import("tailwind-variants").ClassValue;
18
- control?: import("tailwind-variants").ClassValue;
19
- hiddenInput?: import("tailwind-variants").ClassValue;
20
- thumb?: import("tailwind-variants").ClassValue;
15
+ [x: string]: import("tailwind-merge").ClassNameValue | {
16
+ label?: import("tailwind-merge").ClassNameValue;
17
+ root?: import("tailwind-merge").ClassNameValue;
18
+ control?: import("tailwind-merge").ClassNameValue;
19
+ hiddenInput?: import("tailwind-merge").ClassNameValue;
20
+ thumb?: import("tailwind-merge").ClassNameValue;
21
21
  };
22
22
  };
23
23
  } | {}, {
@@ -28,12 +28,12 @@ declare const switchVariants: import("tailwind-variants").TVReturnType<{
28
28
  hiddenInput: string;
29
29
  }, undefined, {
30
30
  [key: string]: {
31
- [key: string]: import("tailwind-variants").ClassValue | {
32
- label?: import("tailwind-variants").ClassValue;
33
- root?: import("tailwind-variants").ClassValue;
34
- control?: import("tailwind-variants").ClassValue;
35
- hiddenInput?: import("tailwind-variants").ClassValue;
36
- thumb?: import("tailwind-variants").ClassValue;
31
+ [key: string]: import("tailwind-merge").ClassNameValue | {
32
+ label?: import("tailwind-merge").ClassNameValue;
33
+ root?: import("tailwind-merge").ClassNameValue;
34
+ control?: import("tailwind-merge").ClassNameValue;
35
+ hiddenInput?: import("tailwind-merge").ClassNameValue;
36
+ thumb?: import("tailwind-merge").ClassNameValue;
37
37
  };
38
38
  };
39
39
  } | {}, {
package/dist/src/molecules/toast.d.ts CHANGED
@@ -3,26 +3,26 @@ import { type ReactNode } from "react";
3
3
  import type { VariantProps } from "tailwind-variants";
4
4
  declare const toastVariants: import("tailwind-variants").TVReturnType<{
5
5
  [key: string]: {
6
- [key: string]: import("tailwind-variants").ClassValue | {
7
- title?: import("tailwind-variants").ClassValue;
8
- icon?: import("tailwind-variants").ClassValue;
9
- group?: import("tailwind-variants").ClassValue;
10
- header?: import("tailwind-variants").ClassValue;
11
- description?: import("tailwind-variants").ClassValue;
12
- root?: import("tailwind-variants").ClassValue;
13
- closeButton?: import("tailwind-variants").ClassValue;
6
+ [key: string]: import("tailwind-merge").ClassNameValue | {
7
+ title?: import("tailwind-merge").ClassNameValue;
8
+ icon?: import("tailwind-merge").ClassNameValue;
9
+ group?: import("tailwind-merge").ClassNameValue;
10
+ header?: import("tailwind-merge").ClassNameValue;
11
+ description?: import("tailwind-merge").ClassNameValue;
12
+ root?: import("tailwind-merge").ClassNameValue;
13
+ closeButton?: import("tailwind-merge").ClassNameValue;
14
14
  };
15
15
  };
16
16
  } | {
17
17
  [x: string]: {
18
- [x: string]: import("tailwind-variants").ClassValue | {
19
- title?: import("tailwind-variants").ClassValue;
20
- icon?: import("tailwind-variants").ClassValue;
21
- group?: import("tailwind-variants").ClassValue;
22
- header?: import("tailwind-variants").ClassValue;
23
- description?: import("tailwind-variants").ClassValue;
24
- root?: import("tailwind-variants").ClassValue;
25
- closeButton?: import("tailwind-variants").ClassValue;
18
+ [x: string]: import("tailwind-merge").ClassNameValue | {
19
+ title?: import("tailwind-merge").ClassNameValue;
20
+ icon?: import("tailwind-merge").ClassNameValue;
21
+ group?: import("tailwind-merge").ClassNameValue;
22
+ header?: import("tailwind-merge").ClassNameValue;
23
+ description?: import("tailwind-merge").ClassNameValue;
24
+ root?: import("tailwind-merge").ClassNameValue;
25
+ closeButton?: import("tailwind-merge").ClassNameValue;
26
26
  };
27
27
  };
28
28
  } | {}, {
@@ -35,14 +35,14 @@ declare const toastVariants: import("tailwind-variants").TVReturnType<{
35
35
  closeButton: string[];
36
36
  }, undefined, {
37
37
  [key: string]: {
38
- [key: string]: import("tailwind-variants").ClassValue | {
39
- title?: import("tailwind-variants").ClassValue;
40
- icon?: import("tailwind-variants").ClassValue;
41
- group?: import("tailwind-variants").ClassValue;
42
- header?: import("tailwind-variants").ClassValue;
43
- description?: import("tailwind-variants").ClassValue;
44
- root?: import("tailwind-variants").ClassValue;
45
- closeButton?: import("tailwind-variants").ClassValue;
38
+ [key: string]: import("tailwind-merge").ClassNameValue | {
39
+ title?: import("tailwind-merge").ClassNameValue;
40
+ icon?: import("tailwind-merge").ClassNameValue;
41
+ group?: import("tailwind-merge").ClassNameValue;
42
+ header?: import("tailwind-merge").ClassNameValue;
43
+ description?: import("tailwind-merge").ClassNameValue;
44
+ root?: import("tailwind-merge").ClassNameValue;
45
+ closeButton?: import("tailwind-merge").ClassNameValue;
46
46
  };
47
47
  };
48
48
  } | {}, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@techsio/ui-kit",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -20,6 +20,10 @@
20
20
  "style": "./src/tokens/index.css",
21
21
  "default": "./src/tokens/index.css"
22
22
  },
23
+ "./theme.css": {
24
+ "style": "./src/tokens/theme.css",
25
+ "default": "./src/tokens/theme.css"
26
+ },
23
27
  "./tokens/*": {
24
28
  "style": "./src/tokens/*.css",
25
29
  "default": "./src/tokens/*.css"
@@ -70,6 +74,10 @@
70
74
  "semantic-release": "semantic-release"
71
75
  },
72
76
  "dependencies": {
77
+ "@iconify-json/mdi": "^1.2.3",
78
+ "@iconify-json/mdi-light": "^1.2.2",
79
+ "@iconify-json/svg-spinners": "^1.2.4",
80
+ "@iconify/tailwind4": "^1.1.0",
73
81
  "@zag-js/accordion": "^1.31.1",
74
82
  "@zag-js/carousel": "^1.31.1",
75
83
  "@zag-js/checkbox": "^1.31.1",
@@ -92,13 +100,14 @@
92
100
  "@zag-js/tooltip": "^1.31.1",
93
101
  "@zag-js/tree-view": "^1.31.1",
94
102
  "libphonenumber-js": "^1.13.2",
95
- "tailwind-variants": "^3.1.1"
103
+ "tailwind-merge": "^3.4.0",
104
+ "tailwind-variants": "^3.1.1",
105
+ "tailwindcss-animate": "^1.0.7"
96
106
  },
97
107
  "devDependencies": {
98
108
  "@eslint/js": "^9.39.1",
99
109
  "@figma/code-connect": "^1.4.3",
100
110
  "@iconify/json": "^2.2.409",
101
- "@iconify/tailwind4": "^1.1.0",
102
111
  "@rsbuild/core": "1.6.7",
103
112
  "@rsbuild/plugin-react": "^1.4.1",
104
113
  "@rslib/core": "^0.18.0",
@@ -127,9 +136,7 @@
127
136
  "storybook": "^10.0.2",
128
137
  "storybook-addon-rslib": "^2.1.6",
129
138
  "storybook-react-rsbuild": "^2.1.4",
130
- "tailwind-merge": "^3.4.0",
131
139
  "tailwindcss": "^4.1.17",
132
- "tailwindcss-animate": "^1.0.7",
133
140
  "typescript": "^5.9.3"
134
141
  },
135
142
  "peerDependencies": {
package/src/tokens/theme.css ADDED
@@ -0,0 +1,95 @@
1
+ /*
2
+ * Techsio app theme.
3
+ *
4
+ * Import after @techsio/ui-kit/tokens in an app stylesheet. This file keeps the
5
+ * component token graph intact and only overrides semantic/app-level values.
6
+ */
7
+
8
+ :root {
9
+ color-scheme: light dark;
10
+
11
+ --font-sans:
12
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
13
+ "Segoe UI", sans-serif;
14
+ --font-body: var(--font-sans);
15
+ --font-heading: var(--font-sans);
16
+
17
+ --color-brand-blue: oklch(57% 0.18 249);
18
+ --color-brand-blue-dark: oklch(74% 0.14 235);
19
+ --color-brand-green: oklch(64% 0.16 153);
20
+ --color-brand-coral: oklch(66% 0.16 28);
21
+ --color-brand-gold: oklch(78% 0.14 82);
22
+
23
+ --color-page-bg: light-dark(oklch(98% 0.012 248), oklch(17% 0.025 250));
24
+ --color-page-fg: light-dark(oklch(21% 0.03 252), oklch(94% 0.014 248));
25
+ --color-surface: light-dark(oklch(100% 0 0), oklch(22% 0.027 250));
26
+ --color-surface-subtle: light-dark(
27
+ oklch(95% 0.016 248),
28
+ oklch(27% 0.028 250)
29
+ );
30
+ --color-border-muted: light-dark(oklch(86% 0.024 248), oklch(38% 0.032 250));
31
+
32
+ --color-primary: light-dark(
33
+ var(--color-brand-blue),
34
+ var(--color-brand-blue-dark)
35
+ );
36
+ --color-secondary: var(--color-brand-green);
37
+ --color-tertiary: var(--color-brand-coral);
38
+ --color-info: light-dark(oklch(58% 0.14 210), oklch(77% 0.13 210));
39
+ --color-success: light-dark(oklch(58% 0.15 151), oklch(74% 0.14 151));
40
+ --color-warning: light-dark(var(--color-brand-gold), oklch(83% 0.13 82));
41
+ --color-danger: light-dark(oklch(58% 0.19 26), oklch(72% 0.16 26));
42
+
43
+ --color-base: var(--color-page-bg);
44
+ --color-base-reverse: var(--color-page-fg);
45
+ --color-bg-transparent-base: transparent;
46
+ --color-bg-disabled-base: light-dark(
47
+ oklch(91% 0.014 248),
48
+ oklch(31% 0.023 250)
49
+ );
50
+ --color-border-primary-base: var(--color-border-muted);
51
+ --color-border-disabled-base: light-dark(
52
+ oklch(82% 0.018 248),
53
+ oklch(35% 0.025 250)
54
+ );
55
+
56
+ --default-ring-style: solid;
57
+ --default-ring-width: 2px;
58
+ --default-ring-offset: 2px;
59
+
60
+ accent-color: var(--color-primary);
61
+ background: var(--color-page-bg);
62
+ color: var(--color-page-fg);
63
+ font-family: var(--font-body);
64
+ }
65
+
66
+ html {
67
+ background: var(--color-page-bg);
68
+ }
69
+
70
+ body {
71
+ background: var(--color-page-bg);
72
+ color: var(--color-page-fg);
73
+ font-family: var(--font-body);
74
+ }
75
+
76
+ ::selection {
77
+ background: color-mix(in oklab, var(--color-primary) 32%, transparent);
78
+ }
79
+
80
+ @media (forced-colors: active) {
81
+ :root {
82
+ --color-page-bg: Canvas;
83
+ --color-page-fg: CanvasText;
84
+ --color-surface: Canvas;
85
+ --color-surface-subtle: Canvas;
86
+ --color-border-muted: ButtonBorder;
87
+ --color-primary: Highlight;
88
+ --color-secondary: LinkText;
89
+ --color-tertiary: Mark;
90
+ --color-info: LinkText;
91
+ --color-success: Highlight;
92
+ --color-warning: Mark;
93
+ --color-danger: Mark;
94
+ }
95
+ }