@moloodev/ui 0.0.0-stage → 0.2.0

package/src/components/ui/pagination.tsx

@@ -0,0 +1,130 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { IconChevronLeft, IconChevronRight, IconDots } from "@tabler/icons-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        <a
+          aria-current={isActive ? "page" : undefined}
+          data-slot="pagination-link"
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <IconChevronLeft data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <IconChevronRight data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <IconDots
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

package/src/components/ui/panel.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const PanelContext = React.createContext<string | null>(null)
+
+function Panel({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<"section"> & { size?: "default" | "compact" }) {
+  const titleId = React.useId()
+
+  return (
+    <section
+      data-slot="panel"
+      data-size={size}
+      className={cn(
+        "group/panel flex min-h-0 flex-col overflow-hidden rounded-md border-2 border-border bg-card text-sm text-card-foreground shadow-moloo [--panel-spacing:--spacing(4)] data-[size=compact]:[--panel-spacing:--spacing(2.5)]",
+        className
+      )}
+      {...props}
+      aria-labelledby={titleId}
+    >
+      <PanelContext.Provider value={titleId}>{children}</PanelContext.Provider>
+    </section>
+  )
+}
+
+function PanelHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel-header"
+      className={cn(
+        "grid shrink-0 auto-rows-min grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-y-1 border-b-2 bg-muted px-(--panel-spacing) py-(--panel-spacing)",
+        "*:data-[slot=panel-title]:col-start-2 *:data-[slot=panel-title]:row-start-1 *:data-[slot=panel-title]:min-w-0",
+        "*:data-[slot=panel-description]:col-start-2 *:data-[slot=panel-description]:row-start-2 *:data-[slot=panel-description]:min-w-0",
+        "*:data-[slot=panel-action]:col-start-3 *:data-[slot=panel-action]:row-span-2 *:data-[slot=panel-action]:row-start-1 *:data-[slot=panel-action]:ml-2.5 *:data-[slot=panel-action]:justify-self-end *:data-[slot=panel-action]:self-center",
+        "[&>svg]:pointer-events-none [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:row-start-1 [&>svg]:mr-2.5 [&>svg]:shrink-0 [&>svg]:self-center [&>svg:not([class*='size-'])]:size-4",
+        "group-data-[size=compact]/panel:flex group-data-[size=compact]/panel:h-12 group-data-[size=compact]/panel:max-h-12 group-data-[size=compact]/panel:gap-2 group-data-[size=compact]/panel:py-0",
+        "group-data-[size=compact]/panel:*:data-[slot=panel-description]:shrink-0 group-data-[size=compact]/panel:*:data-[slot=panel-description]:min-w-min",
+        "group-data-[size=compact]/panel:*:data-[slot=panel-action]:ml-auto group-data-[size=compact]/panel:*:data-[slot=panel-action]:shrink-0",
+        "group-data-[size=compact]/panel:[&>svg]:mr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PanelTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  const titleId = React.useContext(PanelContext)
+  if (!titleId) {
+    throw new Error("PanelTitle must be used within Panel.")
+  }
+
+  return (
+    <h2
+      data-slot="panel-title"
+      className={cn(
+        "font-display text-base leading-tight font-bold tracking-[-0.02em] group-data-[size=compact]/panel:truncate group-data-[size=compact]/panel:text-sm",
+        className
+      )}
+      {...props}
+      id={titleId}
+    />
+  )
+}
+
+function PanelDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="panel-description"
+      className={cn(
+        "text-sm/relaxed text-pretty text-muted-foreground group-data-[size=compact]/panel:text-xs/4 group-data-[size=compact]/panel:whitespace-nowrap",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PanelAction({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="panel-action" className={className} {...props} />
+}
+
+function PanelBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel-body"
+      className={cn(
+        "min-h-0 flex-1 overflow-auto px-(--panel-spacing) py-(--panel-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Panel,
+  PanelHeader,
+  PanelTitle,
+  PanelDescription,
+  PanelAction,
+  PanelBody,
+}

package/src/components/ui/popover.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "../../lib/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-md moloo-surface bg-popover p-2.5 text-sm text-popover-foreground shadow-moloo-lg outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-sm/relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}

package/src/components/ui/progress.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "../../lib/utils"
+
+const PROGRESS_MAX = 100
+
+function isOverLimit(value: number | null, max: number) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return false
+  if (!Number.isFinite(max)) return false
+  return value > max
+}
+
+function overLimitAriaValueText(max: number) {
+  return (formattedValue: string | null, value: number | null) => {
+    const shown = formattedValue || `${value}`
+    return `${shown}, over the limit of ${max}`
+  }
+}
+
+function Progress({
+  className,
+  children,
+  value,
+  max,
+  getAriaValueText,
+  "aria-valuetext": ariaValueText,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  const upper = max ?? PROGRESS_MAX
+  const overLimit = isOverLimit(value, upper)
+  const hint =
+    overLimit && ariaValueText == null && getAriaValueText == null
+      ? overLimitAriaValueText(upper)
+      : getAriaValueText
+
+  return (
+    <ProgressPrimitive.Root
+      {...props}
+      value={value}
+      max={max}
+      getAriaValueText={hint}
+      {...(ariaValueText != null ? { "aria-valuetext": ariaValueText } : {})}
+      data-slot="progress"
+      data-over-limit={overLimit ? true : undefined}
+      className={cn("group/progress flex flex-wrap items-center gap-3", className)}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator
+          className={overLimit ? "bg-none bg-destructive-fill" : undefined}
+        />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex h-[0.55rem] w-full items-center overflow-hidden rounded-full bg-card shadow-[var(--moloo-progress-shadow)]",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn(
+        "h-full rounded-full bg-linear-to-r from-primary to-accent transition-all",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("label text-foreground", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto font-display text-sm font-bold tracking-[-0.02em] text-muted-foreground tabular-nums group-data-[over-limit=true]/progress:text-destructive",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}

package/src/components/ui/radio-group.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+
+import { cn } from "../../lib/utils"
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item moloo-focus peer relative flex aspect-square size-4 shrink-0 rounded-full border-2 border-input bg-[var(--field-bg)] transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary dark:bg-input/30 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="absolute inset-0 grid place-items-center"
+      >
+        <span className="size-2 rounded-full bg-primary-foreground animate-in zoom-in-50 duration-150" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

package/src/components/ui/resizable.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../../lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border outline-none moloo-focus after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-md bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+const usePanelRef = ResizablePrimitive.usePanelRef
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, usePanelRef }

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "../../lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none moloo-focus"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-md bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }