Add defaultOpen prop to Collapse for initial open state control.

src/Collapse/Collapse.stories.tsx

@@ -189,3 +189,20 @@ export const CheckboxEvents: Story<CollapseProps> = (args) => {
     </div>
   )
 }
+
+export const DefaultOpen: Story<CollapseProps> = (args) => {
+  return (
+    <Collapse {...args}>
+      <Collapse.Title className="text-xl font-medium">
+        Hi, 👋🏾 I am open by default
+      </Collapse.Title>
+      <Collapse.Content>
+        This content is visible by default because defaultOpen is set to true
+      </Collapse.Content>
+    </Collapse>
+  )
+}
+DefaultOpen.args = {
+  className: 'border border-base-300 bg-base-200',
+  defaultOpen: true
+}

src/Collapse/Collapse.test.tsx

@@ -63,4 +63,22 @@ describe('Collapse', () => {
     const contentElement = screen.getByText('Test Content')
     expect(contentElement).toBeInTheDocument()
   })
+
+  test('Should be closed by default without defaultOpen prop', () => {
+    render(<Collapse checkbox data-testid="collapse" />)
+    const checkboxInput = screen.getByRole('checkbox')
+    expect(checkboxInput).not.toBeChecked()
+  })
+
+  test('Should be open by default with defaultOpen prop', () => {
+    render(<Collapse checkbox defaultOpen data-testid="collapse" />)
+    const checkboxInput = screen.getByRole('checkbox')
+    expect(checkboxInput).toBeChecked()
+  })
+
+  test('Should respect open prop over defaultOpen', () => {
+    render(<Collapse checkbox defaultOpen open={false} data-testid="collapse" />)
+    const checkboxInput = screen.getByRole('checkbox')
+    expect(checkboxInput).not.toBeChecked()
+  })
 })

src/Collapse/Collapse.tsx

@@ -14,6 +14,9 @@ export type CollapseProps<T extends HTMLElement = HTMLDivElement> =
       checkbox?: boolean
       icon?: 'arrow' | 'plus'
       open?: boolean
+
+      // The default open state ( From the issue suggestion )
+      defaultOpen?: boolean
       onOpen?: () => void
       onClose?: () => void
       onToggle?: () => void
@@ -42,6 +45,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
       checkbox,
       icon,
       open,
+      defaultOpen = false,
       dataTheme,
       className,
       onOpen,
@@ -51,7 +55,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
     },
     ref
   ): JSX.Element => {
-    const [isChecked, setIsChecked] = useState(open)
+    const [isChecked, setIsChecked] = useState(open ?? defaultOpen)
     const checkboxRef = useRef<HTMLInputElement>(null)
 
     // Handle events for checkbox changes
@@ -65,7 +69,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
         onClose()
       }
 
-      setIsChecked(checkboxRef.current?.checked)
+      setIsChecked(checkboxRef.current?.checked ?? false)
     }
 
     // Handle blur events, specifically handling open/close for non checkbox types
@@ -100,6 +104,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
             className="peer"
             ref={checkboxRef}
             onChange={handleCheckboxChange}
+            defaultChecked={defaultOpen}
           />
         )}
         {children}