myoperator-mcp 0.2.68 → 0.2.69

package/dist/index.js

@@ -3279,6 +3279,207 @@ export {
   SelectScrollDownButton,
   selectTriggerVariants,
 };
+`,
+  "skeleton": `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Skeleton variants for content placeholders.
+ * Uses semantic background tokens for consistent theming.
+ */
+const skeletonVariants = cva("animate-pulse", {
+  variants: {
+    variant: {
+      default: "bg-semantic-bg-grey",
+      subtle: "bg-semantic-bg-ui",
+    },
+    shape: {
+      line: "h-4 w-full rounded",
+      circle: "rounded-full",
+      rectangle: "rounded",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    shape: "line",
+  },
+});
+
+/**
+ * A placeholder loading component with pulse animation for content loading states.
+ * Use shape, width, and height props to match the content being loaded.
+ *
+ * @example
+ * \`\`\`tsx
+ * // Text line placeholder
+ * <Skeleton />
+ *
+ * // Avatar placeholder
+ * <Skeleton shape="circle" width={40} height={40} />
+ *
+ * // Image/card placeholder
+ * <Skeleton shape="rectangle" width="100%" height={200} />
+ *
+ * // Subtle variant
+ * <Skeleton variant="subtle" />
+ * \`\`\`
+ */
+export interface SkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof skeletonVariants> {
+  /** Width of the skeleton (number for px, string for any CSS value) */
+  width?: number | string;
+  /** Height of the skeleton (number for px, string for any CSS value) */
+  height?: number | string;
+}
+
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant, shape, width, height, style, ...props }, ref) => {
+    const dimensionStyle: React.CSSProperties = {
+      ...style,
+      ...(width !== undefined
+        ? { width: typeof width === "number" ? \`\${width}px\` : width }
+        : {}),
+      ...(height !== undefined
+        ? { height: typeof height === "number" ? \`\${height}px\` : height }
+        : {}),
+    };
+
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn(skeletonVariants({ variant, shape, className }))}
+        style={dimensionStyle}
+        {...props}
+      />
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton, skeletonVariants };
+`,
+  "spinner": `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Spinner variants for loading indicators.
+ * Uses semantic color tokens for consistent theming.
+ */
+const spinnerVariants = cva("animate-spin", {
+  variants: {
+    size: {
+      sm: "size-4",
+      default: "size-6",
+      lg: "size-8",
+      xl: "size-12",
+    },
+    variant: {
+      default: "text-semantic-primary",
+      secondary: "text-semantic-text-secondary",
+      muted: "text-semantic-text-muted",
+      inverted: "text-white",
+      current: "text-current",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+});
+
+/**
+ * SVG stroke widths that decrease as size increases for visual balance.
+ */
+const strokeWidths: Record<string, number> = {
+  sm: 3,
+  default: 3,
+  lg: 2.5,
+  xl: 2,
+};
+
+/**
+ * A loading spinner component with customizable size and color variants.
+ * Uses a custom SVG circle with a visible track and animated arc.
+ *
+ * @example
+ * \`\`\`tsx
+ * <Spinner />
+ * <Spinner size="sm" variant="muted" />
+ * <Spinner size="lg" variant="current" />
+ * <Spinner variant="inverted" aria-label="Saving changes" />
+ * \`\`\`
+ */
+export interface SpinnerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof spinnerVariants> {
+  /** Accessible label for the spinner (default: "Loading") */
+  "aria-label"?: string;
+}
+
+const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  (
+    {
+      className,
+      size = "default",
+      variant,
+      "aria-label": ariaLabel = "Loading",
+      ...props
+    },
+    ref
+  ) => {
+    const strokeWidth = strokeWidths[size || "default"] ?? 3;
+    const radius = 10;
+    const circumference = 2 * Math.PI * radius;
+
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-label={ariaLabel}
+        className={cn("inline-flex shrink-0", className)}
+        {...props}
+      >
+        <svg
+          className={cn(spinnerVariants({ size, variant }))}
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          {/* Track circle */}
+          <circle
+            cx="12"
+            cy="12"
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            opacity="0.25"
+          />
+          {/* Active arc */}
+          <circle
+            cx="12"
+            cy="12"
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={circumference * 0.75}
+          />
+        </svg>
+        <span className="sr-only">{ariaLabel}</span>
+      </div>
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+export { Spinner, spinnerVariants };
 `,
   "switch": `import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
@@ -5588,6 +5789,42 @@ var componentMetadata = {
       }
     ]
   },
+  "skeleton": {
+    "name": "Skeleton",
+    "description": "A skeleton component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic Skeleton",
+        "code": "<Skeleton>Content</Skeleton>",
+        "description": "Simple skeleton usage"
+      }
+    ]
+  },
+  "spinner": {
+    "name": "Spinner",
+    "description": "A spinner component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic Spinner",
+        "code": "<Spinner>Content</Spinner>",
+        "description": "Simple spinner usage"
+      }
+    ]
+  },
   "switch": {
     "name": "Switch",
     "description": "A switch component built on Radix UI for boolean inputs with on/off states. Supports labels and multiple sizes.",

package/package.json

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