@lindle/linoardo 1.0.39 → 1.0.41
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-CFm8a8R_.d.ts → ExpansionPanelItem-C4-2nlhq.d.ts} +1 -1
- package/dist/{ExpansionPanelItem-ufS2RIZf.d.cts → ExpansionPanelItem-CEhDj2Uw.d.cts} +1 -1
- package/dist/badge.d.cts +1 -1
- package/dist/badge.d.ts +1 -1
- package/dist/block.d.cts +1 -1
- package/dist/block.d.ts +1 -1
- package/dist/button.d.cts +1 -1
- package/dist/button.d.ts +1 -1
- package/dist/card.d.cts +1 -1
- package/dist/card.d.ts +1 -1
- package/dist/chip.d.cts +12 -12
- package/dist/chip.d.ts +12 -12
- package/dist/chip.js +2 -1
- package/dist/chunk-4J3SRVOS.js +217 -0
- package/dist/chunk-4J3SRVOS.js.map +1 -0
- package/dist/chunk-HT5XBHWN.js +119 -0
- package/dist/chunk-HT5XBHWN.js.map +1 -0
- package/dist/{chunk-BDN4EDJQ.js → chunk-LULQOD2K.js} +12 -6
- package/dist/chunk-LULQOD2K.js.map +1 -0
- package/dist/{chunk-P3ESW6KM.js → chunk-OBGYXMZ3.js} +74 -28
- package/dist/chunk-OBGYXMZ3.js.map +1 -0
- package/dist/{chunk-HJFHZNOV.js → chunk-PSMGRUU5.js} +3 -116
- package/dist/chunk-PSMGRUU5.js.map +1 -0
- package/dist/expansion-panel/item.d.cts +2 -2
- package/dist/expansion-panel/item.d.ts +2 -2
- package/dist/expansion-panel.d.cts +3 -3
- package/dist/expansion-panel.d.ts +3 -3
- package/dist/{global.types-D-o85tuX.d.cts → global.types-gx9A7mUe.d.cts} +1 -1
- package/dist/{global.types-D-o85tuX.d.ts → global.types-gx9A7mUe.d.ts} +1 -1
- package/dist/hero.d.cts +1 -1
- package/dist/hero.d.ts +1 -1
- package/dist/icon.d.cts +1 -1
- package/dist/icon.d.ts +1 -1
- package/dist/{index-B7xZzSwm.d.cts → index-BDrBOeFI.d.cts} +1 -1
- package/dist/{index-BhfThlf0.d.ts → index-CNwl6vmH.d.ts} +1 -1
- package/dist/index.cjs +700 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +61 -6
- package/dist/index.d.ts +61 -6
- package/dist/index.js +409 -5
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +71 -25
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +4 -2
- package/dist/input.d.ts +4 -2
- package/dist/input.js +1 -1
- package/dist/list/item.d.cts +2 -2
- package/dist/list/item.d.ts +2 -2
- package/dist/list.d.cts +3 -3
- package/dist/list.d.ts +3 -3
- package/dist/notification.d.cts +1 -1
- package/dist/notification.d.ts +1 -1
- package/dist/profileCard.d.cts +1 -1
- package/dist/profileCard.d.ts +1 -1
- package/dist/select.cjs +14 -4
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +5 -4
- package/dist/select.d.ts +5 -4
- package/dist/select.js +1 -1
- package/dist/slider.d.cts +1 -1
- package/dist/slider.d.ts +1 -1
- package/dist/styles.css +166 -5
- package/dist/switch.d.cts +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/timeline.cjs +274 -0
- package/dist/timeline.cjs.map +1 -0
- package/dist/timeline.d.cts +54 -0
- package/dist/timeline.d.ts +54 -0
- package/dist/timeline.js +5 -0
- package/dist/timeline.js.map +1 -0
- package/dist/{types-DqPSePni.d.cts → types-CJ0zqPXF.d.cts} +1 -1
- package/dist/{types-CbQEphC3.d.ts → types-DaTHYIPO.d.ts} +1 -1
- package/package.json +13 -1
- package/dist/chunk-BDN4EDJQ.js.map +0 -1
- package/dist/chunk-HJFHZNOV.js.map +0 -1
- package/dist/chunk-P3ESW6KM.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { a as Palette } from './global.types-gx9A7mUe.js';
|
|
3
3
|
|
|
4
4
|
type ExpansionPanelValue = react.Key;
|
|
5
5
|
type ExpansionPanelVariant = 'elevated' | 'outlined' | 'tonal' | 'plain';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { a as Palette } from './global.types-gx9A7mUe.cjs';
|
|
3
3
|
|
|
4
4
|
type ExpansionPanelValue = react.Key;
|
|
5
5
|
type ExpansionPanelVariant = 'elevated' | 'outlined' | 'tonal' | 'plain';
|
package/dist/badge.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { a as Palette } from './global.types-gx9A7mUe.cjs';
|
|
3
3
|
|
|
4
4
|
type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' | 'center';
|
|
5
5
|
type IconDefinition = string | [library: string, icon: string];
|
package/dist/badge.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { a as Palette } from './global.types-gx9A7mUe.js';
|
|
3
3
|
|
|
4
4
|
type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' | 'center';
|
|
5
5
|
type IconDefinition = string | [library: string, icon: string];
|
package/dist/block.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { b as GlobalVariant } from './global.types-gx9A7mUe.cjs';
|
|
3
3
|
|
|
4
4
|
type BlockBlur = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
5
5
|
type BlockProps = react.HTMLAttributes<HTMLDivElement> & {
|
package/dist/block.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { b as GlobalVariant } from './global.types-gx9A7mUe.js';
|
|
3
3
|
|
|
4
4
|
type BlockBlur = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
5
5
|
type BlockProps = react.HTMLAttributes<HTMLDivElement> & {
|
package/dist/button.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { b as GlobalVariant, a as Palette, G as GlobalSize, P as PropIcon } from './global.types-gx9A7mUe.cjs';
|
|
3
3
|
|
|
4
4
|
type ButtonVariant = GlobalVariant;
|
|
5
5
|
type ButtonOwnProps = {
|
package/dist/button.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { b as GlobalVariant, a as Palette, G as GlobalSize, P as PropIcon } from './global.types-gx9A7mUe.js';
|
|
3
3
|
|
|
4
4
|
type ButtonVariant = GlobalVariant;
|
|
5
5
|
type ButtonOwnProps = {
|
package/dist/card.d.cts
CHANGED
package/dist/card.d.ts
CHANGED
package/dist/chip.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { b as GlobalVariant, G as GlobalSize, a as Palette, P as PropIcon } from './global.types-gx9A7mUe.cjs';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
|
|
4
4
|
type ChipVariant = GlobalVariant;
|
|
@@ -206,18 +206,18 @@ declare const Chip: react.ForwardRefExoticComponent<{
|
|
|
206
206
|
onFocusCapture?: react.FocusEventHandler<HTMLSpanElement> | undefined;
|
|
207
207
|
onBlur?: react.FocusEventHandler<HTMLSpanElement> | undefined;
|
|
208
208
|
onBlurCapture?: react.FocusEventHandler<HTMLSpanElement> | undefined;
|
|
209
|
-
onChange?: react.
|
|
210
|
-
onChangeCapture?: react.
|
|
209
|
+
onChange?: react.ChangeEventHandler<HTMLSpanElement, Element> | undefined;
|
|
210
|
+
onChangeCapture?: react.ChangeEventHandler<HTMLSpanElement, Element> | undefined;
|
|
211
211
|
onBeforeInput?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
212
|
-
onBeforeInputCapture?: react.
|
|
213
|
-
onInput?: react.
|
|
214
|
-
onInputCapture?: react.
|
|
215
|
-
onReset?: react.
|
|
216
|
-
onResetCapture?: react.
|
|
217
|
-
onSubmit?: react.
|
|
218
|
-
onSubmitCapture?: react.
|
|
219
|
-
onInvalid?: react.
|
|
220
|
-
onInvalidCapture?: react.
|
|
212
|
+
onBeforeInputCapture?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
213
|
+
onInput?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
214
|
+
onInputCapture?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
215
|
+
onReset?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
216
|
+
onResetCapture?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
217
|
+
onSubmit?: react.SubmitEventHandler<HTMLSpanElement> | undefined;
|
|
218
|
+
onSubmitCapture?: react.SubmitEventHandler<HTMLSpanElement> | undefined;
|
|
219
|
+
onInvalid?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
220
|
+
onInvalidCapture?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
221
221
|
onLoad?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
222
222
|
onLoadCapture?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
223
223
|
onError?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
package/dist/chip.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { b as GlobalVariant, G as GlobalSize, a as Palette, P as PropIcon } from './global.types-gx9A7mUe.js';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
|
|
4
4
|
type ChipVariant = GlobalVariant;
|
|
@@ -206,18 +206,18 @@ declare const Chip: react.ForwardRefExoticComponent<{
|
|
|
206
206
|
onFocusCapture?: react.FocusEventHandler<HTMLSpanElement> | undefined;
|
|
207
207
|
onBlur?: react.FocusEventHandler<HTMLSpanElement> | undefined;
|
|
208
208
|
onBlurCapture?: react.FocusEventHandler<HTMLSpanElement> | undefined;
|
|
209
|
-
onChange?: react.
|
|
210
|
-
onChangeCapture?: react.
|
|
209
|
+
onChange?: react.ChangeEventHandler<HTMLSpanElement, Element> | undefined;
|
|
210
|
+
onChangeCapture?: react.ChangeEventHandler<HTMLSpanElement, Element> | undefined;
|
|
211
211
|
onBeforeInput?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
212
|
-
onBeforeInputCapture?: react.
|
|
213
|
-
onInput?: react.
|
|
214
|
-
onInputCapture?: react.
|
|
215
|
-
onReset?: react.
|
|
216
|
-
onResetCapture?: react.
|
|
217
|
-
onSubmit?: react.
|
|
218
|
-
onSubmitCapture?: react.
|
|
219
|
-
onInvalid?: react.
|
|
220
|
-
onInvalidCapture?: react.
|
|
212
|
+
onBeforeInputCapture?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
213
|
+
onInput?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
214
|
+
onInputCapture?: react.InputEventHandler<HTMLSpanElement> | undefined;
|
|
215
|
+
onReset?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
216
|
+
onResetCapture?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
217
|
+
onSubmit?: react.SubmitEventHandler<HTMLSpanElement> | undefined;
|
|
218
|
+
onSubmitCapture?: react.SubmitEventHandler<HTMLSpanElement> | undefined;
|
|
219
|
+
onInvalid?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
220
|
+
onInvalidCapture?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
221
221
|
onLoad?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
222
222
|
onLoadCapture?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
|
223
223
|
onError?: react.ReactEventHandler<HTMLSpanElement> | undefined;
|
package/dist/chip.js
CHANGED
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import { resolveIconClassName } from './chunk-PSMGRUU5.js';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var densityGapClasses = {
|
|
7
|
+
default: "gap-6",
|
|
8
|
+
compact: "gap-4"
|
|
9
|
+
};
|
|
10
|
+
var alignClasses = {
|
|
11
|
+
start: "items-start",
|
|
12
|
+
center: "items-center",
|
|
13
|
+
end: "items-end"
|
|
14
|
+
};
|
|
15
|
+
var dotSizeClasses = {
|
|
16
|
+
sm: "h-6 w-6 text-xs",
|
|
17
|
+
md: "h-8 w-8 text-sm",
|
|
18
|
+
lg: "h-10 w-10 text-base"
|
|
19
|
+
};
|
|
20
|
+
var paletteDotClasses = {
|
|
21
|
+
primary: {
|
|
22
|
+
filled: { dot: "bg-primary text-white border border-primary", ring: "ring-primary/30" },
|
|
23
|
+
outlined: { dot: "bg-white text-primary border border-primary", ring: "ring-primary/20" },
|
|
24
|
+
tonal: { dot: "bg-primary/15 text-primary border border-primary/20", ring: "ring-primary/20" }
|
|
25
|
+
},
|
|
26
|
+
neutral: {
|
|
27
|
+
filled: { dot: "bg-gray-900 text-white border border-gray-900", ring: "ring-gray-900/20" },
|
|
28
|
+
outlined: { dot: "bg-white text-gray-900 border border-gray-900", ring: "ring-gray-900/15" },
|
|
29
|
+
tonal: { dot: "bg-gray-100 text-gray-800 border border-gray-200", ring: "ring-gray-900/10" }
|
|
30
|
+
},
|
|
31
|
+
info: {
|
|
32
|
+
filled: { dot: "bg-sky-500 text-white border border-sky-500", ring: "ring-sky-500/30" },
|
|
33
|
+
outlined: { dot: "bg-white text-sky-600 border border-sky-500", ring: "ring-sky-500/20" },
|
|
34
|
+
tonal: { dot: "bg-sky-100 text-sky-700 border border-sky-200", ring: "ring-sky-500/20" }
|
|
35
|
+
},
|
|
36
|
+
success: {
|
|
37
|
+
filled: { dot: "bg-emerald-500 text-white border border-emerald-500", ring: "ring-emerald-500/30" },
|
|
38
|
+
outlined: { dot: "bg-white text-emerald-600 border border-emerald-500", ring: "ring-emerald-500/20" },
|
|
39
|
+
tonal: { dot: "bg-emerald-100 text-emerald-700 border border-emerald-200", ring: "ring-emerald-500/20" }
|
|
40
|
+
},
|
|
41
|
+
warning: {
|
|
42
|
+
filled: { dot: "bg-amber-500 text-white border border-amber-500", ring: "ring-amber-500/30" },
|
|
43
|
+
outlined: { dot: "bg-white text-amber-700 border border-amber-500", ring: "ring-amber-500/20" },
|
|
44
|
+
tonal: { dot: "bg-amber-100 text-amber-800 border border-amber-200", ring: "ring-amber-500/20" }
|
|
45
|
+
},
|
|
46
|
+
danger: {
|
|
47
|
+
filled: { dot: "bg-red-500 text-white border border-red-500", ring: "ring-red-500/30" },
|
|
48
|
+
outlined: { dot: "bg-white text-red-600 border border-red-500", ring: "ring-red-500/20" },
|
|
49
|
+
tonal: { dot: "bg-red-100 text-red-700 border border-red-200", ring: "ring-red-500/20" }
|
|
50
|
+
},
|
|
51
|
+
surface: {
|
|
52
|
+
filled: { dot: "bg-white text-gray-900 border border-gray-200", ring: "ring-gray-300/30" },
|
|
53
|
+
outlined: { dot: "bg-white text-gray-900 border border-gray-300", ring: "ring-gray-300/20" },
|
|
54
|
+
tonal: { dot: "bg-gray-50 text-gray-800 border border-gray-200", ring: "ring-gray-300/20" }
|
|
55
|
+
},
|
|
56
|
+
bw: {
|
|
57
|
+
filled: { dot: "bg-black text-white border border-black", ring: "ring-black/30" },
|
|
58
|
+
outlined: { dot: "bg-white text-black border border-black", ring: "ring-black/20" },
|
|
59
|
+
tonal: { dot: "bg-black/10 text-black border border-black/20", ring: "ring-black/20" }
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
var resolveDotPalette = (color, variant) => {
|
|
63
|
+
const palette = paletteDotClasses[color] ?? paletteDotClasses.primary;
|
|
64
|
+
return palette[variant] ?? palette.filled;
|
|
65
|
+
};
|
|
66
|
+
var resolveSide = (side, index) => {
|
|
67
|
+
if (side === "alternate") {
|
|
68
|
+
return index % 2 === 0 ? "left" : "right";
|
|
69
|
+
}
|
|
70
|
+
return side;
|
|
71
|
+
};
|
|
72
|
+
var resolveIconNode = (icon) => {
|
|
73
|
+
if (!icon) return null;
|
|
74
|
+
const iconClass = resolveIconClassName(icon);
|
|
75
|
+
return iconClass ? /* @__PURE__ */ jsx("i", { className: iconClass, "aria-hidden": true }) : null;
|
|
76
|
+
};
|
|
77
|
+
var TimeLineItem = React.forwardRef((props, ref) => {
|
|
78
|
+
const {
|
|
79
|
+
title,
|
|
80
|
+
subtitle,
|
|
81
|
+
opposite,
|
|
82
|
+
icon,
|
|
83
|
+
dot,
|
|
84
|
+
color,
|
|
85
|
+
variant = "filled",
|
|
86
|
+
side,
|
|
87
|
+
align,
|
|
88
|
+
hideLine,
|
|
89
|
+
dotClassName,
|
|
90
|
+
contentClassName,
|
|
91
|
+
oppositeClassName,
|
|
92
|
+
lineClassName,
|
|
93
|
+
className,
|
|
94
|
+
children,
|
|
95
|
+
__timelineSide = "right",
|
|
96
|
+
__timelineAlign = "center",
|
|
97
|
+
__timelineDensity = "default",
|
|
98
|
+
__timelineColor = "primary",
|
|
99
|
+
__timelineDotSize = "md",
|
|
100
|
+
__timelineLineColor,
|
|
101
|
+
__timelineLineWidth = 2,
|
|
102
|
+
__timelineIndex = 0,
|
|
103
|
+
__timelineCount = 1,
|
|
104
|
+
...rest
|
|
105
|
+
} = props;
|
|
106
|
+
const resolvedAlign = align ?? __timelineAlign;
|
|
107
|
+
const resolvedSide = resolveSide(side ?? __timelineSide, __timelineIndex);
|
|
108
|
+
const resolvedColor = color ?? __timelineColor;
|
|
109
|
+
const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;
|
|
110
|
+
const dotPalette = resolveDotPalette(resolvedColor, variant);
|
|
111
|
+
const iconNode = resolveIconNode(icon);
|
|
112
|
+
const isLast = __timelineIndex >= __timelineCount - 1;
|
|
113
|
+
const showLine = !hideLine && !isLast;
|
|
114
|
+
const lineStyle = {
|
|
115
|
+
width: __timelineLineWidth,
|
|
116
|
+
backgroundColor: __timelineLineColor
|
|
117
|
+
};
|
|
118
|
+
const baseItemClass = twMerge(
|
|
119
|
+
"timeline-item grid grid-cols-[1fr_auto_1fr] gap-4",
|
|
120
|
+
alignClasses[resolvedAlign] ?? alignClasses.center,
|
|
121
|
+
className
|
|
122
|
+
);
|
|
123
|
+
const contentNode = children ?? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
124
|
+
title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900", children: title }),
|
|
125
|
+
subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: subtitle })
|
|
126
|
+
] });
|
|
127
|
+
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
|
+
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", {});
|
|
129
|
+
return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: baseItemClass, children: [
|
|
130
|
+
leftContent,
|
|
131
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
|
|
132
|
+
/* @__PURE__ */ jsx(
|
|
133
|
+
"span",
|
|
134
|
+
{
|
|
135
|
+
className: twMerge(
|
|
136
|
+
"flex items-center justify-center rounded-full ring-4 ring-white",
|
|
137
|
+
dotSizeClass,
|
|
138
|
+
dotPalette.dot,
|
|
139
|
+
dotPalette.ring,
|
|
140
|
+
dotClassName
|
|
141
|
+
),
|
|
142
|
+
children: dot ?? iconNode
|
|
143
|
+
}
|
|
144
|
+
),
|
|
145
|
+
/* @__PURE__ */ jsx(
|
|
146
|
+
"span",
|
|
147
|
+
{
|
|
148
|
+
className: twMerge(
|
|
149
|
+
"mt-3 flex-1 bg-gray-200 dark:bg-gray-700",
|
|
150
|
+
showLine ? void 0 : "invisible",
|
|
151
|
+
lineClassName
|
|
152
|
+
),
|
|
153
|
+
style: lineStyle,
|
|
154
|
+
"aria-hidden": true
|
|
155
|
+
}
|
|
156
|
+
)
|
|
157
|
+
] }),
|
|
158
|
+
rightContent
|
|
159
|
+
] });
|
|
160
|
+
});
|
|
161
|
+
TimeLineItem.displayName = "TimeLine.Item";
|
|
162
|
+
var isTimeLineItem = (child) => {
|
|
163
|
+
if (!React.isValidElement(child)) {
|
|
164
|
+
return false;
|
|
165
|
+
}
|
|
166
|
+
const elementType = child.type;
|
|
167
|
+
return child.type === TimeLineItem || elementType.displayName === TimeLineItem.displayName;
|
|
168
|
+
};
|
|
169
|
+
var TimeLine = React.forwardRef((props, ref) => {
|
|
170
|
+
const {
|
|
171
|
+
side = "right",
|
|
172
|
+
align = "center",
|
|
173
|
+
density = "default",
|
|
174
|
+
color = "primary",
|
|
175
|
+
lineColor,
|
|
176
|
+
lineWidth = 2,
|
|
177
|
+
dotSize = "md",
|
|
178
|
+
className,
|
|
179
|
+
children,
|
|
180
|
+
...rest
|
|
181
|
+
} = props;
|
|
182
|
+
const resolvedGap = densityGapClasses[density] ?? densityGapClasses.default;
|
|
183
|
+
const childArray = React.Children.toArray(children);
|
|
184
|
+
const resolvedChildren = childArray.map((child, index) => {
|
|
185
|
+
if (!isTimeLineItem(child)) {
|
|
186
|
+
return child;
|
|
187
|
+
}
|
|
188
|
+
return React.cloneElement(child, {
|
|
189
|
+
__timelineSide: side,
|
|
190
|
+
__timelineAlign: align,
|
|
191
|
+
__timelineDensity: density,
|
|
192
|
+
__timelineColor: color,
|
|
193
|
+
__timelineDotSize: dotSize,
|
|
194
|
+
__timelineLineColor: lineColor,
|
|
195
|
+
__timelineLineWidth: lineWidth,
|
|
196
|
+
__timelineIndex: index,
|
|
197
|
+
__timelineCount: childArray.length
|
|
198
|
+
});
|
|
199
|
+
});
|
|
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
|
+
);
|
|
209
|
+
});
|
|
210
|
+
TimeLine.displayName = "TimeLine";
|
|
211
|
+
var TimeLineWithItem = TimeLine;
|
|
212
|
+
TimeLineWithItem.Item = TimeLineItem;
|
|
213
|
+
var TimeLine_default = TimeLineWithItem;
|
|
214
|
+
|
|
215
|
+
export { TimeLineItem, TimeLine_default };
|
|
216
|
+
//# sourceMappingURL=chunk-4J3SRVOS.js.map
|
|
217
|
+
//# sourceMappingURL=chunk-4J3SRVOS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Feedback/TimeLine/index.tsx"],"names":[],"mappings":"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","file":"chunk-4J3SRVOS.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 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<\n Palette,\n Record<TimeLineDotVariant, { dot: string; ring: string }>\n> = {\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 = (\n color: Palette,\n variant: TimeLineDotVariant\n) => {\n const palette = paletteDotClasses[color] ?? paletteDotClasses.primary;\n return palette[variant] ?? palette.filled;\n};\n\nconst resolveSide = (\n side: TimeLineSide,\n index: number\n): 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 __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 __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 resolvedAlign = align ?? __timelineAlign;\n const resolvedSide = resolveSide(side ?? __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 lineStyle: React.CSSProperties = {\n width: __timelineLineWidth,\n backgroundColor: __timelineLineColor\n };\n\n const baseItemClass = twMerge(\n 'timeline-item grid grid-cols-[1fr_auto_1fr] gap-4',\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)}>\n {opposite}\n </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)}>\n {opposite}\n </div>\n ) : (\n <div />\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(\n 'mt-3 flex-1 bg-gray-200 dark:bg-gray-700',\n showLine ? undefined : 'invisible',\n lineClassName\n )}\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 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 __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\n {...rest}\n ref={ref}\n className={twMerge('timeline flex flex-col', resolvedGap, className)}\n >\n {resolvedChildren}\n </div>\n );\n});\n\nTimeLine.displayName = 'TimeLine';\n\ntype TimeLineComponent = React.ForwardRefExoticComponent<\n TimeLineProps & React.RefAttributes<HTMLDivElement>\n> & {\n Item: typeof TimeLineItem;\n};\n\nconst TimeLineWithItem = TimeLine as TimeLineComponent;\nTimeLineWithItem.Item = TimeLineItem;\n\nexport { TimeLineItem };\nexport type {\n TimeLineProps,\n TimeLineItemProps,\n TimeLineSide,\n TimeLineAlign,\n TimeLineDensity,\n TimeLineDotVariant,\n TimeLineDotSize\n};\nexport default TimeLineWithItem;\n"]}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { resolveVariantClass, resolveIconClassName, closeButtonClasses, chipBaseClasses } from './chunk-PSMGRUU5.js';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var chipSizeClasses = {
|
|
7
|
+
"x-small": "h-5 text-[0.65rem] px-1.5",
|
|
8
|
+
small: "h-6 text-xs px-2",
|
|
9
|
+
medium: "h-7 text-sm px-2.5",
|
|
10
|
+
large: "h-8 text-sm px-3",
|
|
11
|
+
"x-large": "h-9 text-base px-3.5"
|
|
12
|
+
};
|
|
13
|
+
var Chip = forwardRef(
|
|
14
|
+
({
|
|
15
|
+
variant = "solid",
|
|
16
|
+
color = "primary",
|
|
17
|
+
interactive = false,
|
|
18
|
+
size = "medium",
|
|
19
|
+
pill = true,
|
|
20
|
+
selected = false,
|
|
21
|
+
closable = false,
|
|
22
|
+
closeIcon = "mdi-close",
|
|
23
|
+
onClose,
|
|
24
|
+
filter = false,
|
|
25
|
+
filterIcon = "mdi-check-bold",
|
|
26
|
+
prependIcon,
|
|
27
|
+
appendIcon,
|
|
28
|
+
disabled = false,
|
|
29
|
+
className,
|
|
30
|
+
children,
|
|
31
|
+
...rest
|
|
32
|
+
}, ref) => {
|
|
33
|
+
const { onClick, onKeyDown, role, tabIndex, ...nativeProps } = rest;
|
|
34
|
+
const isInteractive = interactive || typeof onClick === "function";
|
|
35
|
+
const variantClass = resolveVariantClass(variant, color);
|
|
36
|
+
const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;
|
|
37
|
+
const pillClass = pill ? "rounded-full" : "rounded-lg";
|
|
38
|
+
const cursorClass = disabled ? "pointer-events-none opacity-50" : isInteractive ? "cursor-pointer" : "cursor-default";
|
|
39
|
+
const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white" : void 0;
|
|
40
|
+
const resolvedRole = disabled ? role : role ?? (isInteractive ? "button" : void 0);
|
|
41
|
+
const resolvedTabIndex = disabled ? -1 : tabIndex ?? (isInteractive ? 0 : void 0);
|
|
42
|
+
const prependIconClassName = resolveIconClassName(prependIcon);
|
|
43
|
+
const appendIconClassName = resolveIconClassName(appendIcon);
|
|
44
|
+
const closeIconClassName = resolveIconClassName(closeIcon);
|
|
45
|
+
const filterIconClassName = filter && selected ? resolveIconClassName(filterIcon) : void 0;
|
|
46
|
+
const handleClick = (event) => {
|
|
47
|
+
if (disabled) {
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
event.stopPropagation();
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
onClick?.(event);
|
|
53
|
+
};
|
|
54
|
+
const handleKeyDown = (event) => {
|
|
55
|
+
onKeyDown?.(event);
|
|
56
|
+
if (event.defaultPrevented || disabled || !isInteractive) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
60
|
+
event.preventDefault();
|
|
61
|
+
event.currentTarget.click();
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
const handleCloseClick = (event) => {
|
|
65
|
+
event.stopPropagation();
|
|
66
|
+
if (disabled) {
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
onClose?.(event);
|
|
71
|
+
};
|
|
72
|
+
const handleCloseKeyDown = (event) => {
|
|
73
|
+
if (event.key === " " || event.key === "Enter") {
|
|
74
|
+
event.stopPropagation();
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
const renderableChildren = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx("span", { className: "truncate", children }) : children;
|
|
78
|
+
const filterAdornment = filter ? /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]", "aria-hidden": true, children: filterIconClassName ? /* @__PURE__ */ jsx("i", { className: filterIconClassName, "aria-hidden": true }) : null }) : null;
|
|
79
|
+
return /* @__PURE__ */ jsxs(
|
|
80
|
+
"span",
|
|
81
|
+
{
|
|
82
|
+
...nativeProps,
|
|
83
|
+
ref,
|
|
84
|
+
role: resolvedRole,
|
|
85
|
+
tabIndex: resolvedTabIndex,
|
|
86
|
+
"aria-disabled": disabled || void 0,
|
|
87
|
+
"aria-pressed": filter ? selected : void 0,
|
|
88
|
+
"data-selected": selected || void 0,
|
|
89
|
+
className: twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className),
|
|
90
|
+
onClick: isInteractive ? handleClick : void 0,
|
|
91
|
+
onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
|
|
92
|
+
children: [
|
|
93
|
+
filterAdornment,
|
|
94
|
+
prependIconClassName && /* @__PURE__ */ jsx("i", { className: twMerge("text-[1.125em] leading-none", prependIconClassName), "aria-hidden": true }),
|
|
95
|
+
renderableChildren,
|
|
96
|
+
appendIconClassName && /* @__PURE__ */ jsx("i", { className: twMerge("text-[1.125em] leading-none", appendIconClassName), "aria-hidden": true }),
|
|
97
|
+
closable && /* @__PURE__ */ jsx(
|
|
98
|
+
"button",
|
|
99
|
+
{
|
|
100
|
+
type: "button",
|
|
101
|
+
disabled,
|
|
102
|
+
"aria-label": "Remove chip",
|
|
103
|
+
className: twMerge(closeButtonClasses),
|
|
104
|
+
onClick: handleCloseClick,
|
|
105
|
+
onKeyDown: handleCloseKeyDown,
|
|
106
|
+
children: closeIconClassName ? /* @__PURE__ */ jsx("i", { className: closeIconClassName, "aria-hidden": true }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xD7" })
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
Chip.displayName = "Chip";
|
|
115
|
+
var Chip_default = Chip;
|
|
116
|
+
|
|
117
|
+
export { Chip_default };
|
|
118
|
+
//# sourceMappingURL=chunk-HT5XBHWN.js.map
|
|
119
|
+
//# sourceMappingURL=chunk-HT5XBHWN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/Chip/index.tsx"],"names":[],"mappings":"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","file":"chunk-HT5XBHWN.js","sourcesContent":["import { forwardRef } from 'react';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { ChipProps, ChipSize } from './types.chip';\nimport { chipBaseClasses, closeButtonClasses, resolveIconClassName, resolveVariantClass } from './states.chip';\n\nconst chipSizeClasses: Record<ChipSize, string> = {\n 'x-small': 'h-5 text-[0.65rem] px-1.5',\n small: 'h-6 text-xs px-2',\n medium: 'h-7 text-sm px-2.5',\n large: 'h-8 text-sm px-3',\n 'x-large': 'h-9 text-base px-3.5'\n};\n\n/**\n * Small pill or badge element with optional icons, filter/selection and close affordance.\n */\nconst Chip = forwardRef<HTMLSpanElement, ChipProps>(\n (\n {\n variant = 'solid',\n color = 'primary',\n interactive = false,\n size = 'medium',\n pill = true,\n selected = false,\n closable = false,\n closeIcon = 'mdi-close',\n onClose,\n filter = false,\n filterIcon = 'mdi-check-bold',\n prependIcon,\n appendIcon,\n disabled = false,\n className,\n children,\n ...rest\n },\n ref\n ) => {\n const { onClick, onKeyDown, role, tabIndex, ...nativeProps } = rest;\n const isInteractive = interactive || typeof onClick === 'function';\n\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;\n const pillClass = pill ? 'rounded-full' : 'rounded-lg';\n const cursorClass = disabled ? 'pointer-events-none opacity-50' : isInteractive ? 'cursor-pointer' : 'cursor-default';\n const selectedClass = selected ? 'ring-2 ring-current/50 ring-offset-2 ring-offset-white' : undefined;\n\n const resolvedRole = disabled ? role : role ?? (isInteractive ? 'button' : undefined);\n const resolvedTabIndex = disabled ? -1 : tabIndex ?? (isInteractive ? 0 : undefined);\n const prependIconClassName = resolveIconClassName(prependIcon);\n const appendIconClassName = resolveIconClassName(appendIcon);\n const closeIconClassName = resolveIconClassName(closeIcon);\n const filterIconClassName = filter && selected ? resolveIconClassName(filterIcon) : undefined;\n\n const handleClick = (event: MouseEvent<HTMLSpanElement>) => {\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n onClick?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented || disabled || !isInteractive) {\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n (event.currentTarget as HTMLSpanElement).click();\n }\n };\n\n const handleCloseClick = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n if (disabled) {\n event.preventDefault();\n return;\n }\n onClose?.(event);\n };\n\n const handleCloseKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.stopPropagation();\n }\n };\n\n const renderableChildren = typeof children === 'string' || typeof children === 'number' ? <span className='truncate'>{children}</span> : children;\n\n const filterAdornment = filter ? (\n <span className='flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]' aria-hidden>\n {filterIconClassName ? <i className={filterIconClassName} aria-hidden /> : null}\n </span>\n ) : null;\n\n return (\n <span\n {...nativeProps}\n ref={ref}\n role={resolvedRole}\n tabIndex={resolvedTabIndex}\n aria-disabled={disabled || undefined}\n aria-pressed={filter ? selected : undefined}\n data-selected={selected || undefined}\n className={twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className)}\n onClick={isInteractive ? handleClick : undefined}\n onKeyDown={isInteractive ? handleKeyDown : onKeyDown}\n >\n {filterAdornment}\n {prependIconClassName && <i className={twMerge('text-[1.125em] leading-none', prependIconClassName)} aria-hidden />}\n {renderableChildren}\n {appendIconClassName && <i className={twMerge('text-[1.125em] leading-none', appendIconClassName)} aria-hidden />}\n {closable && (\n <button\n type='button'\n disabled={disabled}\n aria-label='Remove chip'\n className={twMerge(closeButtonClasses)}\n onClick={handleCloseClick}\n onKeyDown={handleCloseKeyDown}\n >\n {closeIconClassName ? <i className={closeIconClassName} aria-hidden /> : <span aria-hidden>×</span>}\n </button>\n )}\n </span>\n );\n }\n);\n\nChip.displayName = 'Chip';\n\nexport type { ChipProps, ChipSize, ChipVariant } from './types.chip';\nexport default Chip;\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { generateString } from './chunk-6SKW43XI.js';
|
|
2
2
|
import { iconBaseClasses } from './chunk-IEILIKS2.js';
|
|
3
|
+
import React from 'react';
|
|
3
4
|
import { twMerge } from 'tailwind-merge';
|
|
4
5
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
6
|
|
|
@@ -56,7 +57,7 @@ var resolveIconClassName = (icon) => {
|
|
|
56
57
|
const classes = [...baseClasses, normalizedName];
|
|
57
58
|
return Array.from(new Set(classes)).join(" ");
|
|
58
59
|
};
|
|
59
|
-
var Select = ({
|
|
60
|
+
var Select = React.forwardRef(({
|
|
60
61
|
options,
|
|
61
62
|
label,
|
|
62
63
|
placeholder,
|
|
@@ -74,9 +75,11 @@ var Select = ({
|
|
|
74
75
|
disabled,
|
|
75
76
|
required,
|
|
76
77
|
onChange,
|
|
78
|
+
onBlur,
|
|
77
79
|
...props
|
|
78
|
-
}) => {
|
|
80
|
+
}, ref) => {
|
|
79
81
|
const selectId = id || name || generateString();
|
|
82
|
+
const inputName = name || selectId;
|
|
80
83
|
const variantClass = variantClasses[variant] ?? variantClasses.outline;
|
|
81
84
|
const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;
|
|
82
85
|
const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
|
|
@@ -134,12 +137,14 @@ var Select = ({
|
|
|
134
137
|
{
|
|
135
138
|
type: multiple ? "checkbox" : "radio",
|
|
136
139
|
id: inputId,
|
|
137
|
-
name:
|
|
140
|
+
name: inputName,
|
|
138
141
|
value: option.value,
|
|
139
142
|
disabled: option.disabled || disabled,
|
|
140
143
|
checked: value !== void 0 ? isSelected : void 0,
|
|
141
144
|
defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
|
|
142
145
|
onChange: handleOptionChange,
|
|
146
|
+
onBlur,
|
|
147
|
+
ref,
|
|
143
148
|
required: required && !multiple,
|
|
144
149
|
className: "peer sr-only"
|
|
145
150
|
}
|
|
@@ -163,9 +168,10 @@ var Select = ({
|
|
|
163
168
|
] }),
|
|
164
169
|
helperText && /* @__PURE__ */ jsx("p", { className: twMerge("mt-1 text-xs text-gray-500", error && "text-red-500"), children: helperText })
|
|
165
170
|
] });
|
|
166
|
-
};
|
|
171
|
+
});
|
|
172
|
+
Select.displayName = "Select";
|
|
167
173
|
var Select_default = Select;
|
|
168
174
|
|
|
169
175
|
export { Select_default };
|
|
170
|
-
//# sourceMappingURL=chunk-
|
|
171
|
-
//# sourceMappingURL=chunk-
|
|
176
|
+
//# sourceMappingURL=chunk-LULQOD2K.js.map
|
|
177
|
+
//# sourceMappingURL=chunk-LULQOD2K.js.map
|