athameui 0.0.10 → 0.0.11

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,
@@ -63,6 +65,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
+    console.log(sx);
     const isIconOnly = icon && !children;
 
     const sharedClasses = cx(
@@ -71,6 +74,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/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,
@@ -2203,8 +2205,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
   onMouseLeave,
   ...other
 }, ref) => {
+  console.log(sx);
   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);
@@ -3220,6 +3223,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 +3435,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