@studiocubics/components 0.0.1 → 0.0.2

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

@@ -1,131 +0,0 @@
-/* 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

@@ -1,166 +0,0 @@
-"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/Navigation/Breadcrumbs/Breadcrumbs.module.css

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

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

@@ -1,31 +0,0 @@
-"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/useBreadcrumbs.tsx

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

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