@nation-a/ui 0.14.0 → 0.15.0

package/dist/index.cjs

@@ -888,6 +888,8 @@ const buttonRecipe = cva({
       heyd_primary: {},
       heyd_secondary: {},
       heybee_primary: {},
+      blackAlpha: {},
+      whiteAlpha: {},
       neutral: {},
       danger: {},
       warning: {},
@@ -1013,6 +1015,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",
@@ -9963,7 +9983,7 @@ const Button = ({ loading, disabled, loadingText, children, color: color2, varia
     }
   );
 };
-const index$4 = React.memo(withPolymorphicComponent(Button));
+const index$5 = React.memo(withPolymorphicComponent(Button));
 const textRecipe = cva({
   base: {
     color: "currentcolor"
@@ -10291,6 +10311,8 @@ const iconButtonRecipe = cva({
       zoltarina_primary: {},
       heyd_primary: {},
       heybee_primary: {},
+      blackAlpha: {},
+      whiteAlpha: {},
       neutral: {}
     },
     size: {
@@ -10360,6 +10382,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",
@@ -10405,7 +10445,7 @@ const IconButton = React.forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-const index$3 = React.memo(withPolymorphicComponent(IconButton));
+const index$4 = React.memo(withPolymorphicComponent(IconButton));
 const LayoutGroupContext = React.createContext({});
 function useConstant(init) {
   const ref = React.useRef(null);
@@ -19546,7 +19586,7 @@ const Tag = React.forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) =
   ] });
 });
 Tag.displayName = "Tag";
-const index$2 = React.memo(Tag);
+const index$3 = React.memo(Tag);
 const inputRecipe = sva({
   className: "input",
   slots: ["inputContainer", "requiredStar", "description", "label", "textLengthIndicator", "adornment"],
@@ -19841,7 +19881,7 @@ const Input = React.forwardRef(
   }
 );
 Input.displayName = "Input";
-const index$1 = React.memo(Input);
+const index$2 = React.memo(Input);
 const Textarea = React.forwardRef(
   ({
     value,
@@ -19924,7 +19964,7 @@ const Textarea = React.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-const index = React.memo(Textarea);
+const index$1 = React.memo(Textarea);
 const tabsRecipe = sva({
   className: "tabs",
   slots: anatomy.keys(),
@@ -21230,6 +21270,115 @@ const Switch = React.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 = React.forwardRef(({ loading, disabled, children, color: color2, ...rest }, ref) => {
+  const StyledButton = styled(ark.button, fabRecipe);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledButton,
+    {
+      disabled,
+      ref,
+      color: color2,
+      css: { pointerEvents: loading ? "none" : "auto" },
+      ...rest,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Center$1,
+          {
+            inline: true,
+            css: {
+              position: "absolute",
+              transform: "translate(-50%, -50%)",
+              top: "50%",
+              insetStart: "50%"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.span, { css: { opacity: 0 }, children })
+      ] }) : children
+    }
+  );
+});
+Fab.displayName = "Fab";
+const index = React.memo(withPolymorphicComponent(Fab));
 function definePreset(preset2) {
   return preset2;
 }
@@ -21542,16 +21691,17 @@ const preset = definePreset({
 });
 exports.BottomSheet = BottomSheet;
 exports.Box = Box2;
-exports.Button = index$4;
+exports.Button = index$5;
 exports.Center = Center2;
 exports.Checkbox = Checkbox;
 exports.Dialog = Dialog;
+exports.Fab = index;
 exports.Flex = Flex2;
 exports.Grid = Grid2;
 exports.GridItem = GridItem2;
 exports.HStack = HStack2;
-exports.IconButton = index$3;
-exports.Input = index$1;
+exports.IconButton = index$4;
+exports.Input = index$2;
 exports.Navigation = Navigation;
 exports.Portal = Portal;
 exports.RadioGroup = RadioGroup;
@@ -21560,9 +21710,9 @@ exports.Spinner = Spinner;
 exports.Stack = Stack2;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
-exports.Tag = index$2;
+exports.Tag = index$3;
 exports.Text = Text;
-exports.TextArea = index;
+exports.TextArea = index$1;
 exports.Toast = Toast;
 exports.VStack = VStack2;
 exports.createListCollection = createListCollection;