@yakad/ui 1.3.168 → 1.3.169
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.
|
@@ -8,7 +8,7 @@ declare const inputFieldVariants: (props?: ({
|
|
|
8
8
|
export interface InputFieldProps extends Omit<React.ComponentProps<typeof Input>, "size">, VariantProps<typeof inputFieldVariants> {
|
|
9
9
|
ref?: React.Ref<HTMLInputElement>;
|
|
10
10
|
}
|
|
11
|
-
export declare function InputField({ variant, boxSize, placeholder, className, ref, ...restProps }: InputFieldProps): React.JSX.Element;
|
|
11
|
+
export declare function InputField({ variant, boxSize, placeholder, className, id, ref, ...restProps }: InputFieldProps): React.JSX.Element;
|
|
12
12
|
export declare namespace InputField {
|
|
13
13
|
var displayName: string;
|
|
14
14
|
}
|
|
@@ -10,14 +10,35 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import * as React from "react";
|
|
13
14
|
import { cva } from "class-variance-authority";
|
|
14
15
|
import { cn } from "./cn";
|
|
15
16
|
import { Input } from "./input";
|
|
16
|
-
const inputFieldVariants = cva(
|
|
17
|
+
const inputFieldVariants = cva([
|
|
18
|
+
"peer",
|
|
19
|
+
"w-full",
|
|
20
|
+
"transition-colors",
|
|
21
|
+
"placeholder:text-transparent",
|
|
22
|
+
"focus-visible:ring-offset-0",
|
|
23
|
+
], {
|
|
17
24
|
variants: {
|
|
18
25
|
variant: {
|
|
19
|
-
outlined:
|
|
20
|
-
|
|
26
|
+
outlined: [
|
|
27
|
+
"border",
|
|
28
|
+
"border-input",
|
|
29
|
+
"bg-transparent",
|
|
30
|
+
"focus-visible:ring-1",
|
|
31
|
+
"focus-visible:ring-ring",
|
|
32
|
+
],
|
|
33
|
+
filled: [
|
|
34
|
+
"rounded-b-none",
|
|
35
|
+
"border-0",
|
|
36
|
+
"border-b-2",
|
|
37
|
+
"border-input",
|
|
38
|
+
"bg-muted",
|
|
39
|
+
"focus-visible:ring-0",
|
|
40
|
+
"focus-visible:border-primary",
|
|
41
|
+
],
|
|
21
42
|
},
|
|
22
43
|
boxSize: {
|
|
23
44
|
small: "h-8 px-2 text-sm",
|
|
@@ -29,9 +50,15 @@ const inputFieldVariants = cva("peer w-full transition-colors placeholder:text-t
|
|
|
29
50
|
boxSize: "normal",
|
|
30
51
|
},
|
|
31
52
|
});
|
|
32
|
-
const labelVariants = cva(
|
|
33
|
-
"
|
|
34
|
-
"
|
|
53
|
+
const labelVariants = cva([
|
|
54
|
+
"pointer-events-none",
|
|
55
|
+
"absolute",
|
|
56
|
+
"left-3",
|
|
57
|
+
"top-1/2",
|
|
58
|
+
"-translate-y-1/2",
|
|
59
|
+
"text-muted-foreground",
|
|
60
|
+
"transition-all",
|
|
61
|
+
], {
|
|
35
62
|
variants: {
|
|
36
63
|
boxSize: {
|
|
37
64
|
small: "text-sm",
|
|
@@ -43,8 +70,13 @@ const labelVariants = cva("pointer-events-none absolute left-3 top-1/2 -translat
|
|
|
43
70
|
},
|
|
44
71
|
});
|
|
45
72
|
export function InputField(_a) {
|
|
46
|
-
var { variant = "outlined", boxSize = "normal", placeholder, className, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className", "ref"]);
|
|
47
|
-
|
|
73
|
+
var { variant = "outlined", boxSize = "normal", placeholder, className, id, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className", "id", "ref"]);
|
|
74
|
+
const generatedId = React.useId();
|
|
75
|
+
const inputId = id !== null && id !== void 0 ? id : generatedId;
|
|
76
|
+
return (_jsxs("div", { className: "relative w-full", children: [_jsx(Input, Object.assign({ id: inputId, ref: ref, placeholder: " ", className: cn(inputFieldVariants({
|
|
77
|
+
variant,
|
|
78
|
+
boxSize,
|
|
79
|
+
}), className) }, restProps)), placeholder && (_jsx("label", { htmlFor: inputId, className: cn(labelVariants({ boxSize }), "peer-focus:top-0", "peer-focus:-translate-y-1/2", "peer-focus:bg-background", "peer-focus:px-1", "peer-focus:text-xs", "peer-focus:text-primary", "peer-[:not(:placeholder-shown)]:top-0", "peer-[:not(:placeholder-shown)]:-translate-y-1/2", "peer-[:not(:placeholder-shown)]:bg-background", "peer-[:not(:placeholder-shown)]:px-1", "peer-[:not(:placeholder-shown)]:text-xs"), children: placeholder }))] }));
|
|
48
80
|
}
|
|
49
81
|
InputField.displayName = "InputField";
|
|
50
82
|
export { inputFieldVariants };
|
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
.theme {
|
|
2
|
-
width: 100%;
|
|
3
|
-
font-family: sans-serif;
|
|
4
|
-
font-size: 1.6rem;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
1
|
.blue {
|
|
8
2
|
--LightPrimaryColor: 11 87 208;
|
|
9
3
|
--LightPrimaryContainerColor: 211 227 253;
|
|
@@ -64,6 +58,7 @@
|
|
|
64
58
|
--DarkOutlineColor: 147 143 153;
|
|
65
59
|
--DarkOutlineVariantColor: 68 71 70;
|
|
66
60
|
}
|
|
61
|
+
|
|
67
62
|
.green {
|
|
68
63
|
--LightPrimaryColor: 56 106 32;
|
|
69
64
|
--LightPrimaryContainerColor: 184 243 151;
|
|
@@ -243,6 +238,7 @@
|
|
|
243
238
|
--DarkOutlineColor: 147 143 153;
|
|
244
239
|
--DarkOutlineVariantColor: 68 71 70;
|
|
245
240
|
}
|
|
241
|
+
|
|
246
242
|
.purple {
|
|
247
243
|
--LightPrimaryColor: 103 80 164;
|
|
248
244
|
--LightPrimaryContainerColor: 234 221 255;
|
|
@@ -338,6 +334,7 @@
|
|
|
338
334
|
--outlineColor: var(--LightOutlineColor);
|
|
339
335
|
--outlineVariantColor: var(--LightOutlineVariantColor);
|
|
340
336
|
}
|
|
337
|
+
|
|
341
338
|
.dark {
|
|
342
339
|
--primaryColor: var(--DarkPrimaryColor);
|
|
343
340
|
--primaryContainerColor: var(--DarkPrimaryContainerColor);
|
|
@@ -367,6 +364,7 @@
|
|
|
367
364
|
--outlineColor: var(--DarkOutlineColor);
|
|
368
365
|
--outlineVariantColor: var(--DarkOutlineVariantColor);
|
|
369
366
|
}
|
|
367
|
+
|
|
370
368
|
@media (prefers-color-scheme: dark) {
|
|
371
369
|
.system {
|
|
372
370
|
--primaryColor: var(--DarkPrimaryColor);
|
|
@@ -397,4 +395,4 @@
|
|
|
397
395
|
--outlineColor: var(--DarkOutlineColor);
|
|
398
396
|
--outlineVariantColor: var(--DarkOutlineVariantColor);
|
|
399
397
|
}
|
|
400
|
-
}
|
|
398
|
+
}
|