laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
123 lines (122 loc) • 3.31 kB
JavaScript
"use client";
import { jsx as i, jsxs as N } from "react/jsx-runtime";
import * as s from "react";
import { motion as l } from "framer-motion";
import { cn as r } from "../../lib/utils.js";
const x = {
container: {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -20 }
}
};
function V({
value: a = 1,
onChange: t,
min: p = 1,
max: b = 4,
className: v,
buttonClassName: d,
counterClassName: y
}) {
const [e, o] = s.useState(a), [u, m] = s.useState(!1);
s.useEffect(() => {
o(a);
}, [a]);
const g = (c) => {
if (c.preventDefault(), e < b) {
const n = e + 1;
o(n), t == null || t(n);
} else
f();
}, h = (c) => {
if (c.preventDefault(), e > p) {
const n = e - 1;
o(n), t == null || t(n);
} else
f();
}, f = () => {
m(!0), setTimeout(() => m(!1), 300);
};
return /* @__PURE__ */ i(
l.div,
{
"data-slot": "input-selector",
variants: x.container,
initial: "initial",
animate: "animate",
exit: "exit",
className: r(
"flex w-full flex-col items-center justify-center gap-8",
v
),
children: /* @__PURE__ */ N(
l.div,
{
variants: u ? {
initial: { x: 0 },
vibrate: {
x: [0, -5, 5, -5, 5, 0],
transition: { duration: 0.3 }
}
} : void 0,
initial: "initial",
animate: u ? "vibrate" : "initial",
className: "flex items-center gap-8",
children: [
/* @__PURE__ */ i(
"button",
{
type: "button",
onClick: h,
className: r(
"h-12 w-12 rounded-full border",
"bg-d-background",
"hover:bg-d-accent hover:text-d-accent-foreground",
"text-d-foreground cursor-pointer",
"flex items-center justify-center",
d
),
children: /* @__PURE__ */ i("span", { className: "text-2xl font-medium", children: "-" })
}
),
/* @__PURE__ */ i(
l.span,
{
variants: x.container,
initial: "initial",
animate: "animate",
exit: "exit",
className: r(
"text-d-foreground dark:text-d-foreground text-2xl font-medium",
y
),
children: e
},
e
),
/* @__PURE__ */ i(
"button",
{
type: "button",
onClick: g,
className: r(
"h-12 w-12 rounded-full border",
"bg-d-background",
"hover:bg-d-accent hover:text-d-accent-foreground",
"text-d-foreground cursor-pointer",
"flex items-center justify-center",
d
),
children: /* @__PURE__ */ i("span", { className: "text-2xl font-medium", children: "+" })
}
)
]
}
)
}
);
}
export {
V as InputSelector
};