@optiaxiom/react 0.4.2 → 0.5.0

package/dist/src/sidenav-content/SidenavContent.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const SidenavContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        asChild: true,
+        flex: "1",
+        gap: "4",
+        justifyContent: "start",
+        overflowX: "hidden",
+        overflowY: "auto",
+        py: "xs",
+        w: "full",
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })
+      }
+    );
+  }
+);
+SidenavContent.displayName = "@optiaxiom/react/SidenavContent";
+
+export { SidenavContent };

package/dist/src/sidenav-footer/SidenavFooter.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const SidenavFooter = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        asChild: true,
+        gap: "xs",
+        mt: "auto",
+        overflowX: "hidden",
+        py: "xs",
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })
+      }
+    );
+  }
+);
+SidenavFooter.displayName = "@optiaxiom/react/SidenavFooter";
+
+export { SidenavFooter };

package/dist/src/sidenav-header/SidenavHeader.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const SidenavHeader = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children }) });
+  }
+);
+SidenavHeader.displayName = "@optiaxiom/react/SidenavHeader";
+
+export { SidenavHeader };

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-CbhXWBhY.css';
-import './../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-za4fE3C2.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DvaqTswf.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-B3E46v7K.css';
+import './../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-DkwT18Yw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'rruisy']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'_1qlx3qw']});
 
 export { item };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-BzoSQC9k.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-di59k6DT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1bm36il']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1jprwxq']});
 
 export { skeleton };

package/dist/src/spinner/Spinner.js

@@ -4,16 +4,16 @@ import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
 import { Transition } from '../transition/Transition.js';
 
-const mapColorSchemeToBg = {
+const mapAppearanceToBg = {
   default: "spinner.bg.default",
   inverse: "spinner.bg.inverse"
 };
-const mapColorSchemeToFg = {
+const mapAppearanceToFg = {
   default: "spinner.fg.default",
   inverse: "spinner.fg.inverse"
 };
 const Spinner = forwardRef(
-  ({ children, colorScheme = "default", size = "md", ...props }, ref) => {
+  ({ appearance = "default", children, size = "md", ...props }, ref) => {
     return /* @__PURE__ */ jsx(Transition, { duration: "sm", children: /* @__PURE__ */ jsxs(
       Flex,
       {
@@ -33,7 +33,7 @@ const Spinner = forwardRef(
               width: 16,
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToBg[colorScheme], children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Box, { asChild: true, color: mapAppearanceToBg[appearance], children: /* @__PURE__ */ jsx(
                   "circle",
                   {
                     cx: "8",
@@ -44,7 +44,7 @@ const Spinner = forwardRef(
                     strokeWidth: "1.5"
                   }
                 ) }),
-                /* @__PURE__ */ jsx(Box, { asChild: true, color: mapColorSchemeToFg[colorScheme], children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Box, { asChild: true, color: mapAppearanceToFg[appearance], 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",

package/dist/src/spotlight/Spotlight.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useEffect } from 'react';
+import { Dialog } from '../dialog/Dialog.js';
+import { SpotlightContextProvider } from '../spotlight-context/SpotlightContext.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
+
+function Spotlight({
+  children,
+  defaultOpen = false,
+  inputValue,
+  isItemDisabled = () => false,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  onInputValueChange,
+  onItemSelect,
+  onOpenChange,
+  open: openProp
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const onInputValueChangeStable = useEffectEvent(
+    onInputValueChange ?? (() => {
+    })
+  );
+  useEffect(() => {
+    if (!open) {
+      onInputValueChangeStable("");
+    }
+  }, [open, onInputValueChangeStable]);
+  return /* @__PURE__ */ jsx(Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
+    SpotlightContextProvider,
+    {
+      inputValue,
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      onInputValueChange,
+      onItemSelect,
+      open,
+      setOpen,
+      children
+    }
+  ) });
+}
+Spotlight.displayName = "@optiaxiom/react/Spotlight";
+
+export { Spotlight };

package/dist/src/spotlight-content/SpotlightContent.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { Command } from '../command/Command.js';
+import { DialogContent } from '../dialog-content/DialogContent.js';
+import { DialogTitle } from '../dialog-title/DialogTitle.js';
+import { useSpotlightContext } from '../spotlight-context/SpotlightContext.js';
+
+const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size: _size, ...props }, ref) => {
+  const {
+    inputValue,
+    isItemDisabled,
+    items,
+    itemToKey,
+    itemToString,
+    onInputValueChange,
+    onItemSelect
+  } = useSpotlightContext("SpotlightContent");
+  return /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      "aria-describedby": void 0,
+      overflow: "hidden",
+      ref,
+      transitionType: "pop",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DialogTitle, { children: ariaLabel ?? "Quick search" }) }),
+        /* @__PURE__ */ jsx(
+          Command,
+          {
+            inputValue,
+            isItemDisabled,
+            items,
+            itemToKey,
+            itemToString,
+            onInputValueChange,
+            onItemSelect,
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
+
+export { SpotlightContent };

package/dist/src/spotlight-context/SpotlightContext.js

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

package/dist/src/spotlight-empty/SpotlightEmpty.js

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

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

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

package/dist/src/spotlight-input/SpotlightInput.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandInput } from '../command-input/CommandInput.js';
+import { DialogClose } from '../dialog-close/DialogClose.js';
+import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
+import { input } from './SpotlightInput-css.js';
+
+const SpotlightInput = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      CommandInput,
+      {
+        addonAfter: /* @__PURE__ */ jsx(DialogClose, { fontSize: "xs", fontWeight: "500", h: "xs", size: "sm", children: "ESC" }),
+        addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
+        ref,
+        size: "2xl",
+        ...input({}, className),
+        ...props
+      }
+    );
+  }
+);
+SpotlightInput.displayName = "@optiaxiom/react/SpotlightInput";
+
+export { SpotlightInput };

package/dist/src/spotlight-item/SpotlightItem-css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/spotlight-item/SpotlightItem.css.ts.vanilla-6J2rLNeq.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var description = recipeRuntime({base:[{fontSize:'md',mt:'2',transition:'colors'},'_1q5anft']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'lg',px:'md',py:'sm'},'_1m0u3oj']});
+
+export { description, item };

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { CommandItem } from '../command-item/CommandItem.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { description, item } from './SpotlightItem-css.js';
+
+const SpotlightItem = forwardRef(
+  ({ addonAfter, className, description: description$1, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      CommandItem,
+      {
+        addonAfter: addonAfter ?? /* @__PURE__ */ jsx(IconAngleRight, {}),
+        description: description$1 && /* @__PURE__ */ jsx(Box, { ...description(), children: description$1 }),
+        ref,
+        ...item({}, className),
+        ...props
+      }
+    );
+  }
+);
+SpotlightItem.displayName = "@optiaxiom/react/SpotlightItem";
+
+export { SpotlightItem };

package/dist/src/spotlight-label/SpotlightLabel.js

@@ -0,0 +1,29 @@
+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 })
+      }
+    );
+  }
+);
+SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
+
+export { SpotlightLabel };

package/dist/src/spotlight-list/SpotlightList.js

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

package/dist/src/spotlight-trigger/SpotlightTrigger.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { Box } from '../box/Box.js';
+import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
+import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
+import { useSpotlightContext } from '../spotlight-context/SpotlightContext.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+
+const DEFAULT_HOTKEY = ["metaKey", "KeyK"];
+const SpotlightTrigger = forwardRef(({ addonAfter, children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
+  const { open, setOpen } = useSpotlightContext("SpotlightTrigger");
+  useEffect(() => {
+    const listener = (event) => {
+      const isHotkeyPressed = hotkey.length !== 0 && hotkey.every(
+        (key) => event[key] || event.code === key
+      );
+      if (isHotkeyPressed) {
+        setOpen(!open);
+      }
+    };
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, [hotkey, open, setOpen]);
+  return /* @__PURE__ */ jsx(
+    DialogTrigger,
+    {
+      addonAfter: /* @__PURE__ */ jsx(Box, { asChild: true, ml: "auto", children: fallbackSpan(addonAfter) }),
+      icon: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
+      justifyContent: "start",
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children })
+    }
+  );
+});
+SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
+
+export { SpotlightTrigger };