@optiaxiom/react 0.1.0-next.9 → 0.2.0

package/dist/src/menu-item-base/MenuItemBase.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { useId } from '@reach/auto-id';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { Text } from '../text/Text.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { item } from './MenuItemBase-css.js';
+
+const MenuItemBase = forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    children,
+    className,
+    colorScheme = "neutral",
+    description,
+    ...props
+  }, ref) => {
+    const labelId = useId();
+    const descriptionId = useId();
+    const newElement = isValidElement(children) ? children : null;
+    children = newElement ? cloneElement(
+      newElement,
+      void 0,
+      /* @__PURE__ */ jsxs(Box, { flex: "1", children: [
+        /* @__PURE__ */ jsx(Box, { asChild: true, id: labelId, children: fallbackSpan(newElement.props.children) }),
+        description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: description })
+      ] })
+    ) : children;
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        "aria-describedby": description ? descriptionId : void 0,
+        "aria-labelledby": labelId,
+        asChild: true,
+        ref,
+        ...item({ colorScheme }, className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Slot, { children: [
+          addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, h: "16", w: "auto", children: fallbackSpan(addonBefore) }),
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(addonAfter) })
+        ] })
+      }
+    );
+  }
+);
+MenuItemBase.displayName = "@optiaxiom/react/MenuItemBase";
+
+export { MenuItemBase };

package/dist/src/pagination/Pagination-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/pagination/Pagination.css.ts.vanilla-C6E_uS36.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'_1f4umqn'});
+
+export { button };

package/dist/src/pagination/Pagination.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { usePagination } from '@mantine/hooks';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { IconAngleLeft } from '../icons/IconAngleLeft.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { IconEllipsis } from '../icons/IconEllipsis.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { button } from './Pagination-css.js';
+
+const Pagination = forwardRef(
+  ({
+    boundaries = 1,
+    defaultPage,
+    disabled,
+    onPageChange,
+    page: pageProp,
+    siblings = 1,
+    total,
+    ...props
+  }, ref) => {
+    const [value, setValue] = useControllableState({
+      defaultProp: defaultPage,
+      onChange: onPageChange,
+      prop: pageProp
+    });
+    const { active, next, previous, range, setPage } = usePagination({
+      boundaries,
+      onChange: setValue,
+      page: value,
+      siblings,
+      total
+    });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "2", children: /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Prev", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "subtle",
+          "aria-label": "Previous page",
+          disabled: disabled || active === 1,
+          icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
+          onClick: previous
+        }
+      ) }) }),
+      range.map((page, index) => /* @__PURE__ */ jsx("li", { children: page === "dots" ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          alignItems: "stretch",
+          display: "flex",
+          justifyContent: "center",
+          py: "10",
+          size: "md",
+          children: /* @__PURE__ */ jsx(Box, { alignItems: "end", display: "flex", children: /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) }) })
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "subtle",
+          "aria-current": active === page ? "page" : void 0,
+          "data-state": active === page ? "active" : void 0,
+          disabled,
+          onClick: () => setPage(page),
+          ...button(),
+          children: /* @__PURE__ */ jsxs(Box, { mx: "0", children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: "page" }),
+            " ",
+            page,
+            page === 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(first page)" }) : page === total ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(last page)" }) : null
+          ] })
+        }
+      ) }, `${index}`)),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Next", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "subtle",
+          "aria-label": "Next page",
+          disabled: disabled || active === total,
+          icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
+          onClick: next
+        }
+      ) }) })
+    ] }) }) }) });
+  }
+);
+Pagination.displayName = "@optiaxiom/react/Pagination";
+
+export { Pagination };

package/dist/src/pill/Pill-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/pill/Pill.css.ts.vanilla-DnHV9sII.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_1c6void'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+
+export { pill };

package/dist/src/pill/Pill.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.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,
+      {
+        addonAfter,
+        addonBefore,
+        onKeyDown: handleKeyDown,
+        ref,
+        ...pill({ size }, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Text, { display: "block", fontSize: "inherit", truncate: true, children })
+      }
+    ) });
+  }
+);
+Pill.displayName = "@optiaxiom/react/Pill";
+
+export { Pill };

package/dist/src/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 { PopoverContextProvider } from '../popover-context/PopoverContext.js';
+
+function 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(PopoverContextProvider, { open, children }) });
+}
+Popover.displayName = "@optiaxiom/react/Popover";
+
+export { Popover };

package/dist/src/popover-anchor/PopoverAnchor.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const PopoverAnchor = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild, ref, children }) });
+  }
+);
+PopoverAnchor.displayName = "@optiaxiom/react/PopoverAnchor";
+
+export { PopoverAnchor };

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

@@ -0,0 +1,41 @@
+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 { MenuContentBase } from '../menu-content-base/MenuContentBase.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(MenuContentBase, { open, 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/popover-context/PopoverContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [PopoverContextProvider, usePopoverContext] = createContext("Popover");
+
+export { PopoverContextProvider, usePopoverContext };

package/dist/src/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 { MenuButton } from '../menu-button/MenuButton.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.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(MenuButton, { ...restProps, children }) });
+});
+PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
+
+export { PopoverTrigger };

package/dist/{progress → src/progress}/Progress.js

@@ -11,7 +11,7 @@ const Progress = forwardRef(
       Box,
       {
         asChild: true,
-        bg: "bg.brand.solid",
+        bg: "bg.accent",
         h: "full",
         rounded: "lg",
         style: { width: `${widthPercentage}%` },

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

@@ -0,0 +1,12 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-7tBLQzKd.css';
+import './../../assets/src/radio/Radio.css.ts.vanilla-uSwsEcjC.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',mt:'2',p:'2',rounded:'full',size:'16'},'_1pdv1fm']});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'cxg0j']});
+var input = recipeRuntime({base:'_19pod27'});
+var radio = recipeRuntime({base:'_1xxjj6e'});
+
+export { control, indicator, input, radio };

package/dist/src/radio/Radio.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useRadioGroupContext } from '../radio-group-context/RadioGroupContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { ToggleInput } from '../toggle-input/ToggleInput.js';
+import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
+import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
+import { ToggleInputDescription } from '../toggle-input-description/ToggleInputDescription.js';
+import { ToggleInputHiddenInput } from '../toggle-input-hidden-input/ToggleInputHiddenInput.js';
+import { ToggleInputLabel } from '../toggle-input-label/ToggleInputLabel.js';
+import { radio, input, control, indicator } from './Radio-css.js';
+
+const Radio = forwardRef(
+  ({
+    children,
+    className,
+    description,
+    disabled,
+    name,
+    onBlur,
+    onChange,
+    ...props
+  }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const groupContext = useRadioGroupContext("Radio");
+    if (groupContext) {
+      if ("checked" in props) {
+        throw new Error(
+          `Cannot use \`checked\` prop when \`Radio\` is used within \`RadioGroup\``
+        );
+      }
+      if (props.value === void 0) {
+        throw new Error(
+          `Must use \`value\` prop when \`Radio\` is used within \`RadioGroup\``
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      ToggleInput,
+      {
+        description: !!description,
+        ...radio({}, className),
+        ...sprinkleProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleInputHiddenInput,
+            {
+              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,
+              onChange: groupContext?.onChange ?? onChange,
+              ref,
+              type: "radio",
+              ...input(),
+              ...restProps
+            }
+          ),
+          /* @__PURE__ */ jsx(ToggleInputControl, { ...control(), children: /* @__PURE__ */ jsx(Box, { ...indicator() }) }),
+          /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
+            /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
+            description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "@optiaxiom/react/Radio";
+
+export { Radio };

package/dist/src/radio-group/RadioGroup.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { RadioGroupContextProvider } from '../radio-group-context/RadioGroupContext.js';
+import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const mapGapToOrientation = {
+  column: "sm",
+  "column-reverse": "sm",
+  row: "md",
+  "row-reverse": "md"
+};
+const RadioGroup = forwardRef(
+  ({
+    children,
+    defaultValue,
+    disabled,
+    flexDirection = "column",
+    name,
+    onBlur,
+    onChange,
+    onValueChange,
+    value,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      RadioGroupContextProvider,
+      {
+        defaultValue,
+        disabled,
+        name,
+        onBlur,
+        onChange: (event) => {
+          onChange?.(event);
+          onValueChange?.(event.target.value);
+        },
+        value,
+        children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            flexDirection,
+            gap: mapResponsiveValue(
+              flexDirection,
+              (value2) => mapGapToOrientation[value2]
+            ),
+            ref,
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "@optiaxiom/react/RadioGroup";
+
+export { RadioGroup };

package/dist/src/radio-group-context/RadioGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [RadioGroupContextProvider, useRadioGroupContext] = createContext("RadioGroup", null);
+
+export { RadioGroupContextProvider, useRadioGroupContext };

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

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/search-input/SearchInput.css.ts.vanilla-DRteGRTF.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var clear = recipeRuntime({base:[{size:'sm'},'hs7xh4']});
+var search = recipeRuntime({base:'tcr4iv'});
+
+export { clear, search };

package/dist/src/search-input/SearchInput.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useState } from 'react';
+import { Button } from '../button/Button.js';
+import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
+import { IconX } from '../icons/IconX.js';
+import { Input } from '../input/Input.js';
+import { clear, search } from './SearchInput-css.js';
+
+const SearchInput = forwardRef(
+  ({
+    className,
+    defaultValue = "",
+    onChange,
+    onValueClear,
+    value: valueProp,
+    ...props
+  }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const [innerValue, setValue] = useState(defaultValue);
+    const value = typeof valueProp === "undefined" ? innerValue : valueProp;
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        addonAfter: value && /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            "aria-label": "Clear",
+            icon: value && /* @__PURE__ */ jsx(IconX, {}),
+            onClick: () => {
+              if (!innerRef.current) {
+                return;
+              }
+              forceValueChange(innerRef.current, "");
+              innerRef.current.focus();
+              onValueClear?.();
+            },
+            tabIndex: -1,
+            ...clear()
+          }
+        ),
+        addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
+        addonPointerEvents: "none",
+        autoComplete: "off",
+        onChange: (event) => {
+          onChange?.(event);
+          setValue(event.target.value);
+        },
+        ref,
+        type: "search",
+        value,
+        ...search({}, className),
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "@optiaxiom/react/SearchInput";
+function forceValueChange(input, value) {
+  Object.getOwnPropertyDescriptor(
+    input.constructor.prototype,
+    "value"
+  )?.set?.call(input, value);
+  input.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+export { SearchInput };

package/dist/src/segmented-control/SegmentedControl.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const SegmentedControl = forwardRef(({ children, type = "single", ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children }) });
+});
+SegmentedControl.displayName = "@optiaxiom/react/SegmentedControl";
+
+export { SegmentedControl };

package/dist/src/segmented-control-item/SegmentedControlItem.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+
+const SegmentedControlItem = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadixSegmentedControl.Item,
+    {
+      appearance: "subtle",
+      asChild: true,
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(Button, { children })
+    }
+  );
+});
+SegmentedControlItem.displayName = "@optiaxiom/react/SegmentedControlItem";
+
+export { SegmentedControlItem };

package/dist/src/select/Select.js

@@ -0,0 +1,64 @@
+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 { SelectContextProvider } from '../select-context/SelectContext.js';
+
+function Select({
+  children,
+  defaultOpen = false,
+  defaultValue,
+  disabled,
+  items,
+  itemToKey = (value2) => value2,
+  itemToString = (value2) => value2 ? String(value2) : "",
+  onOpenChange,
+  onValueChange,
+  open,
+  value,
+  ...props
+}) {
+  const [selectedItem, setSelectedItem] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: value
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open
+  });
+  const downshift = useSelect({
+    ...props,
+    isOpen,
+    items,
+    itemToKey,
+    itemToString,
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      setIsOpen(isOpen2);
+    },
+    onSelectedItemChange({ selectedItem: selectedItem2 }) {
+      setSelectedItem(selectedItem2);
+    },
+    selectedItem: selectedItem ?? null
+  });
+  return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
+    SelectContextProvider,
+    {
+      disabled,
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      isOpen: downshift.isOpen,
+      items,
+      itemToKey,
+      itemToString,
+      selectedItem,
+      children
+    }
+  ) });
+}
+Select.displayName = "@optiaxiom/react/Select";
+
+export { Select };

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

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