@optiaxiom/react 1.5.12 → 1.6.0

package/dist/esm/packages/react/src/{aside/AsideHeader.js → details-panel/DetailsPanelHeader.js}

@@ -11,13 +11,13 @@ import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
-import { useAsideContext } from './AsideContext.js';
-import { header } from './AsideHeader-css.js';
+import { useDetailsPanelContext } from './DetailsPanelContext.js';
+import { header } from './DetailsPanelHeader-css.js';
 
-const AsideHeader = forwardRef(
+const DetailsPanelHeader = forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
-    const { descriptionId, labelId } = useAsideContext(
-      "@optiaxiom/react/AsideHeader"
+    const { descriptionId, labelId } = useDetailsPanelContext(
+      "@optiaxiom/react/DetailsPanelHeader"
     );
     return /* @__PURE__ */ jsx(ButtonProvider, { size: "sm", children: /* @__PURE__ */ jsxs(Box, { ref, ...header({}, className), ...props, children: [
       addonBefore && /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children: addonBefore }),
@@ -47,6 +47,6 @@ const AsideHeader = forwardRef(
     ] }) });
   }
 );
-AsideHeader.displayName = "@optiaxiom/react/AsideHeader";
+DetailsPanelHeader.displayName = "@optiaxiom/react/DetailsPanelHeader";
 
-export { AsideHeader };
+export { DetailsPanelHeader };

package/dist/esm/packages/react/src/dialog/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'m6lbzo']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1qe9czb']});
 
 export { body };

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-CRMcitky.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-D-n9WxBM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1qpgwbn'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'saeewx'],variants:{size:{sm:'_18vqamo',md:'lcpf8z',lg:'f7v3ea',fullscreen:'llii78'}}});
-var nestedDialogCountVar = 'var(--_1uy774u)';
-var scrollPaddingBottomVar = 'var(--ayt7wd)';
-var scrollPaddingTopVar = 'var(--rcnvby)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_2dwvk9'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1a457mp'],variants:{size:{sm:'n6my50',md:'tnpfar',lg:'_18ahn6b',fullscreen:'_1r2khdq'}}});
+var nestedDialogCountVar = 'var(--slz4p1)';
+var scrollPaddingBottomVar = 'var(--ck7ijg)';
+var scrollPaddingTopVar = 'var(--g32btc)';
 
 export { backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-CNlvDxcq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-XnfJ6MTr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1yfxst0']});
+var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_11ko2jo']});
 
 export { footer };

package/dist/esm/packages/react/src/dialog/DialogHeader-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-CdzDxpmh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DgNn_B8T.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'gw85n6']});
-var close = recipeRuntime({base:['bshttg']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_7jj770']});
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_5naajl']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1xca2pc']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'dcxny0']});
+var close = recipeRuntime({base:['_1vxm4mn']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1nfakxr']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'vq1aka']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_54h474']});
 
 export { actions, close, description, header, title };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-DT81rVtB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-BnRQ3Stq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1rtug99']});
-var outer = recipeRuntime({base:[{display:'grid'},'_1tagohg'],variants:{scale:{false:'z7afdr',true:{}}}});
+var inner = recipeRuntime({base:['_8gu8wg']});
+var outer = recipeRuntime({base:[{display:'grid'},'_32522j'],variants:{scale:{false:'_1atflwy',true:{}}}});
 
 export { inner, outer };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-Cp3Y3AhR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-eRkTu0_A.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1vm4gar',start:'_22o6rn'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'c86j28']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_11a9gm8']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_11lmu6j',start:'guaei8'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_12nflk5']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1wnidmj']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/file-upload/FileUpload-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-DLM3eS_3.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var upload = recipeRuntime({base:[{color:'fg.default'},'_1qxv31l']});
+
+export { upload };

package/dist/esm/packages/react/src/file-upload/FileUpload.js

@@ -5,18 +5,15 @@ import { useDropzone } from 'react-dropzone';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { upload } from './FileUpload-css.js';
 import { FileUploadProvider } from './FileUploadContext.js';
 
 const FileUpload = forwardRef(
-  ({ accept, children, onFilesDrop, ...props }, ref) => {
-    const {
-      getInputProps,
-      getRootProps,
-      isDragAccept,
-      isDragActive,
-      isDragReject
-    } = useDropzone({
+  ({ accept, children, className, onFilesDrop, ...props }, ref) => {
+    const { getInputProps, getRootProps, isDragActive, open } = useDropzone({
       accept,
+      noClick: true,
+      noKeyboard: true,
       onDrop: (acceptedFiles) => {
         if (acceptedFiles.length) {
           onFilesDrop?.(acceptedFiles);
@@ -28,9 +25,9 @@ const FileUpload = forwardRef(
       {
         getInputProps,
         getRootProps,
-        isDragAccept: isDragActive && isDragAccept,
-        isDragReject: isDragActive && isDragReject,
-        children: /* @__PURE__ */ jsx(Box, { color: "fg.default", ref, ...props, children })
+        isDragActive,
+        openFileDialog: open,
+        children: /* @__PURE__ */ jsx(Box, { ref, ...upload({}, className), ...props, children })
       }
     );
   }

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-B7ehcGlv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-DB6nbjFD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var dropzone = recipeRuntime({base:[{alignItems:'center',border:'1',cursor:'pointer',display:'flex',flexDirection:'column',fontSize:'md',gap:'8',justifyContent:'center',p:'16',rounded:'lg',textAlign:'center',transition:'colors'},'gx5wdj'],variants:{drag:{accept:[{borderColor:'border.success'},'l5sijz'],'default':'_1387npu',reject:[{borderColor:'border.error'},'_1b8t850']}}});
+var dropzone = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',border:'1',fontSize:'md',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors',z:'10'},'icu0r6'],variants:{drag:{false:{},true:['_1cqzvag']},hidden:{false:'_6h6z4a',true:'w0itao'},overlay:{false:{},true:'gy68n6'}}});
 
 export { dropzone };

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone.js

@@ -1,41 +1,64 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
 import { IconFileImportSolid } from '../icons/IconFileImportSolid.js';
 import { Text } from '../text/Text.js';
 import { useFileUploadContext } from './FileUploadContext.js';
 import { dropzone } from './FileUploadDropzone-css.js';
+import { FileUploadTrigger } from './FileUploadTrigger.js';
+import { useDraggingOverBody } from './useDraggingOverBody.js';
 
-const FileUploadDropzone = forwardRef(({ children, className, ...props }, ref) => {
-  const { getInputProps, getRootProps, isDragAccept, isDragReject } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
-  const id = useId();
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref,
-      ...getRootProps({
-        ...dropzone(
-          {
-            drag: isDragAccept ? "accept" : isDragReject ? "reject" : "default"
-          },
-          className
-        ),
-        ...props
-      }),
-      children: [
-        /* @__PURE__ */ jsx("input", { "aria-labelledby": id, ...getInputProps() }),
-        /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", children: /* @__PURE__ */ jsx(IconFileImportSolid, {}) }),
-        /* @__PURE__ */ jsx(Text, { "aria-hidden": true, id, children: "Drag and drop or click to upload" }),
-        children
-      ]
-    }
-  );
-});
+const FileUploadDropzone = forwardRef(
+  ({
+    children,
+    className,
+    description,
+    label = "Drop your files here",
+    overlay,
+    ...props
+  }, ref) => {
+    const { getInputProps, getRootProps, isDragActive } = useFileUploadContext(
+      "@optiaxiom/react/FileUploadDropzone"
+    );
+    const isDraggingOverBody = useDraggingOverBody();
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        ...getRootProps({
+          ...dropzone(
+            {
+              drag: isDragActive,
+              hidden: overlay && !isDraggingOverBody,
+              overlay
+            },
+            className
+          ),
+          ...props
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...getInputProps({
+                "aria-description": description,
+                "aria-label": label
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: "8", children: [
+            /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", children: /* @__PURE__ */ jsx(IconFileImportSolid, {}) }),
+            /* @__PURE__ */ jsx(Text, { children: label }),
+            description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", children: description })
+          ] }),
+          !overlay && (children ?? /* @__PURE__ */ jsx(FileUploadTrigger, {}))
+        ]
+      }
+    );
+  }
+);
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
 
 export { FileUploadDropzone };

package/dist/esm/packages/react/src/file-upload/FileUploadTrigger.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const Slot = createSlot("@optiaxiom/react/FileUploadTrigger");
+const FileUploadTrigger = forwardRef(({ asChild, children, onClick, ...props }, ref) => {
+  const { boxProps, restProps } = extractBoxProps(props);
+  const Comp = asChild ? Slot : Button;
+  const { openFileDialog } = useFileUploadContext(
+    "@optiaxiom/react/FileUploadTrigger"
+  );
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        openFileDialog();
+      },
+      ref,
+      ...restProps,
+      children: children || "Select files"
+    }
+  ) });
+});
+FileUploadTrigger.displayName = "@optiaxiom/react/FileUploadTrigger";
+
+export { FileUploadTrigger };

package/dist/esm/packages/react/src/file-upload/useDraggingOverBody.js

@@ -0,0 +1,22 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useDraggingOverBody = () => {
+  const [isDragging, setIsDragging] = useState(false);
+  const dropRef = useRef();
+  useEffect(() => {
+    const over = () => {
+      setIsDragging(true);
+      window.clearTimeout(dropRef.current);
+      dropRef.current = window.setTimeout(() => {
+        setIsDragging(false);
+      }, 100);
+    };
+    document.body.addEventListener("dragover", over);
+    return () => {
+      document.body.removeEventListener("dragover", over);
+    };
+  }, []);
+  return isDragging;
+};
+
+export { useDraggingOverBody };

package/dist/esm/packages/react/src/file-upload/useFileUploadTrigger.js

@@ -0,0 +1,10 @@
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useFileUploadTrigger = () => {
+  const { openFileDialog } = useFileUploadContext(
+    "@optiaxiom/react/useFileUploadOpen"
+  );
+  return openFileDialog;
+};
+
+export { useFileUploadTrigger };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-DHb3EFeq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-BMG9b1M6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_3vivuf'});
+var mark = recipeRuntime({base:'zhi35o'});
 
 export { mark };

package/dist/esm/packages/react/src/icons/IconPlusSolid.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconPlusSolid = withIcon(
+  {
+    name: "IconPlusSolid",
+    viewBox: "0 0 448 512"
+  },
+  // <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconPlusSolid };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-BAYk07S8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-BIuep_l7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_14lo1r6',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_1av0k0b']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'f97yvi']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_85tlq5'],variants:{offset:{false:'_17lx4dx',true:{}},position:{'bottom-right':'_1qr1rwr','top-right':'_1f417un'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_6xrewz']});
+var badge = recipeRuntime({base:'wtw2u1',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'xr4592']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_4iesf8']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_6ddh3d'],variants:{offset:{false:'ftg9om',true:{}},position:{'bottom-right':'o88zy7','top-right':'_12brv5r'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'palj22']});
 
 export { badge, floating, indicator };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-CppDo8A5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-N7NyR1Nc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_1chopd0',variants:{empty:{false:{},true:'_172b1ql'}}});
-var input = recipeRuntime({base:'to9nrm'});
+var editor = recipeRuntime({base:'_1ssosau',variants:{empty:{false:{},true:'_6nf29j'}}});
+var input = recipeRuntime({base:'_1f40vzs'});
 
 export { editor, input };

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

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

package/dist/esm/packages/react/src/input/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-BSTjbqi6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-hAFf3Mfl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_1jm2dpu',{bg:'transparent',flex:'auto',w:'full'},'_9ld8wp','dg7su2'],variants:{size:{md:{},lg:{},xl:['_12clhyp']}}});
+var control = recipeRuntime({base:['_1j5a0ov',{bg:'transparent',flex:'auto',w:'full'},'tces0t','_1noz88o'],variants:{size:{md:{},lg:{},xl:['_1lc2yi5']}}});
 
 export { control };

package/dist/esm/packages/react/src/input/InputRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-BSTjbqi6.css';
-import './../../../../assets/src/input/InputRoot.css.ts.vanilla-DPGbXYA8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-hAFf3Mfl.css';
+import './../../../../assets/src/input/InputRoot.css.ts.vanilla-CSO4MjY1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_3cubmo']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'i58654']});
 
 export { root };

package/dist/esm/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DVoNXiqH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-CUmTjqaB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var kbd = recipeRuntime({base:{display:'inline-flex',gap:'2',whiteSpace:'nowrap'}});
-var key = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',fontFamily:'sans',gap:'2',justifyContent:'center'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',rounded:'sm'},'_1ivzdlk'],subtle:{}}}});
+var key = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',fontFamily:'sans',gap:'2',justifyContent:'center'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',rounded:'sm'},'_1ag1lyr'],subtle:{}}}});
 
 export { kbd, key };

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BG5to307.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-CPYMqtT2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-NRfGpLC5.css';
+import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-BZZSLcmA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'_1dad0a6']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'_1opqmeq']});
 var content = recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 

package/dist/esm/packages/react/src/layers/layers-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom.fbhvlw';
-var reset = 'optiaxiom._1ju463d';
+var components = 'optiaxiom.u5z9h3';
+var reset = 'optiaxiom._15c347v';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/esm/packages/react/src/layout/Layout-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/layout/Layout.css.ts.vanilla-C5ApP3eM.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1vk4zlb'],variants:{size:{full:'h9r0y',screen:'_16rna53'}}});
+
+export { layout };

package/dist/esm/packages/react/src/layout/Layout.js

@@ -7,32 +7,32 @@ import '../sprinkles/sprinklesMerge.js';
 import { Resizable } from '../resizable/Resizable.js';
 import { ResizableHandle } from '../resizable/ResizableHandle.js';
 import { ResizablePanel } from '../resizable/ResizablePanel.js';
-import { layout } from './Layouts-css.js';
+import { layout } from './Layout-css.js';
 
 const Layout = forwardRef(
-  ({ aside, children, className, header, resizable, sidebar, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Box, { ref, ...layout({}, className), ...props, children: [
+  ({
+    children,
+    className,
+    detailsPanel,
+    header,
+    resizable,
+    sidebar,
+    size = "screen",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(Box, { ref, ...layout({ size }, className), ...props, children: [
       header,
-      /* @__PURE__ */ jsxs(Box, { alignItems: "stretch", display: "flex", flex: "1", overflow: "auto", children: [
+      /* @__PURE__ */ jsxs(Box, { display: "flex", flex: "1", overflow: "auto", children: [
         sidebar,
         resizable ? /* @__PURE__ */ jsxs(Resizable, { direction: "horizontal", children: [
-          /* @__PURE__ */ jsx(ResizablePanel, { children: /* @__PURE__ */ jsx(Box, { h: "full", overflow: "auto", px: "32", py: "24", children }) }),
-          aside && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ResizablePanel, { minSize: 33, children: /* @__PURE__ */ jsx(Box, { asChild: true, h: "full", children }) }),
+          detailsPanel && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(ResizableHandle, {}),
-            /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 33, children: aside })
+            /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 33, minSize: 33, children: detailsPanel })
           ] })
-        ] }) : /* @__PURE__ */ jsxs(Box, { alignItems: "stretch", display: "flex", flex: "1", children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              overflow: "auto",
-              px: "32",
-              py: "24",
-              w: aside ? "2/3" : void 0,
-              children
-            }
-          ),
-          aside && /* @__PURE__ */ jsx(Box, { w: "1/3", children: aside })
+        ] }) : /* @__PURE__ */ jsxs(Box, { display: "flex", flex: "1", children: [
+          /* @__PURE__ */ jsx(Box, { asChild: true, w: detailsPanel ? "2/3" : "full", children }),
+          detailsPanel && /* @__PURE__ */ jsx(Box, { w: "1/3", children: detailsPanel })
         ] })
       ] })
     ] });

package/dist/esm/packages/react/src/layout/LayoutContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/layout/LayoutContent.css.ts.vanilla-CuBfvR2E.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{overflow:'auto',px:'32',py:'24'},'xp3uzw']});
+
+export { content };

package/dist/esm/packages/react/src/layout/LayoutContent.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { content } from './LayoutContent-css.js';
+
+const LayoutContent = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        ref,
+        tabIndex: 0,
+        ...content({}, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+LayoutContent.displayName = "@optiaxiom/react/LayoutContent";
+
+export { LayoutContent };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-DyhepTCa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-FmnqKb8N.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1f635po']});
-var link = recipeRuntime({base:['_6061eb'],variants:{appearance:{'default':'bmz41c',inverse:'_1fvd3vx',subtle:'_1vq99kj'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_14waqmh']});
+var link = recipeRuntime({base:['b9oxaq'],variants:{appearance:{'default':'_1l6zkmk',inverse:'c77i11',subtle:'_1glv32j'}}});
 
 export { icon, link };