@hogoshi/ui 0.0.0-stage → 0.1.1

package/src/components/sheet.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import { Cancel01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import { createContext, useContext, type ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+
+export const SheetTrigger = BaseDrawer.Trigger;
+export const SheetClose = BaseDrawer.Close;
+export const SheetTitle = BaseDrawer.Title;
+export const SheetDescription = BaseDrawer.Description;
+
+export type SheetSide = "top" | "right" | "bottom" | "left";
+
+const SideContext = createContext<SheetSide>("right");
+
+const direction = { top: "up", right: "right", bottom: "down", left: "left" } as const;
+
+const edge = {
+  top: "top-[calc(0.75rem+var(--safe-top))]",
+  right: "right-[calc(0.75rem+var(--safe-right))]",
+  bottom: "bottom-[calc(0.75rem+var(--safe-bottom))]",
+  left: "left-[calc(0.75rem+var(--safe-left))]",
+};
+
+const frame = {
+  right: `${edge.top} ${edge.bottom} ${edge.right} w-[min(20rem,calc(100vw-1.5rem))]`,
+  left: `${edge.top} ${edge.bottom} ${edge.left} w-[min(20rem,calc(100vw-1.5rem))]`,
+  bottom: `${edge.left} ${edge.right} ${edge.bottom} max-h-[min(90dvh,calc(100dvh-1.5rem-var(--safe-top)-var(--safe-bottom)))] md:max-h-[min(32rem,70dvh)]`,
+  top: `${edge.left} ${edge.right} ${edge.top} max-h-[min(90dvh,calc(100dvh-1.5rem-var(--safe-top)-var(--safe-bottom)))] md:max-h-[min(32rem,70dvh)]`,
+} as const;
+
+const motion = {
+  right:
+    "translate-x-(--drawer-swipe-movement-x) data-[starting-style]:translate-x-[calc(100%+1rem+var(--safe-right))] data-[ending-style]:translate-x-[calc(100%+1rem+var(--safe-right))]",
+  left: "translate-x-(--drawer-swipe-movement-x) data-[starting-style]:-translate-x-[calc(100%+1rem+var(--safe-left))] data-[ending-style]:-translate-x-[calc(100%+1rem+var(--safe-left))]",
+  bottom:
+    "translate-y-(--drawer-swipe-movement-y) data-[starting-style]:translate-y-[calc(100%+1rem+var(--safe-bottom))] data-[ending-style]:translate-y-[calc(100%+1rem+var(--safe-bottom))]",
+  top: "translate-y-(--drawer-swipe-movement-y) data-[starting-style]:-translate-y-[calc(100%+1rem+var(--safe-top))] data-[ending-style]:-translate-y-[calc(100%+1rem+var(--safe-top))]",
+} as const;
+
+const thumb = {
+  right: "top-1/2 left-2 h-[18%] min-h-12 w-1.5 -translate-y-1/2",
+  left: "top-1/2 right-2 h-[18%] min-h-12 w-1.5 -translate-y-1/2",
+  bottom: "top-2 left-1/2 h-1.5 w-[18%] min-w-12 -translate-x-1/2",
+  top: "bottom-2 left-1/2 h-1.5 w-[18%] min-w-12 -translate-x-1/2",
+} as const;
+
+const room = { right: "pl-4 md:pl-7", left: "pr-4 md:pr-7", bottom: "pt-4 md:pt-7", top: "pb-4 md:pb-7" } as const;
+
+const transition =
+  "transition-[translate,opacity] duration-[var(--motion-duration)] ease-[var(--motion-ease)] data-[swiping]:duration-0 motion-reduce:transition-none";
+
+export function Sheet({ side = "right", ...props }: ComponentProps<typeof BaseDrawer.Root> & { side?: SheetSide }) {
+  return (
+    <SideContext.Provider value={side}>
+      <BaseDrawer.Root swipeDirection={direction[side]} {...props} />
+    </SideContext.Provider>
+  );
+}
+
+export function SheetContent({ className, children, ...props }: ComponentProps<typeof BaseDrawer.Popup>) {
+  const side = useContext(SideContext);
+  return (
+    <BaseDrawer.Portal>
+      <BaseDrawer.Backdrop
+        className={cn(
+          "fixed inset-0 z-[var(--z-overlay)] bg-transparent opacity-[calc(1-var(--drawer-swipe-progress,0))] backdrop-blur-2xl transition-[opacity,backdrop-filter] duration-[calc(var(--motion-duration)*2.2)] ease-[var(--motion-ease)] data-[ending-style]:opacity-0 data-[ending-style]:backdrop-blur-[0px] data-[starting-style]:opacity-0 data-[starting-style]:backdrop-blur-[0px]",
+        )}
+      />
+      <BaseDrawer.Viewport className="fixed inset-0 z-[var(--z-modal)]">
+        <BaseDrawer.Popup
+          className={cn(
+            "border-border bg-bg-elevated/70 fixed flex touch-auto flex-col overflow-hidden rounded-[var(--radius-lg)] border p-4 shadow-[var(--shadow-lg)] backdrop-blur-xl outline-none data-[swiping]:select-none",
+            frame[side],
+            room[side],
+            motion[side],
+            transition,
+            className,
+          )}
+          {...props}
+        >
+          <span aria-hidden className={cn("bg-border-strong pointer-events-none absolute hidden rounded-full md:block", thumb[side])} />
+          <BaseDrawer.Content className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain">
+            {children}
+          </BaseDrawer.Content>
+          <BaseDrawer.Close className="text-fg-subtle hover:bg-bg-subtle hover:text-fg absolute top-3 right-3 z-[1] inline-flex size-7 cursor-pointer items-center justify-center rounded-[var(--radius-sm)]">
+            <Icon icon={Cancel01Icon} variant="stroke" size={16} />
+            <span className="sr-only">Close</span>
+          </BaseDrawer.Close>
+        </BaseDrawer.Popup>
+      </BaseDrawer.Viewport>
+    </BaseDrawer.Portal>
+  );
+}

package/src/components/sidebar.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { Button as BaseButton } from "@base-ui/react/button";
+import { SidebarLeftIcon } from "@hugeicons-pro/core-stroke-rounded";
+import { createContext, useContext, useEffect, useMemo, useState, type ComponentProps, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+import type { AppIcon, IconVariant } from "./icon";
+import { Glide, glideActive } from "./glide";
+import { Icon } from "./icon";
+
+const ACTIVE = '[aria-current="page"]';
+import { ScrollArea } from "./scroll-area";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+interface SidebarState {
+  collapsed: boolean;
+  toggle: () => void;
+}
+
+const SidebarContext = createContext<SidebarState | null>(null);
+
+export const sidebarLabel =
+  "min-w-0 truncate transition-opacity duration-[var(--motion-duration)] ease-[var(--motion-ease)]";
+
+export function useSidebar() {
+  const value = useContext(SidebarContext);
+  if (!value) throw new Error("useSidebar must be used within SidebarProvider");
+  return value;
+}
+
+export function SidebarProvider({ children, defaultCollapsed = false }: { children: ReactNode; defaultCollapsed?: boolean }) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  useEffect(() => setCollapsed(defaultCollapsed), [defaultCollapsed]);
+  const value = useMemo(() => ({ collapsed, toggle: () => setCollapsed((current) => !current) }), [collapsed]);
+  return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
+}
+
+export function Sidebar({ className, ...props }: ComponentProps<"aside">) {
+  const { collapsed } = useSidebar();
+  return (
+    <aside
+      data-collapsed={collapsed || undefined}
+      className={cn(
+        "bg-bg-elevated border-border hidden h-full min-h-0 w-[calc(15rem+var(--safe-left))] shrink-0 flex-col overflow-hidden border-r pt-[var(--safe-top)] pb-[var(--safe-bottom)] pl-[var(--safe-left)] transition-[width] duration-[var(--motion-duration)] ease-[var(--motion-ease)] md:flex",
+        collapsed && "w-[calc(3.5rem+var(--safe-left))]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SidebarHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("flex items-center justify-between gap-2 px-3 py-3", className)} {...props} />;
+}
+
+export function SidebarNav({
+  className,
+  indicatorClassName,
+  children,
+  ...props
+}: ComponentProps<"nav"> & { indicatorClassName?: string }) {
+  return (
+    <nav className={cn("flex min-h-0 flex-1 flex-col px-2 pb-3", className)} {...props}>
+      <ScrollArea hideScrollbar className="h-full min-h-0 flex-1" contentClassName="min-w-0! w-full">
+        <div className="relative flex flex-col gap-0.5">
+          <Glide selector={ACTIVE} className={cn("bg-accent-muted/60", indicatorClassName)} />
+          {children}
+        </div>
+      </ScrollArea>
+    </nav>
+  );
+}
+
+export function SidebarGroup({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("flex flex-col gap-0.5", className)} {...props} />;
+}
+
+export function SidebarLabel({ className, ...props }: ComponentProps<"p">) {
+  const { collapsed } = useSidebar();
+  return (
+    <p
+      className={cn(
+        "text-fg-subtle px-3 pt-3 pb-1 text-[11px] font-medium tracking-wide uppercase",
+        collapsed && "sr-only",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SidebarFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("mt-auto flex flex-col gap-1 p-2", className)} {...props} />;
+}
+
+export function SidebarInset({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("min-w-0 flex-1", className)} {...props} />;
+}
+
+export function SidebarTrigger({ className, ...props }: ComponentProps<"button">) {
+  const { toggle, collapsed } = useSidebar();
+  return (
+    <button
+      type="button"
+      aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+      className={cn(
+        "text-fg-muted hover:bg-bg-subtle hover:text-fg inline-flex size-8 items-center justify-center rounded-[var(--radius-sm)]",
+        className,
+      )}
+      onClick={toggle}
+      {...props}
+    >
+      <Icon icon={SidebarLeftIcon} variant="stroke" size={16} />
+    </button>
+  );
+}
+
+export function SidebarItem({
+  icon,
+  iconVariant = "stroke",
+  active,
+  className,
+  children,
+  render,
+  ...props
+}: ComponentProps<typeof BaseButton> & { icon?: AppIcon; iconVariant?: IconVariant; active?: boolean }) {
+  const { collapsed } = useSidebar();
+  const item = (
+    <BaseButton
+      nativeButton={render ? false : true}
+      render={render}
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "text-fg-muted hover:bg-bg-subtle hover:text-fg relative flex h-[calc(var(--row-h)-0.25rem)] w-full cursor-pointer items-center gap-2 overflow-hidden rounded-[var(--radius-sm)] px-3 text-sm whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        active && cn("bg-accent-muted text-accent hover:text-accent hover:bg-transparent", glideActive),
+        className,
+      )}
+      {...props}
+    >
+      {icon ? <Icon icon={icon} variant={iconVariant} size={16} className="shrink-0" /> : null}
+      <span className={cn(sidebarLabel, collapsed && "opacity-0")}>{children}</span>
+    </BaseButton>
+  );
+  return (
+    <Tooltip disabled={!collapsed}>
+      <TooltipTrigger render={item} />
+      <TooltipContent side="right">{children}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function BottomBar({ className, children, ...props }: ComponentProps<"nav">) {
+  return (
+    <nav
+      className={cn(
+        "bg-bg-elevated/70 border-border fixed right-[calc(0.75rem+var(--safe-right))] bottom-[calc(0.75rem+var(--safe-bottom))] left-[calc(0.75rem+var(--safe-left))] z-[var(--z-sticky)] rounded-[var(--radius-lg)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-xl md:hidden",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative flex items-stretch justify-around">
+        <Glide selector={ACTIVE} className="bg-accent-muted/60 rounded-[var(--radius-md)]" />
+        {children}
+      </div>
+    </nav>
+  );
+}
+
+export function BottomBarItem({
+  icon,
+  iconVariant = "stroke",
+  active,
+  className,
+  children,
+  render,
+  ...props
+}: ComponentProps<typeof BaseButton> & { icon?: AppIcon; iconVariant?: IconVariant; active?: boolean }) {
+  return (
+    <BaseButton
+      nativeButton={render ? false : true}
+      render={render}
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "text-fg-muted hover:bg-bg-subtle relative flex flex-1 cursor-pointer flex-col items-center gap-0.5 rounded-[var(--radius-md)] px-2 py-1.5 text-[11px] transition-colors duration-[var(--motion-duration)]",
+        active && cn("bg-accent-muted text-accent hover:bg-transparent", glideActive),
+        className,
+      )}
+      {...props}
+    >
+      {icon ? <Icon icon={icon} variant={iconVariant} size={18} /> : null}
+      {children}
+    </BaseButton>
+  );
+}

package/src/components/skeleton.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+export function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "bg-bg-muted relative overflow-hidden rounded-[var(--radius-md)] before:absolute before:inset-0 before:animate-[shimmer_1.4s_linear_infinite] before:bg-[linear-gradient(90deg,transparent,color-mix(in_oklch,var(--fg)_14%,transparent),transparent)] before:bg-[length:200%_100%] before:content-[''] motion-reduce:before:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/slider.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+type SliderProps = Omit<ComponentProps<typeof BaseSlider.Root>, "value" | "defaultValue" | "onValueChange"> & {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+};
+
+export function Slider({ className, onValueChange, ...props }: SliderProps) {
+  return (
+    <BaseSlider.Root
+      className={cn(
+        "hogoshi-grab flex w-full touch-none items-center py-2 data-[disabled]:opacity-50",
+        className,
+      )}
+      onValueChange={(next) => onValueChange?.(typeof next === "number" ? next : next[0])}
+      {...props}
+    >
+      <BaseSlider.Control className="flex w-full items-center">
+        <BaseSlider.Track className="bg-bg-muted relative h-1 w-full rounded-full">
+          <BaseSlider.Indicator className="bg-accent absolute h-full rounded-full" />
+          <BaseSlider.Thumb className="hogoshi-grab border-accent bg-bg-elevated size-4 rounded-full border shadow-[var(--shadow-sm)] outline-none focus-visible:ring-2 focus-visible:ring-ring" />
+        </BaseSlider.Track>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  );
+}

package/src/components/smooth-scroll.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+
+const IDLE_MS = 700;
+const EASE = 0.16;
+const LINE = 40;
+const DRIFT = 2;
+const SCROLL_KEYS = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "];
+
+interface Motion {
+  x: number;
+  y: number;
+  writtenX: number;
+  writtenY: number;
+  frame: number;
+  last: number;
+}
+
+const motions = new WeakMap<Element, Motion>();
+
+function markScrolling(element: Element) {
+  const node = element as HTMLElement;
+  node.setAttribute("data-scrolling", "");
+  window.clearTimeout(Number(node.dataset.scrollTimer ?? 0));
+  node.dataset.scrollTimer = String(
+    window.setTimeout(() => {
+      node.removeAttribute("data-scrolling");
+      delete node.dataset.scrollTimer;
+    }, IDLE_MS),
+  );
+}
+
+function motionAllowed() {
+  const motion = document.documentElement.getAttribute("data-motion");
+  if (motion === "off" || motion === "reduced") return false;
+  return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function stop(element: Element) {
+  const motion = motions.get(element);
+  if (!motion) return;
+  cancelAnimationFrame(motion.frame);
+  motions.delete(element);
+}
+
+function stopFrom(target: EventTarget | null) {
+  for (let node = target instanceof Element ? target : null; node; node = node.parentElement) stop(node);
+  if (document.scrollingElement) stop(document.scrollingElement);
+}
+
+function canScroll(element: Element, dx: number, dy: number) {
+  const root = element === document.scrollingElement;
+  const style = getComputedStyle(element);
+  const scrollY = root
+    ? style.overflowY !== "hidden" && getComputedStyle(document.body).overflowY !== "hidden"
+    : /auto|scroll|overlay/.test(style.overflowY);
+  const scrollX = root ? style.overflowX !== "hidden" : /auto|scroll|overlay/.test(style.overflowX);
+  const maxY = element.scrollHeight - element.clientHeight;
+  const maxX = element.scrollWidth - element.clientWidth;
+  const motion = motions.get(element);
+  const top = motion?.y ?? element.scrollTop;
+  const left = motion?.x ?? element.scrollLeft;
+  const vertical = scrollY && maxY > 0 && (dy < 0 ? top > 0 : dy > 0 && top < maxY);
+  const horizontal = scrollX && maxX > 0 && (dx < 0 ? left > 0 : dx > 0 && left < maxX);
+  return vertical || horizontal;
+}
+
+function findScroller(target: EventTarget | null, dx: number, dy: number) {
+  let node = target instanceof Element ? target : null;
+  while (node && node !== document.body && node !== document.documentElement) {
+    if (node.hasAttribute("data-native-scroll")) return null;
+    if (canScroll(node, dx, dy)) return node;
+    node = node.parentElement;
+  }
+  const root = document.scrollingElement;
+  return root && canScroll(root, dx, dy) ? root : null;
+}
+
+function isMouseWheel(event: WheelEvent) {
+  if (event.deltaMode !== 0) return true;
+  return event.deltaX === 0 && Math.abs(event.deltaY) >= 50 && Number.isInteger(event.deltaY);
+}
+
+function step(element: Element, motion: Motion, now: number) {
+  const moved =
+    Math.abs(element.scrollTop - motion.writtenY) > DRIFT || Math.abs(element.scrollLeft - motion.writtenX) > DRIFT;
+  if (moved) {
+    motions.delete(element);
+    return;
+  }
+  const dt = Math.min(64, now - motion.last || 16);
+  motion.last = now;
+  const k = 1 - Math.pow(1 - EASE, dt / 16.67);
+  const nextY = element.scrollTop + (motion.y - element.scrollTop) * k;
+  const nextX = element.scrollLeft + (motion.x - element.scrollLeft) * k;
+  const done = Math.abs(motion.y - nextY) < 0.5 && Math.abs(motion.x - nextX) < 0.5;
+  element.scrollTop = done ? motion.y : nextY;
+  element.scrollLeft = done ? motion.x : nextX;
+  motion.writtenY = element.scrollTop;
+  motion.writtenX = element.scrollLeft;
+  if (done) {
+    motions.delete(element);
+    return;
+  }
+  motion.frame = requestAnimationFrame((time) => step(element, motion, time));
+}
+
+function onWheel(event: WheelEvent) {
+  if (event.defaultPrevented || event.ctrlKey) return;
+  if (!isMouseWheel(event) || !motionAllowed()) {
+    stopFrom(event.target);
+    return;
+  }
+  const scale = event.deltaMode === 1 ? LINE : event.deltaMode === 2 ? window.innerHeight : 1;
+  const sideways = event.shiftKey && !event.deltaX;
+  const dx = (sideways ? event.deltaY : event.deltaX) * scale;
+  const dy = (sideways ? 0 : event.deltaY) * scale;
+  const element = findScroller(event.target, dx, dy);
+  if (!element) return;
+  event.preventDefault();
+  const maxY = element.scrollHeight - element.clientHeight;
+  const maxX = element.scrollWidth - element.clientWidth;
+  const current = motions.get(element);
+  const motion = current ?? {
+    x: element.scrollLeft,
+    y: element.scrollTop,
+    writtenX: element.scrollLeft,
+    writtenY: element.scrollTop,
+    frame: 0,
+    last: performance.now(),
+  };
+  if (Math.sign(dy) !== Math.sign(motion.y - element.scrollTop) && motion.y !== element.scrollTop) motion.y = element.scrollTop;
+  motion.y = Math.max(0, Math.min(maxY, motion.y + dy));
+  motion.x = Math.max(0, Math.min(maxX, motion.x + dx));
+  if (current) return;
+  motions.set(element, motion);
+  motion.frame = requestAnimationFrame((time) => step(element, motion, time));
+}
+
+function onScroll(event: Event) {
+  const target = event.target === document ? document.scrollingElement : event.target;
+  if (target instanceof Element) markScrolling(target);
+}
+
+function onPointerDown(event: PointerEvent) {
+  stopFrom(event.target);
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  if (SCROLL_KEYS.includes(event.key)) stopFrom(event.target);
+}
+
+export function SmoothScroll({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    window.addEventListener("wheel", onWheel, { passive: false });
+    document.addEventListener("scroll", onScroll, true);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      window.removeEventListener("wheel", onWheel);
+      document.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, []);
+
+  return children;
+}
+
+export function scrollToTop(element: Element = document.scrollingElement ?? document.documentElement) {
+  stop(element);
+  element.scrollTo({ top: 0, behavior: motionAllowed() ? "smooth" : "auto" });
+}

package/src/components/spinner.tsx

@@ -0,0 +1,18 @@
+import { LoaderPinwheelIcon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+
+const sizes = { sm: 14, md: 16, lg: 20 } as const;
+
+export function Spinner({
+  className,
+  size = "md",
+  ...props
+}: ComponentProps<"span"> & { size?: keyof typeof sizes }) {
+  return (
+    <span role="status" aria-label="Loading" className={cn("inline-flex", className)} {...props}>
+      <Icon icon={LoaderPinwheelIcon} variant="stroke" size={sizes[size]} className="animate-spin" />
+    </span>
+  );
+}

package/src/components/switch.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+export function Switch({ className, ...props }: ComponentProps<typeof BaseSwitch.Root>) {
+  return (
+    <BaseSwitch.Root
+      className={cn(
+        "bg-bg-muted hover:bg-bg-subtle inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full p-0.5 transition-[background-color,transform] duration-[var(--motion-duration)] outline-none",
+        "focus-visible:ring-ring focus-visible:ring-2",
+        "data-[checked]:bg-accent data-[checked]:hover:bg-accent-hover",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-bg-muted",
+        className,
+      )}
+      {...props}
+    >
+      <BaseSwitch.Thumb className="bg-bg-elevated size-4 translate-x-0 rounded-full shadow-[var(--shadow-sm)] transition-transform duration-[var(--motion-duration)] ease-[var(--motion-ease)] data-[checked]:translate-x-4" />
+    </BaseSwitch.Root>
+  );
+}

package/src/components/table.tsx

@@ -0,0 +1,52 @@
+import { ArrowDown01Icon, ArrowUp01Icon, ArrowUpDownIcon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+
+export type SortDirection = "asc" | "desc";
+
+export function Table({ className, ...props }: ComponentProps<"table">) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <table className={cn("w-full border-separate border-spacing-0 text-sm", className)} {...props} />
+    </div>
+  );
+}
+
+export function TableHeader({ className, ...props }: ComponentProps<"thead">) {
+  return <thead className={cn("text-fg-muted text-left text-xs", className)} {...props} />;
+}
+
+export function TableBody({ className, ...props }: ComponentProps<"tbody">) {
+  return <tbody className={cn("text-fg", className)} {...props} />;
+}
+
+export function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  return <tr className={cn("border-border border-b last:border-0", className)} {...props} />;
+}
+
+export function TableHead({
+  className,
+  sort,
+  onSort,
+  children,
+  ...props
+}: ComponentProps<"th"> & { sort?: SortDirection | false; onSort?: () => void }) {
+  const icon = sort === "asc" ? ArrowUp01Icon : sort === "desc" ? ArrowDown01Icon : ArrowUpDownIcon;
+  return (
+    <th className={cn("border-border border-b px-3 py-2 font-medium", className)} {...props}>
+      {onSort ? (
+        <button type="button" className="hover:text-fg inline-flex cursor-pointer items-center gap-1" onClick={onSort}>
+          {children}
+          <Icon icon={icon} variant="stroke" size={14} className={sort ? "text-fg" : "text-fg-subtle"} />
+        </button>
+      ) : (
+        children
+      )}
+    </th>
+  );
+}
+
+export function TableCell({ className, ...props }: ComponentProps<"td">) {
+  return <td className={cn("border-border border-b px-3 py-2.5 align-middle", className)} {...props} />;
+}

package/src/components/tabs.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+export function Tabs({ className, ...props }: ComponentProps<typeof BaseTabs.Root>) {
+  return <BaseTabs.Root className={cn("grid", className)} {...props} />;
+}
+
+export function TabsList({ className, children, ...props }: ComponentProps<typeof BaseTabs.List>) {
+  return (
+    <BaseTabs.List
+      className={cn(
+        "bg-bg-muted relative inline-flex items-center gap-1 rounded-[var(--radius-md)] p-1",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <BaseTabs.Indicator className="bg-bg-elevated/70 pointer-events-none absolute top-0 left-0 z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] translate-y-[var(--active-tab-top)] rounded-[var(--radius-sm)] shadow-[var(--shadow-sm)] backdrop-blur-md transition-[translate,width,height] duration-[var(--motion-duration)] ease-[var(--motion-ease)] motion-reduce:transition-none" />
+    </BaseTabs.List>
+  );
+}
+
+export function TabsTrigger({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>) {
+  return (
+    <BaseTabs.Tab
+      className={cn(
+        "text-fg-muted hover:text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[selected]:text-fg focus-visible:ring-ring relative z-[1] inline-flex h-8 cursor-pointer items-center justify-center rounded-[var(--radius-sm)] px-3 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsContent({ className, ...props }: ComponentProps<typeof BaseTabs.Panel>) {
+  return (
+    <BaseTabs.Panel
+      className={cn(
+        "col-start-1 row-start-2 pt-4 outline-none data-[ending-style]:pointer-events-none data-[ending-style]:animate-[tab-out_calc(var(--motion-duration)*3)_var(--motion-ease)_forwards] data-[starting-style]:animate-[tab-in_calc(var(--motion-duration)*3)_var(--motion-ease)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}