@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/components/context-menu.tsx

@@ -0,0 +1,410 @@
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenu
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuProps = ComponentProps<typeof ContextMenuPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenu({ ...props }: ContextMenuProps): JSX.Element {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuTriggerProps = ComponentProps<typeof ContextMenuPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.Trigger
+      className={cn("select-none", className)}
+      data-slot="context-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuGroupProps = ComponentProps<typeof ContextMenuPrimitive.Group>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuGroup({ ...props }: ContextMenuGroupProps): JSX.Element {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuSub
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuSubProps = ComponentProps<typeof ContextMenuPrimitive.Sub>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuSub({ ...props }: ContextMenuSubProps): JSX.Element {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuRadioGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuRadioGroupProps = ComponentProps<typeof ContextMenuPrimitive.RadioGroup>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuRadioGroup({ ...props }: ContextMenuRadioGroupProps): JSX.Element {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuSubTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ContextMenuSubTriggerProps extends ComponentProps<typeof ContextMenuPrimitive.SubTrigger> {
+  inset?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuSubTrigger({ children, className, inset, ...props }: ContextMenuSubTriggerProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="context-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto rtl:rotate-180" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuSubContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuSubContentProps = ComponentProps<typeof ContextMenuPrimitive.SubContent>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuSubContent({ className, ...props }: ContextMenuSubContentProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        "z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2",
+        className,
+      )}
+      data-slot="context-menu-sub-content"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuContentProps = ComponentProps<typeof ContextMenuPrimitive.Content>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuContent({ className, ...props }: ContextMenuContentProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal">
+      <ContextMenuPrimitive.Content
+        className={cn(
+          "z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:ease-exit",
+          className,
+        )}
+        data-slot="context-menu-content"
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ContextMenuItemProps extends ComponentProps<typeof ContextMenuPrimitive.Item> {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuItem({ className, inset, variant = "default", ...props }: ContextMenuItemProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.Item
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="context-menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuCheckboxItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ContextMenuCheckboxItemProps extends ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> {
+  inset?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuCheckboxItem({
+  checked,
+  children,
+  className,
+  inset,
+  ...props
+}: ContextMenuCheckboxItemProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="context-menu-checkbox-item"
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuRadioItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ContextMenuRadioItemProps extends ComponentProps<typeof ContextMenuPrimitive.RadioItem> {
+  inset?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuRadioItem({ children, className, inset, ...props }: ContextMenuRadioItemProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="context-menu-radio-item"
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuLabel
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ContextMenuLabelProps extends ComponentProps<typeof ContextMenuPrimitive.Label> {
+  inset?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.Label
+      className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className)}
+      data-inset={inset}
+      data-slot="context-menu-label"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuSeparatorProps = ComponentProps<typeof ContextMenuPrimitive.Separator>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      data-slot="context-menu-separator"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuShortcut
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuShortcutProps = ComponentProps<"span">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): JSX.Element {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className,
+      )}
+      data-slot="context-menu-shortcut"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ContextMenuArrow
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ContextMenuArrowProps = ComponentProps<typeof ContextMenuPrimitive.Arrow>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ContextMenuArrow({ className, ...props }: ContextMenuArrowProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.Arrow className={cn("fill-popover", className)} data-slot="context-menu-arrow" {...props} />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  ContextMenu,
+  ContextMenuArrow,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+};
+export type {
+  ContextMenuArrowProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuContentProps,
+  ContextMenuGroupProps,
+  ContextMenuItemProps,
+  ContextMenuLabelProps,
+  ContextMenuProps,
+  ContextMenuRadioGroupProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuShortcutProps,
+  ContextMenuSubContentProps,
+  ContextMenuSubProps,
+  ContextMenuSubTriggerProps,
+  ContextMenuTriggerProps,
+};

package/src/components/dialog.tsx

@@ -0,0 +1,243 @@
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { Button } from "#/components/button";
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Dialog
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogProps = ComponentProps<typeof DialogPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Dialog({ ...props }: DialogProps): JSX.Element {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogTrigger({ ...props }: DialogTriggerProps): JSX.Element {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+  showCloseButton?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogContent({ children, className, showCloseButton = true, ...props }: DialogContentProps): JSX.Element {
+  return (
+    <DialogPrimitive.Portal data-slot="dialog-portal">
+      <DialogPrimitive.Overlay
+        className={
+          "fixed inset-0 isolate z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0"
+        }
+        data-slot="dialog-overlay"
+      />
+      <DialogPrimitive.Content
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none sm:max-w-md data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        data-slot="dialog-content"
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <DialogPrimitive.Close asChild data-slot="dialog-close">
+            <Button className="absolute top-4 right-4" size="icon-sm" variant="ghost">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        ) : null}
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogHeaderProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogHeader({ className, ...props }: DialogHeaderProps): JSX.Element {
+  return <div className={cn("flex shrink-0 flex-col gap-2", className)} data-slot="dialog-header" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogBody
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Optional scrollable region for long content. When used, the Header and Footer
+ * stay pinned (shrink-0) and only this body scrolls; without it, the whole
+ * Content scrolls via its own max-height. This is a codefast enhancement over
+ * radix-vega, which has no scroll handling for tall dialogs.
+ *
+ * @since 0.3.16-canary.0
+ */
+type DialogBodyProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogBody({ className, ...props }: DialogBodyProps): JSX.Element {
+  return (
+    <div className={cn("-mx-6 min-h-0 flex-1 overflow-y-auto px-6", className)} data-slot="dialog-body" {...props} />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogFooter
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface DialogFooterProps extends ComponentProps<"div"> {
+  showCloseButton?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogFooter({ children, className, showCloseButton = false, ...props }: DialogFooterProps): JSX.Element {
+  return (
+    <div
+      className={cn("flex shrink-0 flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      data-slot="dialog-footer"
+      {...props}
+    >
+      {children}
+      {showCloseButton ? (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      ) : null}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogTitle({ className, ...props }: DialogTitleProps): JSX.Element {
+  return (
+    <DialogPrimitive.Title
+      className={cn("font-heading leading-none font-medium", className)}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogDescription({ className, ...props }: DialogDescriptionProps): JSX.Element {
+  return (
+    <DialogPrimitive.Description
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogClose
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function DialogClose({ ...props }: DialogCloseProps): JSX.Element {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+};
+export type {
+  DialogBodyProps,
+  DialogCloseProps,
+  DialogContentProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+};

package/src/components/direction.tsx

@@ -0,0 +1,32 @@
+import { Direction } from "radix-ui";
+import type { ComponentProps } from "react";
+
+/* -----------------------------------------------------------------------------
+ * Component: DirectionProvider
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.4.0-canary.4
+ */
+type DirectionProviderProps = ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: ComponentProps<typeof Direction.DirectionProvider>["dir"];
+};
+
+/**
+ * @since 0.4.0-canary.4
+ */
+function DirectionProvider({ dir, direction, children }: DirectionProviderProps) {
+  return <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>;
+}
+
+/**
+ * @since 0.4.0-canary.4
+ */
+const useDirection = Direction.useDirection;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { DirectionProvider, useDirection };
+export type { DirectionProviderProps };