@studiocubics/components 0.0.1

package/src/Navigation/Pagination/Pagination.tsx

@@ -0,0 +1,187 @@
+"use client";
+import { useState, type ReactElement, type ReactNode } from "react";
+import styles from "./Pagination.module.css";
+import { usePagination } from "./usePagination";
+import { type PaginationItemProps, PaginationItem } from "./PaginationItem";
+import { cn } from "@studiocubics/utils";
+
+export interface PaginationProps {
+  /**
+   * Total number of pages
+   */
+  count: number;
+  /**
+   * For controlled Pagination pass the state
+   */
+  page?: number;
+  /**
+   * For controlled Pagination pass the onChange function
+   */
+  onChange?: (pageNumber: number) => void;
+  /**
+   * Page that will be selected by default
+   * @default 1
+   */
+  defaultPage?: number;
+  /**
+   * How many siblings of the active item should be shown
+   * @default 1
+   */
+  siblingCount?: number;
+  /**
+   * How many of the boundary items should be shown
+   * @default 1
+   */
+  boundaryCount?: number;
+  /**
+   * Function that can be used to modify the rendered PaginationItem component
+   */
+  renderItem?: (
+    props: PaginationItemProps,
+    key?: string | number
+  ) => ReactElement;
+  /**
+   * Shows the skip to first button
+   */
+  showFirstButton?: boolean;
+  /**
+   * Shows the skip to last button
+   */
+  showLastButton?: boolean;
+  /**
+   * Icon for first button and the last button icon which will be 180deg
+   */
+  firstLastButtonIcon?: ReactNode;
+  /**
+   * Icon for prev button and the next button icon which will be 180deg
+   */
+  prevNextButtonIcon?: ReactNode;
+}
+const arrowLeftIcon = (
+  <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-arrow-left-icon lucide-arrow-left"
+  >
+    <path d="m12 19-7-7 7-7" />
+    <path d="M19 12H5" />
+  </svg>
+);
+const ArrowLeftToLineIcon = (
+  <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-arrow-left-to-line-icon lucide-arrow-left-to-line"
+  >
+    <path d="M3 19V5" />
+    <path d="m13 6-6 6 6 6" />
+    <path d="M7 12h14" />
+  </svg>
+);
+export function Pagination(props: PaginationProps) {
+  const {
+    count,
+    page: pageProp,
+    onChange,
+    defaultPage = 1,
+    boundaryCount = 1,
+    siblingCount = 1,
+    showFirstButton = true,
+    showLastButton = true,
+    firstLastButtonIcon = ArrowLeftToLineIcon,
+    prevNextButtonIcon = arrowLeftIcon,
+    renderItem = (props, key?) => <PaginationItem key={key} {...props} />,
+  } = props;
+
+  const [page, setPage] = useState(defaultPage);
+  const activePage = pageProp ?? page;
+
+  const paginationRange = usePagination({
+    count,
+    page: activePage,
+    siblingCount,
+    boundaryCount,
+  });
+
+  function renderIconButton({
+    disabled,
+    onClick,
+    icon,
+  }: {
+    disabled: boolean;
+    onClick: () => void;
+    icon: React.ReactNode;
+  }) {
+    return renderItem({
+      className: cn(styles.item, styles.icon, disabled ? styles.disabled : ""),
+      onClick: !disabled ? onClick : undefined,
+      children: icon,
+    });
+  }
+
+  function handleClick(i: number) {
+    if (i < 1 || i > count) return;
+    setPage(i);
+    if (onChange) onChange(i);
+  }
+
+  return (
+    <ul className={styles.root}>
+      {showFirstButton &&
+        renderIconButton({
+          disabled: activePage === 1,
+          onClick: () => handleClick(1),
+          icon: firstLastButtonIcon,
+        })}
+      {renderIconButton({
+        disabled: activePage === 1,
+        onClick: () => handleClick(activePage - 1),
+        icon: prevNextButtonIcon,
+      })}
+
+      {paginationRange.map((item, idx) =>
+        item === "ellipses" ? (
+          <li key={`dots-${idx}`}>…</li>
+        ) : (
+          renderItem(
+            {
+              className: cn(
+                styles.item,
+                activePage === item ? styles.activeItem : ""
+              ),
+              onClick: () => handleClick(item),
+              children: item,
+            },
+            item
+          )
+        )
+      )}
+      {renderIconButton({
+        disabled: activePage === count,
+        onClick: () => handleClick(activePage + 1),
+        icon: prevNextButtonIcon,
+      })}
+
+      {showLastButton &&
+        renderIconButton({
+          disabled: activePage === count,
+          onClick: () => handleClick(count),
+          icon: firstLastButtonIcon,
+        })}
+    </ul>
+  );
+}

package/src/Navigation/Pagination/PaginationItem.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { type ElementType } from "react";
+
+interface PaginationItemBaseProps {
+  to?: "string";
+}
+
+export type PaginationItemProps<C extends ElementType = "li"> =
+  PolymorphicComponentProps<C, PaginationItemBaseProps>;
+
+const PaginationItemBase = <C extends ElementType = "button">(
+  props: PaginationItemProps<C>
+) => {
+  const { to, as, children, ...rest } = props;
+  const Component = (as || to ? "a" : "li") as ElementType;
+  return <Component {...rest}>{children}</Component>;
+};
+
+PaginationItemBase.displayName = "PaginationItem";
+export const PaginationItem = PaginationItemBase as PolymorphicComponentType<
+  PaginationItemBaseProps,
+  "li"
+>;

package/src/Navigation/Pagination/_index.ts

@@ -0,0 +1,3 @@
+export * from "./Pagination";
+export * from "./PaginationItem";
+export * from "./usePagination";

package/src/Navigation/Pagination/usePagination.tsx

@@ -0,0 +1,65 @@
+export function usePagination({
+  count,
+  page,
+  siblingCount = 1,
+  boundaryCount = 1,
+}: {
+  count: number;
+  page: number;
+  siblingCount?: number;
+  boundaryCount?: number;
+}) {
+  const startPages = Array.from(
+    { length: Math.min(boundaryCount, count) },
+    (_, i) => i + 1
+  );
+
+  const endPages = Array.from(
+    { length: Math.min(boundaryCount, count) },
+    (_, i) => count - i
+  ).reverse();
+
+  // siblingsStart determines the first page number in the sibling range:
+  // - Math.min ensures we don't go beyond the range where siblings would overlap with end pages.
+  // - Math.max ensures we don't go below the first possible sibling after the boundary pages.
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+
+  // The upper bound ensures siblings do not overlap with end pages; if endPages exist, use the first end page minus 2, otherwise use count - 1.
+  const siblingsEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : count - 1
+  );
+
+  const itemList: (number | "ellipses")[] = [];
+
+  // Start pages
+  itemList.push(...startPages);
+
+  // Ellipses after start pages
+  if (siblingsStart > boundaryCount + 2) {
+    itemList.push("ellipses");
+  } else if (boundaryCount + 1 < count - boundaryCount) {
+    itemList.push(boundaryCount + 1);
+  }
+
+  // Middle pages
+  for (let i = siblingsStart; i <= siblingsEnd; i++) {
+    itemList.push(i);
+  }
+
+  // Ellipses before end pages
+  if (siblingsEnd < count - boundaryCount - 1) {
+    itemList.push("ellipses");
+  } else if (count - boundaryCount > boundaryCount) {
+    itemList.push(count - boundaryCount);
+  }
+
+  // End pages
+  const endPagesFiltered = endPages.filter((p) => !itemList.includes(p));
+  itemList.push(...endPagesFiltered);
+
+  return itemList;
+}

package/src/Navigation/Tabs/Tab/Tab.module.css

@@ -0,0 +1,43 @@
+.root {
+  cursor: pointer;
+  position: relative;
+  padding: var(--spacing-gap) var(--spacing-gap-2);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap);
+
+  font-size: var(--fs-body2);
+  font-family: var(--font-p);
+  color: var(--color-on-background);
+  text-wrap: nowrap;
+
+  border-radius: var(--shape-br-sm);
+  border: none;
+  background-color: transparent;
+
+  transition: background-color var(--transition-time) var(--transition-tf);
+}
+.clickable:not(.selected):hover {
+  background-color: var(--color-background-faint);
+  color: var(--color-on-surface);
+}
+
+.selected {
+  font-weight: bold;
+  color: var(--color-primary);
+  &:hover {
+    background-color: transparent;
+    color: var(--color-on-surface);
+  }
+}
+
+.disabled {
+  color: var(--color-on-background-faint);
+  cursor: not-allowed;
+}
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}

package/src/Navigation/Tabs/Tab/Tab.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import {
+  type ComponentProps,
+  type ElementType,
+  type ReactNode,
+  useEffect,
+  useRef,
+  type MouseEvent,
+} from "react";
+import styles from "./Tab.module.css";
+import { useTabs } from "../Tabs";
+import { cn, mergeRefs } from "@studiocubics/utils";
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+
+/**
+ * Props specific to the Tab component.
+ *
+ * These extend the intrinsic element props of whatever element is passed via `as`.
+ * @group Tab
+ * @category inputs
+ */
+export interface TabBaseProps {
+  selected?: boolean;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+  disabled?: boolean;
+  href?: ComponentProps<"a">["href"];
+  slotProps?: {
+    startIcon?: ComponentProps<"span">;
+    endIcon?: ComponentProps<"span">;
+  };
+}
+const defaultElement = "button";
+type DefaultElement = typeof defaultElement;
+/**
+ * Polymorphic props for the Tab component.
+ *
+ * `C` defines the element type rendered by the component (e.g. `"Tab"`, `"a"`, `"div"`).
+ * All intrinsic props for `C` are supported unless overridden by `TabBaseProps`.
+ *
+ * @group Tab
+ * @category inputs
+ */
+export type TabProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, TabBaseProps>;
+
+/**
+ * Base implementation for the Tab component.
+ *
+ * This is a polymorphic component that defaults to rendering a `<Tab>`.
+ * Use the `as` prop to change the underlying element.
+ *
+ * @typeParam C - The intrinsic or custom element type to render.
+ *
+ * @group Tab
+ * @category inputs
+ */
+function TabBase<C extends ElementType = DefaultElement>(props: TabProps<C>) {
+  const {
+    as,
+    className,
+    selected: _selected,
+    startIcon,
+    endIcon,
+    disabled,
+    href,
+    onClick,
+    onTouchStart,
+    children,
+    slotProps = {},
+    ref,
+    ...restProps
+  } = props;
+  const { activeTab, setActiveTab } = useTabs();
+  const tabRef = useRef<HTMLButtonElement>(null);
+
+  const clickable = !disabled && (!!href || !!onClick);
+  const selected = tabRef.current != null ? activeTab == tabRef.current : false;
+  const Component = (as || defaultElement) as ElementType;
+
+  function handleClick(e: MouseEvent<HTMLButtonElement>) {
+    if (disabled) return;
+    if (tabRef.current)
+      tabRef.current.scrollIntoView({
+        block: "nearest",
+        inline: "center",
+        behavior: "smooth",
+      });
+    setActiveTab(tabRef.current);
+    if (onClick) onClick(e);
+  }
+
+  useEffect(() => {
+    if (_selected) setActiveTab(tabRef.current);
+  }, [_selected]);
+
+  const componentProps = {
+    className: cn(
+      className,
+      styles.root,
+      selected ? styles.selected : undefined,
+      clickable ? styles.clickable : undefined,
+      disabled ? styles.disabled : undefined,
+    ),
+    onClick: handleClick,
+    disabled,
+    href: disabled ? "" : href,
+    ref: mergeRefs(ref, tabRef),
+    ...restProps,
+  };
+
+  return (
+    <Component {...componentProps}>
+      {startIcon && (
+        <span
+          {...slotProps.startIcon}
+          className={cn(styles.iconContainer, slotProps.startIcon?.className)}
+        >
+          {startIcon}
+        </span>
+      )}
+      {children}
+      {endIcon && (
+        <span
+          {...slotProps.endIcon}
+          className={cn(styles.iconContainer, slotProps.endIcon?.className)}
+        >
+          {endIcon}
+        </span>
+      )}
+    </Component>
+  );
+}
+TabBase.displayName = "Tab";
+
+/**
+ * A polymorphic Tab component.
+ *
+ * By default it renders a `<Tab>`, but any element can be used via the `as` prop:
+ *
+ * ```tsx
+ * <Tab as="a" href="/docs">Read docs</Tab>
+ * ```
+ *
+ * @group Tab
+ * @category inputs
+ */
+export const Tab = TabBase as PolymorphicComponentType<
+  TabBaseProps,
+  DefaultElement
+>;

package/src/Navigation/Tabs/Tabs.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { SetState } from "@studiocubics/types";
+import { createContext, type ReactNode, useContext, useState } from "react";
+
+interface TabsContextProps {
+  activeTab: HTMLButtonElement | null;
+  setActiveTab: SetState<HTMLButtonElement | null>;
+}
+export interface TabsProps {
+  children: ReactNode;
+}
+
+const TabsContext = createContext<TabsContextProps | null>(null);
+
+export function useTabs() {
+  const c = useContext(TabsContext);
+  if (!c) throw new Error("Components must be wrapped in <Tabs/>");
+  return c;
+}
+
+export function Tabs(props: TabsProps) {
+  const { children } = props;
+  const [activeTab, setActiveTab] =
+    useState<TabsContextProps["activeTab"]>(null);
+
+  return (
+    <TabsContext.Provider
+      value={{
+        activeTab,
+        setActiveTab,
+      }}
+    >
+      {children}
+    </TabsContext.Provider>
+  );
+}

package/src/Navigation/Tabs/TabsBar/TabsBar.module.css

@@ -0,0 +1,47 @@
+.root {
+  overflow: hidden;
+  display: flex;
+  background: var(--color-background-alpha);
+  border-radius: var(--shape-br-sm);
+  backdrop-filter: blur(5px);
+  pointer-events: all;
+}
+.overflowContainer {
+  isolation: isolate;
+  display: flex;
+  gap: var(--spacing-gap);
+  position: relative;
+}
+.rowContainer {
+  width: max-content;
+  justify-content: flex-start;
+  padding: var(--spacing-gap) var(--spacing-gap-2);
+  overflow: auto hidden;
+}
+
+.columnContainer {
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  padding: var(--spacing-gap-2);
+  overflow: hidden auto;
+  gap: var(--spacing-gap);
+}
+.marker {
+  position: absolute;
+  left: 0;
+  width: 0;
+  z-index: -1;
+  transition: all var(--transition-time) var(--transition-tf);
+}
+.markerGlass {
+  width: 100%;
+  height: 100%;
+  --glass-border-radius: var(--shape-br-sm);
+  --glass-backdrop-blur: 0;
+  /* background-color: color-mix(
+    in srgb,
+    var(--color-background) 50%,
+    transparent
+  ); */
+}

package/src/Navigation/Tabs/TabsBar/TabsBar.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useRef, useEffect, type ReactNode, type ComponentProps } from "react";
+import { useTabs } from "../Tabs";
+import styles from "./TabsBar.module.css";
+import { cn } from "@studiocubics/utils";
+import {
+  GlassCard,
+  type GlassCardProps,
+} from "../../../Cards/GlassCard/GlassCard";
+
+interface TabsBarProps extends ComponentProps<"div"> {
+  column?: boolean;
+  slotProps?: {
+    overflowContainer?: ComponentProps<"div">;
+    marker?: ComponentProps<"span">;
+    markerGlass?: GlassCardProps;
+  };
+}
+
+export function TabsBar(props: TabsBarProps) {
+  const {
+    children,
+    className,
+    column = false,
+    slotProps = {},
+    ...rest
+  } = props;
+
+  const { activeTab } = useTabs();
+  const markerRef = useRef<HTMLSpanElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!rootRef.current || !markerRef.current || !activeTab) return;
+
+    const updateMarkerPosition = () => {
+      if (!rootRef.current || !markerRef.current || !activeTab) return;
+
+      const marker = markerRef.current;
+      const tabRect = activeTab.getBoundingClientRect();
+      const rootRect = rootRef.current.getBoundingClientRect();
+
+      // Account for scroll offset
+      const scrollLeft = rootRef.current.scrollLeft;
+      const scrollTop = rootRef.current.scrollTop;
+
+      marker.style.width = `${tabRect.width}px`;
+      marker.style.height = `${tabRect.height}px`;
+      marker.style.left = `${tabRect.left - rootRect.left + scrollLeft}px`;
+      marker.style.top = `${tabRect.top - rootRect.top + scrollTop}px`;
+    };
+
+    updateMarkerPosition();
+
+    const container = rootRef.current;
+
+    // Update marker position when container resizes
+    const resizeObserver = new ResizeObserver(updateMarkerPosition);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [activeTab]);
+
+  return (
+    <nav {...rest} className={cn(styles.root, className)}>
+      <div
+        {...slotProps.overflowContainer}
+        ref={rootRef}
+        className={cn(
+          styles.overflowContainer,
+          column ? styles.columnContainer : styles.rowContainer,
+          slotProps.overflowContainer?.className,
+        )}
+      >
+        {children as ReactNode}
+        <span
+          {...slotProps.marker}
+          className={cn(styles.marker, slotProps.marker?.className)}
+          ref={markerRef}
+        >
+          <GlassCard
+            {...slotProps.markerGlass}
+            className={cn(styles.markerGlass, slotProps.markerGlass?.className)}
+          />
+        </span>
+      </div>
+    </nav>
+  );
+}

package/src/Navigation/Tabs/_index.ts

@@ -0,0 +1,3 @@
+export * from "./Tabs";
+export * from "./Tab/Tab";
+export * from "./TabsBar/TabsBar";

package/src/Navigation/_index.ts

@@ -0,0 +1,3 @@
+export * from "./Pagination/_index";
+export * from "./Breadcrumbs/_index";
+export * from "./Tabs/_index";

package/src/Typography/ClampedText/ClampedText.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}