Merge branch 'main' into feat/switch

Author: Hugos68

.changeset/evil-hands-obey.md

@@ -0,0 +1,9 @@
+---
+"@skeletonlabs/skeleton-common": minor
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+"@skeletonlabs/skeleton": patch
+---
+
+feat: progress-linear
+  

packages/skeleton-common/src/classes/progress-linear.ts

@@ -0,0 +1,29 @@
+import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };
+
+export const classesProgressLinear = defineSkeletonClasses({
+	root: [
+		// Common
+		'items-center justify-center gap-2',
+		// Horizontal Orientation
+		'data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full',
+		// Vertical Orientation
+		'data-[orientation=vertical]:inline-flex data-[orientation=vertical]:flex-col'
+	],
+	label: 'whitespace-nowrap',
+	track: [
+		// Common
+		'bg-surface-200-800 rounded-base overflow-hidden',
+		// Horizontal Orientation
+		'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-2',
+		// Vertical Orientation
+		'data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-[100px]'
+	],
+	range: [
+		// Common
+		'h-full bg-surface-950-50 rounded-base',
+		// Horizontal Orientation
+		'data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:data-[state=indeterminate]:animate-progress-indeterminate-horz',
+		// Vertical Orientation
+		'data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:data-[state=indeterminate]:animate-progress-indeterminate-vert'
+	]
+});

packages/skeleton-common/src/index.ts

@@ -1,6 +1,7 @@
 export * from './themes';
 export * from './classes/accordion';
 export * from './classes/avatar';
+export * from './classes/progress-linear';
 export * from './classes/rating-group';
 export * from './classes/switch';
 export * from './classes/tabs';

packages/skeleton-react/src/components/progress-linear/anatomy/label.tsx

@@ -0,0 +1,17 @@
+import { useContext, type ComponentProps } from 'react';
+import { mergeProps } from '@zag-js/react';
+import { classesProgressLinear } from '@skeletonlabs/skeleton-common';
+import { ProgressLinearRootContext } from '../modules/root-context';
+import type { PropsWithElement } from '@/internal/props-with-element';
+
+export interface ProgressLinearLabelProps extends PropsWithElement, ComponentProps<'div'> {}
+
+export default function (props: ProgressLinearLabelProps) {
+	const rootContext = useContext(ProgressLinearRootContext);
+
+	const { element, children, ...restAttributes } = props;
+
+	const attributes = mergeProps(rootContext.api.getLabelProps(), { className: classesProgressLinear.label }, restAttributes);
+
+	return element ? element({ attributes }) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/progress-linear/anatomy/range.tsx

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

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

@@ -0,0 +1,12 @@
+import { useContext, type ReactNode } from 'react';
+import { ProgressLinearRootContext, type ProgressLinearRootContextType } from '../modules/root-context';
+
+export interface ProgressLinearRootContextProps {
+	children: (context: ProgressLinearRootContextType) => ReactNode;
+}
+
+export default function (props: ProgressLinearRootContextProps) {
+	const rootContext = useContext(ProgressLinearRootContext);
+
+	return props.children(rootContext);
+}

packages/skeleton-react/src/components/progress-linear/anatomy/root.tsx

@@ -0,0 +1,36 @@
+import { useId, type ComponentProps } from 'react';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/react';
+import { splitProps, machine, connect, type Props } from '@zag-js/progress';
+import { classesProgressLinear } from '@skeletonlabs/skeleton-common';
+import { ProgressLinearRootContext } from '../modules/root-context';
+import type { PropsWithElement } from '@/internal/props-with-element';
+
+export interface ProgressLinearRootProps
+	extends PropsWithElement,
+		Omit<Props, 'id'>,
+		Omit<ComponentProps<'div'>, 'id' | 'dir' | 'defaultValue'> {}
+
+export default function (props: ProgressLinearRootProps) {
+	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: classesProgressLinear.root
+		},
+		restAttributes
+	);
+
+	return (
+		<ProgressLinearRootContext.Provider value={{ api }}>
+			{element ? element({ attributes }) : <div {...attributes}>{children}</div>}
+		</ProgressLinearRootContext.Provider>
+	);
+}

packages/skeleton-react/src/components/progress-linear/anatomy/track.tsx

@@ -0,0 +1,17 @@
+import { useContext, type ComponentProps } from 'react';
+import { mergeProps } from '@zag-js/react';
+import { classesProgressLinear } from '@skeletonlabs/skeleton-common';
+import { ProgressLinearRootContext } from '../modules/root-context';
+import type { PropsWithElement } from '@/internal/props-with-element';
+
+export interface ProgressLinearTrackProps extends PropsWithElement, ComponentProps<'div'> {}
+
+export default function (props: ProgressLinearTrackProps) {
+	const rootContext = useContext(ProgressLinearRootContext);
+
+	const { element, children, ...restAttributes } = props;
+
+	const attributes = mergeProps(rootContext.api.getTrackProps(), { className: classesProgressLinear.track }, restAttributes);
+
+	return element ? element({ attributes }) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/progress-linear/index.ts

@@ -0,0 +1,7 @@
+export { ProgressLinear } from './modules/anatomy';
+export type { ProgressLinearRootProps } from './anatomy/root';
+export type { ProgressLinearRootContextProps } from './anatomy/root-context';
+export type { ProgressLinearLabelProps } from './anatomy/label';
+export type { ProgressLinearTrackProps } from './anatomy/track';
+export type { ProgressLinearRangeProps } from './anatomy/range';
+export type { ProgressLinearRootContextType as ProgressLinearRootContext } from './modules/root-context';

packages/skeleton-react/src/components/progress-linear/modules/anatomy.ts

@@ -0,0 +1,12 @@
+import Root from '../anatomy/root';
+import RootContext from '../anatomy/root-context';
+import Label from '../anatomy/label';
+import Track from '../anatomy/track';
+import Range from '../anatomy/range';
+
+export const ProgressLinear = Object.assign(Root, {
+	Context: RootContext,
+	Label: Label,
+	Track: Track,
+	Range: Range
+});