@optiaxiom/react 0.5.4 → 0.7.0

package/dist/packages/react/src/dialog-body/DialogBody.js

@@ -1,11 +1,22 @@
 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, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { ref, ...body({}, className), ...props, children });
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        flex: "1",
+        fontSize: "md",
+        overflow: "auto",
+        pb: "md",
+        px: "lg",
+        ref,
+        ...props,
+        children
+      }
+    );
   }
 );
 DialogBody.displayName = "@optiaxiom/react/DialogBody";

package/dist/packages/react/src/dialog-content/DialogContent-css.js

@@ -1,8 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-ByR8ohpq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-Bs5AJrww.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'_1242v3q']});
-var content = recipeRuntime({base:[{display:'flex',flexDirection:'column'},'_67xset'],variants:{size:{sm:'_1srdjui',md:'_10i23sv',lg:'zk3rg2',fullscreen:'_1pefspo'}}});
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column'},'azclmb'],variants:{size:{sm:'_1a4qd9z',md:'gprzhl',lg:'_2185n8',fullscreen:'_1rnu8bo'}}});
 
-export { close, content };
+export { content };

package/dist/packages/react/src/dialog-content/DialogContent.js

@@ -3,22 +3,13 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
-import { Button } from '../button/Button.js';
 import { useDialogContext } from '../dialog-context/DialogContext.js';
-import { IconX } from '../icons/IconX.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
-import { content, close } from './DialogContent-css.js';
+import { content } from './DialogContent-css.js';
 
 const DialogContent = forwardRef(
-  ({
-    children,
-    className,
-    size = "md",
-    transitionType = "fade",
-    withCloseButton = false,
-    ...props
-  }, ref) => {
+  ({ children, className, size = "md", transitionType = "fade", ...props }, ref) => {
     const { open } = useDialogContext("DialogContent");
     return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
       /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
@@ -29,21 +20,7 @@ const DialogContent = forwardRef(
           elevation: size === "fullscreen" ? "drawer" : "dialog",
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, children: [
-            children,
-            withCloseButton && /* @__PURE__ */ jsx(
-              Button,
-              {
-                appearance: "subtle",
-                "aria-label": "Close",
-                asChild: true,
-                icon: /* @__PURE__ */ jsx(IconX, {}),
-                size: "sm",
-                ...close(),
-                children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children })
         }
       ) })
     ] }) });

package/dist/packages/react/src/dialog-description/DialogDescription-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-C8uiLVKI.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_7ajwlk']});
+
+export { description };

package/dist/packages/react/src/dialog-description/DialogDescription.js

@@ -2,21 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Text } from '../text/Text.js';
+import { description } from './DialogDescription-css.js';
 
-const DialogDescription = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      asChild: true,
-      color: "fg.secondary",
-      fontWeight: "400",
-      pb: "xs",
-      px: "lg",
-      ref,
-      ...props,
-      children: /* @__PURE__ */ jsx(RadixDialog.Description, { children })
-    }
-  );
+const DialogDescription = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Text, { asChild: true, ref, ...description({}, className), ...props, children: /* @__PURE__ */ jsx(RadixDialog.Description, { children }) });
 });
 DialogDescription.displayName = "@optiaxiom/react/DialogDescription";
 

package/dist/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.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'}]});

package/dist/packages/react/src/dialog-header/DialogHeader.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DialogHeader = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "xs",
+        p: "lg",
+        pb: "md",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogHeader.displayName = "@optiaxiom/react/DialogHeader";
+
+export { DialogHeader };

package/dist/packages/react/src/dialog-title/DialogTitle-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-CVGCepfE.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1m02ng1']});
+
+export { title };

package/dist/packages/react/src/dialog-title/DialogTitle.js

@@ -2,20 +2,19 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Heading } from '../heading/Heading.js';
+import { title } from './DialogTitle-css.js';
 
 const DialogTitle = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ asChild, children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Heading,
       {
         asChild: true,
-        fontWeight: "500",
         level: "3",
-        p: "lg",
-        pb: "xs",
         ref,
+        ...title({}, className),
         ...props,
-        children: /* @__PURE__ */ jsx(RadixDialog.Title, { children })
+        children: /* @__PURE__ */ jsx(RadixDialog.Title, { asChild, children })
       }
     );
   }

package/dist/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CcpLpMtT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-BSseO5uA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{overflow:'hidden'},'_17aemfm']});
+var content = recipeRuntime({base:[{overflow:'hidden'},'_17qk9zy']});
 
 export { content };

package/dist/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-iRiBgS10.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CD7JBOsZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'z60xtg',start:'c2tinv'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'yigzc6']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1qeiytd',start:'_1ymu7us'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1rf4en5']});
 
 export { icon, trigger };

package/dist/packages/react/src/drawer/Drawer.js

@@ -1,64 +1,22 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
-import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
-import { Backdrop } from '../backdrop/Backdrop.js';
-import { Button } from '../button/Button.js';
-import { IconX } from '../icons/IconX.js';
-import { Paper } from '../paper/Paper.js';
-import { Transition } from '../transition/Transition.js';
-import { content, close } from './Drawer-css.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { DrawerContextProvider } from '../drawer-context/DrawerContext.js';
 
-const mapPositionToTransitionSide = {
-  bottom: "top",
-  left: "right",
-  right: "left"
-};
-const Drawer = forwardRef(
-  ({
-    children,
-    modal,
-    onClose,
-    open,
-    position = "right",
-    withCloseButton = false,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(RadixDialog.Root, { modal, onOpenChange: onClose, open, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
-      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
-      /* @__PURE__ */ jsx(
-        Transition,
-        {
-          "data-side": mapPositionToTransitionSide[position],
-          type: "fade",
-          children: /* @__PURE__ */ jsx(
-            Paper,
-            {
-              asChild: true,
-              elevation: "drawer",
-              ...content({ position }),
-              children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
-                children,
-                withCloseButton && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    appearance: "subtle",
-                    "aria-label": "Close",
-                    asChild: true,
-                    icon: /* @__PURE__ */ jsx(IconX, {}),
-                    size: "sm",
-                    ...close(),
-                    children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
-                  }
-                )
-              ] })
-            }
-          )
-        }
-      )
-    ] }) }) });
-  }
-);
+function Drawer({
+  children,
+  defaultOpen,
+  modal,
+  onOpenChange,
+  open: openProp
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(RadixDialog.Root, { modal, onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(DrawerContextProvider, { open, children }) });
+}
 Drawer.displayName = "@optiaxiom/react/Drawer";
 
 export { Drawer };

package/dist/packages/react/src/drawer-actions/DrawerActions-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-DUWNyCYq.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'xs'},'urwsp1']});
+
+export { actions };

package/dist/packages/react/src/drawer-actions/DrawerActions.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { IconX } from '../icons/IconX.js';
+import { actions } from './DrawerActions-css.js';
+
+const DrawerActions = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Flex, { ref, ...actions({}, className), ...props, children: [
+      /* @__PURE__ */ jsx(Button, { appearance: "subtle", "aria-label": "Close", asChild: true, icon: /* @__PURE__ */ jsx(IconX, {}), children: /* @__PURE__ */ jsx(RadixDialog.Close, {}) }),
+      /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "xs", children })
+    ] });
+  }
+);
+DrawerActions.displayName = "@optiaxiom/react/DrawerActions";
+
+export { DrawerActions };

package/dist/packages/react/src/drawer-close/DrawerClose.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+
+const DrawerClose = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  }
+);
+DrawerClose.displayName = "@optiaxiom/react/DrawerClose";
+
+export { DrawerClose };

package/dist/packages/react/src/drawer-content/DrawerContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-CHQRhIXh.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'g58mro'],variants:{position:{bottom:[{borderT:'1'},'_13ci9iv'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1c25aju'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1ba1o3y']}}});
+
+export { content };

package/dist/packages/react/src/drawer-content/DrawerContent.js

@@ -0,0 +1,42 @@
+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 { Backdrop } from '../backdrop/Backdrop.js';
+import { useDrawerContext } from '../drawer-context/DrawerContext.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { content } from './DrawerContent-css.js';
+
+const mapPositionToTransitionSide = {
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+const DrawerContent = forwardRef(
+  ({ children, position = "right", ...props }, ref) => {
+    const { open } = useDrawerContext("DrawerContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+      /* @__PURE__ */ jsx(
+        Transition,
+        {
+          "data-side": mapPositionToTransitionSide[position],
+          type: "fade",
+          children: /* @__PURE__ */ jsx(
+            Paper,
+            {
+              asChild: true,
+              elevation: "drawer",
+              ...content({ position }),
+              children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, ...props, children })
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+);
+DrawerContent.displayName = "@optiaxiom/react/DrawerContent";
+
+export { DrawerContent };

package/dist/packages/react/src/drawer-context/DrawerContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [DrawerContextProvider, useDrawerContext] = createContext("Drawer");
+
+export { DrawerContextProvider, useDrawerContext };

package/dist/packages/react/src/drawer-description/DrawerDescription-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-BMapl_Qr.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'ld7g1t']});
+
+export { description };

package/dist/packages/react/src/drawer-description/DrawerDescription.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Text } from '../text/Text.js';
+import { description } from './DrawerDescription-css.js';
+
+const DrawerDescription = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Text, { asChild: true, ref, ...description({}, className), ...props, children: /* @__PURE__ */ jsx(RadixDialog.Description, { children }) });
+});
+DrawerDescription.displayName = "@optiaxiom/react/DrawerDescription";
+
+export { DrawerDescription };

package/dist/packages/react/src/drawer-header/DrawerHeader.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DrawerHeader = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "xs",
+        p: "lg",
+        pb: "md",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DrawerHeader.displayName = "@optiaxiom/react/DrawerHeader";
+
+export { DrawerHeader };

package/dist/packages/react/src/drawer-title/DrawerTitle-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CK4PFIwS.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var title = recipeRuntime({base:[{flex:'1'},'jz3w1h']});
+
+export { title };

package/dist/packages/react/src/drawer-title/DrawerTitle.js

@@ -1,16 +1,22 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { 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 { Text } from '../text/Text.js';
+import { title } from './DrawerTitle-css.js';
 
 const DrawerTitle = forwardRef(
-  ({ children, description, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { gap: "xs", pb: "md", pt: "lg", px: "lg", ref, ...props, children: [
-      /* @__PURE__ */ jsx(Heading, { asChild: true, level: "4", children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) }),
-      /* @__PURE__ */ jsx(Text, { asChild: true, empty: "hidden", fontWeight: "400", children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description }) })
-    ] });
+  ({ asChild, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Heading,
+      {
+        asChild: true,
+        level: "4",
+        ref,
+        ...title({}, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(RadixDialog.Title, { asChild, children })
+      }
+    );
   }
 );
 DrawerTitle.displayName = "@optiaxiom/react/DrawerTitle";

package/dist/packages/react/src/drawer-trigger/DrawerTrigger.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+
+const DrawerTrigger = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  }
+);
+DrawerTrigger.displayName = "@optiaxiom/react/DrawerTrigger";
+
+export { DrawerTrigger };

package/dist/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-DlXdsL4j.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-q553ywLr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_163bfz7'});
+var mark = recipeRuntime({base:'mokynf'});
 
 export { mark };

package/dist/packages/react/src/hover-card-content/HoverCardContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-wabD05Jd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-ubicDUXT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm'},'_11c0qnz']});
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm'},'_18xia8t']});
 
 export { content };

package/dist/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DePMcFI5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-BALjpxKy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'hju5gp',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_3yxbjp']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1hpy8iu']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1yivacq'],variants:{offset:{false:'_149k79',true:{}},position:{'bottom-right':'_1iuasko','top-right':'_127vbfd'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1h2wm7v']});
+var badge = recipeRuntime({base:'_12hxilp',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_4ylk0d']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'yp4pgu']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_8j0b1t'],variants:{offset:{false:'_1kyvu8k',true:{}},position:{'bottom-right':'eqb037','top-right':'_17or80h'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1yxvxx3']});
 
 export { badge, floating, indicator };

package/dist/packages/react/src/inline-input/InlineInput-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-QU3pnXC7.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var input = recipeRuntime({base:'_1gyz4t8'});
+
+export { input };

package/dist/packages/react/src/inline-input/InlineInput.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import Document from '@tiptap/extension-document';
+import History from '@tiptap/extension-history';
+import Paragraph from '@tiptap/extension-paragraph';
+import Placeholder from '@tiptap/extension-placeholder';
+import Text from '@tiptap/extension-text';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { forwardRef, useEffect } from 'react';
+import { Box } from '../box/Box.js';
+import { input } from './InlineInput-css.js';
+
+const InlineInput = forwardRef(
+  ({
+    className,
+    defaultValue = "",
+    disabled,
+    editorRef,
+    label,
+    multiline,
+    onValueChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const editor = useEditor({
+      content: `<p>${multiline ? defaultValue.replace("\n", "</p><p>") : defaultValue}</p>`,
+      editable: !disabled,
+      editorProps: {
+        attributes: {
+          ...label && { "aria-label": label },
+          "aria-multiline": String(multiline),
+          "aria-readonly": String(Boolean(disabled)),
+          role: "textbox",
+          spellcheck: "true"
+        }
+      },
+      extensions: [
+        Document.extend({
+          content: multiline ? "block+" : "block"
+        }),
+        History,
+        Paragraph,
+        Placeholder.configure({ placeholder: placeholder ?? label }),
+        Text
+      ],
+      immediatelyRender: false,
+      onUpdate: ({ editor: editor2 }) => {
+        onValueChange?.(editor2?.getText());
+      }
+    });
+    useEffect(() => {
+      if (!editorRef) {
+        return;
+      }
+      editorRef.current = editor;
+      return () => {
+        editorRef.current = null;
+      };
+    });
+    if (!editor) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...input({}, className), ...props, children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
+  }
+);
+InlineInput.displayName = "@optiaxiom/react/InlineInput";
+
+export { InlineInput };

package/dist/packages/react/src/input/Input-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B0ixDERI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});