@lindle/linoardo 1.0.45 → 1.0.47
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/dist/{ExpansionPanelItem-DYcbxZnv.d.ts → ExpansionPanelItem-By0ziOVw.d.cts} +2 -1
- package/dist/{ExpansionPanelItem-B9srsYMI.d.cts → ExpansionPanelItem-CFfWX7ia.d.ts} +2 -1
- package/dist/badge.d.cts +1 -1
- package/dist/badge.d.ts +1 -1
- package/dist/block.cjs +0 -1
- package/dist/block.cjs.map +1 -1
- package/dist/block.d.cts +1 -1
- package/dist/block.d.ts +1 -1
- package/dist/block.js +1 -1
- package/dist/button.cjs +73 -17
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +16 -5
- package/dist/button.d.ts +16 -5
- package/dist/button.js +1 -1
- package/dist/card.cjs +0 -1
- package/dist/card.cjs.map +1 -1
- package/dist/card.d.cts +1 -1
- package/dist/card.d.ts +1 -1
- package/dist/card.js +1 -1
- package/dist/chip.cjs +7 -15
- package/dist/chip.cjs.map +1 -1
- package/dist/chip.d.cts +1 -1
- package/dist/chip.d.ts +1 -1
- package/dist/chip.js +2 -2
- package/dist/{chunk-PSMGRUU5.js → chunk-4CYM2UM3.js} +9 -17
- package/dist/chunk-4CYM2UM3.js.map +1 -0
- package/dist/{chunk-5GT6L4BE.js → chunk-4NKKWBMP.js} +2 -3
- package/dist/chunk-4NKKWBMP.js.map +1 -0
- package/dist/{chunk-ZTP2JSQ6.js → chunk-4VHGXXZE.js} +52 -26
- package/dist/chunk-4VHGXXZE.js.map +1 -0
- package/dist/{chunk-HT5XBHWN.js → chunk-57CCAWFX.js} +3 -3
- package/dist/{chunk-HT5XBHWN.js.map → chunk-57CCAWFX.js.map} +1 -1
- package/dist/{chunk-5MVIF5GP.js → chunk-7HOQSHPQ.js} +4 -7
- package/dist/chunk-7HOQSHPQ.js.map +1 -0
- package/dist/{chunk-U4P2VJCV.js → chunk-7YZBEH2K.js} +2 -3
- package/dist/chunk-7YZBEH2K.js.map +1 -0
- package/dist/{chunk-RG5FCFLX.js → chunk-AUVYU7M5.js} +4 -3
- package/dist/chunk-AUVYU7M5.js.map +1 -0
- package/dist/{chunk-NADLY6LM.js → chunk-DUEQOGNR.js} +3 -4
- package/dist/chunk-DUEQOGNR.js.map +1 -0
- package/dist/{chunk-FEGFA3FN.js → chunk-JFIFVLWE.js} +3 -3
- package/dist/{chunk-FEGFA3FN.js.map → chunk-JFIFVLWE.js.map} +1 -1
- package/dist/{chunk-DIWGVTWO.js → chunk-RUOU46YI.js} +75 -19
- package/dist/chunk-RUOU46YI.js.map +1 -0
- package/dist/{chunk-F3PI7A6V.js → chunk-TRR7TDVA.js} +3 -4
- package/dist/chunk-TRR7TDVA.js.map +1 -0
- package/dist/chunk-UGG35FPX.js +141 -0
- package/dist/chunk-UGG35FPX.js.map +1 -0
- package/dist/{chunk-VPF7M2PB.js → chunk-UWNDN4XL.js} +2 -5
- package/dist/chunk-UWNDN4XL.js.map +1 -0
- package/dist/{chunk-FJNKMRYQ.js → chunk-XA74HBMH.js} +6 -4
- package/dist/chunk-XA74HBMH.js.map +1 -0
- package/dist/expansion-panel/item.cjs +2 -1
- package/dist/expansion-panel/item.cjs.map +1 -1
- package/dist/expansion-panel/item.d.cts +2 -2
- package/dist/expansion-panel/item.d.ts +2 -2
- package/dist/expansion-panel/item.js +1 -1
- package/dist/expansion-panel.cjs +5 -2
- package/dist/expansion-panel.cjs.map +1 -1
- package/dist/expansion-panel.d.cts +3 -3
- package/dist/expansion-panel.d.ts +3 -3
- package/dist/expansion-panel.js +2 -2
- package/dist/{global.types-gx9A7mUe.d.cts → global.types-CjO3VRWu.d.cts} +1 -1
- package/dist/{global.types-gx9A7mUe.d.ts → global.types-CjO3VRWu.d.ts} +1 -1
- package/dist/hero.cjs +0 -3
- package/dist/hero.cjs.map +1 -1
- package/dist/hero.d.cts +1 -1
- package/dist/hero.d.ts +1 -1
- package/dist/hero.js +1 -1
- package/dist/icon.d.cts +1 -1
- package/dist/icon.d.ts +1 -1
- package/dist/{index-CNwl6vmH.d.ts → index-BgLrabTA.d.ts} +1 -1
- package/dist/{index-BDrBOeFI.d.cts → index-C19gZTrO.d.cts} +1 -1
- package/dist/index.cjs +321 -278
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +20 -5
- package/dist/index.d.ts +20 -5
- package/dist/index.js +77 -24
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +62 -145
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +6 -6
- package/dist/input.d.ts +6 -6
- package/dist/input.js +1 -2
- package/dist/list/item.d.cts +2 -2
- package/dist/list/item.d.ts +2 -2
- package/dist/list.cjs +1 -2
- package/dist/list.cjs.map +1 -1
- package/dist/list.d.cts +3 -3
- package/dist/list.d.ts +3 -3
- package/dist/list.js +1 -1
- package/dist/menu.cjs +50 -24
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +1 -1
- package/dist/notification.d.cts +1 -1
- package/dist/notification.d.ts +1 -1
- package/dist/profileCard.cjs +74 -21
- package/dist/profileCard.cjs.map +1 -1
- package/dist/profileCard.d.cts +1 -1
- package/dist/profileCard.d.ts +1 -1
- package/dist/profileCard.js +2 -2
- package/dist/select.cjs +1 -2
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +2 -2
- package/dist/select.d.ts +2 -2
- package/dist/select.js +1 -1
- package/dist/slider.d.cts +1 -1
- package/dist/slider.d.ts +1 -1
- package/dist/styles.css +254 -91
- package/dist/switch.d.cts +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/timeline.cjs.map +1 -1
- package/dist/timeline.d.cts +2 -2
- package/dist/timeline.d.ts +2 -2
- package/dist/timeline.js +2 -2
- package/dist/{types-DaTHYIPO.d.ts → types-B4puM-zr.d.cts} +3 -4
- package/dist/{types-CJ0zqPXF.d.cts → types-BDisBwnf.d.ts} +3 -4
- package/package.json +1 -1
- package/dist/chunk-5GT6L4BE.js.map +0 -1
- package/dist/chunk-5MVIF5GP.js.map +0 -1
- package/dist/chunk-DIWGVTWO.js.map +0 -1
- package/dist/chunk-F3PI7A6V.js.map +0 -1
- package/dist/chunk-FJNKMRYQ.js.map +0 -1
- package/dist/chunk-NADLY6LM.js.map +0 -1
- package/dist/chunk-OBGYXMZ3.js +0 -218
- package/dist/chunk-OBGYXMZ3.js.map +0 -1
- package/dist/chunk-PSMGRUU5.js.map +0 -1
- package/dist/chunk-RG5FCFLX.js.map +0 -1
- package/dist/chunk-U4P2VJCV.js.map +0 -1
- package/dist/chunk-VPF7M2PB.js.map +0 -1
- package/dist/chunk-ZTP2JSQ6.js.map +0 -1
package/dist/input.cjs
CHANGED
|
@@ -9,114 +9,57 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
9
9
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
10
10
|
|
|
11
11
|
// src/Form/Input/index.tsx
|
|
12
|
-
|
|
13
|
-
// src/globals.ts
|
|
14
|
-
var iconBaseClasses = {
|
|
15
|
-
mdi: ["mdi"]
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
// src/Form/Input/states.input.ts
|
|
19
|
-
var resolveIconClassName = (icon) => {
|
|
20
|
-
if (!icon) {
|
|
21
|
-
return void 0;
|
|
22
|
-
}
|
|
23
|
-
if (typeof icon === "string") {
|
|
24
|
-
const trimmed = icon.trim();
|
|
25
|
-
if (!trimmed) {
|
|
26
|
-
return void 0;
|
|
27
|
-
}
|
|
28
|
-
if (trimmed.includes(" ")) {
|
|
29
|
-
return trimmed;
|
|
30
|
-
}
|
|
31
|
-
const normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
32
|
-
return ["mdi", normalizedName2].join(" ");
|
|
33
|
-
}
|
|
34
|
-
const [library, iconNameRaw] = icon;
|
|
35
|
-
const baseClasses = iconBaseClasses[library] ?? [library];
|
|
36
|
-
const iconName = iconNameRaw.trim();
|
|
37
|
-
if (!iconName) {
|
|
38
|
-
return baseClasses.join(" ");
|
|
39
|
-
}
|
|
40
|
-
const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
41
|
-
const classes = [...baseClasses, normalizedName];
|
|
42
|
-
return Array.from(new Set(classes)).join(" ");
|
|
43
|
-
};
|
|
44
12
|
var Input = React__default.default.forwardRef(
|
|
45
|
-
({
|
|
46
|
-
variant = "outline",
|
|
47
|
-
size = "medium",
|
|
48
|
-
success,
|
|
49
|
-
error,
|
|
50
|
-
warn,
|
|
51
|
-
icon,
|
|
52
|
-
className,
|
|
53
|
-
wrapperClassName,
|
|
54
|
-
label,
|
|
55
|
-
prefix,
|
|
56
|
-
suffix,
|
|
57
|
-
...props
|
|
58
|
-
}, ref) => {
|
|
13
|
+
({ variant = "outline", size = "medium", rounded = "md", success, error, warn, className, wrapperClassName, label, prepend, append, ...props }, ref) => {
|
|
59
14
|
const { placeholder, onFocus, onBlur, ...inputProps } = props;
|
|
60
15
|
const reactId = React__default.default.useId();
|
|
61
16
|
const hasLabel = Boolean(label);
|
|
62
17
|
const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
|
|
63
18
|
const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
|
|
64
19
|
const [isFocused, setIsFocused] = React__default.default.useState(false);
|
|
65
|
-
const classBase = "input-base
|
|
20
|
+
const classBase = "input-base transition-colors duration-200 w-full has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed";
|
|
21
|
+
const inputBase = "peer block w-full min-w-0 border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-0";
|
|
66
22
|
const variantClasses = {
|
|
67
|
-
solid: "rounded border border-gray-400 bg-white shadow-sm focus-
|
|
68
|
-
sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-
|
|
69
|
-
outline: "rounded border-2 border-black bg-white focus-
|
|
70
|
-
text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-
|
|
71
|
-
ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-
|
|
72
|
-
filled: "rounded border border-gray-200 bg-gray-100 focus-
|
|
73
|
-
underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-
|
|
74
|
-
|
|
23
|
+
solid: "rounded border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
|
|
24
|
+
sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
|
|
25
|
+
outline: "rounded border-2 border-black bg-white focus-within:border-black focus-within:ring-2 focus-within:ring-black/30 dark:border-black dark:bg-transparent dark:focus-within:border-black dark:focus-within:ring-black/40",
|
|
26
|
+
text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70",
|
|
27
|
+
ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-within:bg-white focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-within:bg-slate-700 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/25",
|
|
28
|
+
filled: "rounded border border-gray-200 bg-gray-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/30",
|
|
29
|
+
underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70"
|
|
30
|
+
};
|
|
31
|
+
const roundedClasses = {
|
|
32
|
+
sm: "rounded-sm",
|
|
33
|
+
md: "rounded-md",
|
|
34
|
+
lg: "rounded-lg",
|
|
35
|
+
xl: "rounded-xl",
|
|
36
|
+
"2xl": "rounded-2xl",
|
|
37
|
+
"3xl": "rounded-3xl"
|
|
75
38
|
};
|
|
76
39
|
const sizeClasses = {
|
|
77
40
|
"x-small": {
|
|
78
41
|
paddingY: "py-2",
|
|
79
|
-
|
|
80
|
-
paddingRight: "pr-2",
|
|
81
|
-
paddingLeftLeading: "pl-8",
|
|
82
|
-
paddingLeftLeadingDouble: "pl-12",
|
|
83
|
-
paddingRightTrailing: "pr-8",
|
|
42
|
+
paddingX: "px-2",
|
|
84
43
|
text: "text-xs"
|
|
85
44
|
},
|
|
86
45
|
small: {
|
|
87
46
|
paddingY: "py-2.5",
|
|
88
|
-
|
|
89
|
-
paddingRight: "pr-2.5",
|
|
90
|
-
paddingLeftLeading: "pl-9",
|
|
91
|
-
paddingLeftLeadingDouble: "pl-12",
|
|
92
|
-
paddingRightTrailing: "pr-9",
|
|
47
|
+
paddingX: "px-2.5",
|
|
93
48
|
text: "text-sm"
|
|
94
49
|
},
|
|
95
50
|
medium: {
|
|
96
51
|
paddingY: "py-3",
|
|
97
|
-
|
|
98
|
-
paddingRight: "pr-3",
|
|
99
|
-
paddingLeftLeading: "pl-10",
|
|
100
|
-
paddingLeftLeadingDouble: "pl-14",
|
|
101
|
-
paddingRightTrailing: "pr-10",
|
|
52
|
+
paddingX: "px-3",
|
|
102
53
|
text: "text-base"
|
|
103
54
|
},
|
|
104
55
|
large: {
|
|
105
56
|
paddingY: "py-3.5",
|
|
106
|
-
|
|
107
|
-
paddingRight: "pr-3.5",
|
|
108
|
-
paddingLeftLeading: "pl-11",
|
|
109
|
-
paddingLeftLeadingDouble: "pl-14",
|
|
110
|
-
paddingRightTrailing: "pr-11",
|
|
57
|
+
paddingX: "px-3.5",
|
|
111
58
|
text: "text-lg"
|
|
112
59
|
},
|
|
113
60
|
"x-large": {
|
|
114
61
|
paddingY: "py-4",
|
|
115
|
-
|
|
116
|
-
paddingRight: "pr-4",
|
|
117
|
-
paddingLeftLeading: "pl-12",
|
|
118
|
-
paddingLeftLeadingDouble: "pl-16",
|
|
119
|
-
paddingRightTrailing: "pr-12",
|
|
62
|
+
paddingX: "px-4",
|
|
120
63
|
text: "text-xl"
|
|
121
64
|
}
|
|
122
65
|
};
|
|
@@ -133,25 +76,18 @@ var Input = React__default.default.forwardRef(
|
|
|
133
76
|
};
|
|
134
77
|
const variantClass = variantClasses[variant] ?? variantClasses.outline;
|
|
135
78
|
const toneClass = status ? statusClasses[status.tone] : void 0;
|
|
136
|
-
|
|
137
|
-
const
|
|
138
|
-
const hasSuffix = typeof suffix === "string" ? suffix.trim().length > 0 : Boolean(suffix);
|
|
139
|
-
const hasLeadingIcon = Boolean(prependIconClass);
|
|
140
|
-
const hasLeadingAdornment = hasLeadingIcon || hasPrefix;
|
|
141
|
-
const hasTrailingAdornment = hasSuffix;
|
|
79
|
+
const hasPrepend = typeof prepend === "string" ? prepend.trim().length > 0 : Boolean(prepend);
|
|
80
|
+
const hasAppend = typeof append === "string" ? append.trim().length > 0 : Boolean(append);
|
|
142
81
|
const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;
|
|
143
|
-
const
|
|
144
|
-
const
|
|
145
|
-
const sizeClass = [sizeConfig.paddingY, leftPaddingClass, rightPaddingClass, sizeConfig.text].join(" ");
|
|
82
|
+
const sizeClass = [sizeConfig.paddingY, sizeConfig.paddingX, sizeConfig.text].join(" ");
|
|
83
|
+
const roundedClass = variant === "sharp" || variant === "text" || variant === "underlined" ? "rounded-none" : roundedClasses[rounded];
|
|
146
84
|
const inputName = inputProps.name || reactId;
|
|
147
85
|
const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
|
|
148
86
|
const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
|
|
149
87
|
const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
|
|
150
|
-
const
|
|
151
|
-
const
|
|
152
|
-
const
|
|
153
|
-
const renderSuffix = hasSuffix ? typeof suffix === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: suffix }) : suffix : null;
|
|
154
|
-
const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
|
|
88
|
+
const renderPrepend = hasPrepend ? typeof prepend === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: prepend }) : prepend : null;
|
|
89
|
+
const renderAppend = hasAppend ? typeof append === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: append }) : append : null;
|
|
90
|
+
const labelBgDefault = "bg-white px-1 dark:bg-slate-900";
|
|
155
91
|
const handleFocus = (event) => {
|
|
156
92
|
if (hidePlaceholderUntilFocus) setIsFocused(true);
|
|
157
93
|
onFocus?.(event);
|
|
@@ -161,62 +97,43 @@ var Input = React__default.default.forwardRef(
|
|
|
161
97
|
onBlur?.(event);
|
|
162
98
|
};
|
|
163
99
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
|
|
164
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
100
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-full items-center gap-2", classBase, variantClass, roundedClass, toneClass, sizeClass, className), children: [
|
|
101
|
+
hasPrepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", children: renderPrepend }),
|
|
102
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
|
|
103
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
104
|
+
"input",
|
|
168
105
|
{
|
|
106
|
+
...inputProps,
|
|
107
|
+
ref,
|
|
108
|
+
id: inputName,
|
|
109
|
+
name: inputName,
|
|
110
|
+
placeholder: placeholderValue,
|
|
111
|
+
onFocus: handleFocus,
|
|
112
|
+
onBlur: handleBlur,
|
|
113
|
+
className: tailwindMerge.twMerge(inputBase, placeholderClass)
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
117
|
+
"label",
|
|
118
|
+
{
|
|
119
|
+
htmlFor: inputName,
|
|
169
120
|
className: tailwindMerge.twMerge(
|
|
170
|
-
"text-gray-
|
|
171
|
-
|
|
172
|
-
|
|
121
|
+
"absolute left-0 z-10 transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
|
|
122
|
+
// Floated state: keep label above the border for readability
|
|
123
|
+
"-top-2 -translate-y-full text-xs",
|
|
124
|
+
labelBgDefault,
|
|
125
|
+
// focus state keeps the same elevated position
|
|
126
|
+
"peer-focus:left-0 peer-focus:-top-5 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-gray-600 dark:peer-focus:text-gray-300",
|
|
127
|
+
// when input is empty (placeholder shown) -> center label inside input
|
|
128
|
+
"peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400",
|
|
129
|
+
// explicit filled state so label remains visible for any variant/value combination
|
|
130
|
+
"peer-[&:not(:placeholder-shown)]:left-0 peer-[&:not(:placeholder-shown)]:-top-2 peer-[&:not(:placeholder-shown)]:-translate-y-full peer-[&:not(:placeholder-shown)]:text-xs peer-[&:not(:placeholder-shown)]:text-gray-700 dark:peer-[&:not(:placeholder-shown)]:text-gray-200"
|
|
173
131
|
),
|
|
174
|
-
|
|
132
|
+
children: label
|
|
175
133
|
}
|
|
176
|
-
)
|
|
177
|
-
renderPrefix
|
|
134
|
+
)
|
|
178
135
|
] }),
|
|
179
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
180
|
-
"input",
|
|
181
|
-
{
|
|
182
|
-
...inputProps,
|
|
183
|
-
ref,
|
|
184
|
-
id: inputName,
|
|
185
|
-
name: inputName,
|
|
186
|
-
placeholder: placeholderValue,
|
|
187
|
-
onFocus: handleFocus,
|
|
188
|
-
onBlur: handleBlur,
|
|
189
|
-
className: tailwindMerge.twMerge(
|
|
190
|
-
"peer",
|
|
191
|
-
classBase,
|
|
192
|
-
variantClass,
|
|
193
|
-
toneClass,
|
|
194
|
-
sizeClass,
|
|
195
|
-
placeholderClass,
|
|
196
|
-
className
|
|
197
|
-
)
|
|
198
|
-
}
|
|
199
|
-
),
|
|
200
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
201
|
-
"label",
|
|
202
|
-
{
|
|
203
|
-
htmlFor: inputName,
|
|
204
|
-
className: tailwindMerge.twMerge(
|
|
205
|
-
"absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200",
|
|
206
|
-
labelLeftClass,
|
|
207
|
-
// Floated state: center label's vertical middle on the top border line
|
|
208
|
-
"-top-1.5 -translate-y-2/3 text-xs px-1",
|
|
209
|
-
labelBgDefault,
|
|
210
|
-
// focus state mirrors floated state (keeps center on border)
|
|
211
|
-
labelFocusLeftClass,
|
|
212
|
-
"peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300",
|
|
213
|
-
// when input is empty (placeholder shown) -> center label inside input
|
|
214
|
-
"peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
|
|
215
|
-
),
|
|
216
|
-
children: label
|
|
217
|
-
}
|
|
218
|
-
),
|
|
219
|
-
hasTrailingAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3 inset-y-0 flex items-center", children: renderSuffix })
|
|
136
|
+
hasAppend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", children: renderAppend })
|
|
220
137
|
] }),
|
|
221
138
|
status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
|
|
222
139
|
] });
|
package/dist/input.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/globals.ts","../src/Form/Input/states.input.ts","../src/Form/Input/index.tsx"],"names":["normalizedName","React","jsx","twMerge","jsxs"],"mappings":"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","file":"input.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { InputProp } from './types';\n\nexport const resolveIconClassName = (icon?: InputProp['icon']) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalizedName = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalizedName].join(' ');\n }\n\n const [library, iconNameRaw] = icon;\n const baseClasses = iconBaseClasses[library] ?? [library];\n const iconName = iconNameRaw.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n const normalizedName = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n const classes = [...baseClasses, normalizedName];\n return Array.from(new Set(classes)).join(' ');\n};\n","import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { InputProp, InputVariant, InputSize } from './types';\nimport { resolveIconClassName } from './states.input';\n\n/**\n * Text input with multiple visual variants and inline status or icon adornments.\n * Label is purely CSS-driven (peer + placeholder-shown + focus), no hooks used.\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProp>(\n (\n {\n variant = 'outline',\n size = 'medium',\n success,\n error,\n warn,\n icon,\n className,\n wrapperClassName,\n label,\n prefix,\n suffix,\n ...props\n },\n ref\n ) => {\n const { placeholder, onFocus, onBlur, ...inputProps } = props;\n const reactId = React.useId();\n const hasLabel = Boolean(label);\n const hasProvidedPlaceholder = typeof placeholder === 'string' && placeholder.trim().length > 0;\n const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;\n const [isFocused, setIsFocused] = React.useState(false);\n const classBase =\n 'input-base focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400';\n const variantClasses = {\n solid:\n 'rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n sharp:\n 'rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n outline:\n 'rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40',\n text: 'rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n ghost:\n 'rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25',\n filled:\n 'rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30',\n underlined:\n 'rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n rounded:\n 'rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20'\n } satisfies Record<InputVariant, string>;\n const sizeClasses = {\n 'x-small': {\n paddingY: 'py-2',\n paddingLeft: 'pl-2',\n paddingRight: 'pr-2',\n paddingLeftLeading: 'pl-8',\n paddingLeftLeadingDouble: 'pl-12',\n paddingRightTrailing: 'pr-8',\n text: 'text-xs'\n },\n small: {\n paddingY: 'py-2.5',\n paddingLeft: 'pl-2.5',\n paddingRight: 'pr-2.5',\n paddingLeftLeading: 'pl-9',\n paddingLeftLeadingDouble: 'pl-12',\n paddingRightTrailing: 'pr-9',\n text: 'text-sm'\n },\n medium: {\n paddingY: 'py-3',\n paddingLeft: 'pl-3',\n paddingRight: 'pr-3',\n paddingLeftLeading: 'pl-10',\n paddingLeftLeadingDouble: 'pl-14',\n paddingRightTrailing: 'pr-10',\n text: 'text-base'\n },\n large: {\n paddingY: 'py-3.5',\n paddingLeft: 'pl-3.5',\n paddingRight: 'pr-3.5',\n paddingLeftLeading: 'pl-11',\n paddingLeftLeadingDouble: 'pl-14',\n paddingRightTrailing: 'pr-11',\n text: 'text-lg'\n },\n 'x-large': {\n paddingY: 'py-4',\n paddingLeft: 'pl-4',\n paddingRight: 'pr-4',\n paddingLeftLeading: 'pl-12',\n paddingLeftLeadingDouble: 'pl-16',\n paddingRightTrailing: 'pr-12',\n text: 'text-xl'\n }\n } satisfies Record<\n InputSize,\n {\n paddingY: string;\n paddingLeft: string;\n paddingRight: string;\n paddingLeftLeading: string;\n paddingLeftLeadingDouble: string;\n paddingRightTrailing: string;\n text: string;\n }\n >;\n\n const status = error\n ? { tone: 'error' as const, message: error }\n : warn\n ? { tone: 'warn' as const, message: warn }\n : success\n ? { tone: 'success' as const, message: success }\n : undefined;\n\n const statusClasses = {\n error: 'border-red-500 focus:border-red-500 focus:ring-red-400',\n warn: 'border-amber-500 focus:border-amber-500 focus:ring-amber-400',\n success: 'border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400'\n } as const;\n\n const statusMessageClasses = {\n error: 'text-red-600 dark:text-red-300',\n warn: 'text-amber-600 dark:text-amber-300',\n success: 'text-emerald-600 dark:text-emerald-300'\n } as const;\n\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const toneClass = status ? statusClasses[status.tone] : undefined;\n let prependIconClass = resolveIconClassName(icon);\n const hasPrefix = typeof prefix === 'string' ? prefix.trim().length > 0 : Boolean(prefix);\n const hasSuffix = typeof suffix === 'string' ? suffix.trim().length > 0 : Boolean(suffix);\n const hasLeadingIcon = Boolean(prependIconClass);\n const hasLeadingAdornment = hasLeadingIcon || hasPrefix;\n const hasTrailingAdornment = hasSuffix;\n const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n const leftPaddingClass =\n hasPrefix\n ? sizeConfig.paddingLeftLeadingDouble\n : hasLeadingAdornment\n ? sizeConfig.paddingLeftLeading\n : sizeConfig.paddingLeft;\n const rightPaddingClass = hasTrailingAdornment\n ? sizeConfig.paddingRightTrailing\n : sizeConfig.paddingRight;\n const sizeClass = [sizeConfig.paddingY, leftPaddingClass, rightPaddingClass, sizeConfig.text].join(' ');\n\n // useId keeps SSR/CSR ids consistent while still providing a fallback name\n const inputName = inputProps.name || reactId;\n\n // Ensure placeholder is present when label exists so :placeholder-shown works.\n // Label stays primary; placeholder only appears on focus when the field is empty.\n const basePlaceholder = placeholder ?? (hasLabel ? ' ' : undefined);\n const placeholderValue = hidePlaceholderUntilFocus\n ? isFocused\n ? placeholder\n : ' '\n : basePlaceholder;\n const placeholderClass = hidePlaceholderUntilFocus\n ? 'placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400'\n : undefined;\n\n // Label left offset depends on leading adornments\n const labelLeftClass = hasLeadingAdornment ? 'left-10' : 'left-3';\n const labelFocusLeftClass = hasLeadingAdornment ? 'peer-focus:left-10' : 'peer-focus:left-3';\n\n const renderPrefix = hasPrefix\n ? typeof prefix === 'string'\n ? (\n <span className={twMerge('text-gray-500 dark:text-gray-400', sizeConfig.text)}>\n {prefix}\n </span>\n )\n : (\n prefix\n )\n : null;\n const renderSuffix = hasSuffix\n ? typeof suffix === 'string'\n ? (\n <span className={twMerge('text-gray-500 dark:text-gray-400', sizeConfig.text)}>\n {suffix}\n </span>\n )\n : (\n suffix\n )\n : null;\n\n // Background for floated label — keep transparent for outline/text/underlined variants\n const labelBgDefault = ['outline', 'text', 'underlined'].includes(variant)\n ? 'bg-transparent'\n : 'bg-white/90 dark:bg-slate-900';\n\n const handleFocus: React.FocusEventHandler<HTMLInputElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur: React.FocusEventHandler<HTMLInputElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(false);\n onBlur?.(event);\n };\n\n return (\n <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n <div className='relative flex items-center'>\n {hasLeadingAdornment && (\n <span className='absolute left-3 inset-y-0 flex items-center gap-2'>\n {prependIconClass && (\n <i\n className={twMerge(\n 'text-gray-500 dark:text-gray-400',\n (status?.tone && statusMessageClasses[status?.tone]) || '',\n prependIconClass\n )}\n aria-hidden\n />\n )}\n {renderPrefix}\n </span>\n )}\n\n {/* input is peer so label can react with peer-* utilities */}\n <input\n {...inputProps}\n ref={ref}\n id={inputName}\n name={inputName}\n placeholder={placeholderValue}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className={twMerge(\n 'peer',\n classBase,\n variantClass,\n toneClass,\n sizeClass,\n placeholderClass,\n className\n )}\n />\n\n {label && (\n <label\n htmlFor={inputName}\n className={twMerge(\n 'absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200',\n labelLeftClass,\n // Floated state: center label's vertical middle on the top border line\n '-top-1.5 -translate-y-2/3 text-xs px-1',\n labelBgDefault,\n // focus state mirrors floated state (keeps center on border)\n labelFocusLeftClass,\n 'peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300',\n // when input is empty (placeholder shown) -> center label inside input\n 'peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400'\n )}\n >\n {label}\n </label>\n )}\n\n {hasTrailingAdornment && (\n <span className='absolute right-3 inset-y-0 flex items-center'>\n {renderSuffix}\n </span>\n )}\n\n {/* {appendIconClass && (\n <i className={twMerge('pointer-events-none absolute right-3 text-gray-500', appendIconClass)} aria-hidden />\n )} */}\n </div>\n {status?.message && (\n <span className={twMerge('text-sm', statusMessageClasses[status.tone])}>\n {status.message}\n </span>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Form/Input/index.tsx"],"names":["React","jsx","twMerge","jsxs"],"mappings":"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","file":"input.cjs","sourcesContent":["import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { InputProp, InputVariant, InputSize, InputRounded } from './types';\n\n/**\n * Text input with multiple visual variants and inline prepend/append adornments.\n * Label is purely CSS-driven (peer + placeholder-shown + focus), no hooks used.\n */\n\nconst Input = React.forwardRef<HTMLInputElement, InputProp>(\n (\n { variant = 'outline', size = 'medium', rounded = 'md', success, error, warn, className, wrapperClassName, label, prepend, append, ...props },\n ref\n ) => {\n const { placeholder, onFocus, onBlur, ...inputProps } = props;\n const reactId = React.useId();\n const hasLabel = Boolean(label);\n const hasProvidedPlaceholder = typeof placeholder === 'string' && placeholder.trim().length > 0;\n const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;\n const [isFocused, setIsFocused] = React.useState(false);\n const classBase = 'input-base transition-colors duration-200 w-full has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed';\n const inputBase =\n 'peer block w-full min-w-0 border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-0';\n const variantClasses = {\n solid:\n 'rounded border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40',\n sharp:\n 'rounded-none border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40',\n outline:\n 'rounded border-2 border-black bg-white focus-within:border-black focus-within:ring-2 focus-within:ring-black/30 dark:border-black dark:bg-transparent dark:focus-within:border-black dark:focus-within:ring-black/40',\n text: 'rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70',\n ghost:\n 'rounded border border-transparent bg-gray-50 text-gray-900 focus-within:bg-white focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-within:bg-slate-700 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/25',\n filled:\n 'rounded border border-gray-200 bg-gray-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/30',\n underlined:\n 'rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70'\n } satisfies Record<InputVariant, string>;\n const roundedClasses = {\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl'\n } satisfies Record<InputRounded, string>;\n const sizeClasses = {\n 'x-small': {\n paddingY: 'py-2',\n paddingX: 'px-2',\n text: 'text-xs'\n },\n small: {\n paddingY: 'py-2.5',\n paddingX: 'px-2.5',\n text: 'text-sm'\n },\n medium: {\n paddingY: 'py-3',\n paddingX: 'px-3',\n text: 'text-base'\n },\n large: {\n paddingY: 'py-3.5',\n paddingX: 'px-3.5',\n text: 'text-lg'\n },\n 'x-large': {\n paddingY: 'py-4',\n paddingX: 'px-4',\n text: 'text-xl'\n }\n } satisfies Record<\n InputSize,\n {\n paddingY: string;\n paddingX: string;\n text: string;\n }\n >;\n\n const status = error\n ? { tone: 'error' as const, message: error }\n : warn\n ? { tone: 'warn' as const, message: warn }\n : success\n ? { tone: 'success' as const, message: success }\n : undefined;\n\n const statusClasses = {\n error: 'border-red-500 focus:border-red-500 focus:ring-red-400',\n warn: 'border-amber-500 focus:border-amber-500 focus:ring-amber-400',\n success: 'border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400'\n } as const;\n\n const statusMessageClasses = {\n error: 'text-red-600 dark:text-red-300',\n warn: 'text-amber-600 dark:text-amber-300',\n success: 'text-emerald-600 dark:text-emerald-300'\n } as const;\n\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const toneClass = status ? statusClasses[status.tone] : undefined;\n const hasPrepend = typeof prepend === 'string' ? prepend.trim().length > 0 : Boolean(prepend);\n const hasAppend = typeof append === 'string' ? append.trim().length > 0 : Boolean(append);\n const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n const sizeClass = [sizeConfig.paddingY, sizeConfig.paddingX, sizeConfig.text].join(' ');\n const roundedClass = variant === 'sharp' || variant === 'text' || variant === 'underlined' ? 'rounded-none' : roundedClasses[rounded];\n\n // useId keeps SSR/CSR ids consistent while still providing a fallback name\n const inputName = inputProps.name || reactId;\n\n // Ensure placeholder is present when label exists so :placeholder-shown works.\n // Label stays primary; placeholder only appears on focus when the field is empty.\n const basePlaceholder = placeholder ?? (hasLabel ? ' ' : undefined);\n const placeholderValue = hidePlaceholderUntilFocus ? (isFocused ? placeholder : ' ') : basePlaceholder;\n const placeholderClass = hidePlaceholderUntilFocus\n ? 'placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400'\n : undefined;\n\n const renderPrepend = hasPrepend ? (\n typeof prepend === 'string' ? (\n <span className={twMerge('text-gray-500 dark:text-gray-400', sizeConfig.text)}>{prepend}</span>\n ) : (\n prepend\n )\n ) : null;\n const renderAppend = hasAppend ? (\n typeof append === 'string' ? (\n <span className={twMerge('text-gray-500 dark:text-gray-400', sizeConfig.text)}>{append}</span>\n ) : (\n append\n )\n ) : null;\n\n // Background for floated label — keep transparent for outline/text/underlined variants\n const labelBgDefault = 'bg-white px-1 dark:bg-slate-900';\n\n const handleFocus: React.FocusEventHandler<HTMLInputElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleBlur: React.FocusEventHandler<HTMLInputElement> = event => {\n if (hidePlaceholderUntilFocus) setIsFocused(false);\n onBlur?.(event);\n };\n\n return (\n <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n <div className={twMerge('flex w-full items-center gap-2', classBase, variantClass, roundedClass, toneClass, sizeClass, className)}>\n {hasPrepend && <span className='shrink-0 flex items-center'>{renderPrepend}</span>}\n\n <div className='relative min-w-0 flex-1'>\n {/* input is peer so label can react with peer-* utilities */}\n <input\n {...inputProps}\n ref={ref}\n id={inputName}\n name={inputName}\n placeholder={placeholderValue}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className={twMerge(inputBase, placeholderClass)}\n />\n\n {label && (\n <label\n htmlFor={inputName}\n className={twMerge(\n 'absolute left-0 z-10 transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200',\n // Floated state: keep label above the border for readability\n '-top-2 -translate-y-full text-xs',\n labelBgDefault,\n // focus state keeps the same elevated position\n 'peer-focus:left-0 peer-focus:-top-5 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-gray-600 dark:peer-focus:text-gray-300',\n // when input is empty (placeholder shown) -> center label inside input\n 'peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400',\n // explicit filled state so label remains visible for any variant/value combination\n 'peer-[&:not(:placeholder-shown)]:left-0 peer-[&:not(:placeholder-shown)]:-top-2 peer-[&:not(:placeholder-shown)]:-translate-y-full peer-[&:not(:placeholder-shown)]:text-xs peer-[&:not(:placeholder-shown)]:text-gray-700 dark:peer-[&:not(:placeholder-shown)]:text-gray-200'\n )}\n >\n {label}\n </label>\n )}\n </div>\n\n {hasAppend && <span className='shrink-0 flex items-center'>{renderAppend}</span>}\n </div>\n {status?.message && <span className={twMerge('text-sm', statusMessageClasses[status.tone])}>{status.message}</span>}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"]}
|
package/dist/input.d.cts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { I as InputStatusProps, a as InputVariant, b as InputSize, c as
|
|
1
|
+
import { I as InputStatusProps, a as InputVariant, b as InputSize, c as InputRounded } from './types-B4puM-zr.cjs';
|
|
2
2
|
import react__default from 'react';
|
|
3
|
-
import './global.types-
|
|
3
|
+
import './global.types-CjO3VRWu.cjs';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* Text input with multiple visual variants and inline
|
|
6
|
+
* Text input with multiple visual variants and inline prepend/append adornments.
|
|
7
7
|
* Label is purely CSS-driven (peer + placeholder-shown + focus), no hooks used.
|
|
8
8
|
*/
|
|
9
9
|
declare const Input: react__default.ForwardRefExoticComponent<Omit<react__default.InputHTMLAttributes<HTMLInputElement>, "size"> & InputStatusProps & {
|
|
10
10
|
variant?: InputVariant;
|
|
11
11
|
size?: InputSize;
|
|
12
|
-
|
|
12
|
+
rounded?: InputRounded;
|
|
13
13
|
wrapperClassName?: string;
|
|
14
14
|
label?: react__default.ReactNode;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
prepend?: react__default.ReactNode;
|
|
16
|
+
append?: react__default.ReactNode;
|
|
17
17
|
} & react__default.RefAttributes<HTMLInputElement>>;
|
|
18
18
|
|
|
19
19
|
export { Input as default };
|
package/dist/input.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { I as InputStatusProps, a as InputVariant, b as InputSize, c as
|
|
1
|
+
import { I as InputStatusProps, a as InputVariant, b as InputSize, c as InputRounded } from './types-BDisBwnf.js';
|
|
2
2
|
import react__default from 'react';
|
|
3
|
-
import './global.types-
|
|
3
|
+
import './global.types-CjO3VRWu.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* Text input with multiple visual variants and inline
|
|
6
|
+
* Text input with multiple visual variants and inline prepend/append adornments.
|
|
7
7
|
* Label is purely CSS-driven (peer + placeholder-shown + focus), no hooks used.
|
|
8
8
|
*/
|
|
9
9
|
declare const Input: react__default.ForwardRefExoticComponent<Omit<react__default.InputHTMLAttributes<HTMLInputElement>, "size"> & InputStatusProps & {
|
|
10
10
|
variant?: InputVariant;
|
|
11
11
|
size?: InputSize;
|
|
12
|
-
|
|
12
|
+
rounded?: InputRounded;
|
|
13
13
|
wrapperClassName?: string;
|
|
14
14
|
label?: react__default.ReactNode;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
prepend?: react__default.ReactNode;
|
|
16
|
+
append?: react__default.ReactNode;
|
|
17
17
|
} & react__default.RefAttributes<HTMLInputElement>>;
|
|
18
18
|
|
|
19
19
|
export { Input as default };
|
package/dist/input.js
CHANGED
package/dist/list/item.d.cts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
import '../global.types-
|
|
3
|
-
export { L as ListDensity, b as ListItemProps, c as ListLines, a as default } from '../index-
|
|
2
|
+
import '../global.types-CjO3VRWu.cjs';
|
|
3
|
+
export { L as ListDensity, b as ListItemProps, c as ListLines, a as default } from '../index-C19gZTrO.cjs';
|
package/dist/list/item.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
import '../global.types-
|
|
3
|
-
export { L as ListDensity, b as ListItemProps, c as ListLines, a as default } from '../index-
|
|
2
|
+
import '../global.types-CjO3VRWu.js';
|
|
3
|
+
export { L as ListDensity, b as ListItemProps, c as ListLines, a as default } from '../index-BgLrabTA.js';
|
package/dist/list.cjs
CHANGED
|
@@ -194,8 +194,7 @@ var listVariantClasses = {
|
|
|
194
194
|
ghost: "bg-gray-50 border border-transparent dark:bg-gray-900/60",
|
|
195
195
|
text: "bg-transparent border border-transparent",
|
|
196
196
|
filled: "bg-gray-50 border border-gray-200 shadow-inner shadow-gray-900/5 dark:bg-gray-900/70 dark:border-gray-800 dark:shadow-black/30",
|
|
197
|
-
underlined: "bg-transparent border border-transparent border-b border-gray-200 rounded-none dark:border-gray-800"
|
|
198
|
-
rounded: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/30"
|
|
197
|
+
underlined: "bg-transparent border border-transparent border-b border-gray-200 rounded-none dark:border-gray-800"
|
|
199
198
|
};
|
|
200
199
|
var listRoundedClasses = {
|
|
201
200
|
none: "rounded-none",
|
package/dist/list.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Containment/List/Item/index.tsx","../src/Containment/List/index.tsx"],"names":["React","jsxs","twMerge","jsx","React2"],"mappings":"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","file":"list.cjs","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { Palette } from '@lindle/linoardo/global.types';\n\nimport type { ListDensity, ListLines } from '../types.list';\n\nconst listItemBaseClasses =\n 'relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200 dark:focus-visible:ring-offset-gray-900 dark:hover:bg-white/5';\n\nconst densityClasses: Record<ListDensity, string> = {\n default: 'px-4 py-3 text-base',\n comfortable: 'px-4 py-2.5 text-sm',\n compact: 'px-3 py-2 text-sm'\n};\n\nconst lineClasses: Record<ListLines, string> = {\n one: 'min-h-[3rem]',\n two: 'min-h-[3.75rem]',\n three: 'min-h-[4.5rem]'\n};\n\nconst accentClasses: Record<Palette, { text: string; bg: string; indicator: string }> = {\n primary: {\n text: 'text-primary dark:text-primary',\n bg: 'bg-primary/10 dark:bg-primary/15',\n indicator: 'bg-primary'\n },\n neutral: {\n text: 'text-gray-900 dark:text-gray-100',\n bg: 'bg-gray-100 dark:bg-white/10',\n indicator: 'bg-gray-900 dark:bg-gray-100'\n },\n info: {\n text: 'text-sky-600 dark:text-sky-400',\n bg: 'bg-sky-50 dark:bg-sky-500/15',\n indicator: 'bg-sky-500'\n },\n success: {\n text: 'text-emerald-600 dark:text-emerald-400',\n bg: 'bg-emerald-50 dark:bg-emerald-500/15',\n indicator: 'bg-emerald-500'\n },\n warning: {\n text: 'text-amber-700 dark:text-amber-400',\n bg: 'bg-amber-50 dark:bg-amber-500/15',\n indicator: 'bg-amber-500'\n },\n danger: {\n text: 'text-red-600 dark:text-red-400',\n bg: 'bg-red-50 dark:bg-red-500/15',\n indicator: 'bg-red-500'\n },\n surface: {\n text: 'text-gray-900 dark:text-gray-100',\n bg: 'bg-gray-100 dark:bg-white/10',\n indicator: 'bg-gray-900 dark:bg-gray-100'\n },\n bw: {\n text: 'text-gray-900 dark:text-gray-100',\n bg: 'bg-gray-100 dark:bg-white/10',\n indicator: 'bg-gray-900 dark:bg-gray-100'\n }\n};\n\nexport interface ListItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n component?: React.ElementType;\n href?: string;\n target?: string;\n rel?: string;\n type?: 'button' | 'submit' | 'reset';\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n overline?: React.ReactNode;\n prepend?: React.ReactNode;\n append?: React.ReactNode;\n active?: boolean;\n disabled?: boolean;\n inset?: boolean;\n density?: ListDensity;\n lines?: ListLines;\n nav?: boolean;\n divided?: boolean;\n color?: Palette;\n sharp?: boolean;\n}\n\n/**\n * Single list row supporting titles, overlines, adornments and navigation styling.\n */\nconst ListItem = React.forwardRef<HTMLElement, ListItemProps>((props, ref) => {\n const {\n component,\n href,\n target,\n rel,\n type,\n title,\n subtitle,\n overline,\n prepend,\n append,\n active = false,\n disabled = false,\n inset = false,\n density: densityOverride,\n lines: linesOverride,\n nav: navOverride,\n divided: dividedOverride,\n color: colorOverride,\n sharp: sharpOverride,\n className,\n children,\n tabIndex,\n role,\n ...rest\n } = props;\n\n const density = densityOverride ?? 'default';\n const lines = linesOverride ?? 'one';\n const nav = navOverride ?? false;\n const divided = dividedOverride ?? false;\n const color = colorOverride ?? 'primary';\n const sharp = sharpOverride ?? false;\n const accent = accentClasses[color] ?? accentClasses.primary;\n const shapeClass = divided || sharp ? 'rounded-none' : 'rounded-lg';\n\n const Component = component ?? (href ? 'a' : 'div');\n const interactive =\n typeof rest.onClick === 'function' || Component === 'a' || Component === 'button';\n\n const resolvedRole = role ?? 'listitem';\n const resolvedTabIndex = disabled\n ? -1\n : tabIndex ?? (interactive && Component === 'div' ? 0 : undefined);\n const resolvedRel = Component === 'a' ? rel : undefined;\n const resolvedTarget = Component === 'a' ? target : undefined;\n const resolvedHref = Component === 'a' ? href : undefined;\n const resolvedType = Component === 'button' ? type ?? 'button' : undefined;\n\n const disabledClass = disabled ? 'pointer-events-none opacity-60' : 'cursor-pointer';\n const navPaddingClass = nav ? 'pl-5' : undefined;\n const insetClass = inset ? 'pl-12' : undefined;\n const activeClasses = active ? accent.bg : undefined;\n\n return (\n <Component\n {...rest}\n ref={ref}\n role={resolvedRole}\n tabIndex={resolvedTabIndex}\n aria-disabled={disabled || undefined}\n aria-current={active ? 'true' : undefined}\n className={twMerge(\n listItemBaseClasses,\n densityClasses[density],\n lineClasses[lines],\n shapeClass,\n navPaddingClass,\n insetClass,\n disabledClass,\n activeClasses,\n className\n )}\n href={resolvedHref}\n target={resolvedTarget}\n rel={resolvedRel}\n type={resolvedType}\n data-active={active || undefined}\n >\n {nav && (\n <span\n aria-hidden\n className={twMerge(\n 'absolute left-1 top-2 bottom-2 w-0.5 rounded-full bg-transparent transition-colors duration-150',\n active ? accent.indicator : undefined\n )}\n />\n )}\n {prepend && (\n <span className='flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500 dark:text-gray-400'>\n {prepend}\n </span>\n )}\n <span className='flex min-w-0 flex-col gap-0.5 text-left'>\n {overline && (\n <span className='text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400'>\n {overline}\n </span>\n )}\n {title && (\n <span\n className={twMerge(\n 'truncate font-medium text-gray-900 dark:text-gray-100',\n active ? accent.text : undefined\n )}\n >\n {title}\n </span>\n )}\n {subtitle && <span className='text-sm text-gray-500 dark:text-gray-400'>{subtitle}</span>}\n {children}\n </span>\n {append && (\n <span className='ml-auto flex items-center gap-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400'>\n {append}\n </span>\n )}\n </Component>\n );\n});\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\nexport type { ListDensity, ListLines } from '../types.list';\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { Palette } from '@lindle/linoardo/global.types';\n\nimport ListItem from './Item';\nimport type { ListItemProps } from './Item';\nimport type { ListDensity, ListLines, ListRounded, ListVariant } from './types.list';\n\nconst listBaseClasses =\n 'flex w-full min-w-0 flex-col text-gray-900 transition-colors duration-150 dark:text-gray-100';\n\nconst listVariantClasses: Record<ListVariant, string> = {\n solid:\n 'bg-white border border-gray-200 shadow-sm shadow-gray-900/5 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20',\n sharp:\n 'bg-white border border-gray-200 shadow-sm shadow-gray-900/5 rounded-none dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20',\n outline: 'bg-transparent border border-gray-300 dark:border-gray-700',\n ghost: 'bg-gray-50 border border-transparent dark:bg-gray-900/60',\n text: 'bg-transparent border border-transparent',\n filled:\n 'bg-gray-50 border border-gray-200 shadow-inner shadow-gray-900/5 dark:bg-gray-900/70 dark:border-gray-800 dark:shadow-black/30',\n underlined:\n 'bg-transparent border border-transparent border-b border-gray-200 rounded-none dark:border-gray-800',\n rounded:\n 'bg-white border border-gray-200 shadow-lg shadow-gray-900/10 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/30'\n};\n\nconst listRoundedClasses: Record<ListRounded, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n pill: 'rounded-full'\n};\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: ListVariant;\n density?: ListDensity;\n lines?: ListLines;\n nav?: boolean;\n divided?: boolean;\n rounded?: ListRounded;\n color?: Palette;\n}\n\nconst isListItemElement = (element: React.ReactNode): element is React.ReactElement<ListItemProps> => {\n if (!React.isValidElement(element)) {\n return false;\n }\n\n const elementType = element.type as { displayName?: string };\n return element.type === ListItem || elementType.displayName === ListItem.displayName;\n};\n\n/**\n * List container that normalizes spacing, rounding and density for nested `ListItem` children.\n */\nconst List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {\n const {\n variant = 'solid',\n density = 'default',\n lines = 'one',\n nav = false,\n divided = false,\n rounded = 'lg',\n color = 'primary',\n className,\n role,\n children,\n ...rest\n } = props;\n\n const isSharpVariant = variant === 'sharp';\n const variantClass = listVariantClasses[variant] ?? listVariantClasses.solid;\n const roundedClass = isSharpVariant ? 'rounded-none' : (listRoundedClasses[rounded] ?? listRoundedClasses.lg);\n const dividerClass = divided ? 'divide-y divide-gray-100 dark:divide-gray-800' : undefined;\n const gapClass = divided ? 'p-0' : 'gap-1 p-1';\n const navClass = nav ? 'py-1' : undefined;\n const accentColor = color;\n\n const enhanceChild = (child: React.ReactNode): React.ReactNode => {\n if (!React.isValidElement(child)) {\n return child;\n }\n\n if (isListItemElement(child)) {\n return React.cloneElement(child, {\n density: child.props.density ?? density,\n lines: child.props.lines ?? lines,\n nav: child.props.nav ?? nav,\n divided: child.props.divided ?? divided,\n color: child.props.color ?? accentColor,\n sharp: child.props.sharp ?? isSharpVariant\n });\n }\n\n if (child.props && typeof child.props === 'object' && 'children' in child.props) {\n const nestedChildren = React.Children.map(child.props.children as React.ReactNode, enhanceChild);\n if (nestedChildren !== child.props.children) {\n return React.cloneElement(child, undefined, nestedChildren);\n }\n }\n\n return child;\n };\n\n const resolvedChildren = React.Children.map(children, enhanceChild);\n\n return (\n <div\n {...rest}\n ref={ref}\n role={role ?? 'list'}\n className={twMerge(listBaseClasses, variantClass, roundedClass, dividerClass, gapClass, navClass, className)}\n >\n {resolvedChildren}\n </div>\n );\n});\n\nList.displayName = 'List';\n\ntype ListComponent = React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> & {\n Item: typeof ListItem;\n};\n\nconst ListWithItem = List as ListComponent;\nListWithItem.Item = ListItem;\n\nexport { ListItem };\nexport type { ListItemProps } from './Item';\nexport type { ListVariant, ListDensity, ListLines, ListRounded } from './types.list';\nexport default ListWithItem;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Containment/List/Item/index.tsx","../src/Containment/List/index.tsx"],"names":["React","jsxs","twMerge","jsx","React2"],"mappings":"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","file":"list.cjs","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { Palette } from '@lindle/linoardo/global.types';\n\nimport type { ListDensity, ListLines } from '../types.list';\n\nconst listItemBaseClasses =\n 'relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200 dark:focus-visible:ring-offset-gray-900 dark:hover:bg-white/5';\n\nconst densityClasses: Record<ListDensity, string> = {\n default: 'px-4 py-3 text-base',\n comfortable: 'px-4 py-2.5 text-sm',\n compact: 'px-3 py-2 text-sm'\n};\n\nconst lineClasses: Record<ListLines, string> = {\n one: 'min-h-[3rem]',\n two: 'min-h-[3.75rem]',\n three: 'min-h-[4.5rem]'\n};\n\nconst accentClasses: Record<Palette, { text: string; bg: string; indicator: string }> = {\n primary: {\n text: 'text-primary dark:text-primary',\n bg: 'bg-primary/10 dark:bg-primary/15',\n indicator: 'bg-primary'\n },\n neutral: {\n text: 'text-gray-900 dark:text-gray-100',\n bg: 'bg-gray-100 dark:bg-white/10',\n indicator: 'bg-gray-900 dark:bg-gray-100'\n },\n info: {\n text: 'text-sky-600 dark:text-sky-400',\n bg: 'bg-sky-50 dark:bg-sky-500/15',\n indicator: 'bg-sky-500'\n },\n success: {\n text: 'text-emerald-600 dark:text-emerald-400',\n bg: 'bg-emerald-50 dark:bg-emerald-500/15',\n indicator: 'bg-emerald-500'\n },\n warning: {\n text: 'text-amber-700 dark:text-amber-400',\n bg: 'bg-amber-50 dark:bg-amber-500/15',\n indicator: 'bg-amber-500'\n },\n danger: {\n text: 'text-red-600 dark:text-red-400',\n bg: 'bg-red-50 dark:bg-red-500/15',\n indicator: 'bg-red-500'\n },\n surface: {\n text: 'text-gray-900 dark:text-gray-100',\n bg: 'bg-gray-100 dark:bg-white/10',\n indicator: 'bg-gray-900 dark:bg-gray-100'\n },\n bw: {\n text: 'text-gray-900 dark:text-gray-100',\n bg: 'bg-gray-100 dark:bg-white/10',\n indicator: 'bg-gray-900 dark:bg-gray-100'\n }\n};\n\nexport interface ListItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n component?: React.ElementType;\n href?: string;\n target?: string;\n rel?: string;\n type?: 'button' | 'submit' | 'reset';\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n overline?: React.ReactNode;\n prepend?: React.ReactNode;\n append?: React.ReactNode;\n active?: boolean;\n disabled?: boolean;\n inset?: boolean;\n density?: ListDensity;\n lines?: ListLines;\n nav?: boolean;\n divided?: boolean;\n color?: Palette;\n sharp?: boolean;\n}\n\n/**\n * Single list row supporting titles, overlines, adornments and navigation styling.\n */\nconst ListItem = React.forwardRef<HTMLElement, ListItemProps>((props, ref) => {\n const {\n component,\n href,\n target,\n rel,\n type,\n title,\n subtitle,\n overline,\n prepend,\n append,\n active = false,\n disabled = false,\n inset = false,\n density: densityOverride,\n lines: linesOverride,\n nav: navOverride,\n divided: dividedOverride,\n color: colorOverride,\n sharp: sharpOverride,\n className,\n children,\n tabIndex,\n role,\n ...rest\n } = props;\n\n const density = densityOverride ?? 'default';\n const lines = linesOverride ?? 'one';\n const nav = navOverride ?? false;\n const divided = dividedOverride ?? false;\n const color = colorOverride ?? 'primary';\n const sharp = sharpOverride ?? false;\n const accent = accentClasses[color] ?? accentClasses.primary;\n const shapeClass = divided || sharp ? 'rounded-none' : 'rounded-lg';\n\n const Component = component ?? (href ? 'a' : 'div');\n const interactive =\n typeof rest.onClick === 'function' || Component === 'a' || Component === 'button';\n\n const resolvedRole = role ?? 'listitem';\n const resolvedTabIndex = disabled\n ? -1\n : tabIndex ?? (interactive && Component === 'div' ? 0 : undefined);\n const resolvedRel = Component === 'a' ? rel : undefined;\n const resolvedTarget = Component === 'a' ? target : undefined;\n const resolvedHref = Component === 'a' ? href : undefined;\n const resolvedType = Component === 'button' ? type ?? 'button' : undefined;\n\n const disabledClass = disabled ? 'pointer-events-none opacity-60' : 'cursor-pointer';\n const navPaddingClass = nav ? 'pl-5' : undefined;\n const insetClass = inset ? 'pl-12' : undefined;\n const activeClasses = active ? accent.bg : undefined;\n\n return (\n <Component\n {...rest}\n ref={ref}\n role={resolvedRole}\n tabIndex={resolvedTabIndex}\n aria-disabled={disabled || undefined}\n aria-current={active ? 'true' : undefined}\n className={twMerge(\n listItemBaseClasses,\n densityClasses[density],\n lineClasses[lines],\n shapeClass,\n navPaddingClass,\n insetClass,\n disabledClass,\n activeClasses,\n className\n )}\n href={resolvedHref}\n target={resolvedTarget}\n rel={resolvedRel}\n type={resolvedType}\n data-active={active || undefined}\n >\n {nav && (\n <span\n aria-hidden\n className={twMerge(\n 'absolute left-1 top-2 bottom-2 w-0.5 rounded-full bg-transparent transition-colors duration-150',\n active ? accent.indicator : undefined\n )}\n />\n )}\n {prepend && (\n <span className='flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500 dark:text-gray-400'>\n {prepend}\n </span>\n )}\n <span className='flex min-w-0 flex-col gap-0.5 text-left'>\n {overline && (\n <span className='text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400'>\n {overline}\n </span>\n )}\n {title && (\n <span\n className={twMerge(\n 'truncate font-medium text-gray-900 dark:text-gray-100',\n active ? accent.text : undefined\n )}\n >\n {title}\n </span>\n )}\n {subtitle && <span className='text-sm text-gray-500 dark:text-gray-400'>{subtitle}</span>}\n {children}\n </span>\n {append && (\n <span className='ml-auto flex items-center gap-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400'>\n {append}\n </span>\n )}\n </Component>\n );\n});\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\nexport type { ListDensity, ListLines } from '../types.list';\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { Palette } from '@lindle/linoardo/global.types';\n\nimport ListItem from './Item';\nimport type { ListItemProps } from './Item';\nimport type { ListDensity, ListLines, ListRounded, ListVariant } from './types.list';\n\nconst listBaseClasses =\n 'flex w-full min-w-0 flex-col text-gray-900 transition-colors duration-150 dark:text-gray-100';\n\nconst listVariantClasses: Record<ListVariant, string> = {\n solid:\n 'bg-white border border-gray-200 shadow-sm shadow-gray-900/5 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20',\n sharp:\n 'bg-white border border-gray-200 shadow-sm shadow-gray-900/5 rounded-none dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20',\n outline: 'bg-transparent border border-gray-300 dark:border-gray-700',\n ghost: 'bg-gray-50 border border-transparent dark:bg-gray-900/60',\n text: 'bg-transparent border border-transparent',\n filled:\n 'bg-gray-50 border border-gray-200 shadow-inner shadow-gray-900/5 dark:bg-gray-900/70 dark:border-gray-800 dark:shadow-black/30',\n underlined:\n 'bg-transparent border border-transparent border-b border-gray-200 rounded-none dark:border-gray-800',\n};\n\nconst listRoundedClasses: Record<ListRounded, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n pill: 'rounded-full'\n};\n\nexport interface ListProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: ListVariant;\n density?: ListDensity;\n lines?: ListLines;\n nav?: boolean;\n divided?: boolean;\n rounded?: ListRounded;\n color?: Palette;\n}\n\nconst isListItemElement = (element: React.ReactNode): element is React.ReactElement<ListItemProps> => {\n if (!React.isValidElement(element)) {\n return false;\n }\n\n const elementType = element.type as { displayName?: string };\n return element.type === ListItem || elementType.displayName === ListItem.displayName;\n};\n\n/**\n * List container that normalizes spacing, rounding and density for nested `ListItem` children.\n */\nconst List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {\n const {\n variant = 'solid',\n density = 'default',\n lines = 'one',\n nav = false,\n divided = false,\n rounded = 'lg',\n color = 'primary',\n className,\n role,\n children,\n ...rest\n } = props;\n\n const isSharpVariant = variant === 'sharp';\n const variantClass = listVariantClasses[variant] ?? listVariantClasses.solid;\n const roundedClass = isSharpVariant ? 'rounded-none' : (listRoundedClasses[rounded] ?? listRoundedClasses.lg);\n const dividerClass = divided ? 'divide-y divide-gray-100 dark:divide-gray-800' : undefined;\n const gapClass = divided ? 'p-0' : 'gap-1 p-1';\n const navClass = nav ? 'py-1' : undefined;\n const accentColor = color;\n\n const enhanceChild = (child: React.ReactNode): React.ReactNode => {\n if (!React.isValidElement(child)) {\n return child;\n }\n\n if (isListItemElement(child)) {\n return React.cloneElement(child, {\n density: child.props.density ?? density,\n lines: child.props.lines ?? lines,\n nav: child.props.nav ?? nav,\n divided: child.props.divided ?? divided,\n color: child.props.color ?? accentColor,\n sharp: child.props.sharp ?? isSharpVariant\n });\n }\n\n if (child.props && typeof child.props === 'object' && 'children' in child.props) {\n const nestedChildren = React.Children.map(child.props.children as React.ReactNode, enhanceChild);\n if (nestedChildren !== child.props.children) {\n return React.cloneElement(child, undefined, nestedChildren);\n }\n }\n\n return child;\n };\n\n const resolvedChildren = React.Children.map(children, enhanceChild);\n\n return (\n <div\n {...rest}\n ref={ref}\n role={role ?? 'list'}\n className={twMerge(listBaseClasses, variantClass, roundedClass, dividerClass, gapClass, navClass, className)}\n >\n {resolvedChildren}\n </div>\n );\n});\n\nList.displayName = 'List';\n\ntype ListComponent = React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> & {\n Item: typeof ListItem;\n};\n\nconst ListWithItem = List as ListComponent;\nListWithItem.Item = ListItem;\n\nexport { ListItem };\nexport type { ListItemProps } from './Item';\nexport type { ListVariant, ListDensity, ListLines, ListRounded } from './types.list';\nexport default ListWithItem;\n"]}
|
package/dist/list.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { a as Palette } from './global.types-
|
|
3
|
-
import { e as ListVariant, L as ListDensity, c as ListLines, d as ListRounded, a as ListItem } from './index-
|
|
4
|
-
export { b as ListItemProps } from './index-
|
|
2
|
+
import { a as Palette } from './global.types-CjO3VRWu.cjs';
|
|
3
|
+
import { e as ListVariant, L as ListDensity, c as ListLines, d as ListRounded, a as ListItem } from './index-C19gZTrO.cjs';
|
|
4
|
+
export { b as ListItemProps } from './index-C19gZTrO.cjs';
|
|
5
5
|
|
|
6
6
|
interface ListProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
7
7
|
variant?: ListVariant;
|
package/dist/list.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { a as Palette } from './global.types-
|
|
3
|
-
import { e as ListVariant, L as ListDensity, c as ListLines, d as ListRounded, a as ListItem } from './index-
|
|
4
|
-
export { b as ListItemProps } from './index-
|
|
2
|
+
import { a as Palette } from './global.types-CjO3VRWu.js';
|
|
3
|
+
import { e as ListVariant, L as ListDensity, c as ListLines, d as ListRounded, a as ListItem } from './index-BgLrabTA.js';
|
|
4
|
+
export { b as ListItemProps } from './index-BgLrabTA.js';
|
|
5
5
|
|
|
6
6
|
interface ListProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
7
7
|
variant?: ListVariant;
|
package/dist/list.js
CHANGED