@arolariu/components 0.5.0 → 1.0.0

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

@@ -0,0 +1,76 @@
+.root {
+  display: inline-flex;
+  width: fit-content;
+  align-items: stretch;
+}
+
+.root > * {
+  flex-shrink: 0;
+}
+
+.root > *:focus-visible {
+  position: relative;
+  z-index: 1;
+}
+
+.root > input {
+  flex: 1 1 auto;
+}
+
+.horizontal > *:not(:first-child) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.horizontal > *:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.vertical {
+  flex-direction: column;
+  width: 100%;
+}
+
+.vertical > *:not(:first-child) {
+  margin-top: -1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.vertical > *:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+  padding: 0 var(--ac-space-4);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-muted);
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.text svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.separator {
+  position: relative;
+  margin: 0 !important;
+  align-self: stretch;
+  background-color: var(--ac-border);
+}
+
+.separator[data-orientation="vertical"] {
+  height: auto;
+}

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

@@ -1,69 +1,158 @@
 "use client";
 
-import {Slot} from "@radix-ui/react-slot";
-import {cva, type VariantProps} from "class-variance-authority";
 import * as React from "react";
 
 import {Separator} from "@/components/ui/separator";
 import {cn} from "@/lib/utilities";
+import styles from "./button-group.module.css";
 
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  },
-);
+/** Supported layout directions for {@link ButtonGroup}. */
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+
+interface ButtonGroupVariantOptions {
+  /** Orientation used to resolve the root style classes. @default "horizontal" */
+  orientation?: ButtonGroupOrientation;
+  /** Additional classes merged into the generated variant string. @default undefined */
+  className?: string;
+}
 
-function ButtonGroup({className, orientation, ...props}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
+/**
+ * Props for the {@link ButtonGroup} component.
+ */
+export interface ButtonGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Arrangement of grouped controls. @default "horizontal" */
+  orientation?: ButtonGroupOrientation;
+}
+
+/**
+ * Props for the {@link ButtonGroupText} component.
+ */
+export interface ButtonGroupTextProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Enables rendering an existing div-compatible child element. @default false */
+  asChild?: boolean;
+}
+
+/**
+ * Props for the {@link ButtonGroupSeparator} component.
+ */
+export type ButtonGroupSeparatorProps = React.ComponentPropsWithoutRef<typeof Separator>;
+
+/**
+ * Returns the CSS class list for a button group root.
+ *
+ * @param options - Variant options used to derive the generated class string.
+ * @returns The merged class name string for the requested orientation.
+ *
+ * @example
+ * ```tsx
+ * const className = buttonGroupVariants({orientation: "vertical"});
+ * ```
+ */
+function buttonGroupVariants({orientation = "horizontal", className}: Readonly<ButtonGroupVariantOptions> = {}): string {
+  return cn(styles.root, orientation === "vertical" ? styles.vertical : styles.horizontal, className);
+}
+
+/**
+ * Aligns related buttons into a single visual control group.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <button type='button'>Left</button>
+ *   <button type='button'>Right</button>
+ * </ButtonGroup>
+ * ```
+ *
+ * @see {@link ButtonGroupProps} for available props
+ */
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({className, orientation = "horizontal", ...props}: Readonly<ButtonGroupProps>, ref): React.JSX.Element => (
     <div
+      ref={ref}
       role='group'
       data-slot='button-group'
       data-orientation={orientation}
-      className={cn(buttonGroupVariants({orientation}), className)}
+      className={buttonGroupVariants({orientation, className})}
       {...props}
     />
-  );
-}
+  ),
+);
 
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  asChild?: boolean;
-}) {
-  const Comp = asChild ? Slot : "div";
-
-  return (
-    <Comp
-      className={cn(
-        "flex items-center gap-2 rounded-md border border-neutral-200 bg-neutral-100 px-4 text-sm font-medium shadow-xs dark:border-neutral-800 dark:bg-neutral-800 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+/**
+ * Adds descriptive text content within a button group layout.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element by default
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroupText>Actions</ButtonGroupText>
+ * ```
+ *
+ * @see {@link ButtonGroupTextProps} for available props
+ */
+const ButtonGroupText = React.forwardRef<HTMLDivElement, ButtonGroupTextProps>(
+  ({className, asChild = false, children, ...props}: Readonly<ButtonGroupTextProps>, ref): React.JSX.Element => {
+    const mergedClassName = cn(styles.text, className);
+
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<React.ComponentPropsWithoutRef<"div"> & {ref?: React.Ref<HTMLDivElement>}>;
+
+      // eslint-disable-next-line react-x/no-clone-element -- replaces Radix Slot while preserving asChild prop merging
+      return React.cloneElement(child, {
+        ...props,
+        ref,
+        className: cn(mergedClassName, child.props.className),
+      });
+    }
 
-function ButtonGroupSeparator({className, orientation = "vertical", ...props}: React.ComponentProps<typeof Separator>) {
-  return (
+    return (
+      <div
+        ref={ref}
+        className={mergedClassName}
+        {...props}>
+        {children}
+      </div>
+    );
+  },
+);
+
+/**
+ * Inserts a separator between grouped controls.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a wrapped `Separator` component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroupSeparator orientation='vertical' />
+ * ```
+ *
+ * @see {@link ButtonGroupSeparatorProps} for available props
+ */
+const ButtonGroupSeparator = React.forwardRef<HTMLDivElement, ButtonGroupSeparatorProps>(
+  ({className, orientation = "vertical", ...props}: Readonly<ButtonGroupSeparatorProps>, ref): React.JSX.Element => (
     <Separator
+      ref={ref}
       data-slot='button-group-separator'
       orientation={orientation}
-      className={cn("relative !m-0 self-stretch bg-neutral-200 data-[orientation=vertical]:h-auto dark:bg-neutral-800", className)}
+      className={cn(styles.separator, className)}
       {...props}
     />
-  );
-}
+  ),
+);
+
+ButtonGroup.displayName = "ButtonGroup";
+ButtonGroupText.displayName = "ButtonGroupText";
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
 
 export {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants};

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

@@ -0,0 +1,138 @@
+.button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ac-space-2);
+  white-space: nowrap;
+  border-radius: var(--ac-radius-md);
+  font-size: var(--ac-text-xs);
+  line-height: 1.6;
+  font-weight: 500;
+  transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast),
+    border-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: -1px;
+  }
+
+  &[data-disabled],
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  /* Icon children */
+  & svg {
+    pointer-events: none;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+}
+
+/* Variants */
+.default {
+  background-color: var(--ac-primary);
+  color: var(--ac-primary-foreground);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: color-mix(in oklch, var(--ac-primary), transparent 10%);
+    }
+  }
+}
+
+.destructive {
+  background-color: var(--ac-destructive);
+  color: var(--ac-background);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: color-mix(in oklch, var(--ac-destructive), transparent 10%);
+    }
+  }
+}
+
+.outline {
+  border: 1px solid var(--ac-border);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: var(--ac-accent);
+      color: var(--ac-accent-foreground);
+    }
+  }
+}
+
+.secondary {
+  background-color: var(--ac-secondary);
+  color: var(--ac-secondary-foreground);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: color-mix(in oklch, var(--ac-secondary), transparent 20%);
+    }
+  }
+}
+
+.ghost {
+  background-color: transparent;
+  color: var(--ac-foreground);
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: var(--ac-accent);
+      color: var(--ac-accent-foreground);
+    }
+  }
+}
+
+.link {
+  background-color: transparent;
+  color: var(--ac-foreground);
+  text-underline-offset: 4px;
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      text-decoration: underline;
+    }
+  }
+}
+
+/* Sizes — Mira compact */
+.sizeDefault {
+  height: var(--ac-size-default);
+  padding: var(--ac-space-1) var(--ac-space-3);
+}
+
+.sizeSm {
+  height: var(--ac-size-md);
+  padding: var(--ac-space-1) var(--ac-space-2);
+  font-size: var(--ac-text-xs);
+  border-radius: var(--ac-radius-sm);
+}
+
+.sizeLg {
+  height: var(--ac-size-lg);
+  padding: var(--ac-space-1) var(--ac-space-4);
+  font-size: var(--ac-text-sm);
+  border-radius: var(--ac-radius-md);
+}
+
+.sizeIcon {
+  width: var(--ac-size-default);
+  height: var(--ac-size-default);
+  padding: 0;
+}

package/src/components/ui/button.tsx

@@ -1,55 +1,173 @@
 "use client";
 
-import {Slot} from "@radix-ui/react-slot";
-import {cva, type VariantProps} from "class-variance-authority";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./button.module.css";
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
-        destructive:
-          "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
-        outline:
-          "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        secondary:
-          "bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+const variantStyles: Record<ButtonVariant, string> = {
+  default: styles.default!,
+  destructive: styles.destructive!,
+  outline: styles.outline!,
+  secondary: styles.secondary!,
+  ghost: styles.ghost!,
+  link: styles.link!,
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  default: styles.sizeDefault!,
+  sm: styles.sizeSm!,
+  lg: styles.sizeLg!,
+  icon: styles.sizeIcon!,
+};
+
+export type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+export type ButtonSize = "default" | "sm" | "lg" | "icon";
+
+/**
+ * Serializable button state exposed to Base UI render callbacks.
+ */
+export interface ButtonState extends Record<string, unknown> {
+  variant: ButtonVariant;
+  size: ButtonSize;
+  disabled: boolean;
+}
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface ButtonVariantOptions {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+}
+
+/**
+ * Props for the shared button component.
+ */
+export interface ButtonProps extends Omit<React.ComponentPropsWithRef<"button">, "children" | "className" | "disabled"> {
+  /**
+   * Visual style variant.
+   * @default "default"
+   */
+  variant?: ButtonVariant;
+  /**
+   * Size preset.
+   * @default "default"
+   */
+  size?: ButtonSize;
+  /**
+   * Whether the button should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS classes merged with the button styles.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Custom element or render callback used to replace the default `<button>`.
+   * @default undefined
+   */
+  render?: useRender.RenderProp<ButtonState>;
+  /**
+   * Backward-compatible child-slot API.
+   * Converts the single child element to the `render` prop internally.
+   * @default false
+   */
   asChild?: boolean;
+  /**
+   * Button contents when `render` is not provided.
+   * @default undefined
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Builds the composed class list for the shared button component.
+ */
+function buttonVariants({variant = "default", size = "default", className}: Readonly<ButtonVariantOptions> = {}): string {
+  return cn(styles.button, variantStyles[variant], sizeStyles[size], className);
+}
+
+function isIntrinsicButtonElement(renderProp: ButtonProps["render"]): boolean {
+  return React.isValidElement(renderProp) && typeof renderProp.type === "string" && renderProp.type === "button";
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({className, variant, size, asChild = false, ...props}, ref) => {
-  const Comp = asChild ? Slot : "button";
-  return (
-    <Comp
-      className={cn(buttonVariants({variant, size, className}))}
-      ref={ref}
-      {...props}
-    />
-  );
+function createNonNativeInteractionProps(disabled: boolean): React.HTMLAttributes<HTMLElement> {
+  return {
+    "aria-disabled": disabled || undefined,
+    role: "button",
+    tabIndex: disabled ? -1 : undefined,
+    onClick(event) {
+      if (!disabled) {
+        return;
+      }
+
+      event.preventDefault();
+
+      if ("preventBaseUIHandler" in event && typeof event.preventBaseUIHandler === "function") {
+        event.preventBaseUIHandler();
+      }
+    },
+    onKeyDown(event) {
+      if (!disabled || (event.key !== "Enter" && event.key !== " ")) {
+        return;
+      }
+
+      event.preventDefault();
+
+      if ("preventBaseUIHandler" in event && typeof event.preventBaseUIHandler === "function") {
+        event.preventBaseUIHandler();
+      }
+    },
+  };
+}
+
+/**
+ * A button component that triggers actions.
+ * Built with Base UI's canonical `useRender` + `mergeProps` composition pattern.
+ *
+ * @remarks
+ * Renders a native `<button>` by default. Use the `render` prop to compose the
+ * button styles and shared behavior with other elements or components. The
+ * deprecated `asChild` prop is still supported and internally converted to
+ * `render` for backward compatibility.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default" size="sm">Click me</Button>
+ * <Button render={<a href="/dashboard" />}>Go to dashboard</Button>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/button | Base UI Button}
+ */
+const Button = React.forwardRef<HTMLButtonElement, Button.Props>((props: Readonly<Button.Props>, ref): React.ReactElement => {
+  const {render, asChild = false, variant = "default", size = "default", disabled = false, className, children, ...otherProps} = props;
+
+  const state: Button.State = {variant, size, disabled};
+  const composedClassName = buttonVariants({variant, size, className});
+  const renderProp = asChild && React.isValidElement(children) ? children : render;
+  const shouldRenderNativeButton = !renderProp || isIntrinsicButtonElement(renderProp);
+  const typeProps: Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> = shouldRenderNativeButton ? {type: "button"} : {};
+  const interactionProps = shouldRenderNativeButton ? {disabled} : createNonNativeInteractionProps(disabled);
+
+  return useRender<Button.State, HTMLButtonElement>({
+    defaultTagName: "button",
+    ref,
+    render: renderProp,
+    state,
+    props: mergeProps<"button">({className: composedClassName}, typeProps, otherProps, interactionProps, {
+      children: renderProp ? undefined : children,
+    }),
+  });
 });
 Button.displayName = "Button";
 
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Button {
+  export type State = ButtonState;
+  export type Props = ButtonProps;
+}
+
 export {Button, buttonVariants};