@optiaxiom/react 1.2.3 → 1.2.4

package/dist/esm/packages/react/src/transition/Transition-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
-import './../../../../assets/src/transition/Transition.css.ts.vanilla-XnX_6gBC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/transition/Transition.css.ts.vanilla-D1kMqbU-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'_11qxpbn',variants:{duration:{sm:'_16hzgsd',md:'eaudb3',lg:'_1r0frf9'},type:{fade:'_2leqhg',pop:'_1s3djx3',slide:'_1e0ygfy',slidePop:'_1098b9d'}}});
+var transition = recipeRuntime({base:'_1tbgrdw',variants:{duration:{sm:'_17uf702',md:'_1exxk6h',lg:'_15udon7'},type:{fade:'_13grlq9',pop:'_14ehw2z',slide:'_1rqs8uj',slidePop:'_1hk0s5b'}}});
 
 export { transition };

package/dist/esm/packages/react/src/transition-group/TransitionGroup.js

@@ -5,6 +5,7 @@ import { useState, useCallback, useEffect } from 'react';
 import '../transition/Transition.js';
 import { TransitionGlobalConfig } from '../transition/TransitionGlobalConfig.js';
 import { TransitionGroupContext } from '../transition-group-context/TransitionGroupContext.js';
+import { waitForAnimation } from './waitForAnimation.js';
 
 function TransitionGroup({
   children,
@@ -29,23 +30,33 @@ function TransitionGroup({
   });
   useEffect(() => {
     if (open) {
-      requestAnimationFrame(() => setPresence(true));
+      const timer = setTimeout(() => {
+        if (transitions.length) {
+          void waitForAnimation(transitions).then(() => setPresence(true));
+        } else {
+          setPresence(true);
+        }
+      }, 10);
+      return () => clearTimeout(timer);
     } else {
       if (transitions.length) {
-        void Promise.allSettled(
-          transitions.flatMap(
-            (ref) => typeof ref.current?.getAnimations === "function" ? ref.current?.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]
-          )
-        ).then(() => setPresence(false));
+        void waitForAnimation(transitions).then(() => setPresence(false));
       } else {
         setPresence(false);
       }
+      return;
     }
   }, [open, setPresence, transitions]);
   if (TransitionGlobalConfig.skipAnimations) {
     return /* @__PURE__ */ jsx(Fragment, { children: open && children });
   }
-  return /* @__PURE__ */ jsx(TransitionGroupContext.Provider, { value: { onMount, onUnmount, open }, children: (open || presence) && children });
+  return /* @__PURE__ */ jsx(
+    TransitionGroupContext.Provider,
+    {
+      value: { onMount, onUnmount, open, presence },
+      children: (open || presence) && children
+    }
+  );
 }
 TransitionGroup.displayName = "@optiaxiom/react/TransitionGroup";
 

package/dist/esm/packages/react/src/transition-group/waitForAnimation.js

@@ -0,0 +1,9 @@
+const waitForAnimation = async (transitions) => {
+  await Promise.allSettled(
+    transitions.flatMap(
+      (ref) => typeof ref.current?.getAnimations === "function" ? ref.current?.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]
+    )
+  );
+};
+
+export { waitForAnimation };

package/dist/esm/packages/react/src/use-command-items/fuzzysearch.js

@@ -0,0 +1,27 @@
+const collator = new Intl.Collator(void 0, {
+  sensitivity: "base",
+  usage: "search"
+});
+function fuzzysearch(haystack, needle) {
+  const hlen = haystack.length;
+  const nlen = needle.length;
+  if (nlen > hlen) {
+    return false;
+  }
+  if (nlen === hlen) {
+    return needle === haystack;
+  }
+  outer:
+    for (let i = 0, j = 0; i < nlen; i++) {
+      const nch = needle.charAt(i);
+      while (j < hlen) {
+        if (collator.compare(haystack.charAt(j++), nch) === 0) {
+          continue outer;
+        }
+      }
+      return false;
+    }
+  return true;
+}
+
+export { fuzzysearch };

package/dist/esm/packages/react/src/use-command-items/useCommandItems.js

@@ -1,12 +1,10 @@
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useState } from 'react';
 import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { fuzzysearch } from './fuzzysearch.js';
 
-const collator = new Intl.Collator(void 0, {
-  sensitivity: "base",
-  usage: "search"
-});
 const useCommandItems = ({
+  defaultFilter,
   defaultItems,
   inputValue: inputValueProp,
   items: itemsProp,
@@ -18,8 +16,14 @@ const useCommandItems = ({
     onChange: onInputValueChange,
     prop: inputValueProp
   });
+  const filterFn = useEffectEvent(
+    defaultFilter ?? ((item, inputValue2) => {
+      const string = itemToLabel(item).normalize();
+      return fuzzysearch(string, inputValue2);
+    })
+  );
   const [itemsState, setItemsState] = useState(
-    defaultItems ? filter(defaultItems, inputValue, itemToLabel) : []
+    defaultItems ? filter(defaultItems, inputValue, filterFn) : []
   );
   const items = typeof itemsProp !== "undefined" ? itemsProp : itemsState;
   return [
@@ -28,23 +32,14 @@ const useCommandItems = ({
     useEffectEvent((inputValue2) => {
       setInputValue(inputValue2);
       if (typeof itemsProp === "undefined" && defaultItems) {
-        setItemsState(filter(defaultItems, inputValue2, itemToLabel));
+        setItemsState(filter(defaultItems, inputValue2, filterFn));
       }
     })
   ];
 };
-const filter = (items, inputValue, itemToLabel) => {
-  const substring = (inputValue ?? "").normalize("NFC");
-  return inputValue ? items.filter((item) => {
-    const string = itemToLabel(item).normalize("NFC");
-    for (let i = 0; i + substring.length <= string.length; i++) {
-      const slice = string.slice(i, i + substring.length);
-      if (collator.compare(substring, slice) === 0) {
-        return true;
-      }
-    }
-    return false;
-  }) : items;
+const filter = (items, inputValue, filterFn) => {
+  const substring = (inputValue ?? "").normalize();
+  return inputValue ? items.filter((item) => filterFn(item, substring)) : items;
 };
 
 export { useCommandItems };

package/dist/esm/unstable.js

@@ -17,7 +17,6 @@ export { Clock } from './packages/react/src/clock/Clock.js';
 export { Combobox } from './packages/react/src/combobox/Combobox.js';
 export { ComboboxCheckboxItem } from './packages/react/src/combobox-checkbox-item/ComboboxCheckboxItem.js';
 export { ComboboxContent } from './packages/react/src/combobox-content/ComboboxContent.js';
-export { ComboboxEmpty } from './packages/react/src/combobox-empty/ComboboxEmpty.js';
 export { ComboboxFooter } from './packages/react/src/combobox-footer/ComboboxFooter.js';
 export { ComboboxGroup } from './packages/react/src/combobox-group/ComboboxGroup.js';
 export { ComboboxInput } from './packages/react/src/combobox-input/ComboboxInput.js';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef, ElementType, RefObject, ComponentPropsWithRef, ReactElement } from 'react';
-import { S as Sprinkles, R as RecipeVariants, E as ExcludeProps, B as BoxProps, a as ExtendProps, T as Transition, M as MenuListbox, b as ResponsiveArray } from './PopoverContent-BKiRFMYx.js';
-export { c as Box, C as Checkbox, D as DialogContent, d as DropdownMenuSub, L as Link, P as Popover, e as PopoverContent, m as mapResponsiveValue, s as sprinkles, v as vars } from './PopoverContent-BKiRFMYx.js';
+import { S as Sprinkles, R as RecipeVariants, E as ExcludeProps, B as BoxProps, a as ExtendProps, T as Transition, M as MenuListbox, b as ResponsiveArray } from './PopoverContent-D7WFp-Jh.js';
+export { c as Box, e as Button, d as ButtonProps, C as Checkbox, D as DialogContent, f as DropdownMenuSub, L as Link, P as Popover, g as PopoverContent, m as mapResponsiveValue, s as sprinkles, v as vars } from './PopoverContent-D7WFp-Jh.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { createToaster } from '@optiaxiom/globals';
@@ -275,106 +275,6 @@ declare const Banner: react.ForwardRefExoticComponent<{
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
-declare const buttonBase: (props?: {
-    intent?: "danger" | "neutral" | "primary" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
-} | undefined, className?: string) => {
-    className: string;
-};
-type ButtonVariants = RecipeVariants<typeof buttonBase>;
-
-declare const appearances: {
-    danger: {
-        intent: "danger";
-        variant: "strong";
-    };
-    "danger-outline": {
-        intent: "danger";
-        variant: "outline";
-    };
-    default: {
-        intent: "neutral";
-        variant: "outline";
-    };
-    inverse: {
-        intent: "neutral";
-        variant: "strong";
-    };
-    primary: {
-        intent: "primary";
-        variant: "strong";
-    };
-    subtle: {
-        intent: "neutral";
-        variant: "subtle";
-    };
-};
-type ButtonBaseProps<T extends ElementType = "button", P = unknown> = BoxProps<T, ExtendProps<Omit<NonNullable<ButtonVariants>, "intent" | "variant"> & {
-    /**
-     * Control the appearance by selecting between the different button types.
-     */
-    appearance?: keyof typeof appearances;
-    /**
-     * Whether the button is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show loading spinner inside the button.
-     */
-    loading?: boolean;
-}, P>>;
-
-type ButtonProps<T extends ElementType = "button", P = unknown> = ButtonBaseProps<T, ExtendProps<{
-    /**
-     * Display content inside the button after `children`.
-     */
-    addonAfter?: ReactNode;
-    /**
-     * Display content inside the button before `children`.
-     */
-    addonBefore?: ReactNode;
-    /**
-     * Display an icon before or after the button content or omit `children` to only show the icon.
-     */
-    icon?: ReactNode;
-    /**
-     * Control whether to show the icon before or after the button content.
-     */
-    iconPosition?: "end" | "start";
-}, P>>;
-declare const Button: react.ForwardRefExoticComponent<Omit<{
-    /**
-     * Display content inside the button after `children`.
-     */
-    addonAfter?: ReactNode;
-    /**
-     * Display content inside the button before `children`.
-     */
-    addonBefore?: ReactNode;
-    /**
-     * Display an icon before or after the button content or omit `children` to only show the icon.
-     */
-    icon?: ReactNode;
-    /**
-     * Control whether to show the icon before or after the button content.
-     */
-    iconPosition?: "end" | "start";
-}, never> & Omit<NonNullable<Omit<{
-    intent?: "danger" | "neutral" | "primary" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
-}, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "inverse" | "danger-outline";
-    disabled?: boolean;
-    loading?: boolean;
-}>, never> & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "color" | "disabled" | "className"> & react.RefAttributes<HTMLButtonElement>>;
-
 declare const ButtonGroup: react.ForwardRefExoticComponent<{
     /**
      * The orientation/layout of the buttons inside the group.
@@ -542,7 +442,6 @@ declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<Non
 } & {
     addonAfter?: react.ReactNode;
     addonBefore?: react.ReactNode;
-    "data-highlighted"?: boolean;
     description?: react.ReactNode;
     icon?: react.ReactNode;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -568,7 +467,6 @@ declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<NonNullable
 } & {
     addonAfter?: react.ReactNode;
     addonBefore?: react.ReactNode;
-    "data-highlighted"?: boolean;
     description?: react.ReactNode;
     icon?: react.ReactNode;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -594,7 +492,6 @@ declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<NonNu
 } & {
     addonAfter?: react.ReactNode;
     addonBefore?: react.ReactNode;
-    "data-highlighted"?: boolean;
     description?: react.ReactNode;
     icon?: react.ReactNode;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -906,7 +803,6 @@ declare const ListboxCheckboxItem: react.ForwardRefExoticComponent<Omit<Omit<Non
 } & {
     addonAfter?: react.ReactNode;
     addonBefore?: react.ReactNode;
-    "data-highlighted"?: boolean;
     description?: react.ReactNode;
     icon?: react.ReactNode;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -949,10 +845,6 @@ type ListboxItemProps<T extends ElementType = "div", P = unknown> = BoxProps<T,
      * Display content inside the item before `children`.
      */
     addonBefore?: ReactNode;
-    /**
-     * Whether to mark item as highlighted.
-     */
-    "data-highlighted"?: boolean;
     /**
      * Add secondary text after the primary label.
      */
@@ -973,10 +865,6 @@ declare const ListboxItem: react.ForwardRefExoticComponent<Omit<NonNullable<{
      * Display content inside the item before `children`.
      */
     addonBefore?: ReactNode;
-    /**
-     * Whether to mark item as highlighted.
-     */
-    "data-highlighted"?: boolean;
     /**
      * Add secondary text after the primary label.
      */
@@ -1007,7 +895,6 @@ declare const ListboxRadioItem: react.ForwardRefExoticComponent<Omit<Omit<NonNul
 } & {
     addonAfter?: react.ReactNode;
     addonBefore?: react.ReactNode;
-    "data-highlighted"?: boolean;
     description?: react.ReactNode;
     icon?: react.ReactNode;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -1034,7 +921,6 @@ declare const ListboxSwitchItem: react.ForwardRefExoticComponent<Omit<Omit<NonNu
 } & {
     addonAfter?: react.ReactNode;
     addonBefore?: react.ReactNode;
-    "data-highlighted"?: boolean;
     description?: react.ReactNode;
     icon?: react.ReactNode;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -1574,4 +1460,4 @@ declare namespace TransitionGroup {
     var displayName: string;
 }
 
-export { Alert, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTrigger, AngleMenuButton, Avatar, AvatarGroup, AxiomProvider, Badge, Banner, BoxProps, Button, ButtonGroup, type ButtonProps, Code, Dialog, DialogBody, DialogClose, DialogFooter, DialogForm, DialogHeader, DialogTrigger, Disclosure, DisclosureContent, DisclosureTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisMenuButton, Field, FieldLabel, Flex, Grid, Heading, type HeadingProps, Indicator, Input, InputAddon, InputControl, type InputControlProps, InputRoot, Kbd, Listbox, ListboxCheckboxItem, ListboxEmpty, ListboxFooter, ListboxGroup, ListboxItem, ListboxItemIndicator, type ListboxItemProps, ListboxLabel, ListboxRadioItem, ListboxSeparator, ListboxSwitchItem, ModalLayer, ModalProvider, Nav, NavAccountItem, type NavAccountItemProps, NavBody, NavFooter, NavGroup, NavGroupContent, NavGroupTrigger, NavHeader, NavItem, type NavItemProps, NavList, NavSeparator, Pagination, type PaginationProps, Paper, PopoverAnchor, PopoverTrigger, Progress, Radio, RadioGroup, SearchInput, SegmentedControl, SegmentedControlItem, Separator, Sidebar, SidebarToggle, type SidebarToggleProps, Skeleton, Spinner, Sprinkles, SubNav, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, ThemeProvider, Toast, ToastAction, ToastProvider, ToastTitle, ToggleButton, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, Transition, TransitionGlobalConfig, TransitionGroup, extractBoxProps, layers_css as layers, sprinklesMerge, useModalContext };
+export { Alert, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTrigger, AngleMenuButton, Avatar, AvatarGroup, AxiomProvider, Badge, Banner, BoxProps, ButtonGroup, Code, Dialog, DialogBody, DialogClose, DialogFooter, DialogForm, DialogHeader, DialogTrigger, Disclosure, DisclosureContent, DisclosureTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisMenuButton, Field, FieldLabel, Flex, Grid, Heading, type HeadingProps, Indicator, Input, InputAddon, InputControl, type InputControlProps, InputRoot, Kbd, Listbox, ListboxCheckboxItem, ListboxEmpty, ListboxFooter, ListboxGroup, ListboxItem, ListboxItemIndicator, type ListboxItemProps, ListboxLabel, ListboxRadioItem, ListboxSeparator, ListboxSwitchItem, ModalLayer, ModalProvider, Nav, NavAccountItem, type NavAccountItemProps, NavBody, NavFooter, NavGroup, NavGroupContent, NavGroupTrigger, NavHeader, NavItem, type NavItemProps, NavList, NavSeparator, Pagination, type PaginationProps, Paper, PopoverAnchor, PopoverTrigger, Progress, Radio, RadioGroup, SearchInput, SegmentedControl, SegmentedControlItem, Separator, Sidebar, SidebarToggle, type SidebarToggleProps, Skeleton, Spinner, Sprinkles, SubNav, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, ThemeProvider, Toast, ToastAction, ToastProvider, ToastTitle, ToggleButton, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, Transition, TransitionGlobalConfig, TransitionGroup, extractBoxProps, layers_css as layers, sprinklesMerge, useModalContext };