@hogoshi/ui 0.0.0-stage → 0.1.0

package/src/components/video-settings.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import {
+  AlarmClockIcon,
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  AspectRatioIcon,
+  DashboardSpeed01Icon,
+  HdIcon,
+  KeyboardIcon,
+  RepeatIcon,
+  Tick02Icon,
+} from "@hugeicons-pro/core-stroke-rounded";
+import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Icon, type AppIcon } from "./icon";
+import { Kbd } from "./kbd";
+import { Switch } from "./switch";
+
+export type VideoFit = "contain" | "cover";
+export type SleepTimer = number | "end" | null;
+
+export const SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+const SLEEP: { value: SleepTimer; label: string }[] = [
+  { value: null, label: "Off" },
+  { value: 15, label: "15 minutes" },
+  { value: 30, label: "30 minutes" },
+  { value: 60, label: "1 hour" },
+  { value: "end", label: "End of video" },
+];
+
+const FITS: { value: VideoFit; label: string }[] = [
+  { value: "contain", label: "Fit" },
+  { value: "cover", label: "Fill" },
+];
+
+const KEYS: [string, string[]][] = [
+  ["Play or pause", ["Space", "K"]],
+  ["Back or forward 5s", ["←", "→"]],
+  ["Back or forward 10s", ["J", "L"]],
+  ["Volume", ["↑", "↓"]],
+  ["Mute", ["M"]],
+  ["Fullscreen", ["F"]],
+  ["Mini player", ["I"]],
+  ["Jump to 0–90%", ["0", "9"]],
+  ["Previous or next frame", [",", "."]],
+  ["Speed", ["<", ">"]],
+];
+
+type View = "main" | "speed" | "quality" | "sleep" | "fit" | "keys";
+
+const rowClass =
+  "hover:bg-fg/10 flex h-9 w-full cursor-pointer items-center gap-3 rounded-[var(--radius-sm)] px-2.5 text-left text-sm outline-none transition-colors duration-[var(--motion-duration)] focus-visible:bg-fg/10";
+
+const speedLabel = (rate: number) => (rate === 1 ? "Normal" : `${rate}×`);
+
+export interface VideoSettingsProps {
+  rate: number;
+  onRate: (rate: number) => void;
+  qualities: string[];
+  quality: string;
+  onQuality: (quality: string) => void;
+  sleep: SleepTimer;
+  onSleep: (sleep: SleepTimer) => void;
+  fit: VideoFit;
+  onFit: (fit: VideoFit) => void;
+  loop: boolean;
+  onLoop: (loop: boolean) => void;
+}
+
+function Row({ icon, label, value, onClick }: { icon: AppIcon; label: string; value: string; onClick: () => void }) {
+  return (
+    <button type="button" className={rowClass} onClick={onClick}>
+      <Icon icon={icon} variant="stroke" size={18} className="text-fg-muted shrink-0" />
+      <span className="flex-1">{label}</span>
+      <span className="text-fg-muted text-xs">{value}</span>
+      <Icon icon={ArrowRight01Icon} variant="stroke" size={16} className="text-fg-subtle shrink-0" />
+    </button>
+  );
+}
+
+function Header({ title, onBack }: { title: string; onBack: () => void }) {
+  return (
+    <button type="button" className={cn(rowClass, "border-border mb-1 rounded-b-none border-b font-medium")} onClick={onBack}>
+      <Icon icon={ArrowLeft01Icon} variant="stroke" size={18} className="shrink-0" />
+      {title}
+    </button>
+  );
+}
+
+function Options<T>({
+  options,
+  value,
+  onPick,
+}: {
+  options: { value: T; label: string }[];
+  value: T;
+  onPick: (value: T) => void;
+}) {
+  return options.map((option) => (
+    <button
+      key={option.label}
+      type="button"
+      role="menuitemradio"
+      aria-checked={option.value === value}
+      className={rowClass}
+      onClick={() => onPick(option.value)}
+    >
+      <span className="flex size-[18px] shrink-0 items-center justify-center">
+        {option.value === value ? <Icon icon={Tick02Icon} variant="stroke" size={16} /> : null}
+      </span>
+      {option.label}
+    </button>
+  ));
+}
+
+export function VideoSettings(props: VideoSettingsProps) {
+  const [view, setView] = useState<View>("main");
+  const [motion, setMotion] = useState<"forward" | "back" | null>(null);
+  const [height, setHeight] = useState<number>();
+  const inner = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const node = inner.current;
+    if (!node) return;
+    const observer = new ResizeObserver(() => setHeight(node.offsetHeight));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [view]);
+
+  const go = (next: View) => {
+    setMotion(next === "main" ? "back" : "forward");
+    setView(next);
+  };
+
+  const pick =
+    <T,>(apply: (value: T) => void) =>
+    (value: T) => {
+      apply(value);
+      go("main");
+    };
+
+  const sleepLabel = SLEEP.find((option) => option.value === props.sleep)?.label ?? "Off";
+  const fitLabel = FITS.find((option) => option.value === props.fit)?.label ?? "Fit";
+
+  const views: Record<View, ReactNode> = {
+    main: (
+      <>
+        <Row icon={DashboardSpeed01Icon} label="Speed" value={speedLabel(props.rate)} onClick={() => go("speed")} />
+        {props.qualities.length > 1 ? (
+          <Row icon={HdIcon} label="Quality" value={props.quality} onClick={() => go("quality")} />
+        ) : null}
+        <Row icon={AlarmClockIcon} label="Sleep timer" value={sleepLabel} onClick={() => go("sleep")} />
+        <Row icon={AspectRatioIcon} label="Video fit" value={fitLabel} onClick={() => go("fit")} />
+        <label className={rowClass}>
+          <Icon icon={RepeatIcon} variant="stroke" size={18} className="text-fg-muted shrink-0" />
+          <span className="flex-1">Loop</span>
+          <Switch checked={props.loop} onCheckedChange={props.onLoop} />
+        </label>
+        <Row icon={KeyboardIcon} label="Hotkeys" value="" onClick={() => go("keys")} />
+      </>
+    ),
+    speed: (
+      <>
+        <Header title="Speed" onBack={() => go("main")} />
+        <Options
+          options={SPEEDS.map((rate) => ({ value: rate, label: speedLabel(rate) }))}
+          value={props.rate}
+          onPick={pick(props.onRate)}
+        />
+      </>
+    ),
+    quality: (
+      <>
+        <Header title="Quality" onBack={() => go("main")} />
+        <Options
+          options={props.qualities.map((quality) => ({ value: quality, label: quality }))}
+          value={props.quality}
+          onPick={pick(props.onQuality)}
+        />
+      </>
+    ),
+    sleep: (
+      <>
+        <Header title="Sleep timer" onBack={() => go("main")} />
+        <Options options={SLEEP} value={props.sleep} onPick={pick(props.onSleep)} />
+      </>
+    ),
+    fit: (
+      <>
+        <Header title="Video fit" onBack={() => go("main")} />
+        <Options options={FITS} value={props.fit} onPick={pick(props.onFit)} />
+      </>
+    ),
+    keys: (
+      <>
+        <Header title="Hotkeys" onBack={() => go("main")} />
+        <div className="grid gap-1.5 px-2.5 pt-1 pb-2">
+          {KEYS.map(([label, keys]) => (
+            <div key={label} className="flex items-center justify-between gap-3 text-xs">
+              <span className="text-fg-muted">{label}</span>
+              <span className="flex gap-1">
+                {keys.map((key) => (
+                  <Kbd key={key}>{key}</Kbd>
+                ))}
+              </span>
+            </div>
+          ))}
+        </div>
+      </>
+    ),
+  };
+
+  return (
+    <div
+      className="overflow-hidden transition-[height] duration-[var(--motion-duration)] ease-[var(--motion-ease)]"
+      style={{ height }}
+    >
+      <div
+        ref={inner}
+        key={view}
+        className={cn(
+          "flex flex-col",
+          motion === "forward" && "animate-[panel-from-right_var(--motion-duration)_var(--motion-ease)]",
+          motion === "back" && "animate-[panel-from-left_var(--motion-duration)_var(--motion-ease)]",
+        )}
+      >
+        {views[view]}
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,102 @@
+export { Avatar, AvatarFallback, AvatarImage } from "./components/avatar";
+export { Badge } from "./components/badge";
+export type { BadgeProps } from "./components/badge";
+export { Button, buttonVariants } from "./components/button";
+export type { ButtonProps } from "./components/button";
+export {
+  BottomBar,
+  BottomBarItem,
+  Sidebar,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInset,
+  SidebarItem,
+  SidebarLabel,
+  SidebarNav,
+  SidebarProvider,
+  SidebarTrigger,
+  sidebarLabel,
+  useSidebar,
+} from "./components/sidebar";
+export { Card, CardDescription, CardHeader, CardTitle } from "./components/card";
+export { BootScreen, PageLoader } from "./components/page-loader";
+export { Breadcrumb } from "./components/breadcrumb";
+export type { BreadcrumbItem } from "./components/breadcrumb";
+export { Result } from "./components/result";
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./components/table";
+export type { SortDirection } from "./components/table";
+export { Progress } from "./components/progress";
+export { Logo } from "./components/logo";
+export { LOGO_PATH, LOGO_VIEWBOX, logoSvg } from "./components/logo-mark";
+export { Navbar, NavbarItem, NavbarMenu, NavbarMenuLink, NavbarMenus } from "./components/navbar";
+export { Glide, glideActive } from "./components/glide";
+export type { GlideProps } from "./components/glide";
+export { Calendar } from "./components/calendar";
+export { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./components/collapsible";
+export type { CalendarRange } from "./components/calendar";
+export { CodeBlock } from "./components/code-block";
+export { Counter } from "./components/counter";
+export { AreaChart, BarChart, ChartContainer, ChartLegend, DonutChart, LineChart, Sparkline } from "./components/chart";
+export type { CartesianChartProps, ChartConfig } from "./components/chart";
+export { Checkbox } from "./components/checkbox";
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "./components/command";
+export {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuRoot,
+  ContextMenuTrigger,
+  ContextMenuViewport,
+} from "./components/context-menu";
+export type { ContextMenuEntry } from "./components/context-menu";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "./components/dialog";
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./components/dropdown-menu";
+export { FileList, FileUpload, FileUploadDropzone, formatBytes } from "./components/file-upload";
+export type { FileRejection, FileUploadProps } from "./components/file-upload";
+export { Icon } from "./components/icon";
+export { Image, ImageGallery, ImageViewer, downloadImage } from "./components/image-viewer";
+export type { ViewerImage } from "./components/image-viewer";
+export { Input, Label, Textarea } from "./components/input";
+export { Kbd } from "./components/kbd";
+export type { AppIcon, IconProps, IconVariant } from "./components/icon";
+export { Otp } from "./components/otp";
+export { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
+export { Pophover, PophoverContent, PophoverTrigger } from "./components/pophover";
+export { ScrollArea } from "./components/scroll-area";
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./components/select";
+export { Separator } from "./components/separator";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "./components/sheet";
+export type { SheetSide } from "./components/sheet";
+export { Slider } from "./components/slider";
+export { Spinner } from "./components/spinner";
+export { Skeleton } from "./components/skeleton";
+export { Switch } from "./components/switch";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip";
+export { SmoothScroll, scrollToTop } from "./components/smooth-scroll";
+export { Toaster, toast } from "./components/toaster";
+export { ThemeToggle } from "./components/theme-toggle";
+export { VideoPlayer, formatTime } from "./components/video-player";
+export type { VideoPlayerProps, VideoSource } from "./components/video-player";
+export type { SleepTimer, VideoFit } from "./components/video-settings";
+export { ThemeProvider, useTheme } from "./theme/theme";
+export type { ColorMode, ResolvedMode } from "./theme/theme";
+export { THEME_INIT_SCRIPT } from "./theme/theme-script";

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/jsx-highlight.ts

@@ -0,0 +1,128 @@
+function escapeHtml(value: string) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+
+function span(className: string, text: string) {
+  return `<span class="${className}">${escapeHtml(text)}</span>`;
+}
+
+function isTagStart(source: string, index: number) {
+  if (source[index] !== "<") return false;
+  const next = source[index + 1];
+  if (next === "/") return /[A-Za-z]/.test(source[index + 2] ?? "");
+  return /[A-Za-z]/.test(next ?? "");
+}
+
+export function highlightJsx(source: string) {
+  let index = 0;
+  let html = "";
+
+  const readString = (quote: string) => {
+    let end = index + 1;
+    while (end < source.length) {
+      if (source[end] === "\\") {
+        end += 2;
+        continue;
+      }
+      if (source[end] === quote) {
+        end += 1;
+        break;
+      }
+      end += 1;
+    }
+    const text = source.slice(index, end);
+    index = end;
+    return span("hljs-string", text);
+  };
+
+  const readTag = () => {
+    let chunk = "";
+    const closing = source[index + 1] === "/";
+    chunk += span("hljs-punctuation", closing ? "</" : "<");
+    index += closing ? 2 : 1;
+    const nameStart = index;
+    while (index < source.length && /[A-Za-z0-9_$.]/.test(source[index])) index += 1;
+    chunk += span("hljs-name", source.slice(nameStart, index));
+    if (closing) {
+      while (index < source.length && source[index] !== ">") {
+        chunk += span("hljs-punctuation", source[index]);
+        index += 1;
+      }
+      if (source[index] === ">") {
+        chunk += span("hljs-punctuation", ">");
+        index += 1;
+      }
+      return chunk;
+    }
+    while (index < source.length) {
+      const char = source[index];
+      if (char === "/" && source[index + 1] === ">") {
+        chunk += span("hljs-punctuation", "/>");
+        index += 2;
+        break;
+      }
+      if (char === ">") {
+        chunk += span("hljs-punctuation", ">");
+        index += 1;
+        break;
+      }
+      if (char === " " || char === "\n" || char === "\t" || char === "\r") {
+        chunk += char;
+        index += 1;
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        chunk += readString(char);
+        continue;
+      }
+      if (char === "=" || char === "{" || char === "}" || char === "?" || char === "|" || char === "(" || char === ")" || char === ",") {
+        chunk += span("hljs-punctuation", char);
+        index += 1;
+        continue;
+      }
+      if (/[0-9]/.test(char)) {
+        const start = index;
+        while (index < source.length && /[0-9.]/.test(source[index])) index += 1;
+        chunk += span("hljs-number", source.slice(start, index));
+        continue;
+      }
+      if (/[A-Za-z_$]/.test(char)) {
+        const start = index;
+        while (index < source.length && /[A-Za-z0-9_$.]/.test(source[index])) index += 1;
+        const word = source.slice(start, index);
+        let look = index;
+        while (look < source.length && (source[look] === " " || source[look] === "\n" || source[look] === "\t")) look += 1;
+        chunk += span(source[look] === "=" ? "hljs-attr" : "hljs-boolean", word);
+        continue;
+      }
+      chunk += span("hljs-punctuation", char);
+      index += 1;
+    }
+    return chunk;
+  };
+
+  while (index < source.length) {
+    if (isTagStart(source, index)) {
+      html += readTag();
+      continue;
+    }
+    if (source[index] === '"' || source[index] === "'" || source[index] === "`") {
+      html += readString(source[index]);
+      continue;
+    }
+    let end = index + 1;
+    while (
+      end < source.length &&
+      !isTagStart(source, end) &&
+      source[end] !== '"' &&
+      source[end] !== "'" &&
+      source[end] !== "`"
+    ) {
+      end += 1;
+    }
+    html += escapeHtml(source.slice(index, end));
+    index = end;
+  }
+
+  return html;
+}