@vvedantb/ui 0.4.2 → 0.4.3

package/README.md

@@ -194,6 +194,26 @@ import { SessionsHoverCard } from "@vvedantb/ui";
 
 `children` is the trigger. It is rendered with `asChild` by default, so it keeps its own handlers (such as a context menu). Extra props and the ref go to it. Use `asChild={false}` for a default trigger element. The content portals to `document.body` by default, so `overflow:hidden` ancestors do not clip it. Pass `portal={false}` to opt out. `surface` is `"overlay"` (default), `"surface"` (`rounded-surface`) or `"glass"` (`glass-panel-strong`, `rounded-surface`). `className` merges over the surface without `!`. Defaults: `openDelay` 400 ms, `closeDelay` 150 ms, `side="right"`, `align="start"`, `sideOffset` 8, width and padding `w-64 p-3` (override with `className`). `body` is a node or a function of `{ open }`. `loadContent` runs only while the card is open. Control the state with `open`, `defaultOpen` and `onOpenChange`. The card opens on pointer hover and on keyboard focus (`:focus-visible`) only. Focus that follows a click or a context menu close does not open it. If pointer-driven focus left it stuck open, pointer leave force-closes it; otherwise Radix handles close (including moving onto the content). Fixture: `shell/examples/sessions-hover-card/`.
 
+## Panels, search and confirm
+
+```tsx
+import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui";
+
+<div className="relative">
+  <SlideOverPanel open={open} onClose={() => setOpen(false)} header={<h2>Details</h2>}>
+    <div className="p-4">Body</div>
+  </SlideOverPanel>
+</div>
+
+<ToolbarSearchInput value={query} onChange={setQuery} />
+
+<ConfirmDialog size="sm" open={open} onOpenChange={setOpen} title="Delete item?" variant="destructive" onConfirm={remove} />
+```
+
+- `SlideOverPanel`: a right-side panel, absolutely positioned inside its nearest positioned parent. It is not a portal or dialog. It slides in with a spring and is hidden below `md`. Only the close button closes it (no Escape, no outside click). `width` is `"w-96"` (default) or `"w-80"`. `closeLabel` defaults to `"Close panel"`. `className` merges last.
+- `ToolbarSearchInput`: a compact `h-8` search field for toolbars, with a search icon and a clear button. The clear button stays mounted and is hidden while the value is blank. Clearing calls `onChange("")` and does not move focus. Defaults: `placeholder="Search..."`, `label="Search"` (the `aria-label`), `clearLabel="Clear search"`. The ref goes to the `<input>`.
+- `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it.
+
 ## Toaster
 
 ```tsx

package/app/src/settings/SettingsField.tsx

@@ -1,12 +1,14 @@
 import type { ReactNode } from "react";
 
 interface SettingsFieldProps {
-  /** Field name, shown above the control. */
+  /** Field name, shown above the control (stacked) or left of it (horizontal). */
   label: ReactNode;
-  /** Help text shown under the control. */
+  /** Help text, shown under the control (stacked) or under the label (horizontal). */
   description?: ReactNode;
   /** `id` of the control, so clicking the label focuses it. */
   htmlFor?: string;
+  /** `"stacked"` (default) or `"horizontal"`. */
+  layout?: "stacked" | "horizontal";
   children: ReactNode;
 }
 
@@ -16,13 +18,39 @@ interface SettingsFieldProps {
  * Every settings form repeats the same label / control / help-text stack, so it
  * lives here rather than being re-spaced per field. Stack several inside a
  * section body with `grid gap-5`. Shared across apps.
+ *
+ * - `layout="stacked"` (default): label above the control, help text below it.
+ * - `layout="horizontal"`: one row with the label and help text on the left and
+ *   the control on the right, for compact controls such as a select. The label
+ *   is a `<label>` when `htmlFor` is set, otherwise a `<p>`.
  */
 export function SettingsField({
   label,
   description,
   htmlFor,
+  layout = "stacked",
   children,
 }: SettingsFieldProps) {
+  if (layout === "horizontal") {
+    return (
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          {htmlFor ? (
+            <label htmlFor={htmlFor} className="block text-sm font-medium text-foreground">
+              {label}
+            </label>
+          ) : (
+            <p className="text-sm font-medium text-foreground">{label}</p>
+          )}
+          {description ? (
+            <p className="mt-1 text-xs text-muted-foreground text-pretty">{description}</p>
+          ) : null}
+        </div>
+        {children}
+      </div>
+    );
+  }
+
   return (
     <div>
       <label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/index.ts

@@ -42,12 +42,14 @@ export * from "./ui/search-input";
 export * from "./ui/select";
 export * from "./ui/separator";
 export * from "./ui/skeleton";
+export * from "./ui/slide-over-panel";
 export * from "./ui/sonner";
 export * from "./ui/spinner";
 export * from "./ui/switch";
 export * from "./ui/table";
 export * from "./ui/tabs";
 export * from "./ui/textarea";
+export * from "./ui/toolbar-search-input";
 export * from "./ui/time-picker";
 export * from "./ui/tooltip";
 export * from "./ui/kbd";

package/src/ui/confirm-dialog.tsx

@@ -9,6 +9,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "./alert-dialog";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
 
 export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
   title: React.ReactNode;
@@ -19,6 +21,12 @@ export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
   onConfirm?: () => void;
   variant?: "default" | "destructive";
   confirmDisabled?: boolean;
+  /**
+   * `"default"`: blocking alert dialog that closes on either button.
+   * `"sm"`: compact dismissible dialog (outside click, Escape and the close
+   * button close it). Confirm does not close it; the caller controls `open`.
+   */
+  size?: "default" | "sm";
 };
 
 function ConfirmDialog({
@@ -30,9 +38,46 @@ function ConfirmDialog({
   onConfirm,
   variant = "default",
   confirmDisabled,
+  size = "default",
   children,
   ...props
 }: ConfirmDialogProps) {
+  if (size === "sm") {
+    return (
+      <Dialog {...props}>
+        {children}
+        <DialogContent className="sm:max-w-96">
+          <DialogTitle className="mb-2 text-sm font-medium">{title}</DialogTitle>
+          {description != null ? (
+            <DialogDescription className="mb-4 text-sm text-muted-foreground">
+              {description}
+            </DialogDescription>
+          ) : null}
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                onCancel?.();
+                props.onOpenChange?.(false);
+              }}
+            >
+              {cancelLabel}
+            </Button>
+            <Button
+              variant={variant}
+              size="sm"
+              disabled={confirmDisabled}
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
     <AlertDialog {...props}>
       {children}

package/src/ui/slide-over-panel.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+
+export interface SlideOverPanelProps {
+  open: boolean;
+  /** Panel width. Default `"w-96"`. */
+  width?: "w-80" | "w-96";
+  onClose: () => void;
+  header: ReactNode;
+  children: ReactNode;
+  /** `aria-label` of the close button. Default `"Close panel"`. */
+  closeLabel?: string;
+  className?: string;
+}
+
+/**
+ * Right-side slide-over shell, absolutely positioned inside its nearest
+ * positioned parent (not a portal or dialog). Only the close button closes it.
+ * Hidden below `md`.
+ */
+export function SlideOverPanel({
+  open,
+  width = "w-96",
+  onClose,
+  header,
+  children,
+  closeLabel = "Close panel",
+  className,
+}: SlideOverPanelProps) {
+  return (
+    <AnimatePresence initial={false}>
+      {open && (
+        <motion.div
+          key="slide-over-panel"
+          initial={{ x: "100%" }}
+          animate={{ x: 0 }}
+          exit={{ x: "100%" }}
+          transition={{ type: "spring", damping: 30, stiffness: 300 }}
+          className={cn(
+            `absolute top-0 right-0 bottom-0 ${width} z-20 glass-panel-strong smooth-shadow-ring-xl overflow-y-auto hidden md:flex flex-col`,
+            className,
+          )}
+        >
+          <div className="flex items-start justify-between p-4 pb-2">
+            {header}
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              onClick={onClose}
+              className="ml-2 shrink-0 text-muted-foreground hover:text-foreground"
+              aria-label={closeLabel}
+            >
+              <IconX size={16} />
+            </Button>
+          </div>
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/ui/toolbar-search-input.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { IconSearch, IconX } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+import { Input } from "./input";
+
+export interface ToolbarSearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  /** Default `"Search..."`. */
+  placeholder?: string;
+  /** `aria-label` of the input. Default `"Search"`. */
+  label?: string;
+  /** `aria-label` of the clear button. Default `"Clear search"`. */
+  clearLabel?: string;
+  className?: string;
+  inputClassName?: string;
+}
+
+/**
+ * Stable rounded search field for toolbars: no enter or clear animations, no
+ * layout jump. The clear button stays mounted and is hidden while the value is
+ * blank. Clearing does not move focus. The ref points at the `<input>`.
+ */
+export const ToolbarSearchInput = React.forwardRef<HTMLInputElement, ToolbarSearchInputProps>(
+  function ToolbarSearchInput(
+    {
+      value,
+      onChange,
+      placeholder = "Search...",
+      label = "Search",
+      clearLabel = "Clear search",
+      className,
+      inputClassName,
+    },
+    ref,
+  ) {
+    const active = value.trim().length > 0;
+
+    return (
+      <div className={cn("relative min-w-0 flex-1 sm:flex-none", className)}>
+        <IconSearch
+          size={14}
+          className="pointer-events-none absolute left-2.5 top-1/2 z-[1] -translate-y-1/2 text-muted-foreground"
+        />
+        <Input
+          ref={ref}
+          type="text"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={placeholder}
+          aria-label={label}
+          enterKeyHint="search"
+          className={cn(
+            // match outline toolbar buttons beside it
+            "h-8 w-full min-w-0 rounded-lg border border-border bg-transparent pl-8 pr-8 text-sm shadow-none sm:w-44 md:w-52",
+            "placeholder:text-muted-foreground/70 hover:bg-default",
+            "focus-visible:border-border focus-visible:bg-default focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            inputClassName,
+          )}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-label={clearLabel}
+          tabIndex={active ? 0 : -1}
+          aria-hidden={!active}
+          className={cn(
+            "absolute right-0.5 top-1/2 z-[1] h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+            !active && "pointer-events-none opacity-0",
+          )}
+          onClick={() => onChange("")}
+        >
+          <IconX size={14} stroke={1.75} />
+        </Button>
+      </div>
+    );
+  },
+);