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