@studiocubics/components 0.0.1 → 0.0.2

package/src/Navigation/Pagination/Pagination.tsx

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

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

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

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

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

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

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

@@ -1,92 +0,0 @@
-"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/Typography/ClampedText/ClampedText.module.css

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