@dododog/ui 0.5.0 → 0.5.1
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-2J73BRC5.js +148 -0
- package/dist/chunk-MKUUHYGQ.mjs +126 -0
- package/dist/components/AnchorTabs/index.d.mts +11 -0
- package/dist/components/AnchorTabs/index.d.ts +11 -0
- package/dist/components/AnchorTabs/index.js +2 -2
- package/dist/components/AnchorTabs/index.mjs +1 -1
- package/dist/index.js +11 -11
- package/dist/index.mjs +3 -3
- package/package.json +1 -1
- package/dist/chunk-5A3MVRZJ.js +0 -109
- package/dist/chunk-PU4CWOWU.mjs +0 -87
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
|
|
4
|
+
var React = require('react');
|
|
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
|
+
var AnchorTabs = React__namespace.forwardRef(
|
|
28
|
+
({
|
|
29
|
+
items,
|
|
30
|
+
className,
|
|
31
|
+
ariaLabel = "Navigation dans la fiche",
|
|
32
|
+
offsetTop = 96,
|
|
33
|
+
onActiveChange,
|
|
34
|
+
pinWhileSectionsVisible = false,
|
|
35
|
+
pinTop = 72,
|
|
36
|
+
containerClassName
|
|
37
|
+
}, ref) => {
|
|
38
|
+
const [activeKey, setActiveKey] = React__namespace.useState(items[0]?.key ?? "");
|
|
39
|
+
const [pinned, setPinned] = React__namespace.useState(false);
|
|
40
|
+
const [pinBox, setPinBox] = React__namespace.useState(null);
|
|
41
|
+
const wrapperRef = React__namespace.useRef(null);
|
|
42
|
+
React__namespace.useEffect(() => {
|
|
43
|
+
if (items.length === 0) return;
|
|
44
|
+
const ids = items.map((i) => i.key);
|
|
45
|
+
let raf = 0;
|
|
46
|
+
const update = () => {
|
|
47
|
+
raf = 0;
|
|
48
|
+
let current = ids[0];
|
|
49
|
+
let bestTop = -Infinity;
|
|
50
|
+
for (const id of ids) {
|
|
51
|
+
const el = document.getElementById(id);
|
|
52
|
+
if (!el) continue;
|
|
53
|
+
const top = el.getBoundingClientRect().top - offsetTop;
|
|
54
|
+
if (top <= 8 && top > bestTop) {
|
|
55
|
+
bestTop = top;
|
|
56
|
+
current = id;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
setActiveKey((prev) => prev === current ? prev : current);
|
|
60
|
+
if (pinWhileSectionsVisible && wrapperRef.current) {
|
|
61
|
+
const wrap = wrapperRef.current.getBoundingClientRect();
|
|
62
|
+
let lastBottom = -Infinity;
|
|
63
|
+
for (const id of ids) {
|
|
64
|
+
const el = document.getElementById(id);
|
|
65
|
+
if (el) lastBottom = Math.max(lastBottom, el.getBoundingClientRect().bottom);
|
|
66
|
+
}
|
|
67
|
+
const barHeight = wrap.height || 46;
|
|
68
|
+
const shouldPin = wrap.top <= pinTop && lastBottom > pinTop + barHeight;
|
|
69
|
+
setPinned((prev) => prev === shouldPin ? prev : shouldPin);
|
|
70
|
+
setPinBox((prev) => {
|
|
71
|
+
if (!shouldPin) return prev;
|
|
72
|
+
if (prev && prev.left === wrap.left && prev.width === wrap.width && prev.height === barHeight) return prev;
|
|
73
|
+
return { left: wrap.left, width: wrap.width, height: barHeight };
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
const onScroll = () => {
|
|
78
|
+
if (raf) return;
|
|
79
|
+
raf = window.requestAnimationFrame(update);
|
|
80
|
+
};
|
|
81
|
+
update();
|
|
82
|
+
window.addEventListener("scroll", onScroll, { passive: true });
|
|
83
|
+
window.addEventListener("resize", onScroll);
|
|
84
|
+
return () => {
|
|
85
|
+
window.removeEventListener("scroll", onScroll);
|
|
86
|
+
window.removeEventListener("resize", onScroll);
|
|
87
|
+
if (raf) window.cancelAnimationFrame(raf);
|
|
88
|
+
};
|
|
89
|
+
}, [items, offsetTop, pinWhileSectionsVisible, pinTop]);
|
|
90
|
+
React__namespace.useEffect(() => {
|
|
91
|
+
if (activeKey) onActiveChange?.(activeKey);
|
|
92
|
+
}, [activeKey, onActiveChange]);
|
|
93
|
+
const handleClick = (event, key) => {
|
|
94
|
+
const el = typeof document !== "undefined" ? document.getElementById(key) : null;
|
|
95
|
+
if (!el) return;
|
|
96
|
+
event.preventDefault();
|
|
97
|
+
const y = el.getBoundingClientRect().top + window.scrollY - offsetTop;
|
|
98
|
+
const prefersReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
99
|
+
window.scrollTo({ top: y, behavior: prefersReducedMotion ? "auto" : "smooth" });
|
|
100
|
+
setActiveKey(key);
|
|
101
|
+
};
|
|
102
|
+
const isPinned = pinWhileSectionsVisible && pinned && pinBox !== null;
|
|
103
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
104
|
+
"div",
|
|
105
|
+
{
|
|
106
|
+
ref: wrapperRef,
|
|
107
|
+
className: containerClassName,
|
|
108
|
+
style: isPinned && pinBox ? { minHeight: pinBox.height } : void 0,
|
|
109
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
110
|
+
"nav",
|
|
111
|
+
{
|
|
112
|
+
ref,
|
|
113
|
+
"aria-label": ariaLabel,
|
|
114
|
+
className: chunkADIDI7AJ_js.cn(
|
|
115
|
+
"flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
|
|
116
|
+
isPinned && "z-40 shadow-sm",
|
|
117
|
+
className
|
|
118
|
+
),
|
|
119
|
+
style: isPinned && pinBox ? { position: "fixed", top: pinTop, left: pinBox.left, width: pinBox.width } : void 0,
|
|
120
|
+
children: items.map((item) => {
|
|
121
|
+
const isActive = item.key === activeKey;
|
|
122
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
+
"a",
|
|
124
|
+
{
|
|
125
|
+
href: `#${item.key}`,
|
|
126
|
+
"aria-current": isActive ? "location" : void 0,
|
|
127
|
+
onClick: (event) => handleClick(event, item.key),
|
|
128
|
+
className: chunkADIDI7AJ_js.cn(
|
|
129
|
+
// Cible tactile >= 44px (min-h-[44px] + flex centré) ; transition
|
|
130
|
+
// limitée aux couleurs (150-300ms, sans reflow) ; press feedback
|
|
131
|
+
// via opacité (transform/opacity, aucun layout shift).
|
|
132
|
+
"flex min-h-[44px] items-center whitespace-nowrap border-b-2 px-4 text-sm outline-none transition-colors duration-200 -mb-px active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
|
|
133
|
+
isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
|
|
134
|
+
),
|
|
135
|
+
children: item.label
|
|
136
|
+
},
|
|
137
|
+
item.key
|
|
138
|
+
);
|
|
139
|
+
})
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
AnchorTabs.displayName = "AnchorTabs";
|
|
147
|
+
|
|
148
|
+
exports.AnchorTabs = AnchorTabs;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { cn } from './chunk-IMKLN273.mjs';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
var AnchorTabs = React.forwardRef(
|
|
6
|
+
({
|
|
7
|
+
items,
|
|
8
|
+
className,
|
|
9
|
+
ariaLabel = "Navigation dans la fiche",
|
|
10
|
+
offsetTop = 96,
|
|
11
|
+
onActiveChange,
|
|
12
|
+
pinWhileSectionsVisible = false,
|
|
13
|
+
pinTop = 72,
|
|
14
|
+
containerClassName
|
|
15
|
+
}, ref) => {
|
|
16
|
+
const [activeKey, setActiveKey] = React.useState(items[0]?.key ?? "");
|
|
17
|
+
const [pinned, setPinned] = React.useState(false);
|
|
18
|
+
const [pinBox, setPinBox] = React.useState(null);
|
|
19
|
+
const wrapperRef = React.useRef(null);
|
|
20
|
+
React.useEffect(() => {
|
|
21
|
+
if (items.length === 0) return;
|
|
22
|
+
const ids = items.map((i) => i.key);
|
|
23
|
+
let raf = 0;
|
|
24
|
+
const update = () => {
|
|
25
|
+
raf = 0;
|
|
26
|
+
let current = ids[0];
|
|
27
|
+
let bestTop = -Infinity;
|
|
28
|
+
for (const id of ids) {
|
|
29
|
+
const el = document.getElementById(id);
|
|
30
|
+
if (!el) continue;
|
|
31
|
+
const top = el.getBoundingClientRect().top - offsetTop;
|
|
32
|
+
if (top <= 8 && top > bestTop) {
|
|
33
|
+
bestTop = top;
|
|
34
|
+
current = id;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
setActiveKey((prev) => prev === current ? prev : current);
|
|
38
|
+
if (pinWhileSectionsVisible && wrapperRef.current) {
|
|
39
|
+
const wrap = wrapperRef.current.getBoundingClientRect();
|
|
40
|
+
let lastBottom = -Infinity;
|
|
41
|
+
for (const id of ids) {
|
|
42
|
+
const el = document.getElementById(id);
|
|
43
|
+
if (el) lastBottom = Math.max(lastBottom, el.getBoundingClientRect().bottom);
|
|
44
|
+
}
|
|
45
|
+
const barHeight = wrap.height || 46;
|
|
46
|
+
const shouldPin = wrap.top <= pinTop && lastBottom > pinTop + barHeight;
|
|
47
|
+
setPinned((prev) => prev === shouldPin ? prev : shouldPin);
|
|
48
|
+
setPinBox((prev) => {
|
|
49
|
+
if (!shouldPin) return prev;
|
|
50
|
+
if (prev && prev.left === wrap.left && prev.width === wrap.width && prev.height === barHeight) return prev;
|
|
51
|
+
return { left: wrap.left, width: wrap.width, height: barHeight };
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const onScroll = () => {
|
|
56
|
+
if (raf) return;
|
|
57
|
+
raf = window.requestAnimationFrame(update);
|
|
58
|
+
};
|
|
59
|
+
update();
|
|
60
|
+
window.addEventListener("scroll", onScroll, { passive: true });
|
|
61
|
+
window.addEventListener("resize", onScroll);
|
|
62
|
+
return () => {
|
|
63
|
+
window.removeEventListener("scroll", onScroll);
|
|
64
|
+
window.removeEventListener("resize", onScroll);
|
|
65
|
+
if (raf) window.cancelAnimationFrame(raf);
|
|
66
|
+
};
|
|
67
|
+
}, [items, offsetTop, pinWhileSectionsVisible, pinTop]);
|
|
68
|
+
React.useEffect(() => {
|
|
69
|
+
if (activeKey) onActiveChange?.(activeKey);
|
|
70
|
+
}, [activeKey, onActiveChange]);
|
|
71
|
+
const handleClick = (event, key) => {
|
|
72
|
+
const el = typeof document !== "undefined" ? document.getElementById(key) : null;
|
|
73
|
+
if (!el) return;
|
|
74
|
+
event.preventDefault();
|
|
75
|
+
const y = el.getBoundingClientRect().top + window.scrollY - offsetTop;
|
|
76
|
+
const prefersReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
77
|
+
window.scrollTo({ top: y, behavior: prefersReducedMotion ? "auto" : "smooth" });
|
|
78
|
+
setActiveKey(key);
|
|
79
|
+
};
|
|
80
|
+
const isPinned = pinWhileSectionsVisible && pinned && pinBox !== null;
|
|
81
|
+
return /* @__PURE__ */ jsx(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
ref: wrapperRef,
|
|
85
|
+
className: containerClassName,
|
|
86
|
+
style: isPinned && pinBox ? { minHeight: pinBox.height } : void 0,
|
|
87
|
+
children: /* @__PURE__ */ jsx(
|
|
88
|
+
"nav",
|
|
89
|
+
{
|
|
90
|
+
ref,
|
|
91
|
+
"aria-label": ariaLabel,
|
|
92
|
+
className: cn(
|
|
93
|
+
"flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
|
|
94
|
+
isPinned && "z-40 shadow-sm",
|
|
95
|
+
className
|
|
96
|
+
),
|
|
97
|
+
style: isPinned && pinBox ? { position: "fixed", top: pinTop, left: pinBox.left, width: pinBox.width } : void 0,
|
|
98
|
+
children: items.map((item) => {
|
|
99
|
+
const isActive = item.key === activeKey;
|
|
100
|
+
return /* @__PURE__ */ jsx(
|
|
101
|
+
"a",
|
|
102
|
+
{
|
|
103
|
+
href: `#${item.key}`,
|
|
104
|
+
"aria-current": isActive ? "location" : void 0,
|
|
105
|
+
onClick: (event) => handleClick(event, item.key),
|
|
106
|
+
className: cn(
|
|
107
|
+
// Cible tactile >= 44px (min-h-[44px] + flex centré) ; transition
|
|
108
|
+
// limitée aux couleurs (150-300ms, sans reflow) ; press feedback
|
|
109
|
+
// via opacité (transform/opacity, aucun layout shift).
|
|
110
|
+
"flex min-h-[44px] items-center whitespace-nowrap border-b-2 px-4 text-sm outline-none transition-colors duration-200 -mb-px active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
|
|
111
|
+
isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
|
|
112
|
+
),
|
|
113
|
+
children: item.label
|
|
114
|
+
},
|
|
115
|
+
item.key
|
|
116
|
+
);
|
|
117
|
+
})
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
AnchorTabs.displayName = "AnchorTabs";
|
|
125
|
+
|
|
126
|
+
export { AnchorTabs };
|
|
@@ -23,6 +23,17 @@ interface AnchorTabsProps {
|
|
|
23
23
|
offsetTop?: number;
|
|
24
24
|
/** Notifié à chaque changement de section active (scroll ou clic). */
|
|
25
25
|
onActiveChange?: (key: string) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Épingle la barre (position fixed) tant qu'au moins une des sections
|
|
28
|
+
* ancrées reste dans le viewport — au-delà de la portée d'un simple
|
|
29
|
+
* `position: sticky` limité au parent. Un espace réservé conserve la
|
|
30
|
+
* hauteur de la barre (aucun layout shift).
|
|
31
|
+
*/
|
|
32
|
+
pinWhileSectionsVisible?: boolean;
|
|
33
|
+
/** Ordonnée (px) de l'épinglage sous le header. Défaut : 72. */
|
|
34
|
+
pinTop?: number;
|
|
35
|
+
/** Classes du conteneur/sentinelle (ex. `hidden lg:block`). */
|
|
36
|
+
containerClassName?: string;
|
|
26
37
|
}
|
|
27
38
|
/**
|
|
28
39
|
* Barre d'onglets d'ancrage (desktop) avec scroll-spy.
|
|
@@ -23,6 +23,17 @@ interface AnchorTabsProps {
|
|
|
23
23
|
offsetTop?: number;
|
|
24
24
|
/** Notifié à chaque changement de section active (scroll ou clic). */
|
|
25
25
|
onActiveChange?: (key: string) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Épingle la barre (position fixed) tant qu'au moins une des sections
|
|
28
|
+
* ancrées reste dans le viewport — au-delà de la portée d'un simple
|
|
29
|
+
* `position: sticky` limité au parent. Un espace réservé conserve la
|
|
30
|
+
* hauteur de la barre (aucun layout shift).
|
|
31
|
+
*/
|
|
32
|
+
pinWhileSectionsVisible?: boolean;
|
|
33
|
+
/** Ordonnée (px) de l'épinglage sous le header. Défaut : 72. */
|
|
34
|
+
pinTop?: number;
|
|
35
|
+
/** Classes du conteneur/sentinelle (ex. `hidden lg:block`). */
|
|
36
|
+
containerClassName?: string;
|
|
26
37
|
}
|
|
27
38
|
/**
|
|
28
39
|
* Barre d'onglets d'ancrage (desktop) avec scroll-spy.
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk2J73BRC5_js = require('../../chunk-2J73BRC5.js');
|
|
4
4
|
require('../../chunk-ADIDI7AJ.js');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "AnchorTabs", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunk2J73BRC5_js.AnchorTabs; }
|
|
11
11
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { AnchorTabs } from '../../chunk-
|
|
1
|
+
export { AnchorTabs } from '../../chunk-MKUUHYGQ.mjs';
|
|
2
2
|
import '../../chunk-IMKLN273.mjs';
|
package/dist/index.js
CHANGED
|
@@ -52,7 +52,7 @@ var chunkE24VNM6S_js = require('./chunk-E24VNM6S.js');
|
|
|
52
52
|
var chunkXXC2YD3D_js = require('./chunk-XXC2YD3D.js');
|
|
53
53
|
var chunkVWFY24XF_js = require('./chunk-VWFY24XF.js');
|
|
54
54
|
var chunkT5FLQQP6_js = require('./chunk-T5FLQQP6.js');
|
|
55
|
-
var
|
|
55
|
+
var chunkEY4ZIR3P_js = require('./chunk-EY4ZIR3P.js');
|
|
56
56
|
var chunkZ5S7LHMY_js = require('./chunk-Z5S7LHMY.js');
|
|
57
57
|
var chunk6EG6EAHW_js = require('./chunk-6EG6EAHW.js');
|
|
58
58
|
var chunkPND5YKFN_js = require('./chunk-PND5YKFN.js');
|
|
@@ -60,10 +60,10 @@ var chunkH3JNRTAI_js = require('./chunk-H3JNRTAI.js');
|
|
|
60
60
|
var chunkYZTVHCLK_js = require('./chunk-YZTVHCLK.js');
|
|
61
61
|
var chunkZAUYE2EI_js = require('./chunk-ZAUYE2EI.js');
|
|
62
62
|
var chunkMY6BYO5F_js = require('./chunk-MY6BYO5F.js');
|
|
63
|
-
var chunkWBRVUWGC_js = require('./chunk-WBRVUWGC.js');
|
|
64
63
|
var chunkMCF3EQTV_js = require('./chunk-MCF3EQTV.js');
|
|
64
|
+
var chunkWBRVUWGC_js = require('./chunk-WBRVUWGC.js');
|
|
65
|
+
var chunk2J73BRC5_js = require('./chunk-2J73BRC5.js');
|
|
65
66
|
var chunkNHB2TI2B_js = require('./chunk-NHB2TI2B.js');
|
|
66
|
-
var chunkEY4ZIR3P_js = require('./chunk-EY4ZIR3P.js');
|
|
67
67
|
var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
|
|
68
68
|
var React = require('react');
|
|
69
69
|
var classVarianceAuthority = require('class-variance-authority');
|
|
@@ -764,9 +764,9 @@ Object.defineProperty(exports, "DropdownMenu", {
|
|
|
764
764
|
enumerable: true,
|
|
765
765
|
get: function () { return chunkT5FLQQP6_js.DropdownMenu; }
|
|
766
766
|
});
|
|
767
|
-
Object.defineProperty(exports, "
|
|
767
|
+
Object.defineProperty(exports, "Avatar", {
|
|
768
768
|
enumerable: true,
|
|
769
|
-
get: function () { return
|
|
769
|
+
get: function () { return chunkEY4ZIR3P_js.Avatar; }
|
|
770
770
|
});
|
|
771
771
|
Object.defineProperty(exports, "Badge", {
|
|
772
772
|
enumerable: true,
|
|
@@ -836,13 +836,17 @@ Object.defineProperty(exports, "CardList", {
|
|
|
836
836
|
enumerable: true,
|
|
837
837
|
get: function () { return chunkMY6BYO5F_js.CardList; }
|
|
838
838
|
});
|
|
839
|
+
Object.defineProperty(exports, "Accordion", {
|
|
840
|
+
enumerable: true,
|
|
841
|
+
get: function () { return chunkMCF3EQTV_js.Accordion; }
|
|
842
|
+
});
|
|
839
843
|
Object.defineProperty(exports, "Alert", {
|
|
840
844
|
enumerable: true,
|
|
841
845
|
get: function () { return chunkWBRVUWGC_js.Alert; }
|
|
842
846
|
});
|
|
843
|
-
Object.defineProperty(exports, "
|
|
847
|
+
Object.defineProperty(exports, "AnchorTabs", {
|
|
844
848
|
enumerable: true,
|
|
845
|
-
get: function () { return
|
|
849
|
+
get: function () { return chunk2J73BRC5_js.AnchorTabs; }
|
|
846
850
|
});
|
|
847
851
|
Object.defineProperty(exports, "Autocomplete", {
|
|
848
852
|
enumerable: true,
|
|
@@ -852,10 +856,6 @@ Object.defineProperty(exports, "autocompleteInputVariants", {
|
|
|
852
856
|
enumerable: true,
|
|
853
857
|
get: function () { return chunkNHB2TI2B_js.autocompleteInputVariants; }
|
|
854
858
|
});
|
|
855
|
-
Object.defineProperty(exports, "Avatar", {
|
|
856
|
-
enumerable: true,
|
|
857
|
-
get: function () { return chunkEY4ZIR3P_js.Avatar; }
|
|
858
|
-
});
|
|
859
859
|
Object.defineProperty(exports, "cn", {
|
|
860
860
|
enumerable: true,
|
|
861
861
|
get: function () { return chunkADIDI7AJ_js.cn; }
|
package/dist/index.mjs
CHANGED
|
@@ -50,7 +50,7 @@ export { DetailList } from './chunk-N6THLJIG.mjs';
|
|
|
50
50
|
export { Divider } from './chunk-E4B6LXK7.mjs';
|
|
51
51
|
export { Drawer } from './chunk-ZLF7IL3Y.mjs';
|
|
52
52
|
export { DropdownMenu } from './chunk-Q7BKR6O7.mjs';
|
|
53
|
-
export {
|
|
53
|
+
export { Avatar } from './chunk-2POGTS27.mjs';
|
|
54
54
|
export { Badge, badgeVariants } from './chunk-XZU2SISM.mjs';
|
|
55
55
|
export { Banner, bannerVariants } from './chunk-LFIZX2S6.mjs';
|
|
56
56
|
export { BottomNavBar } from './chunk-UQRQZLMQ.mjs';
|
|
@@ -58,10 +58,10 @@ export { Breadcrumb, breadcrumbVariants } from './chunk-UKCH6RYL.mjs';
|
|
|
58
58
|
export { Button, buttonVariants } from './chunk-4U5MNA3B.mjs';
|
|
59
59
|
export { Card, CardContent, CardDescription, CardImage, CardTitle, cardImageVariants, cardVariants } from './chunk-V5J2XLPD.mjs';
|
|
60
60
|
export { CardList } from './chunk-RJWHPHHX.mjs';
|
|
61
|
-
export { Alert } from './chunk-BQWVWK74.mjs';
|
|
62
61
|
export { Accordion } from './chunk-NZ7GF6RF.mjs';
|
|
62
|
+
export { Alert } from './chunk-BQWVWK74.mjs';
|
|
63
|
+
export { AnchorTabs } from './chunk-MKUUHYGQ.mjs';
|
|
63
64
|
export { Autocomplete, autocompleteInputVariants } from './chunk-B47HQHX3.mjs';
|
|
64
|
-
export { Avatar } from './chunk-2POGTS27.mjs';
|
|
65
65
|
import { cn } from './chunk-IMKLN273.mjs';
|
|
66
66
|
export { cn } from './chunk-IMKLN273.mjs';
|
|
67
67
|
import * as React from 'react';
|
package/package.json
CHANGED
package/dist/chunk-5A3MVRZJ.js
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
|
|
4
|
-
var React = require('react');
|
|
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
|
-
var AnchorTabs = React__namespace.forwardRef(
|
|
28
|
-
({ items, className, ariaLabel = "Navigation dans la fiche", offsetTop = 96, onActiveChange }, ref) => {
|
|
29
|
-
const [activeKey, setActiveKey] = React__namespace.useState(items[0]?.key ?? "");
|
|
30
|
-
React__namespace.useEffect(() => {
|
|
31
|
-
if (items.length === 0) return;
|
|
32
|
-
const ids = items.map((i) => i.key);
|
|
33
|
-
let raf = 0;
|
|
34
|
-
const update = () => {
|
|
35
|
-
raf = 0;
|
|
36
|
-
let current = ids[0];
|
|
37
|
-
let bestTop = -Infinity;
|
|
38
|
-
for (const id of ids) {
|
|
39
|
-
const el = document.getElementById(id);
|
|
40
|
-
if (!el) continue;
|
|
41
|
-
const top = el.getBoundingClientRect().top - offsetTop;
|
|
42
|
-
if (top <= 1 && top > bestTop) {
|
|
43
|
-
bestTop = top;
|
|
44
|
-
current = id;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
setActiveKey((prev) => prev === current ? prev : current);
|
|
48
|
-
};
|
|
49
|
-
const onScroll = () => {
|
|
50
|
-
if (raf) return;
|
|
51
|
-
raf = window.requestAnimationFrame(update);
|
|
52
|
-
};
|
|
53
|
-
update();
|
|
54
|
-
window.addEventListener("scroll", onScroll, { passive: true });
|
|
55
|
-
window.addEventListener("resize", onScroll);
|
|
56
|
-
return () => {
|
|
57
|
-
window.removeEventListener("scroll", onScroll);
|
|
58
|
-
window.removeEventListener("resize", onScroll);
|
|
59
|
-
if (raf) window.cancelAnimationFrame(raf);
|
|
60
|
-
};
|
|
61
|
-
}, [items, offsetTop]);
|
|
62
|
-
React__namespace.useEffect(() => {
|
|
63
|
-
if (activeKey) onActiveChange?.(activeKey);
|
|
64
|
-
}, [activeKey, onActiveChange]);
|
|
65
|
-
const handleClick = (event, key) => {
|
|
66
|
-
const el = typeof document !== "undefined" ? document.getElementById(key) : null;
|
|
67
|
-
if (!el) return;
|
|
68
|
-
event.preventDefault();
|
|
69
|
-
const y = el.getBoundingClientRect().top + window.scrollY - offsetTop;
|
|
70
|
-
const prefersReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
71
|
-
window.scrollTo({ top: y, behavior: prefersReducedMotion ? "auto" : "smooth" });
|
|
72
|
-
setActiveKey(key);
|
|
73
|
-
};
|
|
74
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
75
|
-
"nav",
|
|
76
|
-
{
|
|
77
|
-
ref,
|
|
78
|
-
"aria-label": ariaLabel,
|
|
79
|
-
className: chunkADIDI7AJ_js.cn(
|
|
80
|
-
"flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
|
|
81
|
-
className
|
|
82
|
-
),
|
|
83
|
-
children: items.map((item) => {
|
|
84
|
-
const isActive = item.key === activeKey;
|
|
85
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
-
"a",
|
|
87
|
-
{
|
|
88
|
-
href: `#${item.key}`,
|
|
89
|
-
"aria-current": isActive ? "location" : void 0,
|
|
90
|
-
onClick: (event) => handleClick(event, item.key),
|
|
91
|
-
className: chunkADIDI7AJ_js.cn(
|
|
92
|
-
// Cible tactile >= 44px (min-h-[44px] + flex centré) ; transition
|
|
93
|
-
// limitée aux couleurs (150-300ms, sans reflow) ; press feedback
|
|
94
|
-
// via opacité (transform/opacity, aucun layout shift).
|
|
95
|
-
"flex min-h-[44px] items-center whitespace-nowrap border-b-2 px-4 text-sm outline-none transition-colors duration-200 -mb-px active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
|
|
96
|
-
isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
|
|
97
|
-
),
|
|
98
|
-
children: item.label
|
|
99
|
-
},
|
|
100
|
-
item.key
|
|
101
|
-
);
|
|
102
|
-
})
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
);
|
|
107
|
-
AnchorTabs.displayName = "AnchorTabs";
|
|
108
|
-
|
|
109
|
-
exports.AnchorTabs = AnchorTabs;
|
package/dist/chunk-PU4CWOWU.mjs
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { cn } from './chunk-IMKLN273.mjs';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
var AnchorTabs = React.forwardRef(
|
|
6
|
-
({ items, className, ariaLabel = "Navigation dans la fiche", offsetTop = 96, onActiveChange }, ref) => {
|
|
7
|
-
const [activeKey, setActiveKey] = React.useState(items[0]?.key ?? "");
|
|
8
|
-
React.useEffect(() => {
|
|
9
|
-
if (items.length === 0) return;
|
|
10
|
-
const ids = items.map((i) => i.key);
|
|
11
|
-
let raf = 0;
|
|
12
|
-
const update = () => {
|
|
13
|
-
raf = 0;
|
|
14
|
-
let current = ids[0];
|
|
15
|
-
let bestTop = -Infinity;
|
|
16
|
-
for (const id of ids) {
|
|
17
|
-
const el = document.getElementById(id);
|
|
18
|
-
if (!el) continue;
|
|
19
|
-
const top = el.getBoundingClientRect().top - offsetTop;
|
|
20
|
-
if (top <= 1 && top > bestTop) {
|
|
21
|
-
bestTop = top;
|
|
22
|
-
current = id;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
setActiveKey((prev) => prev === current ? prev : current);
|
|
26
|
-
};
|
|
27
|
-
const onScroll = () => {
|
|
28
|
-
if (raf) return;
|
|
29
|
-
raf = window.requestAnimationFrame(update);
|
|
30
|
-
};
|
|
31
|
-
update();
|
|
32
|
-
window.addEventListener("scroll", onScroll, { passive: true });
|
|
33
|
-
window.addEventListener("resize", onScroll);
|
|
34
|
-
return () => {
|
|
35
|
-
window.removeEventListener("scroll", onScroll);
|
|
36
|
-
window.removeEventListener("resize", onScroll);
|
|
37
|
-
if (raf) window.cancelAnimationFrame(raf);
|
|
38
|
-
};
|
|
39
|
-
}, [items, offsetTop]);
|
|
40
|
-
React.useEffect(() => {
|
|
41
|
-
if (activeKey) onActiveChange?.(activeKey);
|
|
42
|
-
}, [activeKey, onActiveChange]);
|
|
43
|
-
const handleClick = (event, key) => {
|
|
44
|
-
const el = typeof document !== "undefined" ? document.getElementById(key) : null;
|
|
45
|
-
if (!el) return;
|
|
46
|
-
event.preventDefault();
|
|
47
|
-
const y = el.getBoundingClientRect().top + window.scrollY - offsetTop;
|
|
48
|
-
const prefersReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
49
|
-
window.scrollTo({ top: y, behavior: prefersReducedMotion ? "auto" : "smooth" });
|
|
50
|
-
setActiveKey(key);
|
|
51
|
-
};
|
|
52
|
-
return /* @__PURE__ */ jsx(
|
|
53
|
-
"nav",
|
|
54
|
-
{
|
|
55
|
-
ref,
|
|
56
|
-
"aria-label": ariaLabel,
|
|
57
|
-
className: cn(
|
|
58
|
-
"flex items-stretch gap-1 overflow-x-auto border-b border-sand-dark bg-white",
|
|
59
|
-
className
|
|
60
|
-
),
|
|
61
|
-
children: items.map((item) => {
|
|
62
|
-
const isActive = item.key === activeKey;
|
|
63
|
-
return /* @__PURE__ */ jsx(
|
|
64
|
-
"a",
|
|
65
|
-
{
|
|
66
|
-
href: `#${item.key}`,
|
|
67
|
-
"aria-current": isActive ? "location" : void 0,
|
|
68
|
-
onClick: (event) => handleClick(event, item.key),
|
|
69
|
-
className: cn(
|
|
70
|
-
// Cible tactile >= 44px (min-h-[44px] + flex centré) ; transition
|
|
71
|
-
// limitée aux couleurs (150-300ms, sans reflow) ; press feedback
|
|
72
|
-
// via opacité (transform/opacity, aucun layout shift).
|
|
73
|
-
"flex min-h-[44px] items-center whitespace-nowrap border-b-2 px-4 text-sm outline-none transition-colors duration-200 -mb-px active:opacity-70 focus-visible:ring-2 focus-visible:ring-secondary focus-visible:ring-offset-2",
|
|
74
|
-
isActive ? "border-secondary font-semibold text-primary" : "border-transparent font-medium text-text-secondary hover:border-gray-300 hover:text-primary"
|
|
75
|
-
),
|
|
76
|
-
children: item.label
|
|
77
|
-
},
|
|
78
|
-
item.key
|
|
79
|
-
);
|
|
80
|
-
})
|
|
81
|
-
}
|
|
82
|
-
);
|
|
83
|
-
}
|
|
84
|
-
);
|
|
85
|
-
AnchorTabs.displayName = "AnchorTabs";
|
|
86
|
-
|
|
87
|
-
export { AnchorTabs };
|