@kloudlite/design-system
Version:
A design system for building ambitious products.
218 lines (214 loc) • 6.81 kB
JavaScript
"use client";
// components/atoms/tabs.tsx
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
import React, {
forwardRef,
useId,
useState
} from "react";
// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
return classNames(...props);
};
// components/atoms/tabs.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var TabBase = ({
to = "",
label,
active = false,
fitted = false,
onClick = () => {
},
LinkComponent = "div",
variant = "plain",
size = "md",
prefix,
layoutId,
toLabel = "to"
}) => {
let Component = LinkComponent;
let tempToLabel = toLabel;
let extraProps = {};
if (to) {
if (LinkComponent === "div") {
Component = motion.a;
tempToLabel = "href";
} else {
Component = LinkComponent;
}
} else {
extraProps = {
role: "button"
};
}
const [hoverd, setHoverd] = useState(false);
return /* @__PURE__ */ jsxs(
"div",
{
onMouseEnter: () => {
setHoverd(true);
},
onMouseLeave: () => {
setHoverd(false);
},
className: cn(
"kl-outline-none kl-flex kl-flex-col kl-relative kl-group kl-bodyMd-medium kl-transition-all kl-cursor-pointer hover:kl-text-text-default active:kl-text-text-default",
{
"kl-text-text-default": active,
"kl-text-text-soft": !active,
"kl-rounded-lg hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed": variant === "filled"
// 'border border-transparent': variant === 'filled' && !active,
}
),
children: [
/* @__PURE__ */ jsx(
RovingFocusGroup.Item,
{
asChild: true,
focusable: true,
onKeyDown: (e) => {
if (["Enter", " "].includes(e.key)) {
onClick(e);
}
},
children: /* @__PURE__ */ jsxs(
Component,
{
...{ [tempToLabel]: to },
...extraProps,
onClick,
className: cn(
"kl-relative kl-z-10 kl-tab-item kl-outline-none",
"kl-ring-offset-0 focus-visible:kl-ring-border-focus focus-visible:kl-ring-2",
// 'focus-visible:shadow-focus',
{
...(!fitted || variant === "filled") && {
"kl-px-2xl kl-py-lg": size === "md",
"kl-px-lg kl-py-md": size === "sm",
"kl-rounded-lg": true
},
...fitted && {
"kl-py-md": variant !== "filled"
}
}
),
children: [
variant === "plain" && /* @__PURE__ */ jsx("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" }),
/* @__PURE__ */ jsxs("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-lg", children: [
!!prefix && React.cloneElement(prefix, { size: 16, color: "currentColor" }),
typeof label === "function" ? label(active) : label
] }),
active && variant === "plain" && /* @__PURE__ */ jsx(
motion.div,
{
layoutId: "underline",
className: cn(
"kl-h-md kl-z-10 kl-absolute kl-left-0 kl-bottom-0 kl-w-full kl-bg-border-primary"
)
}
),
variant === "plain" && hoverd && /* @__PURE__ */ jsx(
motion.div,
{
layoutId: "hoverd-underline",
className: "kl-h-md kl-bg-none kl-absolute kl-bottom-0 kl-w-full kl-z-0 kl-left-0 kl-bg-border-default group-active:kl-bg-border-tertiary"
}
),
variant === "plain" && /* @__PURE__ */ jsx("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" })
]
}
)
}
),
/* @__PURE__ */ jsx(AnimatePresence, { children: variant === "filled" && active && /* @__PURE__ */ jsx(
motion.div,
{
layoutId,
className: "kl-absolute kl-inset-0 kl-rounded-lg kl-shadow-button kl-border kl-border-border-default kl-bg-surface-basic-default",
transition: { type: "spring", bounce: 0.1, duration: 0.3 }
}
) })
]
}
);
};
var Tab = ({ to, label, prefix, value: _ }) => /* @__PURE__ */ jsx(TabBase, { to, label, prefix, layoutId: "" });
var Root2 = forwardRef(
({
variant = "plain",
size = "md",
fitted = false,
onChange = () => {
},
value,
LinkComponent,
className = "",
basePath = "",
children,
toLabel
}, ref) => {
const id = useId();
return /* @__PURE__ */ jsx(
RovingFocusGroup.Root,
{
orientation: "horizontal",
loop: true,
className: cn(
"kl-flex kl-flex-row kl-items-center kl-transition-all",
"kl-snap-x",
{
"md:kl-gap-4xl": size === "md" && variant !== "filled",
"kl-gap-lg": size === "sm" || variant === "filled"
},
className
),
ref,
asChild: true,
children: /* @__PURE__ */ jsx(motion.div, { layout: true, layoutRoot: true, children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: React.Children.map(children, (child) => {
if (!child) {
throw Error("Tab child is required");
}
const tabChild = child;
const tabChildProps = tabChild.props;
return /* @__PURE__ */ jsx(
"div",
{
className: cn("kl-snap-start", {
"kl-px-xl md:kl-px-0": variant === "plain"
}),
children: /* @__PURE__ */ jsx(
TabBase,
{
...tabChildProps,
onClick: () => {
onChange?.(tabChildProps.value);
},
layoutId: id,
fitted,
to: basePath + (tabChildProps.to || ""),
active: value === tabChildProps.value,
LinkComponent,
variant,
size,
toLabel
}
)
}
);
}) }) })
}
);
}
);
var Tabs = {
Tab,
Root: Root2
};
var tabs_default = Tabs;
export {
tabs_default as default
};