@studiocubics/components 0.0.1

package/src/Layout/Dialog/Dialog.module.css

@@ -0,0 +1,15 @@
+.root[open] {
+  background-color: var(--color-surface);
+  width: 50%;
+  max-height: 80%;
+  max-width: 45rem;
+  min-width: 350px;
+  backdrop-filter: var(--backdrop-blur);
+  margin: auto;
+  border-radius: var(--shape-br-lg);
+  overflow: hidden;
+  padding: var(--spacing-gap-6);
+}
+.root::backdrop {
+  backdrop-filter: var(--backdrop-blur);
+}

package/src/Layout/Dialog/Dialog.tsx

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

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

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

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

package/src/Layout/PageLayoutPagination/PageLayoutPagination.tsx

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

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

package/src/Layout/PageLayoutTabs/PageLayoutTabs.tsx

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

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

package/src/Layout/Popover/Popover.tsx

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

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

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

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

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

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