@arolariu/components 0.5.0 → 1.1.0

package/src/components/ui/sheet.module.css

@@ -0,0 +1,138 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 0.55);
+  transition: opacity var(--ac-transition-normal);
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+}
+
+.backdrop[data-starting-style],
+.backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+.popup {
+  position: fixed;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-4);
+  padding: var(--ac-space-6);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.35);
+  transition: transform var(--ac-transition-normal), opacity var(--ac-transition-normal);
+}
+
+.popup[data-starting-style],
+.popup[data-ending-style] {
+  opacity: 0;
+}
+
+.top {
+  inset: 0 0 auto;
+  border-bottom: 1px solid var(--ac-border);
+}
+
+.top[data-starting-style],
+.top[data-ending-style] {
+  transform: translateY(-1rem);
+}
+
+.bottom {
+  inset: auto 0 0;
+  border-top: 1px solid var(--ac-border);
+}
+
+.bottom[data-starting-style],
+.bottom[data-ending-style] {
+  transform: translateY(1rem);
+}
+
+.left {
+  inset: 0 auto 0 0;
+  width: min(24rem, 85vw);
+  border-right: 1px solid var(--ac-border);
+}
+
+.left[data-starting-style],
+.left[data-ending-style] {
+  transform: translateX(-1rem);
+}
+
+.right {
+  inset: 0 0 0 auto;
+  width: min(24rem, 85vw);
+  border-left: 1px solid var(--ac-border);
+}
+
+.right[data-starting-style],
+.right[data-ending-style] {
+  transform: translateX(1rem);
+}
+
+.close {
+  position: absolute;
+  top: var(--ac-space-3);
+  right: var(--ac-space-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  border-radius: var(--ac-radius-sm);
+  background: transparent;
+  color: var(--ac-muted-foreground);
+  cursor: pointer;
+  outline: none;
+}
+
+.close:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.closeIcon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-2);
+  text-align: center;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--ac-space-2);
+  margin-top: auto;
+}
+
+@media (min-width: 640px) {
+  .header {
+    text-align: left;
+  }
+
+  .footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.title {
+  font-size: var(--ac-text-lg);
+  font-weight: 600;
+}
+
+.description {
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+}

package/src/components/ui/sheet.tsx

@@ -1,112 +1,444 @@
 "use client";
 
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import {cva, type VariantProps} from "class-variance-authority";
+import {Dialog as BaseDialog} from "@base-ui/react/dialog";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
 import {X} from "lucide-react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./sheet.module.css";
 
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({className, ...props}, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-neutral-950",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-);
+export type SheetSide = "top" | "right" | "bottom" | "left";
+
+interface SheetProps extends React.ComponentPropsWithRef<typeof BaseDialog.Root> {}
+
+interface SheetTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Trigger>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Enables child element composition instead of rendering the default wrapper.
+   * @default false
+   * @deprecated Prefer Base UI's `render` prop.
+   */
+  asChild?: boolean;
+}
+
+interface SheetOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Backdrop>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+
+export interface SheetContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Popup>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Controls which side of the viewport the sheet enters from.
+   * @default "right"
+   */
+  side?: SheetSide;
+}
+
+interface SheetHeaderProps extends React.ComponentPropsWithRef<"div"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Overrides the default rendered element while preserving component behavior.
+   * @default undefined
+   */
+  render?: useRender.RenderProp<Record<string, never>>;
+  /**
+   * Enables child element composition instead of rendering the default wrapper.
+   * @default false
+   * @deprecated Prefer Base UI's `render` prop.
+   */
+  asChild?: boolean;
+}
+
+interface SheetFooterProps extends React.ComponentPropsWithRef<"div"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Overrides the default rendered element while preserving component behavior.
+   * @default undefined
+   */
+  render?: useRender.RenderProp<Record<string, never>>;
+  /**
+   * Enables child element composition instead of rendering the default wrapper.
+   * @default false
+   * @deprecated Prefer Base UI's `render` prop.
+   */
+  asChild?: boolean;
+}
+
+interface SheetTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Title>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+
+interface SheetDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Description>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
 
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {}
+/**
+ * Coordinates sheet state and accessibility behavior.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <Sheet>Content</Sheet>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+function Sheet(props: Readonly<Sheet.Props>): React.ReactElement {
+  return <BaseDialog.Root {...props} />;
+}
 
-const SheetContent = React.forwardRef<React.ComponentRef<typeof SheetPrimitive.Content>, SheetContentProps>(
-  ({side = "right", className, children, ...props}, ref) => (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
+/**
+ * Provides the sheet portal container.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <SheetPortal>Content</SheetPortal>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+const SheetPortal = BaseDialog.Portal;
+/**
+ * Renders the sheet close.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <SheetClose>Content</SheetClose>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+const SheetClose = BaseDialog.Close;
+
+/**
+ * Renders the sheet trigger.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <SheetTrigger>Content</SheetTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTrigger.Props>(
+  (props: Readonly<SheetTrigger.Props>, ref): React.ReactElement => {
+    // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
+    const {asChild = false, children, className, render, ...otherProps} = props;
+    const renderProp = asChild && React.isValidElement(children) ? children : render;
+
+    return (
+      <BaseDialog.Trigger
         ref={ref}
-        className={cn(sheetVariants({side}), className)}
-        {...props}>
-        <SheetPrimitive.Close className='absolute top-4 right-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800'>
-          <X className='h-4 w-4' />
-          <span className='sr-only'>Close</span>
-        </SheetPrimitive.Close>
-        {children}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  ),
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: renderProp as never,
+          props: mergeProps({className}, {}),
+        })}>
+        {renderProp ? undefined : children}
+      </BaseDialog.Trigger>
+    );
+  },
 );
-SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
-    {...props}
-  />
-);
-SheetHeader.displayName = "SheetHeader";
+/**
+ * Renders the sheet overlay.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <SheetOverlay>Content</SheetOverlay>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+function SheetOverlay(props: Readonly<SheetOverlay.Props>): React.ReactElement {
+  const {className, render, ...otherProps} = props;
 
-const SheetFooter = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
+  return (
+    <BaseDialog.Backdrop
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.backdrop, className)}, {}),
+      })}
+    />
+  );
+}
+
+/**
+ * Renders the sheet content.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <SheetContent>Content</SheetContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+const SheetContent = React.forwardRef<React.ComponentRef<typeof BaseDialog.Popup>, SheetContent.Props>(
+  (props: Readonly<SheetContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, side = "right", ...otherProps} = props;
+
+    return (
+      <SheetPortal>
+        <SheetOverlay />
+        <BaseDialog.Popup
+          ref={ref}
+          {...otherProps}
+          render={useRender({
+            defaultTagName: "div",
+            render: render as never,
+            props: mergeProps({className: cn(styles.popup, styles[side], className)}, {}),
+          })}>
+          <BaseDialog.Close
+            aria-label='Close'
+            className={styles.close}>
+            <X className={styles.closeIcon} />
+          </BaseDialog.Close>
+          {children}
+        </BaseDialog.Popup>
+      </SheetPortal>
+    );
+  },
 );
-SheetFooter.displayName = "SheetFooter";
 
-const SheetTitle = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({className, ...props}, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-neutral-950 dark:text-neutral-50", className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ComponentRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({className, ...props}, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+/**
+ * Renders the sheet header.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <SheetHeader>Content</SheetHeader>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+function SheetHeader(props: Readonly<SheetHeader.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
+  const {asChild = false, children, className, render, ...otherProps} = props;
+  const renderProp = asChild && React.isValidElement(children) ? children : render;
+
+  return useRender({
+    defaultTagName: "div",
+    render: renderProp as never,
+    props: mergeProps({className: cn(styles.header, className)}, otherProps, {
+      children: renderProp ? undefined : children,
+    }),
+  });
+}
+
+/**
+ * Renders the sheet footer.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <SheetFooter>Content</SheetFooter>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+function SheetFooter(props: Readonly<SheetFooter.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
+  const {asChild = false, children, className, render, ...otherProps} = props;
+  const renderProp = asChild && React.isValidElement(children) ? children : render;
+
+  return useRender({
+    defaultTagName: "div",
+    render: renderProp as never,
+    props: mergeProps({className: cn(styles.footer, className)}, otherProps, {
+      children: renderProp ? undefined : children,
+    }),
+  });
+}
+
+/**
+ * Renders the sheet title.
+ *
+ * @remarks
+ * - Renders a `<h2>` element by default
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <SheetTitle>Content</SheetTitle>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+function SheetTitle(props: Readonly<SheetTitle.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseDialog.Title
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "h2",
+        render: render as never,
+        props: mergeProps({className: cn(styles.title, className)}, {}),
+      })}>
+      {children}
+    </BaseDialog.Title>
+  );
+}
+
+/**
+ * Renders the sheet description.
+ *
+ * @remarks
+ * - Renders a `<p>` element by default
+ * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <SheetDescription>Content</SheetDescription>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
+ */
+function SheetDescription(props: Readonly<SheetDescription.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseDialog.Description
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "p",
+        render: render as never,
+        props: mergeProps({className: cn(styles.description, className)}, {}),
+      })}>
+      {children}
+    </BaseDialog.Description>
+  );
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Sheet {
+  export type Props = SheetProps;
+  export type State = BaseDialog.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SheetTrigger {
+  export type Props = SheetTriggerProps;
+  export type State = BaseDialog.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SheetOverlay {
+  export type Props = SheetOverlayProps;
+  export type State = BaseDialog.Backdrop.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SheetContent {
+  export type Props = SheetContentProps;
+  export type State = BaseDialog.Popup.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SheetHeader {
+  export type Props = SheetHeaderProps;
+  export type State = Record<string, never>;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SheetFooter {
+  export type Props = SheetFooterProps;
+  export type State = Record<string, never>;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SheetTitle {
+  export type Props = SheetTitleProps;
+  export type State = BaseDialog.Title.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SheetDescription {
+  export type Props = SheetDescriptionProps;
+  export type State = BaseDialog.Description.State;
+}
+
+Sheet.displayName = "Sheet";
+SheetPortal.displayName = "SheetPortal";
+SheetClose.displayName = "SheetClose";
+SheetTrigger.displayName = "SheetTrigger";
+SheetOverlay.displayName = "SheetOverlay";
+SheetContent.displayName = "SheetContent";
+SheetHeader.displayName = "SheetHeader";
+SheetFooter.displayName = "SheetFooter";
+SheetTitle.displayName = "SheetTitle";
+SheetDescription.displayName = "SheetDescription";
 
 export {Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger};