diff --git a/apps/docs/src/usages/tabs.tsx b/apps/docs/src/usages/tabs.tsx index 8ae877b..19aee12 100644 --- a/apps/docs/src/usages/tabs.tsx +++ b/apps/docs/src/usages/tabs.tsx @@ -1,13 +1,11 @@ -'use client' - import { TabItem, Tabs } from 'actify' export default () => { return ( - Recent - Favorites - All + actify + ngroker + taildoor ) } diff --git a/packages/actify/src/components/Tabs/Tab.tsx b/packages/actify/src/components/Tabs/Tab.tsx index faa7c60..6e0165f 100644 --- a/packages/actify/src/components/Tabs/Tab.tsx +++ b/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 extends AriaTabProps { + item: Node + state: TabListState +} + +const Tab = ({ item, state }: TabProps) => { 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) { ) } + +export { Tab } diff --git a/packages/actify/src/components/Tabs/TabPanel.tsx b/packages/actify/src/components/Tabs/TabPanel.tsx new file mode 100644 index 0000000..7a34c65 --- /dev/null +++ b/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 extends AriaTabPanelProps { + state: TabListState +} +const TabPanel = ({ state, ...props }: TabPanelProps) => { + const ref = React.useRef(null) + const { tabPanelProps } = useTabPanel(props, state, ref) + + return ( +
+ {state.selectedItem?.props.children} +
+ ) +} + +export { TabPanel } diff --git a/packages/actify/src/components/Tabs/Tabs.tsx b/packages/actify/src/components/Tabs/Tabs.tsx index 2d1f69a..d28757f 100644 --- a/packages/actify/src/components/Tabs/Tabs.tsx +++ b/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 extends AriaTabListProps, TabListProps { + style?: React.CSSProperties + className?: string +} + +const Tabs = (props: TabsProps) => { const state = useTabListState(props) const ref = React.useRef(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 ( -
- {state.selectedItem?.props.children} -
- ) -} +export { Tabs }