@optiaxiom/react 0.1.0-next.10 → 0.1.0-next.11

package/dist/index.js

@@ -28,6 +28,9 @@ export { MenuLabel } from './menu-label/MenuLabel.js';
 export { MenuSeparator } from './menu-separator/MenuSeparator.js';
 export { MenuTrigger } from './menu-trigger/MenuTrigger.js';
 export { Paper } from './paper/Paper.js';
+export { Popover } from './popover/Popover.js';
+export { PopoverContent } from './popover-content/PopoverContent.js';
+export { PopoverTrigger } from './popover-trigger/PopoverTrigger.js';
 export { Progress } from './progress/Progress.js';
 export { RadioGroup } from './radio-group/RadioGroup.js';
 export { RadioGroupItem } from './radio-group-item/RadioGroupItem.js';

package/dist/input-base/InputBase-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/input-base/InputBase.css.ts.vanilla-ktVP2iXx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/link/Link-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/link/Link.css.ts.vanilla-PjwC2Bar.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/menu-content/MenuContent-css.js

@@ -2,6 +2,6 @@ import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/menu-content/MenuContent.css.ts.vanilla-BVK7SB5f.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',maxW:'xs',overflow:'auto',p:'4',rounded:'lg',shadow:'md'},'wh2a2g0']});
+var content = recipeRuntime({base:[{border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',maxW:'xs',overflow:'auto',p:'4',rounded:'lg',shadow:'md',z:'popover'},'wh2a2g0']});
 
 export { content };

package/dist/menu-content/MenuContent.js

@@ -9,9 +9,9 @@ import { Transition } from '../transition/Transition.js';
 import { content } from './MenuContent-css.js';
 
 const MenuContent = forwardRef(
-  ({ align = "start", children, sideOffset = 2, ...props }, ref) => {
+  ({ align = "start", children, className, sideOffset = 2, ...props }, ref) => {
     const { open } = useContext(MenuContext);
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content(), ...props, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(
       RadixMenu.Content,
       {
         align,

package/dist/menu-item/MenuItem-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/menu-item/MenuItem.css.ts.vanilla-BjEdkhqZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/menu-trigger/MenuTrigger.js

@@ -3,10 +3,13 @@ import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
 
 const MenuTrigger = forwardRef(
   ({ asChild, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", children }) });
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ...restProps, children }) });
   }
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";

package/dist/popover/Popover.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { PopoverContext } from '../popover-context/PopoverContext.js';
+
+const Popover = ({
+  children,
+  defaultOpen,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) => {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(RadixPopover.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open }, children }) });
+};
+Popover.displayName = "@optiaxiom/react/Popover";
+
+export { Popover };

package/dist/popover-content/PopoverContent-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/popover-content/PopoverContent.css.ts.vanilla-RHzagv6W.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'_1nk03ow0']});
+
+export { content };

package/dist/popover-content/PopoverContent.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { forwardRef, useContext } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import '../animate-presence/PresenceContext.js';
+import { Paper } from '../paper/Paper.js';
+import { PopoverContext } from '../popover-context/PopoverContext.js';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import { theme } from '../styles/theme-css.js';
+import { Transition } from '../transition/Transition.js';
+import { content } from './PopoverContent-css.js';
+
+const PopoverContent = forwardRef(
+  ({
+    align = "start",
+    children,
+    className,
+    sideOffset = 2,
+    withArrow,
+    ...props
+  }, ref) => {
+    const { open } = useContext(PopoverContext);
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, ...content({}, className), ...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["surface"],
+              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";
+
+export { PopoverContent };

package/dist/popover-context/PopoverContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const PopoverContext = createContext({
+  open: void 0
+});
+
+export { PopoverContext };

package/dist/popover-trigger/PopoverTrigger.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
+
+const PopoverTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ...restProps, children }) });
+});
+PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
+
+export { PopoverTrigger };

package/dist/radio-group-item/RadioGroupItem-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/control-base/ControlBase.css.ts.vanilla-DGX7Yb9J.css';
 import './../assets/src/radio-group-item/RadioGroupItem.css.ts.vanilla-BFZr4-E-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';

package/dist/sprinkles/sprinkles-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/sprinkles/sprinkles.css.ts.vanilla-BqeB0PjV.css';
 import { createMapValueFn } from '@vanilla-extract/sprinkles/createUtils';
 import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';

package/dist/styles/theme-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 
 var theme = {borderRadius:{xs:'var(--ax-borderRadius-xs)',sm:'var(--ax-borderRadius-sm)',md:'var(--ax-borderRadius-md)',lg:'var(--ax-borderRadius-lg)',xl:'var(--ax-borderRadius-xl)',full:'var(--ax-borderRadius-full)',none:'var(--ax-borderRadius-none)'},borderWidth:{'0':'var(--ax-borderWidth-0)','1':'var(--ax-borderWidth-1)','2':'var(--ax-borderWidth-2)','4':'var(--ax-borderWidth-4)'},boxShadow:{xs:'var(--ax-boxShadow-xs)',sm:'var(--ax-boxShadow-sm)',md:'var(--ax-boxShadow-md)',lg:'var(--ax-boxShadow-lg)',xl:'var(--ax-boxShadow-xl)',inner:'var(--ax-boxShadow-inner)',none:'var(--ax-boxShadow-none)'},colors:{current:'var(--ax-colors-current)',transparent:'var(--ax-colors-transparent)',black:'var(--ax-colors-black)',white:'var(--ax-colors-white)','aqua.50':'var(--ax-colors-aqua-50)','aqua.200':'var(--ax-colors-aqua-200)','aqua.500':'var(--ax-colors-aqua-500)','aqua.600':'var(--ax-colors-aqua-600)','blue.50':'var(--ax-colors-blue-50)','blue.200':'var(--ax-colors-blue-200)','blue.500':'var(--ax-colors-blue-500)','blue.600':'var(--ax-colors-blue-600)','blue.900':'var(--ax-colors-blue-900)','brand.50':'var(--ax-colors-brand-50)','brand.100':'var(--ax-colors-brand-100)','brand.200':'var(--ax-colors-brand-200)','brand.300':'var(--ax-colors-brand-300)','brand.400':'var(--ax-colors-brand-400)','brand.500':'var(--ax-colors-brand-500)','brand.600':'var(--ax-colors-brand-600)','brand.700':'var(--ax-colors-brand-700)','brand.800':'var(--ax-colors-brand-800)','brand.900':'var(--ax-colors-brand-900)','dark.50':'var(--ax-colors-dark-50)','dark.200':'var(--ax-colors-dark-200)','dark.500':'var(--ax-colors-dark-500)','dark.600':'var(--ax-colors-dark-600)','gray.50':'var(--ax-colors-gray-50)','gray.100':'var(--ax-colors-gray-100)','gray.200':'var(--ax-colors-gray-200)','gray.300':'var(--ax-colors-gray-300)','gray.400':'var(--ax-colors-gray-400)','gray.500':'var(--ax-colors-gray-500)','gray.600':'var(--ax-colors-gray-600)','gray.700':'var(--ax-colors-gray-700)','gray.800':'var(--ax-colors-gray-800)','gray.900':'var(--ax-colors-gray-900)','green.50':'var(--ax-colors-green-50)','green.100':'var(--ax-colors-green-100)','green.200':'var(--ax-colors-green-200)','green.300':'var(--ax-colors-green-300)','green.400':'var(--ax-colors-green-400)','green.500':'var(--ax-colors-green-500)','green.600':'var(--ax-colors-green-600)','green.700':'var(--ax-colors-green-700)','green.800':'var(--ax-colors-green-800)','green.900':'var(--ax-colors-green-900)','magenta.50':'var(--ax-colors-magenta-50)','magenta.200':'var(--ax-colors-magenta-200)','magenta.500':'var(--ax-colors-magenta-500)','magenta.600':'var(--ax-colors-magenta-600)','neutral.50':'var(--ax-colors-neutral-50)','neutral.75':'var(--ax-colors-neutral-75)','neutral.100':'var(--ax-colors-neutral-100)','neutral.150':'var(--ax-colors-neutral-150)','neutral.200':'var(--ax-colors-neutral-200)','neutral.300':'var(--ax-colors-neutral-300)','neutral.500':'var(--ax-colors-neutral-500)','neutral.600':'var(--ax-colors-neutral-600)','neutral.700':'var(--ax-colors-neutral-700)','neutral.800':'var(--ax-colors-neutral-800)','neutral.900':'var(--ax-colors-neutral-900)','neutral.1000':'var(--ax-colors-neutral-1000)','neutral.1100':'var(--ax-colors-neutral-1100)','neutral.1200':'var(--ax-colors-neutral-1200)','neutral.50/32':'var(--ax-colors-neutral-50-32)','neutral.1200/5':'var(--ax-colors-neutral-1200-5)','neutral.1200/12':'var(--ax-colors-neutral-1200-12)','neutral.1200/18':'var(--ax-colors-neutral-1200-18)','neutral.1200/22':'var(--ax-colors-neutral-1200-22)','neutral.1200/32':'var(--ax-colors-neutral-1200-32)','orange.50':'var(--ax-colors-orange-50)','orange.200':'var(--ax-colors-orange-200)','orange.500':'var(--ax-colors-orange-500)','orange.600':'var(--ax-colors-orange-600)','purple.50':'var(--ax-colors-purple-50)','purple.200':'var(--ax-colors-purple-200)','purple.500':'var(--ax-colors-purple-500)','purple.600':'var(--ax-colors-purple-600)','purple.900':'var(--ax-colors-purple-900)','red.50':'var(--ax-colors-red-50)','red.100':'var(--ax-colors-red-100)','red.200':'var(--ax-colors-red-200)','red.300':'var(--ax-colors-red-300)','red.400':'var(--ax-colors-red-400)','red.500':'var(--ax-colors-red-500)','red.600':'var(--ax-colors-red-600)','red.700':'var(--ax-colors-red-700)','red.800':'var(--ax-colors-red-800)','red.900':'var(--ax-colors-red-900)','slate.50':'var(--ax-colors-slate-50)','slate.100':'var(--ax-colors-slate-100)','slate.200':'var(--ax-colors-slate-200)','slate.300':'var(--ax-colors-slate-300)','slate.400':'var(--ax-colors-slate-400)','slate.500':'var(--ax-colors-slate-500)','slate.600':'var(--ax-colors-slate-600)','slate.700':'var(--ax-colors-slate-700)','slate.800':'var(--ax-colors-slate-800)','slate.900':'var(--ax-colors-slate-900)','slate.950':'var(--ax-colors-slate-950)','yellow.50':'var(--ax-colors-yellow-50)','yellow.100':'var(--ax-colors-yellow-100)','yellow.200':'var(--ax-colors-yellow-200)','yellow.300':'var(--ax-colors-yellow-300)','yellow.400':'var(--ax-colors-yellow-400)','yellow.500':'var(--ax-colors-yellow-500)','yellow.600':'var(--ax-colors-yellow-600)','yellow.700':'var(--ax-colors-yellow-700)','yellow.800':'var(--ax-colors-yellow-800)','yellow.900':'var(--ax-colors-yellow-900)','bg.brand':'var(--ax-colors-bg-brand)','bg.brand.solid':'var(--ax-colors-bg-brand-solid)','bg.brand.solid.hover':'var(--ax-colors-bg-brand-solid-hover)','bg.disabled':'var(--ax-colors-bg-disabled)','bg.discovery':'var(--ax-colors-bg-discovery)','bg.error':'var(--ax-colors-bg-error)','bg.error.solid':'var(--ax-colors-bg-error-solid)','bg.error.solid.hover':'var(--ax-colors-bg-error-solid-hover)','bg.information':'var(--ax-colors-bg-information)','bg.information.solid':'var(--ax-colors-bg-information-solid)','bg.input.disabled':'var(--ax-colors-bg-input-disabled)','bg.neutral':'var(--ax-colors-bg-neutral)','bg.neutral.solid':'var(--ax-colors-bg-neutral-solid)','bg.neutral.solid.hover':'var(--ax-colors-bg-neutral-solid-hover)','bg.success':'var(--ax-colors-bg-success)','bg.success.solid':'var(--ax-colors-bg-success-solid)','bg.success.solid.hover':'var(--ax-colors-bg-success-solid-hover)','bg.warning':'var(--ax-colors-bg-warning)','bg.warning.solid':'var(--ax-colors-bg-warning-solid)','bg.warning.solid.hover':'var(--ax-colors-bg-warning-solid-hover)','border.active':'var(--ax-colors-border-active)','border.active.hover':'var(--ax-colors-border-active-hover)','border.brand':'var(--ax-colors-border-brand)','border.default':'var(--ax-colors-border-default)','border.disabled':'var(--ax-colors-border-disabled)','border.error':'var(--ax-colors-border-error)','border.secondary':'var(--ax-colors-border-secondary)','border.success':'var(--ax-colors-border-success)','border.tertiary':'var(--ax-colors-border-tertiary)','border.warning':'var(--ax-colors-border-warning)','fg.accent.blue':'var(--ax-colors-fg-accent-blue)','fg.accent.magenta':'var(--ax-colors-fg-accent-magenta)','fg.accent.purple':'var(--ax-colors-fg-accent-purple)','fg.accent.red':'var(--ax-colors-fg-accent-red)','fg.brand':'var(--ax-colors-fg-brand)','fg.default':'var(--ax-colors-fg-default)','fg.default.inverse':'var(--ax-colors-fg-default-inverse)','fg.disabled':'var(--ax-colors-fg-disabled)','fg.error':'var(--ax-colors-fg-error)','fg.information':'var(--ax-colors-fg-information)','fg.link':'var(--ax-colors-fg-link)','fg.link.hover':'var(--ax-colors-fg-link-hover)','fg.link.visited':'var(--ax-colors-fg-link-visited)','fg.secondary':'var(--ax-colors-fg-secondary)','fg.success':'var(--ax-colors-fg-success)','fg.tertiary':'var(--ax-colors-fg-tertiary)','fg.warning':'var(--ax-colors-fg-warning)','outline.brand':'var(--ax-colors-outline-brand)',overlay:'var(--ax-colors-overlay)',surface:'var(--ax-colors-surface)'},fontFamily:{mono:'var(--ax-fontFamily-mono)',sans:'var(--ax-fontFamily-sans)'},fontSize:{xs:{fontSize:'var(--ax-fontSize-xs-fontSize)',lineHeight:'var(--ax-fontSize-xs-lineHeight)'},sm:{fontSize:'var(--ax-fontSize-sm-fontSize)',lineHeight:'var(--ax-fontSize-sm-lineHeight)'},md:{fontSize:'var(--ax-fontSize-md-fontSize)',lineHeight:'var(--ax-fontSize-md-lineHeight)'},lg:{fontSize:'var(--ax-fontSize-lg-fontSize)',lineHeight:'var(--ax-fontSize-lg-lineHeight)'},xl:{fontSize:'var(--ax-fontSize-xl-fontSize)',lineHeight:'var(--ax-fontSize-xl-lineHeight)'},'2xl':{fontSize:'var(--ax-fontSize-2xl-fontSize)',lineHeight:'var(--ax-fontSize-2xl-lineHeight)'},'3xl':{fontSize:'var(--ax-fontSize-3xl-fontSize)',lineHeight:'var(--ax-fontSize-3xl-lineHeight)'},'4xl':{fontSize:'var(--ax-fontSize-4xl-fontSize)',lineHeight:'var(--ax-fontSize-4xl-lineHeight)'},'5xl':{fontSize:'var(--ax-fontSize-5xl-fontSize)',lineHeight:'var(--ax-fontSize-5xl-lineHeight)'},'6xl':{fontSize:'var(--ax-fontSize-6xl-fontSize)',lineHeight:'var(--ax-fontSize-6xl-lineHeight)'},'7xl':{fontSize:'var(--ax-fontSize-7xl-fontSize)',lineHeight:'var(--ax-fontSize-7xl-lineHeight)'}},letterSpacing:{tighter:'var(--ax-letterSpacing-tighter)',tight:'var(--ax-letterSpacing-tight)',normal:'var(--ax-letterSpacing-normal)',wide:'var(--ax-letterSpacing-wide)',wider:'var(--ax-letterSpacing-wider)',widest:'var(--ax-letterSpacing-widest)'},lineHeight:{none:'var(--ax-lineHeight-none)',tight:'var(--ax-lineHeight-tight)',normal:'var(--ax-lineHeight-normal)',loose:'var(--ax-lineHeight-loose)'},margins:{'0':'var(--ax-margins-0)','2':'var(--ax-margins-2)','4':'var(--ax-margins-4)','6':'var(--ax-margins-6)','8':'var(--ax-margins-8)','10':'var(--ax-margins-10)','12':'var(--ax-margins-12)','16':'var(--ax-margins-16)','20':'var(--ax-margins-20)','24':'var(--ax-margins-24)','32':'var(--ax-margins-32)','48':'var(--ax-margins-48)','64':'var(--ax-margins-64)','80':'var(--ax-margins-80)',xs:'var(--ax-margins-xs)',sm:'var(--ax-margins-sm)',md:'var(--ax-margins-md)',lg:'var(--ax-margins-lg)',xl:'var(--ax-margins-xl)','-xs':'var(--ax-margins--xs)','-sm':'var(--ax-margins--sm)','-md':'var(--ax-margins--md)','-lg':'var(--ax-margins--lg)','-xl':'var(--ax-margins--xl)','-2':'var(--ax-margins--2)','-4':'var(--ax-margins--4)','-6':'var(--ax-margins--6)','-8':'var(--ax-margins--8)','-10':'var(--ax-margins--10)','-12':'var(--ax-margins--12)','-16':'var(--ax-margins--16)','-24':'var(--ax-margins--24)','-32':'var(--ax-margins--32)','-48':'var(--ax-margins--48)','-64':'var(--ax-margins--64)','-80':'var(--ax-margins--80)'},maxSize:{xs:'var(--ax-maxSize-xs)',sm:'var(--ax-maxSize-sm)',md:'var(--ax-maxSize-md)',lg:'var(--ax-maxSize-lg)',xl:'var(--ax-maxSize-xl)','2xl':'var(--ax-maxSize-2xl)',full:'var(--ax-maxSize-full)'},screens:{sm:'var(--ax-screens-sm)',md:'var(--ax-screens-md)',lg:'var(--ax-screens-lg)'},size:{'0':'var(--ax-size-0)','1':'var(--ax-size-1)','2':'var(--ax-size-2)','4':'var(--ax-size-4)','6':'var(--ax-size-6)','8':'var(--ax-size-8)','12':'var(--ax-size-12)','16':'var(--ax-size-16)','20':'var(--ax-size-20)','24':'var(--ax-size-24)','32':'var(--ax-size-32)','40':'var(--ax-size-40)','48':'var(--ax-size-48)','56':'var(--ax-size-56)','64':'var(--ax-size-64)','80':'var(--ax-size-80)','96':'var(--ax-size-96)','112':'var(--ax-size-112)','128':'var(--ax-size-128)','144':'var(--ax-size-144)','160':'var(--ax-size-160)','176':'var(--ax-size-176)','192':'var(--ax-size-192)','208':'var(--ax-size-208)','224':'var(--ax-size-224)','240':'var(--ax-size-240)','256':'var(--ax-size-256)','288':'var(--ax-size-288)','320':'var(--ax-size-320)','384':'var(--ax-size-384)',xs:'var(--ax-size-xs)',sm:'var(--ax-size-sm)',md:'var(--ax-size-md)',lg:'var(--ax-size-lg)',xl:'var(--ax-size-xl)','1/2':'var(--ax-size-1-2)','1/3':'var(--ax-size-1-3)','2/3':'var(--ax-size-2-3)','1/4':'var(--ax-size-1-4)','2/4':'var(--ax-size-2-4)','3/4':'var(--ax-size-3-4)',auto:'var(--ax-size-auto)',fit:'var(--ax-size-fit)',full:'var(--ax-size-full)',max:'var(--ax-size-max)',min:'var(--ax-size-min)'},spacing:{'0':'var(--ax-spacing-0)','2':'var(--ax-spacing-2)','4':'var(--ax-spacing-4)','6':'var(--ax-spacing-6)','8':'var(--ax-spacing-8)','10':'var(--ax-spacing-10)','12':'var(--ax-spacing-12)','16':'var(--ax-spacing-16)','20':'var(--ax-spacing-20)','24':'var(--ax-spacing-24)','32':'var(--ax-spacing-32)','48':'var(--ax-spacing-48)','64':'var(--ax-spacing-64)','80':'var(--ax-spacing-80)',xs:'var(--ax-spacing-xs)',sm:'var(--ax-spacing-sm)',md:'var(--ax-spacing-md)',lg:'var(--ax-spacing-lg)',xl:'var(--ax-spacing-xl)'},zIndex:{'0':'var(--ax-zIndex-0)','10':'var(--ax-zIndex-10)','20':'var(--ax-zIndex-20)','30':'var(--ax-zIndex-30)','40':'var(--ax-zIndex-40)','50':'var(--ax-zIndex-50)',auto:'var(--ax-zIndex-auto)',popover:'var(--ax-zIndex-popover)',toast:'var(--ax-zIndex-toast)'}};
 

package/dist/switch/Switch-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/control-base/ControlBase.css.ts.vanilla-DGX7Yb9J.css';
 import './../assets/src/switch/Switch.css.ts.vanilla-BMfNlTAt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';

package/dist/tabs-list/TabsList-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/tabs-list/TabsList.css.ts.vanilla-CiXRbV1t.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/tabs-trigger/TabsTrigger-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
 import './../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-CCcsbANV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/toast/Toast-css.js

@@ -1,6 +1,6 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-BEZUTZ8R.css';
-import './../assets/src/toast/Toast.css.ts.vanilla-DTfgNTMt.css';
+import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
+import './../assets/src/toast/Toast.css.ts.vanilla-DPyqeeIY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var icon = recipeRuntime({base:[{mt:'4',size:'16'},'_1egjidmb']});

package/dist/toast-provider/ToastProvider.js

@@ -20,7 +20,6 @@ const mapPositionToSwipeDirection = {
 };
 const ToastProvider = forwardRef(
   ({
-    children,
     container,
     duration,
     label,
@@ -36,7 +35,7 @@ const ToastProvider = forwardRef(
     const ref = useComposedRefs(innerRef, outerRef);
     useOverflowAnchor(
       innerRef,
-      position.startsWith("bottom") ? "bottom" : "top"
+      position.startsWith("bottom") ? "top" : "bottom"
     );
     return /* @__PURE__ */ jsxs(
       RadixToast.ToastProvider,
@@ -58,7 +57,7 @@ const ToastProvider = forwardRef(
             {
               asChild: true,
               "data-position": position,
-              flexDirection: position.startsWith("bottom") ? "column" : "column-reverse",
+              flexDirection: position.startsWith("bottom") ? "column-reverse" : "column",
               ...viewport({ position }),
               ...sprinkleProps,
               children: /* @__PURE__ */ jsx(RadixToast.Viewport, { ref, ...restProps })

package/dist/tokens/fontSize.js

@@ -7,7 +7,7 @@ const fontSize = {
   },
   sm: {
     fontSize: rem("12px"),
-    lineHeight: rem("18px")
+    lineHeight: rem("16px")
   },
   md: {
     fontSize: rem("14px"),

package/dist/tooltip/Tooltip.js

@@ -6,6 +6,8 @@ import { forwardRef, useRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.js';
 import { Box } from '../box/Box.js';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import { theme } from '../styles/theme-css.js';
 import { Text } from '../text/Text.js';
 import { Transition } from '../transition/Transition.js';
 
@@ -16,6 +18,7 @@ const Tooltip = forwardRef(
     content,
     defaultOpen,
     delayDuration,
+    keepOpenOnActivation,
     onOpenChange,
     open: openProp,
     withArrow,
@@ -44,22 +47,52 @@ const Tooltip = forwardRef(
         } : setOpen,
         open,
         children: [
-          /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, ref, children }),
+          /* @__PURE__ */ jsx(
+            RadixTooltip.Trigger,
+            {
+              asChild: true,
+              onClick: keepOpenOnActivation ? (event) => {
+                event.preventDefault();
+                setOpen(true);
+              } : void 0,
+              ref,
+              children
+            }
+          ),
           /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixTooltip.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(
             Box,
             {
               asChild: true,
-              bg: "dark.600",
+              bg: "neutral.900",
               color: "white",
-              px: "6",
-              py: "4",
-              rounded: "sm",
+              px: "12",
+              py: "8",
+              rounded: "md",
               z,
               ...props,
-              children: /* @__PURE__ */ jsxs(RadixTooltip.Content, { sideOffset: 5, children: [
-                /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: content }),
-                withArrow && /* @__PURE__ */ jsx(RadixTooltip.Arrow, {})
-              ] })
+              children: /* @__PURE__ */ jsxs(
+                RadixTooltip.Content,
+                {
+                  onPointerDownOutside: keepOpenOnActivation ? (event) => {
+                    if (innerRef.current?.contains(
+                      event.target
+                    ))
+                      event.preventDefault();
+                  } : void 0,
+                  sideOffset: 5,
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: content }),
+                    withArrow && /* @__PURE__ */ jsx(
+                      RadixTooltip.Arrow,
+                      {
+                        fill: theme.colors["neutral.900"],
+                        height: 4,
+                        width: 8
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ) }) }) })
         ]

package/dist/transition/Transition.js

@@ -19,10 +19,13 @@ const Transition = forwardRef(
       Slot,
       {
         ref,
-        ...transition({
-          duration,
-          type: enter !== isPresent ? type : void 0
-        }),
+        ...transition(
+          {
+            duration,
+            type: enter !== isPresent ? type : void 0
+          },
+          void 0
+        ),
         ...props,
         children
       }

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.1.0-next.10",
+  "version": "0.1.0-next.11",
   "files": [
     "dist/**",
     "LICENSE"
@@ -20,6 +20,7 @@
   "dependencies": {
     "@fontsource-variable/fira-code": "^5.0.18",
     "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-arrow": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-compose-refs": "^1.1.0",
@@ -27,6 +28,8 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menu": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-popper": "^1.2.0",
     "@radix-ui/react-portal": "^1.1.1",
     "@radix-ui/react-primitive": "^2.0.0",
     "@radix-ui/react-progress": "^1.1.0",