@arolariu/components 0.5.0 → 1.0.0

package/src/components/ui/scroll-area.tsx

@@ -1,42 +1,104 @@
 "use client";
 
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {ScrollArea as BaseScrollArea} from "@base-ui/react/scroll-area";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./scroll-area.module.css";
 
-const ScrollArea = React.forwardRef<
-  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({className, children, ...props}, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}>
-    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>{children}</ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({className, orientation = "vertical", ...props}, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none transition-colors select-none",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    {...props}>
-    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-neutral-200 dark:bg-neutral-800' />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+type ScrollAreaProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Root>;
+type ScrollBarProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Scrollbar>;
+
+/**
+ * Coordinates scroll area layout and scrolling behavior.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/scroll-area | Base UI Scroll Area}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea>Content</ScrollArea>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/scroll-area | Base UI Documentation}
+ */
+const ScrollArea = React.forwardRef<React.ComponentRef<typeof BaseScrollArea.Root>, ScrollArea.Props>(
+  (props: Readonly<ScrollArea.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseScrollArea.Root
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: cn(styles.root, className)}, {}),
+        })}>
+        <BaseScrollArea.Viewport className={styles.viewport}>
+          <BaseScrollArea.Content className={styles.content}>{children}</BaseScrollArea.Content>
+        </BaseScrollArea.Viewport>
+        <ScrollBar />
+        <BaseScrollArea.Corner className={styles.corner} />
+      </BaseScrollArea.Root>
+    );
+  },
+);
+
+/**
+ * Renders the scroll bar.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/scroll-area | Base UI Scroll Area}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <ScrollBar>Content</ScrollBar>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/scroll-area | Base UI Documentation}
+ */
+function ScrollBar(props: Readonly<ScrollBar.Props>): React.ReactElement {
+  const {className, orientation = "vertical", render, ...otherProps} = props;
+
+  return (
+    <BaseScrollArea.Scrollbar
+      orientation={orientation}
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps(
+          {
+            className: cn(styles.scrollbar, orientation === "vertical" ? styles.vertical : styles.horizontal, className),
+          },
+          {},
+        ),
+      })}>
+      <BaseScrollArea.Thumb className={styles.thumb} />
+    </BaseScrollArea.Scrollbar>
+  );
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace ScrollArea {
+  export type Props = ScrollAreaProps;
+  export type State = BaseScrollArea.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace ScrollBar {
+  export type Props = ScrollBarProps;
+  export type State = BaseScrollArea.Scrollbar.State;
+}
+
+ScrollArea.displayName = "ScrollArea";
+ScrollBar.displayName = "ScrollBar";
 
 export {ScrollArea, ScrollBar};

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

@@ -0,0 +1,131 @@
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ac-space-2);
+  width: 100%;
+  min-height: var(--ac-size-default);
+  padding: 0 var(--ac-space-3);
+  border: 1px solid var(--ac-input);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+  outline: none;
+  cursor: pointer;
+  transition: border-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.trigger[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.trigger[data-popup-open] {
+  border-color: var(--ac-ring);
+}
+
+.icon {
+  display: inline-flex;
+  color: var(--ac-muted-foreground);
+}
+
+.iconSvg,
+.scrollIcon,
+.itemIndicatorIcon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.positioner {
+  z-index: 50;
+}
+
+.popup {
+  min-width: min(12rem, var(--anchor-width, 12rem));
+  max-height: var(--available-height);
+  overflow: hidden;
+  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.35);
+  transform-origin: var(--transform-origin);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+}
+
+.popup[data-starting-style],
+.popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+.list {
+  max-height: var(--available-height);
+  padding: var(--ac-space-1);
+  overflow-y: auto;
+}
+
+.scrollButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--ac-size-md);
+  color: var(--ac-muted-foreground);
+}
+
+.label {
+  padding: var(--ac-space-1) var(--ac-space-2);
+  font-size: var(--ac-text-sm);
+  font-weight: 600;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--ac-size-default);
+  padding: var(--ac-space-1) calc(var(--ac-space-2) + 1.5rem) var(--ac-space-1) var(--ac-space-2);
+  border-radius: var(--ac-radius-sm);
+  outline: none;
+  cursor: default;
+  font-size: var(--ac-text-sm);
+  user-select: none;
+}
+
+.item[data-highlighted] {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.itemIndicatorSlot {
+  position: absolute;
+  right: var(--ac-space-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+
+.itemText {
+  line-height: 1.4;
+}
+
+.separator {
+  height: 1px;
+  margin: var(--ac-space-1) calc(var(--ac-space-1) * -1);
+  background-color: var(--ac-border);
+}