@marskat/skeui/dist/index.cjs

A React component library for skeuomorphic aesthetics

"use strict";
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);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  Button: () => Button,
  Card: () => Card,
  Carousel: () => Carousel,
  NavBar: () => NavBar,
  SearchBar: () => SearchBar,
  Toggle: () => Toggle
});
module.exports = __toCommonJS(index_exports);

// src/components/Button/Button.tsx
var import_classnames = __toESM(require("classnames"), 1);

// src/hooks/useIsButtonActive.tsx
var import_react = require("react");
function useIsButtonActive() {
  const [isActive, setIsActive] = (0, import_react.useState)(false);
  const handlePointerDown = (0, import_react.useCallback)(() => setIsActive(true), []);
  const handlePointerUp = (0, import_react.useCallback)(() => setIsActive(false), []);
  const handlePointerLeave = (0, import_react.useCallback)(() => setIsActive(false), []);
  const handleKeyDown = (0, import_react.useCallback)((e) => {
    if (e.key === " " || e.key === "Enter") setIsActive(true);
  }, []);
  const handleKeyUp = (0, import_react.useCallback)((e) => {
    if (e.key === " " || e.key === "Enter") setIsActive(false);
  }, []);
  const handleBlur = (0, import_react.useCallback)(() => setIsActive(false), []);
  return [
    isActive,
    {
      onPointerDown: handlePointerDown,
      onPointerUp: handlePointerUp,
      onPointerLeave: handlePointerLeave,
      onKeyDown: handleKeyDown,
      onKeyUp: handleKeyUp,
      onBlur: handleBlur
    }
  ];
}

// src/hooks/useIsButtonHover.tsx
var import_react2 = require("react");
function useIsButtonHover() {
  const [isHover, setIsHover] = (0, import_react2.useState)(false);
  const handleMouseEnter = (0, import_react2.useCallback)(() => setIsHover(true), []);
  const handleMouseLeave = (0, import_react2.useCallback)(() => setIsHover(false), []);
  const handleBlur = (0, import_react2.useCallback)(() => setIsHover(false), []);
  return [
    isHover,
    {
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      onBlur: handleBlur
    }
  ];
}

// src/components/Button/Button.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Button = ({
  children,
  className,
  aesthetic = "neumorphic",
  isDarkMode = false,
  ...props
}) => {
  const [isActive, eventHandlers] = useIsButtonActive();
  const [isHover, hoverEventHandlers] = useIsButtonHover();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "skeui", children: [
    aesthetic === "neumorphic" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        className: (0, import_classnames.default)(
          !isActive ? isDarkMode ? "before:skeui-nm-outside-highlight-dark" : "before:skeui-nm-outside-highlight" : "",
          "before:skeui-rounded-full before:skeui-block before:skeui-absolute before:skeui-inset-0 before:skeui-content-[''] skeui-inline-block skeui-size-fit skeui-relative skeui-pointer-events-none"
        ),
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "div",
          {
            className: (0, import_classnames.default)(
              isActive ? "before:skeui-nm-inside-shadow" : isDarkMode ? "before:skeui-nm-outside-shadow-dark" : "before:skeui-nm-outside-shadow",
              "before:skeui-rounded-full before:skeui-block before:skeui-absolute before:skeui-inset-0 before:skeui-content-[''] before:skeui-z-10",
              "skeui-inline-block skeui-size-fit skeui-relative skeui-pointer-events-none"
            ),
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              "button",
              {
                ...props,
                ...eventHandlers,
                ...hoverEventHandlers,
                className: (0, import_classnames.default)(
                  "skeui-size-fit skeui-p-2 skeui-rounded-full skeui-cursor-pointer skeui-pointer-events-auto skeui-relative skeui-z-0 skeui-hard-transition",
                  { "skeui-brightness-95": isHover },
                  // TODO: use isHover to do better styling
                  className
                ),
                children
              }
            )
          }
        )
      }
    ),
    aesthetic === "glassmorphic" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        className: (0, import_classnames.default)(
          "before:skeui-gp-outside-shadow before:skeui-rounded-full before:skeui-block before:skeui-absolute before:skeui-inset-0 before:skeui-content-[''] before:skeui-z-10 before:skeui-hard-transition",
          "skeui-inline-block skeui-size-fit skeui-relative skeui-pointer-events-none skeui-hard-transition",
          `${isActive ? "skeui-translate-y-[0.05rem] before:skeui-gp-outside-shadow-intense" : "hover:-skeui-translate-y-[0.05rem] before:skeui-gp-outside-shadow-faint"}`
        ),
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "button",
          {
            ...props,
            ...eventHandlers,
            ...hoverEventHandlers,
            className: (0, import_classnames.default)(
              `skeui-backdrop-blur-2xl skeui-hard-transition skeui-gp-inside-shadow skeui-size-fit skeui-overflow-clip skeui-rounded-full skeui-cursor-pointer skeui-pointer-events-auto skeui-relative`,
              className
            ),
            children
          }
        )
      }
    )
  ] });
};

// src/components/Card/card.tsx
var import_classnames2 = __toESM(require("classnames"), 1);
var import_jsx_runtime2 = require("react/jsx-runtime");
var Card = ({
  children,
  className,
  inset = false,
  isDarkMode = false,
  fullyRounded = false,
  aesthetic = "glassmorphic",
  ...props
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "skeui skeui-size-full", children: [
    aesthetic === "glassmorphic" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
      "div",
      {
        className: (0, import_classnames2.default)(
          "skeui-backdrop-blur-2xl skeui-soft-transition skeui-gp-inside-shadow skeui-size-full skeui-relative",
          className
        ),
        ...props,
        children: [
          children,
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
            "div",
            {
              className: (0, import_classnames2.default)(
                "skeui-size-full skeui-absolute skeui-top-0 skeui-left-0 skeui-mt-0.5 skeui-ml-0.5 skeui-opacity-10",
                className
              ),
              ...props,
              children
            }
          )
        ]
      }
    ),
    aesthetic === "neumorphic" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
      !inset && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
        "div",
        {
          className: (0, import_classnames2.default)(
            "before:skeui-block before:skeui-absolute before:skeui-inset-0 before:skeui-content-[''] skeui-inline-block skeui-size-full skeui-relative skeui-pointer-events-none",
            `${fullyRounded ? "before:skeui-rounded-t-full before:skeui-rounded-b-full" : "before:skeui-rounded-t before:skeui-rounded-b"}`,
            `${isDarkMode ? "before:skeui-nm-outside-shadow-dark" : "before:skeui-nm-outside-shadow"}`,
            className
          ),
          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
            "div",
            {
              className: (0, import_classnames2.default)(
                "before:skeui-nm-outside-highlight before:skeui-block before:skeui-absolute before:skeui-inset-0 before:skeui-content-[''] skeui-inline-block skeui-size-full skeui-relative before:skeui-z-10 skeui-pointer-events-none",
                `${fullyRounded ? "before:skeui-rounded-t-full before:skeui-rounded-b-full" : "before:skeui-rounded-t before:skeui-rounded-b"}`,
                `${isDarkMode ? "before:skeui-nm-outside-highlight-dark" : "before:skeui-nm-outside-highlight"}`,
                className
              ),
              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                "div",
                {
                  className: (0, import_classnames2.default)(
                    "skeui-size-full skeui-p-2 skeui-rounded skeui-rounded-t skeui-rounded-b skeui-z-0 skeui-pointer-events-auto",
                    `${fullyRounded ? "skeui-rounded-t-full skeui-rounded-b-full" : "skeui-rounded-t skeui-rounded-b"}`
                  ),
                  children
                }
              )
            }
          )
        }
      ),
      inset && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
        "div",
        {
          className: (0, import_classnames2.default)(
            "before:skeui-nm-inside-shadow before:skeui-block before:skeui-absolute before:skeui-inset-0 before:skeui-content-[''] skeui-inline-block skeui-size-full skeui-relative before:skeui-z-10 skeui-pointer-events-none",
            `${fullyRounded ? "before:skeui-rounded-full" : "before:skeui-rounded"}`
          ),
          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
            "div",
            {
              className: ((0, import_classnames2.default)("skeui-size-full skeui-z-20 skeui-pointer-events-auto"), `${fullyRounded ? "skeui-rounded-full" : "skeui-rounded"}`),
              children
            }
          )
        }
      )
    ] })
  ] });
};

// src/components/Carousel/Carousel.tsx
var import_classnames3 = __toESM(require("classnames"), 1);
var import_react4 = require("react");

// src/hooks/useIsDesktop.tsx
var import_react3 = require("react");
var useIsDesktop = () => {
  const [isDesktop, setIsDesktop] = (0, import_react3.useState)(false);
  const handleResize = () => {
    setIsDesktop(window.innerWidth > 768);
  };
  (0, import_react3.useEffect)(() => {
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return isDesktop;
};

// src/components/Carousel/Carousel.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Carousel = ({
  slides,
  size = { h: "28rem", w: "24rem" },
  indicators = { on: "\u25CF", off: "\u25CB" },
  navButtons = {
    prev: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { title: "previous slide", children: "<" }),
    next: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { title: "next slide", children: ">" })
  },
  classNames,
  isDarkMode = false,
  ...props
}) => {
  const [visibleProject, setVisibleProject] = (0, import_react4.useState)(0);
  const [playExitAnimation, setPlayExitAnimation] = (0, import_react4.useState)(false);
  const [isRightSwipe, setIsRightSwipe] = (0, import_react4.useState)(false);
  const handleSlideChange = async (slide) => {
    setPlayExitAnimation(true);
    setTimeout(() => {
      setVisibleProject(slide);
    }, 200);
  };
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "skeui", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "skeui-flex skeui-justify-center skeui-place-items-center skeui-size-fit", children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "button",
      {
        onClick: () => {
          setIsRightSwipe(true);
          handleSlideChange(
            visibleProject === 0 ? slides.length - 1 : visibleProject - 1
          );
        },
        className: (0, import_classnames3.default)(
          "skeui-p-2 hover:skeui-scale-110",
          classNames?.navButtons
        ),
        children: navButtons.prev
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "skeui-w-fit", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      CarouselSlide,
      {
        slides,
        handleSlideChange,
        visibleProject,
        playExitAnimation,
        setPlayExitAnimation,
        isRightSwipe,
        setIsRightSwipe,
        isDesktop: useIsDesktop(),
        indicators,
        classNames,
        size,
        isDarkMode,
        ...props
      }
    ) }),
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "button",
      {
        onClick: () => {
          setIsRightSwipe(false);
          handleSlideChange((visibleProject + 1) % slides.length);
        },
        className: (0, import_classnames3.default)(
          "skeui-p-2 hover:skeui-scale-110",
          classNames?.navButtons
        ),
        children: navButtons.next
      }
    )
  ] }) });
};
var CarouselSlide = ({
  handleSlideChange,
  visibleProject,
  playExitAnimation,
  setPlayExitAnimation,
  isRightSwipe,
  setIsRightSwipe,
  isDesktop,
  slides,
  size,
  classNames,
  indicators,
  aesthetic,
  isDarkMode,
  ...props
}) => {
  const [touchStart, setTouchStart] = (0, import_react4.useState)(0);
  const [touchEnd, setTouchEnd] = (0, import_react4.useState)(0);
  const minSwipeDistance = 50;
  const onTouchStart = (e) => {
    setTouchEnd(0);
    setTouchStart(e.targetTouches[0].clientX);
  };
  const onTouchMove = (e) => setTouchEnd(e.targetTouches[0].clientX);
  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    const distance = touchStart - touchEnd;
    if (distance > minSwipeDistance) {
      setIsRightSwipe(false);
      handleSlideChange((visibleProject + 1) % slides.length);
    }
    if (distance < -minSwipeDistance) {
      setIsRightSwipe(true);
      handleSlideChange(
        visibleProject === 0 ? slides.length - 1 : visibleProject - 1
      );
    }
  };
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "skeui", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "skeui-flex skeui-flex-col skeui-justify-center", children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "skeui-flex skeui-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      Card,
      {
        className: (0, import_classnames3.default)("skeui-rounded", classNames?.card),
        aesthetic,
        isDarkMode,
        ...props,
        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "skeui-size-fit", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          "div",
          {
            className: "skeui-p-3 skeui-rounded-lg skeui-overflow-clip skeui-relative skeui-h-[80svh] skeui-w-[80svw] sm:skeui-size-fit",
            onTouchStart,
            onTouchMove,
            onTouchEnd,
            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
              "div",
              {
                className: "skeui-size-full skeui-place-content-start sm:skeui-place-content-end skeui-grid skeui-grid-cols-1 skeui-gap-2",
                onAnimationEnd: () => setPlayExitAnimation(false),
                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                  "div",
                  {
                    className: "skeui-flex skeui-flex-col skeui-items-center skeui-w-full",
                    style: { height: size?.h },
                    children: [
                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                        "div",
                        {
                          className: `skeui-w-full skeui-overflow-clip  sm:skeui-place-content-end skeui-relative ${getAnimationClasses(
                            playExitAnimation,
                            isRightSwipe
                          )}`,
                          style: { maxWidth: size?.w },
                          onAnimationEnd: () => setPlayExitAnimation(false),
                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                            "img",
                            {
                              src: isDesktop ? slides[visibleProject].desktopImage.src : slides[visibleProject].mobileImage?.src ?? slides[visibleProject].desktopImage.src,
                              className: "skeui-soft-transition skeui-w-full skeui-h-auto skeui-hover:scale-110"
                            }
                          )
                        }
                      ),
                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                        "div",
                        {
                          className: "skeui-w-full skeui-text-pretty skeui-h-full",
                          style: { maxWidth: size?.w },
                          children: slides[visibleProject].slideContent
                        }
                      )
                    ]
                  }
                )
              }
            )
          }
        ) })
      }
    ) }),
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      "div",
      {
        className: (0, import_classnames3.default)(
          "skeui-flex skeui-gap-1 skeui-justify-center skeui-p-2",
          classNames?.indicators
        ),
        children: slides.map((_, i) => {
          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
            "button",
            {
              className: (0, import_classnames3.default)(classNames?.indicator),
              onClick: () => handleSlideChange(i),
              children: [
                visibleProject === i && indicators.on,
                visibleProject !== i && indicators.off
              ]
            },
            i
          );
        })
      }
    )
  ] }) });
};
var getAnimationClasses = (playExitAnimation, isRightSwipe) => {
  return playExitAnimation && isRightSwipe ? " skeui-animate-rightSwipeExit" : playExitAnimation && !isRightSwipe ? " skeui-animate-leftSwipeExit" : !playExitAnimation && isRightSwipe ? " skeui-animate-rightSwipeEnter skeui-opacity-0" : !playExitAnimation && !isRightSwipe ? " skeui-animate-leftSwipeEnter skeui-opacity-0" : "";
};

// src/components/NavBar/NavBar.tsx
var import_classnames4 = __toESM(require("classnames"), 1);
var import_jsx_runtime4 = require("react/jsx-runtime");
var NavBar = ({
  children,
  className,
  placement = "bottom",
  aesthetic = "glassmorphic",
  isDarkMode = false,
  ...props
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "skeui", children: [
    aesthetic === "glassmorphic" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        "div",
        {
          className: (0, import_classnames4.default)(
            "skeui-fixed skeui-z-50 skeui-flex skeui-place-content-center skeui-w-fit",
            {
              "skeui-w-full skeui-bottom-[10%] skeui-place-content-center": placement === "bottom"
            },
            {
              "skeui-w-full skeui-top-[10%] skeui-place-content-center": placement === "top"
            },
            {
              "skeui-h-full skeui-right-[5%] skeui-place-items-center": placement === "right"
            },
            {
              "skeui-h-full skeui-left-[5%] skeui-place-items-center": placement === "left"
            }
          ),
          ...props,
          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
            "div",
            {
              className: (0, import_classnames4.default)(
                "skeui-flex skeui-p-2 skeui-gap-6 skeui-rounded-t-full skeui-rounded-b-full",
                className
              ),
              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                "div",
                {
                  className: (0, import_classnames4.default)(
                    "skeui-gap-6 skeui-justify-around",
                    {
                      "skeui-grid skeui-grid-flow-col skeui-auto-cols-max": placement === "bottom" || placement === "top"
                    },
                    {
                      "skeui-grid": placement === "right" || placement === "left"
                    }
                  ),
                  children
                }
              )
            }
          )
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        "div",
        {
          className: (0, import_classnames4.default)(
            "skeui-fixed skeui-z-50 skeui-flex skeui-place-content-center skeui-w-fit skeui-mix-blend-soft-light",
            {
              "skeui-w-full skeui-bottom-[10%] skeui-place-content-center": placement === "bottom"
            },
            {
              "skeui-w-full skeui-top-[10%] skeui-place-content-center": placement === "top"
            },
            {
              "skeui-h-full skeui-right-[5%] skeui-place-items-center": placement === "right"
            },
            {
              "skeui-h-full skeui-left-[5%] skeui-place-items-center": placement === "left"
            }
          ),
          ...props,
          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "skeui-size-fit", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
            Card,
            {
              aesthetic: "glassmorphic",
              className: "skeui-size-fit skeui-gp-outside-shadow skeui-rounded-full",
              isDarkMode,
              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "skeui-flex skeui-p-2 skeui-gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                "div",
                {
                  className: (0, import_classnames4.default)(
                    "skeui-gap-6 skeui-justify-around",
                    {
                      "skeui-grid skeui-grid-flow-col skeui-auto-cols-max": placement === "bottom" || placement === "top"
                    },
                    {
                      "skeui-grid": placement === "right" || placement === "left"
                    }
                  ),
                  children
                }
              ) })
            }
          ) })
        }
      )
    ] }),
    aesthetic === "neumorphic" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        "div",
        {
          className: (0, import_classnames4.default)(
            "skeui-fixed skeui-z-50 skeui-flex skeui-place-content-center skeui-w-fit",
            {
              "skeui-w-full skeui-bottom-[10%] skeui-place-content-center": placement === "bottom"
            },
            {
              "skeui-w-full skeui-top-[10%] skeui-place-content-center": placement === "top"
            },
            {
              "skeui-h-full skeui-right-[5%] skeui-place-items-center": placement === "right"
            },
            {
              "skeui-h-full skeui-left-[5%] skeui-place-items-center": placement === "left"
            }
          ),
          ...props,
          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
            "div",
            {
              className: (0, import_classnames4.default)(
                "skeui-flex skeui-p-2 skeui-gap-6 skeui-rounded-t-full skeui-rounded-b-full",
                className
              ),
              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                "div",
                {
                  className: (0, import_classnames4.default)(
                    "skeui-gap-6 skeui-justify-around",
                    {
                      "skeui-grid skeui-grid-flow-col skeui-auto-cols-max": placement === "bottom" || placement === "top"
                    },
                    {
                      "skeui-grid": placement === "right" || placement === "left"
                    }
                  ),
                  children
                }
              )
            }
          )
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        "div",
        {
          className: (0, import_classnames4.default)(
            "skeui-fixed skeui-z-50 skeui-flex skeui-place-content-center skeui-w-fit skeui-mix-blend-soft-light",
            {
              "skeui-w-full skeui-bottom-[10%] skeui-place-content-center": placement === "bottom"
            },
            {
              "skeui-w-full skeui-top-[10%] skeui-place-content-center": placement === "top"
            },
            {
              "skeui-h-full skeui-right-[5%] skeui-place-items-center": placement === "right"
            },
            {
              "skeui-h-full skeui-left-[5%] skeui-place-items-center": placement === "left"
            }
          ),
          ...props,
          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "skeui-size-fit", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
            Card,
            {
              aesthetic: "neumorphic",
              className: "skeui-size-fit",
              fullyRounded: true,
              isDarkMode,
              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "skeui-flex skeui-gap-6 skeui-size-fit", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                "div",
                {
                  className: (0, import_classnames4.default)(
                    "skeui-gap-6 skeui-justify-around ",
                    {
                      "skeui-grid skeui-grid-flow-col skeui-auto-cols-max": placement === "bottom" || placement === "top"
                    },
                    {
                      "skeui-grid": placement === "right" || placement === "left"
                    }
                  ),
                  children
                }
              ) })
            }
          ) })
        }
      )
    ] })
  ] });
};

// src/components/SearchBar/SearchBar.tsx
var import_classnames5 = __toESM(require("classnames"), 1);
var import_jsx_runtime5 = require("react/jsx-runtime");
var SearchBar = ({
  aesthetic = "glassmorphic",
  inset,
  isDarkMode = false,
  icon = "\u{1F50D}",
  placeholder = "Search...",
  setSearch,
  classNames,
  className,
  ...props
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "skeui", children: [
    aesthetic === "glassmorphic" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      "div",
      {
        className: (0, import_classnames5.default)(
          "skeui-backdrop-blur-2xl skeui-soft-transition skeui-gp-inside-shadow skeui-size-full",
          className
        ),
        ...props,
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "skeui-flex skeui-gap-2 skeui-items-center skeui-p-2", children: [
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames5.default)(classNames?.icon), children: icon }),
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
            "input",
            {
              placeholder,
              className: (0, import_classnames5.default)(
                "skeui-size-full skeui-bg-transparent skeui-p-1 skeui-outline-none skeui-pointer-events-auto z-50",
                classNames?.input
              ),
              onInput: (e) => setSearch?.(e.currentTarget.value)
            }
          )
        ] })
      }
    ),
    aesthetic === "neumorphic" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      Card,
      {
        aesthetic,
        isDarkMode,
        inset,
        ...props,
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "skeui-flex skeui-gap-2 skeui-items-center skeui-p-1", children: [
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
            "div",
            {
              className: (0, import_classnames5.default)(
                `${inset === true ? "skeui-pl-2" : ""}`,
                classNames?.icon
              ),
              children: icon
            }
          ),
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
            "input",
            {
              placeholder,
              className: (0, import_classnames5.default)(
                "skeui-size-full skeui-bg-transparent skeui-outline-none skeui-pointer-events-auto z-50",
                `${inset === true ? "skeui-p-2" : "skeui-p-1"}`,
                classNames?.input
              ),
              onInput: (e) => setSearch?.(e.currentTarget.value)
            }
          )
        ] })
      }
    )
  ] });
};

// src/components/Toggle/Toggle.tsx
var import_classnames6 = __toESM(require("classnames"), 1);
var import_jsx_runtime6 = require("react/jsx-runtime");
var Toggle = ({
  aesthetic = "glassmorphic",
  isOn = false,
  setIsOn,
  thumb = "\u26AA",
  classNames,
  ...props
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "skeui", children: [
    aesthetic == "glassmorphic" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "button",
      {
        className: "skeui-size-fit",
        onClick: () => setIsOn?.(!isOn),
        ...props,
        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
          Card,
          {
            aesthetic: "glassmorphic",
            className: (0, import_classnames6.default)(
              "skeui-rounded-full before:skeui-rounded-full",
              classNames?.track
            ),
            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
              "div",
              {
                className: (0, import_classnames6.default)(
                  "skeui-flex skeui-text-2xl skeui-scale-110",
                  classNames?.thumb
                ),
                children: [
                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                    "span",
                    {
                      className: (0, import_classnames6.default)(
                        `${!isOn && "skeui-invisible"}`,
                        "skeui-transition-hard",
                        `${isOn && "skeui-animate-toggleToRight"}`
                      ),
                      children: thumb
                    }
                  ),
                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                    "span",
                    {
                      className: (0, import_classnames6.default)(
                        `${isOn && "skeui-invisible"}`,
                        "skeui-transition-hard",
                        `${!isOn && "skeui-animate-toggleToLeft"}`
                      ),
                      children: thumb
                    }
                  )
                ]
              }
            )
          }
        )
      }
    ),
    aesthetic == "neumorphic" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "button",
      {
        className: "skeui-size-fit",
        onClick: () => setIsOn?.(!isOn),
        ...props,
        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
          Card,
          {
            aesthetic: "neumorphic",
            inset: true,
            fullyRounded: true,
            className: (0, import_classnames6.default)(classNames?.track),
            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
              "div",
              {
                className: (0, import_classnames6.default)(
                  "skeui-flex skeui-text-2xl skeui-scale-110",
                  classNames?.thumb
                ),
                children: [
                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                    "span",
                    {
                      className: (0, import_classnames6.default)(
                        `${!isOn && "skeui-invisible"}`,
                        "skeui-transition-hard",
                        `${isOn && "skeui-animate-toggleToRight"}`
                      ),
                      children: thumb
                    }
                  ),
                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                    "span",
                    {
                      className: (0, import_classnames6.default)(
                        `${isOn && "skeui-invisible"}`,
                        "skeui-transition-hard",
                        `${!isOn && "skeui-animate-toggleToLeft"}`
                      ),
                      children: thumb
                    }
                  )
                ]
              }
            )
          }
        )
      }
    )
  ] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Button,
  Card,
  Carousel,
  NavBar,
  SearchBar,
  Toggle
});