@optiaxiom/react 0.5.3 → 0.6.0

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

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { theme } from '@optiaxiom/globals';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { usePopoverContext } from '../popover-context/PopoverContext.js';
+
+const PopoverContent = forwardRef(
+  ({ align = "start", children, sideOffset = 2, withArrow, ...props }, ref) => {
+    const { open } = usePopoverContext("PopoverContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, p: "sm", 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";
+
+export { PopoverContent };

package/dist/{src → packages/react/src}/popover-trigger/PopoverTrigger.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef } from 'react';
-import { MenuButton } from '../menu-button/MenuButton.js';
+import { Button } from '../button/Button.js';
 
 const PopoverTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children }) });
+  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
 });
 PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
 

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

@@ -0,0 +1,6 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.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'}}}});
+
+export { indicator };

package/dist/packages/react/src/progress/Progress.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { indicator } from './Progress-css.js';
+
+const Progress = forwardRef(
+  ({ intent = "primary", ...props }, ref) => {
+    const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
+    const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        bg: "bg.tertiary",
+        h: "8",
+        overflow: "hidden",
+        rounded: "full",
+        ...props,
+        children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
+          Box,
+          {
+            asChild: true,
+            style: {
+              width: `${widthPercentage}%`
+            },
+            ...indicator({
+              intent
+            }),
+            children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
+          }
+        ) })
+      }
+    );
+  }
+);
+const DEFAULT_MAX = 100;
+Progress.displayName = "@optiaxiom/react/Progress";
+
+export { Progress };

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

@@ -0,0 +1,12 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BZS5FCfo.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-BvyHKapA.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'_19wpno0'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1xbrq7e']});
+var input = recipeRuntime({base:'_1l19loo'});
+var radio = recipeRuntime({base:'jg26ud'});
+
+export { control, indicator, input, radio };

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

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DdhfcH19.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var clear = recipeRuntime({base:[{my:'-2',size:'sm'},'_16288vw']});
+var search = recipeRuntime({base:'w2v6j4'});
+
+export { clear, search };

package/dist/{src → packages/react/src}/select/Select.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import 'downshift';
-import 'react';
-import { useSelect } from '../downshift/useSelect.js';
+import { useSelect } from 'downshift';
+import { usePortalPatch } from '../downshift/usePortalPatch.js';
 import { SelectContextProvider } from '../select-context/SelectContext.js';
 
 function Select({
@@ -30,12 +29,17 @@ function Select({
     onChange: onOpenChange,
     prop: open
   });
+  const [highlightedIndex, setHighlightedIndex] = usePortalPatch(isOpen);
   const downshift = useSelect({
     ...props,
+    highlightedIndex,
     isOpen,
     items,
     itemToKey,
     itemToString,
+    onHighlightedIndexChange(changes) {
+      setHighlightedIndex(changes.highlightedIndex);
+    },
     onIsOpenChange({ isOpen: isOpen2 }) {
       setIsOpen(isOpen2);
     },
@@ -44,6 +48,7 @@ function Select({
     },
     selectedItem: selectedItem ?? null
   });
+  downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
     SelectContextProvider,
     {

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-BcS74a2e.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:['ne43u5']});
+
+export { content };

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { Portal } from '@radix-ui/react-portal';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { SelectContentImpl } from './SelectContentImpl.js';
+
+const SelectContent = forwardRef(
+  ({ children, loading, ...props }, ref) => {
+    const { isOpen } = useSelectContext("SelectContent");
+    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "popper", children: /* @__PURE__ */ jsx(SelectContentImpl, { ref, ...props, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) });
+  }
+);
+SelectContent.displayName = "@optiaxiom/react/SelectContent";
+
+export { SelectContent };

package/dist/packages/react/src/select-content/SelectContentImpl.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
+import { useFocusGuards } from '@radix-ui/react-focus-guards';
+import { PopperContent } from '@radix-ui/react-popper';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { content } from './SelectContent-css.js';
+
+const SelectContentImpl = forwardRef(
+  ({
+    align = "start",
+    children,
+    className,
+    side = "bottom",
+    sideOffset = 5,
+    ...props
+  }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift } = useSelectContext("SelectContentImpl");
+    useFocusGuards();
+    return /* @__PURE__ */ jsx(DismissableLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        ...content({}, className),
+        ...sprinkleProps,
+        ...downshift.getMenuProps({ ref, ...restProps }),
+        children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset, children })
+      }
+    ) });
+  }
+);
+SelectContentImpl.displayName = "@optiaxiom/react/SelectContentImpl";
+
+export { SelectContentImpl };

package/dist/packages/react/src/select-group/SelectGroup.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxGroup } from '../listbox-group/ListboxGroup.js';
+
+const SelectGroup = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(ListboxGroup, { ref, ...props });
+  }
+);
+SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
+
+export { SelectGroup };

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

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const SelectItem = forwardRef(
+  ({ children, item, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
+    const itemProps = downshift.getItemProps({ item, ...restProps });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
+        ref,
+        ...sprinkleProps,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+SelectItem.displayName = "@optiaxiom/react/SelectItem";
+
+export { SelectItem };

package/dist/packages/react/src/select-label/SelectLabel.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxLabel } from '../listbox-label/ListboxLabel.js';
+
+const SelectLabel = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(ListboxLabel, { ref, ...props });
+  }
+);
+SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
+
+export { SelectLabel };

package/dist/packages/react/src/select-radio-item/SelectRadioItem.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
+import { SelectItem } from '../select-item/SelectItem.js';
+
+const SelectRadioItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxRadioItem, { children }) });
+  }
+);
+SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
+
+export { SelectRadioItem };

package/dist/packages/react/src/select-separator/SelectSeparator.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxSeparator } from '../listbox-separator/ListboxSeparator.js';
+
+const SelectSeparator = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(ListboxSeparator, { ref, ...props });
+  }
+);
+SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
+
+export { SelectSeparator };

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-tbkhF289.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';
+
+var base = recipeRuntime({base:{bg:'border.default'}});
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1qu11q9',md:'_1mzb4gd',lg:'pcyvq4',base:'_1vupnmu'},defaultClass:'_1vupnmu'},vertical:{conditions:{sm:'_1lcexk9',md:'_16vcx74',lg:'_1lefh8o',base:'a9my6w'},defaultClass:'a9my6w'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+
+export { base, separator };

package/dist/packages/react/src/sidenav-item/SidenavItem-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-QLSpQ01c.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DrMH1fkC.css';
+import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-BErl3UKt.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'_1ueadl5']});
+
+export { item };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-4pjmbsRZ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'f3npbl']});
+
+export { skeleton };

package/dist/{src → packages/react/src}/spotlight/Spotlight.js

@@ -13,6 +13,7 @@ function Spotlight({
   items,
   itemToKey = (value) => value,
   itemToString = (value) => value ? String(value) : "",
+  itemToSubItems,
   onInputValueChange,
   onItemSelect,
   onOpenChange,
@@ -40,6 +41,7 @@ function Spotlight({
       items,
       itemToKey,
       itemToString,
+      itemToSubItems,
       onInputValueChange,
       onItemSelect,
       open,

package/dist/{src → packages/react/src}/spotlight-content/SpotlightContent.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { useCombobox } from 'downshift';
 import { forwardRef } from 'react';
 import { Command } from '../command/Command.js';
 import { DialogContent } from '../dialog-content/DialogContent.js';
@@ -13,6 +14,7 @@ const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size:
     items,
     itemToKey,
     itemToString,
+    itemToSubItems,
     onInputValueChange,
     onItemSelect
   } = useSpotlightContext("SpotlightContent");
@@ -34,8 +36,27 @@ const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size:
             items,
             itemToKey,
             itemToString,
+            itemToSubItems,
             onInputValueChange,
             onItemSelect,
+            open: true,
+            selectedItem: null,
+            stateReducer: (state, actionAndChanges) => {
+              const { changes, type } = actionAndChanges;
+              switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                  return {
+                    ...changes,
+                    /**
+                     * Keep the selected option highlighted rather than resetting to -1
+                     */
+                    highlightedIndex: state.highlightedIndex
+                  };
+                default:
+                  return changes;
+              }
+            },
             children
           }
         )

package/dist/{src → packages/react/src}/spotlight-empty/SpotlightEmpty.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { CommandEmpty } from '../command-empty/CommandEmpty.js';
+import { ListboxEmpty } from '../listbox-empty/ListboxEmpty.js';
 
 const SpotlightEmpty = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(CommandEmpty, { fontSize: "lg", gap: "sm", p: "xl", ref, ...props });
+    return /* @__PURE__ */ jsx(ListboxEmpty, { fontSize: "lg", gap: "sm", p: "xl", ref, ...props });
   }
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";

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

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

package/dist/{src → packages/react/src}/spotlight-input/SpotlightInput.js

@@ -1,16 +1,20 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { CommandInput } from '../command-input/CommandInput.js';
 import { DialogClose } from '../dialog-close/DialogClose.js';
+import { Flex } from '../flex/Flex.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { input } from './SpotlightInput-css.js';
 
 const SpotlightInput = forwardRef(
-  ({ className, ...props }, ref) => {
+  ({ addonAfter, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       CommandInput,
       {
-        addonAfter: /* @__PURE__ */ jsx(DialogClose, { fontSize: "xs", fontWeight: "500", h: "xs", size: "sm", children: "ESC" }),
+        addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", children: [
+          addonAfter,
+          /* @__PURE__ */ jsx(DialogClose, { fontSize: "xs", fontWeight: "500", h: "xs", size: "sm", children: "ESC" })
+        ] }),
         addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
         ref,
         size: "2xl",

package/dist/packages/react/src/spotlight-item/SpotlightItem.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandItem } from '../command-item/CommandItem.js';
+
+const SpotlightItem = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(CommandItem, { ref, ...props })
+);
+SpotlightItem.displayName = "@optiaxiom/react/SpotlightItem";
+
+export { SpotlightItem };

package/dist/{src → packages/react/src}/spotlight-label/SpotlightLabel.js

@@ -1,25 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const SpotlightLabel = forwardRef(
   ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
     return /* @__PURE__ */ jsx(
       Box,
       {
-        asChild: true,
         color: "fg.default",
         fontSize: "lg",
         fontWeight: "600",
         pb: "sm",
         pt: "md",
         px: "lg",
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children })
+        ref,
+        ...props,
+        children
       }
     );
   }

package/dist/{src → packages/react/src}/spotlight-list/SpotlightList.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { CommandList } from '../command-list/CommandList.js';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
 
 const SpotlightList = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(CommandList, { gap: "xs", pb: "lg", ref, ...props });
+    return /* @__PURE__ */ jsx(CommandListbox, { gap: "xs", pb: "lg", ref, ...props });
   }
 );
 SpotlightList.displayName = "@optiaxiom/react/SpotlightList";

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-AuaNf5sg.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'lg',px:'md',py:'sm'},'_6kee9g']});
+
+export { item };

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
+import { SpotlightItem } from '../spotlight-item/SpotlightItem.js';
+import { item } from './SpotlightRadioItem-css.js';
+
+const SpotlightRadioItem = forwardRef(({ addonAfter, children, className, description, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(SpotlightItem, { asChild: true, ref, ...item({}, className), ...props, children: /* @__PURE__ */ jsx(
+    ListboxRadioItem,
+    {
+      addonAfter: addonAfter ?? /* @__PURE__ */ jsx(IconAngleRight, {}),
+      description: description && /* @__PURE__ */ jsx(Box, { fontSize: "md", mt: "2", children: description }),
+      children
+    }
+  ) });
+});
+SpotlightRadioItem.displayName = "@optiaxiom/react/SpotlightRadioItem";
+
+export { SpotlightRadioItem };

package/dist/packages/react/src/spotlight-scroll-area/SpotlightScrollArea.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.js';
+
+const SpotlightScrollArea = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListboxScrollArea, { gap: "xs", ref, ...props }));
+SpotlightScrollArea.displayName = "@optiaxiom/react/SpotlightScrollArea";
+
+export { SpotlightScrollArea };

package/dist/packages/react/src/spotlight-sub/SpotlightSub.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandSub } from '../command-sub/CommandSub.js';
+import { Flex } from '../flex/Flex.js';
+
+const SpotlightSub = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(CommandSub, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "xs", pt: "sm", px: "lg", children }) });
+  }
+);
+SpotlightSub.displayName = "@optiaxiom/react/SpotlightSub";
+
+export { SpotlightSub };

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

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-3hLwWO1L.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-C2ir8b-K.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1nbwvan',true:'_1dliy1r'}}});
+
+export { item };

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

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { CommandSubItem } from '../command-sub-item/CommandSubItem.js';
+import { item } from './SpotlightSubItem-css.js';
+
+const SpotlightSubItem = forwardRef(({ children, className, selected, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    CommandSubItem,
+    {
+      asChild: true,
+      ref,
+      selected,
+      ...item({ active: selected || false }, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Badge,
+        {
+          intent: selected ? "information" : "neutral",
+          variant: selected ? "solid" : "light",
+          children
+        }
+      )
+    }
+  );
+});
+SpotlightSubItem.displayName = "@optiaxiom/react/SpotlightSubItem";
+
+export { SpotlightSubItem };