@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/components/theme-switcher-sidebar.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "../shadcn/popover"
+import {
+    SidebarMenu, SidebarMenuButton, SidebarMenuItem
+} from "../shadcn/sidebar"
+import { cn } from "cn"
+import { themeConfig, menuThemeNames } from "../theme"
+import { ChevronRight } from "lucide-react"
+import { useTheme } from "next-themes"
+
+export function ThemeSwitcherSidebar() {
+  const { theme, setTheme } = useTheme()
+  
+  const config = themeConfig[theme as keyof typeof themeConfig] || themeConfig.system
+  const Icon = config.icon
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <Popover>
+          <PopoverTrigger render={<SidebarMenuButton className="group w-full cursor-pointer focus:!outline-none focus:!ring-0 select-none" tooltip="theme" />}>
+              <Icon style={{ width: "24px", height: "24px", strokeWidth: "1.0" }} />
+              <span>theme</span>
+              <ChevronRight className="ml-auto h-4 w-4 text-muted-foreground/50 transition-transform group-data-popup-open:rotate-90" />
+          </PopoverTrigger>
+          <PopoverContent
+            side="right"
+            className="w-48 p-1"
+          >
+            <div className="grid gap-1">
+              {menuThemeNames.map(key => ({ key, ...themeConfig[key] })).map(({ key, icon: ThemeIcon, label, iconClassName }) => (
+                <button
+                  key={key}
+                  onClick={() => setTheme(key)}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+                    "hover:bg-accent hover:text-accent-foreground cursor-pointer",
+                    theme === key && "bg-accent text-accent-foreground"
+                  )}
+                >
+                  <ThemeIcon className={cn("h-4 w-4", iconClassName)} />
+                  {label}
+                </button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+} 

package/src/components/theme-switcher-simple.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { Button } from "../shadcn/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../shadcn/dropdown-menu"
+import { cn } from "cn"
+import { themeConfig, menuThemeNames } from "../theme"
+import { Laptop, Moon, Sun, SunMoon } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+/**
+ * ThemeSwitcherSimple - Button-style theme switcher (for footer/standalone use)
+ * Does not require SidebarProvider
+ */
+export function ThemeSwitcherSimple() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const ICON_SIZE = 16
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="ghost" size="sm" aria-label="Toggle theme" />}>
+          {theme === "light" ? (
+            <Sun key="light" size={ICON_SIZE} className="text-muted-foreground" />
+          ) : theme === "dark" ? (
+            <Moon key="dark" size={ICON_SIZE} className="text-muted-foreground" />
+          ) : (
+            <Laptop key="system" size={ICON_SIZE} className="text-muted-foreground" />
+          )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-content" align="start">
+        <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+          <DropdownMenuRadioItem className="flex gap-2" value="light">
+            <Sun size={ICON_SIZE} className="text-muted-foreground" /> <span>light</span>
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem className="flex gap-2" value="dark">
+            <Moon size={ICON_SIZE} className="text-muted-foreground" /> <span>dark</span>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/**
+ * ThemeSwitcherCompact - Compact icon-only theme switcher (for navbar use)
+ * Does not require SidebarProvider
+ */
+export function ThemeSwitcherCompact() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <div
+        role="button"
+        tabIndex={0}
+        aria-label="Toggle theme"
+        className="w-8 h-8 flex items-center justify-center p-0 rounded-md transition-colors"
+      >
+        <div className="w-5 h-5 opacity-0" />
+      </div>
+    )
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label="Toggle theme"
+          className="w-8 h-8 flex items-center justify-center p-0 rounded-md transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer focus:ring-0 focus:outline-none"
+        >
+          <SunMoon className="w-5 h-5" />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-[150px]" align="start">
+        <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+          {menuThemeNames.map(key => ({ key, ...themeConfig[key] })).map(({ key, icon: Icon, label, iconClassName }) => (
+            <DropdownMenuRadioItem key={key} className="flex gap-2" value={key}>
+              <Icon className={cn("w-4 h-4", iconClassName)} />
+              <span>{label}</span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+

package/src/components/theme-switcher.tsx

@@ -0,0 +1,47 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuTrigger
+} from "../shadcn/dropdown-menu"
+import { SidebarMenuButton } from "../shadcn/sidebar"
+import { cn } from "cn"
+import { themeConfig, menuThemeNames } from "../theme"
+import { MoreHorizontal } from "lucide-react"
+import { useTheme } from "next-themes"
+
+interface ThemeSwitcherProps {
+  isMobile?: boolean;
+}
+
+export function ThemeSwitcher({ isMobile }: ThemeSwitcherProps) {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<SidebarMenuButton className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground" />}>
+          {(() => {
+            const config = themeConfig[theme as keyof typeof themeConfig] || themeConfig.system
+            const Icon = config.icon
+            return <Icon className={cn("w-4 h-4 mr-2", config.iconClassName)} />
+          })()}
+          theme <MoreHorizontal className="ml-auto" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side={isMobile ? "bottom" : "right"}
+        align={isMobile ? "end" : "start"}
+        className="min-w-56 rounded-lg"
+      >
+        <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+          {menuThemeNames.map(key => ({ key, ...themeConfig[key] })).map(({ key, icon: Icon, label, iconClassName }) => (
+            <DropdownMenuRadioItem key={key} className="flex gap-2" value={key}>
+              <Icon className={cn("w-4 h-4", iconClassName)} />
+              <span>{label}</span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+} 

package/src/components/toggle-group.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+
+import { ToggleGroup as ToggleGroupBase } from "../shadcn/toggle-group"
+
+export { ToggleGroupItem } from "../shadcn/toggle-group"
+
+// The shadcn toggle group with a `type`: "single" takes and gives one value,
+// "multiple" an array, as the call sites here are written. Base UI's group
+// (and so the shadcn one) always holds an array. ui/shadcn/toggle-group.tsx
+// stays as the CLI writes it.
+
+type BaseProps = Omit<React.ComponentProps<typeof ToggleGroupBase>, "value" | "defaultValue" | "onValueChange" | "multiple">
+
+type ToggleGroupSingleProps<T extends string> = BaseProps & {
+  type: "single"
+  value?: T
+  defaultValue?: T
+  onValueChange?: (value: T) => void
+}
+
+type ToggleGroupMultipleProps<T extends string> = BaseProps & {
+  type?: "multiple"
+  value?: T[]
+  defaultValue?: T[]
+  onValueChange?: (value: T[]) => void
+}
+
+export type ToggleGroupProps<T extends string> = ToggleGroupSingleProps<T> | ToggleGroupMultipleProps<T>
+
+export function ToggleGroup<T extends string>({ type, value, defaultValue, onValueChange, ...props }: ToggleGroupProps<T>) {
+  const single = type === "single"
+  const groupValue = single ? (value !== undefined ? [value as T] : undefined) : (value as T[] | undefined)
+  const groupDefault = single ? (defaultValue !== undefined ? [defaultValue as T] : undefined) : (defaultValue as T[] | undefined)
+  const onGroupChange = (next: unknown[]) => {
+    if (!onValueChange) return
+    if (single) {
+      // Pressing the pressed item leaves the group empty: the single stays.
+      const last = next[next.length - 1] as T | undefined
+      if (last !== undefined) (onValueChange as (v: T) => void)(last)
+    } else {
+      ;(onValueChange as (v: T[]) => void)(next as T[])
+    }
+  }
+
+  return (
+    <ToggleGroupBase
+      // Without a type the group is Base UI's: one pressed item, array value.
+      multiple={type === "multiple" || undefined}
+      value={groupValue}
+      defaultValue={groupDefault}
+      onValueChange={onGroupChange}
+      {...props}
+    />
+  )
+}

package/src/components/tooltip-button.tsx

@@ -0,0 +1,91 @@
+import { cn } from "cn"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+interface TooltipButtonBaseProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {}
+
+export interface TooltipButtonProps extends TooltipButtonBaseProps {
+  tooltipText: string
+  delay?: number
+  icon?: React.ReactNode
+  onCopy?: () => void
+  render?: React.ReactElement<{ className?: string }>
+}
+
+const TooltipButton = React.forwardRef<HTMLButtonElement, TooltipButtonProps>(
+  ({
+    className,
+    variant,
+    size,
+    tooltipText,
+    delay = 300,
+    icon,
+    onCopy,
+    render,
+    children,
+    ...props
+  }, ref) => {
+    const triggerElement = render
+      ? React.cloneElement(render, {
+          className: cn(buttonVariants({ variant, size, className }), "cursor-pointer", render.props.className),
+        })
+      : <button
+          className={cn(buttonVariants({ variant, size, className }), "cursor-pointer")}
+          onClick={onCopy}
+          ref={ref}
+          {...props}
+        />
+    return (
+      <TooltipProvider delay={delay}>
+        <Tooltip>
+          <TooltipTrigger render={triggerElement}>
+            {icon || children}
+          </TooltipTrigger>
+          <TooltipContent>{tooltipText}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+  }
+)
+
+TooltipButton.displayName = "TooltipButton"
+
+export { TooltipButton }

package/src/components/tooltip.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "cn"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  side = "top",
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        positionMethod="fixed"
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "bg-background text-foreground border border-border z-50 w-fit rounded-md px-2 py-1.5 text-xs text-balance origin-(--transform-origin) data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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 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",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="bg-transparent fill-transparent z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }