feat: toggle group item style & collapsible content initial animation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@renderui/core",
-  "version": "1.3.9",
+  "version": "1.4.4",
   "private": false,
   "description": "React UI library with highly modular and ready-out-of-the-box components",
   "license": "MIT",

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

@@ -2,14 +2,15 @@
 
 import { CollapsibleContent as CollapsibleContentPrimitive } from '@radix-ui/react-collapsible'
 import { cn } from '@renderui/utils'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import {
   CollapsibleContentProps,
   CollapsibleContentRef,
 } from '@/components/collapsible/types/collapsible-content'
 import {
   COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME,
+  COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
   DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
 } from '../constants/constants'
 import { getAnimationStyleVariables } from '@/components/_shared/utils/get-animation-style-variables'
@@ -22,23 +23,32 @@ const CollapsibleContent = React.forwardRef<CollapsibleContentRef, CollapsibleCo
       animationInDuration,
       animationOutDuration,
       animationDuration,
+      hasSkippedInitialAnimation,
       hasDefaultAnimation = true,
       ...restProps
     } = props
 
+    const [defaultDuration, setDefaultDuration] = useState(
+      hasSkippedInitialAnimation ? 0 : COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
+    )
+
+    useEffect(() => {
+      setDefaultDuration(COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION)
+    }, [hasSkippedInitialAnimation])
+
     return (
       <CollapsibleContentPrimitive
         ref={ref}
         data-slot='content'
         className={cn(
           DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
-          hasDefaultAnimation ? COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME : '',
+          hasDefaultAnimation ? COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME : undefined,
           className,
         )}
         style={{
           ...getAnimationStyleVariables({
             ...props,
-            defaultAnimationDuration: 200,
+            defaultAnimationDuration: defaultDuration,
             defaultAnimationTimingFunction: 'ease-out',
           }),
           ...style,

src/components/collapsible/constants/constants.ts

@@ -3,4 +3,10 @@ const DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME = 'render-ui-collapsible-content'
 const COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME =
   'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden'
 
-export { DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME, COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME }
+const COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION = 200
+
+export {
+  DEFAULT_COLLAPSIBLE_CONTENT_CLASSNAME,
+  COLLAPSIBLE_ANIMATED_CONTENT_CLASSNAME,
+  COLLAPSIBLE_CONTENT_DEFAULT_ANIMATION_DURATION,
+}

src/components/collapsible/types/collapsible-content.ts

@@ -11,6 +11,7 @@ type CollapsibleContentPrimitiveProps =
 
 type CollapsibleCustomProps = {
   hasDefaultAnimation?: boolean
+  hasSkippedInitialAnimation?: boolean
 } & AnimationStyleVariables
 
 type CollapsibleContentProps = Simplify<CollapsibleContentPrimitiveProps & CollapsibleCustomProps>

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

@@ -5,12 +5,15 @@ import { cn } from '@renderui/utils'
 import React from 'react'
 
 import { Button } from '@/components/button'
-import { DEFAUL_TOGGLE_CLASSNAME } from '@/components/toggle/constants/constants'
 import { useToggleGroupContext } from '@/components/toggle-group/contexts/toggle-group-context'
 import {
   ToggleGroupItemProps,
   ToggleGroupItemRef,
 } from '@/components/toggle-group/types/toggle-group-item'
+import {
+  DEFAUL_TOGGLE_CLASSNAME,
+  TOGGLED_OFF_RING_CLASSNAME,
+} from '@/components/toggle/constants/constants'
 
 const ToggleGroupItem = React.forwardRef<ToggleGroupItemRef, ToggleGroupItemProps>((props, ref) => {
   const {
@@ -19,6 +22,7 @@ const ToggleGroupItem = React.forwardRef<ToggleGroupItemRef, ToggleGroupItemProp
     children,
     variant,
     hasRipple = false,
+    hasToggledOffRing = false,
     color = 'primary',
     ...restProps
   } = props
@@ -37,7 +41,11 @@ const ToggleGroupItem = React.forwardRef<ToggleGroupItemRef, ToggleGroupItemProp
         color={color}
         variant={variant ?? (isOn ? 'solid' : 'plain')}
         hasRipple={hasRipple}
-        className={cn(DEFAUL_TOGGLE_CLASSNAME, className)}
+        className={cn(
+          DEFAUL_TOGGLE_CLASSNAME,
+          hasToggledOffRing ? TOGGLED_OFF_RING_CLASSNAME : undefined,
+          className,
+        )}
         data-state={isOn ? 'on' : 'off'}
         {...restProps}
       >

src/components/toggle-group/constants/constants.ts

@@ -1,3 +1,3 @@
-const DEFAULT_TOGGLE_GROUP_CLASSNAME = 'render-ui-toggle-group flex items-center gap-2'
+const DEFAULT_TOGGLE_GROUP_CLASSNAME = 'render-ui-toggle-group flex flex-wrap items-center gap-2'
 
 export { DEFAULT_TOGGLE_GROUP_CLASSNAME }

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

@@ -4,10 +4,11 @@ import { ButtonProps, ButtonRef } from '@/components/button'
 
 type ToggleGroupItemRef = ButtonRef
 
-type ToggleGroupItemControlProps = {
+type ToggleGroupItemCustomProps = {
   value: string | number
+  hasToggledOffRing?: boolean
 }
 
-type ToggleGroupItemProps = Simplify<Omit<ButtonProps, 'value'> & ToggleGroupItemControlProps>
+type ToggleGroupItemProps = Simplify<Omit<ButtonProps, 'value'> & ToggleGroupItemCustomProps>
 
 export type { ToggleGroupItemProps, ToggleGroupItemRef }

src/components/toggle/constants/constants.ts

@@ -1,3 +1,6 @@
-const DEFAUL_TOGGLE_CLASSNAME = 'render-ui-toggle'
+const DEFAUL_TOGGLE_CLASSNAME = 'render-ui-toggle min-w-fit'
 
-export { DEFAUL_TOGGLE_CLASSNAME }
+const TOGGLED_OFF_RING_CLASSNAME =
+  'data-[state=off]:before:absolute data-[state=off]:before:left-0 data-[state=off]:before:top-0 data-[state=off]:before:size-full data-[state=off]:before:rounded-[inherit] data-[state=off]:before:ring data-[state=off]:before:ring-[2px] data-[state=off]:before:ring-inset data-[state=off]:before:ring-[rgba(var(--button-bg))]/60 data-[state=off]:before:ring-offset-[0px]'
+
+export { DEFAUL_TOGGLE_CLASSNAME, TOGGLED_OFF_RING_CLASSNAME }