@arolariu/components 0.5.0 → 1.0.0

package/src/components/ui/drawer.tsx

@@ -1,95 +1,423 @@
 "use client";
 
+import {Drawer as BaseDrawer} from "@base-ui/react/drawer";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
-import {Drawer as DrawerPrimitive} from "vaul";
 
 import {cn} from "@/lib/utilities";
+import styles from "./drawer.module.css";
 
-const Drawer = ({shouldScaleBackground = true, ...props}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-);
-Drawer.displayName = "Drawer";
+interface DrawerProps extends React.ComponentPropsWithRef<typeof BaseDrawer.Root> {}
 
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = DrawerPrimitive.Portal;
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({className, ...props}, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({className, children, ...props}, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950",
-        className,
-      )}
-      {...props}>
-      <div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-neutral-100 dark:bg-neutral-800' />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-));
-DrawerContent.displayName = "DrawerContent";
+interface DrawerTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Trigger>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+
+interface DrawerOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Backdrop>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+
+interface DrawerContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Popup>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+
+interface DrawerHeaderProps 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 DrawerFooterProps 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 DrawerTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Title>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+
+interface DrawerDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Description>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
 
-const DrawerHeader = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
+/**
+ * Coordinates drawer state and accessibility behavior.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <Drawer>Content</Drawer>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+function Drawer(props: Readonly<Drawer.Props>): React.ReactElement {
+  return <BaseDrawer.Root {...props} />;
+}
+
+/**
+ * Renders the drawer trigger.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerTrigger>Content</DrawerTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+const DrawerTrigger = React.forwardRef<HTMLButtonElement, DrawerTrigger.Props>(
+  (props: Readonly<DrawerTrigger.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseDrawer.Trigger
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: render as never,
+          props: mergeProps({className}, {}),
+        })}>
+        {children}
+      </BaseDrawer.Trigger>
+    );
+  },
 );
-DrawerHeader.displayName = "DrawerHeader";
 
-const DrawerFooter = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
+/**
+ * Provides the drawer portal container.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerPortal>Content</DrawerPortal>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+const DrawerPortal: typeof BaseDrawer.Portal & {displayName?: string} = BaseDrawer.Portal;
+/**
+ * Renders the drawer close.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerClose>Content</DrawerClose>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+const DrawerClose: typeof BaseDrawer.Close & {displayName?: string} = BaseDrawer.Close;
+
+/**
+ * Renders the drawer overlay.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerOverlay>Content</DrawerOverlay>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+function DrawerOverlay(props: Readonly<DrawerOverlay.Props>): React.ReactElement {
+  const {className, render, ...otherProps} = props;
+
+  return (
+    <BaseDrawer.Backdrop
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.backdrop, className)}, {}),
+      })}
+    />
+  );
+}
+
+/**
+ * Renders the drawer content.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerContent>Content</DrawerContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+const DrawerContent = React.forwardRef<React.ComponentRef<typeof BaseDrawer.Popup>, DrawerContent.Props>(
+  (props: Readonly<DrawerContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <DrawerPortal>
+        <DrawerOverlay />
+        <BaseDrawer.Popup
+          ref={ref}
+          {...otherProps}
+          render={useRender({
+            defaultTagName: "div",
+            render: render as never,
+            props: mergeProps({className: cn(styles.popup, className)}, {}),
+          })}>
+          <div className={styles.handle} />
+          <BaseDrawer.Content className={styles.content}>{children}</BaseDrawer.Content>
+        </BaseDrawer.Popup>
+      </DrawerPortal>
+    );
+  },
 );
-DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = React.forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({className, ...props}, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn("text-lg leading-none font-semibold tracking-tight", className)}
-    {...props}
-  />
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
-  React.ComponentRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({className, ...props}, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
-    {...props}
-  />
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+/**
+ * Renders the drawer header.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerHeader>Content</DrawerHeader>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+function DrawerHeader(props: Readonly<DrawerHeader.Props>): React.ReactElement {
+  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 drawer footer.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerFooter>Content</DrawerFooter>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+function DrawerFooter(props: Readonly<DrawerFooter.Props>): React.ReactElement {
+  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 drawer title.
+ *
+ * @remarks
+ * - Renders a `<h2>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerTitle>Content</DrawerTitle>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+function DrawerTitle(props: Readonly<DrawerTitle.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseDrawer.Title
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "h2",
+        render: render as never,
+        props: mergeProps({className: cn(styles.title, className)}, {}),
+      })}>
+      {children}
+    </BaseDrawer.Title>
+  );
+}
+
+/**
+ * Renders the drawer description.
+ *
+ * @remarks
+ * - Renders a `<p>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerDescription>Content</DrawerDescription>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+function DrawerDescription(props: Readonly<DrawerDescription.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseDrawer.Description
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "p",
+        render: render as never,
+        props: mergeProps({className: cn(styles.description, className)}, {}),
+      })}>
+      {children}
+    </BaseDrawer.Description>
+  );
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Drawer {
+  export type Props = DrawerProps;
+  export type State = BaseDrawer.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace DrawerTrigger {
+  export type Props = DrawerTriggerProps;
+  export type State = BaseDrawer.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace DrawerOverlay {
+  export type Props = DrawerOverlayProps;
+  export type State = BaseDrawer.Backdrop.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace DrawerContent {
+  export type Props = DrawerContentProps;
+  export type State = BaseDrawer.Popup.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace DrawerHeader {
+  export type Props = DrawerHeaderProps;
+  export type State = Record<string, never>;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace DrawerFooter {
+  export type Props = DrawerFooterProps;
+  export type State = Record<string, never>;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace DrawerTitle {
+  export type Props = DrawerTitleProps;
+  export type State = BaseDrawer.Title.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace DrawerDescription {
+  export type Props = DrawerDescriptionProps;
+  export type State = BaseDrawer.Description.State;
+}
+
+Drawer.displayName = "Drawer";
+DrawerTrigger.displayName = "DrawerTrigger";
+DrawerPortal.displayName = "DrawerPortal";
+DrawerClose.displayName = "DrawerClose";
+DrawerOverlay.displayName = "DrawerOverlay";
+DrawerContent.displayName = "DrawerContent";
+DrawerHeader.displayName = "DrawerHeader";
+DrawerFooter.displayName = "DrawerFooter";
+DrawerTitle.displayName = "DrawerTitle";
+DrawerDescription.displayName = "DrawerDescription";
 
 export {
   Drawer,

package/src/components/ui/dropdown-menu.module.css

@@ -0,0 +1,113 @@
+.positioner {
+  z-index: 50;
+}
+
+.content {
+  min-width: 12rem;
+  max-height: var(--available-height);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--ac-space-1);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-popover);
+  color: var(--ac-popover-foreground);
+  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.35);
+  transform-origin: var(--transform-origin);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+}
+
+.content[data-starting-style],
+.content[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+  width: 100%;
+  min-height: var(--ac-size-default);
+  padding: var(--ac-space-1) var(--ac-space-2);
+  border-radius: var(--ac-radius-sm);
+  outline: none;
+  color: inherit;
+  font-size: var(--ac-text-sm);
+  cursor: default;
+  user-select: none;
+}
+
+.item[data-highlighted] {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.subTrigger {
+  padding-right: var(--ac-space-3);
+}
+
+.subTrigger[data-popup-open] {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.subTriggerIcon {
+  width: 1rem;
+  height: 1rem;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.indicatorItem {
+  padding-left: calc(var(--ac-space-2) + 1.25rem);
+}
+
+.indicatorSlot {
+  position: absolute;
+  left: var(--ac-space-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+
+.indicatorIcon,
+.radioIndicatorIcon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.radioIndicatorIcon {
+  fill: currentcolor;
+}
+
+.label {
+  padding: var(--ac-space-1) var(--ac-space-2);
+  font-size: var(--ac-text-sm);
+  font-weight: 600;
+}
+
+.inset {
+  padding-left: calc(var(--ac-space-2) + 1.25rem);
+}
+
+.separator {
+  height: 1px;
+  margin: var(--ac-space-1) calc(var(--ac-space-1) * -1);
+  background-color: var(--ac-border);
+}
+
+.shortcut {
+  margin-left: auto;
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-xs);
+  letter-spacing: 0.08em;
+}