@lindle/linoardo 1.0.17 → 1.0.19
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 +10 -2
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +1 -0
- package/dist/button.d.ts +1 -0
- package/dist/button.js +1 -1
- 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/chunk-AOHXZ7OM.js +126 -0
- package/dist/chunk-AOHXZ7OM.js.map +1 -0
- package/dist/chunk-N65GNKRG.js +143 -0
- package/dist/chunk-N65GNKRG.js.map +1 -0
- package/dist/{chunk-TTDFAKOL.js → chunk-PYG5SDNO.js} +2 -2
- package/dist/{chunk-TTDFAKOL.js.map → chunk-PYG5SDNO.js.map} +1 -1
- package/dist/{chunk-3EGIRBQ3.js → chunk-QGQ66FJD.js} +69 -14
- package/dist/chunk-QGQ66FJD.js.map +1 -0
- package/dist/{chunk-7LLAWEDF.js → chunk-SZU6OYLS.js} +12 -4
- package/dist/chunk-SZU6OYLS.js.map +1 -0
- package/dist/chunk-V4BVJOSC.js +85 -0
- package/dist/chunk-V4BVJOSC.js.map +1 -0
- package/dist/index.cjs +409 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +6 -3
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +1 -1
- package/dist/menu.cjs +67 -12
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +1 -1
- 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 +349 -38
- 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/package.json +17 -4
- package/dist/chunk-3EGIRBQ3.js.map +0 -1
- package/dist/chunk-7LLAWEDF.js.map +0 -1
package/dist/switch.cjs
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
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/Form/Switch/index.tsx
|
|
8
|
+
var trackSizes = {
|
|
9
|
+
small: "w-10 h-6",
|
|
10
|
+
medium: "w-12 h-7",
|
|
11
|
+
large: "w-14 h-8"
|
|
12
|
+
};
|
|
13
|
+
var thumbSizes = {
|
|
14
|
+
small: "w-5 h-5",
|
|
15
|
+
medium: "w-6 h-6",
|
|
16
|
+
large: "w-7 h-7"
|
|
17
|
+
};
|
|
18
|
+
var thumbTranslate = {
|
|
19
|
+
small: "translate-x-4",
|
|
20
|
+
medium: "translate-x-5",
|
|
21
|
+
large: "translate-x-6"
|
|
22
|
+
};
|
|
23
|
+
var paletteTrackClasses = {
|
|
24
|
+
primary: { active: "bg-primary", inactive: "bg-gray-300" },
|
|
25
|
+
neutral: { active: "bg-gray-600", inactive: "bg-gray-300" },
|
|
26
|
+
info: { active: "bg-sky-500", inactive: "bg-gray-300" },
|
|
27
|
+
success: { active: "bg-emerald-500", inactive: "bg-gray-300" },
|
|
28
|
+
warning: { active: "bg-amber-500", inactive: "bg-gray-300" },
|
|
29
|
+
danger: { active: "bg-red-500", inactive: "bg-gray-300" },
|
|
30
|
+
surface: { active: "bg-gray-900", inactive: "bg-gray-300" },
|
|
31
|
+
bw: { active: "bg-black", inactive: "bg-gray-200" }
|
|
32
|
+
};
|
|
33
|
+
var focusRingClasses = {
|
|
34
|
+
primary: "peer-focus-visible:ring-primary/40",
|
|
35
|
+
neutral: "peer-focus-visible:ring-gray-400",
|
|
36
|
+
info: "peer-focus-visible:ring-sky-400",
|
|
37
|
+
success: "peer-focus-visible:ring-emerald-400",
|
|
38
|
+
warning: "peer-focus-visible:ring-amber-400",
|
|
39
|
+
danger: "peer-focus-visible:ring-red-400",
|
|
40
|
+
surface: "peer-focus-visible:ring-gray-800/70",
|
|
41
|
+
bw: "peer-focus-visible:ring-black/50"
|
|
42
|
+
};
|
|
43
|
+
var thumbActiveClasses = {
|
|
44
|
+
primary: "border-primary shadow-[0_4px_12px_rgba(99,102,241,0.35)]",
|
|
45
|
+
neutral: "border-gray-600 shadow-[0_4px_12px_rgba(75,85,99,0.35)]",
|
|
46
|
+
info: "border-sky-500 shadow-[0_4px_12px_rgba(2,132,199,0.32)]",
|
|
47
|
+
success: "border-emerald-500 shadow-[0_4px_12px_rgba(16,185,129,0.32)]",
|
|
48
|
+
warning: "border-amber-500 shadow-[0_4px_12px_rgba(245,158,11,0.32)]",
|
|
49
|
+
danger: "border-red-500 shadow-[0_4px_12px_rgba(239,68,68,0.32)]",
|
|
50
|
+
surface: "border-gray-900 shadow-[0_4px_12px_rgba(15,23,42,0.32)]",
|
|
51
|
+
bw: "border-black shadow-[0_4px_12px_rgba(0,0,0,0.32)]"
|
|
52
|
+
};
|
|
53
|
+
var Switch = react.forwardRef(
|
|
54
|
+
({
|
|
55
|
+
color = "primary",
|
|
56
|
+
size = "medium",
|
|
57
|
+
label,
|
|
58
|
+
description,
|
|
59
|
+
wrapperClassName,
|
|
60
|
+
className,
|
|
61
|
+
labelClassName,
|
|
62
|
+
disabled,
|
|
63
|
+
onChange,
|
|
64
|
+
checked,
|
|
65
|
+
defaultChecked,
|
|
66
|
+
...rest
|
|
67
|
+
}, ref) => {
|
|
68
|
+
const paletteTrack = paletteTrackClasses[color] ?? paletteTrackClasses.primary;
|
|
69
|
+
const focusClass = focusRingClasses[color] ?? focusRingClasses.primary;
|
|
70
|
+
const thumbActive = thumbActiveClasses[color] ?? thumbActiveClasses.primary;
|
|
71
|
+
const isControlled = checked !== void 0;
|
|
72
|
+
const [internalChecked, setInternalChecked] = react.useState(
|
|
73
|
+
Boolean((isControlled ? checked : defaultChecked) ?? false)
|
|
74
|
+
);
|
|
75
|
+
react.useEffect(() => {
|
|
76
|
+
if (isControlled) {
|
|
77
|
+
setInternalChecked(Boolean(checked));
|
|
78
|
+
}
|
|
79
|
+
}, [checked, isControlled]);
|
|
80
|
+
const currentChecked = isControlled ? Boolean(checked) : internalChecked;
|
|
81
|
+
const handleChange = (event) => {
|
|
82
|
+
if (!isControlled) {
|
|
83
|
+
setInternalChecked(event.target.checked);
|
|
84
|
+
}
|
|
85
|
+
onChange?.(event);
|
|
86
|
+
};
|
|
87
|
+
const sizeTrackClass = trackSizes[size] ?? trackSizes.medium;
|
|
88
|
+
const sizeThumbClass = thumbSizes[size] ?? thumbSizes.medium;
|
|
89
|
+
const thumbShiftClass = thumbTranslate[size] ?? thumbTranslate.medium;
|
|
90
|
+
const pointerClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
|
|
91
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: tailwindMerge.twMerge("flex items-center gap-3 select-none", pointerClass, wrapperClassName), children: [
|
|
92
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center", children: [
|
|
93
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
+
"input",
|
|
95
|
+
{
|
|
96
|
+
...rest,
|
|
97
|
+
type: "checkbox",
|
|
98
|
+
ref,
|
|
99
|
+
checked: currentChecked,
|
|
100
|
+
onChange: handleChange,
|
|
101
|
+
disabled,
|
|
102
|
+
className: "peer sr-only"
|
|
103
|
+
}
|
|
104
|
+
),
|
|
105
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
106
|
+
"span",
|
|
107
|
+
{
|
|
108
|
+
className: tailwindMerge.twMerge(
|
|
109
|
+
"block rounded-full border border-transparent transition-all duration-200",
|
|
110
|
+
sizeTrackClass,
|
|
111
|
+
currentChecked ? paletteTrack.active : paletteTrack.inactive,
|
|
112
|
+
disabled && "bg-gray-200",
|
|
113
|
+
"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
|
|
114
|
+
focusClass,
|
|
115
|
+
className
|
|
116
|
+
),
|
|
117
|
+
"aria-hidden": true,
|
|
118
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
119
|
+
"span",
|
|
120
|
+
{
|
|
121
|
+
className: tailwindMerge.twMerge(
|
|
122
|
+
"absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200",
|
|
123
|
+
sizeThumbClass,
|
|
124
|
+
currentChecked && thumbShiftClass,
|
|
125
|
+
currentChecked && thumbActive,
|
|
126
|
+
disabled && "border-gray-300"
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
)
|
|
132
|
+
] }),
|
|
133
|
+
(label || description) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tailwindMerge.twMerge("flex flex-col leading-tight", labelClassName), children: [
|
|
134
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
|
|
135
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: description })
|
|
136
|
+
] })
|
|
137
|
+
] });
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
Switch.displayName = "Switch";
|
|
141
|
+
var Switch_default = Switch;
|
|
142
|
+
|
|
143
|
+
module.exports = Switch_default;
|
|
144
|
+
//# sourceMappingURL=switch.cjs.map
|
|
145
|
+
//# sourceMappingURL=switch.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Switch/index.tsx"],"names":["forwardRef","useState","useEffect","twMerge","jsxs","jsx"],"mappings":"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","file":"switch.cjs","sourcesContent":["import { forwardRef, type ChangeEvent, useEffect, useState } from 'react';\nimport type { Palette } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { SwitchProps, SwitchSize } from './types.switch';\n\nconst trackSizes: Record<SwitchSize, string> = {\n small: 'w-10 h-6',\n medium: 'w-12 h-7',\n large: 'w-14 h-8'\n};\n\nconst thumbSizes: Record<SwitchSize, string> = {\n small: 'w-5 h-5',\n medium: 'w-6 h-6',\n large: 'w-7 h-7'\n};\n\nconst thumbTranslate: Record<SwitchSize, string> = {\n small: 'translate-x-4',\n medium: 'translate-x-5',\n large: 'translate-x-6'\n};\n\nconst paletteTrackClasses: Record<Palette, { active: string; inactive: string }> = {\n primary: { active: 'bg-primary', inactive: 'bg-gray-300' },\n neutral: { active: 'bg-gray-600', inactive: 'bg-gray-300' },\n info: { active: 'bg-sky-500', inactive: 'bg-gray-300' },\n success: { active: 'bg-emerald-500', inactive: 'bg-gray-300' },\n warning: { active: 'bg-amber-500', inactive: 'bg-gray-300' },\n danger: { active: 'bg-red-500', inactive: 'bg-gray-300' },\n surface: { active: 'bg-gray-900', inactive: 'bg-gray-300' },\n bw: { active: 'bg-black', inactive: 'bg-gray-200' }\n};\n\nconst focusRingClasses: Record<Palette, string> = {\n primary: 'peer-focus-visible:ring-primary/40',\n neutral: 'peer-focus-visible:ring-gray-400',\n info: 'peer-focus-visible:ring-sky-400',\n success: 'peer-focus-visible:ring-emerald-400',\n warning: 'peer-focus-visible:ring-amber-400',\n danger: 'peer-focus-visible:ring-red-400',\n surface: 'peer-focus-visible:ring-gray-800/70',\n bw: 'peer-focus-visible:ring-black/50'\n};\n\nconst thumbActiveClasses: Record<Palette, string> = {\n primary: 'border-primary shadow-[0_4px_12px_rgba(99,102,241,0.35)]',\n neutral: 'border-gray-600 shadow-[0_4px_12px_rgba(75,85,99,0.35)]',\n info: 'border-sky-500 shadow-[0_4px_12px_rgba(2,132,199,0.32)]',\n success: 'border-emerald-500 shadow-[0_4px_12px_rgba(16,185,129,0.32)]',\n warning: 'border-amber-500 shadow-[0_4px_12px_rgba(245,158,11,0.32)]',\n danger: 'border-red-500 shadow-[0_4px_12px_rgba(239,68,68,0.32)]',\n surface: 'border-gray-900 shadow-[0_4px_12px_rgba(15,23,42,0.32)]',\n bw: 'border-black shadow-[0_4px_12px_rgba(0,0,0,0.32)]'\n};\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n color = 'primary',\n size = 'medium',\n label,\n description,\n wrapperClassName,\n className,\n labelClassName,\n disabled,\n onChange,\n checked,\n defaultChecked,\n ...rest\n },\n ref\n ) => {\n const paletteTrack = paletteTrackClasses[color] ?? paletteTrackClasses.primary;\n const focusClass = focusRingClasses[color] ?? focusRingClasses.primary;\n const thumbActive = thumbActiveClasses[color] ?? thumbActiveClasses.primary;\n const isControlled = checked !== undefined;\n const [internalChecked, setInternalChecked] = useState<boolean>(\n Boolean((isControlled ? checked : defaultChecked) ?? false)\n );\n\n useEffect(() => {\n if (isControlled) {\n setInternalChecked(Boolean(checked));\n }\n }, [checked, isControlled]);\n\n const currentChecked = isControlled ? Boolean(checked) : internalChecked;\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) {\n setInternalChecked(event.target.checked);\n }\n onChange?.(event);\n };\n\n const sizeTrackClass = trackSizes[size] ?? trackSizes.medium;\n const sizeThumbClass = thumbSizes[size] ?? thumbSizes.medium;\n const thumbShiftClass = thumbTranslate[size] ?? thumbTranslate.medium;\n\n const pointerClass = disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';\n\n return (\n <label className={twMerge('flex items-center gap-3 select-none', pointerClass, wrapperClassName)}>\n <span className='relative inline-flex items-center'>\n <input\n {...rest}\n type='checkbox'\n ref={ref}\n checked={currentChecked}\n onChange={handleChange}\n disabled={disabled}\n className='peer sr-only'\n />\n <span\n className={twMerge(\n 'block rounded-full border border-transparent transition-all duration-200',\n sizeTrackClass,\n currentChecked ? paletteTrack.active : paletteTrack.inactive,\n disabled && 'bg-gray-200',\n 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2',\n focusClass,\n className\n )}\n aria-hidden\n >\n <span\n className={twMerge(\n 'absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200',\n sizeThumbClass,\n currentChecked && thumbShiftClass,\n currentChecked && thumbActive,\n disabled && 'border-gray-300'\n )}\n />\n </span>\n </span>\n\n {(label || description) && (\n <span className={twMerge('flex flex-col leading-tight', labelClassName)}>\n {label && <span className='text-sm font-medium text-gray-900'>{label}</span>}\n {description && <span className='text-xs text-gray-600'>{description}</span>}\n </span>\n )}\n </label>\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { P as Palette } from './global.types-E2uVLemv.cjs';
|
|
3
|
+
|
|
4
|
+
type SwitchSize = 'small' | 'medium' | 'large';
|
|
5
|
+
|
|
6
|
+
declare const Switch: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
7
|
+
color?: Palette;
|
|
8
|
+
size?: SwitchSize;
|
|
9
|
+
label?: React.ReactNode;
|
|
10
|
+
description?: React.ReactNode;
|
|
11
|
+
wrapperClassName?: string;
|
|
12
|
+
className?: string;
|
|
13
|
+
labelClassName?: string;
|
|
14
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
15
|
+
|
|
16
|
+
export { Switch as default };
|
package/dist/switch.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { P as Palette } from './global.types-E2uVLemv.js';
|
|
3
|
+
|
|
4
|
+
type SwitchSize = 'small' | 'medium' | 'large';
|
|
5
|
+
|
|
6
|
+
declare const Switch: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
7
|
+
color?: Palette;
|
|
8
|
+
size?: SwitchSize;
|
|
9
|
+
label?: React.ReactNode;
|
|
10
|
+
description?: React.ReactNode;
|
|
11
|
+
wrapperClassName?: string;
|
|
12
|
+
className?: string;
|
|
13
|
+
labelClassName?: string;
|
|
14
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
15
|
+
|
|
16
|
+
export { Switch as default };
|
package/dist/switch.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"switch.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lindle/linoardo",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "",
|
|
@@ -10,9 +10,7 @@
|
|
|
10
10
|
"@mdi/font": "^7.4.47",
|
|
11
11
|
"react": ">=18",
|
|
12
12
|
"react-dom": ">=18",
|
|
13
|
-
"tailwind-merge": "^3.3.1"
|
|
14
|
-
},
|
|
15
|
-
"devDependencies": {
|
|
13
|
+
"tailwind-merge": "^3.3.1",
|
|
16
14
|
"@storybook/addon-docs": "^10.0.2",
|
|
17
15
|
"@storybook/addon-links": "^10.0.2",
|
|
18
16
|
"@storybook/react-vite": "^10.0.2",
|
|
@@ -90,11 +88,26 @@
|
|
|
90
88
|
"import": "./dist/tooltip.js",
|
|
91
89
|
"require": "./dist/tooltip.cjs"
|
|
92
90
|
},
|
|
91
|
+
"./card": {
|
|
92
|
+
"types": "./dist/card.d.ts",
|
|
93
|
+
"import": "./dist/card.js",
|
|
94
|
+
"require": "./dist/card.cjs"
|
|
95
|
+
},
|
|
93
96
|
"./input": {
|
|
94
97
|
"types": "./dist/input.d.ts",
|
|
95
98
|
"import": "./dist/input.js",
|
|
96
99
|
"require": "./dist/input.cjs"
|
|
97
100
|
},
|
|
101
|
+
"./slider": {
|
|
102
|
+
"types": "./dist/slider.d.ts",
|
|
103
|
+
"import": "./dist/slider.js",
|
|
104
|
+
"require": "./dist/slider.cjs"
|
|
105
|
+
},
|
|
106
|
+
"./switch": {
|
|
107
|
+
"types": "./dist/switch.d.ts",
|
|
108
|
+
"import": "./dist/switch.js",
|
|
109
|
+
"require": "./dist/switch.cjs"
|
|
110
|
+
},
|
|
98
111
|
"./styles.css": "./dist/styles.css"
|
|
99
112
|
},
|
|
100
113
|
"scripts": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Containment/Menu/index.tsx"],"names":[],"mappings":"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","file":"chunk-3EGIRBQ3.js","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport type MenuPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\nexport interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n activator: React.ReactNode;\n children: React.ReactNode;\n placement?: MenuPlacement;\n open?: boolean;\n openOnHover?: boolean;\n openOnFocus?: boolean;\n matchActivatorWidth?: boolean;\n keepMounted?: boolean;\n scrim?: boolean;\n contentClassName?: string;\n contentProps?: React.HTMLAttributes<HTMLDivElement>;\n overlayClassName?: string;\n}\n\nconst placementClasses: Record<MenuPlacement, string> = {\n 'bottom-start': 'left-0 top-full origin-top-left',\n bottom: 'left-1/2 top-full -translate-x-1/2 origin-top',\n 'bottom-end': 'right-0 top-full origin-top-right',\n 'top-start': 'left-0 bottom-full origin-bottom-left',\n top: 'left-1/2 bottom-full -translate-x-1/2 origin-bottom',\n 'top-end': 'right-0 bottom-full origin-bottom-right'\n};\n\nconst offsetClasses: Record<'top' | 'bottom', string> = {\n top: 'mb-2',\n bottom: 'mt-2'\n};\n\nconst menuBaseClasses =\n 'absolute z-50 min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2';\n\nconst overlayBaseClasses = 'fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]';\n\nconst Menu = React.forwardRef<HTMLDivElement, MenuProps>((props, ref) => {\n const {\n activator,\n children,\n placement = 'bottom-start',\n open,\n openOnHover = true,\n openOnFocus = true,\n matchActivatorWidth = false,\n keepMounted = false,\n scrim = false,\n contentClassName,\n contentProps,\n overlayClassName,\n className,\n ...rest\n } = props;\n\n const hasContent = children !== undefined && children !== null;\n const manual = typeof open === 'boolean';\n const visible = Boolean(open);\n const shouldRenderContent = hasContent && (keepMounted || visible || (!manual && (openOnHover || openOnFocus)));\n const verticalPlacement = placement.startsWith('top') ? 'top' : 'bottom';\n\n const visibilityClasses = (() => {\n if (manual) {\n return visible ? 'pointer-events-auto opacity-100 scale-100' : 'pointer-events-none opacity-0 scale-95';\n }\n const base = 'pointer-events-none opacity-0 scale-95';\n const hover = openOnHover ? ' group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100' : '';\n const focus = openOnFocus\n ? ' group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100'\n : '';\n return `${base}${hover}${focus}`;\n })();\n\n const {\n className: contentExtraClassName,\n style: contentStyle,\n role: contentRole,\n tabIndex: contentTabIndex,\n ...restContentProps\n } = contentProps ?? {};\n\n const overlayNode = scrim && visible ? <div className={twMerge(overlayBaseClasses, overlayClassName)} aria-hidden /> : null;\n\n return (\n <>\n {overlayNode}\n <div\n {...rest}\n ref={ref}\n className={twMerge('relative inline-flex min-w-0 group/menu', className)}\n data-open={visible || undefined}\n >\n <div className='inline-flex w-full min-w-0'>{activator}</div>\n {shouldRenderContent ? (\n <div\n {...restContentProps}\n className={twMerge(\n menuBaseClasses,\n placementClasses[placement],\n offsetClasses[verticalPlacement],\n matchActivatorWidth ? 'min-w-full' : undefined,\n visibilityClasses,\n contentClassName,\n contentExtraClassName\n )}\n data-state={visible ? 'open' : 'closed'}\n role={contentRole ?? 'menu'}\n tabIndex={contentTabIndex ?? -1}\n style={contentStyle}\n >\n {children}\n </div>\n ) : null}\n </div>\n </>\n );\n});\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["normalized","twMerge"],"mappings":"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","file":"chunk-7LLAWEDF.js","sourcesContent":["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","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport { base, resolveIconClassName, resolveVariantClass, sizeClasses } from './states.button';\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.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 className,\n children,\n disabled,\n onClick,\n ...rest\n },\n ref\n ) => {\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = sizeClasses[size] ?? sizeClasses.medium;\n const blockClass = block ? 'w-full' : null;\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = 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"]}
|