@stackshift-ui/swiper-pagination 6.0.2 → 6.0.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/swiper-pagination",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -34,7 +35,7 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2"
+    "@stackshift-ui/system": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./swiper-pagination";

package/src/swiper-pagination.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { SwiperPagination } from "./swiper-pagination";
+
+describe.concurrent("swiper-pagination", () => {
+  afterEach(cleanup);
+
+  test("Common: Swiper Pagination - test if renders without errors", ({ expect }) => {
+    const clx = "swiperpgn-class";
+    render(<SwiperPagination className={clx} />);
+    expect(screen.getByTestId("button").classList).toContain(clx);
+  });
+});

package/src/swiper-pagination.tsx

@@ -0,0 +1,52 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import cn from "classnames";
+
+type ColorScheme = "blue" | "white";
+
+export interface SwiperPaginationProps extends Omit<HTMLProps<HTMLElement>, "as"> {
+  isActive?: boolean;
+  colorScheme?: ColorScheme;
+  onClick?: (...arg0: any[]) => any;
+  ariaLabel?: string;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "SwiperPagination";
+
+export const SwiperPagination: React.FC<SwiperPaginationProps> = ({
+  isActive = false,
+  colorScheme = "blue",
+  onClick,
+  ariaLabel,
+  children,
+  className,
+  as = "button",
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const variantClass = {
+    blue: `mr-1 ${isActive ? "bg-primary" : "bg-gray-200"} rounded-full p-1 focus:outline-none`,
+    white: `mr-2 inline-block h-2 w-2 rounded-full ${
+      isActive ? "bg-white focus:outline-none" : "focus:outline-none"
+    }`,
+  };
+
+  const classes = variantClass[colorScheme];
+
+  return (
+    <Component
+      onClick={onClick}
+      aria-label={ariaLabel}
+      as={as}
+      className={cn(classes, className)}
+      {...props}
+      data-testid={displayName}
+    />
+  );
+};
+
+SwiperPagination.displayName = displayName;