@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/popover.tsx

@@ -1,33 +1,215 @@
 "use client";
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Popover as BasePopover} from "@base-ui/react/popover";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./popover.module.css";
 
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({className, align = "center", sideOffset = 4, ...props}, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.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-72 origin-[--radix-popover-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}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+interface PopoverProps extends React.ComponentPropsWithRef<typeof BasePopover.Root> {}
+
+interface PopoverTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BasePopover.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 PopoverAnchorProps 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 PopoverContentProps extends Omit<React.ComponentPropsWithRef<typeof BasePopover.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 popover state and accessibility behavior.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/popover | Base UI Popover}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <Popover>Content</Popover>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/popover | Base UI Documentation}
+ */
+function Popover(props: Readonly<Popover.Props>): React.ReactElement {
+  return <BasePopover.Root {...props} />;
+}
+
+/**
+ * Renders the popover trigger.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/popover | Base UI Popover}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>Content</PopoverTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/popover | Base UI Documentation}
+ */
+const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTrigger.Props>(
+  (props: Readonly<PopoverTrigger.Props>, ref): React.ReactElement => {
+    // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild support is part of the public API.
+    const {asChild = false, children, className, render, ...otherProps} = props;
+    const renderProp = asChild && React.isValidElement(children) ? children : render;
+
+    return (
+      <BasePopover.Trigger
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: renderProp as never,
+          props: mergeProps({className}, {}),
+        })}>
+        {renderProp ? undefined : children}
+      </BasePopover.Trigger>
+    );
+  },
+);
+
+/**
+ * Renders the popover anchor.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/popover | Base UI Popover}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <PopoverAnchor>Content</PopoverAnchor>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/popover | Base UI Documentation}
+ */
+function PopoverAnchor(props: Readonly<PopoverAnchor.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild support is part of the public 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.anchor, className)}, otherProps, {
+      children: renderProp ? undefined : children,
+    }),
+  });
+}
+
+/**
+ * Renders the popover content.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/popover | Base UI Popover}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent>Content</PopoverContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/popover | Base UI Documentation}
+ */
+const PopoverContent = React.forwardRef<React.ComponentRef<typeof BasePopover.Popup>, PopoverContent.Props>(
+  (props: Readonly<PopoverContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, sideOffset = 4, ...otherProps} = props;
+
+    return (
+      <BasePopover.Portal>
+        <BasePopover.Positioner
+          sideOffset={sideOffset}
+          {...otherProps}
+          render={useRender({
+            defaultTagName: "div",
+            props: mergeProps({className: styles.positioner}, {}),
+          })}>
+          <BasePopover.Popup
+            ref={ref}
+            render={useRender({
+              defaultTagName: "div",
+              render: render as never,
+              props: mergeProps({className: cn(styles.popup, className)}, {}),
+            })}>
+            {children}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    );
+  },
+);
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Popover {
+  export type Props = PopoverProps;
+  export type State = BasePopover.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace PopoverTrigger {
+  export type Props = PopoverTriggerProps;
+  export type State = BasePopover.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace PopoverAnchor {
+  export type Props = PopoverAnchorProps;
+  export type State = Record<string, never>;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace PopoverContent {
+  export type Props = PopoverContentProps;
+  export type State = BasePopover.Popup.State;
+}
+
+Popover.displayName = "Popover";
+PopoverTrigger.displayName = "PopoverTrigger";
+PopoverAnchor.displayName = "PopoverAnchor";
+PopoverContent.displayName = "PopoverContent";
 
 export {Popover, PopoverAnchor, PopoverContent, PopoverTrigger};

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

@@ -0,0 +1,15 @@
+.track {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  background-color: var(--ac-secondary);
+}
+
+.indicator {
+  height: 100%;
+  border-radius: 9999px;
+  background-color: var(--ac-primary);
+  transition: width 200ms ease;
+}

package/src/components/ui/progress.tsx

@@ -1,24 +1,61 @@
 "use client";
 
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import {Progress as BaseProgress} from "@base-ui/react/progress";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./progress.module.css";
 
-const Progress = React.forwardRef<
-  React.ComponentRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({className, value, ...props}, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20", className)}
-    {...props}>
-    <ProgressPrimitive.Indicator
-      className='h-full w-full flex-1 bg-neutral-900 transition-all dark:bg-neutral-50'
-      style={{transform: `translateX(-${100 - (value || 0)}%)`}}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+/**
+ * Props for the shared progress wrapper.
+ */
+export interface ProgressProps extends Omit<React.ComponentPropsWithRef<typeof BaseProgress.Root>, "value"> {
+  /** Additional CSS classes merged with the progress track styles. @default undefined */
+  className?: string;
+  /** The current completion percentage or normalized value rendered by the progress bar. @default 0 */
+  value?: number;
+}
+
+/**
+ * Visualizes task completion with a styled track and animated indicator.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/progress | Base UI Progress}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Progress value={64} />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/progress | Base UI Documentation}
+ */
+function Progress(props: Readonly<Progress.Props>): React.ReactElement {
+  const {className, render, value = 0, ...otherProps} = props;
+
+  return (
+    <BaseProgress.Root
+      value={value}
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+      })}>
+      <BaseProgress.Track className={cn(styles.track, className)}>
+        <BaseProgress.Indicator className={styles.indicator} />
+      </BaseProgress.Track>
+    </BaseProgress.Root>
+  );
+}
+Progress.displayName = "Progress";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Progress {
+  export type Props = ProgressProps;
+  export type State = BaseProgress.Root.State;
+}
 
 export {Progress};

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

@@ -0,0 +1,41 @@
+.group {
+  display: grid;
+  gap: var(--ac-space-2);
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--ac-primary);
+  border-radius: 999px;
+  background-color: var(--ac-background);
+  color: var(--ac-primary);
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--ac-transition-fast), background-color var(--ac-transition-fast);
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: 0.625rem;
+  height: 0.625rem;
+  fill: currentcolor;
+}

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

@@ -1,43 +1,100 @@
 "use client";
 
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Radio} from "@base-ui/react/radio";
+import {RadioGroup as BaseRadioGroup} from "@base-ui/react/radio-group";
+import {useRender} from "@base-ui/react/use-render";
 import {Circle} from "lucide-react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./radio-group.module.css";
 
-const RadioGroup = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({className, ...props}, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({className, ...props}, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-neutral-200 border-neutral-900 text-neutral-900 shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:text-neutral-50 dark:focus-visible:ring-neutral-300",
-        className,
-      )}
-      {...props}>
-      <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
-        <Circle className='fill-primary h-3.5 w-3.5' />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+type RadioGroupProps = React.ComponentPropsWithRef<typeof BaseRadioGroup>;
+type RadioGroupItemProps = React.ComponentPropsWithRef<typeof Radio.Root>;
+
+/**
+ * Coordinates radio group state and selection behavior.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup>Content</RadioGroup>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/radio-group | Base UI Documentation}
+ */
+const RadioGroup = React.forwardRef<React.ComponentRef<typeof BaseRadioGroup>, RadioGroup.Props>(
+  (props: Readonly<RadioGroup.Props>, ref): React.ReactElement => {
+    const {className, render, ...otherProps} = props;
+
+    return (
+      <BaseRadioGroup
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: cn(styles.group, className)}, {}),
+        })}
+      />
+    );
+  },
+);
+
+/**
+ * Renders the radio group item.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <RadioGroupItem>Content</RadioGroupItem>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/radio-group | Base UI Documentation}
+ */
+const RadioGroupItem = React.forwardRef<React.ComponentRef<typeof Radio.Root>, RadioGroupItem.Props>(
+  (props: Readonly<RadioGroupItem.Props>, ref): React.ReactElement => {
+    const {className, render, ...otherProps} = props;
+
+    return (
+      <Radio.Root
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: render as never,
+          props: mergeProps({className: cn(styles.item, className)}, {}),
+        })}>
+        <Radio.Indicator className={styles.indicator}>
+          <Circle className={styles.icon} />
+        </Radio.Indicator>
+      </Radio.Root>
+    );
+  },
+);
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace RadioGroup {
+  export type Props = RadioGroupProps;
+  export type State = BaseRadioGroup.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace RadioGroupItem {
+  export type Props = RadioGroupItemProps;
+  export type State = Radio.Root.State;
+}
+
+RadioGroup.displayName = "RadioGroup";
+RadioGroupItem.displayName = "RadioGroupItem";
 
 export {RadioGroup, RadioGroupItem};

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

@@ -0,0 +1,67 @@
+.group {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.group[data-panel-group-direction="vertical"] {
+  flex-direction: column;
+}
+
+.handle {
+  position: relative;
+  display: flex;
+  width: 1px;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ac-border);
+  outline: none;
+}
+
+.handle::after {
+  position: absolute;
+  inset-block: 0;
+  left: 50%;
+  width: 0.25rem;
+  content: "";
+  transform: translateX(-50%);
+}
+
+.handle:focus-visible {
+  box-shadow: 0 0 0 1px var(--ac-ring), 0 0 0 2px var(--ac-background);
+}
+
+.handle[data-panel-group-direction="vertical"] {
+  width: 100%;
+  height: 1px;
+}
+
+.handle[data-panel-group-direction="vertical"]::after {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0.25rem;
+  transform: translateY(-50%);
+}
+
+.handleGrip {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 0.75rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-sm);
+  background-color: var(--ac-background);
+}
+
+.handle[data-panel-group-direction="vertical"] .handleGrip {
+  transform: rotate(90deg);
+}
+
+.handleGripIcon {
+  width: 0.625rem;
+  height: 0.625rem;
+}