dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
319 lines (318 loc) • 9.09 kB
JavaScript
import { j as e } from "./jsx-runtime-C5mzlN2N.js";
import * as v from "react";
import { forwardRef as w, useRef as O, useState as N, useCallback as q, useEffect as H } from "react";
import { c as y, P as J } from "./index-D_OzDH1f.js";
import { c as Q } from "./index-Dmh__Tgi.js";
import { c as S, R as U, I as X } from "./index-CCcvTltk.js";
import { P as g } from "./index-Do92jweN.js";
import { u as Y } from "./index-Dz-GVg5i.js";
import { u as Z, a as tt } from "./index-rSIGk0ww.js";
import { c as et } from "./index-BhbquNdX.js";
import { B as j } from "./button-Bp2lHjov.js";
import { c as b } from "./utils-B6fNqzRf.js";
import { C as at } from "./chevron-left-CQZFYxtY.js";
import { C as ot } from "./chevron-right-HWBijj-I.js";
var x = "Tabs", [rt, Ct] = Q(x, [
S
]), I = S(), [nt, C] = rt(x), L = v.forwardRef(
(t, a) => {
const {
__scopeTabs: n,
value: o,
onValueChange: i,
defaultValue: s,
orientation: r = "horizontal",
dir: u,
activationMode: m = "automatic",
...d
} = t, c = Y(u), [l, f] = Z({
prop: o,
onChange: i,
defaultProp: s ?? "",
caller: x
});
return /* @__PURE__ */ e.jsx(
nt,
{
scope: n,
baseId: tt(),
value: l,
onValueChange: f,
orientation: r,
dir: c,
activationMode: m,
children: /* @__PURE__ */ e.jsx(
g.div,
{
dir: c,
"data-orientation": r,
...d,
ref: a
}
)
}
);
}
);
L.displayName = x;
var E = "TabsList", _ = v.forwardRef(
(t, a) => {
const { __scopeTabs: n, loop: o = !0, ...i } = t, s = C(E, n), r = I(n);
return /* @__PURE__ */ e.jsx(
U,
{
asChild: !0,
...r,
orientation: s.orientation,
dir: s.dir,
loop: o,
children: /* @__PURE__ */ e.jsx(
g.div,
{
role: "tablist",
"aria-orientation": s.orientation,
...i,
ref: a
}
)
}
);
}
);
_.displayName = E;
var A = "TabsTrigger", P = v.forwardRef(
(t, a) => {
const { __scopeTabs: n, value: o, disabled: i = !1, ...s } = t, r = C(A, n), u = I(n), m = M(r.baseId, o), d = z(r.baseId, o), c = o === r.value;
return /* @__PURE__ */ e.jsx(
X,
{
asChild: !0,
...u,
focusable: !i,
active: c,
children: /* @__PURE__ */ e.jsx(
g.button,
{
type: "button",
role: "tab",
"aria-selected": c,
"aria-controls": d,
"data-state": c ? "active" : "inactive",
"data-disabled": i ? "" : void 0,
disabled: i,
id: m,
...s,
ref: a,
onMouseDown: y(t.onMouseDown, (l) => {
!i && l.button === 0 && l.ctrlKey === !1 ? r.onValueChange(o) : l.preventDefault();
}),
onKeyDown: y(t.onKeyDown, (l) => {
[" ", "Enter"].includes(l.key) && r.onValueChange(o);
}),
onFocus: y(t.onFocus, () => {
const l = r.activationMode !== "manual";
!c && !i && l && r.onValueChange(o);
})
}
)
}
);
}
);
P.displayName = A;
var k = "TabsContent", B = v.forwardRef(
(t, a) => {
const { __scopeTabs: n, value: o, forceMount: i, children: s, ...r } = t, u = C(k, n), m = M(u.baseId, o), d = z(u.baseId, o), c = o === u.value, l = v.useRef(c);
return v.useEffect(() => {
const f = requestAnimationFrame(() => l.current = !1);
return () => cancelAnimationFrame(f);
}, []), /* @__PURE__ */ e.jsx(J, { present: i || c, children: ({ present: f }) => /* @__PURE__ */ e.jsx(
g.div,
{
"data-state": c ? "active" : "inactive",
"data-orientation": u.orientation,
role: "tabpanel",
"aria-labelledby": m,
hidden: !f,
id: d,
tabIndex: 0,
...r,
ref: a,
style: {
...t.style,
animationDuration: l.current ? "0s" : void 0
},
children: f && s
}
) });
}
);
B.displayName = k;
function M(t, a) {
return `${t}-trigger-${a}`;
}
function z(t, a) {
return `${t}-content-${a}`;
}
var st = L, T = _, F = P, V = B;
const Nt = st, R = et(
"inline-flex items-center justify-center gap-1 p-1 text-secondary",
{
variants: {
type: {
default: "",
segmented: "bg-item-tertiary [&>button]:data-[state=active]:shadow-sm",
line: "[&>button]:data-[state=active]:after:absolute [&>button]:data-[state=active]:after:-bottom-1.5 [&>button]:data-[state=active]:after:content-[''] [&>button]:data-[state=active]:after:w-full [&>button]:data-[state=active]:after:h-0.5 [&>button]:data-[state=active]:after:bg-primary"
},
variant: {
default: "[&>button]:data-[state=active]:bg-background",
soft: "[&>button]:data-[state=active]:bg-item-tertiary [&>button]:data-[state=active]:border [&>button]:data-[state=active]:border-alpha-strong"
},
rounded: {
default: "rounded-md [&>button]:rounded-md",
pill: "rounded-full [&>button]:rounded-full"
}
},
defaultVariants: {
type: "default",
variant: "default",
rounded: "default"
}
}
), it = w(
({
className: t,
rounded: a,
variant: n,
type: o,
full: i,
scrollable: s,
scrollButtonClassName: r,
...u
}, m) => {
const d = O(null), [c, l] = N(!1), [f, $] = N(!1), h = q(() => {
if (d.current && s) {
const { scrollLeft: p, scrollWidth: K, clientWidth: W } = d.current;
l(p > 0), $(p < K - W - 1);
}
}, [s]);
H(() => {
if (s) {
h();
const p = () => h();
return window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
}
}, [h, s]);
const D = () => {
d.current && d.current.scrollBy({ left: -200, behavior: "smooth" });
}, G = () => {
d.current && d.current.scrollBy({ left: 200, behavior: "smooth" });
};
return s ? /* @__PURE__ */ e.jsxs("div", { className: "relative flex items-center", children: [
c && /* @__PURE__ */ e.jsx(
j,
{
type: "button",
size: "icon",
variant: "secondary",
onClick: D,
className: b(
"absolute left-0 z-10 h-full w-6",
r
),
"aria-label": "Scroll left",
children: /* @__PURE__ */ e.jsx(at, { className: "text-secondary h-4 w-4" })
}
),
/* @__PURE__ */ e.jsx(
"div",
{
ref: d,
className: "scrollbar-hide overflow-x-auto scroll-smooth",
style: {
scrollbarWidth: "none",
msOverflowStyle: "none",
paddingLeft: c ? "32px" : "0",
paddingRight: f ? "32px" : "0"
},
onScroll: h,
children: /* @__PURE__ */ e.jsx(
T,
{
ref: m,
className: b(
i && "!flex",
"min-w-max",
R({ rounded: a, variant: n, type: o, className: t })
),
...u
}
)
}
),
f && /* @__PURE__ */ e.jsx(
j,
{
type: "button",
size: "icon",
variant: "secondary",
onClick: G,
className: b(
"absolute right-0 z-10 h-full w-6",
r
),
"aria-label": "Scroll right",
children: /* @__PURE__ */ e.jsx(ot, { className: "text-secondary size-4" })
}
),
/* @__PURE__ */ e.jsx("style", { children: `
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
` })
] }) : /* @__PURE__ */ e.jsx(
T,
{
ref: m,
className: b(
i && "!flex",
R({ rounded: a, variant: n, type: o, className: t })
),
...u
}
);
}
);
it.displayName = T.displayName;
const ct = w(({ className: t, ...a }, n) => /* @__PURE__ */ e.jsx(
F,
{
ref: n,
className: b(
"text-body-xs-medium relative box-border inline-flex h-7 flex-1 cursor-pointer items-center justify-center px-3 py-1 whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
"data-[state=inactive]:hover:!bg-item-tertiary-hover data-[state=inactive]:hover:text-primary",
"data-[state=active]:text-primary",
t
),
...a
}
));
ct.displayName = F.displayName;
const lt = w(({ className: t, ...a }, n) => /* @__PURE__ */ e.jsx(
V,
{
ref: n,
className: b(
"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
t
),
...a
}
));
lt.displayName = V.displayName;
export {
Nt as T,
it as a,
ct as b,
lt as c
};