@techfides/ui-library-design 0.7.0 → 0.8.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.
@@ -0,0 +1,217 @@
1
+ //#region src/cn.generated.ts
2
+ const twScales = {
3
+ animate: [
4
+ "tf-blend-in",
5
+ "tf-arrive",
6
+ "tf-depart",
7
+ "tf-in",
8
+ "tf-out",
9
+ "tf-chip-in",
10
+ "tf-chip-out",
11
+ "tf-chip-out-auto",
12
+ "tf-rewind",
13
+ "tf-lift",
14
+ "tf-lift-rewind",
15
+ "tf-drawer",
16
+ "tf-drawer-rewind",
17
+ "tf-expand",
18
+ "tf-collapse",
19
+ "tf-shake",
20
+ "tf-pop",
21
+ "tf-nudge",
22
+ "tf-fade-in",
23
+ "tf-fade-out",
24
+ "tf-fade-rewind",
25
+ "tf-rise",
26
+ "tf-draw",
27
+ "tf-page",
28
+ "tf-page-again"
29
+ ],
30
+ blur: [
31
+ "tf-panel",
32
+ "tf-glass",
33
+ "tf-scrim",
34
+ "tf-cloud-md",
35
+ "tf-cloud-tight",
36
+ "tf-cloud-wide"
37
+ ],
38
+ color: [
39
+ "tf-accent",
40
+ "tf-accent-hi",
41
+ "tf-accent-surface",
42
+ "tf-accent-deep",
43
+ "tf-on-accent",
44
+ "tf-accent-tint",
45
+ "tf-accent-edge",
46
+ "tf-bg",
47
+ "tf-surface",
48
+ "tf-panel",
49
+ "tf-panel-2",
50
+ "tf-panel-hi",
51
+ "tf-glass",
52
+ "tf-sunken",
53
+ "tf-sunken-hi",
54
+ "tf-sunken-quiet",
55
+ "tf-control",
56
+ "tf-control-hi",
57
+ "tf-surface-hi",
58
+ "tf-surface-quiet",
59
+ "tf-shade-under",
60
+ "tf-shade-deep",
61
+ "tf-scrim",
62
+ "tf-line",
63
+ "tf-line-2",
64
+ "tf-line-hi",
65
+ "tf-rule",
66
+ "tf-fg",
67
+ "tf-fg-held",
68
+ "tf-muted",
69
+ "tf-success",
70
+ "tf-success-hi",
71
+ "tf-warning",
72
+ "tf-warning-hi",
73
+ "tf-info",
74
+ "tf-info-hi",
75
+ "tf-danger",
76
+ "tf-danger-hi",
77
+ "tf-on-semantic",
78
+ "tf-success-tint",
79
+ "tf-success-edge",
80
+ "tf-warning-tint",
81
+ "tf-warning-edge",
82
+ "tf-info-tint",
83
+ "tf-info-edge",
84
+ "tf-danger-tint",
85
+ "tf-danger-wash",
86
+ "tf-danger-edge"
87
+ ],
88
+ container: [
89
+ "tf-panel",
90
+ "tf-list",
91
+ "tf-placard",
92
+ "tf-measure",
93
+ "tf-page",
94
+ "tf-canvas"
95
+ ],
96
+ ease: [
97
+ "tf",
98
+ "tf-spring",
99
+ "tf-glide",
100
+ "tf-settle"
101
+ ],
102
+ font: ["tf-display", "tf-body"],
103
+ radius: [
104
+ "tf-none",
105
+ "tf-inline",
106
+ "tf-control",
107
+ "tf-block",
108
+ "tf-card",
109
+ "tf-pill"
110
+ ],
111
+ shadow: ["tf-float", "tf-mark"],
112
+ spacing: [
113
+ "tf-hairline",
114
+ "tf-control-2xs",
115
+ "tf-control-xs",
116
+ "tf-control-sm",
117
+ "tf-control-md",
118
+ "tf-control-lg",
119
+ "tf-row",
120
+ "tf-chip-sm",
121
+ "tf-target",
122
+ "tf-menu",
123
+ "tf-sidebar",
124
+ "tf-rail",
125
+ "tf-icon-2xs",
126
+ "tf-icon-xs",
127
+ "tf-icon-sm",
128
+ "tf-icon-md",
129
+ "tf-icon-lg",
130
+ "tf-icon-solo-xs",
131
+ "tf-icon-solo-sm",
132
+ "tf-icon-solo-md",
133
+ "tf-icon-solo-lg",
134
+ "tf-mark-glyph",
135
+ "tf-mark-dot",
136
+ "tf-mark-track",
137
+ "tf-mark-inset"
138
+ ],
139
+ text: [
140
+ "tf-numeral",
141
+ "tf-display",
142
+ "tf-h1",
143
+ "tf-h2",
144
+ "tf-h3",
145
+ "tf-h4",
146
+ "tf-figure",
147
+ "tf-unit",
148
+ "tf-lead",
149
+ "tf-body",
150
+ "tf-body-sm",
151
+ "tf-caption",
152
+ "tf-caption-sm"
153
+ ],
154
+ tracking: ["tf-tight", "tf-eyebrow"]
155
+ };
156
+ const durationSteps = [
157
+ "tf-1",
158
+ "tf-2",
159
+ "tf-3",
160
+ "tf-4"
161
+ ];
162
+ const zSteps = [
163
+ "tf-raised",
164
+ "tf-dropdown",
165
+ "tf-tooltip",
166
+ "tf-modal",
167
+ "tf-toast"
168
+ ];
169
+ const utilityFamilies = {
170
+ "tf-cloud-blur": [
171
+ "tf-cloud-md",
172
+ "tf-cloud-tight",
173
+ "tf-cloud-wide"
174
+ ],
175
+ "tf-cloud-tone": [
176
+ "tf-cloud-brand",
177
+ "tf-cloud-ink",
178
+ "tf-cloud-quiet"
179
+ ],
180
+ "tf-cloud-weather": [
181
+ "tf-clouded",
182
+ "tf-clouded-lifted",
183
+ "tf-clouding",
184
+ "tf-cloud-hidden"
185
+ ],
186
+ "tf-edge": [
187
+ "tf-edge-lit",
188
+ "tf-edge-milk",
189
+ "tf-edge-plain",
190
+ "tf-edge-sweep"
191
+ ],
192
+ "tf-glass-plate": ["tf-glass-plate", "tf-glass-plate-lit"],
193
+ "tf-icons": ["tf-icons", "tf-icons-solo"],
194
+ "tf-label": [
195
+ "tf-label-inked",
196
+ "tf-label-lit",
197
+ "tf-label-quiet"
198
+ ],
199
+ "tf-lit": ["tf-lit-inside", "tf-lit-rest"],
200
+ "tf-mark-tone": ["tf-mark-failed", "tf-mark-lit"],
201
+ "tf-moves": ["tf-moves-glide", "tf-moves-spring"],
202
+ "tf-plated": ["tf-plated", "tf-plated-quiet"],
203
+ "tf-rule": [
204
+ "tf-rule",
205
+ "tf-rule-fall",
206
+ "tf-rule-filled",
207
+ "tf-rule-filled-fall",
208
+ "tf-rule-quiet",
209
+ "tf-rule-quiet-fall"
210
+ ],
211
+ "tf-settled": ["tf-settled", "tf-settled-quiet"],
212
+ "tf-slides": ["tf-slides-settle", "tf-slides-spring"]
213
+ };
214
+ //#endregion
215
+ export { durationSteps, twScales, utilityFamilies, zSteps };
216
+
217
+ //# sourceMappingURL=cn.generated.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cn.generated.js","names":[],"sources":["../src/cn.generated.ts"],"sourcesContent":["const twScales = {\n animate: ['tf-blend-in', 'tf-arrive', 'tf-depart', 'tf-in', 'tf-out', 'tf-chip-in', 'tf-chip-out', 'tf-chip-out-auto', 'tf-rewind', 'tf-lift', 'tf-lift-rewind', 'tf-drawer', 'tf-drawer-rewind', 'tf-expand', 'tf-collapse', 'tf-shake', 'tf-pop', 'tf-nudge', 'tf-fade-in', 'tf-fade-out', 'tf-fade-rewind', 'tf-rise', 'tf-draw', 'tf-page', 'tf-page-again'],\n blur: ['tf-panel', 'tf-glass', 'tf-scrim', 'tf-cloud-md', 'tf-cloud-tight', 'tf-cloud-wide'],\n color: ['tf-accent', 'tf-accent-hi', 'tf-accent-surface', 'tf-accent-deep', 'tf-on-accent', 'tf-accent-tint', 'tf-accent-edge', 'tf-bg', 'tf-surface', 'tf-panel', 'tf-panel-2', 'tf-panel-hi', 'tf-glass', 'tf-sunken', 'tf-sunken-hi', 'tf-sunken-quiet', 'tf-control', 'tf-control-hi', 'tf-surface-hi', 'tf-surface-quiet', 'tf-shade-under', 'tf-shade-deep', 'tf-scrim', 'tf-line', 'tf-line-2', 'tf-line-hi', 'tf-rule', 'tf-fg', 'tf-fg-held', 'tf-muted', 'tf-success', 'tf-success-hi', 'tf-warning', 'tf-warning-hi', 'tf-info', 'tf-info-hi', 'tf-danger', 'tf-danger-hi', 'tf-on-semantic', 'tf-success-tint', 'tf-success-edge', 'tf-warning-tint', 'tf-warning-edge', 'tf-info-tint', 'tf-info-edge', 'tf-danger-tint', 'tf-danger-wash', 'tf-danger-edge'],\n container: ['tf-panel', 'tf-list', 'tf-placard', 'tf-measure', 'tf-page', 'tf-canvas'],\n ease: ['tf', 'tf-spring', 'tf-glide', 'tf-settle'],\n font: ['tf-display', 'tf-body'],\n radius: ['tf-none', 'tf-inline', 'tf-control', 'tf-block', 'tf-card', 'tf-pill'],\n shadow: ['tf-float', 'tf-mark'],\n spacing: ['tf-hairline', 'tf-control-2xs', 'tf-control-xs', 'tf-control-sm', 'tf-control-md', 'tf-control-lg', 'tf-row', 'tf-chip-sm', 'tf-target', 'tf-menu', 'tf-sidebar', 'tf-rail', 'tf-icon-2xs', 'tf-icon-xs', 'tf-icon-sm', 'tf-icon-md', 'tf-icon-lg', 'tf-icon-solo-xs', 'tf-icon-solo-sm', 'tf-icon-solo-md', 'tf-icon-solo-lg', 'tf-mark-glyph', 'tf-mark-dot', 'tf-mark-track', 'tf-mark-inset'],\n text: ['tf-numeral', 'tf-display', 'tf-h1', 'tf-h2', 'tf-h3', 'tf-h4', 'tf-figure', 'tf-unit', 'tf-lead', 'tf-body', 'tf-body-sm', 'tf-caption', 'tf-caption-sm'],\n tracking: ['tf-tight', 'tf-eyebrow'],\n}\n\nconst durationSteps = ['tf-1', 'tf-2', 'tf-3', 'tf-4']\n\nconst zSteps = ['tf-raised', 'tf-dropdown', 'tf-tooltip', 'tf-modal', 'tf-toast']\n\nconst utilityFamilies = {\n 'tf-cloud-blur': ['tf-cloud-md', 'tf-cloud-tight', 'tf-cloud-wide'],\n 'tf-cloud-tone': ['tf-cloud-brand', 'tf-cloud-ink', 'tf-cloud-quiet'],\n 'tf-cloud-weather': ['tf-clouded', 'tf-clouded-lifted', 'tf-clouding', 'tf-cloud-hidden'],\n 'tf-edge': ['tf-edge-lit', 'tf-edge-milk', 'tf-edge-plain', 'tf-edge-sweep'],\n 'tf-glass-plate': ['tf-glass-plate', 'tf-glass-plate-lit'],\n 'tf-icons': ['tf-icons', 'tf-icons-solo'],\n 'tf-label': ['tf-label-inked', 'tf-label-lit', 'tf-label-quiet'],\n 'tf-lit': ['tf-lit-inside', 'tf-lit-rest'],\n 'tf-mark-tone': ['tf-mark-failed', 'tf-mark-lit'],\n 'tf-moves': ['tf-moves-glide', 'tf-moves-spring'],\n 'tf-plated': ['tf-plated', 'tf-plated-quiet'],\n 'tf-rule': ['tf-rule', 'tf-rule-fall', 'tf-rule-filled', 'tf-rule-filled-fall', 'tf-rule-quiet', 'tf-rule-quiet-fall'],\n 'tf-settled': ['tf-settled', 'tf-settled-quiet'],\n 'tf-slides': ['tf-slides-settle', 'tf-slides-spring'],\n}\n\nexport { durationSteps, twScales, utilityFamilies, zSteps }\n"],"mappings":";AAAA,MAAM,WAAW;CACf,SAAS;EAAC;EAAe;EAAa;EAAa;EAAS;EAAU;EAAc;EAAe;EAAoB;EAAa;EAAW;EAAkB;EAAa;EAAoB;EAAa;EAAe;EAAY;EAAU;EAAY;EAAc;EAAe;EAAkB;EAAW;EAAW;EAAW;CAAe;CAC/V,MAAM;EAAC;EAAY;EAAY;EAAY;EAAe;EAAkB;CAAe;CAC3F,OAAO;EAAC;EAAa;EAAgB;EAAqB;EAAkB;EAAgB;EAAkB;EAAkB;EAAS;EAAc;EAAY;EAAc;EAAe;EAAY;EAAa;EAAgB;EAAmB;EAAc;EAAiB;EAAiB;EAAoB;EAAkB;EAAiB;EAAY;EAAW;EAAa;EAAc;EAAW;EAAS;EAAc;EAAY;EAAc;EAAiB;EAAc;EAAiB;EAAW;EAAc;EAAa;EAAgB;EAAkB;EAAmB;EAAmB;EAAmB;EAAmB;EAAgB;EAAgB;EAAkB;EAAkB;CAAgB;CACzuB,WAAW;EAAC;EAAY;EAAW;EAAc;EAAc;EAAW;CAAW;CACrF,MAAM;EAAC;EAAM;EAAa;EAAY;CAAW;CACjD,MAAM,CAAC,cAAc,SAAS;CAC9B,QAAQ;EAAC;EAAW;EAAa;EAAc;EAAY;EAAW;CAAS;CAC/E,QAAQ,CAAC,YAAY,SAAS;CAC9B,SAAS;EAAC;EAAe;EAAkB;EAAiB;EAAiB;EAAiB;EAAiB;EAAU;EAAc;EAAa;EAAW;EAAc;EAAW;EAAe;EAAc;EAAc;EAAc;EAAc;EAAmB;EAAmB;EAAmB;EAAmB;EAAiB;EAAe;EAAiB;CAAe;CAC3Y,MAAM;EAAC;EAAc;EAAc;EAAS;EAAS;EAAS;EAAS;EAAa;EAAW;EAAW;EAAW;EAAc;EAAc;CAAe;CAChK,UAAU,CAAC,YAAY,YAAY;AACrC;AAEA,MAAM,gBAAgB;CAAC;CAAQ;CAAQ;CAAQ;AAAM;AAErD,MAAM,SAAS;CAAC;CAAa;CAAe;CAAc;CAAY;AAAU;AAEhF,MAAM,kBAAkB;CACtB,iBAAiB;EAAC;EAAe;EAAkB;CAAe;CAClE,iBAAiB;EAAC;EAAkB;EAAgB;CAAgB;CACpE,oBAAoB;EAAC;EAAc;EAAqB;EAAe;CAAiB;CACxF,WAAW;EAAC;EAAe;EAAgB;EAAiB;CAAe;CAC3E,kBAAkB,CAAC,kBAAkB,oBAAoB;CACzD,YAAY,CAAC,YAAY,eAAe;CACxC,YAAY;EAAC;EAAkB;EAAgB;CAAgB;CAC/D,UAAU,CAAC,iBAAiB,aAAa;CACzC,gBAAgB,CAAC,kBAAkB,aAAa;CAChD,YAAY,CAAC,kBAAkB,iBAAiB;CAChD,aAAa,CAAC,aAAa,iBAAiB;CAC5C,WAAW;EAAC;EAAW;EAAgB;EAAkB;EAAuB;EAAiB;CAAoB;CACrH,cAAc,CAAC,cAAc,kBAAkB;CAC/C,aAAa,CAAC,oBAAoB,kBAAkB;AACtD"}
package/dist/cn.js CHANGED
@@ -1,177 +1,21 @@
1
+ import { durationSteps, twScales, utilityFamilies, zSteps } from "./cn.generated.js";
1
2
  import { clsx } from "clsx";
2
3
  import { extendTailwindMerge } from "tailwind-merge";
3
4
  //#region src/cn.ts
4
- const { color, duration, ...themeScales } = {
5
- animate: [
6
- "tf-arrive",
7
- "tf-blend-in",
8
- "tf-in",
9
- "tf-out",
10
- "tf-chip-in",
11
- "tf-chip-out",
12
- "tf-rewind",
13
- "tf-lift",
14
- "tf-lift-rewind",
15
- "tf-expand",
16
- "tf-collapse",
17
- "tf-depart",
18
- "tf-shake",
19
- "tf-pop",
20
- "tf-nudge",
21
- "tf-fade-in",
22
- "tf-fade-out",
23
- "tf-fade-rewind",
24
- "tf-page",
25
- "tf-page-again",
26
- "tf-rise",
27
- "tf-draw"
28
- ],
29
- blur: [
30
- "tf-panel",
31
- "tf-glass",
32
- "tf-scrim",
33
- "tf-cloud-md",
34
- "tf-cloud-tight",
35
- "tf-cloud-wide"
36
- ],
37
- color: [
38
- "tf-accent",
39
- "tf-accent-hi",
40
- "tf-accent-deep",
41
- "tf-accent-surface",
42
- "tf-accent-tint",
43
- "tf-accent-edge",
44
- "tf-on-accent",
45
- "tf-bg",
46
- "tf-surface",
47
- "tf-surface-hi",
48
- "tf-surface-quiet",
49
- "tf-sunken",
50
- "tf-sunken-hi",
51
- "tf-sunken-quiet",
52
- "tf-control",
53
- "tf-control-hi",
54
- "tf-panel",
55
- "tf-panel-2",
56
- "tf-panel-hi",
57
- "tf-glass",
58
- "tf-shade-under",
59
- "tf-shade-deep",
60
- "tf-scrim",
61
- "tf-line",
62
- "tf-line-2",
63
- "tf-line-hi",
64
- "tf-rule",
65
- "tf-fg",
66
- "tf-fg-held",
67
- "tf-muted",
68
- "tf-success",
69
- "tf-success-hi",
70
- "tf-warning",
71
- "tf-warning-hi",
72
- "tf-info",
73
- "tf-info-hi",
74
- "tf-danger",
75
- "tf-danger-hi",
76
- "tf-danger-wash",
77
- "tf-success-tint",
78
- "tf-success-edge",
79
- "tf-warning-tint",
80
- "tf-warning-edge",
81
- "tf-info-tint",
82
- "tf-info-edge",
83
- "tf-danger-tint",
84
- "tf-danger-edge",
85
- "tf-on-semantic"
86
- ],
87
- container: [
88
- "tf-panel",
89
- "tf-placard",
90
- "tf-measure",
91
- "tf-page",
92
- "tf-canvas"
93
- ],
94
- duration: [
95
- "tf-1",
96
- "tf-2",
97
- "tf-3",
98
- "tf-4"
99
- ],
100
- ease: [
101
- "tf",
102
- "tf-spring",
103
- "tf-glide",
104
- "tf-settle"
105
- ],
106
- font: ["tf-display", "tf-body"],
107
- radius: [
108
- "tf-none",
109
- "tf-inline",
110
- "tf-control",
111
- "tf-block",
112
- "tf-card",
113
- "tf-pill"
114
- ],
115
- shadow: ["tf-float", "tf-mark"],
116
- spacing: [
117
- "tf-hairline",
118
- "tf-control-2xs",
119
- "tf-control-xs",
120
- "tf-control-sm",
121
- "tf-control-md",
122
- "tf-control-lg",
123
- "tf-row",
124
- "tf-chip-sm",
125
- "tf-target",
126
- "tf-menu",
127
- "tf-sidebar",
128
- "tf-rail",
129
- "tf-icon-2xs",
130
- "tf-icon-xs",
131
- "tf-icon-sm",
132
- "tf-icon-md",
133
- "tf-icon-lg",
134
- "tf-icon-solo-xs",
135
- "tf-icon-solo-sm",
136
- "tf-icon-solo-md",
137
- "tf-icon-solo-lg",
138
- "tf-mark-glyph",
139
- "tf-mark-dot",
140
- "tf-mark-track",
141
- "tf-mark-inset"
142
- ],
143
- text: [
144
- "tf-numeral",
145
- "tf-display",
146
- "tf-h1",
147
- "tf-h2",
148
- "tf-h3",
149
- "tf-h4",
150
- "tf-figure",
151
- "tf-unit",
152
- "tf-lead",
153
- "tf-body",
154
- "tf-body-sm",
155
- "tf-caption",
156
- "tf-caption-sm"
157
- ],
158
- tracking: ["tf-tight", "tf-eyebrow"]
159
- };
5
+ const { color, ...themeScales } = twScales;
6
+ const zGroup = "z";
160
7
  const twMerge = extendTailwindMerge({ extend: {
161
8
  classGroups: {
162
- "bg-image": [{ bg: ["tf-blend"] }],
163
- "blend-base": [{ blend: color ?? [] }],
164
- "cloud-blur": [
165
- "tf-cloud-md",
166
- "tf-cloud-tight",
167
- "tf-cloud-wide"
168
- ],
169
- duration: [{ duration: duration ?? [] }],
170
- "text-color": [{ text: ["tf-blend"] }]
9
+ ...utilityFamilies,
10
+ "bg-image": [{ bg: ["tf-blend", "tf-blend-rise"] }],
11
+ "blend-base": [{ blend: color }],
12
+ duration: [{ duration: durationSteps }],
13
+ "text-color": [{ text: ["tf-blend"] }],
14
+ [zGroup]: [{ [zGroup]: zSteps }]
171
15
  },
172
16
  theme: {
173
17
  ...themeScales,
174
- color: color ?? []
18
+ color
175
19
  }
176
20
  } });
177
21
  const cn = (...inputs) => twMerge(clsx(inputs));
package/dist/cn.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cn.js","names":[],"sources":["../src/cn.ts"],"sourcesContent":["import type { ClassValue } from 'clsx'\nimport { clsx } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twScales: Record<string, string[]> = {\n animate: [\n 'tf-arrive',\n 'tf-blend-in',\n 'tf-in',\n 'tf-out',\n 'tf-chip-in',\n 'tf-chip-out',\n 'tf-rewind',\n 'tf-lift',\n 'tf-lift-rewind',\n 'tf-expand',\n 'tf-collapse',\n 'tf-depart',\n 'tf-shake',\n 'tf-pop',\n 'tf-nudge',\n 'tf-fade-in',\n 'tf-fade-out',\n 'tf-fade-rewind',\n 'tf-page',\n 'tf-page-again',\n 'tf-rise',\n 'tf-draw',\n ],\n blur: ['tf-panel', 'tf-glass', 'tf-scrim', 'tf-cloud-md', 'tf-cloud-tight', 'tf-cloud-wide'],\n color: [\n 'tf-accent',\n 'tf-accent-hi',\n 'tf-accent-deep',\n 'tf-accent-surface',\n 'tf-accent-tint',\n 'tf-accent-edge',\n 'tf-on-accent',\n 'tf-bg',\n 'tf-surface',\n 'tf-surface-hi',\n 'tf-surface-quiet',\n 'tf-sunken',\n 'tf-sunken-hi',\n 'tf-sunken-quiet',\n 'tf-control',\n 'tf-control-hi',\n 'tf-panel',\n 'tf-panel-2',\n 'tf-panel-hi',\n 'tf-glass',\n 'tf-shade-under',\n 'tf-shade-deep',\n 'tf-scrim',\n 'tf-line',\n 'tf-line-2',\n 'tf-line-hi',\n 'tf-rule',\n 'tf-fg',\n 'tf-fg-held',\n 'tf-muted',\n 'tf-success',\n 'tf-success-hi',\n 'tf-warning',\n 'tf-warning-hi',\n 'tf-info',\n 'tf-info-hi',\n 'tf-danger',\n 'tf-danger-hi',\n 'tf-danger-wash',\n 'tf-success-tint',\n 'tf-success-edge',\n 'tf-warning-tint',\n 'tf-warning-edge',\n 'tf-info-tint',\n 'tf-info-edge',\n 'tf-danger-tint',\n 'tf-danger-edge',\n 'tf-on-semantic',\n ],\n container: ['tf-panel', 'tf-placard', 'tf-measure', 'tf-page', 'tf-canvas'],\n duration: ['tf-1', 'tf-2', 'tf-3', 'tf-4'],\n ease: ['tf', 'tf-spring', 'tf-glide', 'tf-settle'],\n font: ['tf-display', 'tf-body'],\n radius: ['tf-none', 'tf-inline', 'tf-control', 'tf-block', 'tf-card', 'tf-pill'],\n shadow: ['tf-float', 'tf-mark'],\n spacing: [\n 'tf-hairline',\n 'tf-control-2xs',\n 'tf-control-xs',\n 'tf-control-sm',\n 'tf-control-md',\n 'tf-control-lg',\n 'tf-row',\n 'tf-chip-sm',\n 'tf-target',\n 'tf-menu',\n 'tf-sidebar',\n 'tf-rail',\n 'tf-icon-2xs',\n 'tf-icon-xs',\n 'tf-icon-sm',\n 'tf-icon-md',\n 'tf-icon-lg',\n 'tf-icon-solo-xs',\n 'tf-icon-solo-sm',\n 'tf-icon-solo-md',\n 'tf-icon-solo-lg',\n 'tf-mark-glyph',\n 'tf-mark-dot',\n 'tf-mark-track',\n 'tf-mark-inset',\n ],\n text: [\n 'tf-numeral',\n 'tf-display',\n 'tf-h1',\n 'tf-h2',\n 'tf-h3',\n 'tf-h4',\n 'tf-figure',\n 'tf-unit',\n 'tf-lead',\n 'tf-body',\n 'tf-body-sm',\n 'tf-caption',\n 'tf-caption-sm',\n ],\n tracking: ['tf-tight', 'tf-eyebrow'],\n}\n\nconst { color, duration, ...themeScales } = twScales\n\nconst twMerge = extendTailwindMerge<'blend-base' | 'cloud-blur'>({\n extend: {\n classGroups: {\n 'bg-image': [{ bg: ['tf-blend'] }],\n 'blend-base': [{ blend: color ?? [] }],\n 'cloud-blur': ['tf-cloud-md', 'tf-cloud-tight', 'tf-cloud-wide'],\n duration: [{ duration: duration ?? [] }],\n 'text-color': [{ text: ['tf-blend'] }],\n },\n theme: { ...themeScales, color: color ?? [] },\n },\n})\n\nconst cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs))\n\nexport { cn }\n"],"mappings":";;;AAmIA,MAAM,EAAE,OAAO,UAAU,GAAG,gBAAgB;CA9H1C,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EAAC;EAAY;EAAY;EAAY;EAAe;EAAkB;CAAe;CAC3F,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,WAAW;EAAC;EAAY;EAAc;EAAc;EAAW;CAAW;CAC1E,UAAU;EAAC;EAAQ;EAAQ;EAAQ;CAAM;CACzC,MAAM;EAAC;EAAM;EAAa;EAAY;CAAW;CACjD,MAAM,CAAC,cAAc,SAAS;CAC9B,QAAQ;EAAC;EAAW;EAAa;EAAc;EAAY;EAAW;CAAS;CAC/E,QAAQ,CAAC,YAAY,SAAS;CAC9B,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,CAAC,YAAY,YAAY;AAGc;AAEnD,MAAM,UAAU,oBAAiD,EAC/D,QAAQ;CACN,aAAa;EACX,YAAY,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;EACjC,cAAc,CAAC,EAAE,OAAO,SAAS,CAAC,EAAE,CAAC;EACrC,cAAc;GAAC;GAAe;GAAkB;EAAe;EAC/D,UAAU,CAAC,EAAE,UAAU,YAAY,CAAC,EAAE,CAAC;EACvC,cAAc,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC;CACvC;CACA,OAAO;EAAE,GAAG;EAAa,OAAO,SAAS,CAAC;CAAE;AAC9C,EACF,CAAC;AAED,MAAM,MAAM,GAAG,WAAiC,QAAQ,KAAK,MAAM,CAAC"}
1
+ {"version":3,"file":"cn.js","names":[],"sources":["../src/cn.ts"],"sourcesContent":["import type { ClassValue } from 'clsx'\nimport { clsx } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nimport { durationSteps, twScales, utilityFamilies, zSteps } from './cn.generated'\n\nconst { color, ...themeScales } = twScales\nconst zGroup = 'z'\n\nconst twMerge = extendTailwindMerge<string>({\n extend: {\n classGroups: {\n ...utilityFamilies,\n 'bg-image': [{ bg: ['tf-blend', 'tf-blend-rise'] }],\n 'blend-base': [{ blend: color }],\n duration: [{ duration: durationSteps }],\n 'text-color': [{ text: ['tf-blend'] }],\n [zGroup]: [{ [zGroup]: zSteps }],\n },\n theme: { ...themeScales, color },\n },\n})\n\nconst cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs))\n\nexport { cn }\n"],"mappings":";;;;AAMA,MAAM,EAAE,OAAO,GAAG,gBAAgB;AAClC,MAAM,SAAS;AAEf,MAAM,UAAU,oBAA4B,EAC1C,QAAQ;CACN,aAAa;EACX,GAAG;EACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,eAAe,EAAE,CAAC;EAClD,cAAc,CAAC,EAAE,OAAO,MAAM,CAAC;EAC/B,UAAU,CAAC,EAAE,UAAU,cAAc,CAAC;EACtC,cAAc,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC;GACpC,SAAS,CAAC,GAAG,SAAS,OAAO,CAAC;CACjC;CACA,OAAO;EAAE,GAAG;EAAa;CAAM;AACjC,EACF,CAAC;AAED,MAAM,MAAM,GAAG,WAAiC,QAAQ,KAAK,MAAM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@techfides/ui-library-design",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "description": "Framework-agnostic design core for the TechFides UI library: Tailwind design tokens and component variant recipes",
5
5
  "keywords": [
6
6
  "cva",
@@ -55,8 +55,9 @@
55
55
  "node": ">=24"
56
56
  },
57
57
  "scripts": {
58
- "build": "tsdown",
58
+ "build": "node scripts/generate-cn.ts && tsdown",
59
59
  "dev": "tsdown --watch",
60
+ "generate": "node scripts/generate-cn.ts",
60
61
  "lint": "eslint . --max-warnings=0",
61
62
  "typecheck": "tsc --noEmit"
62
63
  },