@arolariu/components 0.4.2 → 1.0.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,54 @@
+"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";
+
+type CheckboxGroupProps = React.ComponentPropsWithRef<typeof BaseCheckboxGroup>;
+
+/**
+ * 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}
+ */
+function CheckboxGroup(props: Readonly<CheckboxGroup.Props>): React.ReactElement {
+  const {className, render, ...otherProps} = props;
+
+  return (
+    <BaseCheckboxGroup
+      {...otherProps}
+      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 = CheckboxGroupProps;
+  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,81 @@
 "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;
+/**
+ * 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") => 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";
+
+    return (
+      <BaseCheckbox.Root
+        ref={ref}
+        checked={baseChecked}
+        indeterminate={indeterminate}
+        onCheckedChange={onCheckedChange as React.ComponentPropsWithRef<typeof BaseCheckbox.Root>["onCheckedChange"]}
+        {...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,145 @@
 "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 => {
+    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/command.module.css

@@ -0,0 +1,193 @@
+.command {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  min-height: 0;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  min-height: 100dvh;
+  background-color: rgb(0 0 0 / 0.5);
+  transition: opacity var(--ac-transition-normal);
+  touch-action: none;
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.dialogPopup {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 10000;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  width: min(34rem, calc(100vw - 2rem));
+  max-height: min(90vh, 44rem);
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-lg);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  box-shadow: 0 10px 30px -5px rgb(0 0 0 / 0.1), 0 4px 10px -5px rgb(0 0 0 / 0.04);
+  transform: translate(-50%, -50%);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+}
+
+.inputWrapper {
+  display: flex;
+  align-items: center;
+  padding-inline: var(--ac-space-4);
+  border-bottom: 1px solid var(--ac-border);
+}
+
+.searchIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  margin-right: var(--ac-space-3);
+  opacity: 0.5;
+}
+
+.input {
+  width: 100%;
+  height: 3rem;
+  padding-block: var(--ac-space-3);
+  border: 0;
+  border-radius: var(--ac-radius-md);
+  background-color: transparent;
+  color: inherit;
+  font-size: 1rem;
+  outline: none;
+
+  &::placeholder {
+    color: var(--ac-muted-foreground);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--ac-space-2);
+  scroll-padding-block: var(--ac-space-1);
+  -webkit-overflow-scrolling: touch;
+}
+
+.empty {
+  padding-block: var(--ac-space-6);
+  text-align: center;
+  font-size: var(--ac-text-sm);
+}
+
+.group {
+  overflow: hidden;
+  padding: 2px 0;
+  color: inherit;
+
+  & + .group {
+    margin-top: 2px;
+    border-top: 1px solid var(--ac-border);
+    padding-top: var(--ac-space-1);
+  }
+}
+
+.groupHeading {
+  padding: var(--ac-space-1) var(--ac-space-3);
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-xs);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.separator {
+  height: 1px;
+  margin: var(--ac-space-1) var(--ac-space-1);
+  background-color: var(--ac-border);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-3);
+  padding: 0.5rem var(--ac-space-3);
+  border-radius: var(--ac-radius-sm);
+  font-size: var(--ac-text-sm);
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast);
+}
+
+.item[data-selected="true"] {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.item[data-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ac-ring);
+}
+
+.item svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+.shortcut {
+  margin-left: auto;
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-xs);
+  letter-spacing: 0.2em;
+}