athameui 0.0.10 → 0.0.11

package/dist/athameui.mjs

@@ -2159,7 +2159,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__*/forwardRef(({
@@ -2174,6 +2175,7 @@ const Button = /*#__PURE__*/forwardRef(({
   type = "button",
   textPosition = "center",
   variant = "secondary",
+  wrap = false,
   onBlur,
   onClick,
   onFocus,
@@ -2182,8 +2184,9 @@ const Button = /*#__PURE__*/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);
@@ -3199,6 +3202,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: {
@@ -3370,5 +3391,5 @@ const tokens = {
   }
 };
 
-export { Accordion, AccordionItem, Avatar, Block, Button, ButtonGroup, Carousel, ContainerScalingText, Dropdown, Footer, FormField, FormLabel, FormTextInput, Header, List, ListItem, Main, Modal, ScrollToTopButton, Search, SlideOut, breakpoints, cx, tokens };
+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 };
 //# sourceMappingURL=athameui.mjs.map