@luxonis/component-lib 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1143 @@
+// src/Accordion.tsx
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cx } from "class-variance-authority";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Accordion = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Root, { slot: "root", className: cx(className), ...props, ref }));
+Accordion.displayName = "Accordion";
+var AccordionItem = React.forwardRef(
+  ({ className, noStyle, ...props }, ref) => /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      className: cx(
+        !noStyle && "border px-4 rounded-md border-solid bg-white/10 border-white border-opacity-25",
+        className
+      ),
+      ...props
+    }
+  )
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React.forwardRef(
+  ({ className, children, icon = "mdi:plus", ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cx(
+        "flex flex-1 items-center justify-between py-4  text-xxs md:text-xs font-medium transition-all [&[data-state=open]]:border-b border-mutedborder border-opacity-15 [&[data-state=open]>svg]:rotate-45",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Icon, { icon, width: "24", height: "24" })
+      ]
+    }
+  ) })
+);
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React.forwardRef(
+  ({ className, children, contentClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: cx(
+        "overflow-hidden  text-sm p-4 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+        contentClassName
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cx("pb-4 pt-0", className), children })
+    }
+  )
+);
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/Badge.tsx
+import { cva, cx as cx2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground border-transparent bg-primary hover:bg-primary/80",
+        secondary: "text-secondary-foreground border-transparent bg-secondary hover:bg-secondary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: cx2(badgeVariants({ variant }), className), ...props });
+}
+
+// src/Button.tsx
+import { useState } from "react";
+import { cva as cva2, cx as cx3 } from "class-variance-authority";
+import { Icon as Icon2 } from "@iconify/react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  `flex  items-center justify-center gap-1.5 text-nowrap rounded-full font-medium outline-none`,
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary stroke-white text-white hover:bg-gradient-to-l hover:from-white/8 hover:to-white/8 disabled:bg-[#D0D0D0]",
+        primaryAlt: "bg-gray-100 stroke-white text-primary hover:bg-gradient-to-l hover:from-white/8 hover:to-white/8",
+        icon: "border border-primaryBorder bg-white fill-black stroke-black text-black hover:bg-secondary hover:stroke-primary hover:text-primary",
+        secondary: "bg-white fill-current stroke-black text-black hover:bg-secondary hover:stroke-primary hover:text-primary",
+        steps: "group flex-col gap-3 bg-transparent text-semimuted text-opacity-40 hover:text-opacity-60 aria-selected:text-black aria-selected:opacity-100 [&>div>div>svg]:hover:border-transparent [&>div>div]:hover:bg-primary [&>div>div]:hover:text-white sm:[&>div>div]:hover:opacity-45 ",
+        unstyled: ""
+      },
+      size: {
+        sm: "h-9 px-3.5 py-2.5",
+        xs: "px-3.5 py-2.5 text-sm",
+        lg: "h-[46px] px-7 py-3.5",
+        icon: "size-14 p-3.5",
+        unset: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "lg"
+    }
+  }
+);
+var Button = (props) => {
+  const {
+    className,
+    variant,
+    size,
+    children,
+    icon,
+    role = "button",
+    onClick,
+    animate = role === "icon" || role === "steps" || variant === "unstyled" ? false : true,
+    ...rest
+  } = props;
+  const [circles, setCircles] = useState([]);
+  const iconSize = variant === "steps" ? 24 : 20;
+  const handleClickAnimation = (event) => {
+    const { clientX: x, clientY: y } = event;
+    const buttonRect = event.currentTarget.getBoundingClientRect();
+    const buttonX = buttonRect.left;
+    const buttonY = buttonRect.top;
+    setCircles((prev) => [...prev, { top: y - buttonY - 15, left: x - buttonX - 15, key: Math.random() }]);
+  };
+  const handleAnimationEnd = (key) => {
+    setCircles((prev) => prev.filter((c) => c.key !== key));
+  };
+  const overWriteVariants = {
+    variant: role === "icon" ? "icon" : variant,
+    size: role === "icon" ? "icon" : size
+  };
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      onClick: (e) => {
+        if (onClick) {
+          onClick(e);
+        }
+        if (animate) {
+          handleClickAnimation(e);
+        }
+      },
+      className: cx3(buttonVariants({ ...overWriteVariants }), animate && "relative", className),
+      ...rest,
+      children: [
+        icon && (variant === "steps" ? /* @__PURE__ */ jsx3("div", { className: "z-[1] bg-white", children: /* @__PURE__ */ jsx3("div", { className: "rounded-full", children: /* @__PURE__ */ jsx3(
+          Icon2,
+          {
+            icon,
+            width: iconSize,
+            height: iconSize,
+            className: cx3(
+              "flex w-10 h-10  justify-center items-center gap-2.5 border px-2.5 py-1 rounded-full border-solid border-muted",
+              props["aria-selected"] ? "bg-primary border-none text-white" : ""
+            )
+          }
+        ) }) }) : /* @__PURE__ */ jsx3(Icon2, { icon, width: iconSize, height: iconSize })),
+        children,
+        circles.map((circle) => /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: cx3(
+              "pointer-events-none absolute animate-circle rounded-full bg-primary opacity-90",
+              size === "sm" ? "size-4" : "size-6"
+            ),
+            style: {
+              top: `${circle.top}px`,
+              left: `${circle.left}px`
+            },
+            onAnimationEnd: () => handleAnimationEnd(circle.key)
+          },
+          circle.key
+        )),
+        role === "continue" && /* @__PURE__ */ jsx3("div", { className: "flex h-full w-fit items-center justify-center", children: /* @__PURE__ */ jsx3(Icon2, { icon: "ri:arrow-drop-right-line", width: 16, height: 16 }) })
+      ]
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/Card.tsx
+import { cva as cva3, cx as cx4 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var cardVariants = cva3(``, {
+  variants: {
+    variant: {
+      fullpage: "w-full page-padding ",
+      fullwidth: "w-full",
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Card = (props) => {
+  const { className, variant, children, outerStyles, ...rest } = props;
+  const cardStyles = cx4("rounded-xl", className);
+  return /* @__PURE__ */ jsx4("div", { className: cx4(cardVariants({ variant }), outerStyles), ...rest, children: /* @__PURE__ */ jsx4("div", { className: cardStyles, children }) });
+};
+
+// src/Carousel.tsx
+import React3, { useState as useState2, useEffect, useRef } from "react";
+import { cx as cx5 } from "class-variance-authority";
+import useEmblaCarousel from "embla-carousel-react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CarouselContext = React3.createContext(null);
+function useCarousel() {
+  const context = React3.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+var Carousel = React3.forwardRef(
+  ({
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    scrollable,
+    className,
+    children,
+    moveOnClick = false,
+    ...props
+  }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y"
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = useState2(false);
+    const [canScrollNext, setCanScrollNext] = useState2(false);
+    const [selectedIndex, setSelectedIndex] = useState2(0);
+    const carouselContainerRef = useRef(null);
+    const onSelect = React3.useCallback((api2) => {
+      if (!api2) {
+        return;
+      }
+      setCanScrollPrev(api2.canScrollPrev());
+      setCanScrollNext(api2.canScrollNext());
+      setSelectedIndex(api2?.selectedScrollSnap());
+    }, []);
+    const scrollPrev = React3.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React3.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = React3.useCallback(
+      (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+    const handleWheel = React3.useCallback(
+      (event) => {
+        if (!api) return;
+        const deltaY = event.deltaY;
+        if (deltaY < 0) {
+          if (api.canScrollPrev()) {
+            event.preventDefault();
+            api.scrollPrev();
+          }
+        } else if (deltaY > 0) {
+          if (api.canScrollNext()) {
+            event.preventDefault();
+            api.scrollNext();
+          }
+        }
+      },
+      [api]
+    );
+    useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+      setApi(api);
+    }, [api, setApi]);
+    useEffect(() => {
+      if (!api) {
+        return;
+      }
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+    useEffect(() => {
+      const carouselNode = carouselContainerRef.current;
+      if (!carouselNode) return;
+      if (!scrollable) return;
+      carouselNode.addEventListener("wheel", handleWheel, { passive: false });
+      return () => {
+        carouselNode.removeEventListener("wheel", handleWheel);
+      };
+    }, [carouselRef, handleWheel, scrollable]);
+    return /* @__PURE__ */ jsx5(
+      CarouselContext.Provider,
+      {
+        value: {
+          carouselRef,
+          api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+          selectedIndex,
+          moveOnClick
+        },
+        children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            onKeyDownCapture: handleKeyDown,
+            ref: (node) => {
+              if (node) carouselContainerRef.current = node;
+              if (ref) {
+                if (typeof ref === "function") ref(node);
+                else ref.current = node;
+              }
+            },
+            className: cx5("relative", className),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = React3.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+    return /* @__PURE__ */ jsx5("div", { ref: carouselRef, className: `'overflow-hidden ${props.wrapperClassName ?? ""}'`, children: /* @__PURE__ */ jsx5(
+      "div",
+      {
+        ref,
+        className: cx5("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+        ...props
+      }
+    ) });
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React3.forwardRef((props, ref) => {
+  const { className, inActieStyles, activeStyles, index = 0, children, leftStyles, rightStyles, ...rest } = props;
+  const { selectedIndex, api, moveOnClick } = useCarousel();
+  const isActive = (api && selectedIndex % api?.scrollSnapList().length === index) ?? false;
+  const isLeftFromActive = (api && selectedIndex % api?.scrollSnapList().length === index - 1) ?? false;
+  const isRightFromActive = (api && selectedIndex % api?.scrollSnapList().length === index + 1) ?? false;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: cx5(
+        className,
+        isActive && activeStyles,
+        isLeftFromActive && leftStyles,
+        isRightFromActive && rightStyles
+      ),
+      onClick: () => {
+        if (props.onClick) {
+          props.onClick;
+        }
+        if (moveOnClick) {
+          api?.scrollTo(index);
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = (props) => {
+  const { className, role, hideButtons = true, ...rest } = props;
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsx5(
+    Button,
+    {
+      role: "icon",
+      size: "sm",
+      icon: "ri:arrow-drop-left-line",
+      className: cx5(
+        "absolute rounded-full left-12",
+        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2 -translate-x-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      style: { display: hideButtons ? canScrollPrev ? "" : "none" : "" },
+      onClick: scrollPrev,
+      ...rest,
+      children: /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Previous slide" })
+    }
+  );
+};
+var CarouselNext = (props) => {
+  const { className, role, hideButtons = true, ...rest } = props;
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsx5(
+    Button,
+    {
+      role: "icon",
+      size: "sm",
+      icon: "ri:arrow-drop-right-line",
+      className: cx5(
+        "absolute rounded-full right-12",
+        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2 translate-x-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      style: { display: hideButtons ? canScrollNext ? "" : "none" : "" },
+      onClick: scrollNext,
+      ...rest,
+      children: /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Next slide" })
+    }
+  );
+};
+
+// src/CodeBlock.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function CodeBlock(props) {
+  return /* @__PURE__ */ jsx6("pre", { className: "bg-gray-300 rounded p-1 inline text-black whitespace-pre-wrap", children: props.children });
+}
+
+// src/Text.tsx
+import { cva as cva4, cx as cx6 } from "class-variance-authority";
+import React4 from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var styledText = cva4("block", {
+  variants: {
+    breakType: {
+      character: "break-all",
+      word: "break-words",
+      space: "whitespace-break-spaces",
+      none: "whitespace-nowrap"
+    },
+    size: {
+      "h1": "text-h1-mobile font-medium uppercase leading-110 sm:text-h1",
+      "h2": "text-h2-mobile font-medium uppercase leading-110 sm:text-h2",
+      "h3": "text-h3-mobile font-medium uppercase leading-110 sm:text-h3",
+      "h4": "text-h4-mobile font-medium  leading-110 sm:text-h4",
+      "h5": "text-h5-mobile font-medium  leading-110 sm:text-h5",
+      "2xl": "text-2xl-mobile leading-164 sm:text-2xl",
+      "xl": "text-xl-mobile leading-164 sm:text-xl",
+      "lg": "text-large-mobile leading-164 sm:text-large",
+      "md": "text-medium-mobile leading-164 sm:text-medium",
+      "sm": "text-sm-mobile leading-normal sm:text-sm",
+      "caption": "text-captions-mobile leading-164 sm:text-captions"
+    },
+    color: {
+      primary: "text-primary",
+      normal: "text-black",
+      default: "",
+      white: "text-white",
+      muted: "text-muted",
+      error: "text-red-500",
+      semimuted: "text-semimuted"
+    },
+    weight: {
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      normal: ""
+    },
+    fontStyle: {
+      italic: "italic",
+      uppercase: "uppercase",
+      capitalize: "capitalize",
+      normal: ""
+    },
+    spaces: {
+      trim: "overflow-hidden text-ellipsis",
+      preserve: "whitespace-pre-wrap",
+      normal: ""
+    },
+    align: {
+      center: "text-center",
+      left: "text-left",
+      right: "text-right",
+      normal: ""
+    }
+  },
+  defaultVariants: {
+    breakType: "word",
+    align: "normal",
+    spaces: "normal",
+    fontStyle: "normal",
+    weight: "normal",
+    color: "default"
+  }
+});
+var Text = React4.forwardRef((props, ref) => {
+  const { className, size, weight, fontStyle, spaces, align, breakType, text, color, ...rest } = props;
+  const styles = cx6(
+    styledText({
+      size,
+      weight,
+      fontStyle,
+      spaces,
+      align,
+      breakType,
+      color
+    }),
+    className
+  );
+  const textNode = parseNewLines(text);
+  switch (size) {
+    case "h1":
+      return /* @__PURE__ */ jsx7("h1", { className: styles, ref, ...rest, children: textNode });
+    case "h2":
+      return /* @__PURE__ */ jsx7("h2", { className: styles, ref, ...rest, children: textNode });
+    case "h3":
+      return /* @__PURE__ */ jsx7("h3", { className: styles, ref, ...rest, children: textNode });
+    case "h4":
+      return /* @__PURE__ */ jsx7("h4", { className: styles, ref, ...rest, children: textNode });
+    case "h5":
+      return /* @__PURE__ */ jsx7("h5", { className: styles, ref, ...rest, children: textNode });
+    case "lg":
+    case "md":
+    case "caption":
+      return /* @__PURE__ */ jsx7("p", { className: styles, ref, ...rest, children: textNode });
+    default:
+      return /* @__PURE__ */ jsx7("span", { className: styles, ref, ...rest, children: textNode });
+  }
+});
+var parseNewLines = (text) => {
+  if (typeof text === "string") {
+    return text.split(/\\n|\n/gm).map((item, index) => /* @__PURE__ */ jsxs3(React4.Fragment, { children: [
+      item,
+      /* @__PURE__ */ jsx7("br", {})
+    ] }, index));
+  }
+  return text;
+};
+Text.displayName = "Text";
+
+// src/Copyright.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var Copyright = () => {
+  return /* @__PURE__ */ jsxs4("div", { className: "page-card-content flex flex-col justify-between gap-8 sm:flex-row sm:gap-2", children: [
+    /* @__PURE__ */ jsx8(Text, { text: `All Rights Reserved \xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} Luxonis`, size: "caption", color: "muted" }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-row gap-10  text-sm text-muted", children: [
+      /* @__PURE__ */ jsx8("a", { className: "text-muted underline", href: "/privacy", children: "Privacy Policy" }),
+      /* @__PURE__ */ jsx8("a", { className: "text-muted underline", href: "/terms-of-service", children: "Terms of Service" })
+    ] })
+  ] });
+};
+
+// src/Description.tsx
+import { cva as cva5, cx as cx7 } from "class-variance-authority";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var DescriptionRecepie = cva5("flex flex-col ", {
+  variants: {
+    align: {
+      center: "items-start sm:items-center",
+      allwayscenter: "items-center",
+      left: "items-start",
+      leftCenterMobile: "items-start sm:items-center",
+      desktopCenterMobileLeft: "w-full items-start !text-left sm:items-center sm:!text-center",
+      desktopLeftMobileCenter: "w-full items-center !text-center lg:items-start lg:!text-left"
+    },
+    gap: {
+      lg: "gap-10",
+      normal: "gap-8",
+      none: "gap-0"
+    }
+  },
+  defaultVariants: {
+    gap: "lg",
+    align: "center"
+  }
+});
+var InnerGap = cva5("", {
+  variants: {
+    innerGap: {
+      lg: "gap-6",
+      normal: "gap-4"
+    }
+  },
+  defaultVariants: {
+    innerGap: "normal"
+  }
+});
+var Description = (props) => {
+  const {
+    description,
+    title,
+    subTitle,
+    className,
+    children,
+    align,
+    gap,
+    innerGap,
+    textStyle,
+    headingStyle,
+    descriptionStyle,
+    wrapperClassName
+  } = props;
+  const alingText = align === "left" || align === "desktopLeftMobileCenter" ? "left" : "center";
+  return /* @__PURE__ */ jsxs5("div", { className: cx7(DescriptionRecepie({ align, gap }), className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: cx7(`flex flex-col gap-4 sm:gap-6 w-full`, wrapperClassName ?? "", InnerGap({ innerGap })), children: [
+      subTitle && /* @__PURE__ */ jsx9(
+        Text,
+        {
+          size: "md",
+          text: subTitle,
+          color: "muted",
+          fontStyle: "uppercase",
+          align: alingText,
+          className: cx7(DescriptionRecepie({ align }), textStyle)
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        Text,
+        {
+          size: "h2",
+          text: title,
+          align: alingText,
+          className: cx7(DescriptionRecepie({ align }), textStyle, headingStyle)
+        }
+      ),
+      alingText === "center" ? /* @__PURE__ */ jsx9("div", { className: "flex w-full flex-row justify-center", children: description && /* @__PURE__ */ jsx9(
+        Text,
+        {
+          size: "lg",
+          text: description,
+          className: cx7(DescriptionRecepie({ align }), "max-w-105", textStyle, descriptionStyle),
+          align: alingText
+        }
+      ) }) : description && /* @__PURE__ */ jsx9(Text, { size: "lg", text: description, className: cx7("max-w-105", textStyle), align: alingText })
+    ] }),
+    children
+  ] });
+};
+
+// src/FrostedCard.tsx
+import { cx as cx8 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function FrostedCard(props) {
+  const { children, className } = props;
+  return /* @__PURE__ */ jsx10("div", { className: cx8(`rounded-lg border border-white/30 bg-white/10 p-4 backdrop-blur-sm`, className), children });
+}
+
+// src/Hero.tsx
+import { cx as cx9 } from "class-variance-authority";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var Hero = (props) => {
+  const { title, description, button, bgImageLink, desctipionSize = "default" } = props;
+  const descriptionSize = () => {
+    if (desctipionSize === "lg") {
+      return cx9("lg:max-w-[525px] max-w-96");
+    }
+    return "lg:max-w-[350px] max-w-96";
+  };
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      style: {
+        backgroundImage: bgImageLink && `url(${bgImageLink})`,
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat"
+      },
+      className: "page-card page-padding relative overflow-hidden !rounded-none bg-black bg-cover  bg-center bg-no-repeat",
+      children: [
+        /* @__PURE__ */ jsx11("div", { className: "page-card-content  relative  size-full h-[810px] w-full sm:h-[914px]", children: /* @__PURE__ */ jsxs6("div", { className: " absolute inset-x-0 bottom-10 mx-auto flex w-full flex-col items-center  justify-between gap-4 md:flex-row md:items-end ", children: [
+          /* @__PURE__ */ jsx11("div", { className: "flex w-full flex-row justify-center text-white md:justify-start", children: /* @__PURE__ */ jsx11(Text, { text: title, size: "h1", className: "z-[2] w-96 text-h4 sm:text-h4 xl:w-auto xl:text-h1" }) }),
+          /* @__PURE__ */ jsxs6("div", { className: cx9("flex flex-col gap-8 md:gap-6 z-[2]", descriptionSize()), children: [
+            /* @__PURE__ */ jsx11(Text, { text: description, color: "white", size: "lg" }),
+            button
+          ] })
+        ] }) }),
+        props.children
+      ]
+    }
+  );
+};
+
+// src/HoverCard.tsx
+import { cx as cx10 } from "class-variance-authority";
+import * as React5 from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = React5.forwardRef(
+  ({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(
+    HoverCardPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cx10(
+        "z-50 rounded-md   data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+// src/Input.tsx
+import { useState as useState3 } from "react";
+import { cx as cx11 } from "class-variance-authority";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var Input = ({
+  className,
+  label,
+  labelPosition = "left",
+  errorMessage = "Invalid input",
+  onBlur,
+  validate = true,
+  onChange,
+  type,
+  ...rest
+}) => {
+  const [isInvalid, setIsInvalid] = useState3(false);
+  const inputId = rest.id || "input-field";
+  const errorId = `${inputId}-error`;
+  const handleBlur = (e) => {
+    if (!validate) {
+      if (isInvalid) {
+        setIsInvalid(false);
+      }
+      return;
+    }
+    setIsInvalid(!e.target.validity.valid);
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const handleChange = (e) => {
+    if (e.target.validity.valid) {
+      setIsInvalid(false);
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cx11(
+          className,
+          "flex items-center gap-2 rounded-md bg-white px-4 py-2",
+          labelPosition === "left" ? "flex-row" : "flex-row-reverse"
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx13("label", { htmlFor: inputId, className: "text-base text-gray-700", children: label }),
+          /* @__PURE__ */ jsx13(
+            "input",
+            {
+              id: inputId,
+              className: cx11(
+                "peer w-full bg-transparent text-base font-normal leading-8 text-black outline-none placeholder:text-muted",
+                isInvalid && "border-red-500"
+              ),
+              "aria-invalid": isInvalid,
+              "aria-describedby": isInvalid ? errorId : void 0,
+              onBlur: handleBlur,
+              onChange: handleChange,
+              type,
+              ...rest
+            }
+          )
+        ]
+      }
+    ),
+    isInvalid && /* @__PURE__ */ jsx13(Text, { text: errorMessage, id: errorId, size: "caption", color: "error" })
+  ] });
+};
+
+// src/Label.tsx
+import * as React7 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva6, cx as cx12 } from "class-variance-authority";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var labelVariants = cva6("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+var Label = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(LabelPrimitive.Root, { ref, className: cx12(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/SearchBar.tsx
+import { useRef as useRef2 } from "react";
+import { cx as cx13 } from "class-variance-authority";
+import { Icon as Icon3 } from "@iconify/react";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var SearchBar = (props) => {
+  const { className, placeholder = "Search our store...", setIsSearchOpen, isSearchOpen, ...rest } = props;
+  const searchRef = useRef2(null);
+  if (!isSearchOpen) {
+    return /* @__PURE__ */ jsx15(
+      Button,
+      {
+        variant: "unstyled",
+        className: "!h-[46px] text-white ",
+        icon: "cuida:search-outline",
+        onClick: () => {
+          setIsSearchOpen(true);
+          searchRef.current?.focus();
+        }
+      }
+    );
+  }
+  const onBlur = () => {
+    setTimeout(() => setIsSearchOpen(false), 100);
+  };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cx13(
+        "flex items-center w-full h-full justify-between rounded-full border border-solid bg-white px-4 font-medium text-primary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            type: "text",
+            ref: searchRef,
+            onBlur,
+            placeholder: placeholder ?? "Search our store...",
+            className: "size-full h-[46px] bg-transparent py-2 text-sm  text-black outline-none placeholder:text-muted",
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx15("button", { type: "submit", className: "z-10", children: /* @__PURE__ */ jsx15(Icon3, { icon: "ri:search-line", width: 24, height: 24 }) })
+      ]
+    }
+  );
+};
+
+// src/Select.tsx
+import * as React9 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cx as cx14 } from "class-variance-authority";
+import { Icon as Icon5 } from "@iconify/react";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React9.forwardRef(({ className, noStyle, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cx14(
+      !noStyle && "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md  bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx16(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx16(Icon5, { icon: "ri:arrow-down", className: "size-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cx14("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx16(Icon5, { icon: "ri:arrow-up-line", className: "size-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cx14("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx16(Icon5, { icon: "ri:arrow-down", className: "size-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx16(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cx14(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx16(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx16(
+        SelectPrimitive.Viewport,
+        {
+          className: cx14(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx16(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(SelectPrimitive.Label, { ref, className: cx14("px-2 py-1.5 text-sm font-semibold", className), ...props }));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cx14(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none  data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx16("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(Icon5, { icon: "ri:check-line", className: "size-4" }) }) }),
+      /* @__PURE__ */ jsx16(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(SelectPrimitive.Separator, { ref, className: cx14("-mx-1 my-1 h-px bg-muted", className), ...props }));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/Switch.tsx
+import * as React10 from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cx as cx15 } from "class-variance-authority";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Switch = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  SwitchPrimitives.Root,
+  {
+    className: cx15(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx17(
+      SwitchPrimitives.Thumb,
+      {
+        className: cx15(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/Table.tsx
+import * as React11 from "react";
+import { cx as cx16 } from "class-variance-authority";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Table = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx18("table", { ref, className: cx16("w-full caption-bottom text-sm", className), ...props }) })
+);
+Table.displayName = "Table";
+var TableHeader = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("thead", { ref, className: cx16("[&_tr]:border-b", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("tbody", { ref, className: cx16("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("tfoot", { ref, className: cx16("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React11.forwardRef(({ className, noStyle, ...props }, ref) => /* @__PURE__ */ jsx18(
+  "tr",
+  {
+    ref,
+    className: cx16(!noStyle && "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+    "th",
+    {
+      ref,
+      className: cx16(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("td", { ref, className: cx16("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("caption", { ref, className: cx16("mt-4 text-sm text-muted-foreground", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+
+// src/TextArea.tsx
+import * as React12 from "react";
+import { cx as cx17 } from "class-variance-authority";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Textarea = React12.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx19(
+      "textarea",
+      {
+        className: cx17(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/Video.tsx
+import { useRef as useRef3, forwardRef as forwardRef8, useImperativeHandle, useState as useState4 } from "react";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var Video = forwardRef8(({ src, className }, ref) => {
+  const videoRef = useRef3(null);
+  const [isPlaying, setIsPlaying] = useState4(false);
+  useImperativeHandle(ref, () => ({
+    togglePlay: () => {
+      if (videoRef.current) {
+        if (videoRef.current.paused) {
+          videoRef.current.play();
+          setIsPlaying(true);
+        } else {
+          videoRef.current.pause();
+          setIsPlaying(false);
+        }
+      }
+    }
+  }));
+  const setPlaying = () => {
+    if (videoRef.current) {
+      if (videoRef.current.paused) {
+        videoRef.current.play();
+        setIsPlaying(true);
+      } else {
+        videoRef.current.pause();
+        setIsPlaying(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: `relative ${className}`, children: [
+    /* @__PURE__ */ jsx20("video", { onClick: setPlaying, ref: videoRef, className: "size-full object-cover", src, loop: true, children: "Your browser does not support the video tag." }),
+    !isPlaying && /* @__PURE__ */ jsx20(
+      Button,
+      {
+        variant: "icon",
+        icon: "mdi:play",
+        role: "icon",
+        onClick: () => setPlaying(),
+        className: "absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-2 shadow-md"
+      }
+    )
+  ] });
+});
+Video.displayName = "Video";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Badge,
+  Button,
+  Card,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  CodeBlock,
+  Copyright,
+  Description,
+  FrostedCard,
+  Hero,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Input,
+  Label,
+  SearchBar,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Text,
+  Textarea,
+  Video,
+  badgeVariants,
+  buttonVariants,
+  parseNewLines
+};