athameui 0.0.10 → 0.0.12

package/components/Button/Button.tsx

@@ -29,6 +29,7 @@ export type ButtonProps = {
   textPosition?: "left" | "center" | "right";
   type?: "button" | "submit" | "reset";
   variant?: ButtonVariant;
+  wrap?: boolean;
 
   onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onClick?: MouseEventHandler<HTMLButtonElement>;
@@ -52,6 +53,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       type = "button",
       textPosition = "center",
       variant = "secondary",
+      wrap = false,
 
       onBlur,
       onClick,
@@ -71,6 +73,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       buttonVariants.variant[variant],
       isIconOnly ? "ath-button-icon-only" : "",
       dark ? buttonVariants.dark : "",
+      wrap ? buttonVariants.wrap : "",
     );
 
     const buttonClasses = cx(

package/components/Button/button.variants.ts

@@ -21,6 +21,7 @@ export const buttonVariants = {
     ghost: "ath-button-ghost",
   },
   dark: "ath-button-dark",
+  wrap: "ath-button-wrap",
 } as const;
 
 export type ButtonSize = keyof typeof buttonVariants.size;

package/components/Carousel/Carousel.tsx

@@ -19,7 +19,7 @@ export type CarouselProps = {
 export const Carousel = ({
   children,
   className,
-  emptyMessage,
+  emptyMessage = "Nothing here yet",
   sx,
 }: CarouselProps) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -70,7 +70,11 @@ export const Carousel = ({
           onMouseLeave={handleMouseLeave}
           icon={<HugeiconsIcon icon={ArrowLeftIcon} size={36} />}
         />
-        {hasItems ? children : emptyMessage}
+        {hasItems ? (
+          children
+        ) : (
+          <div className="ath-carousel-empty">{emptyMessage}</div>
+        )}
         <Button
           className={{ button: "ath-carousel-arrow ath-carousel-right-arrow" }}
           onClick={handleRightArrowClick}

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/dist/athameui.cjs

@@ -2180,7 +2180,8 @@ const buttonVariants = {
     outline: "ath-button-outline",
     ghost: "ath-button-ghost"
   },
-  dark: "ath-button-dark"
+  dark: "ath-button-dark",
+  wrap: "ath-button-wrap"
 };
 
 const Button = /*#__PURE__*/React.forwardRef(({
@@ -2195,6 +2196,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   type = "button",
   textPosition = "center",
   variant = "secondary",
+  wrap = false,
   onBlur,
   onClick,
   onFocus,
@@ -2204,7 +2206,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   ...other
 }, ref) => {
   const isIconOnly = icon && !children;
-  const sharedClasses = cx("ath-button", buttonVariants.size[size], buttonVariants.variant[variant], isIconOnly ? "ath-button-icon-only" : "", dark ? buttonVariants.dark : "");
+  const sharedClasses = cx("ath-button", buttonVariants.size[size], buttonVariants.variant[variant], isIconOnly ? "ath-button-icon-only" : "", dark ? buttonVariants.dark : "", wrap ? buttonVariants.wrap : "");
   const buttonClasses = cx(sharedClasses, buttonVariants.textPosition[textPosition], typeof className === "object" && className !== null ? className.button : className);
   const onClickHandler = e => {
     onClick?.(e);
@@ -2583,7 +2585,7 @@ const ButtonGroup = ({
 const Carousel = ({
   children,
   className,
-  emptyMessage,
+  emptyMessage = "Nothing here yet",
   sx
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
@@ -2629,7 +2631,10 @@ const Carousel = ({
           icon: Qt,
           size: 36
         })
-      }), hasItems ? children : emptyMessage, jsx(Button, {
+      }), hasItems ? children : jsx("div", {
+        className: "ath-carousel-empty",
+        children: emptyMessage
+      }), jsx(Button, {
         className: {
           button: "ath-carousel-arrow ath-carousel-right-arrow"
         },
@@ -2769,7 +2774,7 @@ const FormField = ({
   ...other
 }) => {
   const textAreaRef = React.useRef(null);
-  const containerClasses = cx("ath-form-input-container", (labelPosition === "left" || labelPosition === "right") && "ath-form-input-container-horizontal", className?.container ? className.container : "");
+  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 : "");
   const inputSharedClasses = cx(`ath-form-input-${size}`, disabled && "ath-form-input-shared-disabled", readOnly && "ath-form-input-shared-readonly", dark && "ath-form-input-shared-dark", className?.input ? className.input : "");
   const inputClasses = cx("ath-form-input", inputSharedClasses, error && "ath-form-input-error");
   const textAreaClasses = cx("ath-form-textarea", inputSharedClasses, autoResize && "ath-form-textarea-auto-resize", error && "ath-form-textarea-error");
@@ -3220,6 +3225,24 @@ const breakpoints = {
   "3xl": 1280,
   "4xl": 1536
 };
+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: {
@@ -3414,5 +3437,21 @@ exports.Search = Search;
 exports.SlideOut = SlideOut;
 exports.breakpoints = breakpoints;
 exports.cx = cx;
+exports.max2xl = max2xl;
+exports.max3xl = max3xl;
+exports.max4xl = max4xl;
+exports.maxLg = maxLg;
+exports.maxMd = maxMd;
+exports.maxSm = maxSm;
+exports.maxXl = maxXl;
+exports.maxXs = maxXs;
+exports.min2xl = min2xl;
+exports.min3xl = min3xl;
+exports.min4xl = min4xl;
+exports.minLg = minLg;
+exports.minMd = minMd;
+exports.minSm = minSm;
+exports.minXl = minXl;
+exports.minXs = minXs;
 exports.tokens = tokens;
 //# sourceMappingURL=athameui.cjs.map