myoperator-ui 0.0.155 → 0.0.156

package/dist/index.js

@@ -4983,6 +4983,237 @@ export { useToast, toast, Toaster };
  * toast.dismiss()
  * \`\`\`
  */
+`, prefix)
+        }
+      ]
+    },
+    "spinner": {
+      name: "spinner",
+      description: "A loading spinner component with customizable size and color variants for indicating progress",
+      category: "feedback",
+      dependencies: [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "spinner.tsx",
+          content: prefixTailwindClasses(`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 };
+`, prefix)
+        }
+      ]
+    },
+    "skeleton": {
+      name: "skeleton",
+      description: "A placeholder loading component with pulse animation for content loading states",
+      category: "feedback",
+      dependencies: [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "skeleton.tsx",
+          content: prefixTailwindClasses(`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 };
 `, prefix)
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",