feat: tabs (#3679)

Co-authored-by: Chris Simmons <[email protected]>

Author: Hugos68

.changeset/dry-coats-return.md

@@ -0,0 +1,8 @@
+---
+"@skeletonlabs/skeleton-common": minor
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+feat: tabs
+  

packages/skeleton-common/src/classes/tabs.ts

@@ -0,0 +1,10 @@
+import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };
+
+export const classesTabs = defineSkeletonClasses({
+	root: 'w-full flex data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row',
+	list: 'relative data-[orientation=horizontal]:mb-4 data-[orientation=horizontal]:pb-2 data-[orientation=vertical]:pe-2 data-[orientation=vertical]:me-4 flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col gap-2 data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-e border-surface-200-800',
+	trigger: 'btn hover:preset-tonal-primary data-disabled:opacity-50 data-disabled:pointer-events-none',
+	indicator:
+		'bg-surface-950-50 data-[orientation=horizontal]:w-(--width) data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:bottom-0 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:h-(--height) data-[orientation=vertical]:end-0',
+	content: ''
+});

packages/skeleton-common/src/index.ts

@@ -2,3 +2,4 @@ export * from './themes.js';
 export * from './classes/accordion.js';
 export * from './classes/avatar.js';
 export * from './classes/rating-group.js';
+export * from './classes/tabs.js';

packages/skeleton-react/src/components/tabs/anatomy/tabs-content.tsx

@@ -0,0 +1,22 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { splitContentProps, type ContentProps } from '@zag-js/tabs';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsContentProps extends PropsWithElement, ContentProps, ComponentProps<'div'> {}
+
+export default function (props: TabsContentProps) {
+	const rootContext = useContext(TabsRootContext);
+	const [itemProps, componentProps] = splitContentProps(props);
+	const { element, children, ...restAttributes } = componentProps;
+	const attributes = mergeProps(
+		rootContext.api.getContentProps(itemProps),
+		{
+			className: classesTabs.content
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/tabs/anatomy/tabs-indicator.tsx

@@ -0,0 +1,20 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsIndicatorProps extends PropsWithElement, Omit<ComponentProps<'div'>, 'children'> {}
+
+export default function (props: TabsIndicatorProps) {
+	const rootContext = useContext(TabsRootContext);
+	const { element, ...restAttributes } = props;
+	const attributes = mergeProps(
+		rootContext.api.getIndicatorProps(),
+		{
+			className: classesTabs.indicator
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <div {...attributes}></div>;
+}

packages/skeleton-react/src/components/tabs/anatomy/tabs-list.tsx

@@ -0,0 +1,20 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsListProps extends PropsWithElement, Omit<ComponentProps<'div'>, 'id' | 'defaultValue' | 'dir'> {}
+
+export default function (props: TabsListProps) {
+	const rootContext = useContext(TabsRootContext);
+	const { element, children, ...restAttributes } = props;
+	const attributes = mergeProps(
+		rootContext.api.getListProps(),
+		{
+			className: classesTabs.list
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/tabs/anatomy/tabs-root-context.tsx

@@ -0,0 +1,11 @@
+import { useContext, type ReactNode } from 'react';
+import { type TabsRootContextType, TabsRootContext } from '../modules/tabs-root-context.js';
+
+export interface TabsRootContextProps {
+	children: (context: TabsRootContextType) => ReactNode;
+}
+
+export default function (props: TabsRootContextProps) {
+	const rootContext = useContext(TabsRootContext);
+	return props.children(rootContext);
+}

packages/skeleton-react/src/components/tabs/anatomy/tabs-root.tsx

@@ -0,0 +1,30 @@
+import { splitProps, machine, connect, type Props } from '@zag-js/tabs';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/react';
+import { useId, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element';
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+
+export interface TabsRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<ComponentProps<'div'>, 'id' | 'defaultValue' | 'dir'> {}
+
+export default function (props: TabsRootProps) {
+	const [machineProps, componentProps] = splitProps(props);
+	const { element, children, ...restAttributes } = componentProps;
+	const service = useMachine(machine, {
+		id: useId(),
+		...machineProps
+	});
+	const api = connect(service, normalizeProps);
+	const attributes = mergeProps(
+		api.getRootProps(),
+		{
+			className: classesTabs.root
+		},
+		restAttributes
+	);
+	return (
+		<TabsRootContext.Provider value={{ api }}>
+			{element ? element({ attributes }) : <div {...attributes}>{children}</div>}
+		</TabsRootContext.Provider>
+	);
+}

packages/skeleton-react/src/components/tabs/anatomy/tabs-trigger.tsx

@@ -0,0 +1,22 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { splitTriggerProps, type TriggerProps } from '@zag-js/tabs';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsTriggerProps extends PropsWithElement, TriggerProps, Omit<ComponentProps<'button'>, 'value'> {}
+
+export default function (props: TabsTriggerProps) {
+	const rootContext = useContext(TabsRootContext);
+	const [itemProps, componentProps] = splitTriggerProps(props);
+	const { element, children, ...restAttributes } = componentProps;
+	const attributes = mergeProps(
+		rootContext.api.getTriggerProps(itemProps),
+		{
+			className: classesTabs.trigger
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <button {...attributes}>{children}</button>;
+}

packages/skeleton-react/src/components/tabs/index.ts

@@ -0,0 +1,8 @@
+export { Tabs } from './modules/tabs-anatomy.js';
+export type { TabsRootProps } from './anatomy/tabs-root.js';
+export type { TabsRootContextProps } from './anatomy/tabs-root-context.js';
+export type { TabsListProps } from './anatomy/tabs-list.js';
+export type { TabsTriggerProps } from './anatomy/tabs-trigger.js';
+export type { TabsIndicatorProps } from './anatomy/tabs-indicator.js';
+export type { TabsContentProps } from './anatomy/tabs-content.js';
+export type { TabsRootContextType as TabsRootContext } from './modules/tabs-root-context.js';