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 t, jsxs as N } from "react/jsx-runtime";
import * as c from "react";
import { motion as s } from "framer-motion";
import { cn as i } 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: r = 1,
onChange: l,
min: p = 1,
max: b = 4,
className: g,
buttonClassName: d,
counterClassName: h
}) {
const [e, a] = c.useState(r), [u, m] = c.useState(!1);
c.useEffect(() => {
a(r);
}, [r]);
const v = (o) => {
if (o.preventDefault(), e < b) {
const n = e + 1;
a(n), l?.(n);
} else
f();
}, y = (o) => {
if (o.preventDefault(), e > p) {
const n = e - 1;
a(n), l?.(n);
} else
f();
}, f = () => {
m(!0), setTimeout(() => m(!1), 300);
};
return /* @__PURE__ */ t(
s.div,
{
"data-slot": "input-selector",
variants: x.container,
initial: "initial",
animate: "animate",
exit: "exit",
className: i(
"flex w-full flex-col items-center justify-center gap-8",
g
),
children: /* @__PURE__ */ N(
s.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__ */ t(
"button",
{
type: "button",
onClick: y,
className: i(
"border-d-border h-12 w-12 rounded-full",
"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__ */ t("span", { className: "text-2xl font-medium", children: "-" })
}
),
/* @__PURE__ */ t(
s.span,
{
variants: x.container,
initial: "initial",
animate: "animate",
exit: "exit",
className: i(
"text-d-foreground dark:text-d-foreground text-2xl font-medium",
h
),
children: e
},
e
),
/* @__PURE__ */ t(
"button",
{
type: "button",
onClick: v,
className: i(
"border-d-border 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__ */ t("span", { className: "text-2xl font-medium", children: "+" })
}
)
]
}
)
}
);
}
export {
V as InputSelector
};