dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
318 lines (317 loc) • 9.01 kB
JavaScript
import { jsx as a, jsxs as O } from "react/jsx-runtime";
import * as m from "react";
import { forwardRef as w, useRef as q, useState as N, useCallback as H, useEffect as J } from "react";
import { P as g, a as Q, c as T, b as U } from "./index-BVqmUhu5.es.js";
import { R as X, I as Y, c as I } from "./index-DNQZbZsM.es.js";
import { u as Z } from "./index-DBXFJW5M.es.js";
import { u as tt, a as et } from "./index-BdfbDt7y.es.js";
import { c as at } from "./index-xA4mlFw5.es.js";
import { c as v } from "./utils-CnvKSirc.es.js";
import { B as R } from "./button-DTRIYqDb.es.js";
import { C as ot } from "./chevron-left-CfOUdNQ0.es.js";
import { C as rt } from "./chevron-right-BNG-Ugyb.es.js";
var y = "Tabs", [nt] = U(y, [
I
]), L = I(), [st, C] = nt(y), _ = m.forwardRef(
(t, e) => {
const {
__scopeTabs: n,
value: o,
onValueChange: i,
defaultValue: s,
orientation: r = "horizontal",
dir: u,
activationMode: b = "automatic",
...d
} = t, c = Z(u), [l, f] = tt({
prop: o,
onChange: i,
defaultProp: s ?? "",
caller: y
});
return /* @__PURE__ */ a(
st,
{
scope: n,
baseId: et(),
value: l,
onValueChange: f,
orientation: r,
dir: c,
activationMode: b,
children: /* @__PURE__ */ a(
g.div,
{
dir: c,
"data-orientation": r,
...d,
ref: e
}
)
}
);
}
);
_.displayName = y;
var A = "TabsList", E = m.forwardRef(
(t, e) => {
const { __scopeTabs: n, loop: o = !0, ...i } = t, s = C(A, n), r = L(n);
return /* @__PURE__ */ a(
X,
{
asChild: !0,
...r,
orientation: s.orientation,
dir: s.dir,
loop: o,
children: /* @__PURE__ */ a(
g.div,
{
role: "tablist",
"aria-orientation": s.orientation,
...i,
ref: e
}
)
}
);
}
);
E.displayName = A;
var P = "TabsTrigger", k = m.forwardRef(
(t, e) => {
const { __scopeTabs: n, value: o, disabled: i = !1, ...s } = t, r = C(P, n), u = L(n), b = z(r.baseId, o), d = F(r.baseId, o), c = o === r.value;
return /* @__PURE__ */ a(
Y,
{
asChild: !0,
...u,
focusable: !i,
active: c,
children: /* @__PURE__ */ a(
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: b,
...s,
ref: e,
onMouseDown: T(t.onMouseDown, (l) => {
!i && l.button === 0 && l.ctrlKey === !1 ? r.onValueChange(o) : l.preventDefault();
}),
onKeyDown: T(t.onKeyDown, (l) => {
[" ", "Enter"].includes(l.key) && r.onValueChange(o);
}),
onFocus: T(t.onFocus, () => {
const l = r.activationMode !== "manual";
!c && !i && l && r.onValueChange(o);
})
}
)
}
);
}
);
k.displayName = P;
var B = "TabsContent", M = m.forwardRef(
(t, e) => {
const { __scopeTabs: n, value: o, forceMount: i, children: s, ...r } = t, u = C(B, n), b = z(u.baseId, o), d = F(u.baseId, o), c = o === u.value, l = m.useRef(c);
return m.useEffect(() => {
const f = requestAnimationFrame(() => l.current = !1);
return () => cancelAnimationFrame(f);
}, []), /* @__PURE__ */ a(Q, { present: i || c, children: ({ present: f }) => /* @__PURE__ */ a(
g.div,
{
"data-state": c ? "active" : "inactive",
"data-orientation": u.orientation,
role: "tabpanel",
"aria-labelledby": b,
hidden: !f,
id: d,
tabIndex: 0,
...r,
ref: e,
style: {
...t.style,
animationDuration: l.current ? "0s" : void 0
},
children: f && s
}
) });
}
);
M.displayName = B;
function z(t, e) {
return `${t}-trigger-${e}`;
}
function F(t, e) {
return `${t}-content-${e}`;
}
var it = _, x = E, V = k, $ = M;
const wt = it, S = at(
"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"
}
}
), ct = w(
({
className: t,
rounded: e,
variant: n,
type: o,
full: i,
scrollable: s,
scrollButtonClassName: r,
...u
}, b) => {
const d = q(null), [c, l] = N(!1), [f, D] = N(!1), h = H(() => {
if (d.current && s) {
const { scrollLeft: p, scrollWidth: K, clientWidth: W } = d.current;
l(p > 0), D(p < K - W - 1);
}
}, [s]);
J(() => {
if (s) {
h();
const p = () => h();
return window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
}
}, [h, s]);
const G = () => {
d.current && d.current.scrollBy({ left: -200, behavior: "smooth" });
}, j = () => {
d.current && d.current.scrollBy({ left: 200, behavior: "smooth" });
};
return s ? /* @__PURE__ */ O("div", { className: "relative flex items-center", children: [
c && /* @__PURE__ */ a(
R,
{
type: "button",
size: "icon",
variant: "secondary",
onClick: G,
className: v(
"absolute left-0 z-10 h-full w-6",
r
),
"aria-label": "Scroll left",
children: /* @__PURE__ */ a(ot, { className: "text-secondary h-4 w-4" })
}
),
/* @__PURE__ */ a(
"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__ */ a(
x,
{
ref: b,
className: v(
i && "!flex",
"min-w-max",
S({ rounded: e, variant: n, type: o, className: t })
),
...u
}
)
}
),
f && /* @__PURE__ */ a(
R,
{
type: "button",
size: "icon",
variant: "secondary",
onClick: j,
className: v(
"absolute right-0 z-10 h-full w-6",
r
),
"aria-label": "Scroll right",
children: /* @__PURE__ */ a(rt, { className: "text-secondary size-4" })
}
),
/* @__PURE__ */ a("style", { children: `
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
` })
] }) : /* @__PURE__ */ a(
x,
{
ref: b,
className: v(
i && "!flex",
S({ rounded: e, variant: n, type: o, className: t })
),
...u
}
);
}
);
ct.displayName = x.displayName;
const lt = w(({ className: t, ...e }, n) => /* @__PURE__ */ a(
V,
{
ref: n,
className: v(
"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
),
...e
}
));
lt.displayName = V.displayName;
const dt = w(({ className: t, ...e }, n) => /* @__PURE__ */ a(
$,
{
ref: n,
className: v(
"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
t
),
...e
}
));
dt.displayName = $.displayName;
export {
wt as T,
dt as a,
ct as b,
lt as c
};
//# sourceMappingURL=tabs-BnamvF0S.es.js.map