@lindle/linoardo 1.0.1 → 1.0.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.
- package/dist/fonts/materialdesignicons-webfont.eot +0 -0
- package/dist/fonts/materialdesignicons-webfont.ttf +0 -0
- package/dist/fonts/materialdesignicons-webfont.woff +0 -0
- package/dist/fonts/materialdesignicons-webfont.woff2 +0 -0
- package/dist/index.cjs +192 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +49 -5
- package/dist/index.d.ts +49 -5
- package/dist/index.js +192 -8
- package/dist/index.js.map +1 -1
- package/dist/styles.css +23252 -35
- package/package.json +19 -7
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/index.cjs
CHANGED
|
@@ -1,14 +1,199 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var tailwindMerge = require('tailwind-merge');
|
|
3
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
5
|
|
|
5
|
-
// src/
|
|
6
|
-
function Button({ variant = "solid", className = "", ...props }) {
|
|
7
|
-
const base = "btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-600";
|
|
8
|
-
const tone = variant === "solid" ? "bg-brand-600 text-white hover:opacity-90" : "border border-brand-600 text-brand-600 hover:bg-brand-600/5";
|
|
9
|
-
return /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${base} ${tone} ${className}`, ...props });
|
|
10
|
-
}
|
|
6
|
+
// src/Containment/Button/index.tsx
|
|
11
7
|
|
|
12
|
-
|
|
8
|
+
// src/globals.ts
|
|
9
|
+
var iconBaseClasses = {
|
|
10
|
+
mdi: ["mdi"]
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
// src/Containment/Button/states.button.ts
|
|
14
|
+
var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-md transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
|
|
15
|
+
var paletteVariantClasses = {
|
|
16
|
+
primary: {
|
|
17
|
+
solid: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
|
|
18
|
+
outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary",
|
|
19
|
+
ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40",
|
|
20
|
+
text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2"
|
|
21
|
+
},
|
|
22
|
+
neutral: {
|
|
23
|
+
solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
|
|
24
|
+
outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400",
|
|
25
|
+
ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300",
|
|
26
|
+
text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2"
|
|
27
|
+
},
|
|
28
|
+
info: {
|
|
29
|
+
solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
|
|
30
|
+
outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400",
|
|
31
|
+
ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300",
|
|
32
|
+
text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2"
|
|
33
|
+
},
|
|
34
|
+
success: {
|
|
35
|
+
solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
|
|
36
|
+
outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400",
|
|
37
|
+
ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300",
|
|
38
|
+
text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2"
|
|
39
|
+
},
|
|
40
|
+
warning: {
|
|
41
|
+
solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
|
|
42
|
+
outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400",
|
|
43
|
+
ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300",
|
|
44
|
+
text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2"
|
|
45
|
+
},
|
|
46
|
+
danger: {
|
|
47
|
+
solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
|
|
48
|
+
outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400",
|
|
49
|
+
ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300",
|
|
50
|
+
text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2"
|
|
51
|
+
},
|
|
52
|
+
surface: {
|
|
53
|
+
solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
|
|
54
|
+
outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200",
|
|
55
|
+
ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200",
|
|
56
|
+
text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2"
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
var resolveVariantClass = (variant, palette) => {
|
|
60
|
+
const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;
|
|
61
|
+
return paletteVariants[variant] ?? paletteVariants.solid;
|
|
62
|
+
};
|
|
63
|
+
var resolveIconClassName = (icon) => {
|
|
64
|
+
if (!icon) {
|
|
65
|
+
return void 0;
|
|
66
|
+
}
|
|
67
|
+
if (typeof icon === "string") {
|
|
68
|
+
const trimmed = icon.trim();
|
|
69
|
+
if (!trimmed) {
|
|
70
|
+
return void 0;
|
|
71
|
+
}
|
|
72
|
+
if (trimmed.includes(" ")) {
|
|
73
|
+
return trimmed;
|
|
74
|
+
}
|
|
75
|
+
const normalized2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
76
|
+
return ["mdi", normalized2].join(" ");
|
|
77
|
+
}
|
|
78
|
+
const [library, providedName] = icon;
|
|
79
|
+
const normalizedLibrary = library.trim();
|
|
80
|
+
const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
|
|
81
|
+
const iconName = providedName.trim();
|
|
82
|
+
if (!iconName) {
|
|
83
|
+
return baseClasses.join(" ");
|
|
84
|
+
}
|
|
85
|
+
const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
86
|
+
return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
|
|
87
|
+
};
|
|
88
|
+
var sizeClasses = {
|
|
89
|
+
"x-small": "px-2.5 py-1 text-xs",
|
|
90
|
+
small: "px-3 py-1.5 text-sm",
|
|
91
|
+
medium: "px-4 py-2 text-base",
|
|
92
|
+
large: "px-6 py-3 text-lg",
|
|
93
|
+
"x-large": "px-7 py-3.5 text-xl"
|
|
94
|
+
};
|
|
95
|
+
var Button = ({
|
|
96
|
+
variant = "solid",
|
|
97
|
+
color = "primary",
|
|
98
|
+
size = "medium",
|
|
99
|
+
block = false,
|
|
100
|
+
loading = false,
|
|
101
|
+
icon,
|
|
102
|
+
className,
|
|
103
|
+
children,
|
|
104
|
+
disabled,
|
|
105
|
+
onClick,
|
|
106
|
+
...rest
|
|
107
|
+
}) => {
|
|
108
|
+
const variantClass = resolveVariantClass(variant, color);
|
|
109
|
+
const sizeClass = sizeClasses[size] ?? sizeClasses.medium;
|
|
110
|
+
const blockClass = block ? "w-full" : null;
|
|
111
|
+
const isDisabled = disabled || loading;
|
|
112
|
+
const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
|
|
113
|
+
const resolvedIconClass = resolveIconClassName(icon);
|
|
114
|
+
const shouldRenderIcon = Boolean(resolvedIconClass && !loading);
|
|
115
|
+
const hasDecorators = (loading || shouldRenderIcon) && Boolean(children);
|
|
116
|
+
const gapClass = hasDecorators ? "gap-2" : void 0;
|
|
117
|
+
const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
|
|
118
|
+
const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", resolvedIconClass) : void 0;
|
|
119
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
120
|
+
"button",
|
|
121
|
+
{
|
|
122
|
+
...rest,
|
|
123
|
+
onClick,
|
|
124
|
+
disabled: isDisabled,
|
|
125
|
+
className: tailwindMerge.twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
|
|
126
|
+
"data-loading": loading || void 0,
|
|
127
|
+
"aria-busy": loading || void 0,
|
|
128
|
+
children: [
|
|
129
|
+
loading && /* @__PURE__ */ jsxRuntime.jsx("i", { className: loadingIconClass, "aria-hidden": true }),
|
|
130
|
+
iconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClassName, "aria-hidden": true }),
|
|
131
|
+
children
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
|
+
var Button_default = Button;
|
|
137
|
+
|
|
138
|
+
// src/Form/Input/states.input.ts
|
|
139
|
+
var resolveIconClassName2 = (icon) => {
|
|
140
|
+
if (!icon) {
|
|
141
|
+
return void 0;
|
|
142
|
+
}
|
|
143
|
+
if (typeof icon === "string") {
|
|
144
|
+
const trimmed = icon.trim();
|
|
145
|
+
if (!trimmed) {
|
|
146
|
+
return void 0;
|
|
147
|
+
}
|
|
148
|
+
if (trimmed.includes(" ")) {
|
|
149
|
+
return trimmed;
|
|
150
|
+
}
|
|
151
|
+
const normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
152
|
+
return ["mdi", normalizedName2].join(" ");
|
|
153
|
+
}
|
|
154
|
+
const [library, iconNameRaw] = icon;
|
|
155
|
+
const baseClasses = iconBaseClasses[library] ?? [library];
|
|
156
|
+
const iconName = iconNameRaw.trim();
|
|
157
|
+
if (!iconName) {
|
|
158
|
+
return baseClasses.join(" ");
|
|
159
|
+
}
|
|
160
|
+
const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
161
|
+
const classes = [...baseClasses, normalizedName];
|
|
162
|
+
return Array.from(new Set(classes)).join(" ");
|
|
163
|
+
};
|
|
164
|
+
var Input = ({ variant = "outline", success, error, warn, icon, className, ...props }) => {
|
|
165
|
+
const classBase = "input-base px-3 py-2 focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
|
|
166
|
+
const variantClasses = {
|
|
167
|
+
outline: "rounded border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
|
|
168
|
+
filled: "rounded bg-gray-100 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
|
|
169
|
+
underlined: "border-b-1 border-gray-300 focus:border-red-400 focus:outline-none focus:ring-none"
|
|
170
|
+
};
|
|
171
|
+
const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
|
|
172
|
+
const statusClasses = {
|
|
173
|
+
error: "border-red-500 focus:border-red-500 focus:ring-red-400",
|
|
174
|
+
warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
|
|
175
|
+
success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
|
|
176
|
+
};
|
|
177
|
+
const statusMessageClasses = {
|
|
178
|
+
error: "text-red-600",
|
|
179
|
+
warn: "text-amber-600",
|
|
180
|
+
success: "text-emerald-600"
|
|
181
|
+
};
|
|
182
|
+
const variantClass = variantClasses[variant] ?? variantClasses.outline;
|
|
183
|
+
const toneClass = status ? statusClasses[status.tone] : void 0;
|
|
184
|
+
const prependIconClass = resolveIconClassName2(icon);
|
|
185
|
+
const prependPadding = prependIconClass ? "pl-10" : void 0;
|
|
186
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
187
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
|
|
188
|
+
prependIconClass && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("pointer-events-none absolute left-3 ", prependIconClass), "aria-hidden": true }),
|
|
189
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", { ...props, className: tailwindMerge.twMerge(classBase, variantClass, toneClass, prependPadding, className) })
|
|
190
|
+
] }),
|
|
191
|
+
status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
|
|
192
|
+
] });
|
|
193
|
+
};
|
|
194
|
+
var Input_default = Input;
|
|
195
|
+
|
|
196
|
+
exports.Button = Button_default;
|
|
197
|
+
exports.Input = Input_default;
|
|
13
198
|
//# sourceMappingURL=index.cjs.map
|
|
14
199
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button.tsx"],"names":["jsx"],"mappings":";;;;;AAMO,SAAS,MAAA,CAAO,EAAE,OAAA,GAAU,OAAA,EAAS,YAAY,EAAA,EAAI,GAAG,OAAM,EAAgB;AACnF,EAAA,MAAM,IAAA,GAAO,uFAAA;AACb,EAAA,MAAM,IAAA,GACJ,OAAA,KAAY,OAAA,GACR,0CAAA,GACA,6DAAA;AAEN,EAAA,uBAAOA,cAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAW,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAK,GAAG,KAAA,EAAO,CAAA;AACvE","file":"index.cjs","sourcesContent":["import * as React from 'react';\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: 'solid' | 'outline';\n};\n\nexport function Button({ variant = 'solid', className = '', ...props }: ButtonProps) {\n const base = 'btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-600';\n const tone =\n variant === 'solid'\n ? 'bg-brand-600 text-white hover:opacity-90'\n : 'border border-brand-600 text-brand-600 hover:bg-brand-600/5';\n\n return <button className={`${base} ${tone} ${className}`} {...props} />;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx","../src/Form/Input/states.input.ts","../src/Form/Input/index.tsx"],"names":["normalized","twMerge","jsxs","jsx","resolveIconClassName","normalizedName"],"mappings":"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","file":"index.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps } from './types.button';\nimport { ContainmentSize, ContainmentVariant } from '../containment.types';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-md transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst paletteVariantClasses: Record<Palette, Record<ContainmentVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline: 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost: 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline: 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost: 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline: 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost: 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline: 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost: 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline: 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost: 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline: 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost: 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline: 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost: 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2'\n }\n};\n\nexport const resolveVariantClass = (variant: ContainmentVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['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 normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [normalizedLibrary];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<ContainmentSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport { base, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button: React.FC<ButtonProps> = ({\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n icon,\n className,\n children,\n disabled,\n onClick,\n ...rest\n}) => {\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = sizeClasses[size] ?? sizeClasses.medium;\n const blockClass = block ? 'w-full' : null;\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(children);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading ? twMerge('mdi mdi-loading mdi-spin', 'leading-none') : undefined;\n const iconClassName = shouldRenderIcon ? twMerge('leading-none', resolvedIconClass) : undefined;\n\n return (\n <button\n {...rest}\n onClick={onClick}\n disabled={isDisabled}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {children}\n </button>\n );\n};\n\nexport default Button;\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","'use client';\n\nimport { twMerge } from 'tailwind-merge';\nimport { InputProp, InputVariant } from './types';\nimport { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { resolveIconClassName } from './states.input';\n\nconst Input: React.FC<InputProp> = ({ variant = 'outline', success, error, warn, icon, className, ...props }) => {\n const classBase =\n 'input-base px-3 py-2 focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed';\n const variantClasses = {\n outline: 'rounded border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary',\n filled: 'rounded bg-gray-100 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary',\n underlined: 'border-b-1 border-gray-300 focus:border-red-400 focus:outline-none focus:ring-none'\n } satisfies Record<InputVariant, string>;\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',\n warn: 'text-amber-600',\n success: 'text-emerald-600'\n } as const;\n\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const toneClass = status ? statusClasses[status.tone] : undefined;\n const prependIconClass = resolveIconClassName(icon);\n const prependPadding = prependIconClass ? 'pl-10' : undefined;\n\n return (\n <div className='flex flex-col gap-1'>\n <div className='relative flex items-center'>\n {prependIconClass && (\n <i className={twMerge('pointer-events-none absolute left-3 ', prependIconClass)} aria-hidden />\n )}\n <input {...props} className={twMerge(classBase, variantClass, toneClass, prependPadding, className)} />\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])}>{status.message}</span>\n )}\n </div>\n );\n};\n\nexport default Input;\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,9 +1,53 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
|
|
3
|
+
type Palette = 'primary' | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'surface';
|
|
4
|
+
type IconLibrary$1 = 'mdi';
|
|
5
|
+
type PropIcon = string | readonly [IconLibrary$1, string];
|
|
6
|
+
|
|
7
|
+
type ContainmentVariant = 'solid' | 'outline' | 'text' | 'ghost';
|
|
8
|
+
type ContainmentSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
3
9
|
|
|
4
10
|
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
5
|
-
variant?:
|
|
11
|
+
variant?: ContainmentVariant;
|
|
12
|
+
color?: Palette;
|
|
13
|
+
size?: ContainmentSize;
|
|
14
|
+
block?: boolean;
|
|
15
|
+
loading?: boolean;
|
|
16
|
+
icon?: PropIcon;
|
|
6
17
|
};
|
|
7
|
-
declare function Button({ variant, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
8
18
|
|
|
9
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Containment button supporting variant, size, block layout and loading states.
|
|
21
|
+
*/
|
|
22
|
+
declare const Button: React$1.FC<ButtonProps>;
|
|
23
|
+
|
|
24
|
+
type InputVariant = 'outline' | 'filled' | 'underlined';
|
|
25
|
+
type StatusMessage = string;
|
|
26
|
+
type EmptyStatus = undefined | null | '';
|
|
27
|
+
type IconLibrary = 'mdi';
|
|
28
|
+
type InputIcon = string | readonly [IconLibrary, string];
|
|
29
|
+
type InputStatusProps = {
|
|
30
|
+
success: StatusMessage;
|
|
31
|
+
error?: EmptyStatus;
|
|
32
|
+
warn?: EmptyStatus;
|
|
33
|
+
} | {
|
|
34
|
+
success?: EmptyStatus;
|
|
35
|
+
error: StatusMessage;
|
|
36
|
+
warn?: EmptyStatus;
|
|
37
|
+
} | {
|
|
38
|
+
success?: EmptyStatus;
|
|
39
|
+
error?: EmptyStatus;
|
|
40
|
+
warn: StatusMessage;
|
|
41
|
+
} | {
|
|
42
|
+
success?: EmptyStatus;
|
|
43
|
+
error?: EmptyStatus;
|
|
44
|
+
warn?: EmptyStatus;
|
|
45
|
+
};
|
|
46
|
+
type InputProp = React.InputHTMLAttributes<HTMLInputElement> & InputStatusProps & {
|
|
47
|
+
variant?: InputVariant;
|
|
48
|
+
icon?: InputIcon;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
declare const Input: React.FC<InputProp>;
|
|
52
|
+
|
|
53
|
+
export { Button, Input };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,53 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
|
|
3
|
+
type Palette = 'primary' | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'surface';
|
|
4
|
+
type IconLibrary$1 = 'mdi';
|
|
5
|
+
type PropIcon = string | readonly [IconLibrary$1, string];
|
|
6
|
+
|
|
7
|
+
type ContainmentVariant = 'solid' | 'outline' | 'text' | 'ghost';
|
|
8
|
+
type ContainmentSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
3
9
|
|
|
4
10
|
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
5
|
-
variant?:
|
|
11
|
+
variant?: ContainmentVariant;
|
|
12
|
+
color?: Palette;
|
|
13
|
+
size?: ContainmentSize;
|
|
14
|
+
block?: boolean;
|
|
15
|
+
loading?: boolean;
|
|
16
|
+
icon?: PropIcon;
|
|
6
17
|
};
|
|
7
|
-
declare function Button({ variant, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
8
18
|
|
|
9
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Containment button supporting variant, size, block layout and loading states.
|
|
21
|
+
*/
|
|
22
|
+
declare const Button: React$1.FC<ButtonProps>;
|
|
23
|
+
|
|
24
|
+
type InputVariant = 'outline' | 'filled' | 'underlined';
|
|
25
|
+
type StatusMessage = string;
|
|
26
|
+
type EmptyStatus = undefined | null | '';
|
|
27
|
+
type IconLibrary = 'mdi';
|
|
28
|
+
type InputIcon = string | readonly [IconLibrary, string];
|
|
29
|
+
type InputStatusProps = {
|
|
30
|
+
success: StatusMessage;
|
|
31
|
+
error?: EmptyStatus;
|
|
32
|
+
warn?: EmptyStatus;
|
|
33
|
+
} | {
|
|
34
|
+
success?: EmptyStatus;
|
|
35
|
+
error: StatusMessage;
|
|
36
|
+
warn?: EmptyStatus;
|
|
37
|
+
} | {
|
|
38
|
+
success?: EmptyStatus;
|
|
39
|
+
error?: EmptyStatus;
|
|
40
|
+
warn: StatusMessage;
|
|
41
|
+
} | {
|
|
42
|
+
success?: EmptyStatus;
|
|
43
|
+
error?: EmptyStatus;
|
|
44
|
+
warn?: EmptyStatus;
|
|
45
|
+
};
|
|
46
|
+
type InputProp = React.InputHTMLAttributes<HTMLInputElement> & InputStatusProps & {
|
|
47
|
+
variant?: InputVariant;
|
|
48
|
+
icon?: InputIcon;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
declare const Input: React.FC<InputProp>;
|
|
52
|
+
|
|
53
|
+
export { Button, Input };
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,196 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { twMerge } from 'tailwind-merge';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
|
-
// src/
|
|
4
|
-
function Button({ variant = "solid", className = "", ...props }) {
|
|
5
|
-
const base = "btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-600";
|
|
6
|
-
const tone = variant === "solid" ? "bg-brand-600 text-white hover:opacity-90" : "border border-brand-600 text-brand-600 hover:bg-brand-600/5";
|
|
7
|
-
return /* @__PURE__ */ jsx("button", { className: `${base} ${tone} ${className}`, ...props });
|
|
8
|
-
}
|
|
4
|
+
// src/Containment/Button/index.tsx
|
|
9
5
|
|
|
10
|
-
|
|
6
|
+
// src/globals.ts
|
|
7
|
+
var iconBaseClasses = {
|
|
8
|
+
mdi: ["mdi"]
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/Containment/Button/states.button.ts
|
|
12
|
+
var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-md transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
|
|
13
|
+
var paletteVariantClasses = {
|
|
14
|
+
primary: {
|
|
15
|
+
solid: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
|
|
16
|
+
outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary",
|
|
17
|
+
ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40",
|
|
18
|
+
text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2"
|
|
19
|
+
},
|
|
20
|
+
neutral: {
|
|
21
|
+
solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
|
|
22
|
+
outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400",
|
|
23
|
+
ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300",
|
|
24
|
+
text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2"
|
|
25
|
+
},
|
|
26
|
+
info: {
|
|
27
|
+
solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
|
|
28
|
+
outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400",
|
|
29
|
+
ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300",
|
|
30
|
+
text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2"
|
|
31
|
+
},
|
|
32
|
+
success: {
|
|
33
|
+
solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
|
|
34
|
+
outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400",
|
|
35
|
+
ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300",
|
|
36
|
+
text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2"
|
|
37
|
+
},
|
|
38
|
+
warning: {
|
|
39
|
+
solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
|
|
40
|
+
outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400",
|
|
41
|
+
ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300",
|
|
42
|
+
text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2"
|
|
43
|
+
},
|
|
44
|
+
danger: {
|
|
45
|
+
solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
|
|
46
|
+
outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400",
|
|
47
|
+
ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300",
|
|
48
|
+
text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2"
|
|
49
|
+
},
|
|
50
|
+
surface: {
|
|
51
|
+
solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
|
|
52
|
+
outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200",
|
|
53
|
+
ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200",
|
|
54
|
+
text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2"
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
var resolveVariantClass = (variant, palette) => {
|
|
58
|
+
const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;
|
|
59
|
+
return paletteVariants[variant] ?? paletteVariants.solid;
|
|
60
|
+
};
|
|
61
|
+
var resolveIconClassName = (icon) => {
|
|
62
|
+
if (!icon) {
|
|
63
|
+
return void 0;
|
|
64
|
+
}
|
|
65
|
+
if (typeof icon === "string") {
|
|
66
|
+
const trimmed = icon.trim();
|
|
67
|
+
if (!trimmed) {
|
|
68
|
+
return void 0;
|
|
69
|
+
}
|
|
70
|
+
if (trimmed.includes(" ")) {
|
|
71
|
+
return trimmed;
|
|
72
|
+
}
|
|
73
|
+
const normalized2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
74
|
+
return ["mdi", normalized2].join(" ");
|
|
75
|
+
}
|
|
76
|
+
const [library, providedName] = icon;
|
|
77
|
+
const normalizedLibrary = library.trim();
|
|
78
|
+
const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
|
|
79
|
+
const iconName = providedName.trim();
|
|
80
|
+
if (!iconName) {
|
|
81
|
+
return baseClasses.join(" ");
|
|
82
|
+
}
|
|
83
|
+
const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
84
|
+
return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
|
|
85
|
+
};
|
|
86
|
+
var sizeClasses = {
|
|
87
|
+
"x-small": "px-2.5 py-1 text-xs",
|
|
88
|
+
small: "px-3 py-1.5 text-sm",
|
|
89
|
+
medium: "px-4 py-2 text-base",
|
|
90
|
+
large: "px-6 py-3 text-lg",
|
|
91
|
+
"x-large": "px-7 py-3.5 text-xl"
|
|
92
|
+
};
|
|
93
|
+
var Button = ({
|
|
94
|
+
variant = "solid",
|
|
95
|
+
color = "primary",
|
|
96
|
+
size = "medium",
|
|
97
|
+
block = false,
|
|
98
|
+
loading = false,
|
|
99
|
+
icon,
|
|
100
|
+
className,
|
|
101
|
+
children,
|
|
102
|
+
disabled,
|
|
103
|
+
onClick,
|
|
104
|
+
...rest
|
|
105
|
+
}) => {
|
|
106
|
+
const variantClass = resolveVariantClass(variant, color);
|
|
107
|
+
const sizeClass = sizeClasses[size] ?? sizeClasses.medium;
|
|
108
|
+
const blockClass = block ? "w-full" : null;
|
|
109
|
+
const isDisabled = disabled || loading;
|
|
110
|
+
const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
|
|
111
|
+
const resolvedIconClass = resolveIconClassName(icon);
|
|
112
|
+
const shouldRenderIcon = Boolean(resolvedIconClass && !loading);
|
|
113
|
+
const hasDecorators = (loading || shouldRenderIcon) && Boolean(children);
|
|
114
|
+
const gapClass = hasDecorators ? "gap-2" : void 0;
|
|
115
|
+
const loadingIconClass = loading ? twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
|
|
116
|
+
const iconClassName = shouldRenderIcon ? twMerge("leading-none", resolvedIconClass) : void 0;
|
|
117
|
+
return /* @__PURE__ */ jsxs(
|
|
118
|
+
"button",
|
|
119
|
+
{
|
|
120
|
+
...rest,
|
|
121
|
+
onClick,
|
|
122
|
+
disabled: isDisabled,
|
|
123
|
+
className: twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
|
|
124
|
+
"data-loading": loading || void 0,
|
|
125
|
+
"aria-busy": loading || void 0,
|
|
126
|
+
children: [
|
|
127
|
+
loading && /* @__PURE__ */ jsx("i", { className: loadingIconClass, "aria-hidden": true }),
|
|
128
|
+
iconClassName && /* @__PURE__ */ jsx("i", { className: iconClassName, "aria-hidden": true }),
|
|
129
|
+
children
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
};
|
|
134
|
+
var Button_default = Button;
|
|
135
|
+
|
|
136
|
+
// src/Form/Input/states.input.ts
|
|
137
|
+
var resolveIconClassName2 = (icon) => {
|
|
138
|
+
if (!icon) {
|
|
139
|
+
return void 0;
|
|
140
|
+
}
|
|
141
|
+
if (typeof icon === "string") {
|
|
142
|
+
const trimmed = icon.trim();
|
|
143
|
+
if (!trimmed) {
|
|
144
|
+
return void 0;
|
|
145
|
+
}
|
|
146
|
+
if (trimmed.includes(" ")) {
|
|
147
|
+
return trimmed;
|
|
148
|
+
}
|
|
149
|
+
const normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
150
|
+
return ["mdi", normalizedName2].join(" ");
|
|
151
|
+
}
|
|
152
|
+
const [library, iconNameRaw] = icon;
|
|
153
|
+
const baseClasses = iconBaseClasses[library] ?? [library];
|
|
154
|
+
const iconName = iconNameRaw.trim();
|
|
155
|
+
if (!iconName) {
|
|
156
|
+
return baseClasses.join(" ");
|
|
157
|
+
}
|
|
158
|
+
const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
159
|
+
const classes = [...baseClasses, normalizedName];
|
|
160
|
+
return Array.from(new Set(classes)).join(" ");
|
|
161
|
+
};
|
|
162
|
+
var Input = ({ variant = "outline", success, error, warn, icon, className, ...props }) => {
|
|
163
|
+
const classBase = "input-base px-3 py-2 focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
|
|
164
|
+
const variantClasses = {
|
|
165
|
+
outline: "rounded border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
|
|
166
|
+
filled: "rounded bg-gray-100 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
|
|
167
|
+
underlined: "border-b-1 border-gray-300 focus:border-red-400 focus:outline-none focus:ring-none"
|
|
168
|
+
};
|
|
169
|
+
const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
|
|
170
|
+
const statusClasses = {
|
|
171
|
+
error: "border-red-500 focus:border-red-500 focus:ring-red-400",
|
|
172
|
+
warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
|
|
173
|
+
success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
|
|
174
|
+
};
|
|
175
|
+
const statusMessageClasses = {
|
|
176
|
+
error: "text-red-600",
|
|
177
|
+
warn: "text-amber-600",
|
|
178
|
+
success: "text-emerald-600"
|
|
179
|
+
};
|
|
180
|
+
const variantClass = variantClasses[variant] ?? variantClasses.outline;
|
|
181
|
+
const toneClass = status ? statusClasses[status.tone] : void 0;
|
|
182
|
+
const prependIconClass = resolveIconClassName2(icon);
|
|
183
|
+
const prependPadding = prependIconClass ? "pl-10" : void 0;
|
|
184
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
185
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
|
|
186
|
+
prependIconClass && /* @__PURE__ */ jsx("i", { className: twMerge("pointer-events-none absolute left-3 ", prependIconClass), "aria-hidden": true }),
|
|
187
|
+
/* @__PURE__ */ jsx("input", { ...props, className: twMerge(classBase, variantClass, toneClass, prependPadding, className) })
|
|
188
|
+
] }),
|
|
189
|
+
status?.message && /* @__PURE__ */ jsx("span", { className: twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
|
|
190
|
+
] });
|
|
191
|
+
};
|
|
192
|
+
var Input_default = Input;
|
|
193
|
+
|
|
194
|
+
export { Button_default as Button, Input_default as Input };
|
|
11
195
|
//# sourceMappingURL=index.js.map
|
|
12
196
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button.tsx"],"names":[],"mappings":";;;AAMO,SAAS,MAAA,CAAO,EAAE,OAAA,GAAU,OAAA,EAAS,YAAY,EAAA,EAAI,GAAG,OAAM,EAAgB;AACnF,EAAA,MAAM,IAAA,GAAO,uFAAA;AACb,EAAA,MAAM,IAAA,GACJ,OAAA,KAAY,OAAA,GACR,0CAAA,GACA,6DAAA;AAEN,EAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAW,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAK,GAAG,KAAA,EAAO,CAAA;AACvE","file":"index.js","sourcesContent":["import * as React from 'react';\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: 'solid' | 'outline';\n};\n\nexport function Button({ variant = 'solid', className = '', ...props }: ButtonProps) {\n const base = 'btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-600';\n const tone =\n variant === 'solid'\n ? 'bg-brand-600 text-white hover:opacity-90'\n : 'border border-brand-600 text-brand-600 hover:bg-brand-600/5';\n\n return <button className={`${base} ${tone} ${className}`} {...props} />;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx","../src/Form/Input/states.input.ts","../src/Form/Input/index.tsx"],"names":["normalized","resolveIconClassName","normalizedName","jsxs","jsx","twMerge"],"mappings":"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","file":"index.js","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps } from './types.button';\nimport { ContainmentSize, ContainmentVariant } from '../containment.types';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-md transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst paletteVariantClasses: Record<Palette, Record<ContainmentVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline: 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost: 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline: 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost: 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline: 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost: 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline: 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost: 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline: 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost: 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline: 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost: 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline: 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost: 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2'\n }\n};\n\nexport const resolveVariantClass = (variant: ContainmentVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['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 normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [normalizedLibrary];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<ContainmentSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport { base, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button: React.FC<ButtonProps> = ({\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n icon,\n className,\n children,\n disabled,\n onClick,\n ...rest\n}) => {\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = sizeClasses[size] ?? sizeClasses.medium;\n const blockClass = block ? 'w-full' : null;\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(children);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading ? twMerge('mdi mdi-loading mdi-spin', 'leading-none') : undefined;\n const iconClassName = shouldRenderIcon ? twMerge('leading-none', resolvedIconClass) : undefined;\n\n return (\n <button\n {...rest}\n onClick={onClick}\n disabled={isDisabled}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {children}\n </button>\n );\n};\n\nexport default Button;\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","'use client';\n\nimport { twMerge } from 'tailwind-merge';\nimport { InputProp, InputVariant } from './types';\nimport { iconBaseClasses } from '@lindle/linoardo/globals';\nimport { resolveIconClassName } from './states.input';\n\nconst Input: React.FC<InputProp> = ({ variant = 'outline', success, error, warn, icon, className, ...props }) => {\n const classBase =\n 'input-base px-3 py-2 focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed';\n const variantClasses = {\n outline: 'rounded border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary',\n filled: 'rounded bg-gray-100 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary',\n underlined: 'border-b-1 border-gray-300 focus:border-red-400 focus:outline-none focus:ring-none'\n } satisfies Record<InputVariant, string>;\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',\n warn: 'text-amber-600',\n success: 'text-emerald-600'\n } as const;\n\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const toneClass = status ? statusClasses[status.tone] : undefined;\n const prependIconClass = resolveIconClassName(icon);\n const prependPadding = prependIconClass ? 'pl-10' : undefined;\n\n return (\n <div className='flex flex-col gap-1'>\n <div className='relative flex items-center'>\n {prependIconClass && (\n <i className={twMerge('pointer-events-none absolute left-3 ', prependIconClass)} aria-hidden />\n )}\n <input {...props} className={twMerge(classBase, variantClass, toneClass, prependPadding, className)} />\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])}>{status.message}</span>\n )}\n </div>\n );\n};\n\nexport default Input;\n"]}
|