refactor: use get-animation-style-variables from utils lib

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@renderui/core",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "private": false,
   "description": "React UI library with highly modular and ready-out-of-the-box components",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@renderui/utils": "^0.1.8",
+    "@renderui/utils": "^0.2.0",
     "cmdk": "^1.0.0",
     "next-themes": "^0.3.0",
     "react-aria": "^3.33.1",

src/components/_shared/utils/focus-input.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 function focusInput(inputRef: React.RefObject<HTMLInputElement>) {

src/components/_shared/utils/is-keyboard-pointer-type.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { PressEvent } from 'react-aria'
 
 function isKeyboardPointerType(event: PressEvent) {

src/components/_shared/utils/split-aria-props.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { UseAriaHandlersProps } from '@/components/_shared/types/aria'
 
 type AriaHandlerPropsSelectorProps<T extends object> = T & Partial<UseAriaHandlersProps>

src/components/accordion/components/accordion-content.tsx

@@ -1,7 +1,10 @@
 'use client'
 
 import { AccordionContent as AccordionContentPrimitive } from '@radix-ui/react-accordion'
-import { cn, getOptionalObject, polymorphic } from '@renderui/utils'
+import { cn } from '@renderui/utils/cn'
+import { getOptionalObject } from '@renderui/utils/get-optional-object'
+import { polymorphic } from '@renderui/utils/polymorphic'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 import React from 'react'
 
 import {
@@ -12,7 +15,6 @@ import {
   AccordionContentProps,
   AccordionContentRef,
 } from '@/components/accordion/types/accordion-content'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 
 const AccordionContent = React.forwardRef<AccordionContentRef, AccordionContentProps>(
   (props, ref) => {

src/components/collapsible/components/collapsible-content.tsx

@@ -13,7 +13,7 @@ import {
   COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
   DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
 } from '../constants/constants'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const CollapsibleContent = React.forwardRef<CollapsibleContentRef, CollapsibleContentProps>(
   (props, ref) => {

src/components/dialog/components/dialog-content.tsx

@@ -8,7 +8,6 @@ import { cn, cx, getOptionalObject } from '@renderui/utils'
 import React from 'react'
 
 import { CrossSmallIcon } from '@/components/_shared/components/icons/cross-small-icon'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { Button } from '@/components/button/components/button'
 import { DialogClose } from '@/components/dialog/components/dialog-close'
 import {
@@ -19,6 +18,7 @@ import {
 import { DialogContentProps, DialogContentRef } from '@/components/dialog/types/dialog-content'
 import { Overlay } from '@/components/overlay/components/overlay'
 import { VisuallyHidden } from '@/components/visually-hidden/components/visually-hidden'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const DialogContent = React.forwardRef<DialogContentRef, DialogContentProps>((props, ref) => {
   const {

src/components/navigation-menu/components/navigation-menu-content.tsx

@@ -4,12 +4,12 @@ import { NavigationMenuContent as NavigationMenuContentPrimitive } from '@radix-
 import { cn } from '@renderui/utils'
 import React from 'react'
 
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { DEFAULT_NAVIGATION_MENU_CONTENT_CLASSNAME } from '@/components/navigation-menu/constants/constants'
 import {
   NavigationMenuContentProps,
   NavigationMenuContentRef,
 } from '@/components/navigation-menu/types/navigation-menu-content'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const NavigationMenuContent = React.forwardRef<
   NavigationMenuContentRef,

src/components/navigation-menu/components/navigation-menu.tsx

@@ -21,7 +21,7 @@ import {
   NavigationMenuProps,
   NavigationMenuRef,
 } from '@/components/navigation-menu/types/navigation-menu'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const NavigationMenu = React.forwardRef<NavigationMenuRef, NavigationMenuProps>((props, ref) => {
   const {

src/components/overlay/components/overlay.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 
 import { DEFAULT_OVERLAY_CLASSNAME } from '@/components/overlay/constants/constants'
 import { OverlayProps, OverlayRef } from '@/components/overlay/types/overlay'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const Overlay = React.forwardRef<OverlayRef, OverlayProps>((props, ref) => {
   const {

src/components/popover/components/popover-content.tsx

@@ -8,7 +8,6 @@ import {
 import { cn, getOptionalObject } from '@renderui/utils'
 import React from 'react'
 
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import {
   DEFAULT_POPOVER_ARROW_CLASSNAME,
   DEFAULT_POPOVER_ARROW_CONTAINER_CLASSNAME,
@@ -21,6 +20,7 @@ import {
   POPOVER_CONTENT_TRIGGER_WIDTH_CLASSNAME,
 } from '@/components/popover/constants/constants'
 import { PopoverContentProps, PopoverContentRef } from '@/components/popover/types/popover-content'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const PopoverContent = React.forwardRef<PopoverContentRef, PopoverContentProps>((props, ref) => {
   const {

src/components/sheet/components/sheet-content.tsx

@@ -8,7 +8,6 @@ import { cn, cx, getOptionalObject } from '@renderui/utils'
 import React from 'react'
 
 import { ModalClose } from '@/components/_shared/components/modal-close/modal-close'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
 import { Button } from '@/components/button'
 import { Overlay } from '@/components/overlay'
 import { sheetClasses } from '@/components/sheet/classes/sheet-classes'
@@ -19,6 +18,7 @@ import {
 import { SheetContentProps, SheetContentRef } from '@/components/sheet/types/sheet-content'
 import { VisuallyHidden } from '@/components/visually-hidden'
 import { CrossSmallIcon } from '@/components/_shared/components/icons/cross-small-icon'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const SheetContent = React.forwardRef<SheetContentRef, SheetContentProps>((props, ref) => {
   const {

src/components/skeleton/components/skeleton.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import { SkeletonProps, SkeletonRef } from '@/components/skeleton/types/skeleton'
 import { getMergedClassName } from '@/components/skeleton/utils/get-merged-class-name'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const Skeleton = React.forwardRef<SkeletonRef, SkeletonProps>((props, ref) => {
   const {

src/components/toggle-group/components/toggle-group-item.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { ToggleGroupItem as ToggleGroupItemPrimitive } from '@radix-ui/react-toggle-group'
-import { cn } from '@renderui/utils'
+import { cn } from '@renderui/utils/cn'
+import { functionCallOrValue } from '@renderui/utils/function-call-or-value'
 import React from 'react'
 
 import { Button } from '@/components/button'
@@ -34,7 +35,7 @@ const ToggleGroupItem = React.forwardRef<ToggleGroupItemRef, ToggleGroupItemProp
     : value.toString() === rootValue.toString()
 
   return (
-    <ToggleGroupItemPrimitive asChild value={value as string} className={cn(className)}>
+    <ToggleGroupItemPrimitive asChild value={value as string}>
       <Button
         ref={ref}
         data-slot='item'
@@ -49,7 +50,7 @@ const ToggleGroupItem = React.forwardRef<ToggleGroupItemRef, ToggleGroupItemProp
         data-state={isOn ? 'on' : 'off'}
         {...restProps}
       >
-        {children}
+        {functionCallOrValue(children, { isOn })}
       </Button>
     </ToggleGroupItemPrimitive>
   )

src/components/toggle-group/types/toggle-group-item.ts

@@ -1,14 +1,18 @@
 import { Simplify } from '@/components/_shared/types/simplify'
 
 import { ButtonProps, ButtonRef } from '@/components/button'
+import { ReactNode } from 'react'
 
 type ToggleGroupItemRef = ButtonRef
 
 type ToggleGroupItemCustomProps = {
   value: string | number
   hasToggledOffRing?: boolean
+  children: (({ isOn }: { isOn: boolean }) => ReactNode) | ReactNode
 }
 
-type ToggleGroupItemProps = Simplify<Omit<ButtonProps, 'value'> & ToggleGroupItemCustomProps>
+type ToggleGroupItemProps = Simplify<
+  Omit<ButtonProps, 'value' | 'children'> & ToggleGroupItemCustomProps
+>
 
 export type { ToggleGroupItemProps, ToggleGroupItemRef }

src/components/tooltip/components/tooltip-content.tsx

@@ -13,7 +13,7 @@ import {
   DEFAULT_TOOLTIP_CONTENT_CLASSNAME,
 } from '@/components/tooltip/constants/constants'
 import { TooltipContentProps, TooltipContentRef } from '@/components/tooltip/types/tooltip-content'
-import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
+import { getAnimationStyleVariables } from '@renderui/utils/get-animation-style-variables'
 
 const TooltipContent = React.forwardRef<TooltipContentRef, TooltipContentProps>((props, ref) => {
   const {