myoperator-mcp 0.2.84 → 0.2.86

package/dist/index.js

@@ -1683,6 +1683,62 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
 };
+`,
+  "empty-state": `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface EmptyStateProps {
+  /** Icon element rendered inside the icon circle */
+  icon?: React.ReactNode;
+  /** Bold heading text */
+  title: React.ReactNode;
+  /** Optional subtitle / description text */
+  description?: React.ReactNode;
+  /** Optional action buttons rendered below the description */
+  actions?: React.ReactNode;
+  /** Additional CSS classes for the root container */
+  className?: string;
+}
+
+function EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-5 py-16 px-4",
+        className
+      )}
+    >
+      {icon && (
+        <div className="bg-semantic-primary-surface rounded-[40px] size-[90px] flex items-center justify-center text-semantic-text-secondary">
+          {icon}
+        </div>
+      )}
+      <div className="flex flex-col items-center gap-1.5 text-center">
+        <p className="m-0 text-base font-semibold text-semantic-text-primary">
+          {title}
+        </p>
+        {description && (
+          <p className="m-0 text-sm text-semantic-text-muted max-w-xs">
+            {description}
+          </p>
+        )}
+      </div>
+      {actions && (
+        <div className="flex items-center gap-4">{actions}</div>
+      )}
+    </div>
+  );
+}
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };
 `,
   "form-modal": `import * as React from "react";
 
@@ -1867,7 +1923,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn(inputVariants({ state, className }))}
+        className={cn(
+          inputVariants({ state, className }),
+          type === "number" &&
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        )}
         ref={ref}
         {...props}
       />
@@ -2707,17 +2767,25 @@ PaginationLink.displayName = "PaginationLink";
 export interface PaginationPreviousProps extends PaginationLinkProps {
   /** Additional CSS classes */
   className?: string;
+  /** Disables the previous button */
+  disabled?: boolean;
 }
 
 function PaginationPrevious({
   className,
+  disabled,
   ...props
 }: PaginationPreviousProps) {
   return (
     <PaginationLink
       aria-label="Go to previous page"
+      aria-disabled={disabled}
       size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      className={cn(
+        "gap-1 px-2.5 sm:pl-2.5",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
       {...props}
     >
       <ChevronLeftIcon />
@@ -2730,17 +2798,25 @@ PaginationPrevious.displayName = "PaginationPrevious";
 export interface PaginationNextProps extends PaginationLinkProps {
   /** Additional CSS classes */
   className?: string;
+  /** Disables the next button */
+  disabled?: boolean;
 }
 
 function PaginationNext({
   className,
+  disabled,
   ...props
 }: PaginationNextProps) {
   return (
     <PaginationLink
       aria-label="Go to next page"
+      aria-disabled={disabled}
       size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      className={cn(
+        "gap-1 px-2.5 sm:pr-2.5",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
       {...props}
     >
       <span className="hidden sm:block">Next</span>
@@ -2773,6 +2849,115 @@ function PaginationEllipsis({
 }
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
+export interface PaginationWidgetProps {
+  /** Current page (1-based) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Called when the user navigates to a new page */
+  onPageChange: (page: number) => void;
+  /** Number of pages shown on each side of current page (default: 1) */
+  siblingCount?: number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function usePaginationRange(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number
+): (number | "ellipsis")[] {
+  if (totalPages <= 1) return [1];
+
+  const range = (start: number, end: number): number[] =>
+    Array.from({ length: end - start + 1 }, (_, i) => start + i);
+
+  const leftSibling = Math.max(currentPage - siblingCount, 2);
+  const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
+
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+
+  const pages: (number | "ellipsis")[] = [1];
+
+  if (showLeftEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    // fill in pages between 1 and leftSibling if no ellipsis
+    for (let p = 2; p < leftSibling; p++) pages.push(p);
+  }
+
+  pages.push(...range(leftSibling, rightSibling));
+
+  if (showRightEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    for (let p = rightSibling + 1; p < totalPages; p++) pages.push(p);
+  }
+
+  if (totalPages > 1) pages.push(totalPages);
+
+  return pages;
+}
+
+function PaginationWidget({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className,
+}: PaginationWidgetProps) {
+  const pages = usePaginationRange(currentPage, totalPages, siblingCount);
+
+  return (
+    <Pagination className={className}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            href="#"
+            disabled={currentPage === 1}
+            onClick={(e) => {
+              e.preventDefault();
+              if (currentPage > 1) onPageChange(currentPage - 1);
+            }}
+          />
+        </PaginationItem>
+        {pages.map((page, idx) =>
+          page === "ellipsis" ? (
+            <PaginationItem key={\`ellipsis-\${idx}\`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={page}>
+              <PaginationLink
+                href="#"
+                isActive={page === currentPage}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onPageChange(page);
+                }}
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          )
+        )}
+        <PaginationItem>
+          <PaginationNext
+            href="#"
+            disabled={currentPage === totalPages}
+            onClick={(e) => {
+              e.preventDefault();
+              if (currentPage < totalPages) onPageChange(currentPage + 1);
+            }}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
+PaginationWidget.displayName = "PaginationWidget";
+
 export {
   Pagination,
   PaginationContent,
@@ -2781,6 +2966,7 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
+  PaginationWidget,
 };
 `,
   "readable-field": `import * as React from "react";
@@ -3021,6 +3207,8 @@ export interface SelectFieldProps {
   defaultValue?: string;
   /** Callback when value changes */
   onValueChange?: (value: string) => void;
+  /** Callback when an option is selected, provides the full option object */
+  onSelect?: (option: SelectOption) => void;
   /** Options to display */
   options: SelectOption[];
   /** Enable search/filter functionality */
@@ -3069,6 +3257,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
       value,
       defaultValue,
       onValueChange,
+      onSelect,
       options,
       searchable,
       searchPlaceholder = "Search...",
@@ -3083,6 +3272,20 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
     // Internal state for search
     const [searchQuery, setSearchQuery] = React.useState("");
 
+    // Handle value change and call both onValueChange and onSelect
+    const handleValueChange = React.useCallback(
+      (newValue: string) => {
+        onValueChange?.(newValue);
+        if (onSelect) {
+          const selectedOption = options.find((o) => o.value === newValue);
+          if (selectedOption) {
+            onSelect(selectedOption);
+          }
+        }
+      },
+      [onValueChange, onSelect, options]
+    );
+
     // Derive state from props
     const derivedState = error ? "error" : "default";
 
@@ -3157,7 +3360,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
         <Select
           value={value}
           defaultValue={defaultValue}
-          onValueChange={onValueChange}
+          onValueChange={handleValueChange}
           disabled={disabled || loading}
           name={name}
           onOpenChange={handleOpenChange}
@@ -4366,6 +4569,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       onChange,
       disabled,
       id,
+      type,
       ...props
     },
     ref
@@ -4410,10 +4614,13 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       <input
         ref={ref}
         id={inputId}
+        type={type}
         className={cn(
           hasAddons
             ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed"
-            : textFieldInputVariants({ state: derivedState, className })
+            : textFieldInputVariants({ state: derivedState, className }),
+          type === "number" &&
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
         )}
         disabled={disabled || loading}
         maxLength={maxLength}
@@ -4672,13 +4879,18 @@ export {
 // ============================================================================
 
 const TOAST_LIMIT = 5;
-const TOAST_REMOVE_DELAY = 5000;
+const TOAST_REMOVE_DELAY = 2000;
 
 type ToasterToast = ToastProps & {
   id: string;
   title?: React.ReactNode;
   description?: React.ReactNode;
   action?: ToastActionElement;
+  /**
+   * Duration in milliseconds before the toast is removed after dismissal.
+   * Defaults to 2000ms (2 seconds).
+   */
+  duration?: number;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -4722,7 +4934,7 @@ interface State {
 
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
-const addToRemoveQueue = (toastId: string) => {
+const addToRemoveQueue = (toastId: string, duration?: number) => {
   if (toastTimeouts.has(toastId)) {
     return;
   }
@@ -4733,7 +4945,7 @@ const addToRemoveQueue = (toastId: string) => {
       type: "REMOVE_TOAST",
       toastId: toastId,
     });
-  }, TOAST_REMOVE_DELAY);
+  }, duration ?? TOAST_REMOVE_DELAY);
 
   toastTimeouts.set(toastId, timeout);
 };
@@ -4758,10 +4970,11 @@ export const reducer = (state: State, action: Action): State => {
       const { toastId } = action;
 
       if (toastId) {
-        addToRemoveQueue(toastId);
+        const toastItem = state.toasts.find((t) => t.id === toastId);
+        addToRemoveQueue(toastId, toastItem?.duration);
       } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
+        state.toasts.forEach((toastItem) => {
+          addToRemoveQueue(toastItem.id, toastItem.duration);
         });
       }
 
@@ -5699,6 +5912,24 @@ var componentMetadata = {
       }
     ]
   },
+  "empty-state": {
+    "name": "EmptyState",
+    "description": "A empty state component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic EmptyState",
+        "code": "<EmptyState>Content</EmptyState>",
+        "description": "Simple empty state usage"
+      }
+    ]
+  },
   "form-modal": {
     "name": "FormModal",
     "description": "A form modal component.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.84",
+  "version": "0.2.86",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",