@optiaxiom/react 0.1.0 → 0.2.0

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 };

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

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { PopperContent } from '@radix-ui/react-popper';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { content } from './SelectContent-css.js';
+
+const SelectContent = forwardRef(
+  ({
+    align = "center",
+    children,
+    className,
+    loading,
+    side = "bottom",
+    sideOffset = 5,
+    ...props
+  }, ref) => {
+    const { downshift, isOpen } = useSelectContext("SelectContent");
+    return /* @__PURE__ */ jsx(MenuContentBase, { open: isOpen, provider: "popper", children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(
+      PopperContent,
+      {
+        align,
+        asChild: true,
+        side,
+        sideOffset,
+        children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({}, { suppressRefError: true }), children: loading ? /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : children })
+      }
+    ) }) });
+  }
+);
+SelectContent.displayName = "@optiaxiom/react/SelectContent";
+
+export { SelectContent };

package/dist/src/select-context/SelectContext.js

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

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

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

package/dist/src/select-item-context/SelectItemContext.js

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

package/dist/src/select-item-indicator/SelectItemIndicator.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { IconCheck } from '../icons/IconCheck.js';
+import { useSelectItemContext } from '../select-item-context/SelectItemContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const SelectItemIndicator = forwardRef(({ children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { active } = useSelectItemContext("SelectItemIndicator");
+  if (!active) {
+    return /* @__PURE__ */ jsx(Box, { w: "12" });
+  }
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
+});
+SelectItemIndicator.displayName = "@optiaxiom/react/SelectItemIndicator";
+
+export { SelectItemIndicator };

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

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const SelectLabel = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        color: "fg.default",
+        fontSize: "md",
+        fontWeight: "600",
+        p: "xs",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
+
+export { SelectLabel };

package/dist/src/{command/Command.js → select-separator/SelectSeparator.js}

@@ -1,17 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import { Command as Command$1 } from 'cmdk';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { Separator } from '../separator/Separator.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const Command = forwardRef(
+const SelectSeparator = forwardRef(
   ({ children, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(Command$1, { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...sprinkleProps, children: /* @__PURE__ */ jsx(Separator, { ...restProps, children }) });
   }
 );
-Command.displayName = "@optiaxiom/react/Command";
+SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
 
-export { Command };
+export { SelectSeparator };

package/dist/src/select-trigger/SelectTrigger.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { PopperAnchor } from '@radix-ui/react-popper';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useRef, useEffect } from 'react';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { MenuButton } from '../menu-button/MenuButton.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+
+const SelectTrigger = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const { disabled, downshift } = useSelectContext("SelectTrigger");
+    const { labelId } = useFieldContext();
+    const buttonRef = useRef(null);
+    useEffect(() => {
+      if (!labelId || !buttonRef.current) {
+        return;
+      }
+      const button = buttonRef.current;
+      const label = document.getElementById(labelId);
+      if (!label) {
+        return;
+      }
+      const onLabelClick = () => button.focus();
+      label.addEventListener("click", onLabelClick);
+      return () => label.removeEventListener("click", onLabelClick);
+    }, [labelId]);
+    return /* @__PURE__ */ jsx(
+      PopperAnchor,
+      {
+        asChild: true,
+        ...props,
+        ...downshift.getToggleButtonProps({ disabled }),
+        children: /* @__PURE__ */ jsx(Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { "aria-labelledby": labelId, ref: buttonRef, children }) })
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
+
+export { SelectTrigger };

package/dist/src/select-value/SelectValue.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
+
+const SelectValue = forwardRef(
+  ({ children, placeholder, ...props }, ref) => {
+    const { itemToString, selectedItem } = useSelectContext("SelectValue");
+    return /* @__PURE__ */ jsx(Box, { ...props, ref, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) });
+  }
+);
+SelectValue.displayName = "@optiaxiom/react/SelectValue";
+
+export { SelectValue };

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/separator/Separator.css.ts.vanilla-BPTyRjy9.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/separator/Separator.css.ts.vanilla-P1XO1rTW.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:'_16cu6ot',md:'mte605',lg:'_1ov280y',base:'_13a6mg'},defaultClass:'_13a6mg'},vertical:{conditions:{sm:'_1srd82s',md:'_16z4hln',lg:'i1g9iz',base:'gw0l8a'},defaultClass:'gw0l8a'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'pa223x',md:'hcnz2k',lg:'kbdxcu',base:'rzccj8'},defaultClass:'rzccj8'},vertical:{conditions:{sm:'_13fq231',md:'_1r79he8',lg:'qta7r3',base:'_11r3eyg'},defaultClass:'_11r3eyg'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/src/side-nav/SideNav.js

@@ -34,7 +34,7 @@ const SideNav = forwardRef(
           setAnimations(true);
           setExpanded(flag);
         },
-        children: /* @__PURE__ */ jsx(Flex, { borderR: "1", ...props, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Flex, { borderR: "1", w: "fit", ...props, children: /* @__PURE__ */ jsx(
           Flex,
           {
             asChild: true,

package/dist/src/side-nav-item/SideNavItem-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-9uH71Yf6.css';
-import './../../assets/src/button/Button.css.ts.vanilla-BDZg-A0O.css';
-import './../../assets/src/side-nav-item/SideNavItem.css.ts.vanilla-DoASts5V.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/button/Button.css.ts.vanilla-f0BfuF2p.css';
+import './../../assets/src/side-nav-item/SideNavItem.css.ts.vanilla-BvkdhlHG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',justifyContent:'start',textAlign:'start'},'_93cuk6']});
+var item = recipeRuntime({base:[{fontWeight:'500',textAlign:'start'},'rsr7y']});
 
 export { item };

package/dist/src/side-nav-item/SideNavItem.js

@@ -18,10 +18,10 @@ const SideNavItem = forwardRef(
       children = newElement ? cloneElement(
         newElement,
         void 0,
-        expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { children: newElement.props.children }) }) })
+        expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: newElement.props.children }) }) })
       ) : children;
     } else {
-      children = expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { children }) }) });
+      children = expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children }) }) });
     }
     return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       Tooltip,
@@ -35,9 +35,10 @@ const SideNavItem = forwardRef(
             appearance: "subtle",
             asChild,
             "data-state": active ? "active" : void 0,
+            justifyContent: expanded ? "start" : "center",
             ref,
             size: "lg",
-            transition: animations ? "all" : void 0,
+            transition: animations ? "colors" : void 0,
             ...item({}, className),
             ...props,
             children

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-BsQmCWCL.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-CKv-1wd9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_15u5bkn']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1g56fa3']});
 
 export { skeleton };

package/dist/src/spinner/Spinner.js

@@ -1,52 +1,62 @@
 import { jsx, jsxs } 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';
+import { Flex } from '../flex/Flex.js';
+import { Transition } from '../transition/Transition.js';
 
 const mapColorSchemeToBg = {
-  default: "bg.secondary",
-  inverse: "neutral.50/6"
+  default: "spinner.bg.default",
+  inverse: "spinner.bg.inverse"
 };
 const mapColorSchemeToFg = {
-  default: "fg.default",
-  inverse: "border.secondary"
+  default: "spinner.fg.default",
+  inverse: "spinner.fg.inverse"
 };
 const Spinner = forwardRef(
-  ({ colorScheme = "default", ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { animation: "spin", asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsxs(
-      "svg",
+  ({ children, colorScheme = "default", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Transition, { duration: "sm", children: /* @__PURE__ */ jsxs(
+      Flex,
       {
-        fill: "none",
-        height: 16,
+        alignItems: "center",
+        "aria-label": "Loading",
+        display: "inline-flex",
         ref,
-        role: "img",
-        viewBox: "0 0 16 16",
-        width: 16,
-        xmlns: "http://www.w3.org/2000/svg",
-        ...restProps,
+        ...props,
         children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToBg[colorScheme], children: /* @__PURE__ */ jsx(
-            "circle",
+          /* @__PURE__ */ jsx(Box, { animation: "spin", asChild: true, size, children: /* @__PURE__ */ jsxs(
+            "svg",
             {
-              cx: "8",
-              cy: "8",
-              r: "7",
-              stroke: "currentColor",
-              strokeWidth: "1.5"
+              fill: "none",
+              height: 16,
+              role: "img",
+              viewBox: "0 0 16 16",
+              width: 16,
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToBg[colorScheme], children: /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "8",
+                    cy: "8",
+                    r: "7",
+                    stroke: "currentColor",
+                    strokeOpacity: "0.04",
+                    strokeWidth: "1.5"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToFg[colorScheme], children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M4.5 1.93782C5.45668 1.38549 6.53049 1.06741 7.63365 1.00959C8.73681 0.951779 9.83799 1.15587 10.8472 1.60518C11.8563 2.05449 12.7448 2.73627 13.44 3.59476C14.1352 4.45325 14.6174 5.46408 14.847 6.54462",
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeWidth: "1.5"
+                  }
+                ) })
+              ]
             }
           ) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToFg[colorScheme], children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M4.5 1.93782C5.78021 1.19869 7.26154 0.883827 8.7317 1.03835C10.2019 1.19287 11.5854 1.80884 12.6839 2.79798C13.7825 3.78713 14.5397 5.09866 14.847 6.54461C15.1544 7.99057 14.9961 9.4967 14.3948 10.8472",
-              stroke: "currentColor",
-              strokeLinecap: "round",
-              strokeWidth: "1.5"
-            }
-          ) })
+          children
         ]
       }
     ) });