@lindle/linoardo 1.0.41 → 1.0.43
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/chunk-F3PI7A6V.js +200 -0
- package/dist/chunk-F3PI7A6V.js.map +1 -0
- package/dist/{chunk-4J3SRVOS.js → chunk-FEGFA3FN.js} +45 -18
- package/dist/chunk-FEGFA3FN.js.map +1 -0
- package/dist/index.cjs +284 -123
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -3
- package/dist/index.d.ts +23 -3
- package/dist/index.js +123 -12
- package/dist/index.js.map +1 -1
- package/dist/select.cjs +128 -105
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +1 -0
- package/dist/select.d.ts +1 -0
- package/dist/select.js +1 -1
- package/dist/styles.css +47 -0
- package/dist/timeline.cjs +43 -16
- package/dist/timeline.cjs.map +1 -1
- package/dist/timeline.d.cts +4 -1
- package/dist/timeline.d.ts +4 -1
- package/dist/timeline.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-4J3SRVOS.js.map +0 -1
- package/dist/chunk-LULQOD2K.js +0 -177
- package/dist/chunk-LULQOD2K.js.map +0 -1
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { generateString } from './chunk-6SKW43XI.js';
|
|
2
|
+
import { iconBaseClasses } from './chunk-IEILIKS2.js';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
|
|
8
|
+
var variantClasses = {
|
|
9
|
+
solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
|
|
10
|
+
sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
|
|
11
|
+
outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
|
|
12
|
+
text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
|
|
13
|
+
ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
|
|
14
|
+
filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
|
|
15
|
+
underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70",
|
|
16
|
+
rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
|
|
17
|
+
};
|
|
18
|
+
var sizeClasses = {
|
|
19
|
+
"x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
|
|
20
|
+
small: { padding: "pl-2.5 pr-9 py-2.5", text: "text-sm" },
|
|
21
|
+
medium: { padding: "pl-3 pr-10 py-3", text: "text-base" },
|
|
22
|
+
large: { padding: "pl-3.5 pr-11 py-3.5", text: "text-lg" },
|
|
23
|
+
"x-large": { padding: "pl-4 pr-12 py-4", text: "text-xl" }
|
|
24
|
+
};
|
|
25
|
+
var normalizeOption = (option) => {
|
|
26
|
+
if (typeof option === "string") {
|
|
27
|
+
return { label: option, value: option };
|
|
28
|
+
}
|
|
29
|
+
return option;
|
|
30
|
+
};
|
|
31
|
+
var toIdSafe = (value) => {
|
|
32
|
+
const sanitized = value.replace(/\s+/g, "-").replace(/[^A-Za-z0-9_-]/g, "");
|
|
33
|
+
return sanitized || "opt";
|
|
34
|
+
};
|
|
35
|
+
var resolveIconClassName = (icon) => {
|
|
36
|
+
if (!icon) {
|
|
37
|
+
return void 0;
|
|
38
|
+
}
|
|
39
|
+
if (typeof icon === "string") {
|
|
40
|
+
const trimmed = icon.trim();
|
|
41
|
+
if (!trimmed) {
|
|
42
|
+
return void 0;
|
|
43
|
+
}
|
|
44
|
+
if (trimmed.includes(" ")) {
|
|
45
|
+
return trimmed;
|
|
46
|
+
}
|
|
47
|
+
const normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
|
|
48
|
+
return ["mdi", normalizedName2].join(" ");
|
|
49
|
+
}
|
|
50
|
+
const [library, iconNameRaw] = icon;
|
|
51
|
+
const baseClasses = iconBaseClasses[library] ?? [library];
|
|
52
|
+
const iconName = iconNameRaw.trim();
|
|
53
|
+
if (!iconName) {
|
|
54
|
+
return baseClasses.join(" ");
|
|
55
|
+
}
|
|
56
|
+
const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
|
|
57
|
+
const classes = [...baseClasses, normalizedName];
|
|
58
|
+
return Array.from(new Set(classes)).join(" ");
|
|
59
|
+
};
|
|
60
|
+
var Select = React.forwardRef(
|
|
61
|
+
({
|
|
62
|
+
options,
|
|
63
|
+
label,
|
|
64
|
+
placeholder,
|
|
65
|
+
variant = "outline",
|
|
66
|
+
size = "medium",
|
|
67
|
+
className,
|
|
68
|
+
wrapperClassName,
|
|
69
|
+
id,
|
|
70
|
+
name,
|
|
71
|
+
multiple,
|
|
72
|
+
value,
|
|
73
|
+
defaultValue,
|
|
74
|
+
error,
|
|
75
|
+
helperText,
|
|
76
|
+
disabled,
|
|
77
|
+
required,
|
|
78
|
+
onChange,
|
|
79
|
+
onBlur,
|
|
80
|
+
onFocus,
|
|
81
|
+
...props
|
|
82
|
+
}, ref) => {
|
|
83
|
+
const selectId = id || name || generateString();
|
|
84
|
+
const inputName = name || selectId;
|
|
85
|
+
const variantClass = variantClasses[variant] ?? variantClasses.outline;
|
|
86
|
+
const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;
|
|
87
|
+
const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
|
|
88
|
+
const normalizedOptions = options.map(normalizeOption);
|
|
89
|
+
const selectedValueList = value !== void 0 ? (Array.isArray(value) ? value : [value]).map(String) : defaultValue !== void 0 ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String) : [];
|
|
90
|
+
const selectedLabels = normalizedOptions.filter((option) => selectedValueList.includes(String(option.value))).map((option) => option.label);
|
|
91
|
+
const hasSelection = selectedLabels.length > 0;
|
|
92
|
+
const summaryText = hasSelection ? multiple ? selectedLabels.join(", ") : selectedLabels[0] : placeholder || "\xA0";
|
|
93
|
+
const handleOptionChange = (event) => {
|
|
94
|
+
onChange?.(event);
|
|
95
|
+
if (multiple) return;
|
|
96
|
+
const detailsEl = event.currentTarget.closest("details");
|
|
97
|
+
detailsEl?.removeAttribute("open");
|
|
98
|
+
};
|
|
99
|
+
const handleDetailsBlur = (event) => {
|
|
100
|
+
const nextFocus = event.relatedTarget;
|
|
101
|
+
if (nextFocus && event.currentTarget.contains(nextFocus)) return;
|
|
102
|
+
event.currentTarget.removeAttribute("open");
|
|
103
|
+
};
|
|
104
|
+
const handleDetailsFocus = (event) => {
|
|
105
|
+
if (normalizedOptions.length === 0) {
|
|
106
|
+
onFocus?.(event);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
return /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col gap-1", wrapperClassName), children: [
|
|
110
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
111
|
+
/* @__PURE__ */ jsxs(
|
|
112
|
+
"details",
|
|
113
|
+
{
|
|
114
|
+
className: "group w-full",
|
|
115
|
+
...props,
|
|
116
|
+
onBlur: onBlur ? void 0 : handleDetailsBlur,
|
|
117
|
+
onFocus: onFocus ? handleDetailsFocus : void 0,
|
|
118
|
+
open: void 0,
|
|
119
|
+
children: [
|
|
120
|
+
/* @__PURE__ */ jsxs(
|
|
121
|
+
"summary",
|
|
122
|
+
{
|
|
123
|
+
className: twMerge(
|
|
124
|
+
baseClass,
|
|
125
|
+
variantClass,
|
|
126
|
+
sizeClass,
|
|
127
|
+
"list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden",
|
|
128
|
+
error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500",
|
|
129
|
+
disabled && "pointer-events-none opacity-50 cursor-not-allowed",
|
|
130
|
+
className
|
|
131
|
+
),
|
|
132
|
+
style: { minHeight: "2.75rem" },
|
|
133
|
+
onClick: (e) => disabled && e.preventDefault(),
|
|
134
|
+
children: [
|
|
135
|
+
/* @__PURE__ */ jsx("span", { className: twMerge("truncate", !hasSelection && "text-gray-500 dark:text-gray-400"), children: summaryText }),
|
|
136
|
+
/* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsx("i", { className: "mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180", "aria-hidden": true }) })
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700", children: normalizedOptions.map((option, index) => {
|
|
141
|
+
const optionValueStr = String(option.value);
|
|
142
|
+
const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
|
|
143
|
+
const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
|
|
144
|
+
const iconClassName = resolveIconClassName(option.icon);
|
|
145
|
+
const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
|
|
146
|
+
return /* @__PURE__ */ jsxs(
|
|
147
|
+
"label",
|
|
148
|
+
{
|
|
149
|
+
htmlFor: inputId,
|
|
150
|
+
className: twMerge(
|
|
151
|
+
"relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700",
|
|
152
|
+
option.disabled && "cursor-not-allowed opacity-50"
|
|
153
|
+
),
|
|
154
|
+
children: [
|
|
155
|
+
/* @__PURE__ */ jsx(
|
|
156
|
+
"input",
|
|
157
|
+
{
|
|
158
|
+
type: multiple ? "checkbox" : "radio",
|
|
159
|
+
id: inputId,
|
|
160
|
+
name: inputName,
|
|
161
|
+
value: option.value,
|
|
162
|
+
disabled: option.disabled || disabled,
|
|
163
|
+
checked: value !== void 0 ? isSelected : void 0,
|
|
164
|
+
defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
|
|
165
|
+
onChange: handleOptionChange,
|
|
166
|
+
onBlur,
|
|
167
|
+
ref,
|
|
168
|
+
required: required && !multiple,
|
|
169
|
+
className: "peer sr-only"
|
|
170
|
+
}
|
|
171
|
+
),
|
|
172
|
+
iconClassName && /* @__PURE__ */ jsx("i", { className: twMerge(iconClassName, "text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400") }),
|
|
173
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate peer-checked:font-medium peer-checked:text-primary", children: option.label }),
|
|
174
|
+
/* @__PURE__ */ jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
|
|
175
|
+
]
|
|
176
|
+
},
|
|
177
|
+
`${optionValueStr}-${index}`
|
|
178
|
+
);
|
|
179
|
+
}) })
|
|
180
|
+
]
|
|
181
|
+
}
|
|
182
|
+
),
|
|
183
|
+
label && /* @__PURE__ */ jsx(
|
|
184
|
+
"label",
|
|
185
|
+
{
|
|
186
|
+
className: twMerge("absolute left-3 -top-1.5 text-xs bg-white px-1 text-gray-500 transition-all dark:bg-slate-900 dark:text-gray-400"),
|
|
187
|
+
children: label
|
|
188
|
+
}
|
|
189
|
+
)
|
|
190
|
+
] }),
|
|
191
|
+
helperText && /* @__PURE__ */ jsx("p", { className: twMerge("mt-1 text-xs text-gray-500", error && "text-red-500"), children: helperText })
|
|
192
|
+
] });
|
|
193
|
+
}
|
|
194
|
+
);
|
|
195
|
+
Select.displayName = "Select";
|
|
196
|
+
var Select_default = Select;
|
|
197
|
+
|
|
198
|
+
export { Select_default };
|
|
199
|
+
//# sourceMappingURL=chunk-F3PI7A6V.js.map
|
|
200
|
+
//# sourceMappingURL=chunk-F3PI7A6V.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Select/index.tsx"],"names":["normalizedName"],"mappings":"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","file":"chunk-F3PI7A6V.js","sourcesContent":["import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, PropIcon } from '@lindle/linoardo/global.types';\nimport type { InputVariant } from '../Input/types';\nimport { generateString } from '../../utils/helpers/randomStr';\n\nexport interface SelectOptionObject {\n value: string | number;\n label: string;\n disabled?: boolean;\n icon?: PropIcon;\n}\n\nexport type SelectOption = SelectOptionObject | string;\n\nexport interface SelectProps extends Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, 'onBlur' | 'onChange' | 'value' | 'defaultValue'> {\n options: SelectOption[];\n label?: string;\n placeholder?: string;\n variant?: InputVariant;\n size?: GlobalSize;\n wrapperClassName?: string;\n error?: boolean;\n helperText?: string;\n value?: string | number | readonly string[];\n defaultValue?: string | number | readonly string[];\n name?: string;\n multiple?: boolean;\n disabled?: boolean;\n required?: boolean;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLDetailsElement>;\n}\n\nconst baseClass =\n 'select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400';\n\nconst variantClasses = {\n solid:\n 'rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n sharp:\n 'rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n outline:\n 'rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40',\n text: 'rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n ghost:\n 'rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25',\n filled:\n 'rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30',\n underlined:\n 'rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70',\n rounded:\n 'rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20'\n} satisfies Record<InputVariant, string>;\n\nconst sizeClasses = {\n 'x-small': { padding: 'pl-2 pr-8 py-2', text: 'text-xs' },\n small: { padding: 'pl-2.5 pr-9 py-2.5', text: 'text-sm' },\n medium: { padding: 'pl-3 pr-10 py-3', text: 'text-base' },\n large: { padding: 'pl-3.5 pr-11 py-3.5', text: 'text-lg' },\n 'x-large': { padding: 'pl-4 pr-12 py-4', text: 'text-xl' }\n} satisfies Record<GlobalSize, { padding: string; text: string }>;\n\nconst normalizeOption = (option: SelectOption): SelectOptionObject => {\n if (typeof option === 'string') {\n return { label: option, value: option };\n }\n return option;\n};\n\nconst toIdSafe = (value: string) => {\n const sanitized = value.replace(/\\s+/g, '-').replace(/[^A-Za-z0-9_-]/g, '');\n return sanitized || 'opt';\n};\n\nconst resolveIconClassName = (icon?: PropIcon) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalizedName = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalizedName].join(' ');\n }\n\n const [library, iconNameRaw] = icon;\n const baseClasses = iconBaseClasses[library] ?? [library];\n const iconName = iconNameRaw.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalizedName = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n const classes = [...baseClasses, normalizedName];\n return Array.from(new Set(classes)).join(' ');\n};\n\n/**\n * Custom styled Select component using <details> and radio/checkbox inputs.\n * Supports icons and custom styling while remaining a Server Component (no hooks).\n */\nconst Select = React.forwardRef<HTMLInputElement, SelectProps>(\n (\n {\n options,\n label,\n placeholder,\n variant = 'outline',\n size = 'medium',\n className,\n wrapperClassName,\n id,\n name,\n multiple,\n value,\n defaultValue,\n error,\n helperText,\n disabled,\n required,\n onChange,\n onBlur,\n onFocus,\n ...props\n },\n ref\n ) => {\n const selectId = id || name || generateString();\n const inputName = name || selectId;\n const variantClass = variantClasses[variant] ?? variantClasses.outline;\n const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;\n const normalizedOptions = options.map(normalizeOption);\n const selectedValueList =\n value !== undefined\n ? (Array.isArray(value) ? value : [value]).map(String)\n : defaultValue !== undefined\n ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String)\n : [];\n const selectedLabels = normalizedOptions.filter(option => selectedValueList.includes(String(option.value))).map(option => option.label);\n const hasSelection = selectedLabels.length > 0;\n const summaryText = hasSelection ? (multiple ? selectedLabels.join(', ') : selectedLabels[0]) : placeholder || '\\u00A0';\n const handleOptionChange: React.ChangeEventHandler<HTMLInputElement> = event => {\n onChange?.(event);\n if (multiple) return;\n const detailsEl = event.currentTarget.closest('details');\n detailsEl?.removeAttribute('open');\n };\n const handleDetailsBlur: React.FocusEventHandler<HTMLDetailsElement> = event => {\n const nextFocus = event.relatedTarget as Node | null;\n if (nextFocus && event.currentTarget.contains(nextFocus)) return;\n event.currentTarget.removeAttribute('open');\n };\n const handleDetailsFocus: React.FocusEventHandler<HTMLDetailsElement> = event => {\n if (normalizedOptions.length === 0) {\n onFocus?.(event);\n }\n };\n\n return (\n <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n <div className='relative'>\n <details\n className='group w-full'\n {...props}\n onBlur={onBlur ? undefined : handleDetailsBlur}\n onFocus={onFocus ? handleDetailsFocus : undefined}\n open={undefined}\n >\n <summary\n className={twMerge(\n baseClass,\n variantClass,\n sizeClass,\n 'list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden',\n error && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500',\n disabled && 'pointer-events-none opacity-50 cursor-not-allowed',\n className\n )}\n style={{ minHeight: '2.75rem' }}\n onClick={e => disabled && e.preventDefault()}\n >\n <span className={twMerge('truncate', !hasSelection && 'text-gray-500 dark:text-gray-400')}>{summaryText}</span>\n <span className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300'>\n <i className='mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180' aria-hidden />\n </span>\n </summary>\n\n <div className='absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700'>\n {normalizedOptions.map((option, index) => {\n const optionValueStr = String(option.value);\n const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;\n const isDefaultSelected = Array.isArray(defaultValue)\n ? defaultValue.map(String).includes(optionValueStr)\n : String(defaultValue) === optionValueStr;\n const iconClassName = resolveIconClassName(option.icon);\n const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;\n\n return (\n <label\n key={`${optionValueStr}-${index}`}\n htmlFor={inputId}\n className={twMerge(\n 'relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700',\n option.disabled && 'cursor-not-allowed opacity-50'\n )}\n >\n <input\n type={multiple ? 'checkbox' : 'radio'}\n id={inputId}\n name={inputName}\n value={option.value}\n disabled={option.disabled || disabled}\n checked={value !== undefined ? isSelected : undefined}\n defaultChecked={defaultValue !== undefined ? isDefaultSelected : undefined}\n onChange={handleOptionChange}\n onBlur={onBlur}\n ref={ref}\n required={required && !multiple}\n className='peer sr-only'\n />\n {iconClassName && <i className={twMerge(iconClassName, 'text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400')} />}\n <span className='flex-1 truncate peer-checked:font-medium peer-checked:text-primary'>{option.label}</span>\n <i className='mdi mdi-check invisible ml-auto text-primary peer-checked:visible' />\n </label>\n );\n })}\n </div>\n </details>\n\n {label && (\n <label\n className={twMerge('absolute left-3 -top-1.5 text-xs bg-white px-1 text-gray-500 transition-all dark:bg-slate-900 dark:text-gray-400')}\n >\n {label}\n </label>\n )}\n </div>\n {helperText && <p className={twMerge('mt-1 text-xs text-gray-500', error && 'text-red-500')}>{helperText}</p>}\n </div>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"]}
|
|
@@ -93,6 +93,7 @@ var TimeLineItem = React.forwardRef((props, ref) => {
|
|
|
93
93
|
className,
|
|
94
94
|
children,
|
|
95
95
|
__timelineSide = "right",
|
|
96
|
+
__timelineAxis = "center",
|
|
96
97
|
__timelineAlign = "center",
|
|
97
98
|
__timelineDensity = "default",
|
|
98
99
|
__timelineColor = "primary",
|
|
@@ -103,20 +104,25 @@ var TimeLineItem = React.forwardRef((props, ref) => {
|
|
|
103
104
|
__timelineCount = 1,
|
|
104
105
|
...rest
|
|
105
106
|
} = props;
|
|
107
|
+
const timelineSide = side ?? __timelineSide;
|
|
106
108
|
const resolvedAlign = align ?? __timelineAlign;
|
|
107
|
-
const resolvedSide = resolveSide(
|
|
109
|
+
const resolvedSide = resolveSide(timelineSide, __timelineIndex);
|
|
108
110
|
const resolvedColor = color ?? __timelineColor;
|
|
109
111
|
const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;
|
|
110
112
|
const dotPalette = resolveDotPalette(resolvedColor, variant);
|
|
111
113
|
const iconNode = resolveIconNode(icon);
|
|
112
114
|
const isLast = __timelineIndex >= __timelineCount - 1;
|
|
113
115
|
const showLine = !hideLine && !isLast;
|
|
116
|
+
const hasOpposite = Boolean(opposite);
|
|
117
|
+
const isAlternate = timelineSide === "alternate";
|
|
118
|
+
const useAxisLayout = !hasOpposite && !isAlternate && __timelineAxis !== "center";
|
|
114
119
|
const lineStyle = {
|
|
115
120
|
width: __timelineLineWidth,
|
|
116
121
|
backgroundColor: __timelineLineColor
|
|
117
122
|
};
|
|
118
123
|
const baseItemClass = twMerge(
|
|
119
|
-
"timeline-item grid
|
|
124
|
+
"timeline-item grid gap-4",
|
|
125
|
+
useAxisLayout ? __timelineAxis === "left" ? "grid-cols-[auto_1fr]" : "grid-cols-[1fr_auto]" : "grid-cols-[1fr_auto_1fr]",
|
|
120
126
|
alignClasses[resolvedAlign] ?? alignClasses.center,
|
|
121
127
|
className
|
|
122
128
|
);
|
|
@@ -126,6 +132,37 @@ var TimeLineItem = React.forwardRef((props, ref) => {
|
|
|
126
132
|
] });
|
|
127
133
|
const leftContent = resolvedSide === "left" ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-right", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-right text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsx("div", {});
|
|
128
134
|
const rightContent = resolvedSide === "right" ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-left", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col text-left text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsx("div", {});
|
|
135
|
+
if (useAxisLayout) {
|
|
136
|
+
const contentAlignClass = resolvedSide === "left" ? "text-left" : "text-right";
|
|
137
|
+
const contentContainer = /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col", contentAlignClass, contentClassName), children: contentNode });
|
|
138
|
+
const dotColumn = /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
|
|
139
|
+
/* @__PURE__ */ jsx(
|
|
140
|
+
"span",
|
|
141
|
+
{
|
|
142
|
+
className: twMerge(
|
|
143
|
+
"flex items-center justify-center rounded-full ring-4 ring-white",
|
|
144
|
+
dotSizeClass,
|
|
145
|
+
dotPalette.dot,
|
|
146
|
+
dotPalette.ring,
|
|
147
|
+
dotClassName
|
|
148
|
+
),
|
|
149
|
+
children: dot ?? iconNode
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
/* @__PURE__ */ jsx(
|
|
153
|
+
"span",
|
|
154
|
+
{
|
|
155
|
+
className: twMerge("mt-3 flex-1 bg-gray-200 dark:bg-gray-700", showLine ? void 0 : "invisible", lineClassName),
|
|
156
|
+
style: lineStyle,
|
|
157
|
+
"aria-hidden": true
|
|
158
|
+
}
|
|
159
|
+
)
|
|
160
|
+
] });
|
|
161
|
+
return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: baseItemClass, children: [
|
|
162
|
+
__timelineAxis === "left" ? dotColumn : contentContainer,
|
|
163
|
+
__timelineAxis === "left" ? contentContainer : dotColumn
|
|
164
|
+
] });
|
|
165
|
+
}
|
|
129
166
|
return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: baseItemClass, children: [
|
|
130
167
|
leftContent,
|
|
131
168
|
/* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
|
|
@@ -145,11 +182,7 @@ var TimeLineItem = React.forwardRef((props, ref) => {
|
|
|
145
182
|
/* @__PURE__ */ jsx(
|
|
146
183
|
"span",
|
|
147
184
|
{
|
|
148
|
-
className: twMerge(
|
|
149
|
-
"mt-3 flex-1 bg-gray-200 dark:bg-gray-700",
|
|
150
|
-
showLine ? void 0 : "invisible",
|
|
151
|
-
lineClassName
|
|
152
|
-
),
|
|
185
|
+
className: twMerge("mt-3 flex-1 bg-gray-200 dark:bg-gray-700", showLine ? void 0 : "invisible", lineClassName),
|
|
153
186
|
style: lineStyle,
|
|
154
187
|
"aria-hidden": true
|
|
155
188
|
}
|
|
@@ -169,6 +202,7 @@ var isTimeLineItem = (child) => {
|
|
|
169
202
|
var TimeLine = React.forwardRef((props, ref) => {
|
|
170
203
|
const {
|
|
171
204
|
side = "right",
|
|
205
|
+
axis = "center",
|
|
172
206
|
align = "center",
|
|
173
207
|
density = "default",
|
|
174
208
|
color = "primary",
|
|
@@ -187,6 +221,7 @@ var TimeLine = React.forwardRef((props, ref) => {
|
|
|
187
221
|
}
|
|
188
222
|
return React.cloneElement(child, {
|
|
189
223
|
__timelineSide: side,
|
|
224
|
+
__timelineAxis: axis,
|
|
190
225
|
__timelineAlign: align,
|
|
191
226
|
__timelineDensity: density,
|
|
192
227
|
__timelineColor: color,
|
|
@@ -197,15 +232,7 @@ var TimeLine = React.forwardRef((props, ref) => {
|
|
|
197
232
|
__timelineCount: childArray.length
|
|
198
233
|
});
|
|
199
234
|
});
|
|
200
|
-
return /* @__PURE__ */ jsx(
|
|
201
|
-
"div",
|
|
202
|
-
{
|
|
203
|
-
...rest,
|
|
204
|
-
ref,
|
|
205
|
-
className: twMerge("timeline flex flex-col", resolvedGap, className),
|
|
206
|
-
children: resolvedChildren
|
|
207
|
-
}
|
|
208
|
-
);
|
|
235
|
+
return /* @__PURE__ */ jsx("div", { ...rest, ref, className: twMerge("timeline flex flex-col", resolvedGap, className), children: resolvedChildren });
|
|
209
236
|
});
|
|
210
237
|
TimeLine.displayName = "TimeLine";
|
|
211
238
|
var TimeLineWithItem = TimeLine;
|
|
@@ -213,5 +240,5 @@ TimeLineWithItem.Item = TimeLineItem;
|
|
|
213
240
|
var TimeLine_default = TimeLineWithItem;
|
|
214
241
|
|
|
215
242
|
export { TimeLineItem, TimeLine_default };
|
|
216
|
-
//# sourceMappingURL=chunk-
|
|
217
|
-
//# sourceMappingURL=chunk-
|
|
243
|
+
//# sourceMappingURL=chunk-FEGFA3FN.js.map
|
|
244
|
+
//# sourceMappingURL=chunk-FEGFA3FN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Feedback/TimeLine/index.tsx"],"names":[],"mappings":"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","file":"chunk-FEGFA3FN.js","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { Palette, PropIcon } from '@lindle/linoardo/global.types';\nimport { resolveIconClassName } from '../../Containment/Chip/states.chip';\nimport type {\n TimeLineAlign,\n TimeLineAxis,\n TimeLineDensity,\n TimeLineDotSize,\n TimeLineDotVariant,\n TimeLineItemProps,\n TimeLineProps,\n TimeLineSide\n} from './types.timeline';\n\nconst densityGapClasses: Record<TimeLineDensity, string> = {\n default: 'gap-6',\n compact: 'gap-4'\n};\n\nconst alignClasses: Record<TimeLineAlign, string> = {\n start: 'items-start',\n center: 'items-center',\n end: 'items-end'\n};\n\nconst dotSizeClasses: Record<TimeLineDotSize, string> = {\n sm: 'h-6 w-6 text-xs',\n md: 'h-8 w-8 text-sm',\n lg: 'h-10 w-10 text-base'\n};\n\nconst paletteDotClasses: Record<Palette, Record<TimeLineDotVariant, { dot: string; ring: string }>> = {\n primary: {\n filled: { dot: 'bg-primary text-white border border-primary', ring: 'ring-primary/30' },\n outlined: { dot: 'bg-white text-primary border border-primary', ring: 'ring-primary/20' },\n tonal: { dot: 'bg-primary/15 text-primary border border-primary/20', ring: 'ring-primary/20' }\n },\n neutral: {\n filled: { dot: 'bg-gray-900 text-white border border-gray-900', ring: 'ring-gray-900/20' },\n outlined: { dot: 'bg-white text-gray-900 border border-gray-900', ring: 'ring-gray-900/15' },\n tonal: { dot: 'bg-gray-100 text-gray-800 border border-gray-200', ring: 'ring-gray-900/10' }\n },\n info: {\n filled: { dot: 'bg-sky-500 text-white border border-sky-500', ring: 'ring-sky-500/30' },\n outlined: { dot: 'bg-white text-sky-600 border border-sky-500', ring: 'ring-sky-500/20' },\n tonal: { dot: 'bg-sky-100 text-sky-700 border border-sky-200', ring: 'ring-sky-500/20' }\n },\n success: {\n filled: { dot: 'bg-emerald-500 text-white border border-emerald-500', ring: 'ring-emerald-500/30' },\n outlined: { dot: 'bg-white text-emerald-600 border border-emerald-500', ring: 'ring-emerald-500/20' },\n tonal: { dot: 'bg-emerald-100 text-emerald-700 border border-emerald-200', ring: 'ring-emerald-500/20' }\n },\n warning: {\n filled: { dot: 'bg-amber-500 text-white border border-amber-500', ring: 'ring-amber-500/30' },\n outlined: { dot: 'bg-white text-amber-700 border border-amber-500', ring: 'ring-amber-500/20' },\n tonal: { dot: 'bg-amber-100 text-amber-800 border border-amber-200', ring: 'ring-amber-500/20' }\n },\n danger: {\n filled: { dot: 'bg-red-500 text-white border border-red-500', ring: 'ring-red-500/30' },\n outlined: { dot: 'bg-white text-red-600 border border-red-500', ring: 'ring-red-500/20' },\n tonal: { dot: 'bg-red-100 text-red-700 border border-red-200', ring: 'ring-red-500/20' }\n },\n surface: {\n filled: { dot: 'bg-white text-gray-900 border border-gray-200', ring: 'ring-gray-300/30' },\n outlined: { dot: 'bg-white text-gray-900 border border-gray-300', ring: 'ring-gray-300/20' },\n tonal: { dot: 'bg-gray-50 text-gray-800 border border-gray-200', ring: 'ring-gray-300/20' }\n },\n bw: {\n filled: { dot: 'bg-black text-white border border-black', ring: 'ring-black/30' },\n outlined: { dot: 'bg-white text-black border border-black', ring: 'ring-black/20' },\n tonal: { dot: 'bg-black/10 text-black border border-black/20', ring: 'ring-black/20' }\n }\n};\n\nconst resolveDotPalette = (color: Palette, variant: TimeLineDotVariant) => {\n const palette = paletteDotClasses[color] ?? paletteDotClasses.primary;\n return palette[variant] ?? palette.filled;\n};\n\nconst resolveSide = (side: TimeLineSide, index: number): Exclude<TimeLineSide, 'alternate'> => {\n if (side === 'alternate') {\n return index % 2 === 0 ? 'left' : 'right';\n }\n return side;\n};\n\nconst resolveIconNode = (icon?: PropIcon) => {\n if (!icon) return null;\n const iconClass = resolveIconClassName(icon);\n return iconClass ? <i className={iconClass} aria-hidden /> : null;\n};\n\ntype InternalItemProps = TimeLineItemProps & {\n __timelineSide?: TimeLineSide;\n __timelineAxis?: TimeLineAxis;\n __timelineAlign?: TimeLineAlign;\n __timelineDensity?: TimeLineDensity;\n __timelineColor?: Palette;\n __timelineDotSize?: TimeLineDotSize;\n __timelineLineColor?: string;\n __timelineLineWidth?: number;\n __timelineIndex?: number;\n __timelineCount?: number;\n};\n\n/**\n * Single timeline item with dot, optional icon and left/right content slots.\n */\nconst TimeLineItem = React.forwardRef<HTMLDivElement, InternalItemProps>((props, ref) => {\n const {\n title,\n subtitle,\n opposite,\n icon,\n dot,\n color,\n variant = 'filled',\n side,\n align,\n hideLine,\n dotClassName,\n contentClassName,\n oppositeClassName,\n lineClassName,\n className,\n children,\n __timelineSide = 'right',\n __timelineAxis = 'center',\n __timelineAlign = 'center',\n __timelineDensity = 'default',\n __timelineColor = 'primary',\n __timelineDotSize = 'md',\n __timelineLineColor,\n __timelineLineWidth = 2,\n __timelineIndex = 0,\n __timelineCount = 1,\n ...rest\n } = props;\n\n const timelineSide = side ?? __timelineSide;\n const resolvedAlign = align ?? __timelineAlign;\n const resolvedSide = resolveSide(timelineSide, __timelineIndex);\n const resolvedColor = color ?? __timelineColor;\n const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;\n const dotPalette = resolveDotPalette(resolvedColor, variant);\n const iconNode = resolveIconNode(icon);\n const isLast = __timelineIndex >= __timelineCount - 1;\n const showLine = !hideLine && !isLast;\n const hasOpposite = Boolean(opposite);\n const isAlternate = timelineSide === 'alternate';\n const useAxisLayout = !hasOpposite && !isAlternate && __timelineAxis !== 'center';\n const lineStyle: React.CSSProperties = {\n width: __timelineLineWidth,\n backgroundColor: __timelineLineColor\n };\n\n const baseItemClass = twMerge(\n 'timeline-item grid gap-4',\n useAxisLayout ? (__timelineAxis === 'left' ? 'grid-cols-[auto_1fr]' : 'grid-cols-[1fr_auto]') : 'grid-cols-[1fr_auto_1fr]',\n alignClasses[resolvedAlign] ?? alignClasses.center,\n className\n );\n\n const contentNode = children ?? (\n <div className='space-y-1'>\n {title && <div className='text-sm font-semibold text-gray-900'>{title}</div>}\n {subtitle && <div className='text-sm text-gray-500'>{subtitle}</div>}\n </div>\n );\n\n const leftContent =\n resolvedSide === 'left' ? (\n <div className={twMerge('flex flex-col text-right', contentClassName)}>{contentNode}</div>\n ) : opposite ? (\n <div className={twMerge('flex flex-col text-right text-sm text-gray-500', oppositeClassName)}>{opposite}</div>\n ) : (\n <div />\n );\n\n const rightContent =\n resolvedSide === 'right' ? (\n <div className={twMerge('flex flex-col text-left', contentClassName)}>{contentNode}</div>\n ) : opposite ? (\n <div className={twMerge('flex flex-col text-left text-sm text-gray-500', oppositeClassName)}>{opposite}</div>\n ) : (\n <div />\n );\n\n if (useAxisLayout) {\n const contentAlignClass = resolvedSide === 'left' ? 'text-left' : 'text-right';\n const contentContainer = <div className={twMerge('flex flex-col', contentAlignClass, contentClassName)}>{contentNode}</div>;\n const dotColumn = (\n <div className='relative flex h-full flex-col items-center'>\n <span\n className={twMerge(\n 'flex items-center justify-center rounded-full ring-4 ring-white',\n dotSizeClass,\n dotPalette.dot,\n dotPalette.ring,\n dotClassName\n )}\n >\n {dot ?? iconNode}\n </span>\n <span\n className={twMerge('mt-3 flex-1 bg-gray-200 dark:bg-gray-700', showLine ? undefined : 'invisible', lineClassName)}\n style={lineStyle}\n aria-hidden\n />\n </div>\n );\n\n return (\n <div {...rest} ref={ref} className={baseItemClass}>\n {__timelineAxis === 'left' ? dotColumn : contentContainer}\n {__timelineAxis === 'left' ? contentContainer : dotColumn}\n </div>\n );\n }\n\n return (\n <div {...rest} ref={ref} className={baseItemClass}>\n {leftContent}\n <div className='relative flex h-full flex-col items-center'>\n <span\n className={twMerge(\n 'flex items-center justify-center rounded-full ring-4 ring-white',\n dotSizeClass,\n dotPalette.dot,\n dotPalette.ring,\n dotClassName\n )}\n >\n {dot ?? iconNode}\n </span>\n <span\n className={twMerge('mt-3 flex-1 bg-gray-200 dark:bg-gray-700', showLine ? undefined : 'invisible', lineClassName)}\n style={lineStyle}\n aria-hidden\n />\n </div>\n {rightContent}\n </div>\n );\n});\n\nTimeLineItem.displayName = 'TimeLine.Item';\n\nconst isTimeLineItem = (child: React.ReactNode): child is React.ReactElement<InternalItemProps> => {\n if (!React.isValidElement(child)) {\n return false;\n }\n\n const elementType = child.type as { displayName?: string };\n return child.type === TimeLineItem || elementType.displayName === TimeLineItem.displayName;\n};\n\n/**\n * Vuetify-inspired timeline container with optional alternating layout.\n */\nconst TimeLine = React.forwardRef<HTMLDivElement, TimeLineProps>((props, ref) => {\n const {\n side = 'right',\n axis = 'center',\n align = 'center',\n density = 'default',\n color = 'primary',\n lineColor,\n lineWidth = 2,\n dotSize = 'md',\n className,\n children,\n ...rest\n } = props;\n\n const resolvedGap = densityGapClasses[density] ?? densityGapClasses.default;\n const childArray = React.Children.toArray(children);\n\n const resolvedChildren = childArray.map((child, index) => {\n if (!isTimeLineItem(child)) {\n return child;\n }\n\n return React.cloneElement(child, {\n __timelineSide: side,\n __timelineAxis: axis,\n __timelineAlign: align,\n __timelineDensity: density,\n __timelineColor: color,\n __timelineDotSize: dotSize,\n __timelineLineColor: lineColor,\n __timelineLineWidth: lineWidth,\n __timelineIndex: index,\n __timelineCount: childArray.length\n });\n });\n\n return (\n <div {...rest} ref={ref} className={twMerge('timeline flex flex-col', resolvedGap, className)}>\n {resolvedChildren}\n </div>\n );\n});\n\nTimeLine.displayName = 'TimeLine';\n\ntype TimeLineComponent = React.ForwardRefExoticComponent<TimeLineProps & React.RefAttributes<HTMLDivElement>> & {\n Item: typeof TimeLineItem;\n};\n\nconst TimeLineWithItem = TimeLine as TimeLineComponent;\nTimeLineWithItem.Item = TimeLineItem;\n\nexport { TimeLineItem };\nexport type { TimeLineProps, TimeLineItemProps, TimeLineSide, TimeLineAxis, TimeLineAlign, TimeLineDensity, TimeLineDotVariant, TimeLineDotSize };\nexport default TimeLineWithItem;\n"]}
|