@moloodev/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group moloo-field moloo-focus-within relative flex h-9 w-full min-w-0 items-stretch rounded-md transition-colors outline-none",
+        "has-disabled:opacity-50",
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-[var(--moloo-invalid-shadow)]",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto",
+        "has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "in-data-[slot=combobox-content]:focus-within:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-1.5 self-stretch text-sm font-semibold text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-md [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2.5 pr-1.5 has-[>button]:pl-1",
+        "inline-end":
+          "order-last pl-1.5 pr-2.5 has-[>button]:pr-1",
+        "block-start":
+          "order-first w-full justify-start px-2.5 py-2 group-has-[>input]/input-group:pt-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 py-2 group-has-[>input]/input-group:pb-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & {
+  size?: "xs" | "sm" | "icon-xs" | "icon-sm"
+  type?: "button" | "submit" | "reset"
+}) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      size={size}
+      className={cn(
+        "shadow-none hover:shadow-none active:shadow-none hover:translate-none active:translate-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm font-semibold text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-2.5 py-0 shadow-none outline-none focus-visible:outline-none disabled:bg-transparent aria-invalid:shadow-none dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "min-h-16 flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none outline-none focus-visible:outline-none disabled:bg-transparent aria-invalid:shadow-none dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/src/components/ui/input-otp.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "../../lib/utils"
+import { IconMinus } from "@tabler/icons-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center isolate", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-9 items-center justify-center border-2 border-border bg-[var(--field-bg)] text-sm font-semibold transition-colors outline-none",
+        "rounded-none not-first:-ml-[2px] first:rounded-l-md last:rounded-r-md",
+        "aria-invalid:border-destructive",
+        "data-[active=true]:z-10 data-[active=true]:border-destructive",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <IconMinus />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/components/ui/input-step.ts

@@ -0,0 +1,19 @@
+export type StepDirection = "up" | "down"
+
+export function commitStep(input: HTMLInputElement, direction: StepDirection): void {
+  if (input.disabled || input.readOnly) return
+
+  const previous = input.value
+  try {
+    if (direction === "up") input.stepUp()
+    else input.stepDown()
+  } catch (error) {
+    if (error instanceof DOMException && error.name === "InvalidStateError") return
+    throw error
+  }
+
+  if (input.value === previous) return
+  const view = input.ownerDocument.defaultView
+  if (view == null) return
+  input.dispatchEvent(new view.Event("input", { bubbles: true }))
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react"
+
+import { cn } from "../../lib/utils"
+import { commitStep, type StepDirection } from "./input-step"
+
+type InputProps = React.ComponentProps<"input"> & {
+  stepper?: boolean
+}
+
+function StepButton({
+  direction,
+  disabled,
+  onStep,
+}: {
+  direction: StepDirection
+  disabled: boolean
+  onStep: (event: React.MouseEvent<HTMLButtonElement>, direction: StepDirection) => void
+}) {
+  const Icon = direction === "up" ? IconChevronUp : IconChevronDown
+  return (
+    <button
+      type="button"
+      tabIndex={-1}
+      aria-label={direction === "up" ? "Increase" : "Decrease"}
+      disabled={disabled}
+      className="flex flex-1 items-center justify-center text-muted-foreground hover:text-foreground disabled:pointer-events-none"
+      onMouseDown={(event) => {
+        event.preventDefault()
+      }}
+      onClick={(event) => {
+        onStep(event, direction)
+      }}
+    >
+      <Icon className="pointer-events-none size-3" aria-hidden="true" />
+    </button>
+  )
+}
+
+function SteppedInput({
+  className,
+  disabled,
+  readOnly,
+  ...props
+}: React.ComponentProps<"input">) {
+  function step(event: React.MouseEvent<HTMLButtonElement>, direction: StepDirection) {
+    const input = event.currentTarget.closest("[data-slot=input-stepper]")?.querySelector("input")
+    if (!(input instanceof HTMLInputElement)) return
+    commitStep(input, direction)
+    input.focus({ preventScroll: true })
+  }
+
+  const buttonsDisabled = disabled === true || readOnly === true
+
+  return (
+    <span
+      data-slot="input-stepper"
+      className={cn(
+        "moloo-field moloo-focus-within relative flex h-9 w-full min-w-0 items-stretch transition-colors has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:shadow-[var(--moloo-invalid-shadow)]",
+        className,
+      )}
+    >
+      <InputPrimitive
+        data-slot="input"
+        {...props}
+        type="number"
+        disabled={disabled}
+        readOnly={readOnly}
+        className="moloo-number-input h-full w-full min-w-0 rounded-none border-0 bg-transparent py-1 pl-2.5 pr-7 text-sm font-semibold text-foreground shadow-none outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed"
+      />
+      <span className="absolute inset-y-0 right-0 flex w-5 flex-col">
+        <StepButton direction="up" disabled={buttonsDisabled} onStep={step} />
+        <StepButton direction="down" disabled={buttonsDisabled} onStep={step} />
+      </span>
+    </span>
+  )
+}
+
+function Input({ className, type, stepper, ...props }: InputProps) {
+  if (type === "number" && stepper !== false) {
+    return <SteppedInput className={className} {...props} />
+  }
+
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "moloo-field moloo-focus h-9 w-full min-w-0 px-2.5 py-1 text-sm font-semibold text-foreground transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:shadow-[var(--moloo-invalid-shadow)]",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components/ui/item.tsx

@@ -0,0 +1,201 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { Separator } from "./separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-md border-2 text-sm transition-colors duration-100 outline-none moloo-focus [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size,
+    },
+  })
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-md group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm font-semibold underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm/relaxed font-normal text-muted-foreground group-data-[size=xs]/item:text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

package/src/components/ui/kbd.tsx

@@ -0,0 +1,91 @@
+import { cn } from "../../lib/utils"
+
+/**
+ * Converts a key name to its platform symbol.
+ *
+ * @example
+ * kbdKey("cmd")       // "⌘"
+ * kbdKey("shift")     // "⇧"
+ * kbdKey("ctrl")      // "⌃"
+ * kbdKey("alt")       // "⌥"
+ * kbdKey("esc")       // "⎋"
+ * kbdKey("enter")     // "↵"
+ * kbdKey("backspace") // "⌫"
+ * kbdKey("tab")       // "⇥"
+ * kbdKey("up")        // "↑"
+ */
+const KEY_MAP: Record<string, string> = {
+  cmd: "⌘",
+  command: "⌘",
+  meta: "⌘",
+  ctrl: "⌃",
+  control: "⌃",
+  alt: "⌥",
+  option: "⌥",
+  shift: "⇧",
+  enter: "↵",
+  return: "↵",
+  backspace: "⌫",
+  delete: "⌦",
+  escape: "⎋",
+  esc: "⎋",
+  tab: "⇥",
+  up: "↑",
+  down: "↓",
+  left: "←",
+  right: "→",
+  space: "␣",
+  capslock: "⇪",
+}
+
+function kbdKey(key: string): string {
+  return KEY_MAP[key.toLowerCase()] ?? key.toUpperCase()
+}
+
+function Kbd({
+  className,
+  keys,
+  children,
+  ...props
+}: React.ComponentProps<"kbd"> & {
+  /** Key ids rendered with `kbdKey`, one chip each. Children are used when omitted. */
+  keys?: readonly string[]
+}) {
+  if (keys && keys.length > 0) {
+    return (
+      <KbdGroup className={className}>
+        {keys.map((key) => (
+          <Kbd key={key}>{kbdKey(key)}</Kbd>
+        ))}
+      </KbdGroup>
+    )
+  }
+
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-md border-2 border-border bg-muted px-1 font-sans text-xs font-semibold text-muted-foreground shadow-[0_2px_0_0] shadow-border select-none",
+        "in-data-[slot=tooltip-content]:border-background/30 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background in-data-[slot=tooltip-content]:shadow-background/20",
+        "dark:in-data-[slot=tooltip-content]:bg-background/10",
+        "[&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </kbd>
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup, kbdKey }

package/src/components/ui/kind-icon-glob.ts

@@ -0,0 +1,24 @@
+import type { Icon } from "@tabler/icons-react"
+
+type IconLoader = () => Promise<{ default: Icon }>
+
+type IconGlob = {
+  glob<Module>(pattern: string): Record<string, () => Promise<Module>>
+}
+
+let paths: Record<string, IconLoader> = {}
+try {
+  paths = (import.meta as ImportMeta & IconGlob).glob<{ default: Icon }>(
+    "/node_modules/@tabler/icons-react/dist/esm/icons/Icon*.mjs",
+  )
+} catch {
+  paths = {}
+}
+
+export const tablerIconLoaders: Map<string, IconLoader> = new Map(
+  Object.entries(paths).map(([path, loader]): [string, IconLoader] => {
+    const file = path.slice(path.lastIndexOf("/") + 1)
+    const name = file.endsWith(".mjs") ? file.slice(0, -".mjs".length) : file
+    return [name, loader]
+  }),
+)