@studiocubics/components 0.0.1 → 0.0.2

package/src/Layout/Dialog/Dialog.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import {
-  type ComponentProps,
-  type ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import ReactDOM from "react-dom";
-import styles from "./Dialog.module.css";
-import { cn } from "@studiocubics/utils";
-
-export type CloseReason = "backdropClick" | "escapeKeyDown";
-
-type OmittedProps = "onClose" | "onCancel";
-
-export interface DialogProps
-  extends Omit<ComponentProps<"dialog">, OmittedProps> {
-  open: boolean;
-  onClose: (event: Event | MouseEvent, reason: CloseReason) => void;
-  children?: ReactNode;
-  fullWidth?: boolean;
-  fullScreen?: boolean;
-  disablePortal?: boolean;
-}
-
-export function Dialog({
-  open,
-  onClose,
-  children,
-  fullWidth = false,
-  fullScreen = false,
-  disablePortal = false,
-  className = "",
-  ...rest
-}: DialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-  const [mounted, setMounted] = useState(false);
-  // Only mark as mounted on client
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Show or close dialog using native API
-  useEffect(() => {
-    if (!mounted) return;
-
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open, mounted]);
-
-  // Close handlers
-  useEffect(() => {
-    if (!mounted) return;
-
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    function handleCancel(e: Event) {
-      e.preventDefault();
-      onClose(e, "escapeKeyDown");
-    }
-
-    function handleClick(e: MouseEvent) {
-      if (!dialog) return;
-      const rect = dialog.getBoundingClientRect();
-      const isInDialog =
-        rect.top <= e.clientY &&
-        e.clientY <= rect.top + rect.height &&
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width;
-
-      if (!isInDialog) {
-        onClose(e, "backdropClick");
-      }
-    }
-
-    dialog.addEventListener("cancel", handleCancel);
-    dialog.addEventListener("click", handleClick);
-
-    return () => {
-      dialog.removeEventListener("cancel", handleCancel);
-      dialog.removeEventListener("click", handleClick);
-    };
-  }, [onClose, mounted]);
-
-  const dialogContent = (
-    <dialog
-      {...rest}
-      ref={dialogRef}
-      style={{
-        width: fullWidth || fullScreen ? "100%" : undefined,
-        height: fullScreen ? "100%" : undefined,
-      }}
-      className={cn(className, styles.root)}
-    >
-      {children}
-    </dialog>
-  );
-
-  // Only render portal on client
-  if (!mounted) return null;
-  if (!open) return null;
-
-  if (disablePortal) return dialogContent;
-
-  return ReactDOM.createPortal(dialogContent, document.body);
-}

package/src/Layout/PageLayout/PageLayout.module.css

@@ -1,20 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-.titleBar {
-  padding-inline: var(--spacing-gap-3);
-}
-.body {
-  flex: 1;
-  overflow: hidden auto;
-  padding-block: var(--spacing-gap-2);
-}
-.footer {
-  padding-top: var(--spacing-gap-2);
-  padding-bottom: 3dvh;
-  display: flex;
-  justify-content: center;
-}

package/src/Layout/PageLayout/PageLayout.tsx

@@ -1,79 +0,0 @@
-import styles from "./PageLayout.module.css";
-import type { ComponentProps, ElementType, ReactNode } from "react";
-import { cn } from "@studiocubics/utils";
-import type {
-  PolymorphicComponentProps,
-  PolymorphicComponentType,
-} from "@studiocubics/types";
-import {
-  PageTitle,
-  type PageTitleProps,
-} from "../../Typography/PageTitle/PageTitle";
-
-export interface PageLayoutBaseProps extends PageTitleProps {
-  children: ReactNode;
-  titleBar?: ReactNode;
-  footer?: ReactNode;
-  slotProps?: {
-    root?: ComponentProps<"main">;
-    body?: ComponentProps<"div">;
-    footer?: ComponentProps<"div">;
-    titleBar?: ComponentProps<"div">;
-  };
-}
-const defaultElement = "div";
-type DefaultElement = typeof defaultElement;
-
-export type PageLayoutProps<C extends ElementType = DefaultElement> =
-  PolymorphicComponentProps<C, PageLayoutBaseProps>;
-
-function PageLayoutBase(props: PageLayoutProps) {
-  const { as, children, titleBar, footer, slotProps = {}, ...rest } = props;
-  const Component = (as || defaultElement) as ElementType;
-  return (
-    <Component
-      {...slotProps.root}
-      className={cn(styles.root, slotProps.root?.className)}
-    >
-      <PageTitle {...rest} />
-      {titleBar && (
-        <div
-          {...slotProps.titleBar}
-          className={cn(styles.titleBar, slotProps.titleBar?.className)}
-        >
-          {titleBar}
-        </div>
-      )}
-
-      <div
-        {...slotProps.body}
-        className={cn(styles.body, slotProps.body?.className)}
-      >
-        {children}
-      </div>
-      {footer && (
-        <div
-          {...slotProps.footer}
-          className={cn(styles.footer, slotProps.footer?.className)}
-        >
-          {footer}
-        </div>
-      )}
-    </Component>
-  );
-}
-PageLayoutBase.displayName = "PageLayout";
-
-/**
- * A polymorphic PageLayout component.
- *
- * By default it renders a `<main>`, but any element can be used via the `as` prop:
- *
- * ```tsx
- * <PageLayout as="a" href="/docs">Read docs</PageLayout>
- * ```
- */
-export const PageLayout = PageLayoutBase as PolymorphicComponentType<
-  PageLayoutBaseProps,
-  DefaultElement
->;

package/src/Layout/PageLayoutPagination/PageLayoutPagination.module.css

@@ -1,5 +0,0 @@
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap);
-}

package/src/Layout/PageLayoutPagination/PageLayoutPagination.tsx

@@ -1,40 +0,0 @@
-import { type ReactNode, Suspense } from "react";
-import { PageLayout, type PageLayoutProps } from "../PageLayout/PageLayout";
-import styles from "./PageLayoutPagination.module.css";
-import { Skeleton } from "../../Display/Skeleton/Skeleton";
-
-export interface PageLayoutPaginationProps {
-  skeletonHeight?: number;
-  paginationComponent?: ReactNode;
-}
-
-export function PageLayoutPagination(
-  props: PageLayoutPaginationProps & Omit<PageLayoutProps, "footer">,
-) {
-  const {
-    skeletonHeight = 107,
-    paginationComponent,
-    children,
-    ...rest
-  } = props;
-  return (
-    <PageLayout
-      footer={
-        <Suspense fallback={<Skeleton height={32} />}>
-          {paginationComponent}
-        </Suspense>
-      }
-      {...rest}
-    >
-      <div className={styles.list}>
-        <Suspense
-          fallback={Array.from({ length: 3 }).map((_, i) => (
-            <Skeleton key={i} height={skeletonHeight} />
-          ))}
-        >
-          {children}
-        </Suspense>
-      </div>
-    </PageLayout>
-  );
-}

package/src/Layout/PageLayoutTabs/PageLayoutTabs.module.css

@@ -1,3 +0,0 @@
-.body {
-  padding-inline: var(--spacing-gap-3);
-}

package/src/Layout/PageLayoutTabs/PageLayoutTabs.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { type PageTitleProps } from "../../Typography/PageTitle/PageTitle";
-import type { ComponentProps, ElementType, ReactNode } from "react";
-import { Tabs } from "../../Navigation/Tabs/Tabs";
-import { TabsBar } from "../../Navigation/Tabs/TabsBar/TabsBar";
-import { Tab, type TabProps } from "../../Navigation/Tabs/Tab/Tab";
-import { PageLayout, type PageLayoutProps } from "../PageLayout/PageLayout";
-import { cn } from "@studiocubics/utils";
-import styles from "./PageLayoutTabs.module.css";
-
-export interface PageLayoutTabsProps extends PageTitleProps {
-  children: ReactNode;
-  menuItems?: TabProps[];
-  LinkComponent?: ElementType<ComponentProps<any>>;
-  selectedIndex?: number;
-  slotProps?: PageLayoutProps["slotProps"] & {
-    tab?: TabProps;
-  };
-}
-
-export function PageLayoutTabs(props: PageLayoutTabsProps) {
-  const {
-    children,
-    menuItems = [],
-    slotProps = {},
-    selectedIndex = 0,
-    LinkComponent = "a",
-    ...rest
-  } = props;
-
-  return (
-    <PageLayout
-      {...rest}
-      slotProps={{
-        ...slotProps,
-        body: {
-          ...slotProps.body,
-          className: cn(slotProps.body?.className, styles.body),
-        },
-      }}
-      titleBar={
-        <Tabs>
-          <TabsBar>
-            {menuItems.map((mi, i) => (
-              <Tab
-                key={i}
-                {...slotProps.tab}
-                as={LinkComponent}
-                selected={i == selectedIndex}
-                {...mi}
-              />
-            ))}
-          </TabsBar>
-        </Tabs>
-      }
-      noBorders
-    >
-      {children}
-    </PageLayout>
-  );
-}

package/src/Layout/Popover/Popover.module.css

@@ -1,9 +0,0 @@
-.root {
-  position: absolute;
-  background: none;
-  border: none;
-}
-.root.open::backdrop {
-  /* background-color: red; */
-  cursor: initial;
-}

package/src/Layout/Popover/Popover.tsx

@@ -1,145 +0,0 @@
-"use client";
-
-import { type ReactNode, useRef, useEffect, type ComponentProps } from "react";
-import styles from "./Popover.module.css";
-import { cn } from "@studiocubics/utils";
-
-export interface PositionType {
-  vertical: "top" | "center" | "bottom";
-  horizontal: "left" | "center" | "right";
-}
-
-export interface PopoverProps extends ComponentProps<"div"> {
-  children: ReactNode;
-  anchorEl: HTMLElement | null;
-  open: boolean;
-  onClose: () => void;
-  anchorPosition?: PositionType;
-  transformOrigin?: PositionType;
-}
-
-export function Popover({
-  children,
-  anchorEl,
-  open,
-  className,
-  onClose,
-  anchorPosition = { vertical: "bottom", horizontal: "center" },
-  transformOrigin = { vertical: "top", horizontal: "left" },
-  ...rest
-}: PopoverProps) {
-  const popoverRef = useRef<HTMLDivElement>(null);
-
-  // Sync controlled `open` state with native API
-  useEffect(() => {
-    const popover = popoverRef.current;
-    if (!popover) return;
-
-    if (open && !popover.matches(":popover-open")) {
-      popover.showPopover();
-    } else if (!open && popover.matches(":popover-open")) {
-      popover.hidePopover();
-    }
-  }, [open]);
-
-  // Handle outside click + escape
-  useEffect(() => {
-    const popover = popoverRef.current;
-    if (!popover) return;
-
-    const handleToggle = () => {
-      if (!popover.matches(":popover-open")) {
-        onClose();
-      }
-    };
-
-    popover.addEventListener("toggle", handleToggle);
-    return () => {
-      popover.removeEventListener("toggle", handleToggle);
-    };
-  }, [onClose]);
-
-  // JS positioning
-  useEffect(() => {
-    const popover = popoverRef.current;
-    if (!popover || !anchorEl || !open) return;
-
-    const anchorRect = anchorEl.getBoundingClientRect();
-    const popoverRect = popover.getBoundingClientRect();
-    const margin = 8;
-
-    let top = 0;
-    let left = 0;
-
-    // Compute anchor-based position
-    switch (anchorPosition.vertical) {
-      case "top":
-        top = anchorRect.top;
-        break;
-      case "center":
-        top = anchorRect.top + anchorRect.height / 2;
-        break;
-      case "bottom":
-        top = anchorRect.bottom;
-        break;
-    }
-
-    switch (anchorPosition.horizontal) {
-      case "left":
-        left = anchorRect.left;
-        break;
-      case "center":
-        left = anchorRect.left + anchorRect.width / 2;
-        break;
-      case "right":
-        left = anchorRect.right;
-        break;
-    }
-
-    //  Apply transform origin
-    switch (transformOrigin.vertical) {
-      case "center":
-        top -= popoverRect.height / 2;
-        break;
-      case "bottom":
-        top -= popoverRect.height;
-        break;
-      // top -> no change
-    }
-
-    switch (transformOrigin.horizontal) {
-      case "center":
-        left -= popoverRect.width / 2;
-        break;
-      case "right":
-        left -= popoverRect.width;
-        break;
-      // left -> no change
-    }
-
-    //  Clamp so the popover stays fully in viewport
-    const viewportWidth = document.documentElement.clientWidth;
-    const viewportHeight = document.documentElement.clientHeight;
-
-    const maxLeft = viewportWidth - popoverRect.width - margin;
-    const maxTop = viewportHeight - popoverRect.height - margin;
-
-    left = Math.min(Math.max(left, margin), maxLeft);
-    top = Math.min(Math.max(top, margin), maxTop);
-
-    //  Apply scroll offset
-    popover.style.top = `${top + window.scrollY}px`;
-    popover.style.left = `${left + window.scrollX}px`;
-  }, [open, anchorEl, anchorPosition, transformOrigin]);
-
-  return (
-    <div
-      {...rest}
-      className={cn(styles.root, className, open ? styles.open : "")}
-      ref={popoverRef}
-      popover="auto"
-    >
-      {children}
-    </div>
-  );
-}

package/src/Layout/SectionWrapper/SectionWrapper.module.css

@@ -1,31 +0,0 @@
-.root {
-  display: grid;
-  grid-template-columns: 1fr;
-  padding-inline: var(--spacing-gap-4);
-  padding-block: var(--spacing-gap-3);
-  gap: var(--spacing-gap-2);
-}
-.header {
-  /* outline: 1px solid red; */
-  & > h4 {
-    font-size: 1em;
-  }
-  & > p {
-    font-size: var(--fs-body2);
-    color: var(--color-on-background-faint);
-  }
-}
-.root:not(.noBorders) {
-  border-top: 1px solid var(--color-outline);
-}
-.content {
-  display: flex;
-  flex-direction: column;
-  font-size: var(--fs-body2);
-  container-type: inline-size;
-}
-@container (min-width:600px) {
-  .root {
-    grid-template-columns: 0.4fr 1fr;
-  }
-}

package/src/Layout/SectionWrapper/SectionWrapper.tsx

@@ -1,62 +0,0 @@
-import type { ComponentProps, ReactNode } from "react";
-import styles from "./SectionWrapper.module.css";
-import { cn, cssSafeString } from "@studiocubics/utils";
-
-export interface SectionWrapperProps
-  extends Omit<ComponentProps<"section">, "title"> {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  noBorders?: boolean;
-  containerClassname?: string;
-  slotProps?: {
-    header?: ComponentProps<"div">;
-    title?: ComponentProps<"h4">;
-    subtitle?: ComponentProps<"p">;
-    content?: ComponentProps<"div">;
-  };
-}
-export function SectionWrapper(props: SectionWrapperProps) {
-  const {
-    title,
-    subtitle,
-    children,
-    noBorders,
-    slotProps = {},
-    containerClassname,
-    className,
-    ...rest
-  } = props;
-  return (
-    <section
-      className={cn(
-        containerClassname,
-        styles.root,
-        noBorders ? styles.noBorders : ""
-      )}
-      id={typeof title == "string" ? cssSafeString(title) : undefined}
-      {...rest}
-    >
-      <div
-        {...slotProps.header}
-        className={cn(styles.header, slotProps.header?.className)}
-      >
-        {typeof title == "string" ? (
-          <h4 {...slotProps.title}>{title}</h4>
-        ) : (
-          title
-        )}
-        {subtitle && typeof subtitle == "string" ? (
-          <p {...slotProps.subtitle}>{subtitle}</p>
-        ) : (
-          subtitle
-        )}
-      </div>
-      <div
-        {...slotProps.content}
-        className={cn(styles.content, slotProps.content?.className, className)}
-      >
-        {children}
-      </div>
-    </section>
-  );
-}

package/src/Layout/Sidebar/Sidebar.module.css

@@ -1,17 +0,0 @@
-.root {
-  --sidebar-closed-width: 4rem;
-  --sidebar-open-width: 20rem;
-  --sidebar-body-height: 65dvh;
-  --sidebar-header-height: 4.875rem;
-  --sidebar-color-surface: var(--color-surface-alpha);
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  gap: var(--spacing-gap);
-  isolation: isolate;
-}
-@media (min-width: 600px) {
-  .root {
-    flex-direction: row;
-  }
-}

package/src/Layout/Sidebar/Sidebar.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { createContext, type ReactNode, useContext, useState } from "react";
-import styles from "./Sidebar.module.css";
-
-interface SidebarContextProps {
-  sidebarOpen: boolean;
-  toggleSidebar(): void;
-}
-interface SidebarProps {
-  children: ReactNode;
-  defaultOpen?: boolean;
-  storageKey?: string;
-}
-
-const SidebarContext = createContext<SidebarContextProps | null>(null);
-
-export function useSidebar() {
-  const c = useContext(SidebarContext);
-  if (!c) throw new Error("Components must be wrapped in <SidebarProvider/>");
-  return c;
-}
-export const SIDEBAR_COOKIE = "sidebarOpen";
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-
-export function Sidebar({ children, defaultOpen }: SidebarProps) {
-  const [sidebarOpen, setSidebarOpen] = useState(defaultOpen ?? false);
-
-  async function toggleSidebar() {
-    setSidebarOpen((v) => !v);
-    document.cookie = `${SIDEBAR_COOKIE}=${!sidebarOpen}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-  }
-
-  return (
-    <SidebarContext.Provider value={{ sidebarOpen, toggleSidebar }}>
-      <div className={styles.root}>{children}</div>
-    </SidebarContext.Provider>
-  );
-}

package/src/Layout/Sidebar/SidebarBody/SidebarBody.module.css

@@ -1,31 +0,0 @@
-.root {
-  /* display: none; */
-  position: fixed;
-  left: -100%;
-  top: var(--sidebar-header-height);
-  width: var(--sidebar-open-width);
-  background-color: var(--color-surface-alpha);
-  backdrop-filter: var(--backdrop-blur);
-  height: var(--sidebar-body-height);
-  transition: left var(--transition-time) var(--transition-tf);
-  overflow-x: hidden;
-}
-.open {
-  left: 0;
-  overflow-x: auto;
-}
-@media (min-width: 600px) {
-  .root {
-    flex: 1;
-    left: 0;
-    position: relative;
-    height: unset;
-    width: unset;
-    top: 0;
-    background-color: transparent;
-    backdrop-filter: none;
-  }
-  .open {
-    left: 0;
-  }
-}

package/src/Layout/Sidebar/SidebarBody/SidebarBody.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import styles from "./SidebarBody.module.css";
-import { cn } from "@studiocubics/utils";
-import { useSidebar } from "../Sidebar";
-export function SidebarBody(props: ComponentProps<"div">) {
-  const { children, className, ...rest } = props;
-  const { sidebarOpen } = useSidebar();
-  return (
-    <div
-      className={cn(styles.root, className, sidebarOpen ? styles.open : "")}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}