@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,127 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/Containment/List/Item/index.tsx
|
|
6
|
+
var listItemBaseClasses = "relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200";
|
|
7
|
+
var densityClasses = {
|
|
8
|
+
default: "px-4 py-3 text-base",
|
|
9
|
+
comfortable: "px-4 py-2.5 text-sm",
|
|
10
|
+
compact: "px-3 py-2 text-sm"
|
|
11
|
+
};
|
|
12
|
+
var lineClasses = {
|
|
13
|
+
one: "min-h-[3rem]",
|
|
14
|
+
two: "min-h-[3.75rem]",
|
|
15
|
+
three: "min-h-[4.5rem]"
|
|
16
|
+
};
|
|
17
|
+
var accentClasses = {
|
|
18
|
+
primary: { text: "text-primary", bg: "bg-primary/10", indicator: "bg-primary" },
|
|
19
|
+
neutral: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" },
|
|
20
|
+
info: { text: "text-sky-600", bg: "bg-sky-50", indicator: "bg-sky-500" },
|
|
21
|
+
success: { text: "text-emerald-600", bg: "bg-emerald-50", indicator: "bg-emerald-500" },
|
|
22
|
+
warning: { text: "text-amber-700", bg: "bg-amber-50", indicator: "bg-amber-500" },
|
|
23
|
+
danger: { text: "text-red-600", bg: "bg-red-50", indicator: "bg-red-500" },
|
|
24
|
+
surface: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" },
|
|
25
|
+
bw: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" }
|
|
26
|
+
};
|
|
27
|
+
var ListItem = React.forwardRef((props, ref) => {
|
|
28
|
+
const {
|
|
29
|
+
component,
|
|
30
|
+
href,
|
|
31
|
+
target,
|
|
32
|
+
rel,
|
|
33
|
+
type,
|
|
34
|
+
title,
|
|
35
|
+
subtitle,
|
|
36
|
+
overline,
|
|
37
|
+
prepend,
|
|
38
|
+
append,
|
|
39
|
+
active = false,
|
|
40
|
+
disabled = false,
|
|
41
|
+
inset = false,
|
|
42
|
+
density: densityOverride,
|
|
43
|
+
lines: linesOverride,
|
|
44
|
+
nav: navOverride,
|
|
45
|
+
divided: dividedOverride,
|
|
46
|
+
color: colorOverride,
|
|
47
|
+
sharp: sharpOverride,
|
|
48
|
+
className,
|
|
49
|
+
children,
|
|
50
|
+
tabIndex,
|
|
51
|
+
role,
|
|
52
|
+
...rest
|
|
53
|
+
} = props;
|
|
54
|
+
const density = densityOverride ?? "default";
|
|
55
|
+
const lines = linesOverride ?? "one";
|
|
56
|
+
const nav = navOverride ?? false;
|
|
57
|
+
const divided = dividedOverride ?? false;
|
|
58
|
+
const color = colorOverride ?? "primary";
|
|
59
|
+
const sharp = sharpOverride ?? false;
|
|
60
|
+
const accent = accentClasses[color] ?? accentClasses.primary;
|
|
61
|
+
const shapeClass = divided || sharp ? "rounded-none" : "rounded-lg";
|
|
62
|
+
const Component = component ?? (href ? "a" : "div");
|
|
63
|
+
const interactive = typeof rest.onClick === "function" || Component === "a" || Component === "button";
|
|
64
|
+
const resolvedRole = role ?? "listitem";
|
|
65
|
+
const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive && Component === "div" ? 0 : void 0);
|
|
66
|
+
const resolvedRel = Component === "a" ? rel : void 0;
|
|
67
|
+
const resolvedTarget = Component === "a" ? target : void 0;
|
|
68
|
+
const resolvedHref = Component === "a" ? href : void 0;
|
|
69
|
+
const resolvedType = Component === "button" ? type ?? "button" : void 0;
|
|
70
|
+
const disabledClass = disabled ? "pointer-events-none opacity-60" : "cursor-pointer";
|
|
71
|
+
const navPaddingClass = nav ? "pl-5" : void 0;
|
|
72
|
+
const insetClass = inset ? "pl-12" : void 0;
|
|
73
|
+
const activeClasses = active ? accent.bg : void 0;
|
|
74
|
+
return /* @__PURE__ */ jsxs(
|
|
75
|
+
Component,
|
|
76
|
+
{
|
|
77
|
+
...rest,
|
|
78
|
+
ref,
|
|
79
|
+
role: resolvedRole,
|
|
80
|
+
tabIndex: resolvedTabIndex,
|
|
81
|
+
"aria-disabled": disabled || void 0,
|
|
82
|
+
"aria-current": active ? "true" : void 0,
|
|
83
|
+
className: twMerge(
|
|
84
|
+
listItemBaseClasses,
|
|
85
|
+
densityClasses[density],
|
|
86
|
+
lineClasses[lines],
|
|
87
|
+
shapeClass,
|
|
88
|
+
navPaddingClass,
|
|
89
|
+
insetClass,
|
|
90
|
+
disabledClass,
|
|
91
|
+
activeClasses,
|
|
92
|
+
className
|
|
93
|
+
),
|
|
94
|
+
href: resolvedHref,
|
|
95
|
+
target: resolvedTarget,
|
|
96
|
+
rel: resolvedRel,
|
|
97
|
+
type: resolvedType,
|
|
98
|
+
"data-active": active || void 0,
|
|
99
|
+
children: [
|
|
100
|
+
nav && /* @__PURE__ */ jsx(
|
|
101
|
+
"span",
|
|
102
|
+
{
|
|
103
|
+
"aria-hidden": true,
|
|
104
|
+
className: twMerge(
|
|
105
|
+
"absolute left-1 top-2 bottom-2 w-0.5 rounded-full bg-transparent transition-colors duration-150",
|
|
106
|
+
active ? accent.indicator : void 0
|
|
107
|
+
)
|
|
108
|
+
}
|
|
109
|
+
),
|
|
110
|
+
prepend && /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500", children: prepend }),
|
|
111
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5 text-left", children: [
|
|
112
|
+
overline && /* @__PURE__ */ jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500", children: overline }),
|
|
113
|
+
title && /* @__PURE__ */ jsx("span", { className: twMerge("truncate font-medium text-gray-900", active ? accent.text : void 0), children: title }),
|
|
114
|
+
subtitle && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: subtitle }),
|
|
115
|
+
children
|
|
116
|
+
] }),
|
|
117
|
+
append && /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-2 whitespace-nowrap text-sm text-gray-500", children: append })
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
});
|
|
122
|
+
ListItem.displayName = "ListItem";
|
|
123
|
+
var Item_default = ListItem;
|
|
124
|
+
|
|
125
|
+
export { Item_default };
|
|
126
|
+
//# sourceMappingURL=chunk-XFPBICJG.js.map
|
|
127
|
+
//# sourceMappingURL=chunk-XFPBICJG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/List/Item/index.tsx"],"names":[],"mappings":"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","file":"chunk-XFPBICJG.js","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport type { Palette } from '@lindle/linoardo/global.types';\n\nimport type { ListDensity, ListLines } from '../types.list';\n\nconst listItemBaseClasses =\n 'relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200';\n\nconst densityClasses: Record<ListDensity, string> = {\n default: 'px-4 py-3 text-base',\n comfortable: 'px-4 py-2.5 text-sm',\n compact: 'px-3 py-2 text-sm'\n};\n\nconst lineClasses: Record<ListLines, string> = {\n one: 'min-h-[3rem]',\n two: 'min-h-[3.75rem]',\n three: 'min-h-[4.5rem]'\n};\n\nconst accentClasses: Record<Palette, { text: string; bg: string; indicator: string }> = {\n primary: { text: 'text-primary', bg: 'bg-primary/10', indicator: 'bg-primary' },\n neutral: { text: 'text-gray-900', bg: 'bg-gray-100', indicator: 'bg-gray-900' },\n info: { text: 'text-sky-600', bg: 'bg-sky-50', indicator: 'bg-sky-500' },\n success: { text: 'text-emerald-600', bg: 'bg-emerald-50', indicator: 'bg-emerald-500' },\n warning: { text: 'text-amber-700', bg: 'bg-amber-50', indicator: 'bg-amber-500' },\n danger: { text: 'text-red-600', bg: 'bg-red-50', indicator: 'bg-red-500' },\n surface: { text: 'text-gray-900', bg: 'bg-gray-100', indicator: 'bg-gray-900' },\n bw: { text: 'text-gray-900', bg: 'bg-gray-100', indicator: 'bg-gray-900' }\n};\n\nexport interface ListItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n component?: React.ElementType;\n href?: string;\n target?: string;\n rel?: string;\n type?: 'button' | 'submit' | 'reset';\n title?: React.ReactNode;\n subtitle?: React.ReactNode;\n overline?: React.ReactNode;\n prepend?: React.ReactNode;\n append?: React.ReactNode;\n active?: boolean;\n disabled?: boolean;\n inset?: boolean;\n density?: ListDensity;\n lines?: ListLines;\n nav?: boolean;\n divided?: boolean;\n color?: Palette;\n sharp?: boolean;\n}\n\nconst ListItem = React.forwardRef<HTMLElement, ListItemProps>((props, ref) => {\n const {\n component,\n href,\n target,\n rel,\n type,\n title,\n subtitle,\n overline,\n prepend,\n append,\n active = false,\n disabled = false,\n inset = false,\n density: densityOverride,\n lines: linesOverride,\n nav: navOverride,\n divided: dividedOverride,\n color: colorOverride,\n sharp: sharpOverride,\n className,\n children,\n tabIndex,\n role,\n ...rest\n } = props;\n\n const density = densityOverride ?? 'default';\n const lines = linesOverride ?? 'one';\n const nav = navOverride ?? false;\n const divided = dividedOverride ?? false;\n const color = colorOverride ?? 'primary';\n const sharp = sharpOverride ?? false;\n const accent = accentClasses[color] ?? accentClasses.primary;\n const shapeClass = divided || sharp ? 'rounded-none' : 'rounded-lg';\n\n const Component = component ?? (href ? 'a' : 'div');\n const interactive = typeof rest.onClick === 'function' || Component === 'a' || Component === 'button';\n\n const resolvedRole = role ?? 'listitem';\n const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive && Component === 'div' ? 0 : undefined);\n const resolvedRel = Component === 'a' ? rel : undefined;\n const resolvedTarget = Component === 'a' ? target : undefined;\n const resolvedHref = Component === 'a' ? href : undefined;\n const resolvedType = Component === 'button' ? type ?? 'button' : undefined;\n\n const disabledClass = disabled ? 'pointer-events-none opacity-60' : 'cursor-pointer';\n const navPaddingClass = nav ? 'pl-5' : undefined;\n const insetClass = inset ? 'pl-12' : undefined;\n const activeClasses = active ? accent.bg : undefined;\n\n return (\n <Component\n {...rest}\n ref={ref}\n role={resolvedRole}\n tabIndex={resolvedTabIndex}\n aria-disabled={disabled || undefined}\n aria-current={active ? 'true' : undefined}\n className={twMerge(\n listItemBaseClasses,\n densityClasses[density],\n lineClasses[lines],\n shapeClass,\n navPaddingClass,\n insetClass,\n disabledClass,\n activeClasses,\n className\n )}\n href={resolvedHref}\n target={resolvedTarget}\n rel={resolvedRel}\n type={resolvedType}\n data-active={active || undefined}\n >\n {nav && (\n <span\n aria-hidden\n className={twMerge(\n 'absolute left-1 top-2 bottom-2 w-0.5 rounded-full bg-transparent transition-colors duration-150',\n active ? accent.indicator : undefined\n )}\n />\n )}\n {prepend && (\n <span className='flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500'>{prepend}</span>\n )}\n <span className='flex min-w-0 flex-col gap-0.5 text-left'>\n {overline && (\n <span className='text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500'>{overline}</span>\n )}\n {title && (\n <span className={twMerge('truncate font-medium text-gray-900', active ? accent.text : undefined)}>\n {title}\n </span>\n )}\n {subtitle && <span className='text-sm text-gray-500'>{subtitle}</span>}\n {children}\n </span>\n {append && (\n <span className='ml-auto flex items-center gap-2 whitespace-nowrap text-sm text-gray-500'>{append}</span>\n )}\n </Component>\n );\n});\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\nexport type { ListDensity, ListLines } from '../types.list';\n"]}
|
package/dist/dialog.cjs
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
function _interopNamespace(e) {
|
|
8
|
+
if (e && e.__esModule) return e;
|
|
9
|
+
var n = Object.create(null);
|
|
10
|
+
if (e) {
|
|
11
|
+
Object.keys(e).forEach(function (k) {
|
|
12
|
+
if (k !== 'default') {
|
|
13
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return e[k]; }
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
n.default = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
26
|
+
|
|
27
|
+
// src/Containment/Dialog/index.tsx
|
|
28
|
+
var containerBaseClasses = "fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none";
|
|
29
|
+
var overlayBaseClasses = "absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
|
|
30
|
+
var panelWrapperClasses = "relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100";
|
|
31
|
+
var panelBaseClasses = "pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
|
|
32
|
+
var resolveSizeValue = (value) => {
|
|
33
|
+
if (value === void 0) {
|
|
34
|
+
return void 0;
|
|
35
|
+
}
|
|
36
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
37
|
+
};
|
|
38
|
+
var Dialog = React__namespace.forwardRef((props, forwardedRef) => {
|
|
39
|
+
const {
|
|
40
|
+
activator,
|
|
41
|
+
children,
|
|
42
|
+
open = false,
|
|
43
|
+
keepMounted = false,
|
|
44
|
+
scrim = true,
|
|
45
|
+
fullscreen = false,
|
|
46
|
+
maxWidth = "32rem",
|
|
47
|
+
width,
|
|
48
|
+
containerClassName,
|
|
49
|
+
overlayClassName,
|
|
50
|
+
overlayProps,
|
|
51
|
+
className,
|
|
52
|
+
style,
|
|
53
|
+
role: roleProp = "dialog",
|
|
54
|
+
tabIndex = -1,
|
|
55
|
+
id,
|
|
56
|
+
["aria-modal"]: ariaModalProp,
|
|
57
|
+
...rest
|
|
58
|
+
} = props;
|
|
59
|
+
const state = open ? "open" : "closed";
|
|
60
|
+
const shouldRenderDialog = keepMounted || open;
|
|
61
|
+
const resolvedStyle = { ...style };
|
|
62
|
+
if (fullscreen) {
|
|
63
|
+
if (resolvedStyle.maxWidth === void 0) {
|
|
64
|
+
resolvedStyle.maxWidth = "none";
|
|
65
|
+
}
|
|
66
|
+
if (resolvedStyle.width === void 0) {
|
|
67
|
+
resolvedStyle.width = "100%";
|
|
68
|
+
}
|
|
69
|
+
if (resolvedStyle.height === void 0) {
|
|
70
|
+
resolvedStyle.height = "100%";
|
|
71
|
+
}
|
|
72
|
+
if (resolvedStyle.maxHeight === void 0) {
|
|
73
|
+
resolvedStyle.maxHeight = "100%";
|
|
74
|
+
}
|
|
75
|
+
} else {
|
|
76
|
+
if (resolvedStyle.maxWidth === void 0) {
|
|
77
|
+
resolvedStyle.maxWidth = resolveSizeValue(maxWidth);
|
|
78
|
+
}
|
|
79
|
+
if (width !== void 0 && resolvedStyle.width === void 0) {
|
|
80
|
+
resolvedStyle.width = resolveSizeValue(width);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
const ariaModal = ariaModalProp ?? (roleProp === "dialog" || roleProp === "alertdialog" ? true : void 0);
|
|
84
|
+
const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};
|
|
85
|
+
const overlayNode = shouldRenderDialog && scrim ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
...restOverlayProps,
|
|
89
|
+
className: tailwindMerge.twMerge(overlayBaseClasses, overlayClassName, overlayExtraClassName),
|
|
90
|
+
"data-state": state,
|
|
91
|
+
"aria-hidden": true
|
|
92
|
+
}
|
|
93
|
+
) : null;
|
|
94
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
95
|
+
activator ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex", children: activator }) : null,
|
|
96
|
+
shouldRenderDialog ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge(containerBaseClasses, containerClassName), "data-state": state, "aria-hidden": !open, children: [
|
|
97
|
+
overlayNode,
|
|
98
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(panelWrapperClasses, fullscreen ? "h-full items-stretch" : "mx-auto"), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
99
|
+
"div",
|
|
100
|
+
{
|
|
101
|
+
...rest,
|
|
102
|
+
ref: forwardedRef,
|
|
103
|
+
id,
|
|
104
|
+
role: roleProp,
|
|
105
|
+
tabIndex,
|
|
106
|
+
"aria-modal": ariaModal,
|
|
107
|
+
className: tailwindMerge.twMerge(panelBaseClasses, fullscreen ? "h-full w-full max-w-none rounded-none" : void 0, className),
|
|
108
|
+
style: resolvedStyle,
|
|
109
|
+
"data-state": state,
|
|
110
|
+
children
|
|
111
|
+
}
|
|
112
|
+
) })
|
|
113
|
+
] }) : null
|
|
114
|
+
] });
|
|
115
|
+
});
|
|
116
|
+
Dialog.displayName = "Dialog";
|
|
117
|
+
var Dialog_default = Dialog;
|
|
118
|
+
|
|
119
|
+
module.exports = Dialog_default;
|
|
120
|
+
//# sourceMappingURL=dialog.cjs.map
|
|
121
|
+
//# sourceMappingURL=dialog.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Containment/Dialog/index.tsx"],"names":["React","jsx","twMerge","jsxs","Fragment"],"mappings":"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","file":"dialog.cjs","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nconst containerBaseClasses =\n 'fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none';\nconst overlayBaseClasses =\n 'absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100';\nconst panelWrapperClasses =\n 'relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100';\nconst panelBaseClasses =\n 'pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40';\n\nconst resolveSizeValue = (value?: string | number) => {\n if (value === undefined) {\n return undefined;\n }\n return typeof value === 'number' ? `${value}px` : value;\n};\n\nexport interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {\n activator?: React.ReactNode;\n open?: boolean;\n keepMounted?: boolean;\n scrim?: boolean;\n fullscreen?: boolean;\n maxWidth?: string | number;\n width?: string | number;\n containerClassName?: string;\n overlayClassName?: string;\n overlayProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, forwardedRef) => {\n const {\n activator,\n children,\n open = false,\n keepMounted = false,\n scrim = true,\n fullscreen = false,\n maxWidth = '32rem',\n width,\n containerClassName,\n overlayClassName,\n overlayProps,\n className,\n style,\n role: roleProp = 'dialog',\n tabIndex = -1,\n id,\n ['aria-modal']: ariaModalProp,\n ...rest\n } = props;\n\n const state = open ? 'open' : 'closed';\n const shouldRenderDialog = keepMounted || open;\n\n const resolvedStyle: React.CSSProperties = { ...style };\n if (fullscreen) {\n if (resolvedStyle.maxWidth === undefined) {\n resolvedStyle.maxWidth = 'none';\n }\n if (resolvedStyle.width === undefined) {\n resolvedStyle.width = '100%';\n }\n if (resolvedStyle.height === undefined) {\n resolvedStyle.height = '100%';\n }\n if (resolvedStyle.maxHeight === undefined) {\n resolvedStyle.maxHeight = '100%';\n }\n } else {\n if (resolvedStyle.maxWidth === undefined) {\n resolvedStyle.maxWidth = resolveSizeValue(maxWidth);\n }\n if (width !== undefined && resolvedStyle.width === undefined) {\n resolvedStyle.width = resolveSizeValue(width);\n }\n }\n\n const ariaModal = ariaModalProp ?? (roleProp === 'dialog' || roleProp === 'alertdialog' ? true : undefined);\n\n const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};\n\n const overlayNode =\n shouldRenderDialog && scrim ? (\n <div\n {...restOverlayProps}\n className={twMerge(overlayBaseClasses, overlayClassName, overlayExtraClassName)}\n data-state={state}\n aria-hidden\n />\n ) : null;\n\n return (\n <>\n {activator ? <div className='inline-flex'>{activator}</div> : null}\n {shouldRenderDialog ? (\n <div className={twMerge(containerBaseClasses, containerClassName)} data-state={state} aria-hidden={!open}>\n {overlayNode}\n <div className={twMerge(panelWrapperClasses, fullscreen ? 'h-full items-stretch' : 'mx-auto')} data-state={state}>\n <div\n {...rest}\n ref={forwardedRef}\n id={id}\n role={roleProp}\n tabIndex={tabIndex}\n aria-modal={ariaModal}\n className={twMerge(panelBaseClasses, fullscreen ? 'h-full w-full max-w-none rounded-none' : undefined, className)}\n style={resolvedStyle}\n data-state={state}\n >\n {children}\n </div>\n </div>\n </div>\n ) : null}\n </>\n );\n});\n\nDialog.displayName = 'Dialog';\n\nexport default Dialog;\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface DialogProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
activator?: react.ReactNode;
|
|
5
|
+
open?: boolean;
|
|
6
|
+
keepMounted?: boolean;
|
|
7
|
+
scrim?: boolean;
|
|
8
|
+
fullscreen?: boolean;
|
|
9
|
+
maxWidth?: string | number;
|
|
10
|
+
width?: string | number;
|
|
11
|
+
containerClassName?: string;
|
|
12
|
+
overlayClassName?: string;
|
|
13
|
+
overlayProps?: react.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
}
|
|
15
|
+
declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
|
|
17
|
+
export { type DialogProps, Dialog as default };
|
package/dist/dialog.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface DialogProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
activator?: react.ReactNode;
|
|
5
|
+
open?: boolean;
|
|
6
|
+
keepMounted?: boolean;
|
|
7
|
+
scrim?: boolean;
|
|
8
|
+
fullscreen?: boolean;
|
|
9
|
+
maxWidth?: string | number;
|
|
10
|
+
width?: string | number;
|
|
11
|
+
containerClassName?: string;
|
|
12
|
+
overlayClassName?: string;
|
|
13
|
+
overlayProps?: react.HTMLAttributes<HTMLDivElement>;
|
|
14
|
+
}
|
|
15
|
+
declare const Dialog: react.ForwardRefExoticComponent<DialogProps & react.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
|
|
17
|
+
export { type DialogProps, Dialog as default };
|
package/dist/dialog.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"dialog.js"}
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var tailwindMerge = require('tailwind-merge');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
// src/Containment/ExpansionPanel/ExpansionPanelItem.tsx
|
|
8
|
+
var EXPANSION_PANEL_ITEM_MARKER = "__isExpansionPanelItem";
|
|
9
|
+
var markExpansionPanelItem = (component) => {
|
|
10
|
+
if (typeof component !== "function" && (typeof component !== "object" || component === null)) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
component[EXPANSION_PANEL_ITEM_MARKER] = true;
|
|
14
|
+
};
|
|
15
|
+
var densityClasses = {
|
|
16
|
+
comfortable: "py-5",
|
|
17
|
+
default: "py-4",
|
|
18
|
+
compact: "py-3"
|
|
19
|
+
};
|
|
20
|
+
var roundedClasses = {
|
|
21
|
+
none: "rounded-none",
|
|
22
|
+
sm: "rounded-sm",
|
|
23
|
+
md: "rounded-md",
|
|
24
|
+
lg: "rounded-lg",
|
|
25
|
+
xl: "rounded-xl"
|
|
26
|
+
};
|
|
27
|
+
var itemVariantClasses = {
|
|
28
|
+
elevated: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5",
|
|
29
|
+
outlined: "bg-white border border-gray-200",
|
|
30
|
+
tonal: "bg-gray-50 border border-gray-100",
|
|
31
|
+
plain: "bg-transparent border border-transparent"
|
|
32
|
+
};
|
|
33
|
+
var accentClasses = {
|
|
34
|
+
primary: { text: "text-primary", bg: "bg-primary/5", border: "border-primary/30" },
|
|
35
|
+
neutral: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
|
|
36
|
+
info: { text: "text-sky-600", bg: "bg-sky-50", border: "border-sky-200" },
|
|
37
|
+
success: { text: "text-emerald-600", bg: "bg-emerald-50", border: "border-emerald-200" },
|
|
38
|
+
warning: { text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
|
|
39
|
+
danger: { text: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
|
|
40
|
+
surface: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
|
|
41
|
+
bw: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" }
|
|
42
|
+
};
|
|
43
|
+
var uniqueIdCounter = 0;
|
|
44
|
+
var generateId = (prefix) => `${prefix}-${++uniqueIdCounter}`;
|
|
45
|
+
var ExpansionPanelItemInner = (props) => {
|
|
46
|
+
const {
|
|
47
|
+
value,
|
|
48
|
+
title,
|
|
49
|
+
subtitle,
|
|
50
|
+
text,
|
|
51
|
+
prepend,
|
|
52
|
+
append,
|
|
53
|
+
expandIcon,
|
|
54
|
+
collapseIcon,
|
|
55
|
+
hideToggleIcon = false,
|
|
56
|
+
headerClassName,
|
|
57
|
+
contentClassName,
|
|
58
|
+
className,
|
|
59
|
+
disabled = false,
|
|
60
|
+
children,
|
|
61
|
+
color: colorOverride,
|
|
62
|
+
forwardedRef,
|
|
63
|
+
__expansionPanelContext,
|
|
64
|
+
...rest
|
|
65
|
+
} = props;
|
|
66
|
+
const [standaloneExpanded, setStandaloneExpanded] = react.useState(false);
|
|
67
|
+
const generatedValueRef = react.useRef(null);
|
|
68
|
+
if (generatedValueRef.current === null) {
|
|
69
|
+
generatedValueRef.current = generateId("expansion-panel-value");
|
|
70
|
+
}
|
|
71
|
+
const generatedValue = generatedValueRef.current;
|
|
72
|
+
const headerIdRef = react.useRef(null);
|
|
73
|
+
if (!headerIdRef.current) {
|
|
74
|
+
headerIdRef.current = generateId("expansion-panel-header");
|
|
75
|
+
}
|
|
76
|
+
const headerId = headerIdRef.current;
|
|
77
|
+
const contentIdRef = react.useRef(null);
|
|
78
|
+
if (!contentIdRef.current) {
|
|
79
|
+
contentIdRef.current = generateId("expansion-panel-content");
|
|
80
|
+
}
|
|
81
|
+
const contentId = contentIdRef.current;
|
|
82
|
+
const context = __expansionPanelContext ?? null;
|
|
83
|
+
const panelValue = value ?? generatedValue;
|
|
84
|
+
const density = context?.density ?? "default";
|
|
85
|
+
const color = colorOverride ?? context?.color ?? "primary";
|
|
86
|
+
const divider = context?.divider ?? true;
|
|
87
|
+
const variant = context?.variant ?? "elevated";
|
|
88
|
+
const rounded = context?.rounded ?? "lg";
|
|
89
|
+
const accent = accentClasses[color] ?? accentClasses.primary;
|
|
90
|
+
const isExpanded = context ? context.expandedValues.includes(panelValue) : standaloneExpanded;
|
|
91
|
+
const rootSurface = divider ? "bg-transparent border-0 shadow-none" : itemVariantClasses[variant];
|
|
92
|
+
const shapeClass = divider ? void 0 : roundedClasses[rounded] ?? roundedClasses.lg;
|
|
93
|
+
const densityPadding = densityClasses[density] ?? densityClasses.default;
|
|
94
|
+
const disabledClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
|
|
95
|
+
const titleClass = isExpanded ? accent.text : void 0;
|
|
96
|
+
const activeBorderClass = tailwindMerge.twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
|
|
97
|
+
const defaultToggleIcon = /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-lg leading-none transition-transform duration-200", "aria-hidden": true });
|
|
98
|
+
const hasContent = Boolean(children ?? text);
|
|
99
|
+
const contentAnimationClass = isExpanded ? "pb-5 opacity-100" : "pb-0 opacity-0";
|
|
100
|
+
const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
|
|
101
|
+
const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;
|
|
102
|
+
const toggleWrapperClass = tailwindMerge.twMerge(
|
|
103
|
+
"ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200",
|
|
104
|
+
shouldRotateDefaultIcon && isExpanded ? "rotate-180" : void 0
|
|
105
|
+
);
|
|
106
|
+
const handleToggle = () => {
|
|
107
|
+
if (disabled) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
if (context) {
|
|
111
|
+
context.toggle(panelValue, disabled);
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
setStandaloneExpanded((prev) => !prev);
|
|
115
|
+
};
|
|
116
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
117
|
+
"div",
|
|
118
|
+
{
|
|
119
|
+
...rest,
|
|
120
|
+
ref: forwardedRef,
|
|
121
|
+
className: tailwindMerge.twMerge(
|
|
122
|
+
"expansion-panel-item flex flex-col overflow-hidden transition-colors duration-200",
|
|
123
|
+
rootSurface,
|
|
124
|
+
shapeClass,
|
|
125
|
+
className
|
|
126
|
+
),
|
|
127
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
128
|
+
"data-disabled": disabled || void 0,
|
|
129
|
+
children: [
|
|
130
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
131
|
+
"button",
|
|
132
|
+
{
|
|
133
|
+
type: "button",
|
|
134
|
+
id: headerId,
|
|
135
|
+
onClick: handleToggle,
|
|
136
|
+
disabled,
|
|
137
|
+
"aria-expanded": isExpanded,
|
|
138
|
+
"aria-controls": hasContent ? contentId : void 0,
|
|
139
|
+
className: tailwindMerge.twMerge(
|
|
140
|
+
"flex w-full items-center gap-4 px-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
|
|
141
|
+
densityPadding,
|
|
142
|
+
disabledClass,
|
|
143
|
+
isExpanded ? accent.bg : void 0,
|
|
144
|
+
headerClassName
|
|
145
|
+
),
|
|
146
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
147
|
+
children: [
|
|
148
|
+
prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
|
|
149
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
|
|
150
|
+
title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
|
|
151
|
+
subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: subtitle })
|
|
152
|
+
] }),
|
|
153
|
+
append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
|
|
154
|
+
!hideToggleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
hasContent && /* @__PURE__ */ jsxRuntime.jsx(
|
|
159
|
+
"div",
|
|
160
|
+
{
|
|
161
|
+
className: "grid overflow-hidden border-t border-gray-100 transition-all duration-200 ease-in-out",
|
|
162
|
+
style: { gridTemplateRows: isExpanded ? "1fr" : "0fr" },
|
|
163
|
+
"aria-hidden": isExpanded ? void 0 : true,
|
|
164
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
165
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
166
|
+
"div",
|
|
167
|
+
{
|
|
168
|
+
id: contentId,
|
|
169
|
+
role: "region",
|
|
170
|
+
"aria-labelledby": headerId,
|
|
171
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
172
|
+
className: tailwindMerge.twMerge(
|
|
173
|
+
"min-h-0 px-4 pt-0 text-sm text-gray-600 transition-all duration-200",
|
|
174
|
+
activeBorderClass,
|
|
175
|
+
contentAnimationClass,
|
|
176
|
+
isExpanded ? "pointer-events-auto" : "pointer-events-none",
|
|
177
|
+
contentClassName
|
|
178
|
+
),
|
|
179
|
+
children: children ?? text
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
};
|
|
188
|
+
var ExpansionPanelItem = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
|
|
189
|
+
ExpansionPanelItem.displayName = "ExpansionPanelItem";
|
|
190
|
+
markExpansionPanelItem(ExpansionPanelItem);
|
|
191
|
+
var ExpansionPanelItem_default = ExpansionPanelItem;
|
|
192
|
+
|
|
193
|
+
module.exports = ExpansionPanelItem_default;
|
|
194
|
+
//# sourceMappingURL=item.cjs.map
|
|
195
|
+
//# sourceMappingURL=item.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Containment/ExpansionPanel/context.ts","../../src/Containment/ExpansionPanel/ExpansionPanelItem.tsx"],"names":["useState","useRef","twMerge","jsx","jsxs","forwardRef"],"mappings":"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","file":"item.cjs","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":[],"names":[],"mappings":"","file":"item.js"}
|