@deepnoid/ui 0.1.1 → 0.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.
@@ -0,0 +1,292 @@
1
+ "use client";
2
+ import {
3
+ Icon_default
4
+ } from "./chunk-24NQEB73.mjs";
5
+ import {
6
+ tv
7
+ } from "./chunk-2ZT6V4QR.mjs";
8
+ import {
9
+ clsx
10
+ } from "./chunk-27Y6K5NK.mjs";
11
+ import {
12
+ mapPropsVariants
13
+ } from "./chunk-E3G5QXSH.mjs";
14
+
15
+ // src/components/input/input.tsx
16
+ import React, { forwardRef, useRef, useCallback, useMemo } from "react";
17
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
18
+ var Input = forwardRef((originalProps, ref) => {
19
+ const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
20
+ const { classNames, label, helperText, errorText, startContent, endContent, ...inputProps } = props;
21
+ const inputRef = useRef(null);
22
+ const slots = useMemo(() => inputStyle({ ...variantProps }), [variantProps]);
23
+ const getContentProps = useCallback(
24
+ () => ({
25
+ className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
26
+ size: originalProps.size
27
+ }),
28
+ [slots, classNames, originalProps.size]
29
+ );
30
+ const renderStartContent = () => {
31
+ if (React.isValidElement(startContent)) {
32
+ const existingProps = startContent.props;
33
+ const mergedProps = {
34
+ ...getContentProps(),
35
+ className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
36
+ };
37
+ return React.cloneElement(startContent, mergedProps);
38
+ } else {
39
+ const contentProps = getContentProps();
40
+ return /* @__PURE__ */ jsx("div", { ...contentProps, children: startContent });
41
+ }
42
+ };
43
+ const renderDateTimePickerIcon = () => /* @__PURE__ */ jsx(
44
+ "div",
45
+ {
46
+ ...getContentProps(),
47
+ onClick: () => {
48
+ const target = ref && "current" in ref ? ref.current : inputRef.current;
49
+ target == null ? void 0 : target.focus();
50
+ target == null ? void 0 : target.showPicker();
51
+ },
52
+ children: /* @__PURE__ */ jsx(Icon_default, { name: props.type === "time" ? "clock" : "calendar", size: originalProps.size, className: "cursor-pointer" })
53
+ }
54
+ );
55
+ const renderContentWithIcon = () => {
56
+ if (React.isValidElement(endContent)) {
57
+ const existingProps = endContent.props;
58
+ const mergedProps = {
59
+ ...getContentProps(),
60
+ className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
61
+ };
62
+ return React.cloneElement(endContent, mergedProps);
63
+ } else if (errorText) {
64
+ const iconProps = { ...getContentProps(), className: getContentProps().className };
65
+ return /* @__PURE__ */ jsx("div", { ...iconProps, children: /* @__PURE__ */ jsx(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
66
+ } else {
67
+ return /* @__PURE__ */ jsx(Fragment, {});
68
+ }
69
+ };
70
+ const renderEndContent = () => {
71
+ switch (props.type) {
72
+ case "date":
73
+ case "datetime-local":
74
+ case "month":
75
+ case "week":
76
+ case "time":
77
+ return renderDateTimePickerIcon();
78
+ default:
79
+ return renderContentWithIcon();
80
+ }
81
+ };
82
+ return /* @__PURE__ */ jsxs(
83
+ "div",
84
+ {
85
+ className: clsx(
86
+ slots.base({ class: classNames == null ? void 0 : classNames.base }),
87
+ variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
88
+ ),
89
+ children: [
90
+ label && /* @__PURE__ */ jsx("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
91
+ /* @__PURE__ */ jsxs("div", { className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper }), children: [
92
+ /* @__PURE__ */ jsxs(
93
+ "div",
94
+ {
95
+ className: clsx(
96
+ slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
97
+ inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
98
+ ),
99
+ children: [
100
+ startContent && renderStartContent(),
101
+ /* @__PURE__ */ jsx("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
102
+ renderEndContent()
103
+ ]
104
+ }
105
+ ),
106
+ helperText && !errorText && /* @__PURE__ */ jsx("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
107
+ errorText && /* @__PURE__ */ jsx("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
108
+ ] })
109
+ ]
110
+ }
111
+ );
112
+ });
113
+ Input.displayName = "Input";
114
+ var input_default = Input;
115
+ var inputStyle = tv(
116
+ {
117
+ slots: {
118
+ base: ["group/input", "flex"],
119
+ vertical: ["flex-col"],
120
+ horizon: ["flex-row", "gap-0"],
121
+ label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
122
+ innerWrapper: ["flex", "flex-col"],
123
+ inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
124
+ input: [
125
+ "w-full",
126
+ "h-full",
127
+ "bg-transparent",
128
+ "text-neutral-main",
129
+ "placeholder:text-neutral-main",
130
+ "outline-none",
131
+ "focus:ring-0",
132
+ "group-has-[:hover]/input:text-neutral-dark",
133
+ "group-has-[:hover]/input:placeholder:text-neutral-dark",
134
+ "group-has-[:focus]/input:text-neutral-dark",
135
+ "group-has-[:focus]/input:placeholder:text-neutral-dark",
136
+ "group-has-[p.error]/input:text-danger-main",
137
+ "group-has-[p.error]/input:placeholder:text-danger-main"
138
+ ],
139
+ content: [
140
+ "flex",
141
+ "items-center",
142
+ "select-none",
143
+ "text-neutral-main",
144
+ "group-has-[:hover]/input:text-neutral-dark",
145
+ "group-has-[p.error]/input:text-danger-main"
146
+ ],
147
+ helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
148
+ errorText: ["text-danger-main"],
149
+ readonly: ["pointer-events-none"]
150
+ },
151
+ variants: {
152
+ variant: {
153
+ solid: {
154
+ inputWrapper: ["border-transparent", "bg-trans-soft"],
155
+ readonly: ["!bg-trans-light"]
156
+ },
157
+ outline: {
158
+ inputWrapper: [
159
+ "border-neutral-light",
160
+ "group-has-[:hover]/input:bg-trans-soft",
161
+ "group-has-[:focus]/input:bg-body-background",
162
+ "group-has-[p.error]/input:border-danger-main"
163
+ ],
164
+ readonly: ["!bg-trans-soft"]
165
+ },
166
+ underline: {
167
+ inputWrapper: [
168
+ "bg-transparent",
169
+ "rounded-none",
170
+ "!border-t-transparent",
171
+ "!border-l-transparent",
172
+ "!border-r-transparent",
173
+ "group-has-[:hover]/input:bg-trans-soft",
174
+ "group-has-[:focus]/input:bg-body-background",
175
+ "group-has-[p.error]/input:border-danger-main"
176
+ ],
177
+ readonly: ["!bg-trans-soft"]
178
+ }
179
+ },
180
+ color: {
181
+ primary: {
182
+ content: [
183
+ "group-has-[:focus]/input:text-primary-main",
184
+ "group-has-[:focus:hover]/input:text-primary-main",
185
+ "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
186
+ ],
187
+ helperText: [
188
+ "group-has-[:focus]/input:text-primary-main",
189
+ "group-has-[:focus:hover]/input:text-primary-main",
190
+ "group-has-[:focus]/input:hover:text-primary-main"
191
+ ]
192
+ },
193
+ secondary: {
194
+ content: [
195
+ "group-has-[:focus]/input:text-secondary-main",
196
+ "group-has-[:focus:hover]/input:text-secondary-main",
197
+ "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
198
+ ],
199
+ helperText: [
200
+ "group-has-[:focus]/input:text-secondary-main",
201
+ "group-has-[:focus:hover]/input:text-secondary-main",
202
+ "group-has-[:focus]/input:hover:text-secondary-main"
203
+ ]
204
+ }
205
+ },
206
+ size: {
207
+ sm: {
208
+ base: ["text-sm", "gap-[4px]"],
209
+ label: ["text-sm"],
210
+ innerWrapper: ["gap-[4px]"],
211
+ inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "gap-[4px]", "border-sm"],
212
+ helperText: ["text-sm"],
213
+ errorText: ["text-sm"]
214
+ },
215
+ md: {
216
+ base: ["text-md", "gap-[6px]"],
217
+ label: ["text-md"],
218
+ innerWrapper: ["gap-[6px]"],
219
+ inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "gap-[6px]", "border-md"],
220
+ helperText: ["text-sm"],
221
+ errorText: ["text-sm"]
222
+ },
223
+ lg: {
224
+ base: ["text-lg", "gap-[8px]"],
225
+ label: ["text-lg"],
226
+ innerWrapper: ["gap-[8px]"],
227
+ inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "gap-[8px]", "border-lg"],
228
+ helperText: ["text-md"],
229
+ errorText: ["text-md"]
230
+ },
231
+ xl: {
232
+ base: ["text-xl", "gap-[10px]"],
233
+ label: ["text-xl"],
234
+ innerWrapper: ["gap-[10px]"],
235
+ inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "gap-[10px]", "border-xl"],
236
+ helperText: ["text-md"],
237
+ errorText: ["text-md"]
238
+ }
239
+ },
240
+ direction: {
241
+ vertical: "",
242
+ horizon: ""
243
+ },
244
+ full: {
245
+ true: {
246
+ base: ["w-full"],
247
+ innerWrapper: ["flex-1"],
248
+ inputWrapper: ["w-full"]
249
+ }
250
+ },
251
+ disabled: {
252
+ true: {
253
+ inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
254
+ input: [
255
+ "text-neutral-light",
256
+ "placeholder:text-neutral-light",
257
+ "group-has-[p.error]/input:text-danger-light",
258
+ "group-has-[p.error]/input:placeholder:text-danger-light"
259
+ ],
260
+ content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
261
+ helperText: ["!text-neutral-light"],
262
+ errorText: ["!text-danger-light"]
263
+ }
264
+ }
265
+ },
266
+ compoundVariants: [
267
+ {
268
+ disabled: true,
269
+ variant: ["outline", "underline"],
270
+ class: {
271
+ inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
272
+ }
273
+ }
274
+ ],
275
+ defaultVariants: {
276
+ variant: "solid",
277
+ color: "primary",
278
+ size: "md",
279
+ direction: "vertical",
280
+ disabled: false,
281
+ readonly: false
282
+ }
283
+ },
284
+ {
285
+ twMerge: false
286
+ }
287
+ );
288
+
289
+ export {
290
+ input_default,
291
+ inputStyle
292
+ };
@@ -7,7 +7,7 @@ import {
7
7
  } from "./chunk-OQS4LGZK.mjs";
8
8
  import {
9
9
  pagination_default
10
- } from "./chunk-DUOYMLZL.mjs";
10
+ } from "./chunk-X7FHRV4S.mjs";
11
11
  import {
12
12
  mapPropsVariants
13
13
  } from "./chunk-E3G5QXSH.mjs";
@@ -1,10 +1,10 @@
1
1
  "use client";
2
- import {
3
- input_default
4
- } from "./chunk-RT5NKQX4.mjs";
5
2
  import {
6
3
  usePagination_default
7
4
  } from "./chunk-F3HENRVM.mjs";
5
+ import {
6
+ input_default
7
+ } from "./chunk-B6CXZCXQ.mjs";
8
8
  import {
9
9
  Icon_default
10
10
  } from "./chunk-24NQEB73.mjs";
@@ -4129,7 +4129,7 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
4129
4129
  {
4130
4130
  className: clsx(
4131
4131
  slots.base({ class: classNames == null ? void 0 : classNames.base }),
4132
- variantProps.direction === "vertical" ? slots.vertical({ class: classNames == null ? void 0 : classNames.vertical }) : slots.horizon({ class: classNames == null ? void 0 : classNames.horizon })
4132
+ variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
4133
4133
  ),
4134
4134
  children: [
4135
4135
  label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
@@ -4157,172 +4157,179 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
4157
4157
  });
4158
4158
  Input.displayName = "Input";
4159
4159
  var input_default = Input;
4160
- var inputStyle = tv({
4161
- slots: {
4162
- base: ["group/input", "flex"],
4163
- vertical: ["flex-col"],
4164
- horizon: ["flex-row", "gap-0"],
4165
- label: ["flex", "items-center", "font-bold", "text-body-foreground", "w-[80px]"],
4166
- innerWrapper: ["flex", "flex-col"],
4167
- inputWrapper: ["flex", "items-center", "transition", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
4168
- input: [
4169
- "w-full",
4170
- "h-full",
4171
- "bg-transparent",
4172
- "text-neutral-main",
4173
- "placeholder:text-neutral-main",
4174
- "focus:outline-none",
4175
- "focus:ring-0",
4176
- "group-has-[:hover]/input:text-neutral-dark",
4177
- "group-has-[:hover]/input:placeholder:text-neutral-dark",
4178
- "group-has-[:focus]/input:text-neutral-dark",
4179
- "group-has-[:focus]/input:placeholder:text-neutral-dark",
4180
- "group-has-[p.error]/input:text-danger-main",
4181
- "group-has-[p.error]/input:placeholder:text-danger-main"
4182
- ],
4183
- content: [
4184
- "flex",
4185
- "items-center",
4186
- "select-none",
4187
- "text-neutral-main",
4188
- "group-has-[:hover]/input:text-neutral-dark",
4189
- "group-has-[p.error]/input:text-danger-main"
4190
- ],
4191
- helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
4192
- errorText: ["text-danger-main"],
4193
- readonly: ["pointer-events-none"]
4194
- },
4195
- variants: {
4196
- variant: {
4197
- solid: {
4198
- inputWrapper: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
4199
- readonly: ["!bg-trans-light"]
4200
- },
4201
- outline: {
4202
- inputWrapper: [
4203
- "border-neutral-light",
4204
- "group-has-[:hover]/input:bg-trans-soft",
4205
- "group-has-[:focus]/input:bg-body-background",
4206
- "group-has-[p.error]/input:border-danger-main"
4207
- ],
4208
- readonly: ["!bg-trans-soft"]
4209
- },
4210
- underline: {
4211
- inputWrapper: [
4212
- "bg-transparent",
4213
- "!rounded-none",
4214
- "!border-t-transparent",
4215
- "!border-l-transparent",
4216
- "!border-r-transparent",
4217
- "group-has-[:hover]/input:bg-trans-soft",
4218
- "group-has-[:focus]/input:bg-body-background",
4219
- "group-has-[p.error]/input:border-danger-main"
4220
- ],
4221
- readonly: ["!bg-trans-soft"]
4222
- }
4160
+ var inputStyle = tv(
4161
+ {
4162
+ slots: {
4163
+ base: ["group/input", "flex"],
4164
+ vertical: ["flex-col"],
4165
+ horizon: ["flex-row", "gap-0"],
4166
+ label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
4167
+ innerWrapper: ["flex", "flex-col"],
4168
+ inputWrapper: ["flex", "items-center", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
4169
+ input: [
4170
+ "w-full",
4171
+ "h-full",
4172
+ "bg-transparent",
4173
+ "text-neutral-main",
4174
+ "placeholder:text-neutral-main",
4175
+ "outline-none",
4176
+ "focus:ring-0",
4177
+ "group-has-[:hover]/input:text-neutral-dark",
4178
+ "group-has-[:hover]/input:placeholder:text-neutral-dark",
4179
+ "group-has-[:focus]/input:text-neutral-dark",
4180
+ "group-has-[:focus]/input:placeholder:text-neutral-dark",
4181
+ "group-has-[p.error]/input:text-danger-main",
4182
+ "group-has-[p.error]/input:placeholder:text-danger-main"
4183
+ ],
4184
+ content: [
4185
+ "flex",
4186
+ "items-center",
4187
+ "select-none",
4188
+ "text-neutral-main",
4189
+ "group-has-[:hover]/input:text-neutral-dark",
4190
+ "group-has-[p.error]/input:text-danger-main"
4191
+ ],
4192
+ helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
4193
+ errorText: ["text-danger-main"],
4194
+ readonly: ["pointer-events-none"]
4223
4195
  },
4224
- color: {
4225
- primary: {
4226
- content: [
4227
- "group-has-[:focus]/input:text-primary-main",
4228
- "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
4229
- ],
4230
- helperText: [
4231
- "group-has-[:focus]/input:text-primary-main",
4232
- "group-has-[:focus:hover]/input:text-primary-main",
4233
- "group-has-[:focus]/input:hover:text-primary-main"
4234
- ]
4196
+ variants: {
4197
+ variant: {
4198
+ solid: {
4199
+ inputWrapper: ["border-transparent", "bg-trans-soft"],
4200
+ readonly: ["!bg-trans-light"]
4201
+ },
4202
+ outline: {
4203
+ inputWrapper: [
4204
+ "border-neutral-light",
4205
+ "group-has-[:hover]/input:bg-trans-soft",
4206
+ "group-has-[:focus]/input:bg-body-background",
4207
+ "group-has-[p.error]/input:border-danger-main"
4208
+ ],
4209
+ readonly: ["!bg-trans-soft"]
4210
+ },
4211
+ underline: {
4212
+ inputWrapper: [
4213
+ "bg-transparent",
4214
+ "rounded-none",
4215
+ "!border-t-transparent",
4216
+ "!border-l-transparent",
4217
+ "!border-r-transparent",
4218
+ "group-has-[:hover]/input:bg-trans-soft",
4219
+ "group-has-[:focus]/input:bg-body-background",
4220
+ "group-has-[p.error]/input:border-danger-main"
4221
+ ],
4222
+ readonly: ["!bg-trans-soft"]
4223
+ }
4235
4224
  },
4236
- secondary: {
4237
- content: [
4238
- "group-has-[:focus]/input:text-secondary-main",
4239
- "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
4240
- ],
4241
- helperText: [
4242
- "group-has-[:focus]/input:text-secondary-main",
4243
- "group-has-[:focus:hover]/input:text-secondary-main",
4244
- "group-has-[:focus]/input:hover:text-secondary-main"
4245
- ]
4246
- }
4247
- },
4248
- size: {
4249
- sm: {
4250
- base: ["text-sm", "gap-[4px]"],
4251
- label: ["text-sm"],
4252
- innerWrapper: ["gap-[4px]"],
4253
- inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "border-sm"],
4254
- helperText: ["text-sm"],
4255
- errorText: ["text-sm"]
4225
+ color: {
4226
+ primary: {
4227
+ content: [
4228
+ "group-has-[:focus]/input:text-primary-main",
4229
+ "group-has-[:focus:hover]/input:text-primary-main",
4230
+ "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
4231
+ ],
4232
+ helperText: [
4233
+ "group-has-[:focus]/input:text-primary-main",
4234
+ "group-has-[:focus:hover]/input:text-primary-main",
4235
+ "group-has-[:focus]/input:hover:text-primary-main"
4236
+ ]
4237
+ },
4238
+ secondary: {
4239
+ content: [
4240
+ "group-has-[:focus]/input:text-secondary-main",
4241
+ "group-has-[:focus:hover]/input:text-secondary-main",
4242
+ "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
4243
+ ],
4244
+ helperText: [
4245
+ "group-has-[:focus]/input:text-secondary-main",
4246
+ "group-has-[:focus:hover]/input:text-secondary-main",
4247
+ "group-has-[:focus]/input:hover:text-secondary-main"
4248
+ ]
4249
+ }
4256
4250
  },
4257
- md: {
4258
- base: ["text-md", "gap-[6px]"],
4259
- label: ["text-md"],
4260
- innerWrapper: ["gap-[6px]"],
4261
- inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "border-md"],
4262
- helperText: ["text-sm"],
4263
- errorText: ["text-sm"]
4251
+ size: {
4252
+ sm: {
4253
+ base: ["text-sm", "gap-[4px]"],
4254
+ label: ["text-sm"],
4255
+ innerWrapper: ["gap-[4px]"],
4256
+ inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "gap-[4px]", "border-sm"],
4257
+ helperText: ["text-sm"],
4258
+ errorText: ["text-sm"]
4259
+ },
4260
+ md: {
4261
+ base: ["text-md", "gap-[6px]"],
4262
+ label: ["text-md"],
4263
+ innerWrapper: ["gap-[6px]"],
4264
+ inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "gap-[6px]", "border-md"],
4265
+ helperText: ["text-sm"],
4266
+ errorText: ["text-sm"]
4267
+ },
4268
+ lg: {
4269
+ base: ["text-lg", "gap-[8px]"],
4270
+ label: ["text-lg"],
4271
+ innerWrapper: ["gap-[8px]"],
4272
+ inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "gap-[8px]", "border-lg"],
4273
+ helperText: ["text-md"],
4274
+ errorText: ["text-md"]
4275
+ },
4276
+ xl: {
4277
+ base: ["text-xl", "gap-[10px]"],
4278
+ label: ["text-xl"],
4279
+ innerWrapper: ["gap-[10px]"],
4280
+ inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "gap-[10px]", "border-xl"],
4281
+ helperText: ["text-md"],
4282
+ errorText: ["text-md"]
4283
+ }
4264
4284
  },
4265
- lg: {
4266
- base: ["text-lg", "gap-[8px]"],
4267
- label: ["text-lg"],
4268
- innerWrapper: ["gap-[8px]"],
4269
- inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "border-lg"],
4270
- helperText: ["text-md"],
4271
- errorText: ["text-md"]
4285
+ direction: {
4286
+ vertical: "",
4287
+ horizon: ""
4272
4288
  },
4273
- xl: {
4274
- base: ["text-xl", "gap-[10px]"],
4275
- label: ["text-xl"],
4276
- innerWrapper: ["gap-[10px]"],
4277
- inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
4278
- helperText: ["text-md"],
4279
- errorText: ["text-md"]
4280
- }
4281
- },
4282
- direction: {
4283
- vertical: "",
4284
- horizon: ""
4285
- },
4286
- full: {
4287
- true: {
4288
- base: ["w-full"],
4289
- innerWrapper: ["flex-1"],
4290
- inputWrapper: ["w-full"]
4289
+ full: {
4290
+ true: {
4291
+ base: ["w-full"],
4292
+ innerWrapper: ["flex-1"],
4293
+ inputWrapper: ["w-full"]
4294
+ }
4295
+ },
4296
+ disabled: {
4297
+ true: {
4298
+ inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
4299
+ input: [
4300
+ "text-neutral-light",
4301
+ "placeholder:text-neutral-light",
4302
+ "group-has-[p.error]/input:text-danger-light",
4303
+ "group-has-[p.error]/input:placeholder:text-danger-light"
4304
+ ],
4305
+ content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
4306
+ helperText: ["!text-neutral-light"],
4307
+ errorText: ["!text-danger-light"]
4308
+ }
4291
4309
  }
4292
4310
  },
4293
- disabled: {
4294
- true: {
4295
- inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
4296
- input: [
4297
- "text-neutral-light",
4298
- "placeholder:text-neutral-light",
4299
- "group-has-[p.error]/input:text-danger-light",
4300
- "group-has-[p.error]/input:placeholder:text-danger-light"
4301
- ],
4302
- content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
4303
- helperText: ["!text-neutral-light"],
4304
- errorText: ["!text-danger-light"]
4311
+ compoundVariants: [
4312
+ {
4313
+ disabled: true,
4314
+ variant: ["outline", "underline"],
4315
+ class: {
4316
+ inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
4317
+ }
4305
4318
  }
4319
+ ],
4320
+ defaultVariants: {
4321
+ variant: "solid",
4322
+ color: "primary",
4323
+ size: "md",
4324
+ direction: "vertical",
4325
+ disabled: false,
4326
+ readonly: false
4306
4327
  }
4307
4328
  },
4308
- compoundVariants: [
4309
- {
4310
- disabled: true,
4311
- variant: ["outline", "underline"],
4312
- class: {
4313
- inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
4314
- }
4315
- }
4316
- ],
4317
- defaultVariants: {
4318
- variant: "solid",
4319
- color: "primary",
4320
- size: "md",
4321
- direction: "vertical",
4322
- disabled: false,
4323
- readonly: false
4329
+ {
4330
+ twMerge: false
4324
4331
  }
4325
- });
4332
+ );
4326
4333
  // Annotate the CommonJS export names for ESM import in node:
4327
4334
  0 && (module.exports = {
4328
4335
  Input