@hogoshi/ui 0.0.0-stage → 0.1.1

package/src/components/logo-mark.ts

@@ -0,0 +1,8 @@
+export const LOGO_VIEWBOX = "4 4 24 24";
+
+export const LOGO_PATH =
+  "M6.85515 12.0105C7.05812 11.9096 7.28021 11.8477 7.49009 11.7637C7.79246 11.6429 8.0954 11.5136 8.39337 11.3823C9.99543 10.68 11.5859 9.95158 13.1641 9.19723C14.3228 8.63695 15.3771 8.15564 16.4511 7.40511C17.306 6.82373 17.9976 6.03223 18.6683 5.25433C18.7978 5.11236 18.8985 4.96726 19.0008 4.8057C19.0621 4.70895 19.1264 4.54717 19.2511 4.56367L19.2747 4.59692C19.2832 4.6733 19.257 4.76217 19.2211 4.82773C19.0247 5.18651 18.8069 5.54126 18.6086 5.89861C18.2257 6.59823 17.8559 7.30505 17.4996 8.01861C17.1747 8.67511 16.8888 9.37811 16.5726 10.0409C16.4517 10.294 16.344 10.5527 16.2124 10.8014C16.7828 10.4335 17.4011 10.1246 17.9538 9.72323C18.4506 9.36255 18.9207 8.95255 19.3495 8.51342C19.6011 8.2572 19.8404 7.9892 20.0667 7.7103C20.3385 7.36895 21.5875 5.57114 21.8676 5.5078L21.8909 5.52573C21.8963 5.56073 21.8876 5.60764 21.8714 5.63892C21.5412 6.27583 21.2734 6.92767 21.0043 7.5922C20.4488 8.96633 19.9528 10.3637 19.5176 11.7805C19.2502 12.6542 19.0194 13.5353 18.7763 14.4146C19.0179 14.3631 19.6183 14.071 19.8671 13.9567C21.1747 13.3441 22.4644 12.694 23.7347 12.0072L24.5558 11.5639C24.6942 11.489 25.0695 11.2449 25.2057 11.3116C25.2225 11.3451 25.2281 11.3708 25.2151 11.4077C25.1754 11.52 24.4489 11.9701 24.3065 12.068C23.3141 12.7522 22.3586 13.4885 21.4441 14.2738C19.6499 15.8032 17.8687 17.7296 16.5837 19.701C16.0131 20.5928 15.4963 21.5179 15.036 22.4713C14.9305 22.692 14.831 22.9155 14.7375 23.1415C14.6755 23.2929 14.5728 23.6333 14.4293 23.7068C14.3768 23.706 14.3965 23.7165 14.3639 23.6848C14.3351 23.5084 14.4843 22.9123 14.5257 22.7072C14.6923 21.8458 14.88 20.9886 15.0886 20.1363C15.3216 19.1981 15.5661 18.2628 15.822 17.3305C15.9787 16.8116 16.107 16.2866 16.2643 15.7726C16.4889 15.0388 16.7466 14.2946 16.9927 13.5665C17.1502 13.1108 17.3102 12.656 17.4727 12.202C17.5402 12.0164 17.6657 11.7217 17.7099 11.5449C17.063 11.979 16.2704 12.4224 15.7573 13.0159C15.2112 13.6475 14.6937 14.4864 14.3055 15.2273C14.2039 15.4212 14.0827 15.7217 13.9932 15.9272C13.8192 16.3229 13.6492 16.7202 13.4833 17.1194C12.5103 19.482 11.6951 21.9067 11.0431 24.3773C10.864 25.0674 10.7016 25.7617 10.556 26.4597C10.5162 26.6461 10.4248 27.2123 10.378 27.3347C10.3492 27.3628 10.3175 27.3811 10.2765 27.3844C10.2413 27.3873 10.2143 27.3674 10.1887 27.3455C10.0139 27.1963 9.82834 26.8456 9.70743 26.6432C8.80699 25.1357 8.30909 23.4184 8.1564 21.6733C8.0884 20.8961 8.07781 20.1268 8.08665 19.3474C8.09071 18.9883 8.08328 18.6193 8.11481 18.2615C8.19015 17.4073 8.34599 16.5762 8.52578 15.739C8.56634 15.5501 8.6709 14.9509 8.78696 14.8316C8.81565 14.8021 8.85012 14.7871 8.89215 14.7931C8.92515 14.7978 8.94831 14.8159 8.96656 14.8422C9.0389 14.9468 8.96684 15.2039 8.95003 15.3276C8.79862 16.4423 8.85028 17.7454 9.30406 18.7878C9.36893 18.9369 9.43634 19.1037 9.53821 19.2312C9.60778 19.3183 9.69584 19.3805 9.80937 19.389C10.0665 19.4082 10.3401 19.2211 10.5265 19.0635C11.8179 17.9714 13.079 15.5979 13.6447 14.015C13.7969 13.5818 13.9211 13.1393 14.0165 12.6903C14.2049 11.842 14.4357 10.5691 13.1614 10.5664C10.443 10.5607 11.9101 11.7971 13.279 12.5124C13.6905 12.7275 13.5201 12.9958 13.1149 12.8436C13.0391 12.8157 12.891 12.7736 12.8071 12.748C12.5423 12.6641 12.2752 12.5878 12.0061 12.5191C10.5974 12.1623 9.08934 12.0222 7.64137 12.1625C7.47015 12.1791 6.89987 12.299 6.81424 12.1371C6.80596 12.084 6.82843 12.0584 6.85515 12.0105Z";
+
+export function logoSvg(light: string, dark: string) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${LOGO_VIEWBOX}"><style>path{fill:${light}}@media (prefers-color-scheme: dark){path{fill:${dark}}}</style><path d="${LOGO_PATH}"/></svg>`;
+}

package/src/components/logo.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { LOGO_PATH, LOGO_VIEWBOX } from "./logo-mark";
+
+const logoVariants = cva("inline-flex shrink-0 items-center justify-center text-current transition-colors", {
+  variants: {
+    variant: {
+      primary: "bg-accent text-accent-fg",
+      secondary: "bg-bg-elevated text-fg border-border border",
+      ghost: "bg-transparent text-fg",
+      outline: "border-border text-fg border bg-transparent",
+    },
+    size: {
+      sm: "size-8 rounded-[var(--radius-sm)] p-1",
+      md: "size-10 rounded-[var(--radius-md)] p-1.5",
+      lg: "size-12 rounded-[var(--radius-md)] p-2",
+    },
+  },
+  defaultVariants: { variant: "primary", size: "sm" },
+});
+
+export function Logo({
+  variant,
+  size,
+  className,
+  ...props
+}: ComponentProps<"span"> & VariantProps<typeof logoVariants>) {
+  return (
+    <span className={cn(logoVariants({ variant, size }), className)} {...props}>
+      <svg viewBox={LOGO_VIEWBOX} className="size-full" aria-hidden>
+        <path fill="currentColor" d={LOGO_PATH} />
+      </svg>
+    </span>
+  );
+}

package/src/components/navbar.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { Button as BaseButton } from "@base-ui/react/button";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+import { ArrowDown01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Glide, glideActive } from "./glide";
+import type { AppIcon } from "./icon";
+import { Icon } from "./icon";
+
+const itemClass =
+  "text-fg-muted hover:bg-bg-subtle hover:text-fg relative inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-[var(--radius-sm)] px-2.5 text-sm outline-none transition-colors duration-[var(--motion-duration)] focus-visible:ring-2 focus-visible:ring-ring";
+
+const motion = "duration-[calc(var(--motion-duration)*3)] ease-[var(--motion-ease)] motion-reduce:transition-none";
+
+export function Navbar({ className, children, ...props }: ComponentProps<"header">) {
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-[var(--z-sticky)] h-14 border-0 bg-transparent px-3 shadow-none backdrop-blur-none",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative flex h-full min-w-0 items-center gap-1 overflow-x-auto">
+        <Glide selector='[aria-current="page"]' className="bg-accent-muted/60" />
+        {children}
+      </div>
+    </header>
+  );
+}
+
+export function NavbarItem({
+  icon,
+  active,
+  className,
+  children,
+  render,
+  ...props
+}: ComponentProps<typeof BaseButton> & { icon?: AppIcon; active?: boolean }) {
+  return (
+    <BaseButton
+      nativeButton={render ? false : true}
+      render={render}
+      aria-current={active ? "page" : undefined}
+      className={cn(itemClass, active && cn("bg-accent-muted text-accent hover:text-accent hover:bg-transparent", glideActive), className)}
+      {...props}
+    >
+      {icon ? <Icon icon={icon} size={16} /> : null}
+      {children}
+    </BaseButton>
+  );
+}
+
+export function NavbarMenus({ className, children, ...props }: ComponentProps<typeof NavigationMenu.Root>) {
+  return (
+    <NavigationMenu.Root className={cn("relative", className)} {...props}>
+      <NavigationMenu.List className="flex items-center gap-1">{children}</NavigationMenu.List>
+      <NavigationMenu.Portal>
+        <NavigationMenu.Positioner
+          sideOffset={8}
+          collisionPadding={12}
+          align="start"
+          className={cn(
+            "z-[var(--z-popover)] h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] data-[instant]:transition-none",
+            motion,
+          )}
+        >
+          <NavigationMenu.Popup
+            className={cn(
+              "border-border bg-bg-elevated/60 relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-lg)] border shadow-[var(--shadow-lg)] backdrop-blur-2xl transition-[opacity,width,height] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+              motion,
+            )}
+          >
+            <NavigationMenu.Viewport className="relative size-full overflow-hidden" />
+          </NavigationMenu.Popup>
+        </NavigationMenu.Positioner>
+      </NavigationMenu.Portal>
+    </NavigationMenu.Root>
+  );
+}
+
+export function NavbarMenu({
+  label,
+  icon,
+  className,
+  children,
+}: {
+  label: ReactNode;
+  icon?: AppIcon;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <NavigationMenu.Item>
+      <NavigationMenu.Trigger className={cn(itemClass, "data-[popup-open]:bg-bg-subtle data-[popup-open]:text-fg")}>
+        {icon ? <Icon icon={icon} size={16} /> : null}
+        {label}
+        <NavigationMenu.Icon className="transition-transform duration-[var(--motion-duration)] data-[popup-open]:rotate-180">
+          <Icon icon={ArrowDown01Icon} variant="stroke" size={14} />
+        </NavigationMenu.Icon>
+      </NavigationMenu.Trigger>
+      <NavigationMenu.Content
+        className={cn(
+          "grid w-max max-w-[calc(100vw-1.5rem)] gap-0.5 p-2 transition-[opacity,translate] data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0 data-[starting-style]:-translate-x-2 data-[starting-style]:opacity-0",
+          motion,
+          className,
+        )}
+      >
+        {children}
+      </NavigationMenu.Content>
+    </NavigationMenu.Item>
+  );
+}
+
+export function NavbarMenuLink({
+  icon,
+  title,
+  description,
+  className,
+  children,
+  ...props
+}: Omit<ComponentProps<typeof NavigationMenu.Link>, "title"> & { icon?: AppIcon; title?: ReactNode; description?: ReactNode }) {
+  return (
+    <NavigationMenu.Link
+      className={cn(
+        "text-fg hover:bg-bg-subtle flex cursor-pointer items-start gap-3 rounded-[var(--radius-md)] px-3 py-2 text-sm outline-none transition-colors duration-[var(--motion-duration)] focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      {...props}
+    >
+      {icon ? (
+        <span className="bg-bg-muted text-fg grid size-9 shrink-0 place-items-center rounded-[var(--radius-sm)]">
+          <Icon icon={icon} size={18} />
+        </span>
+      ) : null}
+      <span className="grid min-w-0 gap-0.5">
+        <span className="font-medium">{title ?? children}</span>
+        {description ? <span className="text-fg-muted text-xs leading-snug">{description}</span> : null}
+      </span>
+    </NavigationMenu.Link>
+  );
+}

package/src/components/otp.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { OTPField } from "@base-ui/react/otp-field";
+import { useRef, useState, type ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+const slotClass =
+  "border-border bg-bg-elevated focus:border-accent focus:ring-ring size-10 cursor-text rounded-[var(--radius-md)] border text-center text-sm text-transparent caret-transparent outline-none selection:bg-transparent selection:text-transparent focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50";
+
+const glyphClass = "text-fg absolute inset-0 flex items-center justify-center text-sm";
+
+interface Glyph {
+  id: number;
+  text: string;
+}
+
+let seq = 0;
+
+function OtpSlot({ text }: { text: string }) {
+  const [glyph, setGlyph] = useState<Glyph | null>(null);
+  const [leaving, setLeaving] = useState<Glyph[]>([]);
+
+  if ((glyph?.text ?? "") !== text) {
+    if (glyph) setLeaving((list) => [...list, glyph]);
+    setGlyph(text ? { id: (seq += 1), text } : null);
+  }
+
+  return (
+    <span className="relative">
+      <OTPField.Input className={slotClass} />
+      <span aria-hidden className="pointer-events-none absolute inset-px overflow-hidden rounded-[var(--radius-md)] select-none">
+        {glyph ? (
+          <span key={glyph.id} className={cn(glyphClass, "animate-[otp-in_calc(var(--motion-duration)*2)_var(--motion-ease)]")}>
+            {glyph.text}
+          </span>
+        ) : null}
+        {leaving.map((item) => (
+          <span
+            key={item.id}
+            className={cn(glyphClass, "animate-[otp-out_calc(var(--motion-duration)*2)_var(--motion-ease)_forwards]")}
+            onAnimationEnd={() => setLeaving((list) => list.filter((entry) => entry.id !== item.id))}
+          >
+            {item.text}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
+type OtpProps = Omit<ComponentProps<typeof OTPField.Root>, "length" | "mask"> & {
+  length?: number;
+  mask?: boolean;
+};
+
+export function Otp({
+  length = 6,
+  className,
+  mask = false,
+  value,
+  defaultValue = "",
+  onValueChange,
+  onValueComplete,
+  ...props
+}: OtpProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [inner, setInner] = useState(defaultValue);
+  const current = value ?? inner;
+
+  return (
+    <OTPField.Root
+      ref={rootRef}
+      length={length}
+      mask={mask}
+      value={current}
+      className={cn("flex gap-2", className)}
+      onValueChange={(next, eventDetails) => {
+        setInner(next);
+        onValueChange?.(next, eventDetails);
+      }}
+      onValueComplete={(next, eventDetails) => {
+        rootRef.current?.querySelectorAll("input").forEach((input) => input.blur());
+        onValueComplete?.(next, eventDetails);
+      }}
+      {...props}
+    >
+      {Array.from({ length }, (_, index) => {
+        const char = current[index] ?? "";
+        return <OtpSlot key={index} text={char && mask ? "•" : char} />;
+      })}
+    </OTPField.Root>
+  );
+}

package/src/components/page-loader.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState, type ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+export function PageLoader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div role="status" aria-label="Loading" className={cn("grid size-full min-h-40 place-items-center", className)} {...props}>
+      <span className="border-ring size-10 animate-[loader-pulse_1.2s_var(--motion-ease)_infinite] rounded-full border-2 motion-reduce:animate-none" />
+    </div>
+  );
+}
+
+export function BootScreen() {
+  const [phase, setPhase] = useState<"on" | "out" | "off">("on");
+
+  useEffect(() => {
+    const hide = () => setPhase("out");
+    if (document.readyState === "complete") hide();
+    else window.addEventListener("load", hide, { once: true });
+    return () => window.removeEventListener("load", hide);
+  }, []);
+
+  if (phase === "off") return null;
+
+  return (
+    <div
+      className={cn(
+        "bg-bg fixed inset-0 z-[calc(var(--z-toast)+10)] transition-opacity duration-[calc(var(--motion-duration)*2)] ease-[var(--motion-ease)]",
+        phase === "out" && "pointer-events-none opacity-0",
+      )}
+      onTransitionEnd={() => setPhase("off")}
+    >
+      <PageLoader className="size-full min-h-0" />
+    </div>
+  );
+}

package/src/components/pophover.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { PreviewCard } from "@base-ui/react/preview-card";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { popupClass } from "./popup";
+
+export const Pophover = PreviewCard.Root;
+
+export function PophoverTrigger({ delay = 150, closeDelay = 200, ...props }: ComponentProps<typeof PreviewCard.Trigger>) {
+  return <PreviewCard.Trigger delay={delay} closeDelay={closeDelay} {...props} />;
+}
+
+export function PophoverContent({
+  className,
+  side = "bottom",
+  align = "center",
+  ...props
+}: ComponentProps<typeof PreviewCard.Popup> &
+  Pick<ComponentProps<typeof PreviewCard.Positioner>, "side" | "align">) {
+  return (
+    <PreviewCard.Portal>
+      <PreviewCard.Positioner side={side} align={align} sideOffset={6} className="z-[var(--z-popover)]">
+        <PreviewCard.Popup className={cn(popupClass, "p-3", className)} {...props} />
+      </PreviewCard.Positioner>
+    </PreviewCard.Portal>
+  );
+}

package/src/components/popover.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { popupClass, useAnchoredPopup } from "./popup";
+
+export const Popover = BasePopover.Root;
+export const PopoverTrigger = BasePopover.Trigger;
+
+export function PopoverContent({
+  className,
+  children,
+  container,
+  side,
+  align,
+  ...props
+}: ComponentProps<typeof BasePopover.Popup> &
+  Pick<ComponentProps<typeof BasePopover.Portal>, "container"> &
+  Pick<ComponentProps<typeof BasePopover.Positioner>, "side" | "align">) {
+  const { popupClassName: _popupClassName, ...anchor } = useAnchoredPopup();
+  return (
+    <BasePopover.Portal container={container}>
+      <BasePopover.Positioner
+        className="z-[var(--z-popover)]"
+        {...anchor}
+        {...(side && { side })}
+        {...(align && { align })}
+      >
+        <BasePopover.Popup className={cn(popupClass, "p-3", className)} {...props}>
+          {children}
+        </BasePopover.Popup>
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
+  );
+}

package/src/components/popup.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+
+const transition =
+  "transition-[opacity,transform,translate,scale] duration-[var(--motion-duration)] ease-[var(--motion-ease)] motion-reduce:transition-none";
+
+const backdropTransition =
+  "transition-[opacity,backdrop-filter] duration-[calc(var(--motion-duration)*2.2)] ease-[var(--motion-ease)] motion-reduce:transition-none";
+
+export const backdropMotion = `${backdropTransition} opacity-100 backdrop-blur-2xl data-[starting-style]:opacity-0 data-[starting-style]:backdrop-blur-[0px] data-[ending-style]:opacity-0 data-[ending-style]:backdrop-blur-[0px]`;
+
+export const popupMotion = `${transition} origin-[var(--transform-origin)] scale-100 opacity-100 data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0`;
+
+export const popupClass =
+  "border-border bg-bg-elevated/60 text-fg relative z-[var(--z-popover)] min-w-40 overflow-visible rounded-[var(--radius-md)] border p-1 shadow-[var(--shadow-md)] backdrop-blur-2xl outline-none " +
+  popupMotion;
+
+export const popupItemClass =
+  "relative flex cursor-pointer items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:text-fg";
+
+export const HIGHLIGHTED = "[data-highlighted]";
+
+export const popupArrowClass =
+  "pointer-events-none data-[side=bottom]:top-[-5px] data-[side=left]:right-[-8px] data-[side=left]:rotate-90 data-[side=right]:left-[-8px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-5px] data-[side=top]:rotate-180";
+
+export function PopupArrowSvg({ inverted = false }: { inverted?: boolean }) {
+  return (
+    <svg width="12" height="6" viewBox="0 0 12 6" aria-hidden>
+      <path
+        d="M0.8 5.4 L6 1 L11.2 5.4"
+        className={inverted ? "fill-fg stroke-fg" : "fill-bg-elevated stroke-border"}
+        strokeWidth="1"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function PopupArrow({
+  arrow: Arrow,
+  inverted = false,
+}: {
+  arrow: ComponentType<{ className?: string; children?: ReactNode }>;
+  inverted?: boolean;
+}) {
+  return (
+    <Arrow className={popupArrowClass}>
+      <PopupArrowSvg inverted={inverted} />
+    </Arrow>
+  );
+}
+
+export function useAnchoredPopup() {
+  const [desktop, setDesktop] = useState(true);
+
+  useEffect(() => {
+    const query = window.matchMedia("(min-width: 768px)");
+    const apply = () => setDesktop(query.matches);
+    apply();
+    query.addEventListener("change", apply);
+    return () => query.removeEventListener("change", apply);
+  }, []);
+
+  if (!desktop) {
+    return {
+      side: "bottom" as const,
+      align: "center" as const,
+      sideOffset: 8,
+      popupClassName: "w-[calc(100vw-1.5rem)] max-w-[calc(100vw-1.5rem)]",
+    };
+  }
+  return { side: "bottom" as const, align: "start" as const, sideOffset: 6, popupClassName: "" };
+}

package/src/components/progress.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+export function Progress({
+  value = 0,
+  max = 100,
+  className,
+  ...props
+}: ComponentProps<"div"> & { value?: number; max?: number }) {
+  const ratio = max <= 0 ? 0 : Math.min(1, Math.max(0, value / max));
+  return (
+    <div
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={Math.round(value)}
+      className={cn("bg-bg-muted h-2 overflow-hidden rounded-full", className)}
+      {...props}
+    >
+      <div
+        className="bg-accent h-full rounded-full transition-[width] duration-[calc(var(--motion-duration)*1.6)] ease-[var(--motion-ease)] motion-reduce:transition-none"
+        style={{ width: `${ratio * 100}%` }}
+      />
+    </div>
+  );
+}

package/src/components/result.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export function Result({
+  title,
+  description,
+  children,
+  className,
+}: {
+  title: string;
+  description?: string;
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("mx-auto grid min-h-64 max-w-md place-content-center justify-items-center gap-3 px-4 py-16 text-center", className)}>
+      <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+      {description ? <p className="text-fg-muted text-sm">{description}</p> : null}
+      {children ? <div className="mt-2 flex flex-wrap items-center justify-center gap-2">{children}</div> : null}
+    </div>
+  );
+}

package/src/components/scroll-area.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+const scrollbarClass =
+  "flex touch-none p-px opacity-0 transition-opacity duration-[var(--motion-duration)] ease-[var(--motion-ease)] data-[scrolling]:opacity-100";
+
+export function ScrollArea({
+  className,
+  children,
+  contentClassName,
+  hideScrollbar = false,
+  ...props
+}: ComponentProps<typeof BaseScrollArea.Root> & { contentClassName?: string; hideScrollbar?: boolean }) {
+  return (
+    <BaseScrollArea.Root className={cn("relative overflow-hidden", className)} {...props}>
+      <BaseScrollArea.Viewport className="size-full overscroll-contain rounded-[inherit]">
+        <BaseScrollArea.Content className={contentClassName}>{children}</BaseScrollArea.Content>
+      </BaseScrollArea.Viewport>
+      {hideScrollbar ? null : (
+        <>
+          <BaseScrollArea.Scrollbar orientation="vertical" className={cn(scrollbarClass, "w-[var(--scrollbar-size)]")}>
+            <BaseScrollArea.Thumb className="bg-[var(--scrollbar-thumb)] flex-1 rounded-full" />
+          </BaseScrollArea.Scrollbar>
+          <BaseScrollArea.Scrollbar
+            orientation="horizontal"
+            className={cn(scrollbarClass, "h-[var(--scrollbar-size)] flex-col")}
+          >
+            <BaseScrollArea.Thumb className="bg-[var(--scrollbar-thumb)] flex-1 rounded-full" />
+          </BaseScrollArea.Scrollbar>
+        </>
+      )}
+      <BaseScrollArea.Corner />
+    </BaseScrollArea.Root>
+  );
+}

package/src/components/select.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { ArrowDown01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+import { Glide } from "./glide";
+import { HIGHLIGHTED, popupClass, popupItemClass, useAnchoredPopup } from "./popup";
+
+export const Select = BaseSelect.Root;
+
+export function SelectTrigger({ className, children, ...props }: ComponentProps<typeof BaseSelect.Trigger>) {
+  return (
+    <BaseSelect.Trigger
+      className={cn(
+        "border-border bg-bg-elevated text-fg hover:border-border-strong focus-visible:border-accent focus-visible:ring-ring flex w-full cursor-pointer items-center justify-between rounded-[var(--radius-md)] border px-3 text-sm outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [height:var(--row-h)]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <BaseSelect.Icon className="text-fg-muted">
+        <Icon icon={ArrowDown01Icon} variant="stroke" size={16} />
+      </BaseSelect.Icon>
+    </BaseSelect.Trigger>
+  );
+}
+
+export const SelectValue = BaseSelect.Value;
+
+export function SelectContent({ className, children, ...props }: ComponentProps<typeof BaseSelect.Popup>) {
+  const { popupClassName: _popupClassName, ...anchor } = useAnchoredPopup();
+  return (
+    <BaseSelect.Portal>
+      <BaseSelect.Positioner className="z-[var(--z-popover)]" {...anchor}>
+        <BaseSelect.Popup className={cn(popupClass, "w-[var(--anchor-width)] min-w-[var(--anchor-width)]", className)} {...props}>
+          <Glide selector={HIGHLIGHTED} />
+          <BaseSelect.List>{children}</BaseSelect.List>
+        </BaseSelect.Popup>
+      </BaseSelect.Positioner>
+    </BaseSelect.Portal>
+  );
+}
+
+export function SelectItem({ className, children, ...props }: ComponentProps<typeof BaseSelect.Item>) {
+  return (
+    <BaseSelect.Item className={cn(popupItemClass, className)} {...props}>
+      <BaseSelect.ItemText>{children as ReactNode}</BaseSelect.ItemText>
+    </BaseSelect.Item>
+  );
+}

package/src/components/separator.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+export function Separator({ className, ...props }: ComponentProps<typeof BaseSeparator>) {
+  return (
+    <BaseSeparator
+      className={cn("bg-border h-px w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className)}
+      {...props}
+    />
+  );
+}