@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,126 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/Form/Slider/index.tsx
|
|
6
|
+
var paletteValues = {
|
|
7
|
+
primary: { fill: "var(--color-primary, #6366f1)", ring: "rgba(99, 102, 241, 0.28)", thumbBorder: "#6366f1" },
|
|
8
|
+
neutral: { fill: "#4b5563", ring: "rgba(75, 85, 99, 0.28)", thumbBorder: "#4b5563" },
|
|
9
|
+
info: { fill: "#0284c7", ring: "rgba(2, 132, 199, 0.28)", thumbBorder: "#0284c7" },
|
|
10
|
+
success: { fill: "#059669", ring: "rgba(5, 150, 105, 0.24)", thumbBorder: "#059669" },
|
|
11
|
+
warning: { fill: "#d97706", ring: "rgba(217, 119, 6, 0.24)", thumbBorder: "#d97706" },
|
|
12
|
+
danger: { fill: "#dc2626", ring: "rgba(220, 38, 38, 0.24)", thumbBorder: "#dc2626" },
|
|
13
|
+
surface: { fill: "#0f172a", ring: "rgba(15, 23, 42, 0.22)", thumbBorder: "#0f172a" },
|
|
14
|
+
bw: { fill: "#000000", ring: "rgba(0, 0, 0, 0.26)", thumbBorder: "#000000" }
|
|
15
|
+
};
|
|
16
|
+
var sizeTokens = {
|
|
17
|
+
small: { trackHeight: "0.375rem", thumbSize: "1.1rem", trackClass: "h-1.5", valueClass: "text-xs" },
|
|
18
|
+
medium: { trackHeight: "0.5rem", thumbSize: "1.25rem", trackClass: "h-2", valueClass: "text-sm" },
|
|
19
|
+
large: { trackHeight: "0.6rem", thumbSize: "1.4rem", trackClass: "h-[0.65rem]", valueClass: "text-base" }
|
|
20
|
+
};
|
|
21
|
+
var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
22
|
+
var toNumber = (value, fallback) => {
|
|
23
|
+
if (typeof value === "number" && Number.isFinite(value)) {
|
|
24
|
+
return value;
|
|
25
|
+
}
|
|
26
|
+
const parsed = Number(value);
|
|
27
|
+
return Number.isFinite(parsed) ? parsed : fallback;
|
|
28
|
+
};
|
|
29
|
+
var Slider = ({
|
|
30
|
+
color = "primary",
|
|
31
|
+
size = "medium",
|
|
32
|
+
label,
|
|
33
|
+
hint,
|
|
34
|
+
showValue = true,
|
|
35
|
+
valueLabel,
|
|
36
|
+
wrapperClassName,
|
|
37
|
+
className,
|
|
38
|
+
trackColor,
|
|
39
|
+
onChange,
|
|
40
|
+
disabled,
|
|
41
|
+
min = 0,
|
|
42
|
+
max = 100,
|
|
43
|
+
step = 1,
|
|
44
|
+
...rest
|
|
45
|
+
}) => {
|
|
46
|
+
const palette = paletteValues[color] ?? paletteValues.primary;
|
|
47
|
+
const sizeToken = sizeTokens[size] ?? sizeTokens.medium;
|
|
48
|
+
const { value, defaultValue, ...inputProps } = rest;
|
|
49
|
+
const resolvedMin = toNumber(min, 0);
|
|
50
|
+
const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);
|
|
51
|
+
const resolvedStep = toNumber(step, 1);
|
|
52
|
+
const isControlled = typeof value === "number";
|
|
53
|
+
const [internalValue, setInternalValue] = useState(
|
|
54
|
+
clamp(
|
|
55
|
+
typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : resolvedMin,
|
|
56
|
+
resolvedMin,
|
|
57
|
+
resolvedMax
|
|
58
|
+
)
|
|
59
|
+
);
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (isControlled && typeof value === "number") {
|
|
62
|
+
setInternalValue(clamp(value, resolvedMin, resolvedMax));
|
|
63
|
+
}
|
|
64
|
+
}, [isControlled, value, resolvedMin, resolvedMax]);
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
if (!isControlled) {
|
|
67
|
+
setInternalValue((prev) => clamp(prev, resolvedMin, resolvedMax));
|
|
68
|
+
}
|
|
69
|
+
}, [isControlled, resolvedMin, resolvedMax]);
|
|
70
|
+
const currentValue = isControlled && typeof value === "number" ? clamp(value, resolvedMin, resolvedMax) : internalValue;
|
|
71
|
+
const percentage = resolvedMax === resolvedMin ? 0 : (currentValue - resolvedMin) / (resolvedMax - resolvedMin) * 100;
|
|
72
|
+
const cssVars = {
|
|
73
|
+
"--slider-color": palette.fill,
|
|
74
|
+
"--slider-ring-color": palette.ring,
|
|
75
|
+
"--slider-thumb-border": palette.thumbBorder,
|
|
76
|
+
"--slider-track-color": trackColor ?? "#e5e7eb",
|
|
77
|
+
"--slider-track-height": sizeToken.trackHeight,
|
|
78
|
+
"--slider-thumb-size": sizeToken.thumbSize,
|
|
79
|
+
"--slider-percentage": `${percentage}%`
|
|
80
|
+
};
|
|
81
|
+
if (disabled) {
|
|
82
|
+
cssVars["--slider-disabled-fill"] = "#d1d5db";
|
|
83
|
+
cssVars["--slider-thumb-border"] = "#d1d5db";
|
|
84
|
+
cssVars["--slider-track-color-disabled"] = "#e5e7eb";
|
|
85
|
+
}
|
|
86
|
+
const handleChange = (event) => {
|
|
87
|
+
const nextValue = Number(event.target.value);
|
|
88
|
+
if (!isControlled) {
|
|
89
|
+
setInternalValue(nextValue);
|
|
90
|
+
}
|
|
91
|
+
onChange?.(nextValue, event);
|
|
92
|
+
};
|
|
93
|
+
const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;
|
|
94
|
+
return /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col gap-2", wrapperClassName), children: [
|
|
95
|
+
(label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
96
|
+
label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
|
|
97
|
+
showValue && /* @__PURE__ */ jsx("span", { className: twMerge("tabular-nums text-gray-900", sizeToken.valueClass), children: displayValue })
|
|
98
|
+
] }),
|
|
99
|
+
/* @__PURE__ */ jsx(
|
|
100
|
+
"input",
|
|
101
|
+
{
|
|
102
|
+
...inputProps,
|
|
103
|
+
type: "range",
|
|
104
|
+
min: resolvedMin,
|
|
105
|
+
max: resolvedMax,
|
|
106
|
+
step: resolvedStep,
|
|
107
|
+
value: currentValue,
|
|
108
|
+
onChange: handleChange,
|
|
109
|
+
disabled,
|
|
110
|
+
className: twMerge(
|
|
111
|
+
"slider-control focus-visible:outline-none rounded-full",
|
|
112
|
+
sizeToken.trackClass,
|
|
113
|
+
disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer",
|
|
114
|
+
className
|
|
115
|
+
),
|
|
116
|
+
style: cssVars
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600", children: hint })
|
|
120
|
+
] });
|
|
121
|
+
};
|
|
122
|
+
var Slider_default = Slider;
|
|
123
|
+
|
|
124
|
+
export { Slider_default };
|
|
125
|
+
//# sourceMappingURL=chunk-AOHXZ7OM.js.map
|
|
126
|
+
//# sourceMappingURL=chunk-AOHXZ7OM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Slider/index.tsx"],"names":[],"mappings":"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","file":"chunk-AOHXZ7OM.js","sourcesContent":["import { type ChangeEvent, type CSSProperties, useEffect, useState } from 'react';\nimport type { Palette } from '@lindle/linoardo/global.types';\nimport { twMerge } from 'tailwind-merge';\nimport type { SliderProps, SliderSize } from './types.slider';\n\nconst paletteValues: Record<Palette, { fill: string; ring: string; thumbBorder: string }> = {\n primary: { fill: 'var(--color-primary, #6366f1)', ring: 'rgba(99, 102, 241, 0.28)', thumbBorder: '#6366f1' },\n neutral: { fill: '#4b5563', ring: 'rgba(75, 85, 99, 0.28)', thumbBorder: '#4b5563' },\n info: { fill: '#0284c7', ring: 'rgba(2, 132, 199, 0.28)', thumbBorder: '#0284c7' },\n success: { fill: '#059669', ring: 'rgba(5, 150, 105, 0.24)', thumbBorder: '#059669' },\n warning: { fill: '#d97706', ring: 'rgba(217, 119, 6, 0.24)', thumbBorder: '#d97706' },\n danger: { fill: '#dc2626', ring: 'rgba(220, 38, 38, 0.24)', thumbBorder: '#dc2626' },\n surface: { fill: '#0f172a', ring: 'rgba(15, 23, 42, 0.22)', thumbBorder: '#0f172a' },\n bw: { fill: '#000000', ring: 'rgba(0, 0, 0, 0.26)', thumbBorder: '#000000' }\n};\n\nconst sizeTokens: Record<\n SliderSize,\n { trackHeight: string; thumbSize: string; trackClass: string; valueClass: string }\n> = {\n small: { trackHeight: '0.375rem', thumbSize: '1.1rem', trackClass: 'h-1.5', valueClass: 'text-xs' },\n medium: { trackHeight: '0.5rem', thumbSize: '1.25rem', trackClass: 'h-2', valueClass: 'text-sm' },\n large: { trackHeight: '0.6rem', thumbSize: '1.4rem', trackClass: 'h-[0.65rem]', valueClass: 'text-base' }\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst toNumber = (value: number | string | undefined, fallback: number) => {\n if (typeof value === 'number' && Number.isFinite(value)) {\n return value;\n }\n\n const parsed = Number(value);\n return Number.isFinite(parsed) ? parsed : fallback;\n};\n\ntype SliderCssVariables = CSSProperties & Record<string, string>;\n\nconst Slider: React.FC<SliderProps> = ({\n color = 'primary',\n size = 'medium',\n label,\n hint,\n showValue = true,\n valueLabel,\n wrapperClassName,\n className,\n trackColor,\n onChange,\n disabled,\n min = 0,\n max = 100,\n step = 1,\n ...rest\n}) => {\n const palette = paletteValues[color] ?? paletteValues.primary;\n const sizeToken = sizeTokens[size] ?? sizeTokens.medium;\n const { value, defaultValue, ...inputProps } = rest;\n const resolvedMin = toNumber(min, 0);\n const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);\n const resolvedStep = toNumber(step, 1);\n const isControlled = typeof value === 'number';\n const [internalValue, setInternalValue] = useState<number>(\n clamp(\n typeof value === 'number'\n ? value\n : typeof defaultValue === 'number'\n ? defaultValue\n : resolvedMin,\n resolvedMin,\n resolvedMax\n )\n );\n\n useEffect(() => {\n if (isControlled && typeof value === 'number') {\n setInternalValue(clamp(value, resolvedMin, resolvedMax));\n }\n }, [isControlled, value, resolvedMin, resolvedMax]);\n\n useEffect(() => {\n if (!isControlled) {\n setInternalValue(prev => clamp(prev, resolvedMin, resolvedMax));\n }\n }, [isControlled, resolvedMin, resolvedMax]);\n\n const currentValue =\n isControlled && typeof value === 'number' ? clamp(value, resolvedMin, resolvedMax) : internalValue;\n const percentage = resolvedMax === resolvedMin ? 0 : ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100;\n const cssVars: SliderCssVariables = {\n '--slider-color': palette.fill,\n '--slider-ring-color': palette.ring,\n '--slider-thumb-border': palette.thumbBorder,\n '--slider-track-color': trackColor ?? '#e5e7eb',\n '--slider-track-height': sizeToken.trackHeight,\n '--slider-thumb-size': sizeToken.thumbSize,\n '--slider-percentage': `${percentage}%`\n };\n\n if (disabled) {\n cssVars['--slider-disabled-fill'] = '#d1d5db';\n cssVars['--slider-thumb-border'] = '#d1d5db';\n cssVars['--slider-track-color-disabled'] = '#e5e7eb';\n }\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const nextValue = Number(event.target.value);\n if (!isControlled) {\n setInternalValue(nextValue);\n }\n onChange?.(nextValue, event);\n };\n\n const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;\n\n return (\n <div className={twMerge('flex flex-col gap-2', wrapperClassName)}>\n {(label || showValue) && (\n <div className='flex items-center justify-between'>\n {label && <span className='text-sm font-medium text-gray-900'>{label}</span>}\n {showValue && <span className={twMerge('tabular-nums text-gray-900', sizeToken.valueClass)}>{displayValue}</span>}\n </div>\n )}\n\n <input\n {...inputProps}\n type='range'\n min={resolvedMin}\n max={resolvedMax}\n step={resolvedStep}\n value={currentValue}\n onChange={handleChange}\n disabled={disabled}\n className={twMerge(\n 'slider-control focus-visible:outline-none rounded-full',\n sizeToken.trackClass,\n disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer',\n className\n )}\n style={cssVars}\n />\n\n {hint && <p className='text-xs text-gray-600'>{hint}</p>}\n </div>\n );\n};\n\nexport default Slider;\n"]}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { injectExpansionPanelContext } from './chunk-GA6HSRN6.js';
|
|
2
|
+
import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var variantContainerClasses = {
|
|
7
|
+
elevated: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10",
|
|
8
|
+
outlined: "bg-white border border-gray-200",
|
|
9
|
+
tonal: "bg-gray-50 border border-gray-100",
|
|
10
|
+
plain: "bg-transparent border border-transparent"
|
|
11
|
+
};
|
|
12
|
+
var roundedClasses = {
|
|
13
|
+
none: "rounded-none",
|
|
14
|
+
sm: "rounded-sm",
|
|
15
|
+
md: "rounded-md",
|
|
16
|
+
lg: "rounded-lg",
|
|
17
|
+
xl: "rounded-xl"
|
|
18
|
+
};
|
|
19
|
+
var uniqueValues = (values) => Array.from(new Set(values));
|
|
20
|
+
var normalizeValues = (value, allowMultiple) => {
|
|
21
|
+
if (value === void 0 || value === null) {
|
|
22
|
+
return [];
|
|
23
|
+
}
|
|
24
|
+
const normalized = Array.isArray(value) ? value : [value];
|
|
25
|
+
if (allowMultiple) {
|
|
26
|
+
return uniqueValues(normalized);
|
|
27
|
+
}
|
|
28
|
+
return normalized.length ? [normalized[0]] : [];
|
|
29
|
+
};
|
|
30
|
+
var clampValues = (values, allowMultiple) => allowMultiple ? uniqueValues(values) : values.length ? [values[0]] : [];
|
|
31
|
+
var ExpansionPanelInner = (props, forwardedRef) => {
|
|
32
|
+
const {
|
|
33
|
+
variant = "elevated",
|
|
34
|
+
rounded = "lg",
|
|
35
|
+
density = "default",
|
|
36
|
+
color = "primary",
|
|
37
|
+
divider = true,
|
|
38
|
+
multiple = false,
|
|
39
|
+
className,
|
|
40
|
+
children,
|
|
41
|
+
value,
|
|
42
|
+
defaultValue,
|
|
43
|
+
onChange,
|
|
44
|
+
...rest
|
|
45
|
+
} = props;
|
|
46
|
+
const allowMultiple = multiple ?? false;
|
|
47
|
+
const isControlled = value !== void 0;
|
|
48
|
+
const [internalValues, setInternalValues] = useState(
|
|
49
|
+
() => normalizeValues(defaultValue, allowMultiple)
|
|
50
|
+
);
|
|
51
|
+
const prevAllowMultipleRef = useRef(allowMultiple);
|
|
52
|
+
const prevIsControlledRef = useRef(isControlled);
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
const prevAllowMultiple = prevAllowMultipleRef.current;
|
|
55
|
+
const wasControlled = prevIsControlledRef.current;
|
|
56
|
+
if (!isControlled && (allowMultiple !== prevAllowMultiple || wasControlled !== isControlled)) {
|
|
57
|
+
setInternalValues((prev) => clampValues(prev, allowMultiple));
|
|
58
|
+
}
|
|
59
|
+
prevAllowMultipleRef.current = allowMultiple;
|
|
60
|
+
prevIsControlledRef.current = isControlled;
|
|
61
|
+
}, [allowMultiple, isControlled]);
|
|
62
|
+
const handleValueChange = useCallback(
|
|
63
|
+
(next) => {
|
|
64
|
+
if (!isControlled) {
|
|
65
|
+
setInternalValues(next);
|
|
66
|
+
}
|
|
67
|
+
if (onChange) {
|
|
68
|
+
if (allowMultiple) {
|
|
69
|
+
onChange(next);
|
|
70
|
+
} else {
|
|
71
|
+
onChange(next[0] ?? null);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
[allowMultiple, isControlled, onChange]
|
|
76
|
+
);
|
|
77
|
+
const handleToggle = useCallback(
|
|
78
|
+
(panelValue, disabled) => {
|
|
79
|
+
if (disabled) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
const expandedValues2 = isControlled ? normalizeValues(value, allowMultiple) : internalValues;
|
|
83
|
+
const isActive = expandedValues2.includes(panelValue);
|
|
84
|
+
const next = allowMultiple ? isActive ? expandedValues2.filter((v) => v !== panelValue) : [...expandedValues2, panelValue] : isActive ? [] : [panelValue];
|
|
85
|
+
handleValueChange(next);
|
|
86
|
+
},
|
|
87
|
+
[allowMultiple, handleValueChange, internalValues, isControlled, value]
|
|
88
|
+
);
|
|
89
|
+
const expandedValues = useMemo(
|
|
90
|
+
() => isControlled ? normalizeValues(value, allowMultiple) : internalValues,
|
|
91
|
+
[allowMultiple, internalValues, isControlled, value]
|
|
92
|
+
);
|
|
93
|
+
const providerValue = useMemo(
|
|
94
|
+
() => ({
|
|
95
|
+
expandedValues,
|
|
96
|
+
toggle: handleToggle,
|
|
97
|
+
density,
|
|
98
|
+
color,
|
|
99
|
+
divider,
|
|
100
|
+
rounded,
|
|
101
|
+
variant
|
|
102
|
+
}),
|
|
103
|
+
[color, density, divider, expandedValues, handleToggle, rounded, variant]
|
|
104
|
+
);
|
|
105
|
+
const variantClass = divider ? variantContainerClasses[variant] : "bg-transparent border border-transparent shadow-none";
|
|
106
|
+
const shapeClass = roundedClasses[rounded] ?? roundedClasses.lg;
|
|
107
|
+
const layoutClass = divider ? "divide-y divide-gray-100 overflow-hidden" : "gap-4";
|
|
108
|
+
const enhancedChildren = injectExpansionPanelContext(children, providerValue);
|
|
109
|
+
return /* @__PURE__ */ jsx(
|
|
110
|
+
"div",
|
|
111
|
+
{
|
|
112
|
+
...rest,
|
|
113
|
+
ref: forwardedRef,
|
|
114
|
+
className: twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
|
|
115
|
+
children: enhancedChildren
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
};
|
|
119
|
+
var ExpansionPanel = forwardRef(ExpansionPanelInner);
|
|
120
|
+
ExpansionPanel.displayName = "ExpansionPanel";
|
|
121
|
+
var ExpansionPanel_default = ExpansionPanel;
|
|
122
|
+
|
|
123
|
+
export { ExpansionPanel_default };
|
|
124
|
+
//# sourceMappingURL=chunk-E32P5AHO.js.map
|
|
125
|
+
//# sourceMappingURL=chunk-E32P5AHO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/ExpansionPanel/index.tsx"],"names":["expandedValues"],"mappings":"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","file":"chunk-E32P5AHO.js","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { injectExpansionPanelContext } from './context';\nimport type {\n ExpansionPanelProps,\n ExpansionPanelValue,\n ExpansionPanelVariant,\n ExpansionPanelRounded,\n ExpansionPanelMultipleProps,\n ExpansionPanelSingleProps\n} from './types.expansion-panel';\nimport ExpansionPanelItem from './ExpansionPanelItem';\n\nconst variantContainerClasses: Record<ExpansionPanelVariant, string> = {\n elevated: 'bg-white border border-gray-200 shadow-lg shadow-gray-900/10',\n outlined: 'bg-white border border-gray-200',\n tonal: 'bg-gray-50 border border-gray-100',\n plain: 'bg-transparent border border-transparent'\n};\n\nconst roundedClasses: Record<ExpansionPanelRounded, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl'\n};\n\nconst uniqueValues = (values: ExpansionPanelValue[]) => Array.from(new Set(values));\n\nconst normalizeValues = (\n value: ExpansionPanelValue | ExpansionPanelValue[] | null | undefined,\n allowMultiple: boolean\n): ExpansionPanelValue[] => {\n if (value === undefined || value === null) {\n return [];\n }\n\n const normalized = Array.isArray(value) ? value : [value];\n if (allowMultiple) {\n return uniqueValues(normalized);\n }\n\n return normalized.length ? [normalized[0]] : [];\n};\n\nconst clampValues = (values: ExpansionPanelValue[], allowMultiple: boolean) =>\n allowMultiple ? uniqueValues(values) : values.length ? [values[0]] : [];\n\nconst ExpansionPanelInner = (props: ExpansionPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) => {\n const {\n variant = 'elevated',\n rounded = 'lg',\n density = 'default',\n color = 'primary',\n divider = true,\n multiple = false,\n className,\n children,\n value,\n defaultValue,\n onChange,\n ...rest\n } = props;\n\n const allowMultiple = multiple ?? false;\n const isControlled = value !== undefined;\n\n const [internalValues, setInternalValues] = useState<ExpansionPanelValue[]>(() =>\n normalizeValues(defaultValue, allowMultiple)\n );\n\n const prevAllowMultipleRef = useRef(allowMultiple);\n const prevIsControlledRef = useRef(isControlled);\n\n useEffect(() => {\n const prevAllowMultiple = prevAllowMultipleRef.current;\n const wasControlled = prevIsControlledRef.current;\n\n if (!isControlled && (allowMultiple !== prevAllowMultiple || wasControlled !== isControlled)) {\n setInternalValues(prev => clampValues(prev, allowMultiple));\n }\n\n prevAllowMultipleRef.current = allowMultiple;\n prevIsControlledRef.current = isControlled;\n }, [allowMultiple, isControlled]);\n\n const handleValueChange = useCallback(\n (next: ExpansionPanelValue[]) => {\n if (!isControlled) {\n setInternalValues(next);\n }\n\n if (onChange) {\n if (allowMultiple) {\n (onChange as NonNullable<ExpansionPanelMultipleProps['onChange']>)(next);\n } else {\n (onChange as NonNullable<ExpansionPanelSingleProps['onChange']>)(next[0] ?? null);\n }\n }\n },\n [allowMultiple, isControlled, onChange]\n );\n\n const handleToggle = useCallback(\n (panelValue: ExpansionPanelValue, disabled?: boolean) => {\n if (disabled) {\n return;\n }\n\n const expandedValues = isControlled ? normalizeValues(value, allowMultiple) : internalValues;\n const isActive = expandedValues.includes(panelValue);\n const next = allowMultiple\n ? isActive\n ? expandedValues.filter(v => v !== panelValue)\n : [...expandedValues, panelValue]\n : isActive\n ? []\n : [panelValue];\n\n handleValueChange(next);\n },\n [allowMultiple, handleValueChange, internalValues, isControlled, value]\n );\n\n const expandedValues = useMemo(\n () => (isControlled ? normalizeValues(value, allowMultiple) : internalValues),\n [allowMultiple, internalValues, isControlled, value]\n );\n\n const providerValue = useMemo(\n () => ({\n expandedValues,\n toggle: handleToggle,\n density,\n color,\n divider,\n rounded,\n variant\n }),\n [color, density, divider, expandedValues, handleToggle, rounded, variant]\n );\n\n const variantClass = divider ? variantContainerClasses[variant] : 'bg-transparent border border-transparent shadow-none';\n const shapeClass = roundedClasses[rounded] ?? roundedClasses.lg;\n const layoutClass = divider ? 'divide-y divide-gray-100 overflow-hidden' : 'gap-4';\n\n const enhancedChildren = injectExpansionPanelContext(children, providerValue);\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n className={twMerge('expansion-panel flex w-full flex-col text-gray-900', variantClass, shapeClass, layoutClass, className)}\n >\n {enhancedChildren}\n </div>\n );\n};\n\nconst ExpansionPanel = forwardRef<HTMLDivElement, ExpansionPanelProps>(ExpansionPanelInner);\n\nExpansionPanel.displayName = 'ExpansionPanel';\n\nexport { ExpansionPanelItem };\nexport type {\n ExpansionPanelItemProps,\n ExpansionPanelProps,\n ExpansionPanelValue,\n ExpansionPanelVariant,\n ExpansionPanelDensity,\n ExpansionPanelRounded\n} from './types.expansion-panel';\nexport default ExpansionPanel;\n"]}
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import { forwardRef, useState, useRef, isValidElement, cloneElement } from 'react';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/Containment/ExpansionPanel/ExpansionPanelItem.tsx
|
|
6
|
+
var EXPANSION_PANEL_CONTEXT_PROP = "__expansionPanelContext";
|
|
7
|
+
var EXPANSION_PANEL_ITEM_MARKER = "__isExpansionPanelItem";
|
|
8
|
+
var hasMarker = (type) => {
|
|
9
|
+
if (!type || typeof type !== "function" && typeof type !== "object") {
|
|
10
|
+
return false;
|
|
11
|
+
}
|
|
12
|
+
if (type[EXPANSION_PANEL_ITEM_MARKER]) {
|
|
13
|
+
return true;
|
|
14
|
+
}
|
|
15
|
+
const innerType = type.type;
|
|
16
|
+
if (innerType && innerType !== type) {
|
|
17
|
+
return hasMarker(innerType);
|
|
18
|
+
}
|
|
19
|
+
return false;
|
|
20
|
+
};
|
|
21
|
+
var traverseNode = (node, value) => {
|
|
22
|
+
if (Array.isArray(node)) {
|
|
23
|
+
let changed = false;
|
|
24
|
+
const nextArray = node.map((child) => {
|
|
25
|
+
const result = traverseNode(child, value);
|
|
26
|
+
if (result.changed) {
|
|
27
|
+
changed = true;
|
|
28
|
+
}
|
|
29
|
+
return result.node;
|
|
30
|
+
});
|
|
31
|
+
return { node: changed ? nextArray : node, changed };
|
|
32
|
+
}
|
|
33
|
+
if (node === null || node === void 0 || typeof node === "boolean" || typeof node === "string" || typeof node === "number") {
|
|
34
|
+
return { node, changed: false };
|
|
35
|
+
}
|
|
36
|
+
if (!isValidElement(node)) {
|
|
37
|
+
return { node, changed: false };
|
|
38
|
+
}
|
|
39
|
+
const { node: mappedChildren, changed: childrenChanged } = traverseNode(node.props.children, value);
|
|
40
|
+
const shouldInject = hasMarker(node.type);
|
|
41
|
+
if (!shouldInject && !childrenChanged) {
|
|
42
|
+
return { node, changed: false };
|
|
43
|
+
}
|
|
44
|
+
const injectedProps = shouldInject ? { [EXPANSION_PANEL_CONTEXT_PROP]: value } : void 0;
|
|
45
|
+
const cloned = mappedChildren === void 0 ? cloneElement(node, injectedProps) : cloneElement(node, injectedProps, mappedChildren);
|
|
46
|
+
return { node: cloned, changed: true };
|
|
47
|
+
};
|
|
48
|
+
var injectExpansionPanelContext = (children, value) => traverseNode(children, value).node;
|
|
49
|
+
var markExpansionPanelItem = (component) => {
|
|
50
|
+
if (typeof component !== "function" && (typeof component !== "object" || component === null)) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
component[EXPANSION_PANEL_ITEM_MARKER] = true;
|
|
54
|
+
};
|
|
55
|
+
var densityClasses = {
|
|
56
|
+
comfortable: "py-5",
|
|
57
|
+
default: "py-4",
|
|
58
|
+
compact: "py-3"
|
|
59
|
+
};
|
|
60
|
+
var roundedClasses = {
|
|
61
|
+
none: "rounded-none",
|
|
62
|
+
sm: "rounded-sm",
|
|
63
|
+
md: "rounded-md",
|
|
64
|
+
lg: "rounded-lg",
|
|
65
|
+
xl: "rounded-xl"
|
|
66
|
+
};
|
|
67
|
+
var itemVariantClasses = {
|
|
68
|
+
elevated: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5",
|
|
69
|
+
outlined: "bg-white border border-gray-200",
|
|
70
|
+
tonal: "bg-gray-50 border border-gray-100",
|
|
71
|
+
plain: "bg-transparent border border-transparent"
|
|
72
|
+
};
|
|
73
|
+
var accentClasses = {
|
|
74
|
+
primary: { text: "text-primary", bg: "bg-primary/5", border: "border-primary/30" },
|
|
75
|
+
neutral: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
|
|
76
|
+
info: { text: "text-sky-600", bg: "bg-sky-50", border: "border-sky-200" },
|
|
77
|
+
success: { text: "text-emerald-600", bg: "bg-emerald-50", border: "border-emerald-200" },
|
|
78
|
+
warning: { text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
|
|
79
|
+
danger: { text: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
|
|
80
|
+
surface: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
|
|
81
|
+
bw: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" }
|
|
82
|
+
};
|
|
83
|
+
var uniqueIdCounter = 0;
|
|
84
|
+
var generateId = (prefix) => `${prefix}-${++uniqueIdCounter}`;
|
|
85
|
+
var ExpansionPanelItemInner = (props) => {
|
|
86
|
+
const {
|
|
87
|
+
value,
|
|
88
|
+
title,
|
|
89
|
+
subtitle,
|
|
90
|
+
text,
|
|
91
|
+
prepend,
|
|
92
|
+
append,
|
|
93
|
+
expandIcon,
|
|
94
|
+
collapseIcon,
|
|
95
|
+
hideToggleIcon = false,
|
|
96
|
+
headerClassName,
|
|
97
|
+
contentClassName,
|
|
98
|
+
className,
|
|
99
|
+
disabled = false,
|
|
100
|
+
children,
|
|
101
|
+
color: colorOverride,
|
|
102
|
+
forwardedRef,
|
|
103
|
+
__expansionPanelContext,
|
|
104
|
+
...rest
|
|
105
|
+
} = props;
|
|
106
|
+
const [standaloneExpanded, setStandaloneExpanded] = useState(false);
|
|
107
|
+
const generatedValueRef = useRef(null);
|
|
108
|
+
if (generatedValueRef.current === null) {
|
|
109
|
+
generatedValueRef.current = generateId("expansion-panel-value");
|
|
110
|
+
}
|
|
111
|
+
const generatedValue = generatedValueRef.current;
|
|
112
|
+
const headerIdRef = useRef(null);
|
|
113
|
+
if (!headerIdRef.current) {
|
|
114
|
+
headerIdRef.current = generateId("expansion-panel-header");
|
|
115
|
+
}
|
|
116
|
+
const headerId = headerIdRef.current;
|
|
117
|
+
const contentIdRef = useRef(null);
|
|
118
|
+
if (!contentIdRef.current) {
|
|
119
|
+
contentIdRef.current = generateId("expansion-panel-content");
|
|
120
|
+
}
|
|
121
|
+
const contentId = contentIdRef.current;
|
|
122
|
+
const context = __expansionPanelContext ?? null;
|
|
123
|
+
const panelValue = value ?? generatedValue;
|
|
124
|
+
const density = context?.density ?? "default";
|
|
125
|
+
const color = colorOverride ?? context?.color ?? "primary";
|
|
126
|
+
const divider = context?.divider ?? true;
|
|
127
|
+
const variant = context?.variant ?? "elevated";
|
|
128
|
+
const rounded = context?.rounded ?? "lg";
|
|
129
|
+
const accent = accentClasses[color] ?? accentClasses.primary;
|
|
130
|
+
const isExpanded = context ? context.expandedValues.includes(panelValue) : standaloneExpanded;
|
|
131
|
+
const rootSurface = divider ? "bg-transparent border-0 shadow-none" : itemVariantClasses[variant];
|
|
132
|
+
const shapeClass = divider ? void 0 : roundedClasses[rounded] ?? roundedClasses.lg;
|
|
133
|
+
const densityPadding = densityClasses[density] ?? densityClasses.default;
|
|
134
|
+
const disabledClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
|
|
135
|
+
const titleClass = isExpanded ? accent.text : void 0;
|
|
136
|
+
const activeBorderClass = twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
|
|
137
|
+
const defaultToggleIcon = /* @__PURE__ */ jsx("i", { className: "mdi mdi-chevron-down text-lg leading-none transition-transform duration-200", "aria-hidden": true });
|
|
138
|
+
const hasContent = Boolean(children ?? text);
|
|
139
|
+
const contentAnimationClass = isExpanded ? "pb-5 opacity-100" : "pb-0 opacity-0";
|
|
140
|
+
const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
|
|
141
|
+
const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;
|
|
142
|
+
const toggleWrapperClass = twMerge(
|
|
143
|
+
"ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200",
|
|
144
|
+
shouldRotateDefaultIcon && isExpanded ? "rotate-180" : void 0
|
|
145
|
+
);
|
|
146
|
+
const handleToggle = () => {
|
|
147
|
+
if (disabled) {
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
if (context) {
|
|
151
|
+
context.toggle(panelValue, disabled);
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
setStandaloneExpanded((prev) => !prev);
|
|
155
|
+
};
|
|
156
|
+
return /* @__PURE__ */ jsxs(
|
|
157
|
+
"div",
|
|
158
|
+
{
|
|
159
|
+
...rest,
|
|
160
|
+
ref: forwardedRef,
|
|
161
|
+
className: twMerge(
|
|
162
|
+
"expansion-panel-item flex flex-col overflow-hidden transition-colors duration-200",
|
|
163
|
+
rootSurface,
|
|
164
|
+
shapeClass,
|
|
165
|
+
className
|
|
166
|
+
),
|
|
167
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
168
|
+
"data-disabled": disabled || void 0,
|
|
169
|
+
children: [
|
|
170
|
+
/* @__PURE__ */ jsxs(
|
|
171
|
+
"button",
|
|
172
|
+
{
|
|
173
|
+
type: "button",
|
|
174
|
+
id: headerId,
|
|
175
|
+
onClick: handleToggle,
|
|
176
|
+
disabled,
|
|
177
|
+
"aria-expanded": isExpanded,
|
|
178
|
+
"aria-controls": hasContent ? contentId : void 0,
|
|
179
|
+
className: twMerge(
|
|
180
|
+
"flex w-full items-center gap-4 px-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
|
|
181
|
+
densityPadding,
|
|
182
|
+
disabledClass,
|
|
183
|
+
isExpanded ? accent.bg : void 0,
|
|
184
|
+
headerClassName
|
|
185
|
+
),
|
|
186
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
187
|
+
children: [
|
|
188
|
+
prepend && /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
|
|
189
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
|
|
190
|
+
title && /* @__PURE__ */ jsx("span", { className: twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
|
|
191
|
+
subtitle && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: subtitle })
|
|
192
|
+
] }),
|
|
193
|
+
append && /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
|
|
194
|
+
!hideToggleIcon && /* @__PURE__ */ jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
),
|
|
198
|
+
hasContent && /* @__PURE__ */ jsx(
|
|
199
|
+
"div",
|
|
200
|
+
{
|
|
201
|
+
className: "grid overflow-hidden border-t border-gray-100 transition-all duration-200 ease-in-out",
|
|
202
|
+
style: { gridTemplateRows: isExpanded ? "1fr" : "0fr" },
|
|
203
|
+
"aria-hidden": isExpanded ? void 0 : true,
|
|
204
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
205
|
+
children: /* @__PURE__ */ jsx(
|
|
206
|
+
"div",
|
|
207
|
+
{
|
|
208
|
+
id: contentId,
|
|
209
|
+
role: "region",
|
|
210
|
+
"aria-labelledby": headerId,
|
|
211
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
212
|
+
className: twMerge(
|
|
213
|
+
"min-h-0 px-4 pt-0 text-sm text-gray-600 transition-all duration-200",
|
|
214
|
+
activeBorderClass,
|
|
215
|
+
contentAnimationClass,
|
|
216
|
+
isExpanded ? "pointer-events-auto" : "pointer-events-none",
|
|
217
|
+
contentClassName
|
|
218
|
+
),
|
|
219
|
+
children: children ?? text
|
|
220
|
+
}
|
|
221
|
+
)
|
|
222
|
+
}
|
|
223
|
+
)
|
|
224
|
+
]
|
|
225
|
+
}
|
|
226
|
+
);
|
|
227
|
+
};
|
|
228
|
+
var ExpansionPanelItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
|
|
229
|
+
ExpansionPanelItem.displayName = "ExpansionPanelItem";
|
|
230
|
+
markExpansionPanelItem(ExpansionPanelItem);
|
|
231
|
+
var ExpansionPanelItem_default = ExpansionPanelItem;
|
|
232
|
+
|
|
233
|
+
export { ExpansionPanelItem_default, injectExpansionPanelContext };
|
|
234
|
+
//# sourceMappingURL=chunk-GA6HSRN6.js.map
|
|
235
|
+
//# sourceMappingURL=chunk-GA6HSRN6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/ExpansionPanel/context.ts","../src/Containment/ExpansionPanel/ExpansionPanelItem.tsx"],"names":[],"mappings":"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","file":"chunk-GA6HSRN6.js","sourcesContent":["import { cloneElement, isValidElement } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { ExpansionPanelContextValue } from './types.expansion-panel';\n\nexport const EXPANSION_PANEL_CONTEXT_PROP = '__expansionPanelContext' as const;\nconst EXPANSION_PANEL_ITEM_MARKER = '__isExpansionPanelItem';\n\ntype MarkerTarget = Record<string | number | symbol, unknown> & {\n type?: unknown;\n};\n\nconst hasMarker = (type: unknown): boolean => {\n if (!type || (typeof type !== 'function' && typeof type !== 'object')) {\n return false;\n }\n\n if ((type as MarkerTarget)[EXPANSION_PANEL_ITEM_MARKER]) {\n return true;\n }\n\n const innerType = (type as MarkerTarget).type;\n if (innerType && innerType !== type) {\n return hasMarker(innerType);\n }\n\n return false;\n};\n\nconst traverseNode = (\n node: ReactNode,\n value: ExpansionPanelContextValue\n): { node: ReactNode; changed: boolean } => {\n if (Array.isArray(node)) {\n let changed = false;\n const nextArray = node.map(child => {\n const result = traverseNode(child, value);\n if (result.changed) {\n changed = true;\n }\n return result.node;\n });\n return { node: changed ? nextArray : node, changed };\n }\n\n if (\n node === null ||\n node === undefined ||\n typeof node === 'boolean' ||\n typeof node === 'string' ||\n typeof node === 'number'\n ) {\n return { node, changed: false };\n }\n\n if (!isValidElement(node)) {\n return { node, changed: false };\n }\n\n const { node: mappedChildren, changed: childrenChanged } = traverseNode(node.props.children, value);\n const shouldInject = hasMarker(node.type);\n\n if (!shouldInject && !childrenChanged) {\n return { node, changed: false };\n }\n\n const injectedProps = shouldInject ? { [EXPANSION_PANEL_CONTEXT_PROP]: value } : undefined;\n const cloned =\n mappedChildren === undefined\n ? cloneElement(node, injectedProps)\n : cloneElement(node, injectedProps, mappedChildren);\n\n return { node: cloned, changed: true };\n};\n\nexport const injectExpansionPanelContext = (\n children: ReactNode,\n value: ExpansionPanelContextValue\n): ReactNode => traverseNode(children, value).node;\n\nexport const markExpansionPanelItem = (component: unknown) => {\n if (typeof component !== 'function' && (typeof component !== 'object' || component === null)) {\n return;\n }\n\n (component as MarkerTarget)[EXPANSION_PANEL_ITEM_MARKER] = true;\n};\n","import { forwardRef, useRef, useState } from 'react';\nimport type { Ref } from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { markExpansionPanelItem } from './context';\nimport type {\n ExpansionPanelDensity,\n ExpansionPanelItemProps,\n ExpansionPanelValue,\n ExpansionPanelContextValue\n} from './types.expansion-panel';\nimport type { Palette } from '@lindle/linoardo/global.types';\n\nconst densityClasses: Record<ExpansionPanelDensity, string> = {\n comfortable: 'py-5',\n default: 'py-4',\n compact: 'py-3'\n};\n\nconst roundedClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl'\n};\n\nconst itemVariantClasses = {\n elevated: 'bg-white border border-gray-200 shadow-sm shadow-gray-900/5',\n outlined: 'bg-white border border-gray-200',\n tonal: 'bg-gray-50 border border-gray-100',\n plain: 'bg-transparent border border-transparent'\n};\n\nconst accentClasses: Record<Palette, { text: string; bg: string; border: string }> = {\n primary: { text: 'text-primary', bg: 'bg-primary/5', border: 'border-primary/30' },\n neutral: { text: 'text-gray-900', bg: 'bg-gray-100', border: 'border-gray-200' },\n info: { text: 'text-sky-600', bg: 'bg-sky-50', border: 'border-sky-200' },\n success: { text: 'text-emerald-600', bg: 'bg-emerald-50', border: 'border-emerald-200' },\n warning: { text: 'text-amber-600', bg: 'bg-amber-50', border: 'border-amber-200' },\n danger: { text: 'text-red-600', bg: 'bg-red-50', border: 'border-red-200' },\n surface: { text: 'text-gray-900', bg: 'bg-gray-100', border: 'border-gray-200' },\n bw: { text: 'text-gray-900', bg: 'bg-gray-100', border: 'border-gray-200' }\n};\n\nlet uniqueIdCounter = 0;\nconst generateId = (prefix: string) => `${prefix}-${++uniqueIdCounter}`;\n\ntype ForwardedRef = Ref<HTMLDivElement>;\n\ninterface ExpansionPanelItemInnerProps extends ExpansionPanelItemProps {\n forwardedRef?: ForwardedRef;\n}\n\nconst ExpansionPanelItemInner = (props: ExpansionPanelItemInnerProps) => {\n const {\n value,\n title,\n subtitle,\n text,\n prepend,\n append,\n expandIcon,\n collapseIcon,\n hideToggleIcon = false,\n headerClassName,\n contentClassName,\n className,\n disabled = false,\n children,\n color: colorOverride,\n forwardedRef,\n __expansionPanelContext,\n ...rest\n } = props;\n\n const [standaloneExpanded, setStandaloneExpanded] = useState(false);\n\n const generatedValueRef = useRef<ExpansionPanelValue | null>(null);\n if (generatedValueRef.current === null) {\n generatedValueRef.current = generateId('expansion-panel-value');\n }\n const generatedValue = generatedValueRef.current as ExpansionPanelValue;\n\n const headerIdRef = useRef<string | null>(null);\n if (!headerIdRef.current) {\n headerIdRef.current = generateId('expansion-panel-header');\n }\n const headerId = headerIdRef.current as string;\n\n const contentIdRef = useRef<string | null>(null);\n if (!contentIdRef.current) {\n contentIdRef.current = generateId('expansion-panel-content');\n }\n const contentId = contentIdRef.current as string;\n\n const context: ExpansionPanelContextValue | null = __expansionPanelContext ?? null;\n const panelValue = value ?? generatedValue;\n const density = context?.density ?? 'default';\n const color = colorOverride ?? context?.color ?? 'primary';\n const divider = context?.divider ?? true;\n const variant = context?.variant ?? 'elevated';\n const rounded = context?.rounded ?? 'lg';\n const accent = accentClasses[color] ?? accentClasses.primary;\n const isExpanded = context ? context.expandedValues.includes(panelValue) : standaloneExpanded;\n\n const rootSurface = divider ? 'bg-transparent border-0 shadow-none' : itemVariantClasses[variant];\n const shapeClass = divider ? undefined : roundedClasses[rounded] ?? roundedClasses.lg;\n const densityPadding = densityClasses[density] ?? densityClasses.default;\n const disabledClass = disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';\n const titleClass = isExpanded ? accent.text : undefined;\n const activeBorderClass = twMerge('border-l-2 border-transparent', isExpanded ? accent.border : undefined);\n const defaultToggleIcon = (\n <i className='mdi mdi-chevron-down text-lg leading-none transition-transform duration-200' aria-hidden />\n );\n\n const hasContent = Boolean(children ?? text);\n const contentAnimationClass = isExpanded ? 'pb-5 opacity-100' : 'pb-0 opacity-0';\n const toggleIconNode = hideToggleIcon\n ? null\n : isExpanded && collapseIcon\n ? collapseIcon\n : expandIcon ?? defaultToggleIcon;\n\n const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;\n const toggleWrapperClass = twMerge(\n 'ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200',\n shouldRotateDefaultIcon && isExpanded ? 'rotate-180' : undefined\n );\n\n const handleToggle = () => {\n if (disabled) {\n return;\n }\n\n if (context) {\n context.toggle(panelValue, disabled);\n return;\n }\n\n setStandaloneExpanded(prev => !prev);\n };\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n className={twMerge(\n 'expansion-panel-item flex flex-col overflow-hidden transition-colors duration-200',\n rootSurface,\n shapeClass,\n className\n )}\n data-state={isExpanded ? 'open' : 'closed'}\n data-disabled={disabled || undefined}\n >\n <button\n type='button'\n id={headerId}\n onClick={handleToggle}\n disabled={disabled}\n aria-expanded={isExpanded}\n aria-controls={hasContent ? contentId : undefined}\n className={twMerge(\n 'flex w-full items-center gap-4 px-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',\n densityPadding,\n disabledClass,\n isExpanded ? accent.bg : undefined,\n headerClassName\n )}\n data-state={isExpanded ? 'open' : 'closed'}\n >\n {prepend && <span className='flex h-10 w-10 items-center justify-center text-gray-500'>{prepend}</span>}\n <span className='flex min-w-0 flex-1 flex-col gap-0.5 text-left'>\n {title && <span className={twMerge('truncate font-medium text-gray-900', titleClass)}>{title}</span>}\n {subtitle && <span className='text-sm text-gray-500'>{subtitle}</span>}\n </span>\n {append && <span className='ml-auto flex items-center gap-2 text-sm text-gray-500'>{append}</span>}\n {!hideToggleIcon && <span className={toggleWrapperClass}>{toggleIconNode}</span>}\n </button>\n {hasContent && (\n <div\n className='grid overflow-hidden border-t border-gray-100 transition-all duration-200 ease-in-out'\n style={{ gridTemplateRows: isExpanded ? '1fr' : '0fr' }}\n aria-hidden={isExpanded ? undefined : true}\n data-state={isExpanded ? 'open' : 'closed'}\n >\n <div\n id={contentId}\n role='region'\n aria-labelledby={headerId}\n data-state={isExpanded ? 'open' : 'closed'}\n className={twMerge(\n 'min-h-0 px-4 pt-0 text-sm text-gray-600 transition-all duration-200',\n activeBorderClass,\n contentAnimationClass,\n isExpanded ? 'pointer-events-auto' : 'pointer-events-none',\n contentClassName\n )}\n >\n {children ?? text}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nconst ExpansionPanelItem = forwardRef<HTMLDivElement, ExpansionPanelItemProps>((props, ref) => (\n <ExpansionPanelItemInner {...props} forwardedRef={ref} />\n));\n\nExpansionPanelItem.displayName = 'ExpansionPanelItem';\nmarkExpansionPanelItem(ExpansionPanelItem);\n\nexport default ExpansionPanelItem;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/globals.ts"],"names":[],"mappings":";AAAO,IAAM,eAAA,GAAkB;AAAA,EAC7B,GAAA,EAAK,CAAC,KAAK;AACb","file":"chunk-IEILIKS2.js","sourcesContent":["export const iconBaseClasses = {\n mdi: ['mdi']\n} as const;\n"]}
|