@nation-a/ui 0.14.0 → 0.15.0

package/dist/index.js

@@ -870,6 +870,8 @@ const buttonRecipe = cva({
       heyd_primary: {},
       heyd_secondary: {},
       heybee_primary: {},
+      blackAlpha: {},
+      whiteAlpha: {},
       neutral: {},
       danger: {},
       warning: {},
@@ -995,6 +997,24 @@ const buttonRecipe = cva({
         _hover: { background: "background.heybeePrimary.selected" }
       }
     },
+    {
+      variant: "solid",
+      color: "blackAlpha",
+      css: {
+        background: "background.static.blackAlpha.default",
+        color: "content.neutral.default",
+        _hover: { background: "background.static.blackAlpha.selected" }
+      }
+    },
+    {
+      variant: "solid",
+      color: "whiteAlpha",
+      css: {
+        background: "background.static.whiteAlpha.default",
+        color: "content.neutral.default",
+        _hover: { background: "background.static.whiteAlpha.selected" }
+      }
+    },
     {
       variant: "solid",
       color: "neutral",
@@ -9945,7 +9965,7 @@ const Button = ({ loading, disabled, loadingText, children, color: color2, varia
     }
   );
 };
-const index$4 = memo$2(withPolymorphicComponent(Button));
+const index$5 = memo$2(withPolymorphicComponent(Button));
 const textRecipe = cva({
   base: {
     color: "currentcolor"
@@ -10273,6 +10293,8 @@ const iconButtonRecipe = cva({
       zoltarina_primary: {},
       heyd_primary: {},
       heybee_primary: {},
+      blackAlpha: {},
+      whiteAlpha: {},
       neutral: {}
     },
     size: {
@@ -10342,6 +10364,24 @@ const iconButtonRecipe = cva({
         _hover: { background: "background.heybeePrimary.selected" }
       }
     },
+    {
+      variant: "solid",
+      color: "blackAlpha",
+      css: {
+        background: "background.static.blackAlpha.default",
+        color: "content.neutral.default",
+        _hover: { background: "background.static.blackAlpha.selected" }
+      }
+    },
+    {
+      variant: "solid",
+      color: "whiteAlpha",
+      css: {
+        background: "background.static.whiteAlpha.default",
+        color: "content.neutral.default",
+        _hover: { background: "background.static.whiteAlpha.selected" }
+      }
+    },
     {
       variant: "solid",
       color: "neutral",
@@ -10387,7 +10427,7 @@ const IconButton = forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-const index$3 = memo$2(withPolymorphicComponent(IconButton));
+const index$4 = memo$2(withPolymorphicComponent(IconButton));
 const LayoutGroupContext = createContext$1({});
 function useConstant(init) {
   const ref = useRef(null);
@@ -19528,7 +19568,7 @@ const Tag = forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) => {
   ] });
 });
 Tag.displayName = "Tag";
-const index$2 = memo$2(Tag);
+const index$3 = memo$2(Tag);
 const inputRecipe = sva({
   className: "input",
   slots: ["inputContainer", "requiredStar", "description", "label", "textLengthIndicator", "adornment"],
@@ -19823,7 +19863,7 @@ const Input = forwardRef(
   }
 );
 Input.displayName = "Input";
-const index$1 = memo$2(Input);
+const index$2 = memo$2(Input);
 const Textarea = forwardRef(
   ({
     value,
@@ -19906,7 +19946,7 @@ const Textarea = forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-const index = memo$2(Textarea);
+const index$1 = memo$2(Textarea);
 const tabsRecipe = sva({
   className: "tabs",
   slots: anatomy.keys(),
@@ -21212,6 +21252,115 @@ const Switch = forwardRef((props, ref) => {
   ] });
 });
 Switch.displayName = "Switch";
+const fabRecipe = cva({
+  base: {
+    alignItems: "center",
+    appearance: "none",
+    cursor: "pointer",
+    display: "inline-flex",
+    isolation: "isolate",
+    minWidth: "0",
+    justifyContent: "center",
+    outline: "none",
+    position: "relative",
+    transitionDuration: "normal",
+    transitionProperty: "background, border-color, color, box-shadow",
+    transitionTimingFunction: "default",
+    userSelect: "none",
+    verticalAlign: "middle",
+    borderRadius: "full",
+    color: "content.neutral.bold",
+    h: 14,
+    w: 14,
+    shadow: "overlay",
+    "& :where(svg)": {
+      width: "24px",
+      height: "24px"
+    },
+    _hidden: {
+      display: "none"
+    },
+    _disabled: {
+      background: "background.neutral.disabled",
+      color: "content.neutral.disabled",
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    }
+  },
+  defaultVariants: {
+    color: "neutral"
+  },
+  variants: {
+    color: {
+      neuroid_primary: {
+        background: "background.neuroidPrimary.default",
+        color: "content.neutral.bold",
+        _hover: { background: "background.neuroidPrimary.selected" }
+      },
+      zoltarina_primary: {
+        background: "background.zoltarinaPrimary.default",
+        color: "content.static.black.bold",
+        _hover: { background: "background.zoltarinaPrimary.selected" }
+      },
+      heyd_primary: {
+        background: "background.heydPrimary.default",
+        color: "content.static.black.bold",
+        _hover: { background: "background.heydPrimary.selected" }
+      },
+      heybee_primary: {
+        background: "background.heybeePrimary.default",
+        color: "content.static.black.bold",
+        _hover: { background: "background.heybeePrimary.selected" }
+      },
+      blackAlpha: {
+        background: "background.static.blackAlpha.default",
+        color: "content.neutral.default",
+        _hover: { background: "background.static.blackAlpha.selected" }
+      },
+      whiteAlpha: {
+        background: "background.static.whiteAlpha.default",
+        color: "content.neutral.default",
+        _hover: { background: "background.static.whiteAlpha.selected" }
+      },
+      neutral: {
+        background: "background.neutral.default",
+        color: "content.neutral.bold",
+        _hover: { background: "background.neutral.selected" }
+      }
+    }
+  }
+});
+const Fab = forwardRef(({ loading, disabled, children, color: color2, ...rest }, ref) => {
+  const StyledButton = styled(ark.button, fabRecipe);
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      disabled,
+      ref,
+      color: color2,
+      css: { pointerEvents: loading ? "none" : "auto" },
+      ...rest,
+      children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Center$1,
+          {
+            inline: true,
+            css: {
+              position: "absolute",
+              transform: "translate(-50%, -50%)",
+              top: "50%",
+              insetStart: "50%"
+            },
+            children: /* @__PURE__ */ jsx(Spinner, { size: "md" })
+          }
+        ),
+        /* @__PURE__ */ jsx(styled.span, { css: { opacity: 0 }, children })
+      ] }) : children
+    }
+  );
+});
+Fab.displayName = "Fab";
+const index = memo$2(withPolymorphicComponent(Fab));
 function definePreset(preset2) {
   return preset2;
 }
@@ -21525,16 +21674,17 @@ const preset = definePreset({
 export {
   BottomSheet,
   Box2 as Box,
-  index$4 as Button,
+  index$5 as Button,
   Center2 as Center,
   Checkbox,
   Dialog,
+  index as Fab,
   Flex2 as Flex,
   Grid2 as Grid,
   GridItem2 as GridItem,
   HStack2 as HStack,
-  index$3 as IconButton,
-  index$1 as Input,
+  index$4 as IconButton,
+  index$2 as Input,
   Navigation,
   Portal,
   RadioGroup,
@@ -21543,9 +21693,9 @@ export {
   Stack2 as Stack,
   Switch,
   Tabs,
-  index$2 as Tag,
+  index$3 as Tag,
   Text,
-  index as TextArea,
+  index$1 as TextArea,
   Toast,
   VStack2 as VStack,
   createListCollection,