@moloodev/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,52 @@
+import { type Icon } from "@tabler/icons-react"
+
+type IconLoader = () => Promise<{ default: Icon }>
+
+let loaderMap: Promise<Map<string, IconLoader>> | null = null
+
+function viteLoaders(): Promise<Map<string, IconLoader>> {
+  if (!loaderMap) {
+    loaderMap = import("./kind-icon-glob")
+      .then((mod) => mod.tablerIconLoaders)
+      .catch((error: unknown) => {
+        loaderMap = null
+        throw error
+      })
+  }
+  return loaderMap
+}
+
+function isIcon(value: unknown): value is Icon {
+  if (typeof value === "function") return true
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "render" in value &&
+    typeof value.render === "function"
+  )
+}
+
+function isIconModule(value: unknown): value is { default: Icon } {
+  return typeof value === "object" && value !== null && "default" in value && isIcon(value.default)
+}
+
+export async function loadTablerIcon(component: string): Promise<Icon | null> {
+  let loaders: Map<string, IconLoader>
+  try {
+    loaders = await viteLoaders()
+  } catch {
+    loaders = new Map()
+  }
+  const loader = loaders.get(component)
+  try {
+    if (loader) return (await loader()).default ?? null
+    const mod: unknown = await import(
+      /* @vite-ignore */
+      `@tabler/icons-react/dist/esm/icons/${component}.mjs`
+    )
+    if (!isIconModule(mod)) return null
+    return mod.default
+  } catch {
+    return null
+  }
+}

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

@@ -0,0 +1,46 @@
+import {
+  IconArchive,
+  IconCode,
+  IconCube,
+  IconDatabase,
+  IconFile,
+  IconFileText,
+  IconFolder,
+  IconHelp,
+  IconHierarchy,
+  IconLayout,
+  IconMarkdown,
+  IconMovie,
+  IconMusic,
+  IconPackage,
+  IconPhoto,
+  IconTable,
+  IconTypography,
+  type Icon,
+} from "@tabler/icons-react"
+
+const icons: Record<string, Icon> = {
+  IconArchive,
+  IconCode,
+  IconCube,
+  IconDatabase,
+  IconFile,
+  IconFileText,
+  IconFolder,
+  IconHelp,
+  IconHierarchy,
+  IconLayout,
+  IconMarkdown,
+  IconMovie,
+  IconMusic,
+  IconPackage,
+  IconPhoto,
+  IconTable,
+  IconTypography,
+}
+
+// The published editor is one script. A computed import() of an icon module
+// cannot be checked, so the view build loads this map instead of kind-icon-load.
+export function loadTablerIcon(component: string): Promise<Icon | null> {
+  return Promise.resolve(icons[component] ?? null)
+}

package/src/components/ui/kind-icon.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { IconFile, type Icon, type IconProps } from "@tabler/icons-react"
+import { loadTablerIcon } from "./kind-icon-load"
+
+const loaded = new Map<string, Icon>()
+const inflight = new Map<string, Promise<Icon | null>>()
+const listeners = new Map<string, Set<() => void>>()
+
+function notify(name: string) {
+  const set = listeners.get(name)
+  if (!set) return
+  for (const listener of set) listener()
+}
+
+function componentName(kebab: string): string | null {
+  if (typeof kebab !== "string" || kebab.length === 0) return null
+  const raw = kebab.startsWith("tabler:") ? kebab.slice("tabler:".length) : kebab
+  let name = "Icon"
+  for (const part of raw.split("-")) {
+    if (part.length === 0) return null
+    name += /^\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1)
+  }
+  return name
+}
+
+function loadIcon(icon: string): Promise<Icon | null> {
+  const hit = loaded.get(icon)
+  if (hit) return Promise.resolve(hit)
+  const pending = inflight.get(icon)
+  if (pending) return pending
+  const component = componentName(icon)
+  if (!component) return Promise.resolve(null)
+  const request = loadTablerIcon(component).then((Comp) => {
+    if (Comp) {
+      loaded.set(icon, Comp)
+      notify(icon)
+    }
+    return Comp
+  })
+  inflight.set(icon, request)
+  void request.finally(() => {
+    if (inflight.get(icon) === request) inflight.delete(icon)
+  })
+  return request
+}
+
+function subscribe(name: string, onStoreChange: () => void) {
+  let set = listeners.get(name)
+  if (!set) {
+    set = new Set()
+    listeners.set(name, set)
+  }
+  set.add(onStoreChange)
+  return () => {
+    set.delete(onStoreChange)
+    if (set.size === 0) listeners.delete(name)
+  }
+}
+
+function useKindIcon(icon: string): Icon {
+  const Comp = React.useSyncExternalStore(
+    (onStoreChange) => subscribe(icon, onStoreChange),
+    () => loaded.get(icon) ?? null,
+    () => null,
+  )
+  React.useEffect(() => {
+    void loadIcon(icon)
+  }, [icon])
+  return Comp ?? IconFile
+}
+
+export type KindIconProps = IconProps & {
+  /** Tabler icon URI or kebab-case name (e.g. `tabler:table`, `file-text`). */
+  icon: string
+}
+
+function KindIcon({ icon, ...props }: KindIconProps) {
+  const Comp = useKindIcon(icon)
+  return <Comp data-slot="kind-icon" aria-hidden {...props} />
+}
+
+export { KindIcon }

package/src/components/ui/kind-mark.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { KindIcon } from "./kind-icon"
+
+const kindMarkVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-md border-2 border-border text-[#12141a]",
+  {
+    variants: {
+      size: {
+        default: "size-6 [&_svg:not([class*='size-'])]:size-3.5",
+        sm: "size-5 [&_svg:not([class*='size-'])]:size-3",
+        lg: "size-8 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+export type KindMarkProps = Omit<React.ComponentProps<"span">, "children"> &
+  VariantProps<typeof kindMarkVariants> & {
+    /** Kind colour (platform `kind.color`). */
+    color: string
+    /** Tabler icon URI or kebab-case name (platform `kind.icon`). */
+    icon: string
+    /** Kind label (platform `kind.label`). Used for `title`; also `aria-label` when not decorative. */
+    label: string
+    /**
+     * When true (default), the mark is decorative: `aria-hidden` with `title` for
+     * hover. Set false to expose `label` as `aria-label` (and keep `title`).
+     */
+    decorative?: boolean
+  }
+
+function KindMark({
+  color,
+  icon,
+  label,
+  className,
+  size = "default",
+  decorative = true,
+  style,
+  ...props
+}: KindMarkProps) {
+  return (
+    <span
+      data-slot="kind-mark"
+      data-size={size}
+      className={cn(kindMarkVariants({ size }), className)}
+      style={{ backgroundColor: color, ...style }}
+      title={label}
+      aria-hidden={decorative ? true : undefined}
+      role={decorative ? undefined : "img"}
+      aria-label={decorative ? undefined : label}
+      {...props}
+    >
+      <KindIcon icon={icon} />
+    </span>
+  )
+}
+
+export { KindMark }

package/src/components/ui/label.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+type LabelProps = React.ComponentProps<"label"> & {
+  "data-slot"?: string
+}
+
+function Label({
+  className,
+  "data-slot": dataSlot = "label",
+  ...props
+}: LabelProps) {
+  return (
+    <label
+      data-slot={dataSlot}
+      className={cn(
+        dataSlot === "field-label" ? "text-sm font-semibold" : "label leading-none",
+        "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/components/ui/marker.tsx

@@ -0,0 +1,71 @@
+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"
+
+const markerVariants = cva(
+  "group/marker relative flex min-h-5 w-full items-center gap-2 text-left text-sm font-semibold text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator:
+          "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2",
+      },
+    },
+  }
+)
+
+function Marker({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(markerVariants({ variant, className })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "marker",
+      variant,
+    },
+  })
+}
+
+function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-icon"
+      aria-hidden="true"
+      className={cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="marker-content"
+      className={cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Marker, MarkerIcon, MarkerContent, markerVariants }

package/src/components/ui/menubar.tsx

@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+
+import { cn } from "../../lib/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+import { IconCheck } from "@tabler/icons-react"
+
+function Menubar({ className, ...props }: MenubarPrimitive.Props) {
+  return (
+    <MenubarPrimitive
+      data-slot="menubar"
+      className={cn(
+        "flex h-8 items-center gap-0.5 rounded-md border-2 p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuGroup>) {
+  return <DropdownMenuGroup data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPortal>) {
+  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuTrigger>) {
+  return (
+    <DropdownMenuTrigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "moloo-focus flex cursor-pointer items-center rounded-md px-1.5 py-[calc(--spacing(0.8))] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="menubar-content"
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn("min-w-36 rounded-md moloo-surface bg-popover text-popover-foreground shadow-moloo-lg 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", className )}
+      {...props}
+    />
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuItem>) {
+  return (
+    <DropdownMenuItem
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item gap-2 rounded-md px-2 py-2 text-sm font-semibold focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-pointer items-center gap-2 rounded-md py-2 pr-28 pl-8 text-sm font-semibold outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <IconCheck
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
+  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-pointer items-center gap-2 rounded-md py-2 pr-2 pl-8 text-sm font-semibold outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.RadioItemIndicator>
+          <IconCheck
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuLabel
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn("px-2 py-2 text-sm data-inset:pl-8", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSeparator>) {
+  return (
+    <DropdownMenuSeparator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuShortcut>) {
+  return (
+    <DropdownMenuShortcut
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-sm tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSub>) {
+  return <DropdownMenuSub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuSubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "gap-2 rounded-md px-2 py-2 text-sm font-semibold focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubContent>) {
+  return (
+    <DropdownMenuSubContent
+      data-slot="menubar-sub-content"
+      className={cn("min-w-32 rounded-md moloo-surface bg-popover text-popover-foreground shadow-moloo-lg duration-100 data-[side=bottom]:slide-in-from-top-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}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}