@arolariu/components 0.5.0 → 1.1.0

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

@@ -0,0 +1,8 @@
+.group {
+  display: grid;
+  gap: var(--ac-space-2);
+
+  &[data-disabled] {
+    opacity: 0.6;
+  }
+}

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

@@ -0,0 +1,53 @@
+"use client";
+
+import {CheckboxGroup as BaseCheckboxGroup} from "@base-ui/react/checkbox-group";
+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 "./checkbox-group.module.css";
+
+/**
+ * Groups related checkboxes into a single accessible fieldset-like control.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Checkbox Group primitives
+ * - Applies compact stacked spacing between child checkboxes
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup defaultValue={["news"]}>
+ *   <Checkbox value='news'>Newsletter</Checkbox>
+ *   <Checkbox value='events'>Events</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/checkbox-group | Base UI Checkbox Group Docs}
+ */
+const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroup.Props>(function CheckboxGroup(props, forwardedRef) {
+  const {className, render, ...otherProps} = props;
+
+  return (
+    <BaseCheckboxGroup
+      {...otherProps}
+      ref={forwardedRef}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.group, className)}, {}),
+      })}
+    />
+  );
+});
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace CheckboxGroup {
+  export type Props = React.ComponentPropsWithRef<typeof BaseCheckboxGroup>;
+  export type State = BaseCheckboxGroup.State;
+}
+
+CheckboxGroup.displayName = "CheckboxGroup";
+
+export {CheckboxGroup};

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

@@ -0,0 +1,43 @@
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: var(--ac-radius-xs);
+  border: 1px solid var(--ac-primary);
+  background-color: transparent;
+  color: currentcolor;
+  cursor: pointer;
+  outline: none;
+  transition: background-color var(--ac-transition-fast), border-color var(--ac-transition-fast);
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[data-checked],
+  &[data-indeterminate] {
+    background-color: var(--ac-primary);
+    color: var(--ac-primary-foreground);
+    border-color: var(--ac-primary);
+  }
+}
+
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}

package/src/components/ui/checkbox.tsx

@@ -1,27 +1,89 @@
 "use client";
 
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import {Check} from "lucide-react";
+import {Checkbox as BaseCheckbox} from "@base-ui/react/checkbox";
+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 "./checkbox.module.css";
 
-const Checkbox = React.forwardRef<
-  React.ComponentRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({className, ...props}, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer grid h-4 w-4 shrink-0 place-content-center rounded-sm border border-neutral-200 border-neutral-900 shadow focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 dark:border-neutral-50 dark:border-neutral-800 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
-      className,
-    )}
-    {...props}>
-    <CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
-      <Check className='h-4 w-4' />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+type BaseCheckboxCheckedChange = NonNullable<React.ComponentPropsWithRef<typeof BaseCheckbox.Root>["onCheckedChange"]>;
+type CheckboxChangeEventDetails = Parameters<BaseCheckboxCheckedChange>[1];
+
+/**
+ * Props for the shared checkbox wrapper.
+ */
+interface CheckboxProps extends Omit<React.ComponentPropsWithRef<typeof BaseCheckbox.Root>, "checked" | "className" | "onCheckedChange"> {
+  /** Additional CSS classes merged with the checkbox control styles. @default undefined */
+  className?: string;
+  /** The current checked state, including support for the legacy `"indeterminate"` value. @default undefined */
+  checked?: boolean | "indeterminate";
+  /** Called whenever the checked state changes. @default undefined */
+  onCheckedChange?: (checked: boolean | "indeterminate", eventDetails: CheckboxChangeEventDetails) => void;
+}
+
+/**
+ * Renders a selectable checkbox control with checked and indeterminate support.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Checkbox checked />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/checkbox | Base UI Documentation}
+ */
+const Checkbox = React.forwardRef<React.ComponentRef<typeof BaseCheckbox.Root>, Checkbox.Props>(
+  (props: Readonly<Checkbox.Props>, ref): React.ReactElement => {
+    const {checked, className, onCheckedChange, render, ...otherProps} = props;
+    const baseChecked = checked === "indeterminate" ? true : checked;
+    const indeterminate = checked === "indeterminate";
+    const handleCheckedChange: BaseCheckboxCheckedChange | undefined = onCheckedChange
+      ? (nextChecked, eventDetails) => {
+          onCheckedChange(nextChecked, eventDetails);
+        }
+      : undefined;
+
+    return (
+      <BaseCheckbox.Root
+        ref={ref}
+        checked={baseChecked}
+        indeterminate={indeterminate}
+        onCheckedChange={handleCheckedChange}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: render as never,
+          props: mergeProps({className: cn(styles.checkbox, className)}, {}),
+        })}>
+        <BaseCheckbox.Indicator className={styles.indicator}>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            fill='none'
+            stroke='currentColor'
+            strokeWidth='3'
+            strokeLinecap='round'
+            strokeLinejoin='round'>
+            <polyline points='20 6 9 17 4 12' />
+          </svg>
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Checkbox {
+  export type Props = CheckboxProps;
+  export type State = BaseCheckbox.Root.State;
+}
 
 export {Checkbox};

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

@@ -0,0 +1,24 @@
+.trigger {
+  outline: none;
+
+  &:focus-visible {
+    border-radius: var(--ac-radius-sm);
+    outline: 2px solid var(--ac-ring);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.panel {
+  overflow: hidden;
+  transition: opacity var(--ac-transition-normal);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}

package/src/components/ui/collapsible.tsx

@@ -1,9 +1,146 @@
 "use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import {Collapsible as BaseCollapsible} from "@base-ui/react/collapsible";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import * as React from "react";
 
-const Collapsible = CollapsiblePrimitive.Root;
+import {cn} from "@/lib/utilities";
+import styles from "./collapsible.module.css";
 
-const {CollapsibleTrigger, CollapsibleContent} = CollapsiblePrimitive;
+interface CollapsibleProps extends React.ComponentPropsWithRef<typeof BaseCollapsible.Root> {}
+
+interface CollapsibleTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseCollapsible.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 CollapsibleContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseCollapsible.Panel>, "className"> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+}
+
+/**
+ * Coordinates collapsible state and accessibility behavior.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>Content</Collapsible>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}
+ */
+function Collapsible(props: Readonly<Collapsible.Props>): React.ReactElement {
+  return <BaseCollapsible.Root {...props} />;
+}
+
+/**
+ * Renders the collapsible trigger.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleTrigger>Content</CollapsibleTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}
+ */
+const CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof BaseCollapsible.Trigger>, CollapsibleTrigger.Props>(
+  (props: Readonly<CollapsibleTrigger.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 (
+      <BaseCollapsible.Trigger
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: renderProp as never,
+          props: mergeProps({className: cn(styles.trigger, className)}, {}),
+        })}>
+        {renderProp ? undefined : children}
+      </BaseCollapsible.Trigger>
+    );
+  },
+);
+
+/**
+ * Renders the collapsible content.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleContent>Content</CollapsibleContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}
+ */
+const CollapsibleContent = React.forwardRef<React.ComponentRef<typeof BaseCollapsible.Panel>, CollapsibleContent.Props>(
+  (props: Readonly<CollapsibleContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseCollapsible.Panel
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: cn(styles.panel, className)}, {}),
+        })}>
+        {children}
+      </BaseCollapsible.Panel>
+    );
+  },
+);
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Collapsible {
+  export type Props = CollapsibleProps;
+  export type State = BaseCollapsible.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace CollapsibleTrigger {
+  export type Props = CollapsibleTriggerProps;
+  export type State = BaseCollapsible.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace CollapsibleContent {
+  export type Props = CollapsibleContentProps;
+  export type State = BaseCollapsible.Panel.State;
+}
+
+Collapsible.displayName = "Collapsible";
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+CollapsibleContent.displayName = "CollapsibleContent";
 
 export {Collapsible, CollapsibleContent, CollapsibleTrigger};

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

@@ -0,0 +1,158 @@
+/**
+ * Combobox component styles
+ * Compound component combining Command, Popover, and Button
+ */
+
+/* Root container */
+.combobox {
+  display: contents;
+}
+
+/* Trigger button */
+.trigger {
+  justify-content: space-between;
+  width: 100%;
+  min-width: 200px;
+}
+
+.triggerValue {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.triggerPlaceholder {
+  color: var(--ac-neutral-500);
+}
+
+.triggerIcon {
+  margin-left: var(--ac-spacing-2);
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+/* Popover content */
+.content {
+  width: var(--anchor-width);
+  min-width: 200px;
+  padding: 0;
+}
+
+/* Command container */
+.command {
+  border: none;
+  box-shadow: none;
+}
+
+.commandInput {
+  border-bottom: 1px solid var(--ac-neutral-200);
+  border-radius: 0;
+}
+
+.commandList {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* Items */
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--ac-spacing-2);
+  cursor: pointer;
+  padding: var(--ac-spacing-2) var(--ac-spacing-3);
+  border-radius: var(--ac-radius-sm);
+  transition: background-color 0.2s;
+}
+
+.item:hover {
+  background-color: var(--ac-neutral-100);
+}
+
+.item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.itemSelected {
+  background-color: var(--ac-neutral-100);
+}
+
+.itemCheck {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.itemCheckVisible {
+  opacity: 1;
+}
+
+.itemLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Empty state */
+.empty {
+  padding: var(--ac-spacing-6) var(--ac-spacing-4);
+  text-align: center;
+  color: var(--ac-neutral-500);
+  font-size: var(--ac-font-size-sm);
+}
+
+/* Group */
+.group {
+  padding: var(--ac-spacing-1) 0;
+}
+
+/* Separator */
+.separator {
+  margin: var(--ac-spacing-1) 0;
+  height: 1px;
+  background-color: var(--ac-neutral-200);
+}
+
+/* Dark mode */
+:global(.dark) .triggerPlaceholder {
+  color: var(--ac-neutral-400);
+}
+
+:global(.dark) .commandInput {
+  border-bottom-color: var(--ac-neutral-700);
+}
+
+:global(.dark) .item:hover {
+  background-color: var(--ac-neutral-800);
+}
+
+:global(.dark) .itemSelected {
+  background-color: var(--ac-neutral-800);
+}
+
+:global(.dark) .empty {
+  color: var(--ac-neutral-400);
+}
+
+:global(.dark) .separator {
+  background-color: var(--ac-neutral-700);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .trigger {
+    min-width: 150px;
+  }
+
+  .content {
+    min-width: 150px;
+  }
+}