@lindle/linoardo 1.0.16 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ExpansionPanelItem-Bd6ZWGkR.d.cts +58 -0
- package/dist/ExpansionPanelItem-DOjgDeB6.d.ts +58 -0
- package/dist/button.cjs +214 -0
- package/dist/button.cjs.map +1 -0
- package/dist/button.d.cts +20 -0
- package/dist/button.d.ts +20 -0
- package/dist/button.js +4 -0
- package/dist/button.js.map +1 -0
- package/dist/card.cjs +87 -0
- package/dist/card.cjs.map +1 -0
- package/dist/card.d.cts +34 -0
- package/dist/card.d.ts +34 -0
- package/dist/card.js +3 -0
- package/dist/card.js.map +1 -0
- package/dist/chip.cjs +247 -0
- package/dist/chip.cjs.map +1 -0
- package/dist/chip.d.cts +368 -0
- package/dist/chip.d.ts +368 -0
- package/dist/chip.js +4 -0
- package/dist/chip.js.map +1 -0
- package/dist/chunk-32KFNI6K.js +114 -0
- package/dist/chunk-32KFNI6K.js.map +1 -0
- package/dist/chunk-5GY2JCBO.js +92 -0
- package/dist/chunk-5GY2JCBO.js.map +1 -0
- package/dist/chunk-AOHXZ7OM.js +126 -0
- package/dist/chunk-AOHXZ7OM.js.map +1 -0
- package/dist/chunk-E32P5AHO.js +125 -0
- package/dist/chunk-E32P5AHO.js.map +1 -0
- package/dist/chunk-GA6HSRN6.js +235 -0
- package/dist/chunk-GA6HSRN6.js.map +1 -0
- package/dist/chunk-IEILIKS2.js +8 -0
- package/dist/chunk-IEILIKS2.js.map +1 -0
- package/dist/chunk-N65GNKRG.js +143 -0
- package/dist/chunk-N65GNKRG.js.map +1 -0
- package/dist/chunk-PWK6MLZT.js +239 -0
- package/dist/chunk-PWK6MLZT.js.map +1 -0
- package/dist/chunk-PYG5SDNO.js +98 -0
- package/dist/chunk-PYG5SDNO.js.map +1 -0
- package/dist/chunk-QGQ66FJD.js +155 -0
- package/dist/chunk-QGQ66FJD.js.map +1 -0
- package/dist/chunk-SZU6OYLS.js +187 -0
- package/dist/chunk-SZU6OYLS.js.map +1 -0
- package/dist/chunk-U6NAIIDI.js +99 -0
- package/dist/chunk-U6NAIIDI.js.map +1 -0
- package/dist/chunk-V4BVJOSC.js +85 -0
- package/dist/chunk-V4BVJOSC.js.map +1 -0
- package/dist/chunk-XFPBICJG.js +127 -0
- package/dist/chunk-XFPBICJG.js.map +1 -0
- package/dist/dialog.cjs +121 -0
- package/dist/dialog.cjs.map +1 -0
- package/dist/dialog.d.cts +17 -0
- package/dist/dialog.d.ts +17 -0
- package/dist/dialog.js +3 -0
- package/dist/dialog.js.map +1 -0
- package/dist/expansion-panel/item.cjs +195 -0
- package/dist/expansion-panel/item.cjs.map +1 -0
- package/dist/expansion-panel/item.d.cts +3 -0
- package/dist/expansion-panel/item.d.ts +3 -0
- package/dist/expansion-panel/item.js +3 -0
- package/dist/expansion-panel/item.js.map +1 -0
- package/dist/expansion-panel.cjs +356 -0
- package/dist/expansion-panel.cjs.map +1 -0
- package/dist/expansion-panel.d.cts +8 -0
- package/dist/expansion-panel.d.ts +8 -0
- package/dist/expansion-panel.js +4 -0
- package/dist/expansion-panel.js.map +1 -0
- package/dist/global.types-E2uVLemv.d.cts +7 -0
- package/dist/global.types-E2uVLemv.d.ts +7 -0
- package/dist/index-Md3BuoGM.d.cts +32 -0
- package/dist/index-d_JuI06O.d.ts +32 -0
- package/dist/index.cjs +557 -160
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -549
- package/dist/index.d.ts +15 -549
- package/dist/index.js +14 -1330
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +106 -0
- package/dist/input.cjs.map +1 -0
- package/dist/input.d.cts +22 -0
- package/dist/input.d.ts +22 -0
- package/dist/input.js +4 -0
- package/dist/input.js.map +1 -0
- package/dist/list/item.cjs +149 -0
- package/dist/list/item.cjs.map +1 -0
- package/dist/list/item.d.cts +3 -0
- package/dist/list/item.d.ts +3 -0
- package/dist/list/item.js +3 -0
- package/dist/list/item.js.map +1 -0
- package/dist/list.cjs +235 -0
- package/dist/list.cjs.map +1 -0
- package/dist/list.d.cts +17 -0
- package/dist/list.d.ts +17 -0
- package/dist/list.js +4 -0
- package/dist/list.js.map +1 -0
- package/dist/menu.cjs +177 -0
- package/dist/menu.cjs.map +1 -0
- package/dist/menu.d.cts +20 -0
- package/dist/menu.d.ts +20 -0
- package/dist/menu.js +3 -0
- package/dist/menu.js.map +1 -0
- package/dist/slider.cjs +128 -0
- package/dist/slider.cjs.map +1 -0
- package/dist/slider.d.cts +42 -0
- package/dist/slider.d.ts +42 -0
- package/dist/slider.js +3 -0
- package/dist/slider.js.map +1 -0
- package/dist/styles.css +334 -44
- package/dist/switch.cjs +145 -0
- package/dist/switch.cjs.map +1 -0
- package/dist/switch.d.cts +16 -0
- package/dist/switch.d.ts +16 -0
- package/dist/switch.js +3 -0
- package/dist/switch.js.map +1 -0
- package/dist/tooltip.cjs +136 -0
- package/dist/tooltip.cjs.map +1 -0
- package/dist/tooltip.d.cts +19 -0
- package/dist/tooltip.d.ts +19 -0
- package/dist/tooltip.js +3 -0
- package/dist/tooltip.js.map +1 -0
- package/package.json +67 -2
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { P as Palette } from './global.types-E2uVLemv.cjs';
|
|
3
|
+
|
|
4
|
+
type ExpansionPanelValue = react.Key;
|
|
5
|
+
type ExpansionPanelVariant = 'elevated' | 'outlined' | 'tonal' | 'plain';
|
|
6
|
+
type ExpansionPanelDensity = 'compact' | 'default' | 'comfortable';
|
|
7
|
+
type ExpansionPanelRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
8
|
+
type DivAttributes = Omit<react.HTMLAttributes<HTMLDivElement>, 'color' | 'value' | 'defaultValue' | 'onChange'>;
|
|
9
|
+
interface ExpansionPanelSharedProps extends DivAttributes {
|
|
10
|
+
variant?: ExpansionPanelVariant;
|
|
11
|
+
rounded?: ExpansionPanelRounded;
|
|
12
|
+
density?: ExpansionPanelDensity;
|
|
13
|
+
color?: Palette;
|
|
14
|
+
divider?: boolean;
|
|
15
|
+
}
|
|
16
|
+
interface ExpansionPanelSingleProps extends ExpansionPanelSharedProps {
|
|
17
|
+
multiple?: false;
|
|
18
|
+
value?: ExpansionPanelValue | null;
|
|
19
|
+
defaultValue?: ExpansionPanelValue | null;
|
|
20
|
+
onChange?: (value: ExpansionPanelValue | null) => void;
|
|
21
|
+
}
|
|
22
|
+
interface ExpansionPanelMultipleProps extends ExpansionPanelSharedProps {
|
|
23
|
+
multiple: true;
|
|
24
|
+
value?: ExpansionPanelValue[];
|
|
25
|
+
defaultValue?: ExpansionPanelValue[];
|
|
26
|
+
onChange?: (value: ExpansionPanelValue[]) => void;
|
|
27
|
+
}
|
|
28
|
+
type ExpansionPanelProps = ExpansionPanelSingleProps | ExpansionPanelMultipleProps;
|
|
29
|
+
interface ExpansionPanelContextValue {
|
|
30
|
+
expandedValues: ExpansionPanelValue[];
|
|
31
|
+
toggle: (value: ExpansionPanelValue, disabled?: boolean) => void;
|
|
32
|
+
density: ExpansionPanelDensity;
|
|
33
|
+
color: Palette;
|
|
34
|
+
divider: boolean;
|
|
35
|
+
rounded: ExpansionPanelRounded;
|
|
36
|
+
variant: ExpansionPanelVariant;
|
|
37
|
+
}
|
|
38
|
+
interface ExpansionPanelItemProps extends Omit<DivAttributes, 'title'> {
|
|
39
|
+
value?: ExpansionPanelValue;
|
|
40
|
+
title?: react.ReactNode;
|
|
41
|
+
subtitle?: react.ReactNode;
|
|
42
|
+
text?: react.ReactNode;
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
prepend?: react.ReactNode;
|
|
45
|
+
append?: react.ReactNode;
|
|
46
|
+
expandIcon?: react.ReactNode;
|
|
47
|
+
collapseIcon?: react.ReactNode;
|
|
48
|
+
hideToggleIcon?: boolean;
|
|
49
|
+
headerClassName?: string;
|
|
50
|
+
contentClassName?: string;
|
|
51
|
+
color?: Palette;
|
|
52
|
+
/** @internal */
|
|
53
|
+
__expansionPanelContext?: ExpansionPanelContextValue | null;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
declare const ExpansionPanelItem: react.ForwardRefExoticComponent<ExpansionPanelItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
57
|
+
|
|
58
|
+
export { ExpansionPanelItem as E, type ExpansionPanelItemProps as a, type ExpansionPanelProps as b, type ExpansionPanelValue as c, type ExpansionPanelVariant as d, type ExpansionPanelDensity as e, type ExpansionPanelRounded as f };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { P as Palette } from './global.types-E2uVLemv.js';
|
|
3
|
+
|
|
4
|
+
type ExpansionPanelValue = react.Key;
|
|
5
|
+
type ExpansionPanelVariant = 'elevated' | 'outlined' | 'tonal' | 'plain';
|
|
6
|
+
type ExpansionPanelDensity = 'compact' | 'default' | 'comfortable';
|
|
7
|
+
type ExpansionPanelRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
8
|
+
type DivAttributes = Omit<react.HTMLAttributes<HTMLDivElement>, 'color' | 'value' | 'defaultValue' | 'onChange'>;
|
|
9
|
+
interface ExpansionPanelSharedProps extends DivAttributes {
|
|
10
|
+
variant?: ExpansionPanelVariant;
|
|
11
|
+
rounded?: ExpansionPanelRounded;
|
|
12
|
+
density?: ExpansionPanelDensity;
|
|
13
|
+
color?: Palette;
|
|
14
|
+
divider?: boolean;
|
|
15
|
+
}
|
|
16
|
+
interface ExpansionPanelSingleProps extends ExpansionPanelSharedProps {
|
|
17
|
+
multiple?: false;
|
|
18
|
+
value?: ExpansionPanelValue | null;
|
|
19
|
+
defaultValue?: ExpansionPanelValue | null;
|
|
20
|
+
onChange?: (value: ExpansionPanelValue | null) => void;
|
|
21
|
+
}
|
|
22
|
+
interface ExpansionPanelMultipleProps extends ExpansionPanelSharedProps {
|
|
23
|
+
multiple: true;
|
|
24
|
+
value?: ExpansionPanelValue[];
|
|
25
|
+
defaultValue?: ExpansionPanelValue[];
|
|
26
|
+
onChange?: (value: ExpansionPanelValue[]) => void;
|
|
27
|
+
}
|
|
28
|
+
type ExpansionPanelProps = ExpansionPanelSingleProps | ExpansionPanelMultipleProps;
|
|
29
|
+
interface ExpansionPanelContextValue {
|
|
30
|
+
expandedValues: ExpansionPanelValue[];
|
|
31
|
+
toggle: (value: ExpansionPanelValue, disabled?: boolean) => void;
|
|
32
|
+
density: ExpansionPanelDensity;
|
|
33
|
+
color: Palette;
|
|
34
|
+
divider: boolean;
|
|
35
|
+
rounded: ExpansionPanelRounded;
|
|
36
|
+
variant: ExpansionPanelVariant;
|
|
37
|
+
}
|
|
38
|
+
interface ExpansionPanelItemProps extends Omit<DivAttributes, 'title'> {
|
|
39
|
+
value?: ExpansionPanelValue;
|
|
40
|
+
title?: react.ReactNode;
|
|
41
|
+
subtitle?: react.ReactNode;
|
|
42
|
+
text?: react.ReactNode;
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
prepend?: react.ReactNode;
|
|
45
|
+
append?: react.ReactNode;
|
|
46
|
+
expandIcon?: react.ReactNode;
|
|
47
|
+
collapseIcon?: react.ReactNode;
|
|
48
|
+
hideToggleIcon?: boolean;
|
|
49
|
+
headerClassName?: string;
|
|
50
|
+
contentClassName?: string;
|
|
51
|
+
color?: Palette;
|
|
52
|
+
/** @internal */
|
|
53
|
+
__expansionPanelContext?: ExpansionPanelContextValue | null;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
declare const ExpansionPanelItem: react.ForwardRefExoticComponent<ExpansionPanelItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
57
|
+
|
|
58
|
+
export { ExpansionPanelItem as E, type ExpansionPanelItemProps as a, type ExpansionPanelProps as b, type ExpansionPanelValue as c, type ExpansionPanelVariant as d, type ExpansionPanelDensity as e, type ExpansionPanelRounded as f };
|
package/dist/button.cjs
ADDED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
function _interopNamespace(e) {
|
|
8
|
+
if (e && e.__esModule) return e;
|
|
9
|
+
var n = Object.create(null);
|
|
10
|
+
if (e) {
|
|
11
|
+
Object.keys(e).forEach(function (k) {
|
|
12
|
+
if (k !== 'default') {
|
|
13
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return e[k]; }
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
n.default = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
26
|
+
|
|
27
|
+
// src/Containment/Button/index.tsx
|
|
28
|
+
|
|
29
|
+
// src/globals.ts
|
|
30
|
+
var iconBaseClasses = {
|
|
31
|
+
mdi: ["mdi"]
|
|
32
|
+
};
|
|
33
|
+
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
|
+
var blackAndWhitePaletteClasses = {
|
|
36
|
+
solid: tailwindMerge.twMerge(blackAndWhiteVariantClass, "bg-black text-white"),
|
|
37
|
+
outline: blackAndWhiteVariantClass,
|
|
38
|
+
ghost: "bg-neutral-300 text-white",
|
|
39
|
+
text: blackAndWhiteVariantClass,
|
|
40
|
+
filled: "bg-black text-white",
|
|
41
|
+
underlined: tailwindMerge.twMerge(blackAndWhiteVariantClass, "b"),
|
|
42
|
+
rounded: blackAndWhiteVariantClass,
|
|
43
|
+
sharp: "bg-black text-white rounded-none"
|
|
44
|
+
};
|
|
45
|
+
var paletteVariantClasses = {
|
|
46
|
+
primary: {
|
|
47
|
+
solid: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
|
|
48
|
+
sharp: "rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
|
|
49
|
+
outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary",
|
|
50
|
+
ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent",
|
|
51
|
+
text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent",
|
|
52
|
+
filled: "bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25",
|
|
53
|
+
underlined: "bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25",
|
|
54
|
+
rounded: "rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25"
|
|
55
|
+
},
|
|
56
|
+
neutral: {
|
|
57
|
+
solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
|
|
58
|
+
sharp: "rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
|
|
59
|
+
outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400",
|
|
60
|
+
ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent",
|
|
61
|
+
text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
|
|
62
|
+
filled: "bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300",
|
|
63
|
+
underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300",
|
|
64
|
+
rounded: "rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300"
|
|
65
|
+
},
|
|
66
|
+
info: {
|
|
67
|
+
solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
|
|
68
|
+
sharp: "rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
|
|
69
|
+
outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400",
|
|
70
|
+
ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent",
|
|
71
|
+
text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent",
|
|
72
|
+
filled: "bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200",
|
|
73
|
+
underlined: "bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200",
|
|
74
|
+
rounded: "rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200"
|
|
75
|
+
},
|
|
76
|
+
success: {
|
|
77
|
+
solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
|
|
78
|
+
sharp: "rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
|
|
79
|
+
outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400",
|
|
80
|
+
ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent",
|
|
81
|
+
text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent",
|
|
82
|
+
filled: "bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200",
|
|
83
|
+
underlined: "bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200",
|
|
84
|
+
rounded: "rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200"
|
|
85
|
+
},
|
|
86
|
+
warning: {
|
|
87
|
+
solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
|
|
88
|
+
sharp: "rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
|
|
89
|
+
outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400",
|
|
90
|
+
ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent",
|
|
91
|
+
text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent",
|
|
92
|
+
filled: "bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200",
|
|
93
|
+
underlined: "bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200",
|
|
94
|
+
rounded: "rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200"
|
|
95
|
+
},
|
|
96
|
+
danger: {
|
|
97
|
+
solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
|
|
98
|
+
sharp: "rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
|
|
99
|
+
outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400",
|
|
100
|
+
ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent",
|
|
101
|
+
text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent",
|
|
102
|
+
filled: "bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200",
|
|
103
|
+
underlined: "bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200",
|
|
104
|
+
rounded: "rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200"
|
|
105
|
+
},
|
|
106
|
+
surface: {
|
|
107
|
+
solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
|
|
108
|
+
sharp: "rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
|
|
109
|
+
outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200",
|
|
110
|
+
ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent",
|
|
111
|
+
text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent",
|
|
112
|
+
filled: "bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200",
|
|
113
|
+
underlined: "bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200",
|
|
114
|
+
rounded: "rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200"
|
|
115
|
+
},
|
|
116
|
+
bw: blackAndWhitePaletteClasses
|
|
117
|
+
};
|
|
118
|
+
var resolveVariantClass = (variant, palette) => {
|
|
119
|
+
const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;
|
|
120
|
+
return paletteVariants[variant] ?? paletteVariants.solid;
|
|
121
|
+
};
|
|
122
|
+
var resolveIconClassName = (icon) => {
|
|
123
|
+
if (!icon) {
|
|
124
|
+
return void 0;
|
|
125
|
+
}
|
|
126
|
+
if (typeof icon === "string") {
|
|
127
|
+
const trimmed = icon.trim();
|
|
128
|
+
if (!trimmed) {
|
|
129
|
+
return void 0;
|
|
130
|
+
}
|
|
131
|
+
if (trimmed.includes(" ")) {
|
|
132
|
+
return trimmed;
|
|
133
|
+
}
|
|
134
|
+
const normalized2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
135
|
+
return ["mdi", normalized2].join(" ");
|
|
136
|
+
}
|
|
137
|
+
const [library, providedName] = icon;
|
|
138
|
+
const normalizedLibrary = library.trim();
|
|
139
|
+
const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
|
|
140
|
+
const iconName = providedName.trim();
|
|
141
|
+
if (!iconName) {
|
|
142
|
+
return baseClasses.join(" ");
|
|
143
|
+
}
|
|
144
|
+
const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
145
|
+
return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
|
|
146
|
+
};
|
|
147
|
+
var sizeClasses = {
|
|
148
|
+
"x-small": "px-2.5 py-1 text-xs",
|
|
149
|
+
small: "px-3 py-1.5 text-sm",
|
|
150
|
+
medium: "px-4 py-2 text-base",
|
|
151
|
+
large: "px-6 py-3 text-lg",
|
|
152
|
+
"x-large": "px-7 py-3.5 text-xl"
|
|
153
|
+
};
|
|
154
|
+
var iconOnlySizeClasses = {
|
|
155
|
+
"x-small": "p-2 text-xs aspect-square",
|
|
156
|
+
small: "p-2.5 text-sm aspect-square",
|
|
157
|
+
medium: "p-3 text-base aspect-square",
|
|
158
|
+
large: "p-3.5 text-lg aspect-square",
|
|
159
|
+
"x-large": "p-4 text-xl aspect-square"
|
|
160
|
+
};
|
|
161
|
+
var Button = React__namespace.forwardRef(
|
|
162
|
+
({
|
|
163
|
+
variant = "solid",
|
|
164
|
+
color = "primary",
|
|
165
|
+
size = "medium",
|
|
166
|
+
block = false,
|
|
167
|
+
loading = false,
|
|
168
|
+
loadingText,
|
|
169
|
+
icon,
|
|
170
|
+
iconOnly = false,
|
|
171
|
+
className,
|
|
172
|
+
children,
|
|
173
|
+
disabled,
|
|
174
|
+
onClick,
|
|
175
|
+
...rest
|
|
176
|
+
}, ref) => {
|
|
177
|
+
const variantClass = resolveVariantClass(variant, color);
|
|
178
|
+
const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
|
|
179
|
+
const blockClass = block ? "w-full" : null;
|
|
180
|
+
const isDisabled = disabled || loading;
|
|
181
|
+
const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
|
|
182
|
+
const resolvedIconClass = resolveIconClassName(icon);
|
|
183
|
+
const shouldRenderIcon = Boolean(resolvedIconClass && !loading);
|
|
184
|
+
const isLoadingTextProvided = loadingText !== void 0 && loadingText !== null;
|
|
185
|
+
const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
|
|
186
|
+
const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
|
|
187
|
+
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;
|
|
190
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
191
|
+
"button",
|
|
192
|
+
{
|
|
193
|
+
...rest,
|
|
194
|
+
ref,
|
|
195
|
+
onClick,
|
|
196
|
+
disabled: isDisabled,
|
|
197
|
+
className: tailwindMerge.twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
|
|
198
|
+
"data-loading": loading || void 0,
|
|
199
|
+
"aria-busy": loading || void 0,
|
|
200
|
+
children: [
|
|
201
|
+
loading && /* @__PURE__ */ jsxRuntime.jsx("i", { className: loadingIconClass, "aria-hidden": true }),
|
|
202
|
+
iconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClassName, "aria-hidden": true }),
|
|
203
|
+
content
|
|
204
|
+
]
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
);
|
|
209
|
+
Button.displayName = "Button";
|
|
210
|
+
var Button_default = Button;
|
|
211
|
+
|
|
212
|
+
module.exports = Button_default;
|
|
213
|
+
//# sourceMappingURL=button.cjs.map
|
|
214
|
+
//# sourceMappingURL=button.cjs.map
|
|
@@ -0,0 +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"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.cjs';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
|
|
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> & {
|
|
10
|
+
variant?: ButtonVariant;
|
|
11
|
+
color?: Palette;
|
|
12
|
+
size?: GlobalSize;
|
|
13
|
+
block?: boolean;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
loadingText?: string;
|
|
16
|
+
icon?: PropIcon;
|
|
17
|
+
iconOnly?: boolean;
|
|
18
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
|
|
20
|
+
export { Button as default };
|
package/dist/button.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { G as GlobalVariant, P as Palette, a as GlobalSize, b as PropIcon } from './global.types-E2uVLemv.js';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
|
|
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> & {
|
|
10
|
+
variant?: ButtonVariant;
|
|
11
|
+
color?: Palette;
|
|
12
|
+
size?: GlobalSize;
|
|
13
|
+
block?: boolean;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
loadingText?: string;
|
|
16
|
+
icon?: PropIcon;
|
|
17
|
+
iconOnly?: boolean;
|
|
18
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
|
|
20
|
+
export { Button as default };
|
package/dist/button.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}
|
package/dist/card.cjs
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
// src/Containment/Card/index.tsx
|
|
8
|
+
var paddingClasses = {
|
|
9
|
+
none: "p-0",
|
|
10
|
+
sm: "p-3",
|
|
11
|
+
md: "p-4",
|
|
12
|
+
lg: "p-6"
|
|
13
|
+
};
|
|
14
|
+
var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors";
|
|
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-gray-300 bg-white shadow-none",
|
|
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"
|
|
24
|
+
};
|
|
25
|
+
var CardRoot = react.forwardRef(function Card({ className, children, variant = "solid", padding = "md", interactive = false, ...rest }, ref) {
|
|
26
|
+
const variantClass = variantClasses[variant] ?? variantClasses.solid;
|
|
27
|
+
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;
|
|
29
|
+
const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
|
|
30
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
...rest,
|
|
34
|
+
ref,
|
|
35
|
+
tabIndex: tabIndexValue,
|
|
36
|
+
className: tailwindMerge.twMerge(cardBase, variantClass, paddingClass, interactiveClass, className),
|
|
37
|
+
children
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
});
|
|
41
|
+
var CardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
...rest,
|
|
45
|
+
className: tailwindMerge.twMerge("card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3", className)
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
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(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
...rest,
|
|
53
|
+
className: tailwindMerge.twMerge("card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3", className)
|
|
54
|
+
}
|
|
55
|
+
);
|
|
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
|
+
var CardMedia = ({ className, rounded = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
|
+
"img",
|
|
61
|
+
{
|
|
62
|
+
...rest,
|
|
63
|
+
className: tailwindMerge.twMerge(
|
|
64
|
+
"card-media w-full object-cover",
|
|
65
|
+
rounded ? "rounded-xl" : "rounded-none",
|
|
66
|
+
rest.height || rest.style ? "block" : "block max-h-60",
|
|
67
|
+
className
|
|
68
|
+
),
|
|
69
|
+
loading: rest.loading ?? "lazy"
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
var CardActions = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-actions flex flex-wrap gap-2", className) });
|
|
73
|
+
var Card2 = Object.assign(CardRoot, {
|
|
74
|
+
Header: CardHeader,
|
|
75
|
+
Body: CardBody,
|
|
76
|
+
Footer: CardFooter,
|
|
77
|
+
Title: CardTitle,
|
|
78
|
+
Subtitle: CardSubtitle,
|
|
79
|
+
Text: CardText,
|
|
80
|
+
Media: CardMedia,
|
|
81
|
+
Actions: CardActions
|
|
82
|
+
});
|
|
83
|
+
var Card_default = Card2;
|
|
84
|
+
|
|
85
|
+
module.exports = Card_default;
|
|
86
|
+
//# sourceMappingURL=card.cjs.map
|
|
87
|
+
//# sourceMappingURL=card.cjs.map
|
|
@@ -0,0 +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"]}
|
package/dist/card.d.cts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.cjs';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
|
|
4
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
5
|
+
type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
variant?: GlobalVariant;
|
|
7
|
+
padding?: CardPadding;
|
|
8
|
+
/**
|
|
9
|
+
* Adds a subtle hover + focus ring. Works well for clickable cards.
|
|
10
|
+
*/
|
|
11
|
+
interactive?: boolean;
|
|
12
|
+
};
|
|
13
|
+
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
15
|
+
type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
16
|
+
rounded?: boolean;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
variant?: GlobalVariant;
|
|
21
|
+
padding?: CardPadding;
|
|
22
|
+
interactive?: boolean;
|
|
23
|
+
} & react.RefAttributes<HTMLDivElement>> & {
|
|
24
|
+
Header: react.FC<CardSectionProps>;
|
|
25
|
+
Body: react.FC<CardSectionProps>;
|
|
26
|
+
Footer: react.FC<CardSectionProps>;
|
|
27
|
+
Title: react.FC<CardSectionProps>;
|
|
28
|
+
Subtitle: react.FC<CardSectionProps>;
|
|
29
|
+
Text: react.FC<CardTextProps>;
|
|
30
|
+
Media: react.FC<CardMediaProps>;
|
|
31
|
+
Actions: react.FC<CardSectionProps>;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { type CardMediaProps, type CardProps, type CardSectionProps, type CardTextProps, Card as default };
|
package/dist/card.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { G as GlobalVariant } from './global.types-E2uVLemv.js';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
|
|
4
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
5
|
+
type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
variant?: GlobalVariant;
|
|
7
|
+
padding?: CardPadding;
|
|
8
|
+
/**
|
|
9
|
+
* Adds a subtle hover + focus ring. Works well for clickable cards.
|
|
10
|
+
*/
|
|
11
|
+
interactive?: boolean;
|
|
12
|
+
};
|
|
13
|
+
type CardSectionProps = React.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
type CardTextProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
15
|
+
type CardMediaProps = React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
16
|
+
rounded?: boolean;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
declare const Card: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
variant?: GlobalVariant;
|
|
21
|
+
padding?: CardPadding;
|
|
22
|
+
interactive?: boolean;
|
|
23
|
+
} & react.RefAttributes<HTMLDivElement>> & {
|
|
24
|
+
Header: react.FC<CardSectionProps>;
|
|
25
|
+
Body: react.FC<CardSectionProps>;
|
|
26
|
+
Footer: react.FC<CardSectionProps>;
|
|
27
|
+
Title: react.FC<CardSectionProps>;
|
|
28
|
+
Subtitle: react.FC<CardSectionProps>;
|
|
29
|
+
Text: react.FC<CardTextProps>;
|
|
30
|
+
Media: react.FC<CardMediaProps>;
|
|
31
|
+
Actions: react.FC<CardSectionProps>;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { type CardMediaProps, type CardProps, type CardSectionProps, type CardTextProps, Card as default };
|
package/dist/card.js
ADDED
package/dist/card.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"card.js"}
|