@optiaxiom/react 0.1.0-next.9 → 0.2.0

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/select-separator/SelectSeparator.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+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 SelectSeparator = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...sprinkleProps, children: /* @__PURE__ */ jsx(Separator, { ...restProps, children }) });
+  }
+);
+SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
+
+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

@@ -0,0 +1,9 @@
+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:'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

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { SideNavContextProvider } from '../side-nav-context/SideNavContext.js';
+
+const SideNav = forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    children,
+    defaultExpanded,
+    expanded: expandedProp,
+    onExpandedChange,
+    ...props
+  }, ref) => {
+    const [expanded, setExpanded] = useControllableState({
+      defaultProp: defaultExpanded,
+      onChange: onExpandedChange,
+      prop: expandedProp
+    });
+    const [animations, setAnimations] = useState(false);
+    const timerRef = useRef();
+    useEffect(() => {
+      timerRef.current = window.setTimeout(() => setAnimations(false), 300);
+    }, [animations]);
+    return /* @__PURE__ */ jsx(
+      SideNavContextProvider,
+      {
+        animations,
+        expanded,
+        onExpandedChange: (flag) => {
+          window.clearTimeout(timerRef.current);
+          setAnimations(true);
+          setExpanded(flag);
+        },
+        children: /* @__PURE__ */ jsx(Flex, { borderR: "1", w: "fit", ...props, children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            asChild: true,
+            bg: "bg.default",
+            flex: "1",
+            pb: "md",
+            pt: "lg",
+            px: "xs",
+            transition: animations ? "all" : void 0,
+            w: expanded ? "224" : "56",
+            children: /* @__PURE__ */ jsxs("nav", { "aria-label": "Main", ref, children: [
+              addonBefore,
+              /* @__PURE__ */ jsx(
+                Flex,
+                {
+                  asChild: true,
+                  flex: "1",
+                  gap: "4",
+                  justifyContent: "start",
+                  overflowY: "auto",
+                  w: "full",
+                  children: /* @__PURE__ */ jsx("ul", { children })
+                }
+              ),
+              addonAfter && /* @__PURE__ */ jsx(Flex, { asChild: true, gap: "xs", mt: "auto", overflowX: "hidden", children: /* @__PURE__ */ jsx("ul", { children: addonAfter }) })
+            ] })
+          }
+        ) })
+      }
+    );
+  }
+);
+SideNav.displayName = "@optiaxiom/react/SideNav";
+
+export { SideNav };

package/dist/src/side-nav-account-item/SideNavAccountItem.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { IconEllipsis } from '../icons/IconEllipsis.js';
+import { useSideNavContext } from '../side-nav-context/SideNavContext.js';
+import { Text } from '../text/Text.js';
+import { Transition } from '../transition/Transition.js';
+
+const SideNavAccountItem = forwardRef(({ avatar, name, organization, ...props }, ref) => {
+  const { animations, expanded } = useSideNavContext("SideNavAccountItem");
+  return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "xs", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    Flex,
+    {
+      asChild: true,
+      flexDirection: "row",
+      gap: "xs",
+      p: "4",
+      textAlign: "start",
+      ...props,
+      children: /* @__PURE__ */ jsxs("button", { ref, children: [
+        /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", my: "2", children: isValidElement(avatar) && cloneElement(avatar, { rounded: "sm" }) }),
+        expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsxs(Flex, { flex: "1", flexDirection: "row", gap: "xs", overflowX: "hidden", children: [
+          /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
+            /* @__PURE__ */ jsx(Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
+            /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) })
+        ] }) })
+      ] })
+    }
+  ) }) });
+});
+SideNavAccountItem.displayName = "@optiaxiom/react/SideNavAccountItem";
+
+export { SideNavAccountItem };

package/dist/src/side-nav-context/SideNavContext.js

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

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

@@ -0,0 +1,9 @@
+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',textAlign:'start'},'rsr7y']});
+
+export { item };

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

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { useSideNavContext } from '../side-nav-context/SideNavContext.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { Transition } from '../transition/Transition.js';
+import { item } from './SideNavItem-css.js';
+
+const SideNavItem = forwardRef(
+  ({ active, addonAfter, asChild, children, className, ...props }, ref) => {
+    const { animations, expanded } = useSideNavContext("SideNavItem");
+    let tooltip = children;
+    if (asChild) {
+      const newElement = isValidElement(children) ? children : null;
+      tooltip = newElement ? newElement.props.children : tooltip;
+      children = newElement ? cloneElement(
+        newElement,
+        void 0,
+        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, { whiteSpace: "nowrap", children }) }) });
+    }
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: !expanded && (props["aria-label"] || tooltip),
+        side: "right",
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            addonAfter: expanded && addonAfter,
+            appearance: "subtle",
+            asChild,
+            "data-state": active ? "active" : void 0,
+            justifyContent: expanded ? "start" : "center",
+            ref,
+            size: "lg",
+            transition: animations ? "colors" : void 0,
+            ...item({}, className),
+            ...props,
+            children
+          }
+        )
+      }
+    ) }) });
+  }
+);
+SideNavItem.displayName = "@optiaxiom/react/SideNavItem";
+
+export { SideNavItem };

package/dist/src/side-nav-toggle/SideNavToggle.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useSideNavContext } from '../side-nav-context/SideNavContext.js';
+import { SideNavItem } from '../side-nav-item/SideNavItem.js';
+
+const SideNavToggle = forwardRef(
+  ({ "aria-label": ariaLabel, children, ...props }, ref) => {
+    const { expanded, onExpandedChange } = useSideNavContext("SideNavToggle");
+    return /* @__PURE__ */ jsx(
+      SideNavItem,
+      {
+        "aria-label": ariaLabel || (expanded ? "Collapse" : "Expand"),
+        fontWeight: "400",
+        onClick: () => onExpandedChange(!expanded),
+        ref,
+        ...props,
+        children: children ? children : expanded ? "Collapse" : "Expand"
+      }
+    );
+  }
+);
+SideNavToggle.displayName = "@optiaxiom/react/SideNavToggle";
+
+export { SideNavToggle };

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

@@ -0,0 +1,7 @@
+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'},'_1g56fa3']});
+
+export { skeleton };

package/dist/src/spinner/Spinner.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { Transition } from '../transition/Transition.js';
+
+const mapColorSchemeToBg = {
+  default: "spinner.bg.default",
+  inverse: "spinner.bg.inverse"
+};
+const mapColorSchemeToFg = {
+  default: "spinner.fg.default",
+  inverse: "spinner.fg.inverse"
+};
+const Spinner = forwardRef(
+  ({ children, colorScheme = "default", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Transition, { duration: "sm", children: /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        alignItems: "center",
+        "aria-label": "Loading",
+        display: "inline-flex",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Box, { animation: "spin", asChild: true, size, children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              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"
+                  }
+                ) })
+              ]
+            }
+          ) }),
+          children
+        ]
+      }
+    ) });
+  }
+);
+Spinner.displayName = "@optiaxiom/react/Spinner";
+
+export { Spinner };

package/dist/src/sprinkles/createSprinklesMerge.js

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+
+function createSprinklesMerge(...properties) {
+  const classNameToPropertyMapping = {};
+  for (const [name, definition] of Object.entries({
+    ...properties[0]?.styles,
+    ...properties[1]?.styles
+  })) {
+    if ("values" in definition) {
+      for (const value of Object.values(definition.values)) {
+        classNameToPropertyMapping[value.defaultClass] = `defaultClass:${name}`;
+        if ("conditions" in value && value.conditions) {
+          for (const [condition, className] of Object.entries(
+            value.conditions
+          )) {
+            classNameToPropertyMapping[className] = `${condition}:${name}`;
+          }
+        }
+      }
+    }
+  }
+  return function sprinklesMerge(...classNames) {
+    let parsedClassName = { _: [] };
+    while (classNames.length) {
+      const className = classNames.shift();
+      if (!className) {
+        continue;
+      }
+      parsedClassName = className.split(" ").reduce((result, className2) => {
+        className2 = className2.trim();
+        if (!className2) {
+          return result;
+        }
+        if (className2 in classNameToPropertyMapping) {
+          result[classNameToPropertyMapping[className2]] = [className2];
+        } else {
+          result._.push(className2);
+        }
+        return result;
+      }, parsedClassName);
+    }
+    return clsx(...new Set(Object.values(parsedClassName).flat()));
+  };
+}
+
+export { createSprinklesMerge };

package/dist/{sprinkles → src/sprinkles}/extractSprinkles.js

@@ -1,11 +1,13 @@
-import { sprinkles } from './sprinkles-css.js';
+import { sprinkles } from './sprinkles.js';
 
 function extractSprinkles(props) {
   const sprinkleProps = {};
   const restProps = {};
   for (const [name, value] of Object.entries(props)) {
     if (sprinkles.properties.has(name)) {
-      sprinkleProps[name] = value;
+      if (value !== null && value !== void 0) {
+        sprinkleProps[name] = value;
+      }
     } else {
       restProps[name] = value;
     }