@optiaxiom/react 0.4.2 → 0.5.1

package/dist/src/combobox-content/ComboboxContent.js

@@ -4,25 +4,31 @@ import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { Command } from '../command/Command.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
-import { PopoverContent } from '../popover-content/PopoverContent.js';
+import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
 
 const ComboboxContent = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, size: _size, ...props }, ref) => {
+    const p = useResponsiveMatches({
+      base: "8",
+      sm: "4"
+    });
     const { labelId } = useFieldContext();
     const {
+      components,
       isItemDisabled,
       items,
       itemToKey,
       itemToString,
       onInputValueChange,
-      onSelect
+      onItemSelect,
+      value
     } = useComboboxContext("ComboboxContent");
     return /* @__PURE__ */ jsx(
-      PopoverContent,
+      components.Content,
       {
         "aria-labelledby": labelId,
         overflow: "hidden",
-        p: "4",
+        p,
         ref,
         ...props,
         children: /* @__PURE__ */ jsx(
@@ -33,7 +39,8 @@ const ComboboxContent = forwardRef(
             itemToKey,
             itemToString,
             onInputValueChange,
-            onSelect,
+            onItemSelect,
+            value,
             children
           }
         )

package/dist/src/combobox-input/ComboboxInput.js

@@ -1,6 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
 import { CommandInput } from '../command-input/CommandInput.js';
 
-const ComboboxInput = CommandInput;
+const ComboboxInput = forwardRef(
+  (props, ref) => {
+    const { downshift, highlightedItem } = useCommandContext("ComboboxInput");
+    return /* @__PURE__ */ jsx(
+      CommandInput,
+      {
+        m: "4",
+        onKeyDown: (event) => {
+          if (event.key === " " && highlightedItem) {
+            event.preventDefault();
+            downshift.selectItem(highlightedItem);
+          }
+        },
+        ref,
+        ...props
+      }
+    );
+  }
+);
 ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
 
 export { ComboboxInput };

package/dist/src/combobox-trigger/ComboboxTrigger.js

@@ -5,10 +5,9 @@ import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
 import { MenuButton } from '../menu-button/MenuButton.js';
-import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
 
 const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
-  const { setOpen } = useComboboxContext("ComboboxTrigger");
+  const { components, setOpen } = useComboboxContext("ComboboxTrigger");
   const buttonRef = useRef(null);
   const ref = useComposedRefs(outerRef, buttonRef);
   const { labelId } = useFieldContext();
@@ -26,7 +25,7 @@ const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) =
     return () => label.removeEventListener("click", onLabelClick);
   }, [labelId]);
   return /* @__PURE__ */ jsx(
-    PopoverTrigger,
+    components.Trigger,
     {
       "aria-labelledby": labelId,
       asChild: true,

package/dist/src/combobox-value/ComboboxValue.js

@@ -1,11 +1,34 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { ComboboxMultipleValue } from '../combobox-multiple-value/ComboboxMultipleValue.js';
-import { ComboboxSingleValue } from '../combobox-single-value/ComboboxSingleValue.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Flex } from '../flex/Flex.js';
 
+const maxDisplayedItems = 2;
 const ComboboxValue = forwardRef(
-  (props, ref) => {
-    return props.type === "multiple" ? /* @__PURE__ */ jsx(ComboboxMultipleValue, { ref, ...props }) : /* @__PURE__ */ jsx(ComboboxSingleValue, { ref, ...props });
+  ({ children, placeholder, ...props }, ref) => {
+    const {
+      itemToKey,
+      itemToString,
+      value: valueContext
+    } = useComboboxContext("ComboboxValue");
+    const value = useMemo(
+      () => valueContext instanceof Set ? [...valueContext] : valueContext,
+      [valueContext]
+    );
+    return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsx(Fragment, { children: value.length > maxDisplayedItems ? /* @__PURE__ */ jsxs(Badge, { children: [
+      value.length,
+      " selected"
+    ] }) : value.slice(0, maxDisplayedItems).map((item) => /* @__PURE__ */ jsx(
+      Badge,
+      {
+        display: "inline-block",
+        flex: "1",
+        truncate: true,
+        children: itemToString(item)
+      },
+      itemToKey(item)
+    )) }) : placeholder });
   }
 );
 ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";

package/dist/src/command/Command.js

@@ -1,28 +1,29 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useCombobox } from 'downshift';
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 import { CommandContextProvider } from '../command-context/CommandContext.js';
 
 function Command({
   children,
+  inputValue: inputValueProp,
   isItemDisabled = () => false,
   items,
   itemToKey = (value) => value,
   itemToString = (value) => value ? String(value) : "",
   onInputValueChange,
-  onOpenChange,
-  onSelect
+  onItemSelect,
+  value: valueProp
 }) {
+  const value = useMemo(
+    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
+    [valueProp]
+  );
   const [inputValue, setInputValue] = useControllableState({
     defaultProp: "",
-    onChange: onInputValueChange
+    onChange: onInputValueChange,
+    prop: inputValueProp
   });
-  useEffect(() => {
-    return () => {
-      setInputValue("");
-    };
-  }, [setInputValue]);
   const downshift = useCombobox({
     inputValue,
     isItemDisabled,
@@ -32,7 +33,7 @@ function Command({
     itemToString,
     onSelectedItemChange({ selectedItem, type }) {
       if (type !== useCombobox.stateChangeTypes.InputBlur) {
-        onSelect?.(selectedItem);
+        onItemSelect?.(selectedItem);
       }
     },
     selectedItem: null,
@@ -60,11 +61,8 @@ function Command({
       highlightedItem: items[downshift.highlightedIndex],
       isItemDisabled,
       items,
-      itemToKey,
-      itemToString,
       setInputValue,
-      setOpen: onOpenChange,
-      setValue: onSelect,
+      value,
       children
     }
   );

package/dist/src/command-checkbox-item/CommandCheckboxItem.js

@@ -6,7 +6,9 @@ import { CommandItem } from '../command-item/CommandItem.js';
 import { Flex } from '../flex/Flex.js';
 
 const CommandCheckboxItem = forwardRef(({ addonBefore, ...props }, ref) => {
-  const { isItemDisabled, items } = useCommandContext("CommandCheckboxItem");
+  const { isItemDisabled, items, value } = useCommandContext(
+    "CommandCheckboxItem"
+  );
   return /* @__PURE__ */ jsx(
     CommandItem,
     {
@@ -14,8 +16,9 @@ const CommandCheckboxItem = forwardRef(({ addonBefore, ...props }, ref) => {
         /* @__PURE__ */ jsx(
           Checkbox,
           {
-            checked: props.active,
+            checked: props.active ?? value?.has(props.item),
             disabled: isItemDisabled(props.item, items.indexOf(props.item)),
+            pointerEvents: "none",
             tabIndex: -1
           }
         ),

package/dist/src/command-empty/CommandEmpty.js

@@ -15,8 +15,8 @@ const CommandEmpty = forwardRef(
         alignItems: "center",
         color: "fg.disabled",
         display: "flex",
+        flexDirection: "column",
         fontSize: "md",
-        justifyContent: "center",
         p: "md",
         ref,
         ...props,

package/dist/src/command-footer/CommandFooter.js

@@ -1,11 +1,23 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { footer } from './CommandFooter-css.js';
 
 const CommandFooter = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, ref, ...footer({}, className), ...props, children: /* @__PURE__ */ jsx("li", { children }) });
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        borderColor: "border.secondary",
+        borderT: "1",
+        flexDirection: "row",
+        gap: "md",
+        justifyContent: "space-between",
+        p: "sm",
+        ref,
+        ...props,
+        children
+      }
+    );
   }
 );
 CommandFooter.displayName = "@optiaxiom/react/CommandFooter";

package/dist/src/command-input/CommandInput.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
+import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { Input } from '../input/Input.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
@@ -9,23 +10,17 @@ import '../sprinkles/sprinklesMerge.js';
 const CommandInput = forwardRef(
   (props, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    const { downshift, highlightedItem, setInputValue } = useCommandContext("CommandInput");
+    const { downshift, setInputValue } = useCommandContext("CommandInput");
     return /* @__PURE__ */ jsx(
       Input,
       {
-        m: "4",
+        addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
         ...sprinkleProps,
         ...downshift.getInputProps({
           ...restProps,
           onChange: (event) => {
             setInputValue("value" in event.target ? event.target.value : "");
           },
-          onKeyDown: (event) => {
-            if (event.key === " " && highlightedItem) {
-              event.preventDefault();
-              downshift.selectItem(highlightedItem);
-            }
-          },
           ref
         })
       }

package/dist/src/command-item/CommandItem.js

@@ -19,30 +19,36 @@ const CommandItem = forwardRef(
     ...props
   }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    const { downshift, highlightedItem } = useCommandContext("CommandItem");
+    const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
     const itemProps = downshift.getItemProps({ item });
-    return /* @__PURE__ */ jsx(CommandItemContextProvider, { active, item, children: /* @__PURE__ */ jsx(
-      ListboxItemBase,
+    return /* @__PURE__ */ jsx(
+      CommandItemContextProvider,
       {
-        addonAfter,
-        addonBefore,
-        description,
-        icon,
-        ...sprinkleProps,
+        active: active ?? value?.has(item),
+        item,
         children: /* @__PURE__ */ jsx(
-          "li",
+          ListboxItemBase,
           {
-            "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-            "data-highlighted": highlightedItem === item ? "" : void 0,
-            "data-selected": downshift.selectedItem === item ? "" : void 0,
-            ref,
-            ...restProps,
-            ...itemProps,
-            children
+            addonAfter,
+            addonBefore,
+            description,
+            icon,
+            ...sprinkleProps,
+            children: /* @__PURE__ */ jsx(
+              "li",
+              {
+                "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+                "data-highlighted": highlightedItem === item ? "" : void 0,
+                ref,
+                ...restProps,
+                ...itemProps,
+                children
+              }
+            )
           }
         )
       }
-    ) });
+    );
   }
 );
 CommandItem.displayName = "@optiaxiom/react/CommandItem";

package/dist/src/command-separator/CommandSeparator.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { Separator } from '../separator/Separator.js';
 
-const CommandSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx("li", { ref, children: /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "-4", my: "2", ...props }) }) }));
+const CommandSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx("li", { ref, children: /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "8", my: "4", ...props }) }) }));
 CommandSeparator.displayName = "@optiaxiom/react/CommandSeparator";
 
 export { CommandSeparator };

package/dist/src/data-table/DataTable-css.js

@@ -1,11 +1,11 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/data-table/DataTable.css.ts.vanilla-Dl7V0kqj.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/data-table/DataTable.css.ts.vanilla-LAGWwD9Q.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cellOffsetVar = 'var(--ka4x4e)';
-var columnWidthVar = 'var(--_1mxez1b)';
-var tableCell = recipeRuntime({base:[{bg:'bg.default'},'ptg7g1'],variants:{pinned:{false:{},left:'_1n3ls3z',right:{}}}});
-var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_1x5px21'],variants:{pinned:{false:{},left:'_18j6gq8',right:{}}}});
-var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'_1pp786x']});
+var cellOffsetVar = 'var(--_6bb585)';
+var columnWidthVar = 'var(--_110mhe6)';
+var tableCell = recipeRuntime({base:[{bg:'bg.default'},'_1ekd9c3'],variants:{pinned:{false:{},left:'_1dfdde9',right:{}}}});
+var tableHead = recipeRuntime({base:[{bg:'bg.default'},'z0vt9'],variants:{pinned:{false:{},left:'_1rvdnhz',right:{}}}});
+var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'_1odoan6']});
 
 export { cellOffsetVar, columnWidthVar, tableCell, tableHead, tableHeader };

package/dist/src/data-table-header/DataTableHeader-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-BqcsCuQU.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-BuEWXyCq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{gap:'4'},'lwps0o'],variants:{sortable:{false:'bwycvz',true:'_1a5f7ds'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
-var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'_1e54nrz',true:{}}}});
+var header = recipeRuntime({base:[{gap:'4'},'_1ooamw6'],variants:{sortable:{false:'_1i5coyv',true:'cpep53'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
+var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'frrvp9',true:{}}}});
 
 export { header, icon };

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

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',pb:'md',pt:'lg',px:'lg'}]});

package/dist/src/dialog-close/DialogClose.js

@@ -2,14 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const DialogClose = forwardRef(
   ({ asChild, children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
   }
 );
 DialogClose.displayName = "@optiaxiom/react/DialogClose";

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DQSg_hJt.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-BkW2dfv7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'_11kctjz']});
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'t2s4cp'],variants:{size:{sm:'_1vvwapg',md:'_1op8820',lg:'_1o4h3bl',fullscreen:'_1ovmnbz'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1os8fh6']});
+var close = recipeRuntime({base:[{rounded:'full'},'a935ko']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_5k038e'],variants:{size:{sm:'_8rg9kj',md:'_1oz9csn',lg:'l4u3vf',fullscreen:'_1rpdam6'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_53pymh']});
 
 export { close, content, overlay };

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

@@ -10,11 +10,18 @@ import { Transition } from '../transition/Transition.js';
 import { overlay, content, close } from './DialogContent-css.js';
 
 const DialogContent = forwardRef(
-  ({ children, size = "md", withCloseButton = false, ...props }, ref) => {
+  ({
+    children,
+    className,
+    size = "md",
+    transitionType = "fade",
+    withCloseButton = false,
+    ...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(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
-      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
+      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: transitionType, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }, className), ...props, children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, children: [
         children,
         withCloseButton && /* @__PURE__ */ jsx(
           Button,

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

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.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/src/dialog-trigger/DialogTrigger.js

@@ -2,14 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const DialogTrigger = forwardRef(
   ({ asChild, children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
+    return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
   }
 );
 DialogTrigger.displayName = "@optiaxiom/react/DialogTrigger";

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DZGY_b0f.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-a3MAJnGX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{overflow:'hidden'},'_1tcuhdc']});
+var content = recipeRuntime({base:[{overflow:'hidden'},'w9lpdy']});
 
 export { content };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-ubqGTRET.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CcLwBaNn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_17e1qtm',start:'_2rp2cb'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1jk1yid']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'r3du9s',start:'_1p9y4b3'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_18ltbil']});
 
 export { icon, trigger };

package/dist/src/drawer/Drawer-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/drawer/Drawer.css.ts.vanilla-Bc73PiWx.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/drawer/Drawer.css.ts.vanilla-CzFuJJPj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'_19w3mws']});
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_12td224'],variants:{position:{bottom:[{borderT:'1'},'_1xtn1xo'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_3y5zf1'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'lpk9qi']}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1mg2xvx']});
+var close = recipeRuntime({base:[{rounded:'full'},'h0n686']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_1qk8vbu'],variants:{position:{bottom:[{borderT:'1'},'_1dn3jb9'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1u76iqg'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1ro0axs']}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'q2o83']});
 
 export { close, content, overlay };

package/dist/src/filtered-slot/FilteredSlot.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+
+const FilteredSlot = forwardRef(
+  ({ exclude, ...props }, ref) => {
+    delete props[exclude];
+    return /* @__PURE__ */ jsx(Slot, { ref, ...props });
+  }
+);
+FilteredSlot.displayName = "@optiaxiom/react/FilteredSlot";
+
+export { FilteredSlot };

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

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

package/dist/src/highlight/Highlight.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { Box } from '../box/Box.js';
+import { mark } from './Highlight-css.js';
+import { useHighlightedChunks } from './useHighlightedChunks.js';
+
+function Highlight({
+  children = (chunk) => chunk,
+  content,
+  query,
+  ...props
+}) {
+  const chunks = useHighlightedChunks(content || "", query);
+  return /* @__PURE__ */ jsx(Box, { ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsx(Fragment, { children: highlighted ? children(
+    /* @__PURE__ */ jsx(Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsx("mark", { children: chunk }) })
+  ) : chunk }, index)) });
+}
+Highlight.displayName = "@optiaxiom/react/Highlight";
+
+export { Highlight };

package/dist/src/highlight/useHighlightedChunks.js

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+const useHighlightedChunks = (content, query) => {
+  const terms = useMemo(
+    () => (Array.isArray(query) ? query : query ? [query] : []).map((q) => typeof q === "string" ? q.trim() : q).filter(Boolean),
+    [query]
+  );
+  if (terms.length === 0) {
+    return [{ chunk: content, highlighted: false }];
+  }
+  const pattern = new RegExp(
+    "(" + terms.map(
+      (term) => term instanceof RegExp ? term.source : `(?![^<>]*>)(^|\\b)(?=[^/.])${escapeRegExp(term)}`
+    ).join("|") + ")",
+    "gi"
+  );
+  return content.split(pattern).map((chunk) => ({ chunk, highlighted: pattern.test(chunk) }));
+};
+function escapeRegExp(string) {
+  return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
+}
+
+export { useHighlightedChunks };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-D36Wbt06.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-ClL_Dtju.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'cxpjzg']});
+var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'lnwceg']});
 
 export { content };