@nation-a/ui 0.5.0 → 0.5.1

package/dist/index.cjs

@@ -2172,6 +2172,12 @@ const DialogBackdrop = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
+const DialogCloseTrigger = React.forwardRef((props, ref) => {
+  const dialog = useDialogContext();
+  const mergedProps = mergeProps(dialog.getCloseTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.button, { ...mergedProps, ref });
+});
+DialogCloseTrigger.displayName = "DialogCloseTrigger";
 const DialogContent = React.forwardRef((props, ref) => {
   const dialog = useDialogContext();
   const presence = usePresenceContext();
@@ -3717,6 +3723,14 @@ const textRecipe = cva({
     variant: "body.md"
   },
   variants: {
+    font: {
+      inter: {
+        fontFamily: "inter"
+      },
+      notoSans: {
+        fontFamily: "notoSans"
+      }
+    },
     variant: {
       "display.lg": {
         textStyle: "display.lg"
@@ -3736,6 +3750,9 @@ const textRecipe = cva({
       "title.md": {
         textStyle: "title.md"
       },
+      "title.sm": {
+        textStyle: "title.sm"
+      },
       "body.lg": {
         textStyle: "body.lg"
       },
@@ -3755,7 +3772,7 @@ const textRecipe = cva({
   }
 });
 const Text = React.forwardRef((props, ref) => {
-  const { variant = "body.md", children, ...rest } = props;
+  const { variant = "body.md", font = "notoSans", children, ...rest } = props;
   const textType = (variant == null ? void 0 : variant.split(".")[0]) || "body";
   const componentMap = {
     display: styled("h1", textRecipe),
@@ -3765,7 +3782,7 @@ const Text = React.forwardRef((props, ref) => {
     label: styled("span", textRecipe)
   };
   const TextComponent = componentMap[textType];
-  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ref, textStyle: variant, ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { ref, textStyle: variant, font, ...rest, children });
 });
 Text.displayName = "Text";
 const shouldForwardProp = (prop, variantKeys, options = {}) => {
@@ -3815,7 +3832,7 @@ const createStyleContext = (recipe) => {
 };
 const dialogRecipe = sva({
   className: "dialog",
-  slots: anatomy.keys(),
+  slots: [...anatomy.keys(), "header", "footer", "body"],
   base: {
     backdrop: {
       backdropFilter: "blur(4px)",
@@ -3844,17 +3861,22 @@ const dialogRecipe = sva({
       overflow: "auto",
       position: "fixed",
       top: "0",
-      width: "full",
-      height: "full",
-      zIndex: "modal"
+      width: "100vw",
+      height: "100vh",
+      zIndex: "modal",
+      p: "4"
     },
     content: {
-      background: "white",
-      borderRadius: "sm",
-      boxShadow: "overlay",
-      minW: "sm",
       position: "relative",
-      p: "3",
+      backgroundColor: "surface.layer_1",
+      borderRadius: "lg",
+      width: "full",
+      minW: "xs",
+      maxW: "md",
+      display: "flex",
+      flexDirection: "column",
+      gap: "6",
+      py: "4",
       _open: {
         animation: "dialog-in"
       },
@@ -3862,12 +3884,36 @@ const dialogRecipe = sva({
         animation: "dialog-out"
       }
     },
+    closeTrigger: {
+      position: "absolute",
+      top: "4",
+      right: "4"
+    },
     title: {
-      textStyle: "title.lg"
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      color: "content.neutral.default",
+      textStyle: "headline.sm"
     },
     description: {
-      color: "content.neutral.default_inverse",
+      color: "content.neutral.default",
       textStyle: "body.md"
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      px: "6"
+    },
+    footer: {
+      display: "flex",
+      gap: "2",
+      px: "4",
+      justifyContent: "flex-end"
+    },
+    body: {
+      px: "4"
     }
   }
 });
@@ -3879,6 +3925,27 @@ const Content = withContext(DialogContent, "content");
 const Title = withContext(DialogTitle, "title");
 const Description = withContext(DialogDescription, "description");
 const Positioner = withContext(DialogPositioner, "positioner");
+const Header = withContext(ark.header, "header");
+const Footer = withContext(
+  ({ orientation = "horizontal", className, ...props }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ark.footer,
+      {
+        className: cx(
+          css$1({
+            display: "flex",
+            flexDirection: orientation === "horizontal" ? "row" : "column"
+          }),
+          className
+        ),
+        ...props
+      }
+    );
+  },
+  "footer"
+);
+const Body = withContext(ark.main, "body");
+const CloseTrigger = withContext(DialogCloseTrigger, "closeTrigger");
 const Dialog = {
   Root,
   Backdrop: Backdrop$1,
@@ -3886,7 +3953,11 @@ const Dialog = {
   Content,
   Title,
   Description,
-  Positioner
+  Positioner,
+  Header,
+  Footer,
+  Body,
+  CloseTrigger
 };
 const iconButtonRecipe = cva({
   base: {