feature: Floating Panel

.changeset/plenty-birds-bet.md

@@ -0,0 +1,8 @@
+---
+"@skeletonlabs/skeleton-common": minor
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+feature: `Floating Panel` component
+

packages/skeleton-common/src/classes/floating-panel.ts

@@ -0,0 +1,15 @@
+import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' with { type: 'macro' };
+
+export const classesFloatingPanel = defineSkeletonClasses({
+	trigger: '',
+	positioner: '',
+	content: 'card overflow-hidden shadow-lg border border-surface-300-700',
+	dragTrigger: '',
+	header: 'px-4 py-2 grid grid-cols-[1fr_auto] gap-2 items-center bg-surface-200-800 overflow-y-hidden',
+	title: 'flex justify-start items-center gap-2 whitespace-nowrap',
+	control: 'flex gap-1',
+	stageTrigger: 'btn-icon hover:preset-tonal',
+	closeTrigger: 'btn-icon hover:preset-tonal',
+	resizeTrigger: '',
+	body: 'h-full bg-surface-100-900 p-4 overflow-y-auto',
+});

packages/skeleton-common/src/index.ts

@@ -6,6 +6,7 @@ export * from './classes/combobox.js';
 export * from './classes/date-picker.js';
 export * from './classes/dialog.js';
 export * from './classes/file-upload.js';
+export * from './classes/floating-panel.js';
 export * from './classes/listbox.js';
 export * from './classes/menu.js';
 export * from './classes/navigation.js';

packages/skeleton-react/package.json

@@ -38,6 +38,7 @@
 		"@zag-js/date-picker": "catalog:",
 		"@zag-js/dialog": "catalog:",
 		"@zag-js/file-upload": "catalog:",
+		"@zag-js/floating-panel": "catalog:",
 		"@zag-js/listbox": "catalog:",
 		"@zag-js/menu": "catalog:",
 		"@zag-js/pagination": "catalog:",

packages/skeleton-react/src/components/floating-panel/anatomy/body.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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelBodyProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Body(props: FloatingPanelBodyProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getBodyProps(),
+		{
+			className: classesFloatingPanel.body,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/close-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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelCloseTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+
+export default function CloseTrigger(props: FloatingPanelCloseTriggerProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getCloseTriggerProps(),
+		{
+			className: classesFloatingPanel.closeTrigger,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <button {...attributes}>{children}</button>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/content.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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Content(props: FloatingPanelContentProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getContentProps(),
+		{
+			className: classesFloatingPanel.content,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/control.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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelControlProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Control(props: FloatingPanelControlProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getControlProps(),
+		{
+			className: classesFloatingPanel.control,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/drag-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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelDragTriggerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function DragTrigger(props: FloatingPanelDragTriggerProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getDragTriggerProps(),
+		{
+			className: classesFloatingPanel.dragTrigger,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/header.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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelHeaderProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Header(props: FloatingPanelHeaderProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getHeaderProps(),
+		{
+			className: classesFloatingPanel.header,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/positioner.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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelPositionerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Positioner(props: FloatingPanelPositionerProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getPositionerProps(),
+		{
+			className: classesFloatingPanel.positioner,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/resize-trigger.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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { splitResizeTriggerProps, type ResizeTriggerProps } from '@zag-js/floating-panel';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelResizeTriggerProps extends ResizeTriggerProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function ResizeTrigger(props: FloatingPanelResizeTriggerProps) {
+	const floatingPanel = use(RootContext);
+
+	const [resizeTriggerProps, componentProps] = splitResizeTriggerProps(props);
+	const { element, children, ...rest } = componentProps;
+
+	const attributes = mergeProps(
+		floatingPanel.getResizeTriggerProps(resizeTriggerProps as ResizeTriggerProps),
+		{
+			className: classesFloatingPanel.resizeTrigger,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

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

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

packages/skeleton-react/src/components/floating-panel/anatomy/root-provider.tsx

@@ -0,0 +1,13 @@
+import type { useFloatingPanel } from '../modules/provider.js';
+import { RootContext } from '../modules/root-context.js';
+import { type PropsWithChildren } from 'react';
+
+export interface FloatingPanelRootProviderProps extends PropsWithChildren {
+	value: ReturnType<typeof useFloatingPanel>;
+}
+
+export default function RootProvider(props: FloatingPanelRootProviderProps) {
+	const { children, value: floatingPanel } = props;
+
+	return <RootContext.Provider value={floatingPanel}>{children}</RootContext.Provider>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/root.tsx

@@ -0,0 +1,15 @@
+import { useFloatingPanel } from '../modules/provider.js';
+import { RootContext } from '../modules/root-context.js';
+import { type Props, splitProps } from '@zag-js/floating-panel';
+import { type PropsWithChildren } from 'react';
+
+export interface FloatingPanelRootProps extends PropsWithChildren, Omit<Props, 'id'> {}
+
+export default function Root(props: FloatingPanelRootProps) {
+	const [floatingPanelProps, componentProps] = splitProps(props);
+	const { children } = componentProps;
+
+	const floatingPanel = useFloatingPanel(floatingPanelProps);
+
+	return <RootContext.Provider value={floatingPanel}>{children}</RootContext.Provider>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/stage-trigger.tsx

@@ -0,0 +1,25 @@
+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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { type StageTriggerProps } from '@zag-js/floating-panel';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelStageTriggerProps extends StageTriggerProps, PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+
+export default function StageTrigger(props: FloatingPanelStageTriggerProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, stage, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getStageTriggerProps({ stage }),
+		{
+			className: classesFloatingPanel.stageTrigger,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <button {...attributes}>{children}</button>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/title.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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+
+export default function Title(props: FloatingPanelTitleProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getTitleProps(),
+		{
+			className: classesFloatingPanel.title,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <div {...attributes}>{children}</div>;
+}

packages/skeleton-react/src/components/floating-panel/anatomy/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 { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface FloatingPanelTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+
+export default function Trigger(props: FloatingPanelTriggerProps) {
+	const floatingPanel = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		floatingPanel.getTriggerProps(),
+		{
+			className: classesFloatingPanel.trigger,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <button {...attributes}>{children}</button>;
+}

packages/skeleton-react/src/components/floating-panel/index.ts

@@ -0,0 +1,16 @@
+export type { FloatingPanelBodyProps } from './anatomy/body.jsx';
+export type { FloatingPanelCloseTriggerProps } from './anatomy/close-trigger.jsx';
+export type { FloatingPanelContentProps } from './anatomy/content.jsx';
+export type { FloatingPanelControlProps } from './anatomy/control.jsx';
+export type { FloatingPanelDragTriggerProps } from './anatomy/drag-trigger.jsx';
+export type { FloatingPanelHeaderProps } from './anatomy/header.jsx';
+export type { FloatingPanelPositionerProps } from './anatomy/positioner.jsx';
+export type { FloatingPanelResizeTriggerProps } from './anatomy/resize-trigger.jsx';
+export type { FloatingPanelRootProps } from './anatomy/root.jsx';
+export type { FloatingPanelRootContextProps } from './anatomy/root-context.jsx';
+export type { FloatingPanelRootProviderProps } from './anatomy/root-provider.jsx';
+export type { FloatingPanelStageTriggerProps } from './anatomy/stage-trigger.jsx';
+export type { FloatingPanelTitleProps } from './anatomy/title.jsx';
+export type { FloatingPanelTriggerProps } from './anatomy/trigger.jsx';
+export { FloatingPanel } from './modules/anatomy.js';
+export { useFloatingPanel } from './modules/provider.js';