@cognitiv/components-web 1.0.5 → 1.1.0

package/dist/components/disclosure-group/disclosure-group.js

@@ -0,0 +1,35 @@
+"use client";
+import React__default, { createContext } from 'react';
+import { DisclosureGroup } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { disclosureGroupVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const DisclosureGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Disclosure Group Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const DisclosureGroupRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => disclosureGroupVariants({}), []);
+  return /*#__PURE__*/jsx(DisclosureGroupContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(DisclosureGroup, {
+      "data-slot": "disclosure-group",
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+export { DisclosureGroupRoot };

package/dist/components/disclosure-group/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { DisclosureGroupRoot } from "./disclosure-group";
+export declare const DisclosureGroup: (({ children, className, ...props }: import("./disclosure-group").DisclosureGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...props }: import("./disclosure-group").DisclosureGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type DisclosureGroup = {
+    Props: ComponentProps<typeof DisclosureGroupRoot>;
+    RootProps: ComponentProps<typeof DisclosureGroupRoot>;
+};
+export { DisclosureGroupRoot };
+export type { DisclosureGroupRootProps, DisclosureGroupRootProps as DisclosureGroupProps, } from "./disclosure-group";
+export { disclosureGroupVariants } from "./styles";
+export type { DisclosureGroupVariants } from "./styles";
+export { useDisclosureGroupNavigation } from "./use-disclosure-group-navigation";
+export type { UseDisclosureGroupNavigationProps, UseDisclosureGroupNavigationReturn, } from "./use-disclosure-group-navigation";

package/dist/components/disclosure-group/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { DisclosureGroupRoot } from './disclosure-group.js';
+export { disclosureGroupVariants } from './styles.js';
+export { useDisclosureGroupNavigation } from './use-disclosure-group-navigation.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const DisclosureGroup = Object.assign(DisclosureGroupRoot, {
+  Root: DisclosureGroupRoot
+});
+
+export { DisclosureGroup, DisclosureGroupRoot };

package/dist/components/disclosure-group/styles.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const disclosureGroupVariants: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DisclosureGroupVariants = VariantProps<typeof disclosureGroupVariants>;

package/dist/components/disclosure-group/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const disclosureGroupVariants = tv({
+  defaultVariants: {},
+  slots: {
+    base: "disclosure-group"
+  },
+  variants: {}
+});
+
+export { disclosureGroupVariants };

package/dist/components/disclosure-group/use-disclosure-group-navigation.d.ts

@@ -0,0 +1,14 @@
+export interface UseDisclosureGroupNavigationProps {
+    expandedKeys: Set<string | number>;
+    itemIds: string[];
+    onExpandedChange: (keys: Set<string | number>) => void;
+    allowsMultipleExpanded?: boolean;
+}
+export interface UseDisclosureGroupNavigationReturn {
+    currentIndex: number;
+    isPrevDisabled: boolean;
+    isNextDisabled: boolean;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+export declare function useDisclosureGroupNavigation({ allowsMultipleExpanded, expandedKeys, itemIds, onExpandedChange, }: UseDisclosureGroupNavigationProps): UseDisclosureGroupNavigationReturn;

package/dist/components/disclosure-group/use-disclosure-group-navigation.js

@@ -0,0 +1,51 @@
+"use strict";
+import { useMemo, useCallback } from 'react';
+
+function useDisclosureGroupNavigation({
+  allowsMultipleExpanded = false,
+  expandedKeys,
+  itemIds = [],
+  onExpandedChange
+}) {
+  const currentIndex = useMemo(() => {
+    const expandedItems = itemIds.filter(id => expandedKeys.has(id));
+    const currentItem = expandedItems.length > 0 ? expandedItems[0] : itemIds[0];
+    if (!currentItem) return -1;
+    return itemIds.indexOf(currentItem);
+  }, [expandedKeys, itemIds]);
+  const handlePrevious = useCallback(() => {
+    if (currentIndex <= 0) return;
+    const prevItem = itemIds[currentIndex - 1];
+    if (!prevItem) return;
+    if (allowsMultipleExpanded) {
+      const newKeys = new Set(expandedKeys);
+      newKeys.add(prevItem);
+      onExpandedChange(newKeys);
+    } else {
+      onExpandedChange(new Set([prevItem]));
+    }
+  }, [currentIndex, itemIds, expandedKeys, onExpandedChange, allowsMultipleExpanded]);
+  const handleNext = useCallback(() => {
+    if (currentIndex >= itemIds.length - 1) return;
+    const nextItem = itemIds[currentIndex + 1];
+    if (!nextItem) return;
+    if (allowsMultipleExpanded) {
+      const newKeys = new Set(expandedKeys);
+      newKeys.add(nextItem);
+      onExpandedChange(newKeys);
+    } else {
+      onExpandedChange(new Set([nextItem]));
+    }
+  }, [currentIndex, itemIds.length, itemIds, expandedKeys, onExpandedChange, allowsMultipleExpanded]);
+  const isPrevDisabled = currentIndex <= 0;
+  const isNextDisabled = currentIndex >= itemIds.length - 1;
+  return {
+    currentIndex,
+    isNextDisabled,
+    isPrevDisabled,
+    onNext: handleNext,
+    onPrevious: handlePrevious
+  };
+}
+
+export { useDisclosureGroupNavigation };

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,84 @@
+import type { UseOverlayStateReturn } from "../../hooks/use-overlay-state";
+import type { DrawerVariants } from "./styles";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { ButtonProps as ButtonPrimitiveProps, DialogProps as DialogPrimitiveProps } from "react-aria-components";
+import { Button as ButtonPrimitive, DialogTrigger as DrawerTriggerPrimitive, Heading as HeadingPrimitive, ModalOverlay as ModalOverlayPrimitive, Modal as ModalPrimitive } from "react-aria-components";
+type DrawerPlacement = "top" | "bottom" | "left" | "right";
+interface DrawerRootProps extends ComponentPropsWithRef<typeof DrawerTriggerPrimitive> {
+    state?: UseOverlayStateReturn;
+}
+declare const DrawerRoot: {
+    ({ children, state, ...props }: DrawerRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const DrawerTrigger: {
+    ({ children, className, ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerBackdropProps extends ComponentPropsWithRef<typeof ModalOverlayPrimitive> {
+    variant?: DrawerVariants["variant"];
+    /**
+     * Whether to close the drawer when the user interacts outside it.
+     * @default true
+     */
+    isDismissable?: boolean;
+}
+declare const DrawerBackdrop: {
+    ({ children, className, isDismissable, variant, ...props }: DrawerBackdropProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerContentProps extends Omit<ComponentPropsWithRef<typeof ModalPrimitive>, Exclude<keyof DrawerBackdropProps, "children" | "className">> {
+    placement?: DrawerPlacement;
+}
+declare const DrawerContent: {
+    ({ children, className, placement, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerDialogProps extends DialogPrimitiveProps {
+}
+declare const DrawerDialog: {
+    ({ children, className, ...props }: DrawerDialogProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerHeaderProps extends ComponentPropsWithRef<"div"> {
+}
+declare const DrawerHeader: {
+    ({ children, className, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerBodyProps extends ComponentPropsWithRef<"div"> {
+}
+declare const DrawerBody: {
+    ({ children, className, ...props }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerFooterProps extends ComponentPropsWithRef<"div"> {
+}
+declare const DrawerFooter: {
+    ({ children, className, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerHeadingProps extends ComponentPropsWithRef<typeof HeadingPrimitive> {
+}
+declare const DrawerHeading: {
+    ({ children, className, ...props }: DrawerHeadingProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerHandleProps extends ComponentPropsWithRef<"div"> {
+}
+declare const DrawerHandle: {
+    ({ className, ...props }: DrawerHandleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface DrawerCloseTriggerProps extends ButtonPrimitiveProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DrawerCloseTrigger: {
+    ({ className, ...rest }: DrawerCloseTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, };
+export type { DrawerRootProps, DrawerTriggerProps, DrawerBackdropProps, DrawerContentProps, DrawerDialogProps, DrawerHeaderProps, DrawerHeadingProps, DrawerBodyProps, DrawerFooterProps, DrawerHandleProps, DrawerCloseTriggerProps, };

package/dist/components/drawer/drawer.js

@@ -0,0 +1,439 @@
+"use client";
+import { mergeProps } from '@react-aria/utils';
+import { useMemo, useContext, createContext, useRef, useCallback } from 'react';
+import { DialogTrigger, Button, Heading, Dialog, Modal, ModalOverlay, OverlayTriggerStateContext } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import { drawerVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Drag Hook
+ * Tracks pointer events to enable drag-to-dismiss with CSS transforms.
+ * Drag only initiates from handle/header/footer areas — body is excluded to avoid scroll conflicts.
+ * -----------------------------------------------------------------------------------------------*/
+
+const DRAG_THRESHOLD = 8; // px before drag activates
+const DISMISS_FRACTION = 0.3; // dismiss if dragged > 30% of dimension
+const VELOCITY_THRESHOLD = 0.5; // px/ms — dismiss on fast flick
+
+function useDrawerDrag(placement, isDismissable) {
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const dialogRef = useRef(null);
+  const isDragging = useRef(false);
+  const isActive = useRef(false);
+  const startPos = useRef(0);
+  const currentOffset = useRef(0);
+  const velocity = useRef(0);
+  const lastTime = useRef(0);
+  const lastPos = useRef(0);
+  const isVertical = placement === "top" || placement === "bottom";
+  const getPos = useCallback(e => isVertical ? e.clientY : e.clientX, [isVertical]);
+  const clamp = useCallback(delta => {
+    // Only allow drag in the dismiss direction
+    switch (placement) {
+      case "bottom":
+        return Math.max(0, delta);
+      case "top":
+        return Math.min(0, delta);
+      case "right":
+        return Math.max(0, delta);
+      case "left":
+        return Math.min(0, delta);
+      default:
+        return delta;
+    }
+  }, [placement]);
+  const onPointerDown = useCallback(e => {
+    if (!isDismissable) return;
+    if (e.button !== 0) return;
+    const target = e.target;
+
+    // Don't drag from interactive elements or scrollable body
+    if (target.closest("input, textarea, button, [role='button'], select, a, [data-slot='drawer-body']")) {
+      return;
+    }
+    isDragging.current = true;
+    isActive.current = false;
+    startPos.current = getPos(e);
+    lastPos.current = startPos.current;
+    lastTime.current = Date.now();
+    currentOffset.current = 0;
+    velocity.current = 0;
+  }, [getPos, isDismissable]);
+  const onPointerMove = useCallback(e => {
+    if (!isDragging.current || !dialogRef.current) return;
+    const pos = getPos(e);
+    const rawDelta = pos - startPos.current;
+    const delta = clamp(rawDelta);
+
+    // Activate only after passing threshold to avoid false starts
+    if (!isActive.current) {
+      if (Math.abs(rawDelta) < DRAG_THRESHOLD) return;
+      isActive.current = true;
+      dialogRef.current.style.transition = "none";
+      dialogRef.current.setPointerCapture(e.pointerId);
+    }
+    currentOffset.current = delta;
+
+    // Track velocity for flick detection
+    const now = Date.now();
+    const dt = now - lastTime.current;
+    if (dt > 0) {
+      velocity.current = (pos - lastPos.current) / dt;
+      lastTime.current = now;
+      lastPos.current = pos;
+    }
+    const axis = isVertical ? "Y" : "X";
+    dialogRef.current.style.transform = `translate${axis}(${delta}px)`;
+  }, [getPos, clamp, isVertical]);
+  const onPointerUp = useCallback(e => {
+    if (!isDragging.current) return;
+    isDragging.current = false;
+    const el = dialogRef.current;
+    if (!el || !isActive.current) {
+      isActive.current = false;
+      return;
+    }
+    isActive.current = false;
+
+    // Release pointer capture
+    try {
+      el.releasePointerCapture(e.pointerId);
+    } catch {
+      // Pointer capture may already be released
+    }
+    const dimension = isVertical ? el.offsetHeight : el.offsetWidth;
+    const absOffset = Math.abs(currentOffset.current);
+    const absVelocity = Math.abs(velocity.current);
+    const shouldDismiss = absOffset > dimension * DISMISS_FRACTION || absVelocity > VELOCITY_THRESHOLD;
+    if (shouldDismiss && overlayState) {
+      // Keep the inline transform — it compounds with the content exit animation
+      // so the drawer continues sliding from the dragged position
+      overlayState.close();
+    } else {
+      // Snap back with a spring-like ease
+      el.style.transition = "transform 300ms cubic-bezier(0.32, 0.72, 0, 1)";
+      el.style.transform = "";
+      const cleanup = () => {
+        el.style.transition = "";
+      };
+      el.addEventListener("transitionend", cleanup, {
+        once: true
+      });
+    }
+    currentOffset.current = 0;
+    velocity.current = 0;
+  }, [isVertical, overlayState]);
+  return {
+    dialogRef,
+    dragHandlers: isDismissable ? {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp
+    } : {}
+  };
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Context
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerRoot = ({
+  children,
+  state,
+  ...props
+}) => {
+  const drawerContext = useMemo(() => ({
+    isDismissable: true,
+    placement: undefined,
+    slots: drawerVariants()
+  }), []);
+  const controlledProps = useMemo(() => state ? {
+    isOpen: state.isOpen,
+    onOpenChange: state.setOpen
+  } : {}, [state]);
+  return /*#__PURE__*/jsx(DrawerContext, {
+    value: drawerContext,
+    children: /*#__PURE__*/jsx(DialogTrigger, {
+      "data-slot": "drawer-root",
+      ...mergeProps(props, controlledProps),
+      children: children
+    })
+  });
+};
+DrawerRoot.displayName = "Cognitiv.Drawer";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DrawerContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "drawer-trigger",
+    ...props,
+    children: children
+  });
+};
+DrawerTrigger.displayName = "Cognitiv.Drawer.Trigger";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Backdrop
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerBackdrop = ({
+  children,
+  className,
+  isDismissable = true,
+  variant,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(DrawerContext);
+  const updatedSlots = useMemo(() => drawerVariants({
+    variant
+  }), [variant]);
+  const updatedDrawerContext = useMemo(() => ({
+    isDismissable,
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, updatedSlots, isDismissable]);
+  return /*#__PURE__*/jsx(ModalOverlay, {
+    className: composeTwRenderProps(className, updatedSlots?.backdrop()),
+    "data-slot": "drawer-backdrop",
+    isDismissable: isDismissable,
+    ...props,
+    children: renderProps => /*#__PURE__*/jsx(DrawerContext, {
+      value: updatedDrawerContext,
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+DrawerBackdrop.displayName = "Cognitiv.Drawer.Backdrop";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerContent = ({
+  children,
+  className,
+  placement = "bottom",
+  ...props
+}) => {
+  const {
+    isDismissable,
+    slots: contextSlots
+  } = useContext(DrawerContext);
+  const updatedSlots = useMemo(() => drawerVariants({
+    placement
+  }), [placement]);
+  const updatedDrawerContext = useMemo(() => ({
+    isDismissable,
+    placement,
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, placement, isDismissable, updatedSlots]);
+  return /*#__PURE__*/jsx(Modal, {
+    className: composeTwRenderProps(className, updatedSlots?.content()),
+    "data-placement": placement,
+    "data-slot": "drawer-content",
+    ...props,
+    children: renderProps => /*#__PURE__*/jsx(DrawerContext, {
+      value: updatedDrawerContext,
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+DrawerContent.displayName = "Cognitiv.Drawer.Content";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerDialog = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    isDismissable = true,
+    placement,
+    slots
+  } = useContext(DrawerContext);
+  const {
+    dialogRef,
+    dragHandlers
+  } = useDrawerDrag(placement, isDismissable);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Dialog, {
+      ref: dialogRef,
+      className: composeSlotClassName(slots?.dialog, className),
+      "data-placement": placement,
+      "data-slot": "drawer-dialog",
+      style: isDismissable ? {
+        touchAction: "none"
+      } : undefined,
+      ...dragHandlers,
+      ...props,
+      children: children
+    })
+  });
+};
+DrawerDialog.displayName = "Cognitiv.Drawer.Dialog";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DrawerContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "drawer-header",
+    ...props,
+    children: children
+  });
+};
+DrawerHeader.displayName = "Cognitiv.Drawer.Header";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Body
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DrawerContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.body, className),
+    "data-slot": "drawer-body",
+    style: {
+      touchAction: "pan-y"
+    },
+    ...props,
+    children: children
+  });
+};
+DrawerBody.displayName = "Cognitiv.Drawer.Body";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DrawerContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "drawer-footer",
+    ...props,
+    children: children
+  });
+};
+DrawerFooter.displayName = "Cognitiv.Drawer.Footer";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerHeading = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DrawerContext);
+  return /*#__PURE__*/jsx(Heading, {
+    className: composeSlotClassName(slots?.heading, className),
+    "data-slot": "drawer-heading",
+    slot: "title",
+    ...props,
+    children: children
+  });
+};
+DrawerHeading.displayName = "Cognitiv.Drawer.Heading";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Handle
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerHandle = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(DrawerContext);
+  return /*#__PURE__*/jsx("div", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.handle, className),
+    "data-slot": "drawer-handle",
+    ...props,
+    children: /*#__PURE__*/jsx("div", {
+      "data-slot": "drawer-handle-bar"
+    })
+  });
+};
+DrawerHandle.displayName = "Cognitiv.Drawer.Handle";
+
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Close Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const DrawerCloseTrigger = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(DrawerContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.closeTrigger()),
+    "data-slot": "drawer-close-trigger",
+    slot: "close",
+    ...rest
+  });
+};
+DrawerCloseTrigger.displayName = "Cognitiv.Drawer.CloseTrigger";
+
+export { DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDialog, DrawerFooter, DrawerHandle, DrawerHeader, DrawerHeading, DrawerRoot, DrawerTrigger };