@optiaxiom/react 0.12.3 → 0.13.1

package/dist/esm/packages/react/src/pill/Pill.js

@@ -1,38 +1,31 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
+import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
+import { Icon } from '../icon/Icon.js';
+import { IconX } from '../icons/IconX.js';
 import { Text } from '../text/Text.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
 import { pill } from './Pill-css.js';
 
 const Pill = forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    children,
-    className,
-    onRemove,
-    size = "md",
-    ...props
-  }, ref) => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Backspace" && onRemove) {
-        onRemove();
-      }
-    };
-    return /* @__PURE__ */ jsx(Tooltip, { auto: true, content: children, children: /* @__PURE__ */ jsx(
-      Button,
+  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(
+      Box,
       {
-        addonAfter,
-        addonBefore,
-        onKeyDown: handleKeyDown,
-        ref,
+        asChild: true,
+        "data-disabled": disabled ? "" : void 0,
         ...pill({ size }, className),
-        ...props,
-        children: /* @__PURE__ */ jsx(Text, { display: "block", fontSize: "inherit", truncate: true, children })
+        ...boxProps,
+        children: /* @__PURE__ */ jsxs(Comp, { disabled, ref, ...restProps, children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "inherit", truncate: true, children }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsx(IconX, {}) })
+        ] })
       }
-    ) });
+    );
   }
 );
 Pill.displayName = "@optiaxiom/react/Pill";

package/dist/esm/packages/react/src/pill-group/PillGroup.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const PillGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
+  }
+);
+PillGroup.displayName = "@optiaxiom/react/PillGroup";
+
+export { PillGroup };

package/dist/esm/packages/react/src/popover/Popover.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useState } from 'react';
 import { PopoverContextProvider } from '../popover-context/PopoverContext.js';
 
 function Popover({
@@ -16,7 +17,16 @@ function Popover({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixPopover.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(PopoverContextProvider, { open, children }) });
+  const [presence, setPresence] = useState();
+  return /* @__PURE__ */ jsx(RadixPopover.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
+    PopoverContextProvider,
+    {
+      open,
+      presence,
+      setPresence,
+      children
+    }
+  ) });
 }
 Popover.displayName = "@optiaxiom/react/Popover";
 

package/dist/esm/packages/react/src/popover-content/PopoverContent.js

@@ -12,51 +12,59 @@ import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
 
 const PopoverContent = forwardRef(
   ({ align = "start", children, sideOffset = 2, withArrow, ...props }, ref) => {
-    const { open } = usePopoverContext("PopoverContent");
-    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
-      MenuListbox,
+    const { open, presence, setPresence } = usePopoverContext("PopoverContent");
+    return /* @__PURE__ */ jsx(
+      TransitionGroup,
       {
-        asChild: true,
-        onBlur: onReactSelectInputBlur,
-        p: "16",
-        provider: "popover",
-        ...props,
-        children: /* @__PURE__ */ jsxs(
-          RadixPopover.Content,
+        onPresenceChange: setPresence,
+        open,
+        presence,
+        children: /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+          MenuListbox,
           {
-            align,
-            ref,
-            sideOffset,
-            children: [
-              children,
-              withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  fill: theme.colors["bg.default"],
-                  height: 4,
-                  preserveAspectRatio: "none",
-                  stroke: theme.colors["border.secondary"],
-                  viewBox: "0 0 30 10",
-                  width: 8,
-                  children: [
-                    /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
-                    /* @__PURE__ */ jsx(
-                      "polyline",
-                      {
-                        points: "0,0 15,10 30,0",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: "2.5"
-                      }
-                    )
-                  ]
-                }
-              ) })
-            ]
+            asChild: true,
+            onBlur: onReactSelectInputBlur,
+            p: "16",
+            provider: "popover",
+            ...props,
+            children: /* @__PURE__ */ jsxs(
+              RadixPopover.Content,
+              {
+                align,
+                ref,
+                sideOffset,
+                children: [
+                  children,
+                  withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      fill: theme.colors["bg.default"],
+                      height: 4,
+                      preserveAspectRatio: "none",
+                      stroke: theme.colors["border.secondary"],
+                      viewBox: "0 0 30 10",
+                      width: 8,
+                      children: [
+                        /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
+                        /* @__PURE__ */ jsx(
+                          "polyline",
+                          {
+                            points: "0,0 15,10 30,0",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: "2.5"
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            )
           }
-        )
+        ) })
       }
-    ) }) });
+    );
   }
 );
 PopoverContent.displayName = "@optiaxiom/react/PopoverContent";

package/dist/esm/packages/react/src/popover-trigger/PopoverTrigger.js

@@ -1,11 +1,28 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { Button } from '../button/Button.js';
+import { usePopoverContext } from '../popover-context/PopoverContext.js';
 
-const PopoverTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+const PopoverTrigger = forwardRef(({ asChild, children, hasCustomAnchor, ...props }, ref) => {
+  const { presence } = usePopoverContext("PopoverTrigger");
+  const [shouldRender, setShouldRender] = useState(!hasCustomAnchor);
+  useEffect(() => {
+    if (!shouldRender) {
+      setShouldRender(true);
+    }
+  }, [shouldRender]);
+  return shouldRender && /* @__PURE__ */ jsx(
+    RadixPopover.Trigger,
+    {
+      asChild: true,
+      "data-expanded": presence ? "" : void 0,
+      ref,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(Button, { children })
+    }
+  );
 });
 PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
 

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-DA-MaOH4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-cIstAe9I.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_127iwmn']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1hnundd']});
 
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Uzeu57xv.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BWOKluYb.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-Bmg_JLtx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BHTi0xxJ.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-R8IiI6oq.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-B_u_cAqB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1kdcipo'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_2eifk7']});
-var input = recipeRuntime({base:'x37u70'});
-var radio = recipeRuntime({base:'_1k89po5'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'a3zuxh'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1rhen0e']});
+var input = recipeRuntime({base:'_3hdtoi'});
+var radio = recipeRuntime({base:'_8jx9hc'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/radio/Radio.js

@@ -31,7 +31,7 @@ const Radio = forwardRef(
           `Cannot use \`checked\` prop when \`Radio\` is used within \`RadioGroup\``
         );
       }
-      if (props.value === undefined) {
+      if (props.value === void 0) {
         throw new Error(
           `Must use \`value\` prop when \`Radio\` is used within \`RadioGroup\``
         );
@@ -47,8 +47,8 @@ const Radio = forwardRef(
           /* @__PURE__ */ jsx(
             ToggleInputHiddenInput,
             {
-              checked: groupContext?.value !== undefined ? groupContext.value === props.value : undefined,
-              defaultChecked: groupContext?.defaultValue !== undefined ? groupContext.defaultValue === props.value : undefined,
+              checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
+              defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
               disabled: groupContext?.disabled ?? disabled,
               name: groupContext?.name ?? name,
               onBlur: groupContext?.onBlur ?? onBlur,

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CKzvBGSv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DNchEtlm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'uxnw48']});
-var search = recipeRuntime({base:'e8jivp'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1aqhssx']});
+var search = recipeRuntime({base:'_1gxa03'});
 
 export { clear, search };

package/dist/esm/packages/react/src/search-input/SearchInput.js

@@ -9,7 +9,7 @@ import { Input } from '../input/Input.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { forceValueChange } from '../utils/forceValueChange.js';
-import { clear, search } from './SearchInput-css.js';
+import { search, clear } from './SearchInput-css.js';
 
 const SearchInput = forwardRef(
   ({

package/dist/esm/packages/react/src/select-content/SelectContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-DkK-DWvO.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-Bcvvt7Ox.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['d4q71n']});
+var content = recipeRuntime({base:['_2mc3cm']});
 
 export { content };

package/dist/esm/packages/react/src/select-content/SelectContent.js

@@ -27,7 +27,7 @@ const SelectContent = forwardRef(
       {
         asChild: true,
         maxH: "sm",
-        minW: loading ? "trigger" : undefined,
+        minW: loading ? "trigger" : void 0,
         provider: "popper",
         ...content({}, className),
         ...boxProps,

package/dist/esm/packages/react/src/select-item/SelectItem.js

@@ -9,14 +9,13 @@ import { useSelectContext } from '../select-context/SelectContext.js';
 const SelectItem = forwardRef(
   ({ children, item, size, ...props }, ref) => {
     const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
-    const itemProps = downshift.getItemProps({ item, ...props });
+    const itemProps = downshift.getItemProps({ item, ref, ...props });
     return /* @__PURE__ */ jsx(
       Box,
       {
-        "data-disabled": itemProps["aria-disabled"] ? "" : undefined,
-        "data-highlighted": highlightedItem === item ? "" : undefined,
-        "data-selected": selectedItem === item ? "" : undefined,
-        ref,
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
         size,
         ...itemProps,
         children

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-BNIxitNQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-C-qH_0-2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_wcbutaohqjnkd6euht5r5xgz74/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
+import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_h2fokeqwgislkw3fqntlep77qq/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_13ziltk',md:'p81cgu',base:'_1q7gerv'},defaultClass:'_1q7gerv'},vertical:{conditions:{sm:'_1ryn2iz',md:'_3yu1og',base:'_1yw5b9e'},defaultClass:'_1yw5b9e'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_197bxa1',md:'hpl740',base:'_5bepgr'},defaultClass:'_5bepgr'},vertical:{conditions:{sm:'ofxsfm',md:'dv2bxv',base:'jbjm0b'},defaultClass:'jbjm0b'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CR581zcm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-j87g8hoz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_1x71f2x']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_14ffut1']});
 
 export { skeleton };

package/dist/esm/packages/react/src/spinner/Spinner-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-BMpmw6Aw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-5VYXbwod.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'dxxsk3',inverse:'ma7tz9'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'emuj6z',inverse:'zfpdv6'}}});
 
 export { track };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-B_pBGhuy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-0QEVGwcW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1u4cs2l']});
+var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1svx1eh']});
 
 export { input };

package/dist/esm/packages/react/src/spotlight-radio-item/SpotlightRadioItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-DLfRb9S_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-Vx9bm9mL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1blvunx']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1vffwt6']});
 
 export { item };

package/dist/esm/packages/react/src/spotlight-sub-item/SpotlightSubItem-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-B0bjehof.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-DC_Xji3I.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-CV9aZJUz.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-HwDcaezs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'vevesm',true:'_1e4l0ok'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'rkasa5',true:'lfm5e4'}}});
 
 export { item };

package/dist/esm/packages/react/src/spotlight-sub-item/SpotlightSubItem.js

@@ -18,7 +18,7 @@ const SpotlightSubItem = forwardRef(({ children, className, selected, ...props }
         Badge,
         {
           intent: selected ? "information" : "neutral",
-          variant: selected ? "solid" : "light",
+          variant: selected ? "strong" : "subtle",
           children
         }
       )