@lindle/linoardo 1.0.19 → 1.0.21
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/button.cjs +30 -15
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +17 -7
- package/dist/button.d.ts +17 -7
- package/dist/button.js +1 -1
- package/dist/card.cjs +82 -20
- package/dist/card.cjs.map +1 -1
- package/dist/card.d.cts +8 -1
- package/dist/card.d.ts +8 -1
- package/dist/card.js +1 -1
- package/dist/chip.cjs +17 -10
- package/dist/chip.cjs.map +1 -1
- package/dist/chip.d.cts +7 -4
- package/dist/chip.d.ts +7 -4
- package/dist/chip.js +1 -1
- package/dist/chunk-2UL3S6KC.js +147 -0
- package/dist/chunk-2UL3S6KC.js.map +1 -0
- package/dist/{chunk-N65GNKRG.js → chunk-5LWU5T2C.js} +48 -42
- package/dist/chunk-5LWU5T2C.js.map +1 -0
- package/dist/{chunk-XFPBICJG.js → chunk-5WQW6YSJ.js} +12 -3
- package/dist/chunk-5WQW6YSJ.js.map +1 -0
- package/dist/{chunk-5GY2JCBO.js → chunk-AK7LFJI4.js} +16 -5
- package/dist/chunk-AK7LFJI4.js.map +1 -0
- package/dist/{chunk-PWK6MLZT.js → chunk-DSZ3EOQB.js} +19 -12
- package/dist/chunk-DSZ3EOQB.js.map +1 -0
- package/dist/{chunk-AOHXZ7OM.js → chunk-GMDNSU26.js} +19 -5
- package/dist/chunk-GMDNSU26.js.map +1 -0
- package/dist/chunk-HAXGOTZO.js +94 -0
- package/dist/chunk-HAXGOTZO.js.map +1 -0
- package/dist/chunk-HEXJCQRO.js +51 -0
- package/dist/chunk-HEXJCQRO.js.map +1 -0
- package/dist/chunk-JGEXEDKS.js +168 -0
- package/dist/chunk-JGEXEDKS.js.map +1 -0
- package/dist/{chunk-GA6HSRN6.js → chunk-KRYWWWXR.js} +20 -7
- package/dist/chunk-KRYWWWXR.js.map +1 -0
- package/dist/{chunk-U6NAIIDI.js → chunk-LIEBZOLG.js} +42 -20
- package/dist/chunk-LIEBZOLG.js.map +1 -0
- package/dist/{chunk-E32P5AHO.js → chunk-LYP7V32H.js} +10 -4
- package/dist/chunk-LYP7V32H.js.map +1 -0
- package/dist/chunk-QRBJFDV5.js +170 -0
- package/dist/chunk-QRBJFDV5.js.map +1 -0
- package/dist/{chunk-SZU6OYLS.js → chunk-RFPNVLAD.js} +31 -17
- package/dist/chunk-RFPNVLAD.js.map +1 -0
- package/dist/chunk-SAGQYMS3.js +167 -0
- package/dist/chunk-SAGQYMS3.js.map +1 -0
- package/dist/{chunk-QGQ66FJD.js → chunk-T37VPLS4.js} +2 -2
- package/dist/chunk-T37VPLS4.js.map +1 -0
- package/dist/{chunk-32KFNI6K.js → chunk-U2AL7XFY.js} +48 -28
- package/dist/chunk-U2AL7XFY.js.map +1 -0
- package/dist/chunk-VPF7M2PB.js +141 -0
- package/dist/chunk-VPF7M2PB.js.map +1 -0
- package/dist/dialog.cjs +40 -18
- package/dist/dialog.cjs.map +1 -1
- package/dist/dialog.d.cts +3 -0
- package/dist/dialog.d.ts +3 -0
- package/dist/dialog.js +1 -1
- package/dist/expansion-panel/item.cjs +11 -2
- package/dist/expansion-panel/item.cjs.map +1 -1
- package/dist/expansion-panel/item.js +1 -1
- package/dist/expansion-panel.cjs +25 -6
- package/dist/expansion-panel.cjs.map +1 -1
- package/dist/expansion-panel.js +2 -2
- package/dist/hero.cjs +143 -0
- package/dist/hero.cjs.map +1 -0
- package/dist/hero.d.cts +34 -0
- package/dist/hero.d.ts +34 -0
- package/dist/hero.js +3 -0
- package/dist/hero.js.map +1 -0
- package/dist/icon.cjs +53 -0
- package/dist/icon.cjs.map +1 -0
- package/dist/icon.d.cts +15 -0
- package/dist/icon.d.ts +15 -0
- package/dist/icon.js +3 -0
- package/dist/icon.js.map +1 -0
- package/dist/{index-Md3BuoGM.d.cts → index-B5n8tN2G.d.cts} +3 -0
- package/dist/{index-d_JuI06O.d.ts → index-D4-O-oJt.d.ts} +3 -0
- package/dist/index.cjs +1013 -173
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -2
- package/dist/index.d.ts +8 -2
- package/dist/index.js +18 -13
- package/dist/input.cjs +104 -30
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +8 -19
- package/dist/input.d.ts +8 -19
- package/dist/input.js +1 -1
- package/dist/list/item.cjs +10 -1
- package/dist/list/item.cjs.map +1 -1
- package/dist/list/item.d.cts +1 -1
- package/dist/list/item.d.ts +1 -1
- package/dist/list/item.js +1 -1
- package/dist/list.cjs +23 -3
- package/dist/list.cjs.map +1 -1
- package/dist/list.d.cts +5 -2
- package/dist/list.d.ts +5 -2
- package/dist/list.js +2 -2
- package/dist/masonry.cjs +116 -0
- package/dist/masonry.cjs.map +1 -0
- package/dist/masonry.d.cts +45 -0
- package/dist/masonry.d.ts +45 -0
- package/dist/masonry.js +3 -0
- package/dist/masonry.js.map +1 -0
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.d.cts +3 -0
- package/dist/menu.d.ts +3 -0
- package/dist/menu.js +1 -1
- package/dist/profileCard.cjs +391 -0
- package/dist/profileCard.cjs.map +1 -0
- package/dist/profileCard.d.cts +29 -0
- package/dist/profileCard.d.ts +29 -0
- package/dist/profileCard.js +5 -0
- package/dist/profileCard.js.map +1 -0
- package/dist/select.cjs +173 -0
- package/dist/select.cjs.map +1 -0
- package/dist/select.d.cts +29 -0
- package/dist/select.d.ts +29 -0
- package/dist/select.js +3 -0
- package/dist/select.js.map +1 -0
- package/dist/slider.cjs +17 -3
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.d.cts +3 -0
- package/dist/slider.d.ts +3 -0
- package/dist/slider.js +1 -1
- package/dist/styles.css +1199 -9
- package/dist/switch.cjs +46 -40
- package/dist/switch.cjs.map +1 -1
- package/dist/switch.d.cts +4 -1
- package/dist/switch.d.ts +4 -1
- package/dist/switch.js +1 -1
- package/dist/tooltip.cjs +46 -26
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.d.cts +3 -0
- package/dist/tooltip.d.ts +3 -0
- package/dist/tooltip.js +1 -1
- package/dist/types-BCqIOkp1.d.cts +24 -0
- package/dist/types-ChXN4u7x.d.ts +24 -0
- package/package.json +30 -5
- package/readme.md +1 -0
- package/dist/chunk-32KFNI6K.js.map +0 -1
- package/dist/chunk-5GY2JCBO.js.map +0 -1
- package/dist/chunk-AOHXZ7OM.js.map +0 -1
- package/dist/chunk-E32P5AHO.js.map +0 -1
- package/dist/chunk-GA6HSRN6.js.map +0 -1
- package/dist/chunk-N65GNKRG.js.map +0 -1
- package/dist/chunk-PWK6MLZT.js.map +0 -1
- package/dist/chunk-PYG5SDNO.js +0 -98
- package/dist/chunk-PYG5SDNO.js.map +0 -1
- package/dist/chunk-QGQ66FJD.js.map +0 -1
- package/dist/chunk-SZU6OYLS.js.map +0 -1
- package/dist/chunk-U6NAIIDI.js.map +0 -1
- package/dist/chunk-V4BVJOSC.js +0 -85
- package/dist/chunk-V4BVJOSC.js.map +0 -1
- package/dist/chunk-XFPBICJG.js.map +0 -1
package/dist/button.cjs
CHANGED
|
@@ -30,17 +30,18 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
30
30
|
var iconBaseClasses = {
|
|
31
31
|
mdi: ["mdi"]
|
|
32
32
|
};
|
|
33
|
+
|
|
34
|
+
// src/Containment/Button/states.button.ts
|
|
33
35
|
var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
|
|
34
|
-
var blackAndWhiteVariantClass = "bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
|
|
35
36
|
var blackAndWhitePaletteClasses = {
|
|
36
|
-
solid:
|
|
37
|
-
outline:
|
|
38
|
-
ghost: "bg-neutral-300
|
|
39
|
-
text:
|
|
40
|
-
filled: "bg-black text-
|
|
41
|
-
underlined:
|
|
42
|
-
rounded:
|
|
43
|
-
sharp: "bg-black text-white rounded-none"
|
|
37
|
+
solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
38
|
+
outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
39
|
+
ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent",
|
|
40
|
+
text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent",
|
|
41
|
+
filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
|
|
42
|
+
underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20",
|
|
43
|
+
rounded: "rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
44
|
+
sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
|
|
44
45
|
};
|
|
45
46
|
var paletteVariantClasses = {
|
|
46
47
|
primary: {
|
|
@@ -136,7 +137,9 @@ var resolveIconClassName = (icon) => {
|
|
|
136
137
|
}
|
|
137
138
|
const [library, providedName] = icon;
|
|
138
139
|
const normalizedLibrary = library.trim();
|
|
139
|
-
const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
|
|
140
|
+
const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
|
|
141
|
+
normalizedLibrary
|
|
142
|
+
];
|
|
140
143
|
const iconName = providedName.trim();
|
|
141
144
|
if (!iconName) {
|
|
142
145
|
return baseClasses.join(" ");
|
|
@@ -152,12 +155,19 @@ var sizeClasses = {
|
|
|
152
155
|
"x-large": "px-7 py-3.5 text-xl"
|
|
153
156
|
};
|
|
154
157
|
var iconOnlySizeClasses = {
|
|
155
|
-
"x-small": "p-
|
|
158
|
+
"x-small": "p-0 text-xs aspect-square",
|
|
156
159
|
small: "p-2.5 text-sm aspect-square",
|
|
157
160
|
medium: "p-3 text-base aspect-square",
|
|
158
161
|
large: "p-3.5 text-lg aspect-square",
|
|
159
162
|
"x-large": "p-4 text-xl aspect-square"
|
|
160
163
|
};
|
|
164
|
+
var iconOnlyIconSizeClasses = {
|
|
165
|
+
"x-small": "text-sm",
|
|
166
|
+
small: "text-base",
|
|
167
|
+
medium: "text-lg",
|
|
168
|
+
large: "text-xl",
|
|
169
|
+
"x-large": "text-2xl"
|
|
170
|
+
};
|
|
161
171
|
var Button = React__namespace.forwardRef(
|
|
162
172
|
({
|
|
163
173
|
variant = "solid",
|
|
@@ -172,11 +182,15 @@ var Button = React__namespace.forwardRef(
|
|
|
172
182
|
children,
|
|
173
183
|
disabled,
|
|
174
184
|
onClick,
|
|
185
|
+
as,
|
|
175
186
|
...rest
|
|
176
187
|
}, ref) => {
|
|
188
|
+
const Component = as ?? "button";
|
|
177
189
|
const variantClass = resolveVariantClass(variant, color);
|
|
178
190
|
const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
|
|
191
|
+
const iconSizeClass = iconOnly ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium : void 0;
|
|
179
192
|
const blockClass = block ? "w-full" : null;
|
|
193
|
+
const isNativeButton = Component === "button";
|
|
180
194
|
const isDisabled = disabled || loading;
|
|
181
195
|
const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
|
|
182
196
|
const resolvedIconClass = resolveIconClassName(icon);
|
|
@@ -185,15 +199,16 @@ var Button = React__namespace.forwardRef(
|
|
|
185
199
|
const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
|
|
186
200
|
const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
|
|
187
201
|
const gapClass = hasDecorators ? "gap-2" : void 0;
|
|
188
|
-
const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
|
|
189
|
-
const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", resolvedIconClass) : void 0;
|
|
202
|
+
const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none", iconSizeClass) : void 0;
|
|
203
|
+
const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", iconSizeClass, resolvedIconClass) : void 0;
|
|
190
204
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
191
|
-
|
|
205
|
+
Component,
|
|
192
206
|
{
|
|
193
207
|
...rest,
|
|
194
208
|
ref,
|
|
195
209
|
onClick,
|
|
196
|
-
disabled: isDisabled,
|
|
210
|
+
disabled: isNativeButton ? isDisabled : void 0,
|
|
211
|
+
"aria-disabled": !isNativeButton ? isDisabled : void 0,
|
|
197
212
|
className: tailwindMerge.twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
|
|
198
213
|
"data-loading": loading || void 0,
|
|
199
214
|
"aria-busy": loading || void 0,
|
package/dist/button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["twMerge","normalized","React","jsxs","jsx"],"mappings":"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","file":"button.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\nimport { twMerge } from 'tailwind-merge';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhiteVariantClass =\n 'bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white';\n\nconst blackAndWhitePaletteClasses = {\n solid: twMerge(blackAndWhiteVariantClass, 'bg-black text-white'),\n outline: blackAndWhiteVariantClass,\n ghost: 'bg-neutral-300 text-white',\n text: blackAndWhiteVariantClass,\n filled: 'bg-black text-white',\n underlined: twMerge(blackAndWhiteVariantClass, 'b'),\n rounded: blackAndWhiteVariantClass,\n sharp: 'bg-black text-white rounded-none'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none 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 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled: 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n '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 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded: 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none 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 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled: 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded: 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp: 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n '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 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled: 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none 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 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled: 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded: 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid: 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp: 'rounded-none 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 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled: 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded: 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, 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<GlobalSize, string>;\n\nexport const iconOnlySizeClasses = {\n 'x-small': 'p-2 text-xs aspect-square',\n small: 'p-2.5 text-sm aspect-square',\n medium: 'p-3 text-base aspect-square',\n large: 'p-3.5 text-lg aspect-square',\n 'x-large': 'p-4 text-xl aspect-square'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport { base, iconOnlySizeClasses, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n iconOnly = false,\n className,\n children,\n disabled,\n onClick,\n ...rest\n },\n ref\n ) => {\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly\n ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium\n : 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 isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\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 ref={ref}\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 {content}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts","../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["normalized","React","twMerge","jsxs","jsx"],"mappings":"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","file":"button.cjs","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n","import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhitePaletteClasses = {\n solid: 'bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white',\n outline:\n 'border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n ghost:\n 'text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent',\n text:\n 'bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent',\n filled:\n 'bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20',\n underlined:\n 'bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20',\n rounded:\n 'rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n sharp: 'bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline:\n 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost:\n 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled:\n 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost:\n 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded:\n 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline:\n 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost:\n 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded:\n 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp:\n 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost:\n 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline:\n 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost:\n 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded:\n 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid:\n 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp:\n 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline:\n 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost:\n 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded:\n 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, 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] ?? [\n normalizedLibrary\n ];\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<GlobalSize, string>;\n\nexport const iconOnlySizeClasses = {\n 'x-small': 'p-0 text-xs aspect-square',\n small: 'p-2.5 text-sm aspect-square',\n medium: 'p-3 text-base aspect-square',\n large: 'p-3.5 text-lg aspect-square',\n 'x-large': 'p-4 text-xl aspect-square'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlyIconSizeClasses = {\n 'x-small': 'text-sm',\n small: 'text-base',\n medium: 'text-lg',\n large: 'text-xl',\n 'x-large': 'text-2xl'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport {\n base,\n iconOnlyIconSizeClasses,\n iconOnlySizeClasses,\n resolveIconClassName,\n resolveVariantClass,\n sizeClasses\n} from './states.button';\n\ntype PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];\ntype ButtonComponent = {\n <T extends React.ElementType = 'button'>(\n props: ButtonProps<T> & { ref?: PolymorphicRef<T> }\n ): React.ReactElement | null;\n displayName?: string;\n};\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef(\n <\n T extends React.ElementType = 'button'\n >({\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n iconOnly = false,\n className,\n children,\n disabled,\n onClick,\n as,\n ...rest\n }: ButtonProps<T>,\n ref: React.ForwardedRef<unknown>) => {\n const Component = as ?? 'button';\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly\n ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium\n : sizeClasses[size] ?? sizeClasses.medium;\n const iconSizeClass = iconOnly\n ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium\n : undefined;\n const blockClass = block ? 'w-full' : null;\n const isNativeButton = Component === 'button';\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 isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading\n ? twMerge('mdi mdi-loading mdi-spin', 'leading-none', iconSizeClass)\n : undefined;\n const iconClassName = shouldRenderIcon\n ? twMerge('leading-none', iconSizeClass, resolvedIconClass)\n : undefined;\n\n return (\n <Component\n {...rest}\n ref={ref as PolymorphicRef<T>}\n onClick={onClick}\n disabled={isNativeButton ? isDisabled : undefined}\n aria-disabled={!isNativeButton ? isDisabled : undefined}\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 {content}\n </Component>\n );\n }\n) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}
|
package/dist/button.d.cts
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.cjs';
|
|
2
1
|
import * as react from 'react';
|
|
2
|
+
import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.cjs';
|
|
3
3
|
|
|
4
4
|
type ButtonVariant = GlobalVariant;
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Containment button supporting variant, size, block layout and loading states.
|
|
8
|
-
*/
|
|
9
|
-
declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
5
|
+
type ButtonOwnProps = {
|
|
10
6
|
variant?: ButtonVariant;
|
|
11
7
|
color?: Palette;
|
|
12
8
|
size?: GlobalSize;
|
|
@@ -15,6 +11,20 @@ declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes
|
|
|
15
11
|
loadingText?: string;
|
|
16
12
|
icon?: PropIcon;
|
|
17
13
|
iconOnly?: boolean;
|
|
18
|
-
|
|
14
|
+
as?: react.ElementType;
|
|
15
|
+
};
|
|
16
|
+
type ButtonProps<T extends react.ElementType = 'button'> = ButtonOwnProps & Omit<react.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'color' | 'size' | 'as'>;
|
|
17
|
+
|
|
18
|
+
type PolymorphicRef<T extends react.ElementType> = react.ComponentPropsWithRef<T>['ref'];
|
|
19
|
+
type ButtonComponent = {
|
|
20
|
+
<T extends react.ElementType = 'button'>(props: ButtonProps<T> & {
|
|
21
|
+
ref?: PolymorphicRef<T>;
|
|
22
|
+
}): react.ReactElement | null;
|
|
23
|
+
displayName?: string;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Containment button supporting variant, size, block layout and loading states.
|
|
27
|
+
*/
|
|
28
|
+
declare const Button: ButtonComponent;
|
|
19
29
|
|
|
20
30
|
export { Button as default };
|
package/dist/button.d.ts
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.js';
|
|
2
1
|
import * as react from 'react';
|
|
2
|
+
import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.js';
|
|
3
3
|
|
|
4
4
|
type ButtonVariant = GlobalVariant;
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Containment button supporting variant, size, block layout and loading states.
|
|
8
|
-
*/
|
|
9
|
-
declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
5
|
+
type ButtonOwnProps = {
|
|
10
6
|
variant?: ButtonVariant;
|
|
11
7
|
color?: Palette;
|
|
12
8
|
size?: GlobalSize;
|
|
@@ -15,6 +11,20 @@ declare const Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes
|
|
|
15
11
|
loadingText?: string;
|
|
16
12
|
icon?: PropIcon;
|
|
17
13
|
iconOnly?: boolean;
|
|
18
|
-
|
|
14
|
+
as?: react.ElementType;
|
|
15
|
+
};
|
|
16
|
+
type ButtonProps<T extends react.ElementType = 'button'> = ButtonOwnProps & Omit<react.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'color' | 'size' | 'as'>;
|
|
17
|
+
|
|
18
|
+
type PolymorphicRef<T extends react.ElementType> = react.ComponentPropsWithRef<T>['ref'];
|
|
19
|
+
type ButtonComponent = {
|
|
20
|
+
<T extends react.ElementType = 'button'>(props: ButtonProps<T> & {
|
|
21
|
+
ref?: PolymorphicRef<T>;
|
|
22
|
+
}): react.ReactElement | null;
|
|
23
|
+
displayName?: string;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Containment button supporting variant, size, block layout and loading states.
|
|
27
|
+
*/
|
|
28
|
+
declare const Button: ButtonComponent;
|
|
19
29
|
|
|
20
30
|
export { Button as default };
|
package/dist/button.js
CHANGED
package/dist/card.cjs
CHANGED
|
@@ -4,29 +4,38 @@ var react = require('react');
|
|
|
4
4
|
var tailwindMerge = require('tailwind-merge');
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
|
|
7
|
-
// src/
|
|
7
|
+
// src/Blocks/Card/index.tsx
|
|
8
8
|
var paddingClasses = {
|
|
9
9
|
none: "p-0",
|
|
10
10
|
sm: "p-3",
|
|
11
11
|
md: "p-4",
|
|
12
12
|
lg: "p-6"
|
|
13
13
|
};
|
|
14
|
-
var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors";
|
|
14
|
+
var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors dark:bg-slate-900 dark:text-slate-100";
|
|
15
15
|
var variantClasses = {
|
|
16
|
-
solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55",
|
|
17
|
-
outline: "rounded-2xl border border-
|
|
18
|
-
text: "rounded-2xl border border-transparent bg-transparent shadow-none",
|
|
19
|
-
ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none",
|
|
20
|
-
filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm",
|
|
21
|
-
underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none",
|
|
22
|
-
rounded: "rounded-3xl border border-gray-200 bg-white shadow-md",
|
|
23
|
-
sharp: "rounded-none border border-gray-200 bg-white shadow-md"
|
|
16
|
+
solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30",
|
|
17
|
+
outline: "rounded-2xl border-2 border-black bg-white shadow-none dark:border-black dark:bg-slate-900",
|
|
18
|
+
text: "rounded-2xl border border-transparent bg-transparent shadow-none dark:border-transparent dark:bg-transparent",
|
|
19
|
+
ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none dark:border-transparent dark:bg-slate-800",
|
|
20
|
+
filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm dark:border-slate-800 dark:bg-slate-800 dark:shadow-black/20",
|
|
21
|
+
underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none dark:border-transparent dark:border-b-slate-700 dark:bg-transparent",
|
|
22
|
+
rounded: "rounded-3xl border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25",
|
|
23
|
+
sharp: "rounded-none border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25"
|
|
24
24
|
};
|
|
25
|
-
var CardRoot = react.forwardRef(function Card({
|
|
25
|
+
var CardRoot = react.forwardRef(function Card({
|
|
26
|
+
className,
|
|
27
|
+
children,
|
|
28
|
+
variant = "solid",
|
|
29
|
+
padding = "md",
|
|
30
|
+
interactive = false,
|
|
31
|
+
dividers = true,
|
|
32
|
+
...rest
|
|
33
|
+
}, ref) {
|
|
26
34
|
const variantClass = variantClasses[variant] ?? variantClasses.solid;
|
|
27
35
|
const paddingClass = paddingClasses[padding] ?? paddingClasses.md;
|
|
28
|
-
const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2" : void 0;
|
|
36
|
+
const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900" : void 0;
|
|
29
37
|
const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
|
|
38
|
+
const content = applyDividers(children, dividers);
|
|
30
39
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
31
40
|
"div",
|
|
32
41
|
{
|
|
@@ -34,28 +43,60 @@ var CardRoot = react.forwardRef(function Card({ className, children, variant = "
|
|
|
34
43
|
ref,
|
|
35
44
|
tabIndex: tabIndexValue,
|
|
36
45
|
className: tailwindMerge.twMerge(cardBase, variantClass, paddingClass, interactiveClass, className),
|
|
37
|
-
children
|
|
46
|
+
children: content
|
|
38
47
|
}
|
|
39
48
|
);
|
|
40
49
|
});
|
|
41
|
-
var CardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
var CardHeader = ({ className, dividers = true, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
51
|
"div",
|
|
43
52
|
{
|
|
44
53
|
...rest,
|
|
45
|
-
className: tailwindMerge.twMerge(
|
|
54
|
+
className: tailwindMerge.twMerge(
|
|
55
|
+
"card-header mb-2 flex flex-col gap-1 pb-3",
|
|
56
|
+
dividers ? "border-b border-gray-100 dark:border-slate-800" : void 0,
|
|
57
|
+
className
|
|
58
|
+
)
|
|
46
59
|
}
|
|
47
60
|
);
|
|
48
61
|
var CardBody = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-body flex flex-col gap-3", className) });
|
|
49
|
-
var CardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
|
+
var CardFooter = ({ className, dividers = true, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
50
63
|
"div",
|
|
51
64
|
{
|
|
52
65
|
...rest,
|
|
53
|
-
className: tailwindMerge.twMerge(
|
|
66
|
+
className: tailwindMerge.twMerge(
|
|
67
|
+
"card-footer mt-3 flex flex-wrap items-center gap-3 pt-3",
|
|
68
|
+
dividers ? "border-t border-gray-100 dark:border-slate-800" : void 0,
|
|
69
|
+
className
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
74
|
+
"h3",
|
|
75
|
+
{
|
|
76
|
+
...rest,
|
|
77
|
+
className: tailwindMerge.twMerge(
|
|
78
|
+
"card-title text-lg font-semibold text-gray-900 dark:text-slate-50",
|
|
79
|
+
className
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
84
|
+
"p",
|
|
85
|
+
{
|
|
86
|
+
...rest,
|
|
87
|
+
className: tailwindMerge.twMerge(
|
|
88
|
+
"card-subtitle text-sm font-medium text-gray-600 dark:text-slate-300",
|
|
89
|
+
className
|
|
90
|
+
)
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
+
"p",
|
|
95
|
+
{
|
|
96
|
+
...rest,
|
|
97
|
+
className: tailwindMerge.twMerge("card-text text-sm text-gray-700 dark:text-slate-200", className)
|
|
54
98
|
}
|
|
55
99
|
);
|
|
56
|
-
var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ...rest, className: tailwindMerge.twMerge("card-title text-lg font-semibold text-gray-900", className) });
|
|
57
|
-
var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-subtitle text-sm font-medium text-gray-600", className) });
|
|
58
|
-
var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-text text-sm text-gray-700", className) });
|
|
59
100
|
var CardMedia = ({ className, rounded = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
101
|
"img",
|
|
61
102
|
{
|
|
@@ -81,6 +122,27 @@ var Card2 = Object.assign(CardRoot, {
|
|
|
81
122
|
Actions: CardActions
|
|
82
123
|
});
|
|
83
124
|
var Card_default = Card2;
|
|
125
|
+
function applyDividers(children, dividers) {
|
|
126
|
+
return react.Children.map(children, (child) => {
|
|
127
|
+
if (!react.isValidElement(child)) return child;
|
|
128
|
+
if (isDividerSection(child)) {
|
|
129
|
+
return react.cloneElement(child, { dividers: child.props.dividers ?? dividers });
|
|
130
|
+
}
|
|
131
|
+
if (hasNestedChildren(child)) {
|
|
132
|
+
return react.cloneElement(child, {
|
|
133
|
+
children: applyDividers(child.props.children, dividers)
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
return child;
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
function isDividerSection(element) {
|
|
140
|
+
return element.type === CardHeader || element.type === CardFooter;
|
|
141
|
+
}
|
|
142
|
+
function hasNestedChildren(element) {
|
|
143
|
+
const props = element.props;
|
|
144
|
+
return "children" in props;
|
|
145
|
+
}
|
|
84
146
|
|
|
85
147
|
module.exports = Card_default;
|
|
86
148
|
//# sourceMappingURL=card.cjs.map
|
package/dist/card.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Containment/Card/index.tsx"],"names":["forwardRef","jsx","twMerge","Card"],"mappings":"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","file":"card.cjs","sourcesContent":["import { forwardRef } from 'react';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { CardMediaProps, CardProps, CardSectionProps, CardTextProps } from './types.card';\n\nconst paddingClasses: Record<Exclude<CardProps['padding'], undefined>, string> = {\n none: 'p-0',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6'\n};\n\nconst cardBase = 'card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors';\n\nconst variantClasses: Record<GlobalVariant, string> = {\n solid: 'rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55',\n outline: 'rounded-2xl border border-gray-300 bg-white shadow-none',\n text: 'rounded-2xl border border-transparent bg-transparent shadow-none',\n ghost: 'rounded-2xl border border-transparent bg-gray-50 shadow-none',\n filled: 'rounded-2xl border border-gray-200 bg-gray-50 shadow-sm',\n underlined: 'rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none',\n rounded: 'rounded-3xl border border-gray-200 bg-white shadow-md',\n sharp: 'rounded-none border border-gray-200 bg-white shadow-md'\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n { className, children, variant = 'solid', padding = 'md', interactive = false, ...rest },\n ref\n) {\n const variantClass = variantClasses[variant as GlobalVariant] ?? variantClasses.solid;\n const paddingClass = paddingClasses[padding] ?? paddingClasses.md;\n const interactiveClass = interactive\n ? 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2'\n : undefined;\n const tabIndexValue = interactive && rest.tabIndex === undefined ? 0 : rest.tabIndex;\n\n return (\n <div\n {...rest}\n ref={ref}\n tabIndex={tabIndexValue}\n className={twMerge(cardBase, variantClass, paddingClass, interactiveClass, className)}\n >\n {children}\n </div>\n );\n});\n\nconst CardHeader: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div\n {...rest}\n className={twMerge('card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3', className)}\n />\n);\n\nconst CardBody: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-body flex flex-col gap-3', className)} />\n);\n\nconst CardFooter: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div\n {...rest}\n className={twMerge('card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3', className)}\n />\n);\n\nconst CardTitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <h3 {...rest} className={twMerge('card-title text-lg font-semibold text-gray-900', className)} />\n);\n\nconst CardSubtitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <p {...rest} className={twMerge('card-subtitle text-sm font-medium text-gray-600', className)} />\n);\n\nconst CardText: React.FC<CardTextProps> = ({ className, ...rest }) => (\n <p {...rest} className={twMerge('card-text text-sm text-gray-700', className)} />\n);\n\nconst CardMedia: React.FC<CardMediaProps> = ({ className, rounded = false, ...rest }) => (\n <img\n {...rest}\n className={twMerge(\n 'card-media w-full object-cover',\n rounded ? 'rounded-xl' : 'rounded-none',\n rest.height || rest.style ? 'block' : 'block max-h-60',\n className\n )}\n loading={rest.loading ?? 'lazy'}\n />\n);\n\nconst CardActions: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-actions flex flex-wrap gap-2', className)} />\n);\n\nexport type { CardProps, CardSectionProps, CardMediaProps, CardTextProps };\n\nconst Card = Object.assign(CardRoot, {\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n Title: CardTitle,\n Subtitle: CardSubtitle,\n Text: CardText,\n Media: CardMedia,\n Actions: CardActions\n});\n\nexport default Card;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/Blocks/Card/index.tsx"],"names":["forwardRef","jsx","twMerge","Card","Children","isValidElement","cloneElement"],"mappings":"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","file":"card.cjs","sourcesContent":["import { Children, cloneElement, forwardRef, isValidElement } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { GlobalVariant } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { CardMediaProps, CardProps, CardSectionProps, CardTextProps } from './types.card';\n\nconst paddingClasses: Record<Exclude<CardProps['padding'], undefined>, string> = {\n none: 'p-0',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6'\n};\n\nconst cardBase =\n 'card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors dark:bg-slate-900 dark:text-slate-100';\n\nconst variantClasses: Record<GlobalVariant, string> = {\n solid:\n 'rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30',\n outline:\n 'rounded-2xl border-2 border-black bg-white shadow-none dark:border-black dark:bg-slate-900',\n text: 'rounded-2xl border border-transparent bg-transparent shadow-none dark:border-transparent dark:bg-transparent',\n ghost:\n 'rounded-2xl border border-transparent bg-gray-50 shadow-none dark:border-transparent dark:bg-slate-800',\n filled:\n 'rounded-2xl border border-gray-200 bg-gray-50 shadow-sm dark:border-slate-800 dark:bg-slate-800 dark:shadow-black/20',\n underlined:\n 'rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none dark:border-transparent dark:border-b-slate-700 dark:bg-transparent',\n rounded:\n 'rounded-3xl border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25',\n sharp:\n 'rounded-none border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25'\n};\n\n/**\n * Card container with optional padding, variants and interactive focus/hover styles.\n */\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n {\n className,\n children,\n variant = 'solid',\n padding = 'md',\n interactive = false,\n dividers = true,\n ...rest\n },\n ref\n) {\n const variantClass = variantClasses[variant as GlobalVariant] ?? variantClasses.solid;\n const paddingClass = paddingClasses[padding] ?? paddingClasses.md;\n const interactiveClass = interactive\n ? 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900'\n : undefined;\n const tabIndexValue = interactive && rest.tabIndex === undefined ? 0 : rest.tabIndex;\n const content = applyDividers(children, dividers);\n\n return (\n <div\n {...rest}\n ref={ref}\n tabIndex={tabIndexValue}\n className={twMerge(cardBase, variantClass, paddingClass, interactiveClass, className)}\n >\n {content}\n </div>\n );\n});\n\n/**\n * Section for placing the card title, subtitle or actions at the top of the card.\n */\nconst CardHeader: React.FC<CardSectionProps> = ({ className, dividers = true, ...rest }) => (\n <div\n {...rest}\n className={twMerge(\n 'card-header mb-2 flex flex-col gap-1 pb-3',\n dividers ? 'border-b border-gray-100 dark:border-slate-800' : undefined,\n className\n )}\n />\n);\n\n/**\n * Primary content area of the card.\n */\nconst CardBody: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-body flex flex-col gap-3', className)} />\n);\n\n/**\n * Footer area for actions or supplemental information.\n */\nconst CardFooter: React.FC<CardSectionProps> = ({ className, dividers = true, ...rest }) => (\n <div\n {...rest}\n className={twMerge(\n 'card-footer mt-3 flex flex-wrap items-center gap-3 pt-3',\n dividers ? 'border-t border-gray-100 dark:border-slate-800' : undefined,\n className\n )}\n />\n);\n\n/**\n * Stylized heading for the card.\n */\nconst CardTitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <h3\n {...rest}\n className={twMerge(\n 'card-title text-lg font-semibold text-gray-900 dark:text-slate-50',\n className\n )}\n />\n);\n\n/**\n * Subtitle text for secondary information under the title.\n */\nconst CardSubtitle: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <p\n {...rest}\n className={twMerge(\n 'card-subtitle text-sm font-medium text-gray-600 dark:text-slate-300',\n className\n )}\n />\n);\n\n/**\n * Body text with default card typography.\n */\nconst CardText: React.FC<CardTextProps> = ({ className, ...rest }) => (\n <p\n {...rest}\n className={twMerge('card-text text-sm text-gray-700 dark:text-slate-200', className)}\n />\n);\n\n/**\n * Media region for images, retaining card spacing and optional rounded corners.\n */\nconst CardMedia: React.FC<CardMediaProps> = ({ className, rounded = false, ...rest }) => (\n <img\n {...rest}\n className={twMerge(\n 'card-media w-full object-cover',\n rounded ? 'rounded-xl' : 'rounded-none',\n rest.height || rest.style ? 'block' : 'block max-h-60',\n className\n )}\n loading={rest.loading ?? 'lazy'}\n />\n);\n\n/**\n * Container for action buttons inside the card.\n */\nconst CardActions: React.FC<CardSectionProps> = ({ className, ...rest }) => (\n <div {...rest} className={twMerge('card-actions flex flex-wrap gap-2', className)} />\n);\n\nexport type { CardProps, CardSectionProps, CardMediaProps, CardTextProps };\n\nconst Card = Object.assign(CardRoot, {\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n Title: CardTitle,\n Subtitle: CardSubtitle,\n Text: CardText,\n Media: CardMedia,\n Actions: CardActions\n});\n\nexport default Card;\n\nfunction applyDividers(children: ReactNode, dividers: boolean): ReactNode {\n return Children.map(children, child => {\n if (!isValidElement(child)) return child;\n\n if (isDividerSection(child)) {\n return cloneElement<CardSectionProps>(child, { dividers: child.props.dividers ?? dividers });\n }\n\n if (hasNestedChildren(child)) {\n return cloneElement<{ children?: ReactNode }>(child, {\n children: applyDividers(child.props.children, dividers)\n });\n }\n\n return child;\n });\n}\n\nfunction isDividerSection(element: ReactElement): element is ReactElement<CardSectionProps> {\n return element.type === CardHeader || element.type === CardFooter;\n}\n\nfunction hasNestedChildren(\n element: ReactElement\n): element is ReactElement<{ children?: ReactNode }> {\n const props = element.props as Record<string, unknown>;\n return 'children' in props;\n}\n"]}
|
package/dist/card.d.cts
CHANGED
|
@@ -9,8 +9,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
9
9
|
* Adds a subtle hover + focus ring. Works well for clickable cards.
|
|
10
10
|
*/
|
|
11
11
|
interactive?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Shows a divider under the header and above the footer.
|
|
14
|
+
*/
|
|
15
|
+
dividers?: boolean;
|
|
16
|
+
};
|
|
17
|
+
type CardSectionProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
18
|
+
dividers?: boolean;
|
|
12
19
|
};
|
|
13
|
-
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
14
20
|
type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
15
21
|
type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
16
22
|
rounded?: boolean;
|
|
@@ -20,6 +26,7 @@ declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDiv
|
|
|
20
26
|
variant?: GlobalVariant;
|
|
21
27
|
padding?: CardPadding;
|
|
22
28
|
interactive?: boolean;
|
|
29
|
+
dividers?: boolean;
|
|
23
30
|
} & react.RefAttributes<HTMLDivElement>> & {
|
|
24
31
|
Header: react.FC<CardSectionProps>;
|
|
25
32
|
Body: react.FC<CardSectionProps>;
|
package/dist/card.d.ts
CHANGED
|
@@ -9,8 +9,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
9
9
|
* Adds a subtle hover + focus ring. Works well for clickable cards.
|
|
10
10
|
*/
|
|
11
11
|
interactive?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Shows a divider under the header and above the footer.
|
|
14
|
+
*/
|
|
15
|
+
dividers?: boolean;
|
|
16
|
+
};
|
|
17
|
+
type CardSectionProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
18
|
+
dividers?: boolean;
|
|
12
19
|
};
|
|
13
|
-
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
14
20
|
type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
15
21
|
type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
16
22
|
rounded?: boolean;
|
|
@@ -20,6 +26,7 @@ declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDiv
|
|
|
20
26
|
variant?: GlobalVariant;
|
|
21
27
|
padding?: CardPadding;
|
|
22
28
|
interactive?: boolean;
|
|
29
|
+
dividers?: boolean;
|
|
23
30
|
} & react.RefAttributes<HTMLDivElement>> & {
|
|
24
31
|
Header: react.FC<CardSectionProps>;
|
|
25
32
|
Body: react.FC<CardSectionProps>;
|
package/dist/card.js
CHANGED
package/dist/chip.cjs
CHANGED
|
@@ -19,16 +19,15 @@ var chipSizeClasses = {
|
|
|
19
19
|
large: "text-base px-5 py-2 min-h-[2.5rem]"
|
|
20
20
|
};
|
|
21
21
|
var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2";
|
|
22
|
-
var blackAndWhiteChipVariantClass = "bg-white text-black border border-black hover:bg-white focus-visible:ring-black/40 focus-visible:ring-offset-white";
|
|
23
22
|
var blackAndWhitePaletteClasses = {
|
|
24
|
-
solid:
|
|
25
|
-
outline:
|
|
26
|
-
ghost:
|
|
27
|
-
text:
|
|
28
|
-
filled:
|
|
29
|
-
underlined:
|
|
30
|
-
rounded:
|
|
31
|
-
sharp:
|
|
23
|
+
solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
24
|
+
outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
25
|
+
ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20",
|
|
26
|
+
text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20",
|
|
27
|
+
filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
|
|
28
|
+
underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20",
|
|
29
|
+
rounded: "rounded-full bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
|
|
30
|
+
sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white"
|
|
32
31
|
};
|
|
33
32
|
var paletteVariantClasses = {
|
|
34
33
|
primary: {
|
|
@@ -214,7 +213,15 @@ var Chip = react.forwardRef(
|
|
|
214
213
|
"aria-disabled": disabled || void 0,
|
|
215
214
|
"aria-pressed": filter ? selected : void 0,
|
|
216
215
|
"data-selected": selected || void 0,
|
|
217
|
-
className: tailwindMerge.twMerge(
|
|
216
|
+
className: tailwindMerge.twMerge(
|
|
217
|
+
chipBaseClasses,
|
|
218
|
+
sizeClass,
|
|
219
|
+
pillClass,
|
|
220
|
+
variantClass,
|
|
221
|
+
cursorClass,
|
|
222
|
+
selectedClass,
|
|
223
|
+
className
|
|
224
|
+
),
|
|
218
225
|
onClick: interactive ? handleClick : void 0,
|
|
219
226
|
onKeyDown: interactive ? handleKeyDown : onKeyDown,
|
|
220
227
|
children: [
|