@arolariu/components 0.4.2 → 1.0.0

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

@@ -0,0 +1,112 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ac-space-1);
+  padding: var(--ac-space-1);
+  border: 1px solid var(--ac-border);
+  border-radius: calc(var(--ac-radius-md) + 1px);
+  background-color: var(--ac-card);
+  color: var(--ac-card-foreground);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  &[data-disabled] {
+    opacity: 0.7;
+  }
+}
+
+.group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ac-space-1);
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  &[data-disabled] {
+    opacity: 0.7;
+  }
+}
+
+.item {
+  box-sizing: border-box;
+  display: inline-flex;
+  min-height: var(--ac-size-md);
+  align-items: center;
+  justify-content: center;
+  gap: var(--ac-space-2);
+  padding: 0 var(--ac-space-2);
+  border-radius: var(--ac-radius-sm);
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-xs);
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  outline: none;
+  transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+
+  &:focus-visible {
+    background-color: var(--ac-accent);
+    box-shadow: inset 0 0 0 1px var(--ac-ring);
+    color: var(--ac-accent-foreground);
+  }
+
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  & svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+  }
+}
+
+.button {
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: var(--ac-accent);
+      color: var(--ac-accent-foreground);
+    }
+  }
+}
+
+.link {
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--ac-accent);
+      color: var(--ac-accent-foreground);
+    }
+  }
+}
+
+.separator {
+  flex-shrink: 0;
+  align-self: stretch;
+  background-color: var(--ac-border);
+
+  &[data-orientation="horizontal"] {
+    width: 100%;
+    height: 1px;
+    min-height: 1px;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 1px;
+    min-width: 1px;
+    height: 1rem;
+    margin-block: auto;
+  }
+}

package/src/components/ui/toolbar.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Toolbar as BaseToolbar} from "@base-ui/react/toolbar";
+import {useRender} from "@base-ui/react/use-render";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+import styles from "./toolbar.module.css";
+
+type ToolbarProps = React.ComponentPropsWithRef<typeof BaseToolbar.Root>;
+type ToolbarButtonProps = React.ComponentPropsWithRef<typeof BaseToolbar.Button>;
+type ToolbarGroupProps = React.ComponentPropsWithRef<typeof BaseToolbar.Group>;
+type ToolbarSeparatorProps = React.ComponentPropsWithRef<typeof BaseToolbar.Separator>;
+type ToolbarLinkProps = React.ComponentPropsWithRef<typeof BaseToolbar.Link>;
+
+/**
+ * Arranges related actions into a keyboard-accessible toolbar.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Toolbar primitives
+ * - Supports roving focus and compound toolbar item composition
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label='Text formatting'>
+ *   <ToolbarButton>Bold</ToolbarButton>
+ *   <ToolbarButton>Italic</ToolbarButton>
+ * </Toolbar>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
+ */
+function Toolbar(props: Readonly<Toolbar.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseToolbar.Root
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.root, className)}, {}),
+      })}>
+      {children}
+    </BaseToolbar.Root>
+  );
+}
+
+/**
+ * Renders an interactive button within a toolbar.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on Base UI Toolbar button behavior
+ * - Applies shared toolbar item spacing and focus styling
+ *
+ * @example
+ * ```tsx
+ * <ToolbarButton aria-label='Bold'>B</ToolbarButton>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
+ */
+function ToolbarButton(props: Readonly<ToolbarButton.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseToolbar.Button
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "button",
+        render: render as never,
+        props: mergeProps({className: cn(styles.item, styles.button, className)}, {}),
+      })}>
+      {children}
+    </BaseToolbar.Button>
+  );
+}
+
+/**
+ * Groups related toolbar controls into a single visual cluster.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Toolbar grouping primitives
+ *
+ * @example
+ * ```tsx
+ * <ToolbarGroup>
+ *   <ToolbarButton>Left</ToolbarButton>
+ *   <ToolbarButton>Center</ToolbarButton>
+ * </ToolbarGroup>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
+ */
+function ToolbarGroup(props: Readonly<ToolbarGroup.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseToolbar.Group
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.group, className)}, {}),
+      })}>
+      {children}
+    </BaseToolbar.Group>
+  );
+}
+
+/**
+ * Renders a visual separator between toolbar items or groups.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Toolbar separator primitives
+ *
+ * @example
+ * ```tsx
+ * <ToolbarSeparator />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
+ */
+function ToolbarSeparator(props: Readonly<ToolbarSeparator.Props>): React.ReactElement {
+  const {className, render, ...otherProps} = props;
+
+  return (
+    <BaseToolbar.Separator
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.separator, className)}, {}),
+      })}
+    />
+  );
+}
+
+/**
+ * Renders a link that visually matches toolbar buttons.
+ *
+ * @remarks
+ * - Renders an `<a>` element by default
+ * - Built on Base UI Toolbar link primitives
+ *
+ * @example
+ * ```tsx
+ * <ToolbarLink href='/docs'>Docs</ToolbarLink>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
+ */
+function ToolbarLink(props: Readonly<ToolbarLink.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseToolbar.Link
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "a",
+        render: render as never,
+        props: mergeProps({className: cn(styles.item, styles.link, className)}, {}),
+      })}>
+      {children}
+    </BaseToolbar.Link>
+  );
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Toolbar {
+  export type Props = ToolbarProps;
+  export type State = BaseToolbar.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace ToolbarButton {
+  export type Props = ToolbarButtonProps;
+  export type State = BaseToolbar.Button.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace ToolbarGroup {
+  export type Props = ToolbarGroupProps;
+  export type State = BaseToolbar.Group.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace ToolbarSeparator {
+  export type Props = ToolbarSeparatorProps;
+  export type State = BaseToolbar.Separator.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace ToolbarLink {
+  export type Props = ToolbarLinkProps;
+  export type State = BaseToolbar.Link.State;
+}
+
+Toolbar.displayName = "Toolbar";
+ToolbarButton.displayName = "ToolbarButton";
+ToolbarGroup.displayName = "ToolbarGroup";
+ToolbarSeparator.displayName = "ToolbarSeparator";
+ToolbarLink.displayName = "ToolbarLink";
+
+export {Toolbar, ToolbarButton, ToolbarGroup, ToolbarLink, ToolbarSeparator};

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

@@ -0,0 +1,39 @@
+.trigger {
+  display: inline-flex;
+  max-width: max-content;
+}
+
+/* Positioner uses CSS transform for floating-ui placement, which creates
+   a new stacking context.  An explicit z-index ensures the tooltip paints
+   above page elements that carry their own z-index (e.g. sticky headers,
+   footers with z-index: 10). */
+.positioner {
+  z-index: 50;
+}
+
+.popup {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ac-radius-sm);
+  background-color: var(--ac-foreground);
+  color: var(--ac-background);
+  padding: var(--ac-space-1) var(--ac-space-2);
+  font-size: var(--ac-text-xs);
+  line-height: 1.5;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+  transform-origin: var(--transform-origin);
+  transition: opacity var(--ac-transition-fast), transform var(--ac-transition-fast);
+
+  /* Force all descendants (e.g. <code>, <strong>) to inherit the
+     tooltip's inverted color scheme so consumer styles don't bleed in. */
+  & * {
+    color: inherit;
+    background-color: transparent;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}

package/src/components/ui/tooltip.tsx

@@ -1,32 +1,189 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {Tooltip as BaseTooltip} from "@base-ui/react/tooltip";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./tooltip.module.css";
 
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ComponentRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({className, sideOffset = 4, ...props}, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900",
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+interface TooltipProviderProps {
+  /** Tooltip content and triggers managed by the provider. @default undefined */
+  children: React.ReactNode;
+  /** Delay in milliseconds before tooltip content becomes visible. @default undefined */
+  delayDuration?: number;
+}
+
+interface TooltipProps extends Omit<React.ComponentPropsWithRef<typeof BaseTooltip.Root>, "delay"> {
+  /** Delay in milliseconds before tooltip content becomes visible. @default undefined */
+  delayDuration?: number;
+}
+
+interface TooltipTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseTooltip.Trigger>, "className"> {
+  /** Additional CSS classes merged with the tooltip trigger styles. @default undefined */
+  className?: string;
+  /** Backward-compatible child-slot API that maps the child element to `render`. @default false @deprecated Prefer Base UI's `render` prop. */
+  asChild?: boolean;
+}
+
+interface TooltipContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseTooltip.Popup>, "className"> {
+  /** Additional CSS classes merged with the tooltip popup styles. @default undefined */
+  className?: string;
+  /** The offset in pixels between the trigger and the tooltip popup. @default 4 */
+  sideOffset?: number;
+  /** Preferred side on which the tooltip should appear. @default "top" */
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+/**
+ * Provides a compatibility wrapper for grouping tooltip triggers and content.
+ *
+ * @remarks
+ * - Renders no DOM element by default and returns its children directly
+ * - Built on {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
+ * - Does not expose a `render` prop because it is a pass-through provider shim
+ * - Styling via CSS Modules with `--ac-*` custom properties through descendant components
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TooltipProvider>
+ *   <Tooltip>
+ *     <TooltipTrigger>Hover</TooltipTrigger>
+ *     <TooltipContent>Details</TooltipContent>
+ *   </Tooltip>
+ * </TooltipProvider>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tooltip | Base UI Documentation}
+ */
+const TooltipProvider = ({children}: Readonly<TooltipProviderProps>): React.ReactNode => children;
+TooltipProvider.displayName = "TooltipProvider";
+
+/**
+ * Coordinates tooltip timing, open state, and accessibility semantics.
+ *
+ * @remarks
+ * - Renders no DOM element by default and coordinates descendant tooltip parts
+ * - Built on {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
+ * - Supports composition through descendant `render` props
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover</TooltipTrigger>
+ *   <TooltipContent>Details</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tooltip | Base UI Documentation}
+ */
+function Tooltip(props: Readonly<Tooltip.Props>): React.ReactElement {
+  const {delayDuration, ...otherProps} = props;
+  const tooltipProps = delayDuration === undefined ? otherProps : {...otherProps, delay: delayDuration};
+
+  return <BaseTooltip.Root {...tooltipProps} />;
+}
+Tooltip.displayName = "Tooltip";
+
+/**
+ * Anchors tooltip behavior to an interactive trigger element.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TooltipTrigger>Hover</TooltipTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tooltip | Base UI Documentation}
+ */
+const TooltipTrigger = React.forwardRef<HTMLButtonElement, TooltipTrigger.Props>(
+  (props: Readonly<TooltipTrigger.Props>, ref): React.ReactElement => {
+    // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild support is part of the public API.
+    const {asChild = false, children, className, ...otherProps} = props;
+
+    if (asChild && React.isValidElement(children)) {
+      return (
+        <BaseTooltip.Trigger
+          ref={ref}
+          className={cn(styles.trigger, className)}
+          render={children as React.ReactElement}
+          {...otherProps}
+        />
+      );
+    }
+
+    return (
+      <BaseTooltip.Trigger
+        ref={ref}
+        className={cn(styles.trigger, className)}
+        {...otherProps}>
+        {children}
+      </BaseTooltip.Trigger>
+    );
+  },
+);
+TooltipTrigger.displayName = "TooltipTrigger";
+
+/**
+ * Renders positioned tooltip content inside a portal.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TooltipContent>Details</TooltipContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tooltip | Base UI Documentation}
+ */
+const TooltipContent = React.forwardRef<React.ComponentRef<typeof BaseTooltip.Popup>, TooltipContent.Props>(
+  (props: Readonly<TooltipContent.Props>, ref): React.ReactElement => {
+    const {className, children, side = "top", sideOffset = 4, ...otherProps} = props;
+
+    return (
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner
+          className={styles.positioner}
+          side={side}
+          sideOffset={sideOffset}>
+          <BaseTooltip.Popup
+            ref={ref}
+            className={cn(styles.popup, className)}
+            {...otherProps}>
+            {children}
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    );
+  },
+);
+TooltipContent.displayName = "TooltipContent";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Tooltip {
+  export type Props = TooltipProps;
+  export type State = BaseTooltip.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace TooltipTrigger {
+  export type Props = TooltipTriggerProps;
+  export type State = BaseTooltip.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace TooltipContent {
+  export type Props = TooltipContentProps;
+  export type State = BaseTooltip.Popup.State;
+}
 
 export {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger};

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

@@ -0,0 +1,101 @@
+.root {
+  font-size: 1rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.inline {
+  display: inline;
+}
+
+.word {
+  display: inline-block;
+}
+
+.hiddenCharacter {
+  display: none;
+  color: var(--ac-foreground);
+  opacity: 0;
+}
+
+.visibleCharacter {
+  color: var(--ac-foreground);
+}
+
+.cursor,
+.smoothCursor {
+  display: inline-block;
+  width: 4px;
+  border-radius: var(--ac-radius-xs);
+  background: #3b82f6;
+}
+
+.cursor {
+  height: 1rem;
+}
+
+.smoothRoot {
+  display: flex;
+  gap: 0.25rem;
+  margin: 1.5rem 0;
+}
+
+.smoothViewport {
+  overflow: hidden;
+  padding-bottom: 0.5rem;
+}
+
+.smoothText {
+  white-space: nowrap;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.smoothCursor {
+  display: block;
+  height: 1rem;
+}
+
+@media (min-width: 640px) {
+  .root {
+    font-size: 1.25rem;
+  }
+
+  .cursor {
+    height: 1.5rem;
+  }
+
+  .smoothText {
+    font-size: 1rem;
+  }
+
+  .smoothCursor {
+    height: 1.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .root {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .root {
+    font-size: 3rem;
+  }
+
+  .cursor {
+    height: 2.5rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .smoothText {
+    font-size: 3rem;
+  }
+
+  .smoothCursor {
+    height: 3rem;
+  }
+}