@kloudlite/design-system
Version:
A design system for building ambitious products.
244 lines (240 loc) • 8.96 kB
JavaScript
;
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// components/atoms/tabs.tsx
var tabs_exports = {};
__export(tabs_exports, {
default: () => tabs_default
});
module.exports = __toCommonJS(tabs_exports);
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"), 1);
var import_framer_motion = require("framer-motion");
var import_react2 = __toESM(require("react"), 1);
// components/utils.tsx
var import_classnames = __toESM(require("classnames"), 1);
var import_react = require("react");
var import_uuid = require("uuid");
var cn = (...props) => {
return (0, import_classnames.default)(...props);
};
// components/atoms/tabs.tsx
var import_jsx_runtime = require("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 = import_framer_motion.motion.a;
tempToLabel = "href";
} else {
Component = LinkComponent;
}
} else {
extraProps = {
role: "button"
};
}
const [hoverd, setHoverd] = (0, import_react2.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
RovingFocusGroup.Item,
{
asChild: true,
focusable: true,
onKeyDown: (e) => {
if (["Enter", " "].includes(e.key)) {
onClick(e);
}
},
children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-lg", children: [
!!prefix && import_react2.default.cloneElement(prefix, { size: 16, color: "currentColor" }),
typeof label === "function" ? label(active) : label
] }),
active && variant === "plain" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_framer_motion.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__ */ (0, import_jsx_runtime.jsx)(
import_framer_motion.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "kl-h-md kl-bg-none kl-w-full kl-z-0" })
]
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: variant === "filled" && active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_framer_motion.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__ */ (0, import_jsx_runtime.jsx)(TabBase, { to, label, prefix, layoutId: "" });
var Root2 = (0, import_react2.forwardRef)(
({
variant = "plain",
size = "md",
fitted = false,
onChange = () => {
},
value,
LinkComponent,
className = "",
basePath = "",
children,
toLabel
}, ref) => {
const id = (0, import_react2.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { layout: true, layoutRoot: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LayoutGroup, { id, children: import_react2.default.Children.map(children, (child) => {
if (!child) {
throw Error("Tab child is required");
}
const tabChild = child;
const tabChildProps = tabChild.props;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: cn("kl-snap-start", {
"kl-px-xl md:kl-px-0": variant === "plain"
}),
children: /* @__PURE__ */ (0, import_jsx_runtime.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;