feature: Steps (#4067)

Co-authored-by: Hugo Korte <[email protected]>
Co-authored-by: Hugos68 <[email protected]>

Author: oatmealproblem

.changeset/upset-taxes-drop.md

@@ -0,0 +1,8 @@
+---
+"@skeletonlabs/skeleton-common": minor
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+feat: Added `Steps` component.
+  

packages/skeleton-common/src/classes.ts

@@ -293,6 +293,36 @@ export const slider = defineClasses({
 	marker: 'text-xs text-surface-600-400',
 });
 
+export const steps = defineClasses({
+	root: ['data-[orientation=horizontal]:space-y-4', 'data-[orientation=vertical]:flex data-[orientation=vertical]:space-x-4'],
+	list: [
+		'flex gap-2',
+		'data-[orientation=horizontal]:items-center',
+		'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start',
+	],
+	item: [
+		'flex gap-2 grow last:flex-initial',
+		'data-[orientation=horizontal]:items-center',
+		'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start',
+	],
+	trigger: 'flex items-center gap-1',
+	indicator: [
+		'size-8 rounded-full content-center',
+		'not-data-complete:not-data-current:preset-outlined-surface-200-800',
+		'data-complete:preset-filled-primary-500',
+		'data-current:preset-outlined-primary-500',
+	],
+	separator: [
+		'h-0 border-surface-200-800 grow',
+		'data-complete:border-primary-500',
+		'data-[orientation=horizontal]:border-t',
+		'data-[orientation=vertical]:border-s data-[orientation=vertical]:ms-4 data-[orientation=vertical]:min-h-4',
+	],
+	content: '',
+	prevTrigger: '',
+	nextTrigger: '',
+});
+
 const switch_ = defineClasses({
 	root: [
 		'cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50 inline-flex gap-2 items-center rounded',

packages/skeleton-react/package.json

@@ -46,6 +46,7 @@
 		"@zag-js/rating-group": "catalog:",
 		"@zag-js/react": "catalog:",
 		"@zag-js/slider": "catalog:",
+		"@zag-js/steps": "catalog:",
 		"@zag-js/switch": "catalog:",
 		"@zag-js/tabs": "catalog:",
 		"@zag-js/tags-input": "catalog:",

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

@@ -0,0 +1,26 @@
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import * as classes from '@skeletonlabs/skeleton-common/classes';
+import { mergeProps } from '@zag-js/react';
+import type { ItemProps } from '@zag-js/steps';
+import { use } from 'react';
+
+export interface StepsContentProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Content(props: StepsContentProps) {
+	const steps = use(RootContext);
+
+	// @zag-js/steps does not currently provide a splitItemProps function, so manually destructure
+	const { element, children, index, ...rest } = props;
+
+	const attributes = mergeProps(
+		steps.getContentProps({ index }),
+		{
+			className: classes.steps.content,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

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

@@ -0,0 +1,26 @@
+import { ItemContext } from '../modules/item-context.js';
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import * as classes from '@skeletonlabs/skeleton-common/classes';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface StepsIndicatorProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Indicator(props: StepsIndicatorProps) {
+	const steps = use(RootContext);
+	const itemProps = use(ItemContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		steps.getIndicatorProps(itemProps),
+		{
+			className: classes.steps.indicator,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/steps/anatomy/item.tsx

@@ -0,0 +1,30 @@
+import { ItemContext } from '../modules/item-context.js';
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import * as classes from '@skeletonlabs/skeleton-common/classes';
+import { mergeProps } from '@zag-js/react';
+import type { ItemProps } from '@zag-js/steps';
+import { use } from 'react';
+
+export interface StepsItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Item(props: StepsItemProps) {
+	const steps = use(RootContext);
+
+	// @zag-js/steps does not currently provide a splitItemProps function, so manually destructure
+	const { element, children, index, ...rest } = props;
+	const itemProps = { index };
+
+	const attributes = mergeProps(
+		steps.getItemProps(itemProps),
+		{
+			className: classes.steps.item,
+		},
+		rest,
+	);
+
+	return (
+		<ItemContext.Provider value={itemProps}>{element ? element(attributes) : <div {...attributes}>{children}</div>}</ItemContext.Provider>
+	);
+}

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

@@ -0,0 +1,24 @@
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import * as classes from '@skeletonlabs/skeleton-common/classes';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface StepsListProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function List(props: StepsListProps) {
+	const steps = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		steps.getListProps(),
+		{
+			className: classes.steps.list,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/steps/anatomy/next-trigger.tsx

@@ -0,0 +1,24 @@
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import * as classes from '@skeletonlabs/skeleton-common/classes';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface StepsNextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button', 'value' | 'disabled'> {}
+
+export default function NextTrigger(props: StepsNextTriggerProps) {
+	const steps = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		steps.getNextTriggerProps(),
+		{
+			className: classes.steps.nextTrigger,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <button {...attributes}>{children}</button>;
+}

packages/skeleton-react/src/components/steps/anatomy/prev-trigger.tsx

@@ -0,0 +1,24 @@
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import * as classes from '@skeletonlabs/skeleton-common/classes';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface StepsPrevTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button', 'value' | 'disabled'> {}
+
+export default function PrevTrigger(props: StepsPrevTriggerProps) {
+	const steps = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		steps.getPrevTriggerProps(),
+		{
+			className: classes.steps.prevTrigger,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <button {...attributes}>{children}</button>;
+}

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

@@ -0,0 +1,16 @@
+import type { useSteps } from '../modules/provider.js';
+import { RootContext as RootContext_ } from '../modules/root-context.js';
+import type { ReactNode } from 'react';
+import { use } from 'react';
+
+export interface StepsRootContextProps {
+	children: (steps: ReturnType<typeof useSteps>) => ReactNode;
+}
+
+export default function RootContext(props: StepsRootContextProps) {
+	const steps = use(RootContext_);
+
+	const { children } = props;
+
+	return children(steps);
+}