@optiaxiom/react 0.1.0-next.8 → 0.1.0-next.9

package/dist/dialog/Dialog.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import '../animate-presence/PresenceContext.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { CloseIcon } from './CloseIcon.js';
+import { overlay, content, close } from './Dialog-css.js';
+
+const Dialog = forwardRef(
+  ({
+    children,
+    defaultOpen,
+    modal,
+    onClose,
+    open,
+    size = "md",
+    withCloseButton = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Root,
+      {
+        defaultOpen,
+        modal,
+        onOpenChange: onClose,
+        open,
+        children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+          /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+          /* @__PURE__ */ jsx(Transition, { type: "fade-down", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
+            children,
+            withCloseButton && /* @__PURE__ */ jsx(Box, { asChild: true, ...close(), children: /* @__PURE__ */ jsx(RadixDialog.Close, { "aria-label": "Close", asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "secondary",
+                icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+                size: "sm"
+              }
+            ) }) })
+          ] }) }) })
+        ] }) })
+      }
+    );
+  }
+);
+Dialog.displayName = "@optiaxiom/react/Dialog";
+
+export { Dialog };

package/dist/dialog-body/DialogBody-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/dialog-body/DialogBody.css.ts.vanilla-C_QoodTy.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{fontSize:'md',overflow:'auto',px:'lg',py:'md'},'qdjgpq0']});
+
+export { body };

package/dist/dialog-body/DialogBody.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { body } from './DialogBody-css.js';
+
+const DialogBody = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, ...body(), ...props, children });
+  }
+);
+DialogBody.displayName = "@optiaxiom/react/DialogBody";
+
+export { DialogBody };

package/dist/dialog-footer/DialogFooter-css.js

@@ -0,0 +1,6 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'end',px:'lg',py:'20'}]});
+
+export { footer };

package/dist/dialog-footer/DialogFooter.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { footer } from './DialogFooter-css.js';
+
+const DialogFooter = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { ref, ...footer(), ...props, children });
+  }
+);
+DialogFooter.displayName = "@optiaxiom/react/DialogFooter";
+
+export { DialogFooter };

package/dist/dialog-title/DialogTitle.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { Heading } from '../heading/Heading.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
+import { Text } from '../text/Text.js';
+
+const DialogTitle = forwardRef(
+  ({ children, description, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsxs(Flex, { gap: "xs", pb: "md", pt: "lg", px: "lg", ...sprinkleProps, children: [
+      /* @__PURE__ */ jsx(Heading, { asChild: true, level: "4", children: /* @__PURE__ */ jsx(RadixDialog.Title, { ref, ...restProps, children }) }),
+      description && /* @__PURE__ */ jsx(Text, { asChild: true, fontWeight: "400", children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description }) })
+    ] });
+  }
+);
+DialogTitle.displayName = "@optiaxiom/react/DialogTitle";
+
+export { DialogTitle };

package/dist/field/Field.js

@@ -1,9 +1,12 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as RadixLabel from '@radix-ui/react-label';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { useId } from '@reach/auto-id';
 import { forwardRef, cloneElement } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { Text } from '../text/Text.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { IconInfo } from './IconInfo.js';
 
 const Field = forwardRef(
   ({
@@ -12,19 +15,33 @@ const Field = forwardRef(
     disabled,
     error,
     id: idProp,
+    info,
     label,
     required,
     ...props
   }, ref) => {
     const id = useId(idProp);
     return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "2", maxW: "sm", ref, ...props, children: [
-      label && /* @__PURE__ */ jsx(Text, { asChild: true, children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: id, children: [
-        label,
-        required && /* @__PURE__ */ jsxs(Text, { "aria-hidden": "true", as: "span", color: "fg.error", children: [
-          " ",
-          "*"
+      label && /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "4", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            alignItems: "center",
+            asChild: true,
+            display: "flex",
+            fontWeight: "500",
+            gap: "2",
+            children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: id, children: [
+              label,
+              required && /* @__PURE__ */ jsx(Text, { "aria-hidden": "true", as: "span", color: "fg.error", children: "*" })
+            ] })
+          }
+        ),
+        info && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Tooltip, { content: info, children: /* @__PURE__ */ jsx(IconInfo, { "aria-details": `info${id}` }) }),
+          /* @__PURE__ */ jsx(VisuallyHidden.Root, { id: `info${id}`, children: info })
         ] })
-      ] }) }),
+      ] }),
       cloneElement(children, {
         disabled,
         error: !!error,

package/dist/field/IconInfo.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const IconInfo = forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      height: "12",
+      ref,
+      viewBox: "0 0 12 12",
+      width: "12",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5.99355 0.400024C2.8873 0.400024 0.393555 2.91565 0.393555 6.00002C0.393555 9.10627 2.8873 11.6 5.99355 11.6C9.07793 11.6 11.5936 9.10627 11.5936 6.00002C11.5936 2.91565 9.07793 0.400024 5.99355 0.400024ZM5.99355 10.9C3.28105 10.9 1.09355 8.71252 1.09355 6.00002C1.09355 3.3094 3.28105 1.10002 5.99355 1.10002C8.68418 1.10002 10.8936 3.3094 10.8936 6.00002C10.8936 8.71252 8.68418 10.9 5.99355 10.9ZM5.64355 7.92502C5.3373 7.92502 5.11855 8.16565 5.11855 8.45002C5.11855 8.75627 5.3373 8.97502 5.64355 8.97502C5.92793 8.97502 6.16855 8.75627 6.16855 8.45002C6.16855 8.16565 5.92793 7.92502 5.64355 7.92502ZM6.62793 3.20002H5.3373C4.52793 3.20002 3.89355 3.85627 3.89355 4.66565V4.86252C3.89355 5.0594 4.04668 5.21252 4.24355 5.21252C4.41855 5.21252 4.59355 5.0594 4.59355 4.86252V4.66565C4.59355 4.25002 4.92168 3.90002 5.3373 3.90002H6.62793C7.04355 3.90002 7.39355 4.25002 7.39355 4.66565C7.39355 4.92815 7.24043 5.19065 6.9998 5.3219L5.6873 5.97815C5.44668 6.1094 5.29355 6.3719 5.29355 6.65627V7.05002C5.29355 7.2469 5.44668 7.40002 5.64355 7.40002C5.81855 7.40002 5.99355 7.2469 5.99355 7.05002V6.65627C5.99355 6.6344 5.99355 6.61252 6.01543 6.59065L7.32793 5.9344C7.7873 5.6719 8.09355 5.19065 8.09355 4.66565C8.09355 3.85627 7.4373 3.20002 6.62793 3.20002Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  )
+);
+IconInfo.displayName = "@optiaxiom/react/IconInfo";
+
+export { IconInfo };