@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/number-field.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {NumberField as BaseNumberField} from "@base-ui/react/number-field";
+import {useRender} from "@base-ui/react/use-render";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+import styles from "./number-field.module.css";
+
+type NumberFieldProps = React.ComponentPropsWithRef<typeof BaseNumberField.Root>;
+type NumberFieldGroupProps = React.ComponentPropsWithRef<typeof BaseNumberField.Group>;
+type NumberFieldInputProps = React.ComponentPropsWithRef<typeof BaseNumberField.Input>;
+type NumberFieldIncrementProps = React.ComponentPropsWithRef<typeof BaseNumberField.Increment>;
+type NumberFieldDecrementProps = React.ComponentPropsWithRef<typeof BaseNumberField.Decrement>;
+type NumberFieldScrubAreaProps = React.ComponentPropsWithRef<typeof BaseNumberField.ScrubArea>;
+
+/**
+ * Provides a styled numeric input with optional steppers and scrub support.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Number Field primitives
+ *
+ * @example
+ * ```tsx
+ * <NumberField defaultValue={2}>
+ *   <NumberFieldGroup>
+ *     <NumberFieldDecrement />
+ *     <NumberFieldInput />
+ *     <NumberFieldIncrement />
+ *   </NumberFieldGroup>
+ * </NumberField>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI Number Field Docs}
+ */
+function NumberField(props: Readonly<NumberField.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseNumberField.Root
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.root, className)}, {}),
+      })}>
+      {children}
+    </BaseNumberField.Root>
+  );
+}
+
+/**
+ * Wraps the interactive number-field controls in a shared container.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Number Field group primitives
+ *
+ * @example
+ * ```tsx
+ * <NumberFieldGroup>
+ *   <NumberFieldInput />
+ * </NumberFieldGroup>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI Number Field Docs}
+ */
+const NumberFieldGroup = React.forwardRef<React.ComponentRef<typeof BaseNumberField.Group>, NumberFieldGroup.Props>(
+  (props: Readonly<NumberFieldGroup.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseNumberField.Group
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: cn(styles.group, className)}, {}),
+        })}>
+        {children}
+      </BaseNumberField.Group>
+    );
+  },
+);
+
+/**
+ * Renders the text input used for numeric entry.
+ *
+ * @remarks
+ * - Renders an `<input>` element by default
+ * - Built on Base UI Number Field input primitives
+ *
+ * @example
+ * ```tsx
+ * <NumberFieldInput aria-label='Quantity' />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI Number Field Docs}
+ */
+const NumberFieldInput = React.forwardRef<React.ComponentRef<typeof BaseNumberField.Input>, NumberFieldInput.Props>(
+  (props: Readonly<NumberFieldInput.Props>, ref): React.ReactElement => {
+    const {className, render, ...otherProps} = props;
+
+    return (
+      <BaseNumberField.Input
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "input",
+          render: render as never,
+          props: mergeProps({className: cn(styles.input, className)}, {}),
+        })}
+      />
+    );
+  },
+);
+
+/**
+ * Renders the increment control for a number field.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on Base UI Number Field increment primitives
+ *
+ * @example
+ * ```tsx
+ * <NumberFieldIncrement />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI Number Field Docs}
+ */
+function NumberFieldIncrement(props: Readonly<NumberFieldIncrement.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseNumberField.Increment
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "button",
+        render: render as never,
+        props: mergeProps({className: cn(styles.stepper, styles.increment, className)}, {}),
+      })}>
+      {children ?? <span className={styles.stepperSymbol}>+</span>}
+    </BaseNumberField.Increment>
+  );
+}
+
+/**
+ * Renders the decrement control for a number field.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on Base UI Number Field decrement primitives
+ *
+ * @example
+ * ```tsx
+ * <NumberFieldDecrement />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI Number Field Docs}
+ */
+function NumberFieldDecrement(props: Readonly<NumberFieldDecrement.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseNumberField.Decrement
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "button",
+        render: render as never,
+        props: mergeProps({className: cn(styles.stepper, styles.decrement, className)}, {}),
+      })}>
+      {children ?? <span className={styles.stepperSymbol}>−</span>}
+    </BaseNumberField.Decrement>
+  );
+}
+
+/**
+ * Renders the scrub handle used for drag-to-adjust interactions.
+ *
+ * @remarks
+ * - Renders a `<span>` element by default
+ * - Built on Base UI Number Field scrub-area primitives
+ *
+ * @example
+ * ```tsx
+ * <NumberFieldScrubArea />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI Number Field Docs}
+ */
+function NumberFieldScrubArea(props: Readonly<NumberFieldScrubArea.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseNumberField.ScrubArea
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "span",
+        render: render as never,
+        props: mergeProps({className: cn(styles.scrubArea, className)}, {}),
+      })}>
+      {children ?? <span className={styles.scrubHandle}>⋮⋮</span>}
+    </BaseNumberField.ScrubArea>
+  );
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace NumberField {
+  export type Props = NumberFieldProps;
+  export type State = BaseNumberField.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace NumberFieldGroup {
+  export type Props = NumberFieldGroupProps;
+  export type State = BaseNumberField.Group.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace NumberFieldInput {
+  export type Props = NumberFieldInputProps;
+  export type State = BaseNumberField.Input.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace NumberFieldIncrement {
+  export type Props = NumberFieldIncrementProps;
+  export type State = BaseNumberField.Increment.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace NumberFieldDecrement {
+  export type Props = NumberFieldDecrementProps;
+  export type State = BaseNumberField.Decrement.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace NumberFieldScrubArea {
+  export type Props = NumberFieldScrubAreaProps;
+  export type State = BaseNumberField.ScrubArea.State;
+}
+
+NumberField.displayName = "NumberField";
+NumberFieldGroup.displayName = "NumberFieldGroup";
+NumberFieldInput.displayName = "NumberFieldInput";
+NumberFieldIncrement.displayName = "NumberFieldIncrement";
+NumberFieldDecrement.displayName = "NumberFieldDecrement";
+NumberFieldScrubArea.displayName = "NumberFieldScrubArea";
+
+export {NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea};

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

@@ -0,0 +1,64 @@
+.root {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ac-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: flex;
+}
+
+.link {
+  min-width: var(--ac-size-default);
+  text-decoration: none;
+}
+
+.previous {
+  gap: var(--ac-space-1);
+  padding-left: calc(var(--ac-space-3) - 0.125rem);
+}
+
+.next {
+  gap: var(--ac-space-1);
+  padding-right: calc(var(--ac-space-3) - 0.125rem);
+}
+
+.ellipsis {
+  position: relative;
+  display: inline-flex;
+  width: var(--ac-size-default);
+  height: var(--ac-size-default);
+  align-items: center;
+  justify-content: center;
+  color: var(--ac-muted-foreground);
+}
+
+.ellipsis > svg,
+.previous > svg,
+.next > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/components/ui/pagination.tsx

@@ -1,93 +1,271 @@
 "use client";
 
+/* eslint-disable jsx-a11y/anchor-has-content */
+
 import {ChevronLeft, ChevronRight, MoreHorizontal} from "lucide-react";
 import * as React from "react";
 
-import {ButtonProps, buttonVariants} from "@/components/ui/button";
+import type {ButtonProps} from "@/components/ui/button";
 import {cn} from "@/lib/utilities";
+import buttonStyles from "./button.module.css";
+import styles from "./pagination.module.css";
 
-const Pagination = ({className, ...props}: React.ComponentProps<"nav">) => (
-  <nav
-    role='navigation'
-    aria-label='pagination'
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-);
-Pagination.displayName = "Pagination";
+/**
+ * Props for the {@link Pagination} component.
+ */
+export type PaginationProps = React.ComponentPropsWithoutRef<"nav">;
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({className, ...props}, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-));
-PaginationContent.displayName = "PaginationContent";
+/**
+ * Props for the {@link PaginationContent} component.
+ */
+export type PaginationContentProps = React.ComponentPropsWithoutRef<"ul">;
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({className, ...props}, ref) => (
-  <li
-    ref={ref}
-    className={cn("", className)}
-    {...props}
-  />
-));
-PaginationItem.displayName = "PaginationItem";
+/**
+ * Props for the {@link PaginationItem} component.
+ */
+export type PaginationItemProps = React.ComponentPropsWithoutRef<"li">;
 
-type PaginationLinkProps = {
+/**
+ * Props for the {@link PaginationLink} component.
+ */
+export interface PaginationLinkProps extends Pick<ButtonProps, "size">, React.ComponentPropsWithoutRef<"a"> {
+  /** Marks the link as the current active page. @default false */
   isActive?: boolean;
-} & Pick<ButtonProps, "size">
-  & React.ComponentProps<"a">;
-
-const PaginationLink = ({className, isActive, size = "icon", ...props}: PaginationLinkProps) => (
-  // eslint-disable-next-line jsx-a11y/anchor-has-content -- the link will have children.
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className,
-    )}
-    {...props}
-  />
+}
+
+/**
+ * Props for the {@link PaginationPrevious} component.
+ */
+export type PaginationPreviousProps = React.ComponentPropsWithoutRef<typeof PaginationLink>;
+
+/**
+ * Props for the {@link PaginationNext} component.
+ */
+export type PaginationNextProps = React.ComponentPropsWithoutRef<typeof PaginationLink>;
+
+/**
+ * Props for the {@link PaginationEllipsis} component.
+ */
+export type PaginationEllipsisProps = React.ComponentPropsWithoutRef<"span">;
+
+const buttonSizeStyles: Record<NonNullable<ButtonProps["size"]>, string> = {
+  default: buttonStyles.sizeDefault,
+  icon: buttonStyles.sizeIcon,
+  lg: buttonStyles.sizeLg,
+  sm: buttonStyles.sizeSm,
+};
+
+/**
+ * Provides semantic navigation for paginated content.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<nav>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <Pagination>
+ *   <PaginationContent />
+ * </Pagination>
+ * ```
+ *
+ * @see {@link PaginationProps} for available props
+ */
+const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  ({className, ...props}: Readonly<PaginationProps>, ref): React.JSX.Element => (
+    <nav
+      ref={ref}
+      role='navigation'
+      aria-label='pagination'
+      className={cn(styles.root, className)}
+      {...props}
+    />
+  ),
 );
-PaginationLink.displayName = "PaginationLink";
 
-const PaginationPrevious = ({className, ...props}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label='Go to previous page'
-    size='default'
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}>
-    <ChevronLeft className='h-4 w-4' />
-    <span>Previous</span>
-  </PaginationLink>
+/**
+ * Wraps pagination items in a flex-based list container.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<ul>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <PaginationContent>
+ *   <PaginationItem />
+ * </PaginationContent>
+ * ```
+ *
+ * @see {@link PaginationContentProps} for available props
+ */
+const PaginationContent = React.forwardRef<HTMLUListElement, PaginationContentProps>(
+  ({className, ...props}: Readonly<PaginationContentProps>, ref): React.JSX.Element => (
+    <ul
+      ref={ref}
+      className={cn(styles.content, className)}
+      {...props}
+    />
+  ),
 );
-PaginationPrevious.displayName = "PaginationPrevious";
 
-const PaginationNext = ({className, ...props}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label='Go to next page'
-    size='default'
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}>
-    <span>Next</span>
-    <ChevronRight className='h-4 w-4' />
-  </PaginationLink>
+/**
+ * Wraps an individual pagination control.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<li>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <PaginationItem>
+ *   <PaginationLink href='?page=1'>1</PaginationLink>
+ * </PaginationItem>
+ * ```
+ *
+ * @see {@link PaginationItemProps} for available props
+ */
+const PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>(
+  ({className, ...props}: Readonly<PaginationItemProps>, ref): React.JSX.Element => (
+    <li
+      ref={ref}
+      className={cn(styles.item, className)}
+      {...props}
+    />
+  ),
 );
-PaginationNext.displayName = "PaginationNext";
 
-const PaginationEllipsis = ({className, ...props}: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}>
-    <MoreHorizontal className='h-4 w-4' />
-    <span className='sr-only'>More pages</span>
-  </span>
+/**
+ * Renders an anchor styled to match pagination controls.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<a>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <PaginationLink href='?page=2' isActive>
+ *   2
+ * </PaginationLink>
+ * ```
+ *
+ * @see {@link PaginationLinkProps} for available props
+ */
+const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  ({className, isActive = false, size = "icon", ...props}: Readonly<PaginationLinkProps>, ref): React.JSX.Element => {
+    return (
+      <a
+        ref={ref}
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+          buttonStyles.button,
+          isActive ? buttonStyles.outline : buttonStyles.ghost,
+          buttonSizeStyles[size],
+          styles.link,
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
 );
+
+/**
+ * Renders the pagination control for navigating to the previous page.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<a>` element through {@link PaginationLink}
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <PaginationPrevious href='?page=1' />
+ * ```
+ *
+ * @see {@link PaginationPreviousProps} for available props
+ */
+const PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationPreviousProps>(
+  ({className, ...props}: Readonly<PaginationPreviousProps>, ref): React.JSX.Element => (
+    <PaginationLink
+      ref={ref}
+      aria-label='Go to previous page'
+      size='default'
+      className={cn(styles.previous, className)}
+      {...props}>
+      <ChevronLeft />
+      <span>Previous</span>
+    </PaginationLink>
+  ),
+);
+
+/**
+ * Renders the pagination control for navigating to the next page.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<a>` element through {@link PaginationLink}
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <PaginationNext href='?page=3' />
+ * ```
+ *
+ * @see {@link PaginationNextProps} for available props
+ */
+const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationNextProps>(
+  ({className, ...props}: Readonly<PaginationNextProps>, ref): React.JSX.Element => (
+    <PaginationLink
+      ref={ref}
+      aria-label='Go to next page'
+      size='default'
+      className={cn(styles.next, className)}
+      {...props}>
+      <span>Next</span>
+      <ChevronRight />
+    </PaginationLink>
+  ),
+);
+
+/**
+ * Indicates truncated page ranges within pagination.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <PaginationEllipsis />
+ * ```
+ *
+ * @see {@link PaginationEllipsisProps} for available props
+ */
+const PaginationEllipsis = React.forwardRef<HTMLSpanElement, PaginationEllipsisProps>(
+  ({className, ...props}: Readonly<PaginationEllipsisProps>, ref): React.JSX.Element => (
+    <span
+      ref={ref}
+      aria-hidden='true'
+      className={cn(styles.ellipsis, className)}
+      {...props}>
+      <MoreHorizontal />
+      <span className={styles.srOnly}>More pages</span>
+    </span>
+  ),
+);
+
+Pagination.displayName = "Pagination";
+PaginationContent.displayName = "PaginationContent";
+PaginationItem.displayName = "PaginationItem";
+PaginationLink.displayName = "PaginationLink";
+PaginationPrevious.displayName = "PaginationPrevious";
+PaginationNext.displayName = "PaginationNext";
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export {Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious};

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

@@ -0,0 +1,26 @@
+.anchor {
+  display: contents;
+}
+
+.positioner {
+  z-index: 50;
+}
+
+.popup {
+  width: 18rem;
+  padding: var(--ac-space-4);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-popover);
+  color: var(--ac-popover-foreground);
+  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.3);
+  transform-origin: var(--transform-origin);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+  outline: none;
+}
+
+.popup[data-starting-style],
+.popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}