@kloudlite/design-system/mjs/organisms/side-bar.js

A design system for building ambitious products.

// components/organisms/side-bar.tsx
import {
  Children,
  cloneElement,
  isValidElement,
  useState
} from "react";
import { AnimatePresence, motion } from "framer-motion";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/organisms/side-bar.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var Item = ({
  children,
  active,
  icon,
  to,
  ...props
}) => {
  const { linkComponent: LinkComponent = "div", toLabel = "href" } = props;
  let p = {};
  if (LinkComponent !== "div") {
    p = {
      [toLabel]: to
    };
  }
  return /* @__PURE__ */ jsxs(
    LinkComponent,
    {
      ...p,
      className: cn(
        "kl-cursor-pointer kl-px-3xl kl-py-[10px] kl-min-h-[40px] kl-bodyMd kl-text-text-default hover:kl-bg-surface-basic-hovered kl-flex kl-flex-row kl-items-center kl-gap-lg kl-flex-shrink-0",
        active ? "kl-bg-surface-basic-pressed" : ""
      ),
      children: [
        /* @__PURE__ */ jsx("span", { children: icon && cloneElement(icon, {
          size: 16
        }) }),
        /* @__PURE__ */ jsx(motion.div, { className: "kl-overflow-hidden", children })
      ]
    }
  );
};
var Separator = () => {
  return /* @__PURE__ */ jsx("div", { className: "kl-bg-border-default kl-h-xs kl-w-full" });
};
var Header = ({ children }) => {
  return /* @__PURE__ */ jsx("div", { className: "kl-h-[60px] kl-p-2xl kl-border-b kl-border-b-border-default kl-flex kl-flex-row kl-items-center kl-gap-lg", children });
};
var Root = ({
  children,
  onCollapseChange,
  linkComponent = "div",
  toLabel = "href"
}) => {
  const topIcon = {
    open: {
      rotate: 20,
      height: 9,
      marginBottom: -1
    },
    close: {
      rotate: -20,
      height: 9,
      marginBottom: -1
    }
  };
  const bottomIcon = {
    open: {
      rotate: -20,
      height: 9,
      marginTop: -1
    },
    close: {
      rotate: 20,
      height: 9,
      marginTop: -1
    }
  };
  const panelVariants = {
    open: {
      width: 260
    },
    close: {
      width: 57
    }
  };
  const [open, setOpen] = useState(true);
  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxs(
    motion.div,
    {
      animate: open ? "open" : "close",
      variants: panelVariants,
      onAnimationComplete: (e) => {
        onCollapseChange?.({ type: "end", value: e });
      },
      onAnimationStart: (e) => {
        onCollapseChange?.({ type: "start", value: e });
      },
      className: cn(
        "kl-min-h-screen kl-max-h-screen kl-flex kl-flex-col kl-bg-surface-basic-active kl-border-r kl-border-r-border-default kl-sticky kl-top-0 kl-flex-shrink-0"
      ),
      children: [
        Children.map(children, (child) => {
          if (!isValidElement(child))
            return child;
          const c = child;
          return cloneElement(c, { collapsed: open, linkComponent, toLabel });
        }),
        /* @__PURE__ */ jsx(
          "div",
          {
            onClick: () => {
              setOpen((prev) => !prev);
            },
            className: "kl-absolute -kl-right-4xl kl-top-1/2 kl-transform -kl-translate-y-1/2  kl-text-icon-soft kl-w-4xl kl-flex kl-items-center kl-justify-center kl-cursor-pointer",
            children: /* @__PURE__ */ jsxs(
              motion.div,
              {
                whileHover: open ? "open" : "close",
                className: "kl-flex kl-flex-col kl-h-2xl kl-w-full kl-items-center",
                children: [
                  /* @__PURE__ */ jsx(
                    motion.div,
                    {
                      variants: topIcon,
                      className: "kl-w-sm kl-bg-icon-soft kl-h-lg kl-rounded-full !kl-rounded-b-none"
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    motion.div,
                    {
                      variants: bottomIcon,
                      className: "kl-w-sm kl-bg-icon-soft kl-h-lg kl-rounded-full !kl-rounded-t-none"
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  ) });
};
var Sidebar = {
  Root,
  Item,
  Header,
  Separator
};
var side_bar_default = Sidebar;
export {
  side_bar_default as default
};