@studiocubics/components 0.0.1

package/src/Misc/TransitionAnimation/TransitionAnimation.module.css

@@ -0,0 +1,131 @@
+/* Grow Animation - Max-Width/Max-Height based */
+.growEnter {
+  transform: scale(0);
+  max-width: 0;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.growEnterActive {
+  transform: scale(1);
+  max-width: 100vw;
+  max-height: 100vh;
+  opacity: 1;
+  overflow: hidden;
+  transition:
+    transform var(--transition-tf),
+    max-width var(--transition-tf),
+    max-height var(--transition-tf),
+    opacity var(--transition-tf);
+}
+
+.growExit {
+  transform: scale(1);
+  max-width: 100vw;
+  max-height: 100vh;
+  opacity: 1;
+  overflow: hidden;
+}
+
+.growExitActive {
+  transform: scale(0);
+  max-width: 0;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    transform var(--transition-tf),
+    max-width var(--transition-tf),
+    max-height var(--transition-tf),
+    opacity var(--transition-tf);
+}
+
+/* Fade Animation */
+.fadeEnter {
+  opacity: 0;
+}
+
+.fadeEnterActive {
+  opacity: 1;
+  transition: opacity var(--transition-tf);
+}
+
+.fadeExit {
+  opacity: 1;
+}
+
+.fadeExitActive {
+  opacity: 0;
+  transition: opacity var(--transition-tf);
+}
+
+/* Slide Animation */
+.slideEnter {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+.slideEnterActive {
+  transform: translateY(0);
+  opacity: 1;
+  transition:
+    transform var(--transition-tf),
+    opacity var(--transition-tf);
+}
+
+.slideExit {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.slideExitActive {
+  transform: translateY(-20px);
+  opacity: 0;
+  transition:
+    transform var(--transition-tf),
+    opacity var(--transition-tf);
+}
+
+/* Zoom Animation - Max-Width/Max-Height based */
+.zoomEnter {
+  transform: scale(0.5);
+  max-width: 0;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.zoomEnterActive {
+  transform: scale(1);
+  max-width: 100vw;
+  max-height: 100vh;
+  opacity: 1;
+  overflow: hidden;
+  transition:
+    transform var(--transition-tf),
+    max-width var(--transition-tf),
+    max-height var(--transition-tf),
+    opacity var(--transition-tf);
+}
+
+.zoomExit {
+  transform: scale(1);
+  max-width: 100vw;
+  max-height: 100vh;
+  opacity: 1;
+  overflow: hidden;
+}
+
+.zoomExitActive {
+  transform: scale(1.5);
+  max-width: 0;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    transform var(--transition-tf),
+    max-width var(--transition-tf),
+    max-height var(--transition-tf),
+    opacity var(--transition-tf);
+}

package/src/Misc/TransitionAnimation/TransitionAnimation.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import {
+  useState,
+  useEffect,
+  useRef,
+  cloneElement,
+  type ReactElement,
+  type CSSProperties,
+} from "react";
+import styles from "./TransitionAnimation.module.css";
+import { cn } from "@studiocubics/utils";
+
+/**
+ * Animation types available for the TransitionAnimation component
+ */
+export type AnimationType = "grow" | "fade" | "slide" | "zoom";
+
+/**
+ * Props for the TransitionAnimation component
+ */
+export interface TransitionAnimationProps {
+  /**
+   * The type of animation to apply on mount/unmount
+   * - 'grow': Scales from 0 to 1 (mount) and 1 to 0 (unmount)
+   * - 'fade': Fades opacity from 0 to 1 (mount) and 1 to 0 (unmount)
+   * - 'slide': Slides down with fade (mount) and slides up with fade (unmount)
+   * - 'zoom': Scales from 0.5 to 1 (mount) and 1 to 1.5 (unmount)
+   * @default "grow"
+   */
+  animation?: AnimationType;
+
+  /**
+   * Controls whether the child component should be mounted and animated
+   * - When changed to true: triggers entry animation
+   * - When changed to false: triggers exit animation then unmounts
+   */
+  in: boolean;
+
+  /**
+   * A single React element to be animated
+   * The component will clone this element and apply animation classes to it
+   */
+  children: ReactElement<{ className?: string; style?: React.CSSProperties }>;
+
+  /**
+   * Duration of the animation in milliseconds
+   * @default 300
+   */
+  duration?: number;
+
+  /**
+   * If true, the child component will be unmounted after the exit animation completes
+   * If false, the child will remain mounted but hidden (opacity 0, scale 0, etc.)
+   * @default true
+   */
+  unmountOnExit?: boolean;
+
+  /**
+   * If true, the child component will be unmounted immediately without playing the exit animation
+   * This takes precedence over unmountOnExit
+   * @default false
+   */
+  mountOnly?: boolean;
+
+  /**
+   * The origin of the transform duh
+   */
+  transformOrigin?: CSSProperties["transformOrigin"];
+}
+
+/**
+ * TransitionAnimation Component
+ *
+ * A component that applies smooth entry and exit animations to its child element.
+ * The child is mounted when `in` becomes true with an entry animation,
+ * and unmounted when `in` becomes false after playing an exit animation.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <TransitionAnimation animation="grow" in={open}>
+ *   <div className="my-content">Hello World</div>
+ * </TransitionAnimation>
+ * ```
+ */
+export const TransitionAnimation: React.FC<TransitionAnimationProps> = ({
+  animation = "grow",
+  in: inProp,
+  children,
+  duration = 500,
+  unmountOnExit = true,
+  mountOnly = false,
+  transformOrigin,
+}) => {
+  const [shouldRender, setShouldRender] = useState(inProp);
+  const [animationState, setAnimationState] = useState<
+    "enter" | "entering" | "exit" | "exiting"
+  >("enter");
+  const timeoutRef = useRef<number>(null);
+
+  useEffect(() => {
+    if (inProp) {
+      setShouldRender(true);
+      setAnimationState("enter");
+
+      // Trigger enter animation on next frame
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setAnimationState("entering");
+        });
+      });
+    } else if (shouldRender) {
+      if (mountOnly) {
+        // Immediately unmount without animation
+        setShouldRender(false);
+      } else {
+        setAnimationState("exiting");
+
+        if (unmountOnExit) {
+          // Wait for exit animation to complete before unmounting
+          timeoutRef.current = window.setTimeout(() => {
+            setShouldRender(false);
+            setAnimationState("exit");
+          }, duration);
+        }
+      }
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [inProp, duration, shouldRender, unmountOnExit, mountOnly]);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  const getAnimationClass = () => {
+    switch (animationState) {
+      case "enter":
+        return styles[`${animation}Enter`];
+      case "entering":
+        return styles[`${animation}EnterActive`];
+      case "exiting":
+        return styles[`${animation}ExitActive`];
+      case "exit":
+        return styles[`${animation}Exit`];
+    }
+  };
+
+  const childClassName = children.props.className || "";
+  const childStyle = children.props.style || {};
+
+  return cloneElement(children, {
+    className: cn(childClassName, getAnimationClass()),
+    style: {
+      ...childStyle,
+      transitionDuration: `${duration}ms`,
+      transformOrigin,
+    },
+  } as any);
+};

package/src/Misc/_index.ts

@@ -0,0 +1,6 @@
+export * from "./Ripple/Ripple";
+export * from "./PoweredByBanner/PoweredByBanner";
+export * from "./Cursor/Cursor";
+export * from "./Logos";
+export * from "./Spinner/Spinner";
+export * from "./TransitionAnimation/TransitionAnimation";

package/src/Navigation/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,22 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: 1ch;
+  & > svg {
+    color: var(--color-on-background-faint);
+  }
+}
+.item {
+  display: content;
+  color: var(--color-on-background-faint);
+  &:not(.activeItem):hover {
+    color: var(--color-primary);
+  }
+}
+.activeItem {
+  color: var(--color-on-background);
+  /* border: 1px solid blue; */
+}
+.ellipses {
+  color: var(--color-on-background-faint);
+}

package/src/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Fragment, type ReactElement, type ReactNode, useState } from "react";
+import { useBreadcrumbs } from "./useBreadcrumbs";
+import { BreadcrumbsItem, type BreadcrumbsItemProps } from "./BreadcrumbsItem";
+import { cn } from "@studiocubics/utils";
+import styles from "./Breadcrumbs.module.css";
+
+export interface BreadCrumbsProps {
+  children: ReactElement[];
+  /**
+   * For controlled Breadcrumbs pass the onChange function
+   */
+  onChange?: (pageNumber: number) => void;
+  /**
+   * How many siblings of the active item should be shown
+   * @default 1
+   */
+  siblingCount?: number;
+  /**
+   * How many of the boundary items should be shown
+   * @default 0
+   */
+  boundaryCount?: number;
+  /**
+   * Crumb that will be selected by default
+   * @default 1
+   */
+  defaultActive?: number;
+  /**
+   * Node to use as separator
+   */
+  separator?: ReactNode;
+  /**
+   * Node to use as ellipsis
+   */
+  ellipsis?: ReactNode;
+  /**
+   * Function that can be used to modify the rendered BreadcrumbsItem component
+   */
+  renderItem?: (
+    props: BreadcrumbsItemProps,
+    key?: string | number,
+  ) => ReactElement;
+}
+
+export const ChevronRightIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-chevron-right-icon lucide-chevron-right"
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+export const EllipsisIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-ellipsis-icon lucide-ellipsis"
+  >
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="19" cy="12" r="1" />
+    <circle cx="5" cy="12" r="1" />
+  </svg>
+);
+export function Breadcrumbs(props: BreadCrumbsProps) {
+  const {
+    onChange,
+    boundaryCount = 1,
+    siblingCount = 0,
+    children,
+    defaultActive = 0,
+    separator = ChevronRightIcon,
+    ellipsis = EllipsisIcon,
+    renderItem = (props, key?) => <BreadcrumbsItem key={key} {...props} />,
+  } = props;
+  const [activeCrumb, setActiveCrumb] = useState<number>(defaultActive);
+
+  const breadcrumbRange = useBreadcrumbs({
+    activeCrumb,
+    crumbs: children,
+    boundaryCount,
+    siblingCount,
+  });
+
+  function handleClick(i: number) {
+    setActiveCrumb(i);
+    if (onChange) onChange(i);
+  }
+
+  return (
+    <span className={styles.root}>
+      {breadcrumbRange.map((item, idx) => (
+        <Fragment key={idx}>
+          {renderItem({
+            className: cn(
+              styles.item,
+              activeCrumb === idx ? styles.activeItem : "",
+              item == "ellipsis" ? styles.ellipsis : "",
+            ),
+            onClick: () => handleClick(idx),
+            children: item == "ellipsis" ? ellipsis : item,
+          })}
+          {idx !== breadcrumbRange.length - 1 &&
+            item !== "ellipsis" &&
+            breadcrumbRange[idx + 1] != "ellipsis" &&
+            separator}
+        </Fragment>
+      ))}
+    </span>
+  );
+}

package/src/Navigation/Breadcrumbs/BreadcrumbsItem.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { type ElementType } from "react";
+
+interface BreadcrumbsItemBaseProps {
+  href?: "string";
+}
+
+const defaultElement = "span";
+type DefaultElement = typeof defaultElement;
+
+export type BreadcrumbsItemProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, BreadcrumbsItemBaseProps>;
+
+const BreadcrumbsItemBase = <C extends ElementType = DefaultElement>(
+  props: BreadcrumbsItemProps<C>
+) => {
+  const { as, children, ...rest } = props;
+  const Component = (as || defaultElement) as ElementType;
+  return <Component {...rest}>{children}</Component>;
+};
+
+BreadcrumbsItemBase.displayName = "BreadcrumbsItem";
+export const BreadcrumbsItem = BreadcrumbsItemBase as PolymorphicComponentType<
+  BreadcrumbsItemBaseProps,
+  DefaultElement
+>;

package/src/Navigation/Breadcrumbs/_index.ts

@@ -0,0 +1,3 @@
+export * from "./Breadcrumbs";
+export * from "./BreadcrumbsItem";
+export * from "./useBreadcrumbs";

package/src/Navigation/Breadcrumbs/useBreadcrumbs.tsx

@@ -0,0 +1,74 @@
+import type { ReactElement } from "react";
+
+export function useBreadcrumbs({
+  activeCrumb,
+  crumbs,
+  siblingCount = 0,
+  boundaryCount = 1,
+}: {
+  activeCrumb: number;
+  crumbs: ReactElement[];
+  siblingCount?: number;
+  boundaryCount?: number;
+}) {
+  const crumbsClone = Array.from(crumbs);
+  const count = crumbs.length;
+  if (count <= boundaryCount * 2 + siblingCount * 2 + 2) {
+    // If total items fit without ellipsis, just return all crumbs
+    return crumbsClone;
+  }
+  const resolvedBoundaryCount = Math.min(boundaryCount, count);
+
+  console.log("crumbs", crumbsClone);
+
+  const startPages = crumbsClone.slice(0, resolvedBoundaryCount + 1);
+  const endPages = crumbsClone.slice(
+    count - 1 - resolvedBoundaryCount,
+    crumbsClone.length,
+  );
+
+  const siblingsStart = Math.max(
+    Math.min(
+      activeCrumb - siblingCount,
+      count - boundaryCount - siblingCount * 2 - 1,
+    ),
+    boundaryCount + 2,
+  );
+  const siblingsEnd = Math.min(
+    Math.max(activeCrumb + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? count - 1 - endPages.length : count - 1,
+  );
+
+  console.log("siblingsStart", siblingsStart);
+  console.log("siblingsEnd", siblingsEnd);
+
+  const itemList: (ReactElement | "ellipsis")[] = [];
+
+  // Start pages
+  itemList.push(...startPages);
+
+  // Ellipsis after start pages
+  if (siblingsStart > boundaryCount + 2) {
+    itemList.push("ellipsis");
+  } else if (boundaryCount + 1 < count - boundaryCount) {
+    itemList.push(crumbs[boundaryCount + 1]);
+  }
+  // Middle pages
+  for (let i = siblingsStart; i <= siblingsEnd; i++) {
+    itemList.push(crumbs[i]);
+  }
+
+  // Ellipsis before end pages
+  if (siblingsEnd < count - 1 - boundaryCount) {
+    itemList.push("ellipsis");
+  } else if (count - boundaryCount > boundaryCount) {
+    itemList.push(crumbs[count - boundaryCount]);
+  }
+
+  const endPagesFiltered = endPages.filter((p) => !itemList.includes(p));
+  console.log("endPagesFiltered", endPagesFiltered);
+
+  itemList.push(...endPagesFiltered);
+
+  return itemList;
+}

package/src/Navigation/Pagination/Pagination.module.css

@@ -0,0 +1,41 @@
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-2);
+  list-style-type: none;
+}
+.item {
+  --pagination-item-fs: var(--fs-body2);
+  cursor: pointer;
+  color: var(--color-on-background);
+  border-radius: var(--shape-br-sm);
+  font-size: var(--pagination-item-fs);
+  transition: all var(--transition-time) var(--transition-tf);
+  width: 32px;
+  height: 32px;
+  min-width: fit-content;
+  padding-inline: var(--spacing-gap);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.item:not(.disabled):hover {
+  background: var(--color-surface);
+}
+.activeItem {
+  outline: 1px solid var(--color-primary);
+}
+
+.icon > svg {
+  --pagination-item-icon-size: calc(1.25 * var(--pagination-item-fs));
+  width: var(--pagination-item-icon-size);
+  height: var(--pagination-item-icon-size);
+}
+.icon:nth-child(2) ~ .icon {
+  transform: rotate(180deg);
+}