athameui 0.0.12 → 0.0.13

package/dist/athameui.mjs

@@ -2561,16 +2561,62 @@ const ButtonGroup = ({
   });
 };
 
+const FormLabel = ({
+  label,
+  required,
+  className,
+  labelPosition = "above",
+  dark,
+  sx,
+  ...other
+}) => {
+  const labelClasses = cx("ath-form-input-label", labelPosition ? `ath-form-input-label-${labelPosition}` : "", dark ? "ath-form-input-label-dark" : "", className?.label);
+  const requiredClasses = cx("ath-form-input-label-required", dark ? "ath-form-input-label-required-dark" : "", className?.required);
+  return jsxs("label", {
+    className: labelClasses,
+    css: sx?.label,
+    ...other,
+    children: [label, required && jsx("span", {
+      className: requiredClasses,
+      css: sx?.required,
+      "aria-label": "required",
+      children: "*"
+    })]
+  });
+};
+
 const Carousel = ({
   children,
   className,
   emptyMessage = "Nothing here yet",
+  label,
   sx
 }) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);
   const carouselRef = useRef(null);
-  const carouselClasses = cx("ath-carousel", isHovered ? "ath-carousel-hover" : "", className?.carousel);
-  const hasItems = Children.count(children) > 0;
+  const carouselClasses = cx("ath-carousel", className?.carousel);
+  const itemCount = Children.count(children);
+  useLayoutEffect(() => {
+    const el = carouselRef.current;
+    if (!el) return;
+    const updateArrows = () => {
+      const hidden = el.scrollWidth - el.clientWidth;
+      setShowLeftArrow(el.scrollLeft > 1);
+      setShowRightArrow(hidden - el.scrollLeft > 1);
+    };
+    updateArrows();
+    el.addEventListener("scroll", updateArrows, {
+      passive: true
+    });
+    const observer = new ResizeObserver(updateArrows);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateArrows);
+      observer.disconnect();
+    };
+  }, [itemCount]);
   const scrollByPage = direction => {
     const el = carouselRef.current;
     if (!el) return;
@@ -2579,53 +2625,52 @@ const Carousel = ({
       behavior: "smooth"
     });
   };
-  const handleLeftArrowClick = () => {
-    scrollByPage(-1);
-  };
-  const handleRightArrowClick = () => {
-    scrollByPage(1);
-  };
   const handleMouseEnter = () => {
     setIsHovered(true);
   };
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-  return jsx("div", {
-    className: "ath-carousel-wrapper",
-    children: jsxs("div", {
-      className: carouselClasses,
-      css: sx?.carousel,
+  return jsxs("div", {
+    className: "ath-carousel-container",
+    style: {
+      minWidth: itemCount === 1 ? "" : 0
+    },
+    children: [label && jsx(FormLabel, {
+      label: label,
+      dark: true
+    }), jsxs("div", {
+      className: cx("ath-carousel-wrapper", isHovered && "ath-carousel-hover", label && "ath-carousel-label"),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      ref: carouselRef,
-      children: [jsx(Button, {
+      children: [showLeftArrow && jsx(Button, {
         className: {
           button: "ath-carousel-arrow ath-carousel-left-arrow"
         },
-        onClick: handleLeftArrowClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+        onClick: () => scrollByPage(-1),
         icon: jsx(HugeiconsIcon, {
           icon: Qt,
           size: 36
         })
-      }), hasItems ? children : jsx("div", {
-        className: "ath-carousel-empty",
-        children: emptyMessage
-      }), jsx(Button, {
+      }), jsx("div", {
+        className: carouselClasses,
+        css: sx?.carousel,
+        ref: carouselRef,
+        children: itemCount > 0 ? children : jsx("div", {
+          className: "ath-carousel-empty",
+          children: emptyMessage
+        })
+      }), showRightArrow && jsx(Button, {
         className: {
           button: "ath-carousel-arrow ath-carousel-right-arrow"
         },
-        onClick: handleRightArrowClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+        onClick: () => scrollByPage(1),
         icon: jsx(HugeiconsIcon, {
           icon: un,
           size: 36
         })
       })]
-    })
+    })]
   });
 };
 
@@ -2658,30 +2703,6 @@ const Dropdown = ({
   });
 };
 
-const FormLabel = ({
-  label,
-  required,
-  className,
-  labelPosition = "above",
-  dark,
-  sx,
-  ...other
-}) => {
-  const labelClasses = cx("ath-form-input-label", labelPosition ? `ath-form-input-label-${labelPosition}` : "", dark ? "ath-form-input-label-dark" : "", className?.label);
-  const requiredClasses = cx("ath-form-input-label-required", dark ? "ath-form-input-label-required-dark" : "", className?.required);
-  return jsxs("label", {
-    className: labelClasses,
-    css: sx?.label,
-    ...other,
-    children: [label, required && jsx("span", {
-      className: requiredClasses,
-      css: sx?.required,
-      "aria-label": "required",
-      children: "*"
-    })]
-  });
-};
-
 const FormTextInput = ({
   autoComplete,
   autoFocus,
@@ -2867,10 +2888,11 @@ const Header = ({
 const Main = ({
   children,
   className,
-  sx
+  sx,
+  width = "wide"
 }) => {
   const mainClasses = cx("ath-main", typeof className === "object" && className !== null ? className.main : "");
-  const mainContentClasses = cx("ath-main-content", typeof className === "object" && className !== null ? className.mainContent : "");
+  const mainContentClasses = cx("ath-main-content", typeof className === "object" && className !== null ? className.mainContent : "", width === "full" ? "full" : "", width === "wide" ? "wide" : "", width === "medium" ? "medium" : "", width === "narrow" ? "narrow" : "");
   return jsx("main", {
     css: sx?.main,
     className: mainClasses,
@@ -3028,7 +3050,7 @@ const Modal = ({
       children: [(title || showCloseButton) && jsxs("div", {
         css: sx?.header,
         className: headerClasses,
-        children: [title && jsx("h1", {
+        children: [title && jsx("h2", {
           css: sx?.title,
           className: titleClasses,
           id: titleId,
@@ -3206,192 +3228,182 @@ const breakpoints = {
 };
 const minWidth = width => `@media (min-width: ${width}px)`;
 const maxWidth = width => `@media (max-width: ${width - 1}px)`;
-const minXs = minWidth(breakpoints.xs);
-const minSm = minWidth(breakpoints.sm);
-const minMd = minWidth(breakpoints.md);
-const minLg = minWidth(breakpoints.lg);
-const minXl = minWidth(breakpoints.xl);
-const min2xl = minWidth(breakpoints["2xl"]);
-const min3xl = minWidth(breakpoints["3xl"]);
-const min4xl = minWidth(breakpoints["4xl"]);
-const maxXs = maxWidth(breakpoints.xs);
-const maxSm = maxWidth(breakpoints.sm);
-const maxMd = maxWidth(breakpoints.md);
-const maxLg = maxWidth(breakpoints.lg);
-const maxXl = maxWidth(breakpoints.xl);
-const max2xl = maxWidth(breakpoints["2xl"]);
-const max3xl = maxWidth(breakpoints["3xl"]);
-const max4xl = maxWidth(breakpoints["4xl"]);
-
-const tokens = {
-  font: {
-    family: {
-      sans: "Montserrat, sans-serif",
-      serif: "Libre Baskerville, serif"
-    },
-    size: {
-      xs: "0.75rem",
-      sm: "0.875rem",
-      md: "1rem",
-      lg: "1.25rem",
-      xl: "1.5rem",
-      "2xl": "2rem",
-      "3xl": "2.5rem",
-      "4xl": "3rem",
-      "5xl": "3.5rem"
+const media = {
+  min: {
+    xs: minWidth(breakpoints.xs),
+    sm: minWidth(breakpoints.sm),
+    md: minWidth(breakpoints.md),
+    lg: minWidth(breakpoints.lg),
+    xl: minWidth(breakpoints.xl),
+    "2xl": minWidth(breakpoints["2xl"]),
+    "3xl": minWidth(breakpoints["3xl"]),
+    "4xl": minWidth(breakpoints["4xl"])
+  },
+  max: {
+    xs: maxWidth(breakpoints.xs),
+    sm: maxWidth(breakpoints.sm),
+    md: maxWidth(breakpoints.md),
+    lg: maxWidth(breakpoints.lg),
+    xl: maxWidth(breakpoints.xl),
+    "2xl": maxWidth(breakpoints["2xl"]),
+    "3xl": maxWidth(breakpoints["3xl"]),
+    "4xl": maxWidth(breakpoints["4xl"])
+  }
+};
+const font = {
+  family: {
+    sans: "Montserrat, sans-serif",
+    serif: "Libre Baskerville, serif"
+  },
+  size: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "1.5rem",
+    "2xl": "2rem",
+    "3xl": "2.5rem",
+    "4xl": "3rem",
+    "5xl": "3.5rem"
+  }
+};
+const color = {
+  primary: {
+    "50": "#f0f2f5",
+    "100": "#d9dee6",
+    "200": "#b8c3d1",
+    "300": "#8a9bae",
+    "400": "#4a5f7a",
+    "500": "#0b1828",
+    "600": "#081320",
+    "700": "#060e18",
+    "800": "#04090f",
+    "900": "#020407",
+    default: "#0b1828",
+    vibrant: {
+      "300": "#8ab6ff",
+      "500": "#4f86f7",
+      "700": "#1e3a8a"
     }
   },
-  color: {
-    primary: {
-      "50": "#f0f2f5",
-      "100": "#d9dee6",
-      "200": "#b8c3d1",
-      "300": "#8a9bae",
-      "400": "#4a5f7a",
-      "500": "#0b1828",
-      "600": "#081320",
-      "700": "#060e18",
-      "800": "#04090f",
-      "900": "#020407",
-      "default": "#0b1828",
-      vibrant: {
-        "300": "#8ab6ff",
-        "500": "#4f86f7",
-        "700": "#1e3a8a"
-      }
-    },
-    secondary: {
-      "50": "#e6f7f6",
-      "100": "#b3e8e5",
-      "200": "#80d9d4",
-      "300": "#4dcac3",
-      "400": "#2aa39b",
-      "500": "#146b68",
-      "600": "#125a57",
-      "700": "#0f4a47",
-      "800": "#0c3835",
-      "900": "#081f1c",
-      "default": "#146b68",
-      vibrant: {
-        "300": "#75dac7",
-        "500": "#1abc9c",
-        "700": "#138f6e"
-      }
-    },
-    tertiary: {
-      "50": "#f7f4f0",
-      "100": "#eedecc",
-      "200": "#e5c8a8",
-      "300": "#dcb184",
-      "400": "#d19b60",
-      "500": "#bfa081",
-      "600": "#a68965",
-      "700": "#7d6748",
-      "800": "#54442c",
-      "900": "#2b2216",
-      "default": "#bfa081",
-      vibrant: {
-        "300": "#f7c873",
-        "500": "#f39c12",
-        "700": "#c9780e"
-      }
-    },
-    error: {
-      "50": "#fee6e6",
-      "100": "#fbb3b3",
-      "200": "#f88080",
-      "300": "#f54d4d",
-      "400": "#f21a1a",
-      "500": "#9f0001",
-      "600": "#800001",
-      "700": "#600001",
-      "800": "#400000",
-      "900": "#200000",
-      "default": "#9f0001",
-      vibrant: {
-        "300": "#f48a6f",
-        "500": "#e74c3c",
-        "700": "#c0392b"
-      }
-    },
-    warning: {
-      "50": "#fef5ec",
-      "100": "#fdebda",
-      "200": "#fad8b3",
-      "300": "#f8c48c",
-      "400": "#f5b065",
+  secondary: {
+    "50": "#e6f7f6",
+    "100": "#b3e8e5",
+    "200": "#80d9d4",
+    "300": "#4dcac3",
+    "400": "#2aa39b",
+    "500": "#146b68",
+    "600": "#125a57",
+    "700": "#0f4a47",
+    "800": "#0c3835",
+    "900": "#081f1c",
+    default: "#146b68",
+    vibrant: {
+      "300": "#75dac7",
+      "500": "#1abc9c",
+      "700": "#138f6e"
+    }
+  },
+  tertiary: {
+    "50": "#f7f4f0",
+    "100": "#eedecc",
+    "200": "#e5c8a8",
+    "300": "#dcb184",
+    "400": "#d19b60",
+    "500": "#bfa081",
+    "600": "#a68965",
+    "700": "#7d6748",
+    "800": "#54442c",
+    "900": "#2b2216",
+    default: "#bfa081",
+    vibrant: {
+      "300": "#f7c873",
       "500": "#f39c12",
-      "600": "#c27d0e",
-      "700": "#925e0b",
-      "800": "#613e07",
-      "900": "#311f04",
-      "default": "#f39c12",
-      vibrant: {
-        "300": "#fce705",
-        "500": "#fbc306",
-        "700": "#f8950a"
-      }
-    },
-    success: {
-      "50": "#e8f5f2",
-      "100": "#d1ece4",
-      "200": "#a3d8ca",
-      "300": "#76c5af",
-      "400": "#48b195",
-      "500": "#1a9e7a",
-      "600": "#157e62",
-      "700": "#105f49",
-      "800": "#0a3f31",
-      "900": "#052018",
-      "default": "#1a9e7a",
-      vibrant: {
-        "300": "#07e71f",
-        "500": "#08e27e",
-        "700": "#26b656"
-      }
-    },
-    text: {
-      dark: "#040a0c",
-      light: "#fcfbf7"
-    },
-    background: {
-      light: "#fcfbf7",
-      dark: "#040a0c"
+      "700": "#c9780e"
     }
   },
-  padding: {
-    xs: "2px",
-    sm: "4px",
-    md: "6px",
-    lg: "10px",
-    xl: "16px"
+  error: {
+    "50": "#fee6e6",
+    "100": "#fbb3b3",
+    "200": "#f88080",
+    "300": "#f54d4d",
+    "400": "#f21a1a",
+    "500": "#9f0001",
+    "600": "#800001",
+    "700": "#600001",
+    "800": "#400000",
+    "900": "#200000",
+    default: "#9f0001",
+    vibrant: {
+      "300": "#f48a6f",
+      "500": "#e74c3c",
+      "700": "#c0392b"
+    }
   },
-  radius: {
-    sm: "3px",
-    md: "5px",
-    lg: "8px"
+  warning: {
+    "50": "#fef5ec",
+    "100": "#fdebda",
+    "200": "#fad8b3",
+    "300": "#f8c48c",
+    "400": "#f5b065",
+    "500": "#f39c12",
+    "600": "#c27d0e",
+    "700": "#925e0b",
+    "800": "#613e07",
+    "900": "#311f04",
+    default: "#f39c12",
+    vibrant: {
+      "300": "#fce705",
+      "500": "#fbc306",
+      "700": "#f8950a"
+    }
   },
-  media: {
-    min: {
-      xs: "@media (min-width: 320px)",
-      sm: "@media (min-width: 480px)",
-      md: "@media (min-width: 620px)",
-      lg: "@media (min-width: 768px)",
-      xl: "@media (min-width: 896px)",
-      "2xl": "@media (min-width: 1024px)",
-      "3xl": "@media (min-width: 1280px)"
-    },
-    max: {
-      xs: "@media (max-width: 319px)",
-      sm: "@media (max-width: 479px)",
-      md: "@media (max-width: 767px)",
-      lg: "@media (max-width: 895px)",
-      xl: "@media (max-width: 1023px)",
-      "2xl": "@media (max-width: 1279px)",
-      "3xl": "@media (max-width: 1535px)"
+  success: {
+    "50": "#e8f5f2",
+    "100": "#d1ece4",
+    "200": "#a3d8ca",
+    "300": "#76c5af",
+    "400": "#48b195",
+    "500": "#1a9e7a",
+    "600": "#157e62",
+    "700": "#105f49",
+    "800": "#0a3f31",
+    "900": "#052018",
+    default: "#1a9e7a",
+    vibrant: {
+      "300": "#07e71f",
+      "500": "#08e27e",
+      "700": "#26b656"
     }
+  },
+  text: {
+    dark: "#040a0c",
+    light: "#fcfbf7"
+  },
+  background: {
+    light: "#fcfbf7",
+    dark: "#040a0c"
   }
 };
+const padding = {
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "10px",
+  xl: "16px"
+};
+const radius = {
+  sm: "3px",
+  md: "5px",
+  lg: "8px"
+};
+const tokens = {
+  font,
+  color,
+  media,
+  padding,
+  radius
+};
 
-export { Accordion, AccordionItem, Avatar, Block, Button, ButtonGroup, Carousel, ContainerScalingText, Dropdown, Footer, FormField, FormLabel, FormTextInput, Header, List, ListItem, Main, Modal, ScrollToTopButton, Search, SlideOut, breakpoints, cx, max2xl, max3xl, max4xl, maxLg, maxMd, maxSm, maxXl, maxXs, min2xl, min3xl, min4xl, minLg, minMd, minSm, minXl, minXs, tokens };
+export { Accordion, AccordionItem, Avatar, Block, Button, ButtonGroup, Carousel, ContainerScalingText, Dropdown, Footer, FormField, FormLabel, FormTextInput, Header, List, ListItem, Main, Modal, ScrollToTopButton, Search, SlideOut, breakpoints, color, cx, font, media, padding, radius, tokens };
 //# sourceMappingURL=athameui.mjs.map