@moduix/react 1.1.0

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

@@ -0,0 +1,319 @@
+@layer ui.components {
+  .rXS1Xa_trigger {
+    box-sizing: border-box;
+    min-height: var(--floating-panel-trigger-height, var(--size-lg));
+    padding: var(--floating-panel-trigger-padding-y, .5rem)
+      var(--floating-panel-trigger-padding-x, var(--spacing-3));
+    border: var(--floating-panel-trigger-border-width, var(--border-width-sm)) solid
+      var(--floating-panel-trigger-border-color, var(--color-border));
+    border-radius: var(--floating-panel-trigger-radius, var(--radius-md));
+    background-color: var(--floating-panel-trigger-bg, var(--color-background));
+    color: var(--floating-panel-trigger-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--floating-panel-trigger-font-size, var(--text-md));
+    line-height: var(--floating-panel-trigger-line-height, var(--line-height-text-md));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--floating-panel-transition, var(--transition-default)),
+      border-color var(--floating-panel-transition, var(--transition-default)),
+      color var(--floating-panel-transition, var(--transition-default)),
+      opacity var(--floating-panel-transition, var(--transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--floating-panel-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active, &[data-state="open"] {
+      background-color: var(--floating-panel-trigger-bg-active, var(--floating-panel-trigger-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible {
+      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm)))
+        solid var(--floating-panel-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--floating-panel-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .rXS1Xa_positioner {
+    z-index: var(--z-index, var(--floating-panel-z-index, var(--z-popup)));
+    outline: 0;
+  }
+
+  .rXS1Xa_content {
+    box-sizing: border-box;
+    width: var(--floating-panel-width, 100%);
+    height: var(--floating-panel-height, 100%);
+    min-width: var(--floating-panel-min-width, 16rem);
+    min-height: var(--floating-panel-min-height, 10rem);
+    border: var(--floating-panel-border-width, var(--border-width-sm)) solid
+      var(--floating-panel-border-color, var(--color-border));
+    border-radius: var(--floating-panel-radius, var(--radius-md));
+    background-color: var(--floating-panel-bg, var(--color-popover));
+    color: var(--floating-panel-color, var(--color-popover-foreground));
+    box-shadow: var(--floating-panel-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &[data-state="open"] {
+      animation: rXS1Xa_floating-panel-enter var(--floating-panel-transition, var(--duration-fast)) both;
+    }
+
+    &[data-state="closed"] {
+      pointer-events: none;
+      animation: rXS1Xa_floating-panel-exit var(--floating-panel-transition, var(--duration-fast)) both;
+    }
+
+    &[data-behind] {
+      opacity: var(--floating-panel-behind-opacity, .55);
+    }
+
+    &[data-minimized] {
+      min-height: 0;
+    }
+  }
+
+  .rXS1Xa_dragTrigger {
+    display: block;
+  }
+
+  .rXS1Xa_header {
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--floating-panel-header-gap, var(--spacing-3));
+    min-height: var(--floating-panel-header-height, var(--size-xl));
+    padding: var(--floating-panel-header-padding-y, var(--spacing-2))
+      var(--floating-panel-header-padding-x, var(--spacing-3));
+    border-bottom: var(--floating-panel-header-border-width, var(--border-width-sm)) solid
+      var(--floating-panel-header-border-color, var(--floating-panel-border-color, var(--color-border)));
+    background-color: var(--floating-panel-header-bg, var(--color-muted));
+    cursor: grab;
+    user-select: none;
+    display: flex;
+
+    &[data-dragging] {
+      cursor: grabbing;
+    }
+
+    &[data-minimized] {
+      border-bottom-color: #0000;
+    }
+  }
+
+  .rXS1Xa_title {
+    align-items: center;
+    gap: var(--floating-panel-title-gap, var(--spacing-2));
+    min-width: 0;
+    color: var(--floating-panel-title-color, var(--floating-panel-color, var(--color-popover-foreground)));
+    font-size: var(--floating-panel-title-font-size, var(--text-sm));
+    font-weight: var(--floating-panel-title-font-weight, var(--weight-semibold));
+    line-height: var(--floating-panel-title-line-height, var(--line-height-text-sm));
+    margin: 0;
+    display: inline-flex;
+  }
+
+  .rXS1Xa_control {
+    align-items: center;
+    gap: var(--floating-panel-control-gap, var(--spacing-1));
+    flex: none;
+    display: inline-flex;
+  }
+
+  .rXS1Xa_controlButton {
+    box-sizing: border-box;
+    width: var(--floating-panel-control-size, var(--size-sm));
+    height: var(--floating-panel-control-size, var(--size-sm));
+    border: var(--floating-panel-control-border-width, var(--border-width-sm)) solid
+      var(--floating-panel-control-border-color, var(--color-border));
+    border-radius: var(--floating-panel-control-radius, var(--radius-sm));
+    background-color: var(--floating-panel-control-bg, var(--color-background));
+    color: var(--floating-panel-control-color, var(--color-foreground));
+    font: inherit;
+    cursor: pointer;
+    transition: background-color var(--floating-panel-transition, var(--transition-default)),
+      border-color var(--floating-panel-transition, var(--transition-default)),
+      color var(--floating-panel-transition, var(--transition-default)),
+      opacity var(--floating-panel-transition, var(--transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--floating-panel-control-icon-size, 1rem);
+      height: var(--floating-panel-control-icon-size, 1rem);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--floating-panel-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm)))
+        solid var(--floating-panel-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--floating-panel-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .rXS1Xa_dragIndicator {
+    color: var(--floating-panel-drag-indicator-color, var(--color-muted-foreground));
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--floating-panel-drag-indicator-size, 1rem);
+      height: var(--floating-panel-drag-indicator-size, 1rem);
+    }
+  }
+
+  .rXS1Xa_body {
+    box-sizing: border-box;
+    min-height: 0;
+    padding: var(--floating-panel-body-padding, var(--spacing-4));
+    color: var(--floating-panel-body-color, var(--floating-panel-color, var(--color-popover-foreground)));
+    font-size: var(--floating-panel-body-font-size, var(--text-sm));
+    line-height: var(--floating-panel-body-line-height, var(--line-height-text-sm));
+    flex: auto;
+    overflow: auto;
+
+    &[data-minimized] {
+      display: none;
+    }
+  }
+
+  .rXS1Xa_footer {
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: var(--floating-panel-footer-justify, flex-end);
+    gap: var(--floating-panel-footer-gap, var(--spacing-2));
+    padding: var(--floating-panel-footer-padding-y, var(--spacing-2))
+      var(--floating-panel-footer-padding-x, var(--spacing-3));
+    border-top: var(--floating-panel-footer-border-width, var(--border-width-sm)) solid
+      var(--floating-panel-footer-border-color, var(--floating-panel-border-color, var(--color-border)));
+    color: var(--floating-panel-footer-color, var(--color-muted-foreground));
+    font-size: var(--floating-panel-footer-font-size, var(--text-xs));
+    line-height: var(--floating-panel-footer-line-height, var(--line-height-text-xs));
+    flex: none;
+    display: flex;
+
+    &[data-minimized] {
+      display: none;
+    }
+  }
+
+  .rXS1Xa_resizeTrigger {
+    position: absolute;
+
+    &[data-axis="n"], &[data-axis="s"] {
+      left: var(--floating-panel-resize-edge-inset, .75rem);
+      width: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
+      height: var(--floating-panel-resize-edge-size, .5rem);
+      cursor: ns-resize;
+    }
+
+    &[data-axis="n"] {
+      top: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+    }
+
+    &[data-axis="s"] {
+      bottom: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+    }
+
+    &[data-axis="e"], &[data-axis="w"] {
+      top: var(--floating-panel-resize-edge-inset, .75rem);
+      width: var(--floating-panel-resize-edge-size, .5rem);
+      height: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
+      cursor: ew-resize;
+    }
+
+    &[data-axis="e"] {
+      right: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+    }
+
+    &[data-axis="w"] {
+      left: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+    }
+
+    &[data-axis="ne"], &[data-axis="nw"], &[data-axis="se"], &[data-axis="sw"] {
+      width: var(--floating-panel-resize-corner-size, .75rem);
+      height: var(--floating-panel-resize-corner-size, .75rem);
+    }
+
+    &[data-axis="ne"] {
+      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      cursor: nesw-resize;
+    }
+
+    &[data-axis="nw"] {
+      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      cursor: nwse-resize;
+    }
+
+    &[data-axis="se"] {
+      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      cursor: nwse-resize;
+    }
+
+    &[data-axis="sw"] {
+      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      cursor: nesw-resize;
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  @keyframes rXS1Xa_floating-panel-enter {
+    from {
+      opacity: var(--floating-panel-starting-opacity, 0);
+      translate: var(--floating-panel-starting-translate-x, 0)
+        var(--floating-panel-starting-translate-y, 0);
+      scale: var(--floating-panel-starting-scale, var(--scale-popup));
+    }
+  }
+
+  @keyframes rXS1Xa_floating-panel-exit {
+    to {
+      opacity: var(--floating-panel-ending-opacity, 0);
+      translate: var(--floating-panel-ending-translate-x, 0)
+        var(--floating-panel-ending-translate-y, 0);
+      scale: var(--floating-panel-ending-scale, var(--scale-popup));
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { FloatingPanel } from "@ark-ui/react/floating-panel";
+
+//#region src/components/floating-panel/FloatingPanel.d.ts
+declare const resizeTriggerAxes: ("s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne")[];
+type FloatingPanelRootProps = ComponentProps<typeof FloatingPanel.Root> & OverlayPortalProps;
+type FloatingPanelRootProviderProps = ComponentProps<typeof FloatingPanel.RootProvider> & OverlayPortalProps;
+declare function FloatingPanelRoot({
+  persistRect,
+  portalled,
+  portalRef,
+  ...props
+}: FloatingPanelRootProps): import("react").JSX.Element;
+declare function FloatingPanelRootProvider({
+  portalled,
+  portalRef,
+  ...props
+}: FloatingPanelRootProviderProps): import("react").JSX.Element;
+declare function FloatingPanelFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function FloatingPanelResizeTriggerGroup(): import("react").JSX.Element;
+declare const FloatingPanel$1: typeof FloatingPanelRoot & {
+  Root: typeof FloatingPanelRoot;
+  RootProvider: typeof FloatingPanelRootProvider;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  DragTrigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.DragTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Header: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.HeaderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.TitleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  StageTrigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.StageTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<FloatingPanel.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Body: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.BodyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: typeof FloatingPanelFooter;
+  ResizeTrigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.ResizeTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ResizeTriggerGroup: typeof FloatingPanelResizeTriggerGroup;
+  DragIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { FloatingPanel$1 as FloatingPanel, resizeTriggerAxes };

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

@@ -0,0 +1,194 @@
+import { GripIcon, MaximizeIcon, MinusIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import FloatingPanel_module_default from "./FloatingPanel.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { FloatingPanel } from "@ark-ui/react/floating-panel";
+//#region src/components/floating-panel/FloatingPanel.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close panel";
+const DEFAULT_MINIMIZE_LABEL = "Minimize panel";
+const DEFAULT_MAXIMIZE_LABEL = "Maximize panel";
+const resizeTriggerAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"se",
+	"sw",
+	"nw"
+];
+function FloatingPanelRoot({ persistRect = true, portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(FloatingPanel.Root, {
+			persistRect,
+			...props
+		})
+	});
+}
+function FloatingPanelRootProvider({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(FloatingPanel.RootProvider, { ...props })
+	});
+}
+const FloatingPanelTrigger = forwardRef(function FloatingPanelTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.Trigger, {
+		ref,
+		asChild,
+		"data-slot": "floating-panel-trigger",
+		className: clsx(!asChild && FloatingPanel_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const FloatingPanelPositioner = forwardRef(function FloatingPanelPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(FloatingPanel.Positioner, {
+		ref,
+		"data-slot": "floating-panel-positioner",
+		className: clsx(FloatingPanel_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const FloatingPanelContent = forwardRef(function FloatingPanelContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.Content, {
+		ref,
+		"data-slot": "floating-panel-content",
+		className: clsx(FloatingPanel_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const FloatingPanelDragTrigger = forwardRef(function FloatingPanelDragTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.DragTrigger, {
+		ref,
+		"data-slot": "floating-panel-drag-trigger",
+		className: clsx(FloatingPanel_module_default.dragTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const FloatingPanelHeader = forwardRef(function FloatingPanelHeader({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.Header, {
+		ref,
+		"data-slot": "floating-panel-header",
+		className: clsx(FloatingPanel_module_default.header, normalizeClassName(className)),
+		...props
+	});
+});
+const FloatingPanelTitle = forwardRef(function FloatingPanelTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.Title, {
+		ref,
+		"data-slot": "floating-panel-title",
+		className: clsx(FloatingPanel_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const FloatingPanelControl = forwardRef(function FloatingPanelControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.Control, {
+		ref,
+		"data-slot": "floating-panel-control",
+		className: clsx(FloatingPanel_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const FloatingPanelStageTrigger = forwardRef(function FloatingPanelStageTrigger({ asChild, className, children, stage, "aria-label": ariaLabel, ...props }, ref) {
+	const shouldRenderDefaultIcon = children == null && !asChild;
+	const defaultAriaLabel = shouldRenderDefaultIcon && stage === "minimized" ? DEFAULT_MINIMIZE_LABEL : shouldRenderDefaultIcon && stage === "maximized" ? DEFAULT_MAXIMIZE_LABEL : void 0;
+	return /* @__PURE__ */ jsxs(FloatingPanel.StageTrigger, {
+		ref,
+		asChild,
+		stage,
+		"data-slot": "floating-panel-stage-trigger",
+		className: clsx(!asChild && FloatingPanel_module_default.controlButton, normalizeClassName(className)),
+		"aria-label": ariaLabel ?? defaultAriaLabel,
+		...props,
+		children: [
+			children,
+			shouldRenderDefaultIcon && stage === "minimized" ? /* @__PURE__ */ jsx(MinusIcon, {}) : null,
+			shouldRenderDefaultIcon && stage === "maximized" ? /* @__PURE__ */ jsx(MaximizeIcon, {}) : null
+		]
+	});
+});
+const FloatingPanelCloseTrigger = forwardRef(function FloatingPanelCloseTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.CloseTrigger, {
+		ref,
+		asChild,
+		"data-slot": "floating-panel-close-trigger",
+		className: clsx(!asChild && FloatingPanel_module_default.controlButton, normalizeClassName(className)),
+		...props
+	});
+});
+const FloatingPanelCloseIcon = forwardRef(function FloatingPanelCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.CloseTrigger, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "floating-panel-close-icon",
+			"aria-label": ariaLabel,
+			className: clsx(FloatingPanel_module_default.controlButton, normalizeClassName(className)),
+			children
+		})
+	});
+});
+const FloatingPanelBody = forwardRef(function FloatingPanelBody({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.Body, {
+		ref,
+		"data-slot": "floating-panel-body",
+		className: clsx(FloatingPanel_module_default.body, normalizeClassName(className)),
+		...props
+	});
+});
+function FloatingPanelFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "floating-panel-footer",
+		className: clsx(FloatingPanel_module_default.footer, className),
+		...props
+	});
+}
+const FloatingPanelResizeTrigger = forwardRef(function FloatingPanelResizeTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FloatingPanel.ResizeTrigger, {
+		ref,
+		"data-slot": "floating-panel-resize-trigger",
+		className: clsx(FloatingPanel_module_default.resizeTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+function FloatingPanelResizeTriggerGroup() {
+	return /* @__PURE__ */ jsx(Fragment, { children: resizeTriggerAxes.map((axis) => /* @__PURE__ */ jsx(FloatingPanelResizeTrigger, { axis }, axis)) });
+}
+const FloatingPanelDragIndicator = forwardRef(function FloatingPanelDragIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"aria-hidden": "true",
+		"data-slot": "floating-panel-drag-indicator",
+		className: clsx(FloatingPanel_module_default.dragIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(GripIcon, {})
+	});
+});
+const FloatingPanel$1 = Object.assign(FloatingPanelRoot, {
+	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
+});
+//#endregion
+export { FloatingPanel$1 as FloatingPanel, resizeTriggerAxes };

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

@@ -0,0 +1,20 @@
+import './FloatingPanel.css';
+//#region src/components/floating-panel/FloatingPanel.module.css
+var FloatingPanel_module_default = {
+	"body": "rXS1Xa_body",
+	"content": "rXS1Xa_content",
+	"control": "rXS1Xa_control",
+	"controlButton": "rXS1Xa_controlButton",
+	"dragIndicator": "rXS1Xa_dragIndicator",
+	"dragTrigger": "rXS1Xa_dragTrigger",
+	"floating-panel-enter": "rXS1Xa_floating-panel-enter",
+	"floating-panel-exit": "rXS1Xa_floating-panel-exit",
+	"footer": "rXS1Xa_footer",
+	"header": "rXS1Xa_header",
+	"positioner": "rXS1Xa_positioner",
+	"resizeTrigger": "rXS1Xa_resizeTrigger",
+	"title": "rXS1Xa_title",
+	"trigger": "rXS1Xa_trigger"
+};
+//#endregion
+export { FloatingPanel_module_default as default };

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

@@ -0,0 +1,2 @@
+import { FloatingPanel, resizeTriggerAxes } from "./FloatingPanel.js";
+export { FloatingPanel, resizeTriggerAxes };

package/dist/components/heading/Heading.css

@@ -0,0 +1,58 @@
+@layer ui.components {
+  ._8DK-TW_root {
+    --_heading-font-size: var(--heading-font-size-2xl, var(--text-3xl));
+    --_heading-line-height: var(--heading-line-height-2xl, var(--line-height-text-3xl));
+    --_heading-font-weight: var(--heading-font-weight-semibold, var(--weight-semibold));
+    color: var(--heading-color, var(--color-foreground));
+    font-family: var(--heading-font-family, inherit);
+    font-size: var(--heading-font-size, var(--_heading-font-size));
+    font-weight: var(--heading-font-weight, var(--_heading-font-weight));
+    line-height: var(--heading-line-height, var(--_heading-line-height));
+    letter-spacing: var(--heading-letter-spacing, 0);
+    text-wrap: var(--heading-text-wrap, balance);
+    overflow-wrap: break-word;
+    margin: 0;
+
+    &:is(h6):not([data-size]), &[data-size="xs"] {
+      --_heading-font-size: var(--heading-font-size-xs, var(--text-sm));
+      --_heading-line-height: var(--heading-line-height-xs, var(--line-height-text-sm));
+    }
+
+    &:is(h5):not([data-size]), &[data-size="sm"] {
+      --_heading-font-size: var(--heading-font-size-sm, var(--text-md));
+      --_heading-line-height: var(--heading-line-height-sm, var(--line-height-text-md));
+    }
+
+    &:is(h4):not([data-size]), &[data-size="md"] {
+      --_heading-font-size: var(--heading-font-size-md, var(--text-lg));
+      --_heading-line-height: var(--heading-line-height-md, var(--line-height-text-lg));
+    }
+
+    &:is(h3):not([data-size]), &[data-size="lg"] {
+      --_heading-font-size: var(--heading-font-size-lg, var(--text-xl));
+      --_heading-line-height: var(--heading-line-height-lg, var(--line-height-text-xl));
+    }
+
+    &:is(h2):not([data-size]), &[data-size="xl"] {
+      --_heading-font-size: var(--heading-font-size-xl, var(--text-2xl));
+      --_heading-line-height: var(--heading-line-height-xl, var(--line-height-text-2xl));
+    }
+
+    &[data-size="2xl"] {
+      --_heading-font-size: var(--heading-font-size-2xl, var(--text-3xl));
+      --_heading-line-height: var(--heading-line-height-2xl, var(--line-height-text-3xl));
+    }
+
+    &[data-weight="regular"] {
+      --_heading-font-weight: var(--heading-font-weight-regular, var(--weight-regular));
+    }
+
+    &[data-weight="medium"] {
+      --_heading-font-weight: var(--heading-font-weight-medium, var(--weight-medium));
+    }
+
+    &[data-weight="bold"] {
+      --_heading-font-weight: var(--heading-font-weight-bold, var(--weight-bold));
+    }
+  }
+}

package/dist/components/heading/Heading.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/heading/Heading.d.ts
+type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type HeadingWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+declare const Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  as?: HeadingElement;
+  size?: HeadingSize;
+  weight?: HeadingWeight;
+} & import("react").RefAttributes<HTMLHeadingElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    as?: HeadingElement;
+    size?: HeadingSize;
+    weight?: HeadingWeight;
+  } & import("react").RefAttributes<HTMLHeadingElement>>;
+};
+//#endregion
+export { Heading };