@lets-events/react 7.2.0 → 7.2.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.
@@ -57,6 +57,32 @@ export const TimerPickerContentStyled = styled("div", {
57
57
  },
58
58
  });
59
59
 
60
+ export const InputStyled = styled("input", {
61
+ height: "$40",
62
+ fontFamily: "$default",
63
+ borderRadius: "$sm",
64
+ boxSizing: "border-box",
65
+ color: "$dark500",
66
+ border: "1px solid $dark300",
67
+ position: "relative",
68
+ display: "flex",
69
+ width: "100%",
70
+ alignItems: "center",
71
+ padding: "0",
72
+ outline: "none",
73
+ margin: 0,
74
+ textAlign: "center",
75
+ "&:has(input:focus)": {
76
+ border: "2px solid $brand300",
77
+ },
78
+ "&:has(input:disabled)": {
79
+ backgroundColor: "$dark100",
80
+ color: "$dark400",
81
+ border: "1px solid $dark200",
82
+ cursor: "not-allowed",
83
+ },
84
+ });
85
+
60
86
  export type TimePickerProps = {
61
87
  selected: string | undefined;
62
88
  setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -141,6 +167,7 @@ export function TimePicker({
141
167
  }}
142
168
  >
143
169
  <Button
170
+ type="button"
144
171
  variant="text"
145
172
  onClick={() => handleIncrement(unit as "hours" | "minutes")}
146
173
  >
@@ -161,16 +188,14 @@ export function TimePicker({
161
188
  />
162
189
  </svg>
163
190
  </Button>
164
- <TextField
191
+ <InputStyled
165
192
  value={unit === "hours" ? hours : minutes}
166
193
  onChange={(e) => handleInputValue(e.target.value)}
167
194
  type="text"
168
195
  placeholder="00"
169
- typography="labelSmall"
170
- fontWeight="regular"
171
- textAlign="center"
172
196
  />
173
197
  <Button
198
+ type="button"
174
199
  variant="text"
175
200
  onClick={() => handleDecrement(unit as "hours" | "minutes")}
176
201
  >
@@ -197,6 +222,7 @@ export function TimePicker({
197
222
  </TimerPickerContentStyled>
198
223
  <TimePickerFooterStyled>
199
224
  <Button
225
+ type="button"
200
226
  variant="text"
201
227
  color="brand"
202
228
  onClick={() => handleInputValue(`${hours}:${minutes}`)}
package/src/index.tsx CHANGED
@@ -20,6 +20,7 @@ export * from './components/TimePicker'
20
20
  export * from './components/Alert'
21
21
  export * from './components/Switch'
22
22
  export * from './components/Step'
23
+ export * from './components/Card'
23
24
  export * from './components/TextareaField'
24
25
 
25
26
  // Layouts