@arolariu/components 0.5.0 → 1.0.0

package/src/components/ui/table.tsx

@@ -1,95 +1,269 @@
-"use client";
-
-/* eslint-disable */
+/* eslint-disable react/prop-types */
 
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./table.module.css";
+
+/**
+ * Props for the {@link Table} component.
+ */
+export type TableProps = React.HTMLAttributes<HTMLTableElement>;
+
+/**
+ * Props for the {@link TableHeader} component.
+ */
+export type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+/**
+ * Props for the {@link TableBody} component.
+ */
+export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+/**
+ * Props for the {@link TableFooter} component.
+ */
+export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+/**
+ * Props for the {@link TableRow} component.
+ */
+export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
+
+/**
+ * Props for the {@link TableHead} component.
+ */
+export type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * Props for the {@link TableCell} component.
+ */
+export type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * Props for the {@link TableCaption} component.
+ */
+export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
+
+/**
+ * Wraps a table in a horizontally scrollable container.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<table>` element inside a `<div>` container
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHeader />
+ * </Table>
+ * ```
+ *
+ * @see {@link TableProps} for available props
+ */
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({className, ...props}: Readonly<TableProps>, ref): React.JSX.Element => (
+    <div className={styles.container}>
+      <table
+        ref={ref}
+        className={cn(styles.table, className)}
+        {...props}
+      />
+    </div>
+  ),
+);
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({className, ...props}, ref) => (
-  <div className='relative w-full overflow-auto'>
-    <table
+/**
+ * Renders the table header section.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<thead>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <TableHeader>
+ *   <TableRow />
+ * </TableHeader>
+ * ```
+ *
+ * @see {@link TableHeaderProps} for available props
+ */
+const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
+  ({className, ...props}: Readonly<TableHeaderProps>, ref): React.JSX.Element => (
+    <thead
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn(styles.header, className)}
       {...props}
     />
-  </div>
-));
-Table.displayName = "Table";
+  ),
+);
 
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({className, ...props}, ref) => (
-    <thead
+/**
+ * Renders the table body section.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<tbody>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <TableBody>
+ *   <TableRow />
+ * </TableBody>
+ * ```
+ *
+ * @see {@link TableBodyProps} for available props
+ */
+const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({className, ...props}: Readonly<TableBodyProps>, ref): React.JSX.Element => (
+    <tbody
       ref={ref}
-      className={cn("[&_tr]:border-b", className)}
+      className={cn(styles.body, className)}
       {...props}
     />
   ),
 );
-TableHeader.displayName = "TableHeader";
 
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({className, ...props}, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-));
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({className, ...props}, ref) => (
+/**
+ * Renders the table footer section.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<tfoot>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <TableFooter>
+ *   <TableRow />
+ * </TableFooter>
+ * ```
+ *
+ * @see {@link TableFooterProps} for available props
+ */
+const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(
+  ({className, ...props}: Readonly<TableFooterProps>, ref): React.JSX.Element => (
     <tfoot
       ref={ref}
-      className={cn("border-t bg-neutral-100/50 font-medium dark:bg-neutral-800/50 [&>tr]:last:border-b-0", className)}
+      className={cn(styles.footer, className)}
       {...props}
     />
   ),
 );
-TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({className, ...props}, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800",
-      className,
-    )}
-    {...props}
-  />
-));
-TableRow.displayName = "TableRow";
+/**
+ * Renders a table row.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<tr>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <TableRow>
+ *   <TableCell>Value</TableCell>
+ * </TableRow>
+ * ```
+ *
+ * @see {@link TableRowProps} for available props
+ */
+const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({className, ...props}: Readonly<TableRowProps>, ref): React.JSX.Element => (
+    <tr
+      ref={ref}
+      className={cn(styles.row, className)}
+      {...props}
+    />
+  ),
+);
 
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({className, ...props}, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className,
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = "TableHead";
+/**
+ * Renders a header cell.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<th>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <TableHead scope='col'>Name</TableHead>
+ * ```
+ *
+ * @see {@link TableHeadProps} for available props
+ */
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({className, ...props}: Readonly<TableHeadProps>, ref): React.JSX.Element => (
+    <th
+      ref={ref}
+      className={cn(styles.head, className)}
+      {...props}
+    />
+  ),
+);
 
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({className, ...props}, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
-    {...props}
-  />
-));
-TableCell.displayName = "TableCell";
+/**
+ * Renders a standard table cell.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<td>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <TableCell>Acme Inc.</TableCell>
+ * ```
+ *
+ * @see {@link TableCellProps} for available props
+ */
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({className, ...props}: Readonly<TableCellProps>, ref): React.JSX.Element => (
+    <td
+      ref={ref}
+      className={cn(styles.cell, className)}
+      {...props}
+    />
+  ),
+);
 
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-  ({className, ...props}, ref) => (
+/**
+ * Renders the table caption.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<caption>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <TableCaption>Recent invoices</TableCaption>
+ * ```
+ *
+ * @see {@link TableCaptionProps} for available props
+ */
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
+  ({className, ...props}: Readonly<TableCaptionProps>, ref): React.JSX.Element => (
     <caption
       ref={ref}
-      className={cn("mt-4 text-sm text-neutral-500 dark:text-neutral-400", className)}
+      className={cn(styles.caption, className)}
       {...props}
     />
   ),
 );
+
+Table.displayName = "Table";
+TableHeader.displayName = "TableHeader";
+TableBody.displayName = "TableBody";
+TableFooter.displayName = "TableFooter";
+TableRow.displayName = "TableRow";
+TableHead.displayName = "TableHead";
+TableCell.displayName = "TableCell";
 TableCaption.displayName = "TableCaption";
 
 export {Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow};

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

@@ -0,0 +1,89 @@
+.root {
+  /* Minimal default — consumers can add borders/background via className */
+}
+
+.list {
+  display: flex;
+  position: relative;
+  z-index: 0;
+  padding-inline: 0;
+  gap: 0;
+  border-bottom: 1px solid var(--ac-border);
+  background-color: transparent;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  margin: 0;
+  outline: none;
+  background: none;
+  appearance: none;
+  color: var(--ac-muted-foreground);
+  font-family: inherit;
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  user-select: none;
+  white-space: nowrap;
+  word-break: keep-all;
+  padding-inline: var(--ac-space-3);
+  padding-block: 0;
+  height: 2.25rem;
+  cursor: pointer;
+  transition: color var(--ac-transition-fast);
+
+  &[data-active] {
+    color: var(--ac-foreground);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--ac-foreground);
+    }
+  }
+
+  &:focus-visible {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: var(--ac-space-1) 0;
+      border-radius: var(--ac-radius-xs);
+      outline: 2px solid var(--ac-ring);
+      outline-offset: -1px;
+    }
+  }
+}
+
+.indicator {
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  bottom: -1px;
+  translate: var(--active-tab-left) 0;
+  width: var(--active-tab-width);
+  height: 2px;
+  background-color: var(--ac-foreground);
+  transition-property: translate, width;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in-out;
+}
+
+.panel {
+  position: relative;
+  outline: none;
+  padding-top: var(--ac-space-4);
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: -1px;
+    border-radius: var(--ac-radius-md);
+  }
+
+  &[hidden] {
+    display: none;
+  }
+}

package/src/components/ui/tabs.tsx

@@ -1,54 +1,201 @@
 "use client";
 
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Tabs as BaseTabs} from "@base-ui/react/tabs";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./tabs.module.css";
 
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>>(
-  ({className, ...props}, ref) => (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        "inline-flex h-9 items-center justify-center rounded-lg bg-neutral-100 p-1 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400",
-        className,
-      )}
-      {...props}
-    />
-  ),
+interface TabsProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.Root>, "className"> {
+  /** Additional CSS classes merged with the tabs root styles. @default undefined */
+  className?: string;
+}
+
+interface TabsListProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.List>, "className"> {
+  /** Additional CSS classes merged with the tabs list styles. @default undefined */
+  className?: string;
+}
+
+interface TabsTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.Tab>, "className"> {
+  /** Additional CSS classes merged with the individual tab trigger styles. @default undefined */
+  className?: string;
+}
+
+interface TabsContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseTabs.Panel>, "className"> {
+  /** Additional CSS classes merged with the tab panel styles. @default undefined */
+  className?: string;
+}
+
+/**
+ * Coordinates a tabbed interface for switching between related panels.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Content</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
+ */
+function Tabs(props: Readonly<Tabs.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseTabs.Root
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.root, className)}, {}),
+      })}>
+      {children}
+    </BaseTabs.Root>
+  );
+}
+Tabs.displayName = "Tabs";
+
+/**
+ * Renders the tab list along with the shared active indicator.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TabsList>
+ *   <TabsTrigger value="overview">Overview</TabsTrigger>
+ * </TabsList>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
+ */
+function TabsList(props: Readonly<TabsList.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseTabs.List
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.list, className)}, {}),
+      })}>
+      {children}
+      <BaseTabs.Indicator className={styles.indicator} />
+    </BaseTabs.List>
+  );
+}
+TabsList.displayName = "TabsList";
+
+/**
+ * Activates a specific tab panel within the surrounding tabs root.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TabsTrigger value="overview">Overview</TabsTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
+ */
+const TabsTrigger = React.forwardRef<React.ComponentRef<typeof BaseTabs.Tab>, TabsTrigger.Props>(
+  (props: Readonly<TabsTrigger.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseTabs.Tab
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: render as never,
+          props: mergeProps({className: cn(styles.tab, className)}, {}),
+        })}>
+        {children}
+      </BaseTabs.Tab>
+    );
+  },
+);
+TabsTrigger.displayName = "TabsTrigger";
+
+/**
+ * Renders the content panel associated with the active tab.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TabsContent value="overview">Content</TabsContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tabs | Base UI Documentation}
+ */
+const TabsContent = React.forwardRef<React.ComponentRef<typeof BaseTabs.Panel>, TabsContent.Props>(
+  (props: Readonly<TabsContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseTabs.Panel
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: cn(styles.panel, className)}, {}),
+        })}>
+        {children}
+      </BaseTabs.Panel>
+    );
+  },
 );
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({className, ...props}, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-950 dark:data-[state=active]:text-neutral-50",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({className, ...props}, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-white focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+TabsContent.displayName = "TabsContent";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Tabs {
+  export type Props = TabsProps;
+  export type State = BaseTabs.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace TabsList {
+  export type Props = TabsListProps;
+  export type State = BaseTabs.List.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace TabsTrigger {
+  export type Props = TabsTriggerProps;
+  export type State = BaseTabs.Tab.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace TabsContent {
+  export type Props = TabsContentProps;
+  export type State = BaseTabs.Panel.State;
+}
 
 export {Tabs, TabsContent, TabsList, TabsTrigger};

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

@@ -0,0 +1,30 @@
+.textarea {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  min-height: 3.75rem;
+  padding: var(--ac-space-2) var(--ac-space-3);
+  border: 1px solid var(--ac-input);
+  border-radius: var(--ac-radius-md);
+  background-color: transparent;
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  transition: border-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+
+  &::placeholder {
+    color: var(--ac-muted-foreground);
+  }
+
+  &:focus-visible {
+    border-color: var(--ac-ring);
+    box-shadow: 0 0 0 1px var(--ac-ring);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}