chore: tabs types

apps/docs/src/usages/tabs.tsx

@@ -1,13 +1,11 @@
-'use client'
-
 import { TabItem, Tabs } from 'actify'
 
 export default () => {
   return (
     <Tabs>
-      <TabItem title="Recent">Recent</TabItem>
-      <TabItem title="Favorites">Favorites</TabItem>
-      <TabItem title="All">All</TabItem>
+      <TabItem title="Actify">actify</TabItem>
+      <TabItem title="Ngroker">ngroker</TabItem>
+      <TabItem title="Taildoor">taildoor</TabItem>
     </Tabs>
   )
 }

packages/actify/src/components/Tabs/Tab.tsx

@@ -1,11 +1,17 @@
-import { mergeProps, useFocusRing, useTab } from 'react-aria'
+import { AriaTabProps, mergeProps, useFocusRing, useTab } from 'react-aria'
+import { Node, TabListState } from 'react-stately'
 
 import { FocusRing } from './../FocusRing'
 import React from 'react'
 import { Ripple } from './../Ripple'
 import styles from './tabs.module.css'
 
-export function Tab({ item, state }: any) {
+interface TabProps<T> extends AriaTabProps {
+  item: Node<T>
+  state: TabListState<T>
+}
+
+const Tab = <T extends object>({ item, state }: TabProps<T>) => {
   const ref = React.useRef(null)
   const { tabProps } = useTab(item, state, ref)
   const { focusProps, isFocusVisible } = useFocusRing()
@@ -22,3 +28,5 @@ export function Tab({ item, state }: any) {
     </div>
   )
 }
+
+export { Tab }

packages/actify/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,20 @@
+import { AriaTabPanelProps, useTabPanel } from 'react-aria'
+
+import React from 'react'
+import { TabListState } from 'react-stately'
+
+interface TabPanelProps<T> extends AriaTabPanelProps {
+  state: TabListState<T>
+}
+const TabPanel = <T extends object>({ state, ...props }: TabPanelProps<T>) => {
+  const ref = React.useRef(null)
+  const { tabPanelProps } = useTabPanel(props, state, ref)
+
+  return (
+    <div role="tabpanel" {...tabPanelProps} ref={ref}>
+      {state.selectedItem?.props.children}
+    </div>
+  )
+}
+
+export { TabPanel }

packages/actify/src/components/Tabs/Tabs.tsx

@@ -1,14 +1,25 @@
 'use client'
 
+import {
+  AriaTabListProps,
+  mergeProps,
+  useFocusRing,
+  useTabList
+} from 'react-aria'
 import React, { useEffect, useState } from 'react'
-import { mergeProps, useFocusRing, useTabList, useTabPanel } from 'react-aria'
+import { TabListProps, useTabListState } from 'react-stately'
 
 import { Tab } from './Tab'
+import { TabPanel } from './TabPanel'
 import clsx from 'clsx'
 import styles from './tabs.module.css'
-import { useTabListState } from 'react-stately'
 
-export function Tabs(props: any) {
+interface TabsProps<T> extends AriaTabListProps<T>, TabListProps<T> {
+  style?: React.CSSProperties
+  className?: string
+}
+
+const Tabs = <T extends object>(props: TabsProps<T>) => {
   const state = useTabListState(props)
   const ref = React.useRef<HTMLDivElement>(null)
   const { tabListProps } = useTabList(props, state, ref)
@@ -54,13 +65,6 @@ export function Tabs(props: any) {
   )
 }
 
-function TabPanel({ state, ...props }: any) {
-  const ref = React.useRef(null)
-  const { tabPanelProps } = useTabPanel(props, state, ref)
+Tabs.displayName = 'Actify.Tabs'
 
-  return (
-    <div role="tabpanel" {...tabPanelProps} ref={ref}>
-      {state.selectedItem?.props.children}
-    </div>
-  )
-}
+export { Tabs }