@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/hover-card.tsx

@@ -1,29 +1,150 @@
 "use client";
 
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {PreviewCard as BasePreviewCard} from "@base-ui/react/preview-card";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./hover-card.module.css";
 
-const HoverCard = HoverCardPrimitive.Root;
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-const HoverCardContent = React.forwardRef<
-  React.ComponentRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({className, align = "center", sideOffset = 4, ...props}, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-[--radix-hover-card-content-transform-origin] rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-      className,
-    )}
-    {...props}
-  />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+interface HoverCardProps extends React.ComponentPropsWithRef<typeof BasePreviewCard.Root> {}
+interface HoverCardTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BasePreviewCard.Trigger>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+interface HoverCardContentProps extends Omit<React.ComponentPropsWithRef<typeof BasePreviewCard.Positioner>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Offsets the floating content from its anchor in pixels.
+   * @default 4
+   */
+  sideOffset?: number;
+}
+
+/**
+ * Coordinates hover card state and accessibility behavior.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/preview-card | Base UI Preview Card}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <HoverCard>Content</HoverCard>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/preview-card | Base UI Documentation}
+ */
+function HoverCard(props: Readonly<HoverCard.Props>): React.ReactElement {
+  return <BasePreviewCard.Root {...props} />;
+}
+
+/**
+ * Renders the hover card trigger.
+ *
+ * @remarks
+ * - Renders a `<a>` element by default
+ * - Built on {@link https://base-ui.com/react/components/preview-card | Base UI Preview Card}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <HoverCardTrigger>Content</HoverCardTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/preview-card | Base UI Documentation}
+ */
+const HoverCardTrigger = React.forwardRef<HTMLAnchorElement, HoverCardTrigger.Props>(
+  (props: Readonly<HoverCardTrigger.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BasePreviewCard.Trigger
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "a",
+          render: render as never,
+          props: mergeProps({className}, {}),
+        })}>
+        {children}
+      </BasePreviewCard.Trigger>
+    );
+  },
+);
+
+/**
+ * Renders the hover card content.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/preview-card | Base UI Preview Card}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <HoverCardContent>Content</HoverCardContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/preview-card | Base UI Documentation}
+ */
+const HoverCardContent = React.forwardRef<React.ComponentRef<typeof BasePreviewCard.Popup>, HoverCardContent.Props>(
+  (props: Readonly<HoverCardContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, sideOffset = 4, ...otherProps} = props;
+
+    return (
+      <BasePreviewCard.Portal>
+        <BasePreviewCard.Positioner
+          sideOffset={sideOffset}
+          {...otherProps}
+          render={useRender({
+            defaultTagName: "div",
+            props: mergeProps({className: styles.positioner}, {}),
+          })}>
+          <BasePreviewCard.Popup
+            ref={ref}
+            render={useRender({
+              defaultTagName: "div",
+              render: render as never,
+              props: mergeProps({className: cn(styles.popup, className)}, {}),
+            })}>
+            {children}
+          </BasePreviewCard.Popup>
+        </BasePreviewCard.Positioner>
+      </BasePreviewCard.Portal>
+    );
+  },
+);
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace HoverCard {
+  export type Props = HoverCardProps;
+  export type State = BasePreviewCard.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace HoverCardTrigger {
+  export type Props = HoverCardTriggerProps;
+  export type State = BasePreviewCard.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace HoverCardContent {
+  export type Props = HoverCardContentProps;
+  export type State = BasePreviewCard.Popup.State;
+}
+
+HoverCard.displayName = "HoverCard";
+HoverCardTrigger.displayName = "HoverCardTrigger";
+HoverCardContent.displayName = "HoverCardContent";
 
 export {HoverCard, HoverCardContent, HoverCardTrigger};

package/src/components/ui/input-group.module.css

@@ -0,0 +1,148 @@
+.group {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  min-height: var(--ac-size-default);
+  border: 1px solid var(--ac-input);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-background);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  transition: border-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+}
+
+.group:focus-within {
+  border-color: var(--ac-ring);
+  box-shadow: 0 0 0 1px var(--ac-ring);
+}
+
+.group:has(textarea) {
+  min-height: auto;
+  align-items: stretch;
+}
+
+.group:has([aria-invalid="true"]) {
+  border-color: var(--ac-destructive);
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ac-destructive), transparent 65%);
+}
+
+.group[data-disabled="true"] {
+  opacity: 0.5;
+}
+
+.group:has([data-align="block-start"]),
+.group:has([data-align="block-end"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.addon {
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  cursor: text;
+  user-select: none;
+}
+
+.addon > svg,
+.text > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.inlineStart {
+  order: -1;
+  padding-left: var(--ac-space-3);
+  padding-right: var(--ac-space-2);
+}
+
+.inlineEnd {
+  order: 1;
+  padding-left: var(--ac-space-2);
+  padding-right: var(--ac-space-3);
+}
+
+.blockStart {
+  order: -1;
+  width: 100%;
+  justify-content: flex-start;
+  padding: var(--ac-space-3) var(--ac-space-3) 0;
+}
+
+.blockEnd {
+  order: 1;
+  width: 100%;
+  justify-content: flex-start;
+  padding: 0 var(--ac-space-3) var(--ac-space-3);
+}
+
+.button {
+  flex-shrink: 0;
+  box-shadow: none;
+}
+
+.buttonXs {
+  height: var(--ac-size-sm);
+  padding: 0 var(--ac-space-2);
+  border-radius: calc(var(--ac-radius-md) - 2px);
+  font-size: var(--ac-text-xs);
+}
+
+.buttonSm {
+  height: var(--ac-size-default);
+  padding: 0 var(--ac-space-3);
+  border-radius: calc(var(--ac-radius-md) - 1px);
+}
+
+.buttonIconXs {
+  width: var(--ac-size-sm);
+  height: var(--ac-size-sm);
+  padding: 0;
+  border-radius: calc(var(--ac-radius-md) - 2px);
+}
+
+.buttonIconSm {
+  width: var(--ac-size-default);
+  height: var(--ac-size-default);
+  padding: 0;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+}
+
+.input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.input:focus-visible,
+.textarea:focus-visible {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.textarea {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: calc(var(--ac-size-default) * 2);
+  padding-top: var(--ac-space-3);
+  padding-bottom: var(--ac-space-3);
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  resize: none;
+}

package/src/components/ui/input-group.tsx

@@ -1,147 +1,271 @@
 "use client";
 
-/* eslint-disable */
-
-import {cva, type VariantProps} from "class-variance-authority";
 import * as React from "react";
 
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 import {Textarea} from "@/components/ui/textarea";
 import {cn} from "@/lib/utilities";
+import styles from "./input-group.module.css";
 
-function InputGroup({className, ...props}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot='input-group'
-      role='group'
-      className={cn(
-        "group/input-group relative flex w-full items-center rounded-md border border-neutral-200 shadow-xs transition-[color,box-shadow] outline-none dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30",
-        "h-9 has-[>textarea]:h-auto",
+/** Supported alignment options for {@link InputGroupAddon}. */
+export type InputGroupAddonAlign = "inline-start" | "inline-end" | "block-start" | "block-end";
 
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+/** Supported compact button sizes for {@link InputGroupButton}. */
+export type InputGroupButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm";
 
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-950 dark:has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-300",
+/**
+ * Props for the {@link InputGroup} component.
+ */
+export type InputGroupProps = React.ComponentPropsWithoutRef<"div">;
 
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:border-red-500 has-[[data-slot][aria-invalid=true]]:ring-red-500/20 dark:has-[[data-slot][aria-invalid=true]]:border-red-900 dark:dark:has-[[data-slot][aria-invalid=true]]:ring-red-900/40 dark:has-[[data-slot][aria-invalid=true]]:ring-red-500/40 dark:has-[[data-slot][aria-invalid=true]]:ring-red-900/20",
+/**
+ * Props for the {@link InputGroupAddon} component.
+ */
+export interface InputGroupAddonProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Position of the addon relative to the input control. @default "inline-start" */
+  align?: InputGroupAddonAlign;
+}
 
-        className,
-      )}
-      {...props}
-    />
-  );
+/**
+ * Props for the {@link InputGroupButton} component.
+ */
+export interface InputGroupButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Button>, "size"> {
+  /** Compact button size used within the group chrome. @default "xs" */
+  size?: InputGroupButtonSize;
+}
+
+/**
+ * Props for the {@link InputGroupText} component.
+ */
+export type InputGroupTextProps = React.ComponentPropsWithoutRef<"span">;
+
+/**
+ * Props for the {@link InputGroupInput} component.
+ */
+export type InputGroupInputProps = React.ComponentPropsWithoutRef<"input">;
+
+/**
+ * Props for the {@link InputGroupTextarea} component.
+ */
+export type InputGroupTextareaProps = React.ComponentPropsWithoutRef<"textarea">;
+
+function getAddonAlignClass(align: InputGroupAddonAlign): string {
+  switch (align) {
+    case "block-end": {
+      return styles.blockEnd;
+    }
+    case "block-start": {
+      return styles.blockStart;
+    }
+    case "inline-end": {
+      return styles.inlineEnd;
+    }
+    default: {
+      return styles.inlineStart;
+    }
+  }
+}
+
+function getButtonSizeClass(size: InputGroupButtonSize): string {
+  switch (size) {
+    case "icon-sm": {
+      return styles.buttonIconSm;
+    }
+    case "icon-xs": {
+      return styles.buttonIconXs;
+    }
+    case "sm": {
+      return styles.buttonSm;
+    }
+    default: {
+      return styles.buttonXs;
+    }
+  }
 }
 
-const inputGroupAddonVariants = cva(
-  "text-neutral-500 flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 dark:text-neutral-400",
-  {
-    variants: {
-      align: {
-        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  },
+/**
+ * Creates a composable shell for grouped text inputs and controls.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupInput />
+ * </InputGroup>
+ * ```
+ *
+ * @see {@link InputGroupProps} for available props
+ */
+const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  ({className, ...props}: Readonly<InputGroupProps>, ref): React.JSX.Element => (
+    <div
+      ref={ref}
+      role='group'
+      data-slot='input-group'
+      className={cn(styles.group, className)}
+      {...props}
+    />
+  ),
 );
 
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
+/**
+ * Renders supplementary content around an input group control.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon align='inline-end'>.com</InputGroupAddon>
+ * ```
+ *
+ * @see {@link InputGroupAddonProps} for available props
+ */
+const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(
+  ({className, align = "inline-start", onClick, ...props}: Readonly<InputGroupAddonProps>, ref): React.JSX.Element => (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- clicking the addon focuses the related control.
     <div
+      ref={ref}
       role='group'
       data-slot='input-group-addon'
       data-align={align}
-      className={cn(inputGroupAddonVariants({align}), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
+      className={cn(styles.addon, getAddonAlignClass(align), className)}
+      onClick={(event): void => {
+        if ((event.target as HTMLElement).closest("button")) {
+          onClick?.(event);
+          return;
+        }
+
+        onClick?.(event);
+
+        if (event.defaultPrevented) {
           return;
         }
-        e.currentTarget.parentElement?.querySelector("input")?.focus();
+
+        event.currentTarget.parentElement?.querySelector<HTMLInputElement | HTMLTextAreaElement>("input, textarea")?.focus();
       }}
       {...props}
     />
-  );
-}
+  ),
+);
 
-const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
-  variants: {
-    size: {
-      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-    },
-  },
-  defaultVariants: {
-    size: "xs",
-  },
-});
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) {
-  return (
+/**
+ * Renders a compact button matched to input group dimensions.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a wrapped `Button` component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputGroupButton size='sm'>Search</InputGroupButton>
+ * ```
+ *
+ * @see {@link InputGroupButtonProps} for available props
+ */
+const InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(
+  ({className, type = "button", variant = "ghost", size = "xs", ...props}: Readonly<InputGroupButtonProps>, ref): React.JSX.Element => (
     <Button
+      ref={ref}
       type={type}
       data-size={size}
       variant={variant}
-      className={cn(inputGroupButtonVariants({size}), className)}
+      className={cn(styles.button, getButtonSizeClass(size), className)}
       {...props}
     />
-  );
-}
+  ),
+);
 
-function InputGroupText({className, ...props}: React.ComponentProps<"span">) {
-  return (
+/**
+ * Displays static inline text within an input group.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputGroupText>@</InputGroupText>
+ * ```
+ *
+ * @see {@link InputGroupTextProps} for available props
+ */
+const InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(
+  ({className, ...props}: Readonly<InputGroupTextProps>, ref): React.JSX.Element => (
     <span
-      className={cn(
-        "flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      ref={ref}
+      className={cn(styles.text, className)}
       {...props}
     />
-  );
-}
+  ),
+);
 
-function InputGroupInput({className, ...props}: React.ComponentProps<"input">) {
-  return (
+/**
+ * Renders the primary input control inside an input group.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a wrapped `Input` component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputGroupInput placeholder='Search...' />
+ * ```
+ *
+ * @see {@link InputGroupInputProps} for available props
+ */
+const InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(
+  ({className, ...props}: Readonly<InputGroupInputProps>, ref): React.JSX.Element => (
     <Input
+      ref={ref}
       data-slot='input-group-control'
-      className={cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className)}
+      className={cn(styles.input, className)}
       {...props}
     />
-  );
-}
+  ),
+);
 
-function InputGroupTextarea({className, ...props}: React.ComponentProps<"textarea">) {
-  return (
+/**
+ * Renders a textarea control inside an input group.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a wrapped `Textarea` component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputGroupTextarea rows={4} />
+ * ```
+ *
+ * @see {@link InputGroupTextareaProps} for available props
+ */
+const InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(
+  ({className, ...props}: Readonly<InputGroupTextareaProps>, ref): React.JSX.Element => (
     <Textarea
+      ref={ref}
       data-slot='input-group-control'
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className,
-      )}
+      className={cn(styles.textarea, className)}
       {...props}
     />
-  );
-}
+  ),
+);
+
+InputGroup.displayName = "InputGroup";
+InputGroupAddon.displayName = "InputGroupAddon";
+InputGroupButton.displayName = "InputGroupButton";
+InputGroupText.displayName = "InputGroupText";
+InputGroupInput.displayName = "InputGroupInput";
+InputGroupTextarea.displayName = "InputGroupTextarea";
 
 export {InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea};