@viliha/vui-ui 1.0.0

package/src/dropdown-menu.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+import { Checkbox } from "./checkbox";
+
+interface DropdownProps {
+  label: string;
+  icon?: React.ReactNode;
+  align?: "start" | "end";
+  children: React.ReactNode;
+  /** Accessible name for icon-only triggers (when label is empty). */
+  ariaLabel?: string;
+  /** Render the trigger as a compact toolbar button (default) or a plain one. */
+  active?: boolean;
+}
+
+/** Minimal click-to-open menu with outside-click + Escape to close. */
+export function Dropdown({
+  label,
+  icon,
+  align = "start",
+  children,
+  ariaLabel,
+  active,
+}: DropdownProps) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    function onDocMouseDown(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={ariaLabel ?? label}
+        className={cn(
+          "inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 font-medium transition-colors",
+          active
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        )}
+      >
+        {icon}
+        {label}
+      </button>
+      {open && (
+        <div
+          className={cn(
+            "vui-pop-in absolute z-40 mt-1 min-w-52 overflow-hidden rounded-md border border-border bg-popover text-left text-sm font-normal text-popover-foreground shadow-md",
+            align === "end" ? "right-0" : "left-0",
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface DropdownItemProps {
+  children: React.ReactNode;
+  onSelect?: () => void;
+  checked?: boolean;
+  icon?: React.ReactNode;
+}
+
+export function DropdownItem({
+  children,
+  onSelect,
+  checked,
+  icon,
+}: DropdownItemProps) {
+  return (
+    <button
+      type="button"
+      role="menuitemcheckbox"
+      aria-checked={checked}
+      onClick={onSelect}
+      className="flex w-full cursor-pointer items-center gap-2 border-b border-border px-3 py-2 text-left last:border-b-0 hover:bg-accent hover:text-accent-foreground"
+    >
+      <span className="flex-1 truncate">{children}</span>
+      {icon}
+      {checked !== undefined && (
+        <Checkbox
+          checked={checked}
+          readOnly
+          tabIndex={-1}
+          aria-hidden="true"
+          className="pointer-events-none"
+        />
+      )}
+    </button>
+  );
+}
+
+export function DropdownLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">
+      {children}
+    </p>
+  );
+}

package/src/input.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export const Input = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<"input">
+>(({ className, type, ...props }, ref) => (
+  <input
+    type={type}
+    ref={ref}
+    className={cn(
+      "flex h-8 w-full rounded-md border border-input bg-background px-2.5 py-1 transition-colors",
+      "placeholder:text-muted-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "file:border-0 file:bg-transparent file:file:font-medium",
+      className,
+    )}
+    {...props}
+  />
+));
+Input.displayName = "Input";

package/src/menu.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+/**
+ * Bordered list primitives — the theme standard for menus and record lists.
+ * Each row draws its own bottom divider (the last one is omitted), so any list
+ * built from these can't miss the border. Use `Menu` as the rounded, clipped
+ * container and `MenuItem` for each row; `MenuLabel` for section headers.
+ */
+
+/** Shared row styling — exported for the rare case you must style a bespoke
+ *  element (e.g. a framework `<Link>`) yet still match the standard. */
+export const menuItemClass =
+  "flex w-full items-center gap-2.5 border-b border-border px-3 py-2 text-left transition-colors last:border-b-0 hover:bg-accent";
+
+export function Menu({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="menu"
+      className={cn(
+        "overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface MenuItemProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Render as a different element (e.g. a framework `<Link>`); default button. */
+  as?: React.ElementType;
+  href?: string;
+}
+
+/** A bordered list row. Renders a `<button>` by default; pass `as={Link}` +
+ *  `href` to render a navigation link. Divider + hover come baked in. */
+export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(
+  function MenuItem({ as: Comp = "button", className, children, ...props }, ref) {
+    return (
+      <Comp
+        ref={ref}
+        role="menuitem"
+        className={cn(menuItemClass, className)}
+        {...(Comp === "button" ? { type: "button" } : {})}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+export function MenuLabel({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <p
+      className={cn(
+        "border-b border-border px-3 py-2 font-medium text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </p>
+  );
+}