@timmbr/ui 1.13.1 → 1.13.2
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/components/Checkbox/Checkbox.js +1 -1
- package/dist/components/Dialog/Dialog.js +1 -1
- package/dist/components/Drawer/Drawer.js +1 -1
- package/dist/components/FormField/FormField.js +1 -1
- package/dist/components/ImageUpload/ImageUpload.js +4 -4
- package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.js +3 -3
- package/dist/components/ImageUpload/subcomponents/ImageUploadModal.js +1 -1
- package/dist/components/Input/Input.js +3 -3
- package/dist/components/Radio/Radio.js +1 -1
- package/dist/components/Select/Select.js +2 -2
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Textarea/Textarea.js +2 -2
- package/dist/components/Toast/Toast.js +1 -1
- package/package.json +3 -3
|
@@ -83,7 +83,7 @@ const Checkbox = React.forwardRef(
|
|
|
83
83
|
children: label
|
|
84
84
|
}
|
|
85
85
|
),
|
|
86
|
-
description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted leading-normal mt-0.5", children: description })
|
|
86
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted-foreground leading-normal mt-0.5", children: description })
|
|
87
87
|
] })
|
|
88
88
|
] }),
|
|
89
89
|
errorMessage && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-destructive font-medium pl-7", children: errorMessage })
|
|
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef(({ className, children, motion, ...props
|
|
|
45
45
|
DialogPrimitive.Close,
|
|
46
46
|
{
|
|
47
47
|
"data-slot": "dialog-close",
|
|
48
|
-
className: "absolute right-3 top-3 z-20 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
|
|
48
|
+
className: "absolute right-3 top-3 z-20 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted-foreground hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
|
|
49
49
|
children: [
|
|
50
50
|
/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
|
|
51
51
|
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
@@ -53,7 +53,7 @@ const DrawerContent = React.forwardRef(({ className, children, side = "right", s
|
|
|
53
53
|
DialogPrimitive.Close,
|
|
54
54
|
{
|
|
55
55
|
"data-slot": "drawer-close",
|
|
56
|
-
className: "absolute right-3 top-3 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
|
|
56
|
+
className: "absolute right-3 top-3 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted-foreground hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
|
|
57
57
|
children: [
|
|
58
58
|
/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
|
|
59
59
|
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
@@ -40,7 +40,7 @@ const FormField = React.forwardRef(
|
|
|
40
40
|
id: `${id}-desc`,
|
|
41
41
|
className: cn(
|
|
42
42
|
"text-body-3 mt-1 flex items-center gap-1.5",
|
|
43
|
-
isError ? "text-destructive font-medium" : "text-muted"
|
|
43
|
+
isError ? "text-destructive font-medium" : "text-muted-foreground"
|
|
44
44
|
),
|
|
45
45
|
children: [
|
|
46
46
|
isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
|
|
@@ -203,13 +203,13 @@ const ImageUpload = React.forwardRef(
|
|
|
203
203
|
(label || maxFiles || minFiles) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 select-none", children: [
|
|
204
204
|
label && /* @__PURE__ */ jsxs("label", { className: "text-body-3 font-semibold text-foreground tracking-wide flex items-center gap-1.5", children: [
|
|
205
205
|
/* @__PURE__ */ jsx("span", { children: label }),
|
|
206
|
-
minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted font-normal", children: [
|
|
206
|
+
minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted-foreground font-normal", children: [
|
|
207
207
|
"(Min ",
|
|
208
208
|
minFiles,
|
|
209
209
|
")"
|
|
210
210
|
] })
|
|
211
211
|
] }),
|
|
212
|
-
multiple && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg font-medium text-muted", children: [
|
|
212
|
+
multiple && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg font-medium text-muted-foreground", children: [
|
|
213
213
|
items.length,
|
|
214
214
|
maxFiles ? ` / ${maxFiles}` : "",
|
|
215
215
|
" uploaded"
|
|
@@ -284,7 +284,7 @@ const ImageUpload = React.forwardRef(
|
|
|
284
284
|
onDragLeave: handleDragLeave,
|
|
285
285
|
onDrop: handleDrop
|
|
286
286
|
}
|
|
287
|
-
) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-body-3 text-muted", children: [
|
|
287
|
+
) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-body-3 text-muted-foreground", children: [
|
|
288
288
|
"Maximum upload limit reached (",
|
|
289
289
|
maxFiles,
|
|
290
290
|
"/",
|
|
@@ -335,7 +335,7 @@ const ImageUpload = React.forwardRef(
|
|
|
335
335
|
{
|
|
336
336
|
className: cn(
|
|
337
337
|
"text-body-3 mt-1 flex items-center gap-1.5 leading-normal",
|
|
338
|
-
isError ? "text-destructive font-medium" : minFilesWarning ? "text-warning dark:text-warning font-medium" : "text-muted"
|
|
338
|
+
isError ? "text-destructive font-medium" : minFilesWarning ? "text-warning dark:text-warning font-medium" : "text-muted-foreground"
|
|
339
339
|
),
|
|
340
340
|
children: [
|
|
341
341
|
(isError || minFilesWarning) && /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
|
|
@@ -73,7 +73,7 @@ const ImageUploadDropzone = ({
|
|
|
73
73
|
" ",
|
|
74
74
|
"or drag & drop"
|
|
75
75
|
] }),
|
|
76
|
-
/* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
|
|
76
|
+
/* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted-foreground", children: [
|
|
77
77
|
mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `Images & Videos (Max ${maxMb}MB each)` : `PNG, JPG, WEBP (Max ${maxMb}MB each)`,
|
|
78
78
|
maxFiles && ` • Up to ${maxFiles} items`
|
|
79
79
|
] })
|
|
@@ -82,7 +82,7 @@ const ImageUploadDropzone = ({
|
|
|
82
82
|
/* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-grey-50 dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
|
|
83
83
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
|
|
84
84
|
/* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-primary underline", children: "Upload" }),
|
|
85
|
-
/* @__PURE__ */ jsxs("span", { className: "text-caption text-muted", children: [
|
|
85
|
+
/* @__PURE__ */ jsxs("span", { className: "text-caption text-muted-foreground", children: [
|
|
86
86
|
"Max ",
|
|
87
87
|
maxMb,
|
|
88
88
|
"MB"
|
|
@@ -95,7 +95,7 @@ const ImageUploadDropzone = ({
|
|
|
95
95
|
/* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: "Click to upload" }),
|
|
96
96
|
" or drag and drop"
|
|
97
97
|
] }),
|
|
98
|
-
/* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
|
|
98
|
+
/* @__PURE__ */ jsx("span", { className: "text-caption-lg text-muted-foreground", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
|
|
99
99
|
] })
|
|
100
100
|
] })
|
|
101
101
|
}
|
|
@@ -58,7 +58,7 @@ const ImageUploadModal = ({
|
|
|
58
58
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
59
59
|
/* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
|
|
60
60
|
activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-success/10 text-success dark:text-success border border-success/20 text-caption font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
|
|
61
|
-
/* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted", children: [
|
|
61
|
+
/* @__PURE__ */ jsxs("span", { className: "text-caption-lg text-muted-foreground", children: [
|
|
62
62
|
"(",
|
|
63
63
|
activeIndex + 1,
|
|
64
64
|
" of ",
|
|
@@ -151,7 +151,7 @@ const Input = React.forwardRef(
|
|
|
151
151
|
type: "button",
|
|
152
152
|
tabIndex: -1,
|
|
153
153
|
onClick: handleClear,
|
|
154
|
-
className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
|
|
154
|
+
className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted-foreground hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
|
|
155
155
|
"aria-label": "Clear input",
|
|
156
156
|
children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
|
|
157
157
|
}
|
|
@@ -162,12 +162,12 @@ const Input = React.forwardRef(
|
|
|
162
162
|
type: "button",
|
|
163
163
|
tabIndex: -1,
|
|
164
164
|
onClick: () => setShowPassword((prev) => !prev),
|
|
165
|
-
className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
|
|
165
|
+
className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted-foreground hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
|
|
166
166
|
"aria-label": showPassword ? "Hide password" : "Show password",
|
|
167
167
|
children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" })
|
|
168
168
|
}
|
|
169
169
|
),
|
|
170
|
-
rightAdornment && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center ml-2 text-muted shrink-0", children: rightAdornment })
|
|
170
|
+
rightAdornment && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center ml-2 text-muted-foreground shrink-0", children: rightAdornment })
|
|
171
171
|
]
|
|
172
172
|
}
|
|
173
173
|
),
|
|
@@ -111,7 +111,7 @@ const RadioGroup = React.forwardRef(
|
|
|
111
111
|
{
|
|
112
112
|
className: cn(
|
|
113
113
|
"text-body-3 mt-1 flex items-center gap-1.5",
|
|
114
|
-
isError ? "text-destructive font-medium" : "text-muted"
|
|
114
|
+
isError ? "text-destructive font-medium" : "text-muted-foreground"
|
|
115
115
|
),
|
|
116
116
|
children: [
|
|
117
117
|
isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
|
|
@@ -79,7 +79,7 @@ const Select = React.forwardRef(
|
|
|
79
79
|
),
|
|
80
80
|
children: [
|
|
81
81
|
/* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
|
|
82
|
-
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted opacity-60 transition-transform duration-200" }) })
|
|
82
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground opacity-60 transition-transform duration-200" }) })
|
|
83
83
|
]
|
|
84
84
|
}
|
|
85
85
|
),
|
|
@@ -115,7 +115,7 @@ const Select = React.forwardRef(
|
|
|
115
115
|
{
|
|
116
116
|
className: cn(
|
|
117
117
|
"text-body-3 mt-1 flex items-center gap-1.5",
|
|
118
|
-
isError ? "text-destructive font-medium" : "text-muted"
|
|
118
|
+
isError ? "text-destructive font-medium" : "text-muted-foreground"
|
|
119
119
|
),
|
|
120
120
|
children: [
|
|
121
121
|
isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
|
|
@@ -74,7 +74,7 @@ const Switch = React.forwardRef(
|
|
|
74
74
|
children: label
|
|
75
75
|
}
|
|
76
76
|
),
|
|
77
|
-
description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted leading-normal mt-0.5", children: description })
|
|
77
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted-foreground leading-normal mt-0.5", children: description })
|
|
78
78
|
] }),
|
|
79
79
|
/* @__PURE__ */ jsx("div", { className: "shrink-0 pt-0.5", children: switchElement })
|
|
80
80
|
]
|
|
@@ -146,7 +146,7 @@ const Textarea = React.forwardRef(
|
|
|
146
146
|
id: `${id}-desc`,
|
|
147
147
|
className: cn(
|
|
148
148
|
"text-body-3 mt-1 flex items-center gap-1.5 flex-1",
|
|
149
|
-
isError ? "text-destructive font-medium" : "text-muted"
|
|
149
|
+
isError ? "text-destructive font-medium" : "text-muted-foreground"
|
|
150
150
|
),
|
|
151
151
|
children: [
|
|
152
152
|
isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
|
|
@@ -154,7 +154,7 @@ const Textarea = React.forwardRef(
|
|
|
154
154
|
]
|
|
155
155
|
}
|
|
156
156
|
) : /* @__PURE__ */ jsx("span", {}),
|
|
157
|
-
showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg tabular-nums text-muted shrink-0 select-none", children: [
|
|
157
|
+
showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-caption-lg tabular-nums text-muted-foreground shrink-0 select-none", children: [
|
|
158
158
|
currentValue.length,
|
|
159
159
|
"/",
|
|
160
160
|
maxLength
|
|
@@ -90,7 +90,7 @@ const ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
90
90
|
ref,
|
|
91
91
|
"data-slot": "toast-close",
|
|
92
92
|
className: cn(
|
|
93
|
-
"absolute right-1 top-1 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer",
|
|
93
|
+
"absolute right-1 top-1 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted-foreground hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer",
|
|
94
94
|
className
|
|
95
95
|
),
|
|
96
96
|
"toast-close": "",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@timmbr/ui",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.2",
|
|
4
4
|
"description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"class-variance-authority": "^0.7.1",
|
|
44
44
|
"input-otp": "^1.5.0",
|
|
45
45
|
"@timmbr/hooks": "1.2.0",
|
|
46
|
-
"@timmbr/theme": "1.3.0",
|
|
47
|
-
"@timmbr/motion": "1.2.5",
|
|
48
46
|
"@timmbr/icons": "1.6.0",
|
|
47
|
+
"@timmbr/motion": "1.2.5",
|
|
48
|
+
"@timmbr/theme": "1.3.0",
|
|
49
49
|
"@timmbr/utils": "1.6.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|