torch-glare 1.1.1 → 1.1.3
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.
|
@@ -32,8 +32,8 @@ export const Datepicker = ({ theme = "dark", onChange, className, dateFormat, cu
|
|
|
32
32
|
<div className={cn("w-full", className)} data-theme={theme} >
|
|
33
33
|
<DatePicker
|
|
34
34
|
{...props}
|
|
35
|
-
dateFormat={dateFormat}
|
|
36
35
|
customInput={customInput}
|
|
36
|
+
dateFormat={dateFormat || "MMMM d, yyyy"}
|
|
37
37
|
onChange={(date: any) => {
|
|
38
38
|
setStartDate(date)
|
|
39
39
|
onChange && onChange(date)
|
|
@@ -94,6 +94,55 @@ export const Datepicker = ({ theme = "dark", onChange, className, dateFormat, cu
|
|
|
94
94
|
stroke:var(--background-system-body-base) !important;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
.react-datepicker__time-container{
|
|
98
|
+
background-color: var(--background-system-body-base) !important;
|
|
99
|
+
border-left: 1px solid var(--border-system-global-secondary) !important;
|
|
100
|
+
width: 189px !important;
|
|
101
|
+
border-radius: 0px 8px 8px 0px;
|
|
102
|
+
overflow: hidden !important;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.react-datepicker-time__header{
|
|
106
|
+
display:none !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.react-datepicker__time-box{
|
|
110
|
+
width: 189px !important;
|
|
111
|
+
padding: 20px 0 !important;
|
|
112
|
+
background-color: var(--background-system-body-base) !important;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
.react-datepicker__time-list{
|
|
117
|
+
background-color: var(--background-system-body-base) !important;
|
|
118
|
+
scrollbar-width: none !important; /* Firefox */
|
|
119
|
+
-ms-overflow-style: none !important; /* IE and Edge */
|
|
120
|
+
mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%) !important;
|
|
121
|
+
padding: 7px 0 !important;
|
|
122
|
+
}
|
|
123
|
+
.react-datepicker__time-list::-webkit-scrollbar {
|
|
124
|
+
display: none !important; /* Chrome, Safari and Opera */
|
|
125
|
+
}
|
|
126
|
+
.react-datepicker__time-list-item {
|
|
127
|
+
color:var(--content-system-global-primary) !important;
|
|
128
|
+
border-radius: 6px !important;
|
|
129
|
+
display:flex !important;
|
|
130
|
+
justify-content:center !important;
|
|
131
|
+
align-items:center !important;
|
|
132
|
+
font-size: 18px !important;
|
|
133
|
+
font-style: normal;
|
|
134
|
+
font-weight: 590 !important;
|
|
135
|
+
line-height: 120% !important; /* 26.4px */
|
|
136
|
+
letter-spacing: -0.22px !important;
|
|
137
|
+
margin: 0 8px !important;
|
|
138
|
+
}
|
|
139
|
+
.react-datepicker__time-list-item:hover {
|
|
140
|
+
background-color:var(--background-system-action-secondary-hover) !important;
|
|
141
|
+
border: 1px solid var(--border-system-action-primary-hover) !important;
|
|
142
|
+
}
|
|
143
|
+
.react-datepicker__time-list-item--selected {
|
|
144
|
+
background-color:var(--background-system-body-tertiary) !important;
|
|
145
|
+
}
|
|
97
146
|
`}
|
|
98
147
|
</style>
|
|
99
148
|
</div>
|
|
@@ -273,10 +322,10 @@ export const MenuItemStyles = cva(
|
|
|
273
322
|
"hover:!bg-background-system-action-secondary-hover",
|
|
274
323
|
"hover:!text-content-system-action-primary-hover",
|
|
275
324
|
"hover:!border-border-system-action-primary-hover",
|
|
276
|
-
"focus:bg-background-
|
|
325
|
+
"focus:bg-background-system-action-primary-hover",
|
|
277
326
|
"focus:border-transparent",
|
|
278
327
|
"active:border-transparent",
|
|
279
|
-
"active:bg-background-
|
|
328
|
+
"active:bg-background-system-action-primary-hover",
|
|
280
329
|
"disabled:bg-background-system-body-secondary",
|
|
281
330
|
"disabled:text-content-system-global-disabled",
|
|
282
331
|
],
|
|
@@ -83,7 +83,7 @@ export const InnerLabelField = forwardRef<HTMLInputElement, Props>(
|
|
|
83
83
|
}
|
|
84
84
|
);
|
|
85
85
|
|
|
86
|
-
InnerLabelField.displayName = "
|
|
86
|
+
InnerLabelField.displayName = "InnerLabelField"
|
|
87
87
|
|
|
88
88
|
|
|
89
89
|
|
|
@@ -136,7 +136,7 @@ const Label = ({
|
|
|
136
136
|
className={cn(
|
|
137
137
|
"w-[1px]",
|
|
138
138
|
"h-[12px]",
|
|
139
|
-
"bg-border-presentation-action-
|
|
139
|
+
"bg-border-presentation-action-labelless-divider ",
|
|
140
140
|
"transition-all",
|
|
141
141
|
"duration-300",
|
|
142
142
|
"ease-in-out",
|
package/lib/components/Input.tsx
CHANGED
|
@@ -70,13 +70,33 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
|
|
|
70
70
|
|
|
71
71
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
72
72
|
({ className, ...props }, ref) => {
|
|
73
|
+
const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
|
|
74
|
+
// Force scroll to the end
|
|
75
|
+
const input = e.target;
|
|
76
|
+
input.scrollLeft = input.scrollWidth;
|
|
77
|
+
// Call the original onFocus if it exists
|
|
78
|
+
if (props.onFocus) {
|
|
79
|
+
props.onFocus(e);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
|
|
84
|
+
// Force scroll to the end
|
|
85
|
+
const input = e.target as HTMLInputElement;
|
|
86
|
+
input.scrollLeft = input.scrollWidth;
|
|
87
|
+
// Call the original onClick if it exists
|
|
88
|
+
if (props.onClick) {
|
|
89
|
+
props.onClick(e);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
|
|
73
93
|
return (
|
|
74
94
|
<input
|
|
75
95
|
{...props}
|
|
76
96
|
autoComplete="off"
|
|
77
97
|
className={cn(
|
|
78
98
|
// Base styles
|
|
79
|
-
"typography-body-large-regular",
|
|
99
|
+
"typography-body-large-regular focus:pe-[30px]",
|
|
80
100
|
"text-content-presentation-action-light-primary",
|
|
81
101
|
"bg-transparent",
|
|
82
102
|
"h-full",
|
|
@@ -85,11 +105,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
85
105
|
"min-w-[30px]",
|
|
86
106
|
"outline-none",
|
|
87
107
|
"transition-all duration-200 ease-in-out",
|
|
108
|
+
// Remove mask image completely when focused
|
|
88
109
|
"[mask-image:linear-gradient(to_right,black_0%,black_0%,black_85%,transparent_100%)]",
|
|
110
|
+
"focus:[mask-image:none]",
|
|
89
111
|
"rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_85%,transparent_100%)]",
|
|
112
|
+
"focus:rtl:[mask-image:none]",
|
|
90
113
|
"hover:placeholder:text-content-presentation-action-light-primary",
|
|
91
114
|
className
|
|
92
115
|
)}
|
|
116
|
+
onFocus={handleFocus}
|
|
117
|
+
onClick={handleClick}
|
|
93
118
|
ref={ref}
|
|
94
119
|
/>
|
|
95
120
|
);
|
package/lib/components/Radio.tsx
CHANGED
|
@@ -32,8 +32,8 @@ const Radio = React.forwardRef<
|
|
|
32
32
|
)}
|
|
33
33
|
{...props}
|
|
34
34
|
>
|
|
35
|
-
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
|
36
|
-
<i className="ri-record-circle-fill text-background-presentation-state-information-primary leading-none"></i>
|
|
35
|
+
<RadioGroupPrimitive.Indicator className="bg-white rounded-full flex items-center justify-center shrink-0">
|
|
36
|
+
<i className="ri-record-circle-fill text-background-presentation-state-information-primary leading-none shrink-0"></i>
|
|
37
37
|
</RadioGroupPrimitive.Indicator>
|
|
38
38
|
</RadioGroupPrimitive.Item>
|
|
39
39
|
)
|
|
@@ -45,7 +45,7 @@ export { RadioGroup, Radio }
|
|
|
45
45
|
|
|
46
46
|
const glareRadioStyles = cva(
|
|
47
47
|
[
|
|
48
|
-
"rounded-full shadow focus:outline-none flex items-center justify-center",
|
|
48
|
+
"rounded-full shadow focus:outline-none flex items-center justify-center shrink-0",
|
|
49
49
|
"border border-border-presentation-action-checkbox-primary",
|
|
50
50
|
"bg-background-presentation-action-borderstyle",
|
|
51
51
|
"transition-[background,border-color,background-color] duration-200",
|
|
@@ -58,8 +58,8 @@ const glareRadioStyles = cva(
|
|
|
58
58
|
{
|
|
59
59
|
variants: {
|
|
60
60
|
size: {
|
|
61
|
-
S: ["w-[12px]", "h-[12px] [&_i]:text-[
|
|
62
|
-
M: ["w-[24px]", "h-[24px] [&_i]:text-[
|
|
61
|
+
S: ["w-[12px]", "h-[12px] [&_i]:text-[10px] [&_i]:scale-[1.5]"],
|
|
62
|
+
M: ["w-[24px]", "h-[24px] [&_i]:text-[20px] [&_i]:scale-[1.47]"],
|
|
63
63
|
},
|
|
64
64
|
}
|
|
65
65
|
}
|