dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
221 lines (220 loc) • 6.32 kB
JavaScript
import { j as d } from "./jsx-runtime-C5mzlN2N.js";
import * as l from "react";
import { c as g, P as F } from "./index-D_OzDH1f.js";
import { c as V } from "./index-Dmh__Tgi.js";
import { c as T, R as $, I as D } from "./index-CEqBZa7F.js";
import { P as m } from "./index-Do92jweN.js";
import { u as G } from "./index-Dz-GVg5i.js";
import { u as L, a as k } from "./index-rSIGk0ww.js";
import { c as K } from "./index-DJNxTvwd.js";
import { c as x } from "./utils-D0f6bOsw.js";
var p = "Tabs", [B, rt] = V(p, [
T
]), h = T(), [q, y] = B(p), N = l.forwardRef(
(t, e) => {
const {
__scopeTabs: r,
value: a,
onValueChange: n,
defaultValue: i,
orientation: o = "horizontal",
dir: u,
activationMode: b = "automatic",
...v
} = t, c = G(u), [s, f] = L({
prop: a,
onChange: n,
defaultProp: i ?? "",
caller: p
});
return /* @__PURE__ */ d.jsx(
q,
{
scope: r,
baseId: k(),
value: s,
onValueChange: f,
orientation: o,
dir: c,
activationMode: b,
children: /* @__PURE__ */ d.jsx(
m.div,
{
dir: c,
"data-orientation": o,
...v,
ref: e
}
)
}
);
}
);
N.displayName = p;
var C = "TabsList", I = l.forwardRef(
(t, e) => {
const { __scopeTabs: r, loop: a = !0, ...n } = t, i = y(C, r), o = h(r);
return /* @__PURE__ */ d.jsx(
$,
{
asChild: !0,
...o,
orientation: i.orientation,
dir: i.dir,
loop: a,
children: /* @__PURE__ */ d.jsx(
m.div,
{
role: "tablist",
"aria-orientation": i.orientation,
...n,
ref: e
}
)
}
);
}
);
I.displayName = C;
var R = "TabsTrigger", j = l.forwardRef(
(t, e) => {
const { __scopeTabs: r, value: a, disabled: n = !1, ...i } = t, o = y(R, r), u = h(r), b = A(o.baseId, a), v = P(o.baseId, a), c = a === o.value;
return /* @__PURE__ */ d.jsx(
D,
{
asChild: !0,
...u,
focusable: !n,
active: c,
children: /* @__PURE__ */ d.jsx(
m.button,
{
type: "button",
role: "tab",
"aria-selected": c,
"aria-controls": v,
"data-state": c ? "active" : "inactive",
"data-disabled": n ? "" : void 0,
disabled: n,
id: b,
...i,
ref: e,
onMouseDown: g(t.onMouseDown, (s) => {
!n && s.button === 0 && s.ctrlKey === !1 ? o.onValueChange(a) : s.preventDefault();
}),
onKeyDown: g(t.onKeyDown, (s) => {
[" ", "Enter"].includes(s.key) && o.onValueChange(a);
}),
onFocus: g(t.onFocus, () => {
const s = o.activationMode !== "manual";
!c && !n && s && o.onValueChange(a);
})
}
)
}
);
}
);
j.displayName = R;
var w = "TabsContent", _ = l.forwardRef(
(t, e) => {
const { __scopeTabs: r, value: a, forceMount: n, children: i, ...o } = t, u = y(w, r), b = A(u.baseId, a), v = P(u.baseId, a), c = a === u.value, s = l.useRef(c);
return l.useEffect(() => {
const f = requestAnimationFrame(() => s.current = !1);
return () => cancelAnimationFrame(f);
}, []), /* @__PURE__ */ d.jsx(F, { present: n || c, children: ({ present: f }) => /* @__PURE__ */ d.jsx(
m.div,
{
"data-state": c ? "active" : "inactive",
"data-orientation": u.orientation,
role: "tabpanel",
"aria-labelledby": b,
hidden: !f,
id: v,
tabIndex: 0,
...o,
ref: e,
style: {
...t.style,
animationDuration: s.current ? "0s" : void 0
},
children: f && i
}
) });
}
);
_.displayName = w;
function A(t, e) {
return `${t}-trigger-${e}`;
}
function P(t, e) {
return `${t}-content-${e}`;
}
var z = N, S = I, E = j, M = _;
const nt = z, H = K(
"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"
}
}
), O = l.forwardRef(({ className: t, rounded: e, variant: r, type: a, full: n, ...i }, o) => /* @__PURE__ */ d.jsx(
S,
{
ref: o,
className: x(
n && "!flex",
H({ rounded: e, variant: r, type: a, className: t })
),
...i
}
));
O.displayName = S.displayName;
const J = l.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ d.jsx(
E,
{
ref: r,
className: x(
"inline-flex h-7 flex-1 cursor-pointer box-border relative items-center justify-center whitespace-nowrap px-3 py-1 text-body-xs-medium 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"
),
...e
}
));
J.displayName = E.displayName;
const Q = l.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ d.jsx(
M,
{
ref: r,
className: x(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
t
),
...e
}
));
Q.displayName = M.displayName;
export {
nt as T,
O as a,
J as b,
Q as c
};