@moloodev/ui 0.0.0-stage → 0.2.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/slider.tsx

@@ -0,0 +1,52 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+
+import { cn } from "../../lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-md bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="moloo-focus-within relative block size-3.5 shrink-0 rounded-md border-2 border-border bg-primary shadow-moloo-sm transition-[color,box-shadow] select-none after:absolute after:-inset-2 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/components/ui/spinner.tsx

@@ -0,0 +1,18 @@
+import { cn } from "../../lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn(
+        "size-[1.35rem] shrink-0 animate-spin rounded-full border-[3px] border-secondary border-t-primary border-r-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/components/ui/switch.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "../../lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "moloo-focus peer group/switch relative inline-flex shrink-0 items-center rounded-md border-2 border-input bg-[var(--field-bg)] p-0.5 transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary data-[size=default]:h-6 data-[size=default]:w-10 data-[size=sm]:h-5 data-[size=sm]:w-8 data-checked:border-primary data-checked:bg-primary dark:bg-input/30 dark:data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block shrink-0 rounded-sm bg-foreground transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-full data-checked:bg-primary-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "label h-10 px-2 text-left align-middle whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center gap-1.5 text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent p-0",
+        line: "gap-1 rounded-md bg-transparent p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "moloo-focus relative inline-flex items-center justify-center gap-1.5 rounded-md border-2 border-transparent bg-card px-3 py-1.5 font-display text-[0.8rem] font-bold tracking-[-0.02em] whitespace-nowrap text-muted-foreground shadow-moloo-sm transition-all outline-none group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-active:bg-accent data-active:text-accent-foreground data-active:shadow-moloo data-active:rotate-[-1.2deg]",
+        "group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:px-2 group-data-[variant=line]/tabs-list:shadow-none group-data-[variant=line]/tabs-list:data-active:rotate-0 group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:text-foreground group-data-[variant=line]/tabs-list:data-active:shadow-none",
+        "after:absolute after:bg-accent after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-4px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/ui/tag-list-input.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import * as React from "react"
+import { IconPlus, IconX } from "@tabler/icons-react"
+
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Input } from "./input"
+import { cn } from "../../lib/utils"
+
+export type TagListInputParseResult =
+  | { ok: true; value: string }
+  | { ok: false; error: string }
+
+export type TagListInputProps = {
+  values: readonly string[]
+  onChange: (values: string[]) => void
+  parse?: (raw: string) => TagListInputParseResult
+  placeholder?: string
+  addLabel?: string
+  removeLabel?: (value: string) => string
+  empty?: React.ReactNode
+  disabled?: boolean
+  id?: string
+  className?: string
+  "aria-label"?: string
+  "aria-invalid"?: React.AriaAttributes["aria-invalid"]
+  "aria-describedby"?: string
+}
+
+function defaultParse(raw: string): TagListInputParseResult {
+  const value = raw.trim()
+  if (value.length === 0) {
+    return { ok: false, error: "Enter a value." }
+  }
+  return { ok: true, value }
+}
+
+function defaultRemoveLabel(value: string) {
+  return `Remove ${value}`
+}
+
+function commitTag(
+  values: readonly string[],
+  raw: string,
+  parse: (raw: string) => TagListInputParseResult,
+):
+  | { type: "invalid"; error: string }
+  | { type: "unchanged" }
+  | { type: "added"; values: string[] } {
+  const parsed = parse(raw)
+  if (!parsed.ok) return { type: "invalid", error: parsed.error }
+  if (values.includes(parsed.value)) return { type: "unchanged" }
+  return { type: "added", values: [...values, parsed.value] }
+}
+
+function markedInvalid(
+  ariaInvalid: React.AriaAttributes["aria-invalid"],
+  error: string | null,
+) {
+  if (error !== null) return true
+  return (
+    ariaInvalid === true ||
+    ariaInvalid === "true" ||
+    ariaInvalid === "grammar" ||
+    ariaInvalid === "spelling"
+  )
+}
+
+function TagListInput({
+  values,
+  onChange,
+  parse = defaultParse,
+  placeholder,
+  addLabel = "Add",
+  removeLabel = defaultRemoveLabel,
+  empty,
+  disabled = false,
+  id,
+  className,
+  "aria-label": ariaLabel,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+}: TagListInputProps) {
+  const [draft, setDraft] = React.useState("")
+  const [error, setError] = React.useState<string | null>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const errorId = React.useId()
+  const invalid = markedInvalid(ariaInvalid, error)
+  const describedBy =
+    [ariaDescribedBy, error ? errorId : undefined].filter(Boolean).join(" ") ||
+    undefined
+
+  function add() {
+    const result = commitTag(values, draft, parse)
+    if (result.type === "invalid") {
+      setError(result.error)
+      return
+    }
+    setError(null)
+    setDraft("")
+    if (result.type === "added") onChange(result.values)
+  }
+
+  function remove(value: string) {
+    onChange(values.filter((item) => item !== value))
+    inputRef.current?.focus()
+  }
+
+  function onDraftKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.nativeEvent.isComposing) return
+    if (event.key === "Enter") {
+      event.preventDefault()
+      add()
+      return
+    }
+    if (
+      (event.key === "Backspace" || event.key === "Delete") &&
+      draft.length === 0 &&
+      values.length > 0
+    ) {
+      event.preventDefault()
+      onChange(values.slice(0, -1))
+    }
+  }
+
+  return (
+    <div
+      data-slot="tag-list-input"
+      data-disabled={disabled ? "true" : undefined}
+      className={cn("flex w-full flex-col gap-2", className)}
+    >
+      <div className="flex min-h-7 flex-wrap items-center gap-1.5">
+        {values.length === 0
+          ? empty
+          : values.map((value) => (
+              <Badge
+                key={value}
+                variant="outline"
+                className="h-auto max-w-full gap-1 overflow-visible py-0.5 pr-0.5"
+              >
+                <span className="min-w-0 truncate" title={value}>
+                  {value}
+                </span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xs"
+                  className="size-5"
+                  aria-label={removeLabel(value)}
+                  disabled={disabled}
+                  onClick={() => remove(value)}
+                >
+                  <IconX aria-hidden />
+                </Button>
+              </Badge>
+            ))}
+      </div>
+      <div className="flex gap-2">
+        <Input
+          ref={inputRef}
+          id={id}
+          value={draft}
+          placeholder={placeholder}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          aria-invalid={invalid || undefined}
+          aria-describedby={describedBy}
+          onChange={(event) => {
+            setDraft(event.currentTarget.value)
+            if (error) setError(null)
+          }}
+          onKeyDown={onDraftKeyDown}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          disabled={disabled || draft.trim().length === 0}
+          onClick={add}
+        >
+          <IconPlus aria-hidden />
+          {addLabel}
+        </Button>
+      </div>
+      {error ? (
+        <p id={errorId} role="alert" className="text-sm font-normal text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export { TagListInput }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "moloo-field moloo-focus flex field-sizing-content min-h-16 w-full px-2.5 py-2 text-sm font-semibold text-foreground transition-colors outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-[var(--moloo-invalid-shadow)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }