@deepnoid/ui 0.1.2 → 0.1.4
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/.turbo/turbo-build.log +146 -146
- package/dist/{chunk-TMSBICKB.mjs → chunk-J7IAY6UH.mjs} +1 -1
- package/dist/{chunk-DNFBQYVG.mjs → chunk-SSEQSF5F.mjs} +1 -1
- package/dist/chunk-TDJJRQDC.mjs +343 -0
- package/dist/{chunk-OELLMF2V.mjs → chunk-WPUTPWQ4.mjs} +1 -1
- package/dist/{chunk-VP3NVHFU.mjs → chunk-YCMZELLD.mjs} +1 -1
- package/dist/components/dateTimePicker/dateTimePicker.mjs +4 -4
- package/dist/components/dateTimePicker/index.mjs +4 -4
- package/dist/components/dateTimePicker/timePicker.mjs +3 -3
- package/dist/components/input/index.js +212 -154
- package/dist/components/input/index.mjs +1 -1
- package/dist/components/input/input.js +212 -154
- package/dist/components/input/input.mjs +1 -1
- package/dist/components/list/index.mjs +2 -2
- package/dist/components/list/listItem.mjs +2 -2
- package/dist/components/pagination/index.js +212 -154
- package/dist/components/pagination/index.mjs +2 -2
- package/dist/components/pagination/pagination.js +212 -154
- package/dist/components/pagination/pagination.mjs +2 -2
- package/dist/components/table/index.js +212 -154
- package/dist/components/table/index.mjs +4 -4
- package/dist/components/table/table.js +212 -154
- package/dist/components/table/table.mjs +4 -4
- package/dist/index.js +212 -154
- package/dist/index.mjs +45 -45
- package/package.json +1 -1
- package/dist/chunk-OYNGJ33M.mjs +0 -285
- package/dist/{chunk-KWWYMTJP.mjs → chunk-AYWI2CRE.mjs} +3 -3
package/dist/chunk-OYNGJ33M.mjs
DELETED
|
@@ -1,285 +0,0 @@
|
|
|
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
|
-
slots: {
|
|
117
|
-
base: ["group/input", "flex"],
|
|
118
|
-
vertical: ["flex-col"],
|
|
119
|
-
horizon: ["flex-row", "gap-0"],
|
|
120
|
-
label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
|
|
121
|
-
innerWrapper: ["flex", "flex-col"],
|
|
122
|
-
inputWrapper: ["flex", "items-center", "transition", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
|
|
123
|
-
input: [
|
|
124
|
-
"w-full",
|
|
125
|
-
"h-full",
|
|
126
|
-
"bg-transparent",
|
|
127
|
-
"text-neutral-main",
|
|
128
|
-
"placeholder:text-neutral-main",
|
|
129
|
-
"focus:outline-none",
|
|
130
|
-
"focus:ring-0",
|
|
131
|
-
"group-has-[:hover]/input:text-neutral-dark",
|
|
132
|
-
"group-has-[:hover]/input:placeholder:text-neutral-dark",
|
|
133
|
-
"group-has-[:focus]/input:text-neutral-dark",
|
|
134
|
-
"group-has-[:focus]/input:placeholder:text-neutral-dark",
|
|
135
|
-
"group-has-[p.error]/input:text-danger-main",
|
|
136
|
-
"group-has-[p.error]/input:placeholder:text-danger-main"
|
|
137
|
-
],
|
|
138
|
-
content: [
|
|
139
|
-
"flex",
|
|
140
|
-
"items-center",
|
|
141
|
-
"select-none",
|
|
142
|
-
"text-neutral-main",
|
|
143
|
-
"group-has-[:hover]/input:text-neutral-dark",
|
|
144
|
-
"group-has-[p.error]/input:text-danger-main"
|
|
145
|
-
],
|
|
146
|
-
helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
|
|
147
|
-
errorText: ["text-danger-main"],
|
|
148
|
-
readonly: ["pointer-events-none"]
|
|
149
|
-
},
|
|
150
|
-
variants: {
|
|
151
|
-
variant: {
|
|
152
|
-
solid: {
|
|
153
|
-
inputWrapper: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
|
|
154
|
-
readonly: ["!bg-trans-light"]
|
|
155
|
-
},
|
|
156
|
-
outline: {
|
|
157
|
-
inputWrapper: [
|
|
158
|
-
"border-neutral-light",
|
|
159
|
-
"group-has-[:hover]/input:bg-trans-soft",
|
|
160
|
-
"group-has-[:focus]/input:bg-body-background",
|
|
161
|
-
"group-has-[p.error]/input:border-danger-main"
|
|
162
|
-
],
|
|
163
|
-
readonly: ["!bg-trans-soft"]
|
|
164
|
-
},
|
|
165
|
-
underline: {
|
|
166
|
-
inputWrapper: [
|
|
167
|
-
"bg-transparent",
|
|
168
|
-
"!rounded-none",
|
|
169
|
-
"!border-t-transparent",
|
|
170
|
-
"!border-l-transparent",
|
|
171
|
-
"!border-r-transparent",
|
|
172
|
-
"group-has-[:hover]/input:bg-trans-soft",
|
|
173
|
-
"group-has-[:focus]/input:bg-body-background",
|
|
174
|
-
"group-has-[p.error]/input:border-danger-main"
|
|
175
|
-
],
|
|
176
|
-
readonly: ["!bg-trans-soft"]
|
|
177
|
-
}
|
|
178
|
-
},
|
|
179
|
-
color: {
|
|
180
|
-
primary: {
|
|
181
|
-
content: [
|
|
182
|
-
"group-has-[:focus]/input:text-primary-main",
|
|
183
|
-
"!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
|
|
184
|
-
],
|
|
185
|
-
helperText: [
|
|
186
|
-
"group-has-[:focus]/input:text-primary-main",
|
|
187
|
-
"group-has-[:focus:hover]/input:text-primary-main",
|
|
188
|
-
"group-has-[:focus]/input:hover:text-primary-main"
|
|
189
|
-
]
|
|
190
|
-
},
|
|
191
|
-
secondary: {
|
|
192
|
-
content: [
|
|
193
|
-
"group-has-[:focus]/input:text-secondary-main",
|
|
194
|
-
"!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
|
|
195
|
-
],
|
|
196
|
-
helperText: [
|
|
197
|
-
"group-has-[:focus]/input:text-secondary-main",
|
|
198
|
-
"group-has-[:focus:hover]/input:text-secondary-main",
|
|
199
|
-
"group-has-[:focus]/input:hover:text-secondary-main"
|
|
200
|
-
]
|
|
201
|
-
}
|
|
202
|
-
},
|
|
203
|
-
size: {
|
|
204
|
-
sm: {
|
|
205
|
-
base: ["text-sm", "gap-[4px]"],
|
|
206
|
-
label: ["text-sm"],
|
|
207
|
-
innerWrapper: ["gap-[4px]"],
|
|
208
|
-
inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "border-sm"],
|
|
209
|
-
helperText: ["text-sm"],
|
|
210
|
-
errorText: ["text-sm"]
|
|
211
|
-
},
|
|
212
|
-
md: {
|
|
213
|
-
base: ["text-md", "gap-[6px]"],
|
|
214
|
-
label: ["text-md"],
|
|
215
|
-
innerWrapper: ["gap-[6px]"],
|
|
216
|
-
inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "border-md"],
|
|
217
|
-
helperText: ["text-sm"],
|
|
218
|
-
errorText: ["text-sm"]
|
|
219
|
-
},
|
|
220
|
-
lg: {
|
|
221
|
-
base: ["text-lg", "gap-[8px]"],
|
|
222
|
-
label: ["text-lg"],
|
|
223
|
-
innerWrapper: ["gap-[8px]"],
|
|
224
|
-
inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "border-lg"],
|
|
225
|
-
helperText: ["text-md"],
|
|
226
|
-
errorText: ["text-md"]
|
|
227
|
-
},
|
|
228
|
-
xl: {
|
|
229
|
-
base: ["text-xl", "gap-[10px]"],
|
|
230
|
-
label: ["text-xl"],
|
|
231
|
-
innerWrapper: ["gap-[10px]"],
|
|
232
|
-
inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
|
|
233
|
-
helperText: ["text-md"],
|
|
234
|
-
errorText: ["text-md"]
|
|
235
|
-
}
|
|
236
|
-
},
|
|
237
|
-
direction: {
|
|
238
|
-
vertical: "",
|
|
239
|
-
horizon: ""
|
|
240
|
-
},
|
|
241
|
-
full: {
|
|
242
|
-
true: {
|
|
243
|
-
base: ["w-full"],
|
|
244
|
-
innerWrapper: ["flex-1"],
|
|
245
|
-
inputWrapper: ["w-full"]
|
|
246
|
-
}
|
|
247
|
-
},
|
|
248
|
-
disabled: {
|
|
249
|
-
true: {
|
|
250
|
-
inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
|
|
251
|
-
input: [
|
|
252
|
-
"text-neutral-light",
|
|
253
|
-
"placeholder:text-neutral-light",
|
|
254
|
-
"group-has-[p.error]/input:text-danger-light",
|
|
255
|
-
"group-has-[p.error]/input:placeholder:text-danger-light"
|
|
256
|
-
],
|
|
257
|
-
content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
|
|
258
|
-
helperText: ["!text-neutral-light"],
|
|
259
|
-
errorText: ["!text-danger-light"]
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
},
|
|
263
|
-
compoundVariants: [
|
|
264
|
-
{
|
|
265
|
-
disabled: true,
|
|
266
|
-
variant: ["outline", "underline"],
|
|
267
|
-
class: {
|
|
268
|
-
inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
],
|
|
272
|
-
defaultVariants: {
|
|
273
|
-
variant: "solid",
|
|
274
|
-
color: "primary",
|
|
275
|
-
size: "md",
|
|
276
|
-
direction: "vertical",
|
|
277
|
-
disabled: false,
|
|
278
|
-
readonly: false
|
|
279
|
-
}
|
|
280
|
-
});
|
|
281
|
-
|
|
282
|
-
export {
|
|
283
|
-
input_default,
|
|
284
|
-
inputStyle
|
|
285
|
-
};
|