@moduix/solid-tailwind 1.0.0

package/dist/components/file-upload/FileUpload.jsx

@@ -0,0 +1,178 @@
+import { ark } from "@ark-ui/solid/factory";
+import { FileUpload, useFileUpload, useFileUploadContext } from "@ark-ui/solid/file-upload";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CloseIcon, FileIcon, TrashIcon, UploadIcon } from "../../internal/icons/ui/Icons.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+function FileUploadRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <FileUpload.Root asChild={local.asChild} data-slot="file-upload-root" class={cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class)} {...others}>
+      {local.children}
+    </FileUpload.Root>;
+}
+function FileUploadRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <FileUpload.RootProvider asChild={local.asChild} data-slot="file-upload-root-provider" class={cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class)} {...others}>
+      {local.children}
+    </FileUpload.RootProvider>;
+}
+function FileUploadLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.Label data-slot="file-upload-label" class={cn('text-sm font-medium text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function FileUploadDropzone(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.Dropzone data-slot="file-upload-dropzone" class={cn('box-border grid min-h-32 w-full place-items-center gap-3 rounded-md border border-dashed border-border bg-background p-5 text-center text-muted-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-dragging:border-primary data-dragging:bg-accent data-dragging:text-foreground data-invalid:border-destructive data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&[role=button]:not([data-disabled],[data-readonly])]:cursor-pointer', local.class)} {...others}/>;
+}
+function FileUploadDropzoneIcon(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ark.span aria-hidden="true" data-slot="file-upload-dropzone-icon" class={cn('box-border inline-flex size-10 items-center justify-center rounded-full border border-border bg-muted text-foreground [&>svg]:size-4', local.class)} {...others}>
+      {resolvedChildren() ?? <UploadIcon/>}
+    </ark.span>;
+}
+function FileUploadTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.Trigger data-slot="file-upload-trigger" class={cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-primary bg-primary px-4 text-sm leading-5 font-medium whitespace-nowrap text-primary-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default data-disabled:pointer-events-none data-disabled:cursor-default data-invalid:border-destructive data-readonly:pointer-events-none data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-foreground', local.class)} {...others}/>;
+}
+function FileUploadItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.ItemGroup data-slot="file-upload-item-group" class={cn('flex w-full flex-wrap items-start gap-2 empty:hidden', local.class)} {...others}/>;
+}
+function FileUploadItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.Item data-slot="file-upload-item" class={cn('group/item box-border grid min-h-control-md shrink-0 grow basis-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 rounded-md border border-border bg-background px-3 py-2 text-foreground has-[[data-slot=file-upload-item-preview-image]]:min-h-0 has-[[data-slot=file-upload-item-preview-image]]:max-w-40 has-[[data-slot=file-upload-item-preview-image]]:grow-0 has-[[data-slot=file-upload-item-preview-image]]:grid-cols-[minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview-image]]:grid-rows-[auto_auto_auto] has-[[data-slot=file-upload-item-preview-image]]:items-start has-[[data-slot=file-upload-item-preview]]:min-h-control-xl has-[[data-slot=file-upload-item-preview]]:grid-cols-[auto_minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview]]:py-2 data-disabled:opacity-50 data-[type=rejected]:border-destructive', local.class)} {...others}/>;
+}
+function FileUploadItemPreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.ItemPreview data-slot="file-upload-item-preview" class={cn('col-start-1 row-span-2 row-start-1 inline-flex size-10 items-center justify-center overflow-hidden rounded-sm bg-muted text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-span-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:aspect-square group-has-[[data-slot=file-upload-item-preview-image]]/item:h-auto group-has-[[data-slot=file-upload-item-preview-image]]/item:w-full', local.class)} {...others}/>;
+}
+function FileUploadItemPreviewImage(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.ItemPreviewImage data-slot="file-upload-item-preview-image" class={cn('size-full object-cover', local.class)} {...others}/>;
+}
+function FileUploadItemPreviewIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileIcon data-slot="file-upload-item-preview-icon" class={cn('size-4', local.class)} {...others}/>;
+}
+function getFileTypeLabel(file) {
+    const extension = file.name.split('.').pop();
+    return extension ? extension.toUpperCase() : file.type || 'FILE';
+}
+function isImageFile(file) {
+    return file.type.startsWith('image/');
+}
+function FileUploadItemName(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.ItemName data-slot="file-upload-item-name" class={cn('col-start-1 line-clamp-1 min-w-0 text-sm leading-5 font-medium group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-end group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2', local.class)} {...others}/>;
+}
+function FileUploadItemSizeText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <FileUpload.ItemSizeText data-slot="file-upload-item-size-text" class={cn('text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+}
+function FileUploadItemMetadata(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'file'
+    ]);
+    return <ark.div data-slot="file-upload-item-metadata" class={cn("col-start-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2 [&>[data-slot='file-upload-item-size-text']::before]:me-1 [&>[data-slot='file-upload-item-size-text']::before]:content-['·']", local.class)} {...others}>
+      <ark.span>{getFileTypeLabel(local.file)}</ark.span>
+      <FileUploadItemSizeText/>
+    </ark.div>;
+}
+function FileUploadItemDeleteTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <FileUpload.ItemDeleteTrigger data-slot="file-upload-item-delete-trigger" class={cn('col-start-2 row-start-1 box-border inline-flex size-control-sm shrink-0 cursor-pointer appearance-none items-center justify-center justify-self-end rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-center group-has-[[data-slot=file-upload-item-preview]]/item:col-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:row-span-2 group-has-[[data-slot=file-upload-item-preview]]/item:row-start-1 group-has-[[data-slot=file-upload-item-size-text]]/item:row-span-2 group-has-[[data-slot=file-upload-item-size-text]]/item:row-start-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-readonly:pointer-events-none data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class)} {...others}>
+      {resolvedChildren() ?? <TrashIcon/>}
+    </FileUpload.ItemDeleteTrigger>;
+}
+function FileUploadItems() {
+    const fileUpload = useFileUploadContext();
+    return <For each={fileUpload().acceptedFiles}>
+      {(file)=><FileUploadItem file={file}>
+          {isImageFile(file) ? <FileUploadItemPreview>
+              <FileUploadItemPreviewImage/>
+            </FileUploadItemPreview> : <FileUploadItemPreview>
+              <FileUploadItemPreviewIcon/>
+            </FileUploadItemPreview>}
+          <FileUploadItemName/>
+          <FileUploadItemMetadata file={file}/>
+          <FileUploadItemDeleteTrigger aria-label={`Remove ${file.name}`}/>
+        </FileUploadItem>}
+    </For>;
+}
+function FileUploadClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const clearLabel = ()=>local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear files' : void 0);
+    const triggerClass = ()=>cn('size-control-sm self-start rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:pointer-events-none data-readonly:opacity-50 [&>svg]:size-4', null != local.children && 'w-auto gap-2 px-2 text-sm leading-5', local.class);
+    if (local.asChild) return <FileUpload.ClearTrigger asChild={local.asChild} data-slot="file-upload-clear-trigger" class={triggerClass()} aria-label={clearLabel()} aria-labelledby={local['aria-labelledby']} {...others}>
+        {resolvedChildren()}
+      </FileUpload.ClearTrigger>;
+    return <FileUpload.ClearTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} aria-label={clearLabel()} aria-labelledby={local['aria-labelledby']}>
+          {resolvedChildren() ?? <CloseIcon/>}
+        </CloseButton.Root>} data-slot="file-upload-clear-trigger" class={triggerClass()} {...others}/>;
+}
+const FileUpload_FileUpload = Object.assign(FileUploadRoot, {
+    Root: FileUploadRoot,
+    RootProvider: FileUploadRootProvider,
+    Context: FileUpload.Context,
+    HiddenInput: FileUpload.HiddenInput,
+    Label: FileUploadLabel,
+    Dropzone: FileUploadDropzone,
+    DropzoneIcon: FileUploadDropzoneIcon,
+    Trigger: FileUploadTrigger,
+    ItemGroup: FileUploadItemGroup,
+    Item: FileUploadItem,
+    Items: FileUploadItems,
+    ItemPreview: FileUploadItemPreview,
+    ItemPreviewImage: FileUploadItemPreviewImage,
+    ItemPreviewIcon: FileUploadItemPreviewIcon,
+    ItemName: FileUploadItemName,
+    ItemMetadata: FileUploadItemMetadata,
+    ItemSizeText: FileUploadItemSizeText,
+    ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+    ClearTrigger: FileUploadClearTrigger
+});
+export { FileUpload_FileUpload as FileUpload, useFileUpload, useFileUploadContext };

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1 @@
+export { FileUpload, useFileUpload, useFileUploadContext } from './FileUpload.js';

package/dist/components/file-upload/index.js

@@ -0,0 +1 @@
+export { FileUpload, useFileUpload, useFileUploadContext } from "./FileUpload.js";

package/dist/components/file-upload/index.jsx

@@ -0,0 +1 @@
+export { FileUpload, useFileUpload, useFileUploadContext } from "./FileUpload.jsx";

package/dist/components/floating-panel/FloatingPanel.d.ts

@@ -0,0 +1,53 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import { FloatingPanel as FloatingPanelPrimitive, useFloatingPanel, useFloatingPanelContext } from '@ark-ui/solid/floating-panel';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type FloatingPanelResizeTriggerAxis = NonNullable<ComponentProps<typeof FloatingPanelPrimitive.ResizeTrigger>['axis']>;
+declare const resizeTriggerAxes: ("e" | "n" | "ne" | "nw" | "s" | "se" | "sw" | "w")[];
+type FloatingPanelRootProps = ComponentProps<typeof FloatingPanelPrimitive.Root> & OverlayPortalProps;
+type FloatingPanelRootProviderProps = ComponentProps<typeof FloatingPanelPrimitive.RootProvider> & OverlayPortalProps;
+type FloatingPanelCloseIconProps = Omit<ComponentProps<typeof FloatingPanelPrimitive.CloseTrigger>, 'asChild'>;
+declare function FloatingPanelRoot(props: FloatingPanelRootProps): import("solid-js").JSX.Element;
+declare function FloatingPanelRootProvider(props: FloatingPanelRootProviderProps): import("solid-js").JSX.Element;
+declare function FloatingPanelTrigger(props: ComponentProps<typeof FloatingPanelPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function FloatingPanelPositioner(props: ComponentProps<typeof FloatingPanelPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function FloatingPanelContent(props: ComponentProps<typeof FloatingPanelPrimitive.Content>): import("solid-js").JSX.Element;
+declare function FloatingPanelDragTrigger(props: ComponentProps<typeof FloatingPanelPrimitive.DragTrigger>): import("solid-js").JSX.Element;
+declare function FloatingPanelHeader(props: ComponentProps<typeof FloatingPanelPrimitive.Header>): import("solid-js").JSX.Element;
+declare function FloatingPanelTitle(props: ComponentProps<typeof FloatingPanelPrimitive.Title>): import("solid-js").JSX.Element;
+declare function FloatingPanelControl(props: ComponentProps<typeof FloatingPanelPrimitive.Control>): import("solid-js").JSX.Element;
+declare function FloatingPanelStageTrigger(props: ComponentProps<typeof FloatingPanelPrimitive.StageTrigger>): import("solid-js").JSX.Element;
+declare function FloatingPanelCloseTrigger(props: ComponentProps<typeof FloatingPanelPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+declare function FloatingPanelCloseIcon(props: FloatingPanelCloseIconProps): import("solid-js").JSX.Element;
+declare function FloatingPanelBody(props: ComponentProps<typeof FloatingPanelPrimitive.Body>): import("solid-js").JSX.Element;
+declare function FloatingPanelFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function FloatingPanelResizeTrigger(props: ComponentProps<typeof FloatingPanelPrimitive.ResizeTrigger>): import("solid-js").JSX.Element;
+declare function FloatingPanelResizeTriggerGroup(props: {
+    axes?: readonly FloatingPanelResizeTriggerAxis[];
+}): import("solid-js").JSX.Element;
+declare function FloatingPanelDragIndicator(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+type FloatingPanelComponent = typeof FloatingPanelRoot & {
+    Context: typeof FloatingPanelPrimitive.Context;
+    Root: typeof FloatingPanelRoot;
+    RootProvider: typeof FloatingPanelRootProvider;
+    Trigger: typeof FloatingPanelTrigger;
+    Positioner: typeof FloatingPanelPositioner;
+    Content: typeof FloatingPanelContent;
+    DragTrigger: typeof FloatingPanelDragTrigger;
+    Header: typeof FloatingPanelHeader;
+    Title: typeof FloatingPanelTitle;
+    Control: typeof FloatingPanelControl;
+    StageTrigger: typeof FloatingPanelStageTrigger;
+    CloseTrigger: typeof FloatingPanelCloseTrigger;
+    CloseIcon: typeof FloatingPanelCloseIcon;
+    Body: typeof FloatingPanelBody;
+    Footer: typeof FloatingPanelFooter;
+    ResizeTrigger: typeof FloatingPanelResizeTrigger;
+    ResizeTriggerGroup: typeof FloatingPanelResizeTriggerGroup;
+    DragIndicator: typeof FloatingPanelDragIndicator;
+    useFloatingPanel: typeof useFloatingPanel;
+    useFloatingPanelContext: typeof useFloatingPanelContext;
+};
+declare const FloatingPanel: FloatingPanelComponent;
+export { FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext };
+export type { FloatingPanelRootProps, FloatingPanelRootProviderProps };

package/dist/components/floating-panel/FloatingPanel.js

@@ -0,0 +1,338 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { FloatingPanel, useFloatingPanel, useFloatingPanelContext } from "@ark-ui/solid/floating-panel";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { GripIcon, MaximizeIcon, MinusIcon, RestoreIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+var _tmpl$ = /*#__PURE__*/ template("<span aria-hidden=true data-slot=floating-panel-drag-indicator>");
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close panel';
+const resizeTriggerAxes = [
+    'n',
+    'e',
+    's',
+    'w',
+    'ne',
+    'se',
+    'sw',
+    'nw'
+];
+function FloatingPanelRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'closeOnEscape',
+        'lazyMount',
+        'persistRect',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(FloatingPanel.Root, mergeProps({
+                get closeOnEscape () {
+                    return local.closeOnEscape ?? true;
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get persistRect () {
+                    return local.persistRect ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function FloatingPanelRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(FloatingPanel.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function FloatingPanelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "floating-panel-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function FloatingPanelPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(FloatingPanel.Positioner, mergeProps({
+                "data-slot": "floating-panel-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index)] outline-0', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function FloatingPanelContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Content, mergeProps({
+        "data-slot": "floating-panel-content",
+        get ["class"] () {
+            return cn('relative box-border flex min-h-40 min-w-64 origin-[var(--transform-origin)] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg outline-0 data-behind:opacity-[0.55] data-minimized:min-h-0 data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class);
+        }
+    }, others));
+}
+function FloatingPanelDragTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.DragTrigger, mergeProps({
+        "data-slot": "floating-panel-drag-trigger",
+        get ["class"] () {
+            return cn('block', local.class);
+        }
+    }, others));
+}
+function FloatingPanelHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Header, mergeProps({
+        "data-slot": "floating-panel-header",
+        get ["class"] () {
+            return cn('box-border flex min-h-control-xl cursor-grab items-center justify-between gap-3 border-b border-border bg-muted px-3 py-2 select-none data-[dragging]:cursor-grabbing data-[minimized]:border-b-transparent', local.class);
+        }
+    }, others));
+}
+function FloatingPanelTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Title, mergeProps({
+        "data-slot": "floating-panel-title",
+        get ["class"] () {
+            return cn('inline-flex min-w-0 items-center gap-2 text-sm font-semibold text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function FloatingPanelControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Control, mergeProps({
+        "data-slot": "floating-panel-control",
+        get ["class"] () {
+            return cn('inline-flex flex-none items-center gap-1', local.class);
+        }
+    }, others));
+}
+function FloatingPanelStageTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'asChild',
+        'children',
+        'class',
+        'stage'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const shouldRenderDefaultIcon = ()=>null == local.children && !local.asChild;
+    return createComponent(FloatingPanel.StageTrigger, mergeProps({
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "floating-panel-stage-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class);
+        },
+        get stage () {
+            return local.stage;
+        }
+    }, others, {
+        get children () {
+            return [
+                memo(()=>resolvedChildren()),
+                memo(()=>memo(()=>!!(shouldRenderDefaultIcon() && 'minimized' === local.stage))() ? createComponent(MinusIcon, {}) : null),
+                memo(()=>memo(()=>!!(shouldRenderDefaultIcon() && 'maximized' === local.stage))() ? createComponent(MaximizeIcon, {}) : null),
+                memo(()=>memo(()=>!!(shouldRenderDefaultIcon() && 'default' === local.stage))() ? createComponent(RestoreIcon, {}) : null)
+            ];
+        }
+    }));
+}
+function FloatingPanelCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(FloatingPanel.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "floating-panel-close-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function FloatingPanelCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(FloatingPanel.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "floating-panel-close-icon",
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL;
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return cn('box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function FloatingPanelBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.Body, mergeProps({
+        "data-slot": "floating-panel-body",
+        get ["class"] () {
+            return cn('min-h-0 flex-auto overflow-auto p-4 text-sm text-popover-foreground data-minimized:hidden', local.class);
+        }
+    }, others));
+}
+function FloatingPanelFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const floatingPanel = useFloatingPanelContext();
+    return createComponent(ark.div, mergeProps(others, {
+        "data-slot": "floating-panel-footer",
+        get ["data-minimized"] () {
+            return floatingPanel().getContentProps()['data-minimized'];
+        },
+        get ["class"] () {
+            return cn('flex flex-none items-center justify-end gap-2 border-t border-border px-3 py-2 text-xs text-muted-foreground data-minimized:hidden', local.class);
+        }
+    }));
+}
+function FloatingPanelResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(FloatingPanel.ResizeTrigger, mergeProps({
+        "data-slot": "floating-panel-resize-trigger",
+        get ["class"] () {
+            return cn('absolute data-disabled:pointer-events-none data-[axis=e]:inset-y-3 data-[axis=e]:-right-1 data-[axis=e]:w-2 data-[axis=n]:inset-x-3 data-[axis=n]:-top-1 data-[axis=n]:h-2 data-[axis=ne]:-top-1.5 data-[axis=ne]:-right-1.5 data-[axis=ne]:size-3 data-[axis=nw]:-top-1.5 data-[axis=nw]:-left-1.5 data-[axis=nw]:size-3 data-[axis=s]:inset-x-3 data-[axis=s]:-bottom-1 data-[axis=s]:h-2 data-[axis=se]:-right-1.5 data-[axis=se]:-bottom-1.5 data-[axis=se]:size-3 data-[axis=sw]:-bottom-1.5 data-[axis=sw]:-left-1.5 data-[axis=sw]:size-3 data-[axis=w]:inset-y-3 data-[axis=w]:-left-1 data-[axis=w]:w-2', local.class);
+        }
+    }, others));
+}
+function FloatingPanelResizeTriggerGroup(props) {
+    return createComponent(For, {
+        get each () {
+            return props.axes ?? resizeTriggerAxes;
+        },
+        children: (axis)=>createComponent(FloatingPanelResizeTrigger, {
+                axis: axis
+            })
+    });
+}
+function FloatingPanelDragIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return cn('inline-flex flex-none items-center justify-center text-muted-foreground [&>svg]:size-4', local.class);
+            }
+        }, others), false, true);
+        insert(_el$, ()=>resolvedChildren() ?? createComponent(GripIcon, {}));
+        return _el$;
+    })();
+}
+const FloatingPanel_FloatingPanel = Object.assign(FloatingPanelRoot, {
+    Context: FloatingPanel.Context,
+    Root: FloatingPanelRoot,
+    RootProvider: FloatingPanelRootProvider,
+    Trigger: FloatingPanelTrigger,
+    Positioner: FloatingPanelPositioner,
+    Content: FloatingPanelContent,
+    DragTrigger: FloatingPanelDragTrigger,
+    Header: FloatingPanelHeader,
+    Title: FloatingPanelTitle,
+    Control: FloatingPanelControl,
+    StageTrigger: FloatingPanelStageTrigger,
+    CloseTrigger: FloatingPanelCloseTrigger,
+    CloseIcon: FloatingPanelCloseIcon,
+    Body: FloatingPanelBody,
+    Footer: FloatingPanelFooter,
+    ResizeTrigger: FloatingPanelResizeTrigger,
+    ResizeTriggerGroup: FloatingPanelResizeTriggerGroup,
+    DragIndicator: FloatingPanelDragIndicator,
+    useFloatingPanel: useFloatingPanel,
+    useFloatingPanelContext: useFloatingPanelContext
+});
+export { FloatingPanel_FloatingPanel as FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext };