From 82ac0807eae5c41012839258fcfd84680d2aa274 Mon Sep 17 00:00:00 2001
From: lovrozagar <lovro.zagar5@gmail.com>
Date: Sat, 6 Jul 2024 17:45:04 -0700
Subject: [PATCH] feat: toggle group item style & collapsible content initial
 animation

---
 package.json                                     |  2 +-
 .../components/collapsible-content.tsx           | 16 +++++++++++++---
 .../collapsible/constants/constants.ts           |  8 +++++++-
 .../collapsible/types/collapsible-content.ts     |  1 +
 .../components/toggle-group-item.tsx             | 12 ++++++++++--
 .../toggle-group/constants/constants.ts          |  2 +-
 .../toggle-group/types/toggle-group-item.ts      |  5 +++--
 src/components/toggle/constants/constants.ts     |  7 +++++--
 8 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index fb2e1a0..1048135 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/collapsible/components/collapsible-content.tsx b/src/components/collapsible/components/collapsible-content.tsx
index 32d47b2..85e482d 100644
--- a/src/components/collapsible/components/collapsible-content.tsx
+++ b/src/components/collapsible/components/collapsible-content.tsx
@@ -2,7 +2,7 @@
 
 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,
@@ -10,6 +10,7 @@ import {
 } 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,
diff --git a/src/components/collapsible/constants/constants.ts b/src/components/collapsible/constants/constants.ts
index fbbdc80..f2bec4d 100644
--- a/src/components/collapsible/constants/constants.ts
+++ b/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,
+}
diff --git a/src/components/collapsible/types/collapsible-content.ts b/src/components/collapsible/types/collapsible-content.ts
index 2e612de..5a7da2b 100644
--- a/src/components/collapsible/types/collapsible-content.ts
+++ b/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>
diff --git a/src/components/toggle-group/components/toggle-group-item.tsx b/src/components/toggle-group/components/toggle-group-item.tsx
index 7a648df..33a03e4 100644
--- a/src/components/toggle-group/components/toggle-group-item.tsx
+++ b/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}
       >
diff --git a/src/components/toggle-group/constants/constants.ts b/src/components/toggle-group/constants/constants.ts
index ff787f1..a85e9e7 100644
--- a/src/components/toggle-group/constants/constants.ts
+++ b/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 }
diff --git a/src/components/toggle-group/types/toggle-group-item.ts b/src/components/toggle-group/types/toggle-group-item.ts
index ad38381..f658567 100644
--- a/src/components/toggle-group/types/toggle-group-item.ts
+++ b/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 }
diff --git a/src/components/toggle/constants/constants.ts b/src/components/toggle/constants/constants.ts
index e0b76b1..5c1f364 100644
--- a/src/components/toggle/constants/constants.ts
+++ b/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 }