@studiocubics/components 0.0.1

package/src/Display/Tooltip/Tooltip.module.css

@@ -0,0 +1,128 @@
+.root {
+  position: fixed;
+  background: var(--color-surface);
+  color: var(--color-on-surface);
+  padding: var(--spacing-gap) var(--spacing-gap-2);
+  border-radius: var(--shape-br-sm);
+  font-size: var(--fs-body2);
+  font-weight: bold;
+  pointer-events: none;
+  z-index: 9999;
+  text-align: center;
+  --spacing-arrow-offset: 6px;
+}
+.root.arrow-bottom {
+  margin-bottom: var(--spacing-arrow-offset);
+}
+.root.arrow-top {
+  margin-top: var(--spacing-arrow-offset);
+}
+.root.arrow-right {
+  margin-left: var(--spacing-arrow-offset);
+}
+.root.arrow-left {
+  margin-right: var(--spacing-arrow-offset);
+}
+.root.arrow-topLeft {
+  border-top-left-radius: 0;
+}
+.root.arrow-topRight {
+  border-top-right-radius: 0;
+}
+.root.arrow-bottomLeft {
+  border-bottom-left-radius: 0;
+}
+.root.arrow-bottomRight {
+  border-bottom-right-radius: 0;
+}
+/* common arrow style */
+.root::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+/* arrow pointing up (tooltip below anchor) */
+.arrow-bottom::after {
+  bottom: calc(-1 * var(--spacing-arrow-offset));
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: var(--spacing-arrow-offset) var(--spacing-arrow-offset) 0
+    var(--spacing-arrow-offset);
+  border-style: solid;
+  border-color: var(--color-surface) transparent transparent transparent;
+}
+
+/* arrow pointing down (tooltip above anchor) */
+.arrow-top::after {
+  top: calc(-1 * var(--spacing-arrow-offset));
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 var(--spacing-arrow-offset) var(--spacing-arrow-offset)
+    var(--spacing-arrow-offset);
+  border-style: solid;
+  border-color: transparent transparent var(--color-surface) transparent;
+}
+
+/* arrow pointing left (tooltip right of anchor) */
+.arrow-right::after {
+  right: calc(-1 * var(--spacing-arrow-offset));
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: var(--spacing-arrow-offset) 0 var(--spacing-arrow-offset)
+    var(--spacing-arrow-offset);
+  border-style: solid;
+  border-color: transparent transparent transparent var(--color-surface);
+}
+
+/* arrow pointing right (tooltip left of anchor) */
+.arrow-left::after {
+  left: calc(-1 * var(--spacing-arrow-offset));
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: var(--spacing-arrow-offset) var(--spacing-arrow-offset)
+    var(--spacing-arrow-offset) 0;
+  border-style: solid;
+  border-color: transparent var(--color-surface) transparent transparent;
+}
+
+/* arrow pointing down-left (tooltip above-right of anchor) */
+.arrow-topLeft::after {
+  top: calc(-1 * var(--spacing-arrow-offset));
+  left: 0;
+  border-width: 0 var(--spacing-arrow-offset) var(--spacing-arrow-offset)
+    var(--spacing-arrow-offset);
+  border-style: solid;
+  border-color: transparent transparent var(--color-surface) transparent;
+}
+
+/* arrow pointing down-right (tooltip above-left of anchor) */
+.arrow-topRight::after {
+  top: calc(-1 * var(--spacing-arrow-offset));
+  right: 0;
+  border-width: 0 var(--spacing-arrow-offset) var(--spacing-arrow-offset)
+    var(--spacing-arrow-offset);
+  border-style: solid;
+  border-color: transparent transparent var(--color-surface) transparent;
+}
+
+/* arrow pointing up-left (tooltip below-right of anchor) */
+.arrow-bottomLeft::after {
+  bottom: calc(-1 * var(--spacing-arrow-offset));
+  left: 0;
+  border-width: var(--spacing-arrow-offset) var(--spacing-arrow-offset) 0
+    var(--spacing-arrow-offset);
+  border-style: solid;
+  border-color: var(--color-surface) transparent transparent transparent;
+}
+
+/* arrow pointing up-right (tooltip below-left of anchor) */
+.arrow-bottomRight::after {
+  bottom: calc(-1 * var(--spacing-arrow-offset));
+  right: 0;
+  border-width: var(--spacing-arrow-offset) var(--spacing-arrow-offset) 0
+    var(--spacing-arrow-offset);
+  border-style: solid;
+  border-color: var(--color-surface) transparent transparent transparent;
+}

package/src/Display/Tooltip/Tooltip.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useMemo,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { createPortal } from "react-dom";
+import { useTooltip } from "./useTooltip";
+import styles from "./Tooltip.module.css";
+import getArrowDirection from "./getArrowDirection";
+import { cn, type SafePositionOptions } from "@studiocubics/utils";
+
+export interface TooltipProps extends SafePositionOptions {
+  title?: ReactNode;
+  renderArrow?: boolean;
+  children: ReactElement;
+}
+
+export function Tooltip({
+  title,
+  children,
+  renderArrow = false,
+  anchorOrigin,
+  transformOrigin,
+  margin,
+}: TooltipProps) {
+  const options = useMemo(() => {
+    return {
+      anchorOrigin: anchorOrigin ?? "bottom center",
+      transformOrigin: transformOrigin ?? "top center",
+      margin: margin ?? 8,
+    };
+  }, [anchorOrigin, transformOrigin, margin]);
+  const { anchorRef, showTooltip, tooltipRef, position, updatePosition } =
+    useTooltip(options);
+
+  const direction = renderArrow
+    ? getArrowDirection(
+        anchorOrigin ?? "bottom center",
+        transformOrigin ?? "top center"
+      )
+    : null;
+
+  // Ensure only one child is passed
+  const child = Children.only(children);
+
+  const childWithRef = () => {
+    if (isValidElement(child))
+      return cloneElement(child, { ref: anchorRef } as {
+        ref: RefObject<HTMLElement | null>;
+      });
+    else {
+      throw new Error(
+        "Children passed to Tooltip should be a valid react element"
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (showTooltip) updatePosition();
+  }, [title, showTooltip, updatePosition]);
+
+  if (!title) return child;
+
+  return (
+    <>
+      {showTooltip &&
+        createPortal(
+          <div
+            className={cn(
+              styles.root,
+              renderArrow && direction ? styles[`arrow-${direction}`] : ""
+            )}
+            ref={tooltipRef}
+            style={{
+              left: `${position.x}px`,
+              top: `${position.y}px`,
+            }}
+          >
+            {title}
+          </div>,
+          document.body
+        )}
+      {childWithRef()}
+    </>
+  );
+}

package/src/Display/Tooltip/getArrowDirection.ts

@@ -0,0 +1,55 @@
+export default function getArrowDirection(
+  anchorOrigin: string,
+  transformOrigin: string
+):
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "topLeft"
+  | "topRight"
+  | "bottomLeft"
+  | "bottomRight"
+  | null {
+  const parse = (origin: string) => origin.toLowerCase().trim().split(/\s+/);
+
+  const [aV = "top", aH = "left"] = parse(anchorOrigin);
+  const [tV = "top", tH = "left"] = parse(transformOrigin);
+
+  // Vertical priority
+  if (aV !== tV) {
+    // anchor top, tooltip attached bottom -> tooltip is above anchor -> arrow on bottom side
+    if (aV === "top" && tV === "bottom") {
+      if (aH === "left" && tH === "right") return "bottomRight";
+      if (aH === "right" && tH === "left") return "bottomLeft";
+      return "bottom";
+    }
+
+    // anchor bottom, tooltip attached top -> tooltip is below anchor -> arrow on top side
+    if (aV === "bottom" && tV === "top") {
+      if (aH === "left" && tH === "right") return "topRight";
+      if (aH === "right" && tH === "left") return "topLeft";
+      return "top";
+    }
+  }
+
+  // Horizontal fallback
+  if (aH !== tH) {
+    // anchor left, tooltip attached right -> tooltip sits left of anchor -> arrow on right side
+    if (aH === "left" && tH === "right") {
+      if (aV === "top" && tV === "top") return "topRight";
+      if (aV === "bottom" && tV === "bottom") return "bottomRight";
+      return "right";
+    }
+
+    // anchor right, tooltip attached left -> tooltip sits right of anchor -> arrow on left side
+    if (aH === "right" && tH === "left") {
+      if (aV === "top" && tV === "top") return "topLeft";
+      if (aV === "bottom" && tV === "bottom") return "bottomLeft";
+      return "left";
+    }
+  }
+
+  // No clear difference (both centers or identical origins)
+  return null;
+}

package/src/Display/Tooltip/useTooltip.tsx

@@ -0,0 +1,63 @@
+"use client"
+import {
+  calculateSafePosition,
+  type Position,
+  type SafePositionOptions,
+} from "@studiocubics/utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useTooltip(options: SafePositionOptions = {}) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [position, setPosition] = useState<Position>({ x: -9999, y: -9999 });
+  const anchorRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = anchorRef.current;
+    if (!element) return;
+
+    const handleMouseEnter = () => {
+      setShowTooltip(true);
+    };
+
+    const handleMouseLeave = () => {
+      setShowTooltip(false);
+    };
+
+    element.addEventListener("mouseenter", handleMouseEnter);
+    element.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, []);
+
+  const updatePosition = useCallback(() => {
+    const safePos = calculateSafePosition(
+      tooltipRef.current,
+      anchorRef.current,
+      options
+    );
+
+    setPosition(safePos);
+  }, [options]);
+
+  useEffect(() => {
+    if (!showTooltip) return;
+
+    // Initial position calculation
+    updatePosition();
+
+    // Update position on scroll and resize
+    window.addEventListener("scroll", updatePosition);
+    window.addEventListener("resize", updatePosition);
+
+    return () => {
+      window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [showTooltip]);
+
+  return { showTooltip, position, anchorRef, tooltipRef, updatePosition };
+}

package/src/Display/_index.ts

@@ -0,0 +1,12 @@
+export * from "./Accordion/_index";
+export * from "./Chip/Chip";
+export * from "./IdentityDisplay/IdentityDisplay";
+export * from "./InputErrors/InputErrors";
+export * from "./Kbd/_index";
+export * from "./LabeledValue/LabeledValue";
+export * from "./List/List";
+export * from "./Skeleton/Skeleton";
+export * from "./Toast/_index";
+export * from "./Tooltip/Tooltip";
+export * from "./Tooltip/useTooltip";
+export * from "./Tooltip/getArrowDirection";

package/src/Forms/ConfirmationForm/ConfirmationForm.module.css

@@ -0,0 +1,23 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--fs-body2);
+  gap: var(--spacing-gap-3);
+  color: var(--color-on-background-faint);
+  & > h4 {
+    font-size: 1.2em;
+    color: var(--color-on-background-faint);
+    padding-bottom: var(--spacing-gap-3);
+    border-bottom: 1px solid var(--color-outline);
+  }
+}
+.danger {
+  & > h4 {
+    color: var(--color-error);
+  }
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-2);
+}

package/src/Forms/ConfirmationForm/ConfirmationForm.tsx

@@ -0,0 +1,60 @@
+import type { ComponentProps } from "react";
+import styles from "./ConfirmationForm.module.css";
+import { cn } from "@studiocubics/utils";
+import { Button, type ButtonProps } from "../../Inputs/Button/Button";
+export interface ConfirmationFormProps extends ComponentProps<"form"> {
+  formTitle?: string;
+  onCancel?: () => void;
+  variant?: "danger" | "info";
+  confirmText?: string;
+  cancelText?: string;
+  disabled?: boolean;
+  slotProps?: {
+    confirmButton?: ButtonProps;
+    cancelButton?: ButtonProps;
+  };
+}
+export function ConfirmationForm(props: ConfirmationFormProps) {
+  const {
+    onCancel,
+    formTitle,
+    variant = "info",
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    disabled,
+    slotProps = {},
+    className,
+    children,
+    ...rest
+  } = props;
+  return (
+    <form
+      aria-disabled={disabled}
+      className={cn(styles.root, className, styles[variant])}
+      {...rest}
+    >
+      <h4>{formTitle}</h4>
+      {children}
+      <div className={styles.actions}>
+        <Button
+          variant={variant == "danger" ? "contained" : "text"}
+          disabled={disabled}
+          type="button"
+          onClick={() => onCancel?.()}
+          {...slotProps.cancelButton}
+        >
+          {cancelText}
+        </Button>
+        <Button
+          disabled={disabled}
+          variant={variant == "danger" ? "text" : "contained"}
+          color={variant == "danger" ? "error" : undefined}
+          type="submit"
+          {...slotProps.confirmButton}
+        >
+          {confirmText}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/src/Forms/_index.ts

@@ -0,0 +1 @@
+export * from "./ConfirmationForm/ConfirmationForm";

package/src/Inputs/Button/Button.module.css

@@ -0,0 +1,131 @@
+.root {
+  --button-color: var(--color-on-background);
+  --button-background: none;
+  --button-hover-color: var(--color-on-background);
+  --button-hover-background: var(--color-background-faint);
+  --button-outline-color: var(--color-on-background);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-gap);
+  padding: var(--spacing-gap) calc(1.618 * var(--spacing-gap-3));
+  cursor: pointer;
+  border: none;
+  background: var(--button-background);
+  color: var(--button-color);
+  font-family: var(--font-p);
+  font-size: var(--fs-body2);
+  font-weight: bold;
+  transition: all var(--transition-time) var(--transition-tf);
+  &:not(:disabled):hover {
+    color: var(--button-hover-color);
+    background: color-mix(
+      in srgb,
+      var(--button-hover-background) 50%,
+      transparent
+    );
+  }
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: max-content;
+}
+.square {
+  padding: var(--spacing-gap-2);
+}
+.root:disabled {
+  cursor: not-allowed;
+}
+.root:focus-visible {
+  outline: var(--focus-ring);
+}
+.size_sm {
+  padding: var(--spacing-gap) calc(1.618 * var(--spacing-gap));
+  border-radius: var(--shape-br-sm);
+  font-size: 0.9em;
+  &.square {
+    padding: var(--spacing-gap);
+  }
+}
+.size_md {
+  padding: var(--spacing-gap-2) calc(1.618 * var(--spacing-gap-2));
+  border-radius: var(--shape-br-md);
+  &.square {
+    padding: var(--spacing-gap-2);
+  }
+}
+.size_lg {
+  font-size: var(--fs-body);
+  padding: var(--spacing-gap-3) calc(1.618 * var(--spacing-gap-3));
+  border-radius: var(--shape-br-lg);
+  &.square {
+    padding: var(--spacing-gap-3);
+  }
+}
+.contained {
+  --button-color: var(--color-background);
+  --button-background: var(--color-on-background);
+
+  &:not(:disabled):hover {
+    background: var(--button-hover-background);
+  }
+}
+.outlined {
+  border: 1px solid var(--button-outline-color);
+}
+
+.position_absolute {
+  position: absolute;
+}
+.position_relative {
+  position: relative;
+}
+.position_fixed {
+  position: fixed;
+}
+.position_sticky {
+  position: sticky;
+}
+.fullWidth {
+  width: 100%;
+}
+.root[data-color="primary"] {
+  --button-color: var(--color-primary);
+  --button-background: none;
+  --button-hover-color: var(--color-on-primary-container);
+  --button-hover-background: var(--color-primary-container);
+  --button-outline-color: var(--color-primary);
+}
+.root[data-color="secondary"] {
+  --button-color: var(--color-secondary);
+  --button-background: none;
+  --button-hover-color: var(--color-on-secondary-container);
+  --button-hover-background: var(--color-secondary-container);
+  --button-outline-color: var(--color-secondary);
+}
+.root[data-color="error"] {
+  --button-color: var(--color-error);
+  --button-background: none;
+  --button-hover-color: var(--color-on-error-container);
+  --button-hover-background: var(--color-error-container);
+  --button-outline-color: var(--color-error);
+}
+.contained[data-color="primary"] {
+  --button-color: var(--color-on-primary);
+  --button-background: var(--color-primary);
+}
+.contained[data-color="secondary"] {
+  --button-color: var(--color-on-secondary);
+  --button-background: var(--color-secondary);
+}
+.contained[data-color="error"] {
+  --button-color: var(--color-on-error);
+  --button-background: var(--color-error);
+}