@dododog/ui 0.9.2 → 0.10.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-4A3AQ66D.mjs +134 -0
- package/dist/chunk-6KW7ZSKR.js +211 -0
- package/dist/chunk-BS7R7VDS.js +156 -0
- package/dist/{chunk-ZEHZPS2P.mjs → chunk-IGBEBAPY.mjs} +3 -3
- package/dist/{chunk-SATQIPV5.js → chunk-KFQILIZO.js} +3 -3
- package/dist/chunk-SRYZ4N7T.mjs +189 -0
- package/dist/components/DogCard/index.d.mts +44 -0
- package/dist/components/DogCard/index.d.ts +44 -0
- package/dist/components/DogCard/index.js +11 -0
- package/dist/components/DogCard/index.mjs +2 -0
- package/dist/components/RoomTypeCard/index.js +3 -3
- package/dist/components/RoomTypeCard/index.mjs +1 -1
- package/dist/components/SearchLoadingChecklist/index.d.mts +37 -0
- package/dist/components/SearchLoadingChecklist/index.d.ts +37 -0
- package/dist/components/SearchLoadingChecklist/index.js +11 -0
- package/dist/components/SearchLoadingChecklist/index.mjs +2 -0
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +127 -117
- package/dist/index.mjs +25 -23
- package/package.json +11 -1
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { cn } from './chunk-IMKLN273.mjs';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function CrownIcon({ className }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
"svg",
|
|
8
|
+
{
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
width: "14",
|
|
11
|
+
height: "14",
|
|
12
|
+
viewBox: "0 0 24 24",
|
|
13
|
+
fill: "currentColor",
|
|
14
|
+
className,
|
|
15
|
+
"aria-hidden": "true",
|
|
16
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 16 3 6l5.5 4L12 5l3.5 5L21 6l-2 10H5Zm0 2h14v2H5v-2Z" })
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
function PawIcon({ className }) {
|
|
21
|
+
return /* @__PURE__ */ jsxs(
|
|
22
|
+
"svg",
|
|
23
|
+
{
|
|
24
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
25
|
+
width: "24",
|
|
26
|
+
height: "24",
|
|
27
|
+
viewBox: "0 0 24 24",
|
|
28
|
+
fill: "currentColor",
|
|
29
|
+
className,
|
|
30
|
+
"aria-hidden": "true",
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "12.5", r: "2" }),
|
|
33
|
+
/* @__PURE__ */ jsx("circle", { cx: "9.5", cy: "7.5", r: "2" }),
|
|
34
|
+
/* @__PURE__ */ jsx("circle", { cx: "14.5", cy: "7.5", r: "2" }),
|
|
35
|
+
/* @__PURE__ */ jsx("circle", { cx: "18.5", cy: "12.5", r: "2" }),
|
|
36
|
+
/* @__PURE__ */ jsx("path", { d: "M12 11c-2.2 0-4 1.9-4 4.2 0 1.6 1.2 2.8 2.8 2.8.6 0 .9-.2 1.2-.2s.6.2 1.2.2c1.6 0 2.8-1.2 2.8-2.8C16 12.9 14.2 11 12 11Z" })
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
var INITIAL_COLORS = [
|
|
42
|
+
"bg-emerald-100 text-emerald-700",
|
|
43
|
+
"bg-amber-100 text-amber-700",
|
|
44
|
+
"bg-sky-100 text-sky-700",
|
|
45
|
+
"bg-violet-100 text-violet-700",
|
|
46
|
+
"bg-rose-100 text-rose-700"
|
|
47
|
+
];
|
|
48
|
+
function initialColor(name) {
|
|
49
|
+
let hash = 0;
|
|
50
|
+
for (let i = 0; i < name.length; i++) {
|
|
51
|
+
hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
|
52
|
+
}
|
|
53
|
+
return INITIAL_COLORS[Math.abs(hash) % INITIAL_COLORS.length];
|
|
54
|
+
}
|
|
55
|
+
function InfoChip({ children }) {
|
|
56
|
+
return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-sand px-2.5 py-0.5 text-xs font-medium text-text-secondary", children });
|
|
57
|
+
}
|
|
58
|
+
var DogCard = React.forwardRef(
|
|
59
|
+
({ dog, actions, renderImage, renderLink, className, ...props }, ref) => {
|
|
60
|
+
const imageSrc = dog.photoUrl || dog.breedImageUrl || null;
|
|
61
|
+
const initial = dog.name.charAt(0).toUpperCase() || "?";
|
|
62
|
+
const chips = [
|
|
63
|
+
dog.sizeLabel,
|
|
64
|
+
dog.sexLabel,
|
|
65
|
+
dog.ageLabel,
|
|
66
|
+
dog.weightLabel,
|
|
67
|
+
dog.breed
|
|
68
|
+
].filter((v) => Boolean(v));
|
|
69
|
+
const media = /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] w-full overflow-hidden bg-sand", children: [
|
|
70
|
+
imageSrc ? renderImage ? renderImage({
|
|
71
|
+
src: imageSrc,
|
|
72
|
+
alt: dog.name,
|
|
73
|
+
className: "h-full w-full object-cover"
|
|
74
|
+
}) : /* @__PURE__ */ jsx(
|
|
75
|
+
"img",
|
|
76
|
+
{
|
|
77
|
+
src: imageSrc,
|
|
78
|
+
alt: dog.name,
|
|
79
|
+
className: "h-full w-full object-cover"
|
|
80
|
+
}
|
|
81
|
+
) : /* @__PURE__ */ jsxs(
|
|
82
|
+
"div",
|
|
83
|
+
{
|
|
84
|
+
className: cn(
|
|
85
|
+
"flex h-full w-full flex-col items-center justify-center gap-1",
|
|
86
|
+
initialColor(dog.name)
|
|
87
|
+
),
|
|
88
|
+
"aria-label": dog.name,
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsx(PawIcon, { className: "h-7 w-7 opacity-50" }),
|
|
91
|
+
/* @__PURE__ */ jsx("span", { className: "text-2xl font-bold", children: initial })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
dog.isPrimary && /* @__PURE__ */ jsxs("span", { className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded-full bg-secondary/95 px-2 py-1 text-[11px] font-semibold text-white shadow-sm", children: [
|
|
96
|
+
/* @__PURE__ */ jsx(CrownIcon, { className: "h-3 w-3" }),
|
|
97
|
+
"Principal"
|
|
98
|
+
] })
|
|
99
|
+
] });
|
|
100
|
+
const info = /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col p-4", children: [
|
|
101
|
+
/* @__PURE__ */ jsx("h3", { className: "truncate font-heading text-base font-semibold text-primary", children: dog.name }),
|
|
102
|
+
chips.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", children: chips.map((chip, i) => /* @__PURE__ */ jsx(InfoChip, { children: chip }, `${chip}-${i}`)) })
|
|
103
|
+
] });
|
|
104
|
+
const linkClassName = "group flex flex-1 flex-col rounded-t-xl transition-opacity hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
|
|
105
|
+
const linkLabel = `Voir le passeport de ${dog.name}`;
|
|
106
|
+
const body = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
107
|
+
media,
|
|
108
|
+
info
|
|
109
|
+
] });
|
|
110
|
+
return /* @__PURE__ */ jsxs(
|
|
111
|
+
"div",
|
|
112
|
+
{
|
|
113
|
+
ref,
|
|
114
|
+
className: cn(
|
|
115
|
+
"flex flex-col overflow-hidden rounded-xl border border-sand-dark bg-white transition-shadow hover:shadow-lg",
|
|
116
|
+
className
|
|
117
|
+
),
|
|
118
|
+
...props,
|
|
119
|
+
children: [
|
|
120
|
+
dog.href ? renderLink ? renderLink({
|
|
121
|
+
href: dog.href,
|
|
122
|
+
className: linkClassName,
|
|
123
|
+
children: body,
|
|
124
|
+
"aria-label": linkLabel
|
|
125
|
+
}) : /* @__PURE__ */ jsx("a", { href: dog.href, className: linkClassName, "aria-label": linkLabel, children: body }) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col", children: body }),
|
|
126
|
+
actions && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-1 border-t border-sand-dark px-3 py-2", children: actions })
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
DogCard.displayName = "DogCard";
|
|
133
|
+
|
|
134
|
+
export { DogCard };
|
|
@@ -0,0 +1,211 @@
|
|
|
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 DEFAULT_STEPS = [
|
|
28
|
+
{ id: "analyse", label: "Analyse de votre recherche" },
|
|
29
|
+
{ id: "destination", label: "Exploration de la destination" },
|
|
30
|
+
{ id: "selection", label: "S\xE9lection des h\xE9bergements dog-friendly" },
|
|
31
|
+
{ id: "finalisation", label: "Finalisation des r\xE9sultats" }
|
|
32
|
+
];
|
|
33
|
+
var DEFAULT_TITLE = "Pr\xE9paration des r\xE9sultats de votre recherche";
|
|
34
|
+
function DogIcon({ className }) {
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
36
|
+
"svg",
|
|
37
|
+
{
|
|
38
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
39
|
+
viewBox: "0 0 24 24",
|
|
40
|
+
fill: "none",
|
|
41
|
+
stroke: "currentColor",
|
|
42
|
+
strokeWidth: "2",
|
|
43
|
+
strokeLinecap: "round",
|
|
44
|
+
strokeLinejoin: "round",
|
|
45
|
+
className,
|
|
46
|
+
"aria-hidden": "true",
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.25 16.25h1.5L12 17z" }),
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 14v.5" }),
|
|
50
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309" }),
|
|
51
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 14v.5" }),
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5" })
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
function CheckIcon({ className }) {
|
|
58
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
59
|
+
"svg",
|
|
60
|
+
{
|
|
61
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
62
|
+
viewBox: "0 0 24 24",
|
|
63
|
+
fill: "none",
|
|
64
|
+
stroke: "currentColor",
|
|
65
|
+
strokeWidth: "3",
|
|
66
|
+
strokeLinecap: "round",
|
|
67
|
+
strokeLinejoin: "round",
|
|
68
|
+
className,
|
|
69
|
+
"aria-hidden": "true",
|
|
70
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
var SearchLoadingChecklist = React__namespace.forwardRef(
|
|
75
|
+
({
|
|
76
|
+
active = true,
|
|
77
|
+
title = DEFAULT_TITLE,
|
|
78
|
+
steps = DEFAULT_STEPS,
|
|
79
|
+
stepDurationMs = 750,
|
|
80
|
+
variant = "fixed",
|
|
81
|
+
className,
|
|
82
|
+
...props
|
|
83
|
+
}, ref) => {
|
|
84
|
+
const [completedThrough, setCompletedThrough] = React__namespace.useState(0);
|
|
85
|
+
const lastStepIndex = Math.max(0, steps.length - 1);
|
|
86
|
+
React__namespace.useEffect(() => {
|
|
87
|
+
if (!active) {
|
|
88
|
+
setCompletedThrough(0);
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
if (completedThrough >= lastStepIndex) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
const timer = setTimeout(() => {
|
|
95
|
+
setCompletedThrough(
|
|
96
|
+
(current) => Math.min(current + 1, lastStepIndex)
|
|
97
|
+
);
|
|
98
|
+
}, stepDurationMs);
|
|
99
|
+
return () => {
|
|
100
|
+
clearTimeout(timer);
|
|
101
|
+
};
|
|
102
|
+
}, [active, completedThrough, lastStepIndex, stepDurationMs]);
|
|
103
|
+
if (!active) return null;
|
|
104
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
105
|
+
"div",
|
|
106
|
+
{
|
|
107
|
+
ref,
|
|
108
|
+
role: "status",
|
|
109
|
+
"aria-live": "polite",
|
|
110
|
+
"aria-busy": "true",
|
|
111
|
+
className: chunkADIDI7AJ_js.cn(
|
|
112
|
+
variant === "fixed" ? "fixed" : "absolute",
|
|
113
|
+
"inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm px-4",
|
|
114
|
+
className
|
|
115
|
+
),
|
|
116
|
+
...props,
|
|
117
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-sand-dark bg-white p-6 shadow-xl sm:p-8", children: [
|
|
118
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-16 w-16 items-center justify-center", children: [
|
|
119
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
120
|
+
"span",
|
|
121
|
+
{
|
|
122
|
+
className: "absolute inset-0 animate-spin rounded-full border-2 border-secondary/20 border-t-secondary",
|
|
123
|
+
"aria-hidden": "true"
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
/* @__PURE__ */ jsxRuntime.jsx(DogIcon, { className: "h-8 w-8 animate-pulse text-secondary" })
|
|
127
|
+
] }) }),
|
|
128
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mt-5 text-center text-lg font-semibold text-text-primary", children: title }),
|
|
129
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-6 space-y-3", children: steps.map((step, index) => {
|
|
130
|
+
const isCompleted = index < completedThrough;
|
|
131
|
+
const isCurrent = index === completedThrough;
|
|
132
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
133
|
+
"li",
|
|
134
|
+
{
|
|
135
|
+
className: "flex items-center gap-3",
|
|
136
|
+
"aria-current": isCurrent ? "step" : void 0,
|
|
137
|
+
children: [
|
|
138
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
+
"span",
|
|
140
|
+
{
|
|
141
|
+
className: chunkADIDI7AJ_js.cn(
|
|
142
|
+
"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border transition-colors duration-300",
|
|
143
|
+
isCompleted && "border-secondary bg-secondary text-white",
|
|
144
|
+
isCurrent && "border-secondary bg-secondary/10 text-secondary",
|
|
145
|
+
!isCompleted && !isCurrent && "border-gray-300 bg-white text-gray-300"
|
|
146
|
+
),
|
|
147
|
+
children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-3.5 w-3.5" }) : isCurrent ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
148
|
+
"svg",
|
|
149
|
+
{
|
|
150
|
+
className: "h-3.5 w-3.5 animate-spin",
|
|
151
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
152
|
+
fill: "none",
|
|
153
|
+
viewBox: "0 0 24 24",
|
|
154
|
+
"aria-hidden": "true",
|
|
155
|
+
children: [
|
|
156
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
157
|
+
"circle",
|
|
158
|
+
{
|
|
159
|
+
className: "opacity-25",
|
|
160
|
+
cx: "12",
|
|
161
|
+
cy: "12",
|
|
162
|
+
r: "10",
|
|
163
|
+
stroke: "currentColor",
|
|
164
|
+
strokeWidth: "4"
|
|
165
|
+
}
|
|
166
|
+
),
|
|
167
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
168
|
+
"path",
|
|
169
|
+
{
|
|
170
|
+
className: "opacity-75",
|
|
171
|
+
fill: "currentColor",
|
|
172
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
]
|
|
176
|
+
}
|
|
177
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
178
|
+
"span",
|
|
179
|
+
{
|
|
180
|
+
className: "h-1.5 w-1.5 rounded-full bg-current",
|
|
181
|
+
"aria-hidden": "true"
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
}
|
|
185
|
+
),
|
|
186
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
187
|
+
"span",
|
|
188
|
+
{
|
|
189
|
+
className: chunkADIDI7AJ_js.cn(
|
|
190
|
+
"text-sm transition-colors duration-300",
|
|
191
|
+
isCompleted && "font-medium text-text-primary",
|
|
192
|
+
isCurrent && "font-medium text-text-primary",
|
|
193
|
+
!isCompleted && !isCurrent && "text-text-secondary"
|
|
194
|
+
),
|
|
195
|
+
children: step.label
|
|
196
|
+
}
|
|
197
|
+
)
|
|
198
|
+
]
|
|
199
|
+
},
|
|
200
|
+
step.id
|
|
201
|
+
);
|
|
202
|
+
}) }),
|
|
203
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-6 text-center text-xs text-text-secondary", children: "Cela peut prendre quelques instants, nous v\xE9rifions les meilleures disponibilit\xE9s pour vous et votre chien." })
|
|
204
|
+
] })
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
);
|
|
209
|
+
SearchLoadingChecklist.displayName = "SearchLoadingChecklist";
|
|
210
|
+
|
|
211
|
+
exports.SearchLoadingChecklist = SearchLoadingChecklist;
|
|
@@ -0,0 +1,156 @@
|
|
|
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
|
+
function CrownIcon({ className }) {
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
29
|
+
"svg",
|
|
30
|
+
{
|
|
31
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
32
|
+
width: "14",
|
|
33
|
+
height: "14",
|
|
34
|
+
viewBox: "0 0 24 24",
|
|
35
|
+
fill: "currentColor",
|
|
36
|
+
className,
|
|
37
|
+
"aria-hidden": "true",
|
|
38
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 16 3 6l5.5 4L12 5l3.5 5L21 6l-2 10H5Zm0 2h14v2H5v-2Z" })
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
function PawIcon({ className }) {
|
|
43
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
44
|
+
"svg",
|
|
45
|
+
{
|
|
46
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
47
|
+
width: "24",
|
|
48
|
+
height: "24",
|
|
49
|
+
viewBox: "0 0 24 24",
|
|
50
|
+
fill: "currentColor",
|
|
51
|
+
className,
|
|
52
|
+
"aria-hidden": "true",
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5.5", cy: "12.5", r: "2" }),
|
|
55
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9.5", cy: "7.5", r: "2" }),
|
|
56
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "14.5", cy: "7.5", r: "2" }),
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18.5", cy: "12.5", r: "2" }),
|
|
58
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11c-2.2 0-4 1.9-4 4.2 0 1.6 1.2 2.8 2.8 2.8.6 0 .9-.2 1.2-.2s.6.2 1.2.2c1.6 0 2.8-1.2 2.8-2.8C16 12.9 14.2 11 12 11Z" })
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
var INITIAL_COLORS = [
|
|
64
|
+
"bg-emerald-100 text-emerald-700",
|
|
65
|
+
"bg-amber-100 text-amber-700",
|
|
66
|
+
"bg-sky-100 text-sky-700",
|
|
67
|
+
"bg-violet-100 text-violet-700",
|
|
68
|
+
"bg-rose-100 text-rose-700"
|
|
69
|
+
];
|
|
70
|
+
function initialColor(name) {
|
|
71
|
+
let hash = 0;
|
|
72
|
+
for (let i = 0; i < name.length; i++) {
|
|
73
|
+
hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
|
74
|
+
}
|
|
75
|
+
return INITIAL_COLORS[Math.abs(hash) % INITIAL_COLORS.length];
|
|
76
|
+
}
|
|
77
|
+
function InfoChip({ children }) {
|
|
78
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center rounded-full bg-sand px-2.5 py-0.5 text-xs font-medium text-text-secondary", children });
|
|
79
|
+
}
|
|
80
|
+
var DogCard = React__namespace.forwardRef(
|
|
81
|
+
({ dog, actions, renderImage, renderLink, className, ...props }, ref) => {
|
|
82
|
+
const imageSrc = dog.photoUrl || dog.breedImageUrl || null;
|
|
83
|
+
const initial = dog.name.charAt(0).toUpperCase() || "?";
|
|
84
|
+
const chips = [
|
|
85
|
+
dog.sizeLabel,
|
|
86
|
+
dog.sexLabel,
|
|
87
|
+
dog.ageLabel,
|
|
88
|
+
dog.weightLabel,
|
|
89
|
+
dog.breed
|
|
90
|
+
].filter((v) => Boolean(v));
|
|
91
|
+
const media = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-[4/3] w-full overflow-hidden bg-sand", children: [
|
|
92
|
+
imageSrc ? renderImage ? renderImage({
|
|
93
|
+
src: imageSrc,
|
|
94
|
+
alt: dog.name,
|
|
95
|
+
className: "h-full w-full object-cover"
|
|
96
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
97
|
+
"img",
|
|
98
|
+
{
|
|
99
|
+
src: imageSrc,
|
|
100
|
+
alt: dog.name,
|
|
101
|
+
className: "h-full w-full object-cover"
|
|
102
|
+
}
|
|
103
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
104
|
+
"div",
|
|
105
|
+
{
|
|
106
|
+
className: chunkADIDI7AJ_js.cn(
|
|
107
|
+
"flex h-full w-full flex-col items-center justify-center gap-1",
|
|
108
|
+
initialColor(dog.name)
|
|
109
|
+
),
|
|
110
|
+
"aria-label": dog.name,
|
|
111
|
+
children: [
|
|
112
|
+
/* @__PURE__ */ jsxRuntime.jsx(PawIcon, { className: "h-7 w-7 opacity-50" }),
|
|
113
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold", children: initial })
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
),
|
|
117
|
+
dog.isPrimary && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded-full bg-secondary/95 px-2 py-1 text-[11px] font-semibold text-white shadow-sm", children: [
|
|
118
|
+
/* @__PURE__ */ jsxRuntime.jsx(CrownIcon, { className: "h-3 w-3" }),
|
|
119
|
+
"Principal"
|
|
120
|
+
] })
|
|
121
|
+
] });
|
|
122
|
+
const info = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col p-4", children: [
|
|
123
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate font-heading text-base font-semibold text-primary", children: dog.name }),
|
|
124
|
+
chips.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", children: chips.map((chip, i) => /* @__PURE__ */ jsxRuntime.jsx(InfoChip, { children: chip }, `${chip}-${i}`)) })
|
|
125
|
+
] });
|
|
126
|
+
const linkClassName = "group flex flex-1 flex-col rounded-t-xl transition-opacity hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
|
|
127
|
+
const linkLabel = `Voir le passeport de ${dog.name}`;
|
|
128
|
+
const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
129
|
+
media,
|
|
130
|
+
info
|
|
131
|
+
] });
|
|
132
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
ref,
|
|
136
|
+
className: chunkADIDI7AJ_js.cn(
|
|
137
|
+
"flex flex-col overflow-hidden rounded-xl border border-sand-dark bg-white transition-shadow hover:shadow-lg",
|
|
138
|
+
className
|
|
139
|
+
),
|
|
140
|
+
...props,
|
|
141
|
+
children: [
|
|
142
|
+
dog.href ? renderLink ? renderLink({
|
|
143
|
+
href: dog.href,
|
|
144
|
+
className: linkClassName,
|
|
145
|
+
children: body,
|
|
146
|
+
"aria-label": linkLabel
|
|
147
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: dog.href, className: linkClassName, "aria-label": linkLabel, children: body }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col", children: body }),
|
|
148
|
+
actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-1 border-t border-sand-dark px-3 py-2", children: actions })
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
DogCard.displayName = "DogCard";
|
|
155
|
+
|
|
156
|
+
exports.DogCard = DogCard;
|
|
@@ -128,13 +128,13 @@ function RateRow({
|
|
|
128
128
|
/* @__PURE__ */ jsx("span", { children: rate.dogFeeLabel })
|
|
129
129
|
] }),
|
|
130
130
|
hasDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
131
|
-
/* @__PURE__ */ jsxs(
|
|
131
|
+
/* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxs(
|
|
132
132
|
"button",
|
|
133
133
|
{
|
|
134
134
|
type: "button",
|
|
135
135
|
onClick: () => setShowDetails((v) => !v),
|
|
136
136
|
"aria-expanded": showDetails,
|
|
137
|
-
className: "
|
|
137
|
+
className: "inline-flex items-center gap-1 text-[12px] font-medium text-secondary",
|
|
138
138
|
children: [
|
|
139
139
|
/* @__PURE__ */ jsx(
|
|
140
140
|
ChevronDownIcon,
|
|
@@ -148,7 +148,7 @@ function RateRow({
|
|
|
148
148
|
showDetails ? "Masquer le d\xE9tail" : "Voir le d\xE9tail"
|
|
149
149
|
]
|
|
150
150
|
}
|
|
151
|
-
),
|
|
151
|
+
) }),
|
|
152
152
|
showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-lg bg-sand-light px-3 py-2.5", children: [
|
|
153
153
|
rate.details && rate.details.length > 0 && /* @__PURE__ */ jsx("dl", { className: "space-y-1.5", children: rate.details.map((d, i) => /* @__PURE__ */ jsxs("div", { className: "text-xs leading-snug", children: [
|
|
154
154
|
/* @__PURE__ */ jsx("dt", { className: "font-medium text-text-secondary", children: d.label }),
|
|
@@ -150,13 +150,13 @@ function RateRow({
|
|
|
150
150
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: rate.dogFeeLabel })
|
|
151
151
|
] }),
|
|
152
152
|
hasDetails && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
153
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
153
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
154
154
|
"button",
|
|
155
155
|
{
|
|
156
156
|
type: "button",
|
|
157
157
|
onClick: () => setShowDetails((v) => !v),
|
|
158
158
|
"aria-expanded": showDetails,
|
|
159
|
-
className: "
|
|
159
|
+
className: "inline-flex items-center gap-1 text-[12px] font-medium text-secondary",
|
|
160
160
|
children: [
|
|
161
161
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
162
162
|
ChevronDownIcon,
|
|
@@ -170,7 +170,7 @@ function RateRow({
|
|
|
170
170
|
showDetails ? "Masquer le d\xE9tail" : "Voir le d\xE9tail"
|
|
171
171
|
]
|
|
172
172
|
}
|
|
173
|
-
),
|
|
173
|
+
) }),
|
|
174
174
|
showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 rounded-lg bg-sand-light px-3 py-2.5", children: [
|
|
175
175
|
rate.details && rate.details.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "space-y-1.5", children: rate.details.map((d, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs leading-snug", children: [
|
|
176
176
|
/* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-medium text-text-secondary", children: d.label }),
|