@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/overlays/focus-return/focus-return.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useState } from "react";
+const PreviousFocusContext = createContext(null);
+function useCapturePreviousFocus(open) {
+  const focusRef = useRef(null);
+  const [previousOpen, setPreviousOpen] = useState(open);
+  if (open !== previousOpen) {
+    if (open) focusRef.current = document.activeElement;
+    setPreviousOpen(open);
+  }
+  return focusRef;
+}
+function PreviousFocusProvider({
+  focusRef,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PreviousFocusContext.Provider, { value: focusRef, children });
+}
+function usePreviousFocus() {
+  return useContext(PreviousFocusContext);
+}
+function restoreFocusOnClose(event, focusRef) {
+  if (event.defaultPrevented) return;
+  const element = focusRef?.current;
+  if (element && document.contains(element)) {
+    event.preventDefault();
+    element.focus();
+  }
+}
+export {
+  PreviousFocusProvider,
+  restoreFocusOnClose,
+  useCapturePreviousFocus,
+  usePreviousFocus
+};

package/dist/overlays/focus-return/index.d.ts

@@ -0,0 +1 @@
+export { type FocusRef, PreviousFocusProvider, restoreFocusOnClose, useCapturePreviousFocus, usePreviousFocus, } from "./focus-return.js";

package/dist/overlays/focus-return/index.js

@@ -0,0 +1,12 @@
+import {
+  PreviousFocusProvider,
+  restoreFocusOnClose,
+  useCapturePreviousFocus,
+  usePreviousFocus
+} from "./focus-return.js";
+export {
+  PreviousFocusProvider,
+  restoreFocusOnClose,
+  useCapturePreviousFocus,
+  usePreviousFocus
+};

package/dist/overlays/hover-card/hover-card.d.ts

@@ -0,0 +1,28 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface HoverCardProps {
+    children: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** ms before opening on hover (focus opens at once). */
+    openDelay?: number;
+    /** ms before closing, so the pointer can travel into the card. */
+    closeDelay?: number;
+}
+/**
+ * Preview card shown on hover or keyboard focus of its trigger. Built on the popover
+ * primitive for placement and collision handling; it never takes focus and closes on Escape.
+ */
+export declare function HoverCard({ children, open: openProp, defaultOpen, onOpenChange, openDelay, closeDelay, }: HoverCardProps): import("react").JSX.Element;
+export interface HoverCardTriggerProps extends ComponentPropsWithoutRef<"span"> {
+    /** Use the child element as the trigger instead of wrapping it in a span. */
+    asChild?: boolean;
+}
+export declare function HoverCardTrigger({ asChild, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: HoverCardTriggerProps): import("react").JSX.Element;
+export interface HoverCardContentProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, "onOpenAutoFocus"> {
+    /** Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. */
+    container?: HTMLElement | null;
+}
+export declare function HoverCardContent({ className, sideOffset, collisionPadding, onMouseEnter, onMouseLeave, onCloseAutoFocus, container, ...props }: HoverCardContentProps): import("react").JSX.Element;

package/dist/overlays/hover-card/hover-card.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../utils/cn.js";
+const HoverCardContext = createContext(null);
+function useHoverCard() {
+  const value = useContext(HoverCardContext);
+  if (!value) throw new Error("HoverCardTrigger and HoverCardContent must be inside HoverCard");
+  return value;
+}
+function HoverCard({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  openDelay = 300,
+  closeDelay = 150
+}) {
+  const [state, setState] = useState(defaultOpen);
+  const open = openProp ?? state;
+  const timer = useRef(void 0);
+  const contentId = useId();
+  const setOpen = useCallback(
+    (next) => {
+      if (openProp === void 0) setState(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const schedule = useCallback(
+    (next, delay) => {
+      window.clearTimeout(timer.current);
+      if (delay <= 0) setOpen(next);
+      else timer.current = window.setTimeout(() => setOpen(next), delay);
+    },
+    [setOpen]
+  );
+  useEffect(() => () => window.clearTimeout(timer.current), []);
+  const value = useMemo(
+    () => ({ contentId, open, schedule, openDelay, closeDelay }),
+    [contentId, open, schedule, openDelay, closeDelay]
+  );
+  return /* @__PURE__ */ jsx(HoverCardContext.Provider, { value, children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children }) });
+}
+function HoverCardTrigger({
+  asChild,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const card = useHoverCard();
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "aria-describedby": card.open ? card.contentId : void 0,
+      onPointerEnter: (event) => {
+        onPointerEnter?.(event);
+        if (event.pointerType !== "touch") card.schedule(true, card.openDelay);
+      },
+      onPointerLeave: (event) => {
+        onPointerLeave?.(event);
+        if (event.pointerType !== "touch") card.schedule(false, card.closeDelay);
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+        card.schedule(true, 0);
+      },
+      onBlur: (event) => {
+        onBlur?.(event);
+        card.schedule(false, 0);
+      },
+      ...props
+    }
+  ) });
+}
+function HoverCardContent({
+  className,
+  sideOffset = 8,
+  collisionPadding = 8,
+  onMouseEnter,
+  onMouseLeave,
+  onCloseAutoFocus,
+  container,
+  ...props
+}) {
+  const card = useHoverCard();
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      id: card.contentId,
+      role: "tooltip",
+      sideOffset,
+      collisionPadding,
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      onCloseAutoFocus: (event) => {
+        onCloseAutoFocus?.(event);
+        event.preventDefault();
+      },
+      onMouseEnter: (event) => {
+        onMouseEnter?.(event);
+        card.schedule(true, 0);
+      },
+      onMouseLeave: (event) => {
+        onMouseLeave?.(event);
+        card.schedule(false, card.closeDelay);
+      },
+      className: cn(
+        "z-85 w-72 max-w-(--radix-popover-content-available-width) rounded-popover border-card surface-overlay bg-surface-overlay p-card text-body text-ink shadow-overlay",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+};

package/dist/overlays/hover-card/index.d.ts

@@ -0,0 +1 @@
+export { HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, } from "./hover-card.js";

package/dist/overlays/hover-card/index.js

@@ -0,0 +1,10 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from "./hover-card.js";
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+};

package/dist/overlays/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./context-menu/index.js";
+export * from "./dialog/index.js";
+export * from "./drawer/index.js";
+export * from "./dropdown-menu/index.js";
+export * from "./focus-return/index.js";
+export * from "./hover-card/index.js";
+export * from "./popover/index.js";
+export * from "./toaster/index.js";

package/dist/overlays/index.js

@@ -0,0 +1,8 @@
+export * from "./context-menu/index.js";
+export * from "./dialog/index.js";
+export * from "./drawer/index.js";
+export * from "./dropdown-menu/index.js";
+export * from "./focus-return/index.js";
+export * from "./hover-card/index.js";
+export * from "./popover/index.js";
+export * from "./toaster/index.js";

package/dist/overlays/popover/index.d.ts

@@ -0,0 +1 @@
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverTrigger, } from "./popover.js";

package/dist/overlays/popover/index.js

@@ -0,0 +1,14 @@
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger
+} from "./popover.js";
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger
+};

package/dist/overlays/popover/popover.d.ts

@@ -0,0 +1,10 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type { ComponentPropsWithoutRef } from "react";
+export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface PopoverContentProps extends ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+}
+/** Positioned contextual panel; viewport collision is handled by Radix (Floating UI). */
+export declare function PopoverContent({ className, sideOffset, collisionPadding, ...props }: PopoverContentProps): import("react").JSX.Element;

package/dist/overlays/popover/popover.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn.js";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverClose = PopoverPrimitive.Close;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+function PopoverContent({
+  className,
+  sideOffset = 6,
+  collisionPadding = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        "z-85 min-w-[min(14.375rem,var(--radix-popover-content-available-width))] max-h-(--radix-popover-content-available-height) max-w-(--radix-popover-content-available-width) overflow-y-auto rounded-popover surface-overlay p-1.5 text-ink shadow-overlay",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger
+};

package/dist/overlays/toaster/index.d.ts

@@ -0,0 +1 @@
+export { Toaster, type ToasterProps, toast } from "./toaster.js";

package/dist/overlays/toaster/index.js

@@ -0,0 +1,5 @@
+import { Toaster, toast } from "./toaster.js";
+export {
+  Toaster,
+  toast
+};

package/dist/overlays/toaster/toaster.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+export { toast } from "sonner";
+export interface ToasterProps extends ComponentProps<typeof SonnerToaster> {
+}
+/**
+ * Ephemeral, non-critical confirmations. Pass `action: { label, onClick }` to
+ * `toast()` for an undo button. Critical messages belong in a banner instead.
+ */
+export declare function Toaster({ position, duration, visibleToasts, ...props }: ToasterProps): import("react").JSX.Element;

package/dist/overlays/toaster/toaster.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Toaster as SonnerToaster } from "sonner";
+import { toast } from "sonner";
+function Toaster({
+  position = "bottom-center",
+  duration = 6e3,
+  visibleToasts = 2,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SonnerToaster,
+    {
+      position,
+      duration,
+      visibleToasts,
+      toastOptions: {
+        classNames: {
+          toast: "rounded-button! border-none! bg-toast-bg! text-toast-ink! shadow-overlay! text-control! min-h-11! py-1.5! pr-2! pl-4!",
+          actionButton: "rounded-button! bg-toast-ink/18! text-toast-ink! font-bold! h-8! px-3!"
+        }
+      },
+      ...props
+    }
+  );
+}
+export {
+  Toaster,
+  toast
+};

package/dist/palette/command-palette/command-palette.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+export interface CommandPaletteItem {
+    id: string;
+    label: string;
+    group: string;
+    icon?: ReactNode;
+    /** Secondary text at the end of the row. */
+    hint?: string;
+    /** Extra terms that should match this item when filtering. */
+    keywords?: string[];
+    onSelect: () => void;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onClose: () => void;
+    items: CommandPaletteItem[];
+    /** Accessible name of the dialog. */
+    label: string;
+    placeholder: string;
+    /** Text shown when nothing matches. */
+    emptyLabel: string;
+    /** Screen-reader announcement of the result count, e.g. `(n) => \`${n} results\``. */
+    formatResultCount: (count: number) => string;
+    /** Hint for the close key shown next to the input. */
+    closeKeyLabel?: string;
+    /** Controlled query, so the parent can react to typing (e.g. debounced remote search). */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    className?: string;
+}
+/** Global search/command palette built on `cmdk`, shown in a modal dialog. */
+export declare function CommandPalette({ open, onClose, items, label, placeholder, emptyLabel, formatResultCount, closeKeyLabel, query, onQueryChange, className, }: CommandPaletteProps): import("react").JSX.Element;

package/dist/palette/command-palette/command-palette.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command, useCommandState } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../utils/cn.js";
+function groupItems(items) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const list = groups.get(item.group);
+    if (list) list.push(item);
+    else groups.set(item.group, [item]);
+  }
+  return [...groups.entries()];
+}
+function ResultCount({ format }) {
+  const count = useCommandState((state) => state.filtered.count);
+  return /* @__PURE__ */ jsx("span", { "data-palette-results": true, "aria-live": "polite", className: "sr-only", children: format(count) });
+}
+function CommandPalette({
+  open,
+  onClose,
+  items,
+  label,
+  placeholder,
+  emptyLabel,
+  formatResultCount,
+  closeKeyLabel = "Esc",
+  query,
+  onQueryChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    Command.Dialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next) onClose();
+      },
+      label,
+      overlayClassName: "fixed inset-0 z-50 bg-scrim",
+      contentClassName: cn(
+        "@container/palette fixed top-[9vh] left-1/2 z-50 flex max-h-[70vh] w-[min(560px,calc(100vw-1rem))] -translate-x-1/2 flex-col overflow-hidden rounded-dialog surface-overlay shadow-overlay",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 border-b-divider px-3 py-3 @min-[420px]/palette:px-4 @min-[420px]/palette:py-3.5", children: [
+          /* @__PURE__ */ jsx(Search, { className: "size-4.5 shrink-0 text-ink-3", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            Command.Input,
+            {
+              autoFocus: true,
+              placeholder,
+              className: "min-w-0 flex-1 bg-transparent text-body text-ink outline-none placeholder:text-ink-3",
+              ...onQueryChange ? { value: query ?? "", onValueChange: onQueryChange } : {}
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-xs border-divider bg-surface-2 px-1.25 py-1 font-mono @max-[360px]/palette:hidden text-count text-ink-2", children: closeKeyLabel })
+        ] }),
+        /* @__PURE__ */ jsx(ResultCount, { format: formatResultCount }),
+        /* @__PURE__ */ jsxs(Command.List, { className: "overflow-y-auto p-1.5 @min-[420px]/palette:p-2", children: [
+          /* @__PURE__ */ jsx(Command.Empty, { className: "p-4 text-center text-ink-3 text-meta", children: emptyLabel }),
+          groupItems(items).map(([group, groupItemsList]) => /* @__PURE__ */ jsx(
+            Command.Group,
+            {
+              heading: group,
+              className: "[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:pt-1.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:text-ink-3",
+              children: groupItemsList.map((item) => /* @__PURE__ */ jsxs(
+                Command.Item,
+                {
+                  value: item.id,
+                  keywords: [item.label, item.hint ?? "", ...item.keywords ?? []],
+                  onSelect: () => {
+                    item.onSelect();
+                    onClose();
+                  },
+                  className: "flex w-full cursor-pointer items-center gap-2.5 rounded-control px-2.5 py-2 text-ink text-meta data-[selected=true]:bg-surface-2 [&_svg]:size-4 [&_svg]:text-ink-3",
+                  children: [
+                    item.icon,
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label }),
+                    item.hint ? /* @__PURE__ */ jsx("span", { className: "ml-auto max-w-[40%] shrink-0 truncate text-ink-3 text-meta @max-[360px]/palette:hidden", children: item.hint }) : null
+                  ]
+                },
+                item.id
+              ))
+            },
+            group
+          ))
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CommandPalette
+};

package/dist/palette/command-palette/index.d.ts

@@ -0,0 +1 @@
+export { CommandPalette, type CommandPaletteItem, type CommandPaletteProps, } from "./command-palette.js";

package/dist/palette/command-palette/index.js

@@ -0,0 +1,6 @@
+import {
+  CommandPalette
+} from "./command-palette.js";
+export {
+  CommandPalette
+};

package/dist/palette/index.d.ts

@@ -0,0 +1 @@
+export * from "./command-palette/index.js";

package/dist/palette/index.js

@@ -0,0 +1 @@
+export * from "./command-palette/index.js";

package/dist/rich-text/index.d.ts

@@ -0,0 +1,2 @@
+export { RichTextEditor, type RichTextEditorProps, RichTextView, type RichTextViewProps, richTextContentClass, } from "./rich-text-editor.js";
+export { htmlToText, isSafeUrl, sanitizeHtml } from "./sanitize.js";

package/dist/rich-text/index.js

@@ -0,0 +1,14 @@
+import {
+  RichTextEditor,
+  RichTextView,
+  richTextContentClass
+} from "./rich-text-editor.js";
+import { htmlToText, isSafeUrl, sanitizeHtml } from "./sanitize.js";
+export {
+  RichTextEditor,
+  RichTextView,
+  htmlToText,
+  isSafeUrl,
+  richTextContentClass,
+  sanitizeHtml
+};

package/dist/rich-text/rich-text-editor.d.ts

@@ -0,0 +1,31 @@
+/** Typography for editor and read-only content; preflight resets lists and headings. */
+export declare const richTextContentClass = "text-body text-ink [&_a]:text-accent-ink [&_a]:underline [&_blockquote]:border-line-strong [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:text-ink-2 [&_h2]:font-semibold [&_h2]:text-card-title [&_h3]:font-semibold [&_h3]:text-row-title [&_li]:my-0.5 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [overflow-wrap:anywhere]";
+export interface RichTextEditorProps {
+    /** Controlled HTML. It is sanitized before it reaches the editor. */
+    value?: string;
+    defaultValue?: string;
+    /** Receives sanitized HTML, or "" when the editor is empty. */
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Minimum height of the editing area, in rem. */
+    minHeightRem?: number;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+}
+/**
+ * Rich text editor on a plain `contenteditable`, with no dependencies. Supports bold, italic,
+ * underline, a title, bullet and numbered lists and links (Ctrl/Cmd+B, I, U, K). Everything that
+ * leaves the editor, including pasted content, goes through `sanitizeHtml`.
+ *
+ * It uses `document.execCommand`: deprecated on paper but still the only dependency-free way to
+ * edit rich text natively, and implemented by every engine.
+ */
+export declare function RichTextEditor({ value, defaultValue, onChange, placeholder, disabled, minHeightRem, className, ...aria }: RichTextEditorProps): import("react").JSX.Element;
+export interface RichTextViewProps {
+    html: string;
+    className?: string;
+}
+/** Read-only rendering of editor output; sanitizes again so stored HTML is never trusted. */
+export declare function RichTextView({ html, className }: RichTextViewProps): import("react").JSX.Element;