athameui 0.0.11 → 0.0.13

package/components/Button/Button.tsx

@@ -65,7 +65,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    console.log(sx);
     const isIconOnly = icon && !children;
 
     const sharedClasses = cx(

package/components/Carousel/Carousel.tsx

@@ -1,7 +1,14 @@
-import { Children, useState, useRef, type ReactNode } from "react";
+import {
+  Children,
+  useState,
+  useRef,
+  useLayoutEffect,
+  type ReactNode,
+} from "react";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 import { Button } from "../Button/Button";
+import { FormLabel } from "../FormLabel/FormLabel";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@hugeicons/core-free-icons";
 
@@ -11,6 +18,7 @@ export type CarouselProps = {
     carousel?: string | false | null | undefined;
   };
   emptyMessage?: string;
+  label?: string;
   sx?: {
     carousel?: CSSObject;
   };
@@ -19,17 +27,36 @@ export type CarouselProps = {
 export const Carousel = ({
   children,
   className,
-  emptyMessage,
+  emptyMessage = "Nothing here yet",
+  label,
   sx,
 }: CarouselProps) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);
   const carouselRef = useRef<HTMLDivElement>(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: -1 | 1) => {
     const el = carouselRef.current;
@@ -40,13 +67,6 @@ export const Carousel = ({
     });
   };
 
-  const handleLeftArrowClick = () => {
-    scrollByPage(-1);
-  };
-  const handleRightArrowClick = () => {
-    scrollByPage(1);
-  };
-
   const handleMouseEnter = () => {
     setIsHovered(true);
   };
@@ -55,29 +75,43 @@ export const Carousel = ({
   };
 
   return (
-    <div className="ath-carousel-wrapper">
+    <div
+      className="ath-carousel-container"
+      style={{ minWidth: itemCount === 1 ? "" : 0 }}
+    >
+      {label && <FormLabel label={label} dark />}
       <div
-        className={carouselClasses}
-        css={sx?.carousel}
+        className={cx(
+          "ath-carousel-wrapper",
+          isHovered && "ath-carousel-hover",
+          label && "ath-carousel-label",
+        )}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        ref={carouselRef}
       >
-        <Button
-          className={{ button: "ath-carousel-arrow ath-carousel-left-arrow" }}
-          onClick={handleLeftArrowClick}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          icon={<HugeiconsIcon icon={ArrowLeftIcon} size={36} />}
-        />
-        {hasItems ? children : emptyMessage}
-        <Button
-          className={{ button: "ath-carousel-arrow ath-carousel-right-arrow" }}
-          onClick={handleRightArrowClick}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          icon={<HugeiconsIcon icon={ArrowRightIcon} size={36} />}
-        />
+        {showLeftArrow && (
+          <Button
+            className={{ button: "ath-carousel-arrow ath-carousel-left-arrow" }}
+            onClick={() => scrollByPage(-1)}
+            icon={<HugeiconsIcon icon={ArrowLeftIcon} size={36} />}
+          />
+        )}
+        <div className={carouselClasses} css={sx?.carousel} ref={carouselRef}>
+          {itemCount > 0 ? (
+            children
+          ) : (
+            <div className="ath-carousel-empty">{emptyMessage}</div>
+          )}
+        </div>
+        {showRightArrow && (
+          <Button
+            className={{
+              button: "ath-carousel-arrow ath-carousel-right-arrow",
+            }}
+            onClick={() => scrollByPage(1)}
+            icon={<HugeiconsIcon icon={ArrowRightIcon} size={36} />}
+          />
+        )}
       </div>
     </div>
   );

package/components/FormField/FormField.tsx

@@ -92,6 +92,7 @@ export const FormField: React.FC<FormFieldProps> = ({
 
   const containerClasses = cx(
     "ath-form-input-container",
+    readOnly && "ath-form-input-container-readonly",
     (labelPosition === "left" || labelPosition === "right") &&
       "ath-form-input-container-horizontal",
     className?.container ? className.container : "",

package/components/Layout/Main.tsx

@@ -8,14 +8,19 @@ type MainProps = {
     main?: string | false | null | undefined;
     mainContent?: string | false | null | undefined;
   };
-
+  width?: "full" | "wide" | "medium" | "narrow";
   sx?: {
     main?: CSSObject;
     mainContent?: CSSObject;
   };
 };
 
-export const Main = ({ children, className, sx }: MainProps) => {
+export const Main = ({
+  children,
+  className,
+  sx,
+  width = "wide",
+}: MainProps) => {
   const mainClasses = cx(
     "ath-main",
     typeof className === "object" && className !== null ? className.main : "",
@@ -26,6 +31,10 @@ export const Main = ({ children, className, sx }: MainProps) => {
     typeof className === "object" && className !== null
       ? className.mainContent
       : "",
+    width === "full" ? "full" : "",
+    width === "wide" ? "wide" : "",
+    width === "medium" ? "medium" : "",
+    width === "narrow" ? "narrow" : "",
   );
 
   return (

package/components/Modal/Modal.tsx

@@ -181,9 +181,9 @@ export const Modal: React.FC<ModalProps> = ({
         {(title || showCloseButton) && (
           <div css={sx?.header} className={headerClasses}>
             {title && (
-              <h1 css={sx?.title} className={titleClasses} id={titleId}>
+              <h2 css={sx?.title} className={titleClasses} id={titleId}>
                 {title}
-              </h1>
+              </h2>
             )}
             {showCloseButton && (
               <Button