@optiaxiom/react 0.5.3 → 0.6.0

package/dist/{src → 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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CxwwenM9.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{overflow:'hidden'},'abzxxf']});
+
+export { content };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-vn8MVqPX.css';
-import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-BQ1aFa0z.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DTVLJj-K.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1ba5o1h',start:'kb5bcg'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1dqe6du']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'k2qjxd',start:'vr7iok'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1m1n5sp']});
 
 export { icon, trigger };

package/dist/packages/react/src/downshift/usePortalPatch.js

@@ -0,0 +1,10 @@
+import { useDelayedState } from './useDelayedState.js';
+import { useForceRerender } from './useForceRerender.js';
+
+function usePortalPatch(open) {
+  const [highlightedIndex, setHighlightedIndex] = useDelayedState(-1, open);
+  useForceRerender(open);
+  return [highlightedIndex, setHighlightedIndex];
+}
+
+export { usePortalPatch };

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { DrawerContextProvider } from '../drawer-context/DrawerContext.js';
+
+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-BYJE1gjQ.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-DTEWNuVi.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'xs'},'v7pu7v']});
+
+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-BYJE1gjQ.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-DjDWBK6Y.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'cdej2e'],variants:{position:{bottom:[{borderT:'1'},'f6ax7f'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_7j0f1y'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_4ufnor']}}});
+
+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-BYJE1gjQ.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-Dv37zxmb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1vydsuf']});
+
+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-BYJE1gjQ.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-Dz8w4Pgo.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var title = recipeRuntime({base:[{flex:'1'},'acfiuf']});
+
+export { title };

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

@@ -0,0 +1,24 @@
+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 './DrawerTitle-css.js';
+
+const DrawerTitle = forwardRef(
+  ({ 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";
+
+export { 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/{src → packages/react/src}/dropdown-menu-content/DropdownMenuContent.js

@@ -1,21 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
-import { ListboxBase } from '../listbox-base/ListboxBase.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 
 const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 4, ...props }, ref) => {
   const { open } = useDropdownMenuContext("DropdownMenuContent");
-  return /* @__PURE__ */ jsx(
-    ListboxBase,
-    {
-      enableExitAnimation: true,
-      open,
-      provider: "dropdown-menu",
-      ...props,
-      children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children })
-    }
-  );
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children }) }) }) });
 });
 DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
 

package/dist/{src → packages/react/src}/dropdown-menu-item/DropdownMenuItem.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
 
 const DropdownMenuItem = forwardRef(({ children, onSelect, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ListboxItemBase, { ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
+  return /* @__PURE__ */ jsx(ListboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
 });
 DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
 

package/dist/{src → packages/react/src}/dropdown-menu-separator/DropdownMenuSeparator.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { Separator } from '../separator/Separator.js';
+import { ListboxSeparator } from '../listbox-separator/ListboxSeparator.js';
 
-const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", flex: "none", mx: "8", my: "4", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
+const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListboxSeparator, { asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
 DropdownMenuSeparator.displayName = "@optiaxiom/react/DropdownMenuSeparator";
 
 export { DropdownMenuSeparator };

package/dist/{src → packages/react/src}/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -1,29 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
-import { ListboxBase } from '../listbox-base/ListboxBase.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 
 const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 0, ...props }, ref) => {
   const { open } = useDropdownMenuSubContext("DropdownMenuSubContent");
-  return /* @__PURE__ */ jsx(
-    ListboxBase,
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
+    RadixMenu.SubContent,
     {
-      enableExitAnimation: true,
-      open,
-      provider: "dropdown-menu",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        RadixMenu.SubContent,
-        {
-          alignOffset,
-          ref,
-          sideOffset,
-          children
-        }
-      )
+      alignOffset,
+      ref,
+      sideOffset,
+      children
     }
-  );
+  ) }) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

package/dist/{src → packages/react/src}/dropdown-menu-sub-trigger/DropdownMenuSubTrigger.js

@@ -2,10 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
 
 const DropdownMenuSubTrigger = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ListboxItemBase, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
+  return /* @__PURE__ */ jsx(ListboxItem, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
 });
 DropdownMenuSubTrigger.displayName = "@optiaxiom/react/DropdownMenuSubTrigger";
 

package/dist/{src → packages/react/src}/heading/Heading.js

@@ -11,18 +11,18 @@ const mapLevelToTag = {
   "5": "h5",
   "6": "h6"
 };
-const mapTagToFontSize = {
-  h1: "5xl",
-  h2: "4xl",
-  h3: "3xl",
-  h4: "2xl",
-  h5: "xl",
-  h6: "md"
+const mapLevelToFontSize = {
+  "1": "5xl",
+  "2": "4xl",
+  "3": "3xl",
+  "4": "2xl",
+  "5": "xl",
+  "6": "md"
 };
 const Heading = forwardRef(
-  ({ appearance, asChild, children, level = "1", ...props }, ref) => {
+  ({ asChild, children, level = "1", ...props }, ref) => {
     const Comp = asChild ? Slot : mapLevelToTag[level];
-    const fontSize = mapTagToFontSize[appearance ?? mapLevelToTag[level]];
+    const fontSize = mapLevelToFontSize[level];
     return /* @__PURE__ */ jsx(Text, { asChild: true, fontSize, fontWeight: "700", ref, ...props, children: /* @__PURE__ */ jsx(Comp, { children }) });
   }
 );

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-jRiu1MDf.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var mark = recipeRuntime({base:'_159ezan'});
+
+export { mark };

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

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

package/dist/{src → packages/react/src}/hover-card-content/HoverCardContent.js

@@ -4,8 +4,8 @@ import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { forwardRef, useRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
-import { Box } from '../box/Box.js';
 import { useHoverCardContext } from '../hover-card-context/HoverCardContext.js';
+import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
 import { content } from './HoverCardContent-css.js';
 
@@ -21,7 +21,7 @@ const HoverCardContent = forwardRef(
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const { keepOpenOnActivation, open } = useHoverCardContext("HoverCardContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsxs(
       RadixHoverCard.Content,
       {
         align,

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-AYchKNE5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var badge = recipeRuntime({base:'_1bvljoe',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_1x5upb9']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'zn5cx7']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_188hupt'],variants:{offset:{false:'_13x89wx',true:{}},position:{'bottom-right':'_1adj1r3','top-right':'_1r32adl'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_7i0sif']});
+
+export { badge, floating, indicator };

package/dist/{src → packages/react/src}/indicator/Indicator.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Badge } from '../badge/Badge.js';
 import { Box } from '../box/Box.js';
@@ -9,7 +10,6 @@ const Indicator = forwardRef(
   ({
     asChild,
     children,
-    className,
     content,
     disabled,
     intent,
@@ -19,8 +19,8 @@ const Indicator = forwardRef(
     variant,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...indicator({}, className), ...props, children: [
-      children,
+    return /* @__PURE__ */ jsxs(Flex, { ...indicator(), children: [
+      /* @__PURE__ */ jsx(Slot, { ref, ...props, children }),
       !disabled && /* @__PURE__ */ jsxs(Box, { ...floating({ offset, position }), children: [
         ping && /* @__PURE__ */ jsx(
           Badge,

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DtLS3OHl.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var input = recipeRuntime({base:'_2lcid9'});
+
+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/{src → packages/react/src}/input/Input-css.js

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

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

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { InputAddon } from '../input-addon/InputAddon.js';
+import { InputControl } from '../input-control/InputControl.js';
+import { InputRoot } from '../input-root/InputRoot.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { root, addon, input } from './Input-css.js';
+
+const Input = forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    addonPointerEvents,
+    appearance = "default",
+    asChild,
+    children,
+    className,
+    htmlSize,
+    size = "md",
+    style,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "input";
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsxs(
+      InputRoot,
+      {
+        addonPointerEvents,
+        style,
+        ...root({ size }, className),
+        ...sprinkleProps,
+        children: [
+          addonBefore && /* @__PURE__ */ jsx(InputAddon, { asChild: true, ...addon(), children: fallbackSpan(addonBefore) }),
+          /* @__PURE__ */ jsx(
+            InputControl,
+            {
+              asChild: true,
+              size,
+              ...input({ appearance, size }),
+              ...restProps,
+              children: /* @__PURE__ */ jsx(Comp, { ref, size: htmlSize, children })
+            }
+          ),
+          addonAfter && /* @__PURE__ */ jsx(InputAddon, { asChild: true, ...addon(), children: fallbackSpan(addonAfter) })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "@optiaxiom/react/Input";
+
+export { Input };