@studiocubics/components 0.0.1 → 0.0.2

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

@@ -1,128 +0,0 @@
-.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

@@ -1,93 +0,0 @@
-"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

@@ -1,55 +0,0 @@
-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

@@ -1,63 +0,0 @@
-"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/Forms/ConfirmationForm/ConfirmationForm.module.css

@@ -1,23 +0,0 @@
-.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

@@ -1,60 +0,0 @@
-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/Inputs/Button/Button.module.css

@@ -1,131 +0,0 @@
-.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);
-}