ui-library-spj 1.0.2 → 1.0.5

package/components/buttons/ActionButton.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+
+export function ActionButton({
+  children,
+  onAction,
+  onError,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleClick() {
+    if (!onAction || loading || disabled) return;
+
+    try {
+      setLoading(true);
+      await onAction();
+    } catch (err) {
+      console.error(err);
+      onError && onError(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={disabled || loading}
+      className={`px-4 py-2 rounded-md bg-indigo-600 text-white font-medium
+        hover:bg-indigo-700 transition
+        disabled:opacity-60 disabled:cursor-not-allowed
+        ${className}`}
+      {...props}
+    >
+      {loading ? "Processing..." : children}
+    </button>
+  );
+}

package/components/buttons/BasicButton.jsx

@@ -1,10 +1,40 @@
-import '../../index.css'
-import React from 'react'
-
-export function BasicButton() {
-  return (
-    <div className='bg-gray-700 min-h-screen min-w-screen'>
-      hi
-    </div>
-  )
-}
+import React, { useState } from "react";
+
+export function BasicButton({
+  children,
+  onAction,
+  onError,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleClick(e) {
+    if (!onAction || loading || disabled) return;
+
+    try {
+      setLoading(true);
+      await onAction();
+    } catch (err) {
+      console.error("Button action failed:", err);
+      onError && onError(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={disabled || loading}
+      className={`px-4 py-2 rounded-md bg-indigo-600 text-white font-medium
+        hover:bg-indigo-700 transition
+        disabled:opacity-60 disabled:cursor-not-allowed
+        ${className}`}
+      {...props}
+    >
+      {loading ? "Processing..." : children}
+    </button>
+  );
+}

package/components/buttons/ConfirmButton.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+
+export function ConfirmButton({
+  children,
+  onConfirm,
+  message = "Are you sure?",
+  className = "",
+  ...props
+}) {
+  const [confirming, setConfirming] = useState(false);
+
+  async function handleClick() {
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+
+    setConfirming(false);
+    await onConfirm();
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={`px-4 py-2 rounded-md font-medium text-white
+        ${confirming ? "bg-red-700" : "bg-red-600 hover:bg-red-700"}
+        transition
+        ${className}`}
+      {...props}
+    >
+      {confirming ? message : children}
+    </button>
+  );
+}

package/components/buttons/IconActionButton.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export function IconActionButton({ children, onAction, className = "" }) {
+  return (
+    <button
+      onClick={onAction}
+      className={`p-2 rounded-md hover:bg-gray-100 transition
+        focus:outline-none focus:ring-2 focus:ring-indigo-500
+        ${className}`}
+    >
+      {children}
+    </button>
+  );
+}

package/components/buttons/LinkButton.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export function LinkButton({ children, onNavigate, className = "" }) {
+  function handleClick(e) {
+    e.preventDefault();
+    onNavigate && onNavigate();
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`text-indigo-600 hover:underline font-medium ${className}`}
+    >
+      {children}
+    </button>
+  );
+}

package/components/buttons/SubmitButton.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export function SubmitButton({
+  children,
+  loading = false,
+  className = "",
+  ...props
+}) {
+  return (
+    <button
+      type="submit"
+      disabled={loading}
+      className={`px-4 py-2 rounded-md bg-green-600 text-white font-medium
+        hover:bg-green-700 transition
+        disabled:opacity-60 disabled:cursor-not-allowed
+        ${className}`}
+      {...props}
+    >
+      {loading ? "Submitting..." : children}
+    </button>
+  );
+}

package/components/carousel/BasicCarousel.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import "../../index.css";
+
+/**
+ * BasicCarousel
+ *
+ * @param {React.ReactNode[]} items - slides content
+ * @param {string} className - override container styles
+ * @param {string} slideClassName - override slide styles
+ */
+export function BasicCarousel({
+  items = [],
+  className = "",
+  slideClassName = "",
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const totalSlides = items.length;
+
+  const next = () =>
+    setCurrentIndex((prev) => (prev + 1) % totalSlides);
+
+  const prev = () =>
+    setCurrentIndex((prev) => (prev - 1 + totalSlides) % totalSlides);
+
+  return (
+    <div
+      className={`
+        relative flex items-center justify-center overflow-hidden
+        w-full h-[60vh] sm:h-[70vh] md:h-[80vh]
+        bg-slate-900
+        ${className}
+      `}
+    >
+      {/* Left button */}
+      <button
+        onClick={prev}
+        className="absolute left-2 sm:left-4 z-20
+                   w-10 h-10 sm:w-12 sm:h-12
+                   rounded-full bg-violet-500 text-white
+                   flex items-center justify-center
+                   hover:bg-white hover:text-black transition"
+      >
+        ‹
+      </button>
+
+      {/* Slides container */}
+      <div className="relative w-full h-full flex items-center justify-center">
+        {items.map((item, index) => {
+          const offset = index - currentIndex;
+          const scale = Math.max(0.6, 1 - Math.abs(offset) * 0.15);
+
+          return (
+            <div
+              key={index}
+              className={`
+                absolute transition-all duration-300 ease-out
+                rounded-xl
+                w-[80%] sm:w-[65%] md:w-[55%]
+                h-[70%] sm:h-[75%] md:h-[80%]
+                ${slideClassName}
+              `}
+              style={{
+                transform: `
+                  translateX(${offset * 18}rem)
+                  scale(${scale})
+                `,
+                zIndex: totalSlides - Math.abs(offset),
+              }}
+            >
+              {item}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Right button */}
+      <button
+        onClick={next}
+        className="absolute right-2 sm:right-4 z-20
+                   w-10 h-10 sm:w-12 sm:h-12
+                   rounded-full bg-violet-500 text-white
+                   flex items-center justify-center
+                   hover:bg-white hover:text-black transition"
+      >
+        ›
+      </button>
+    </div>
+  );
+}

package/index.js

@@ -1,4 +1,12 @@
-// index.js
-
-
-export {BasicButton} from './components/buttons/BasicButton';
+// index.js
+
+// Button variants
+export {BasicButton} from './components/buttons/BasicButton';
+export { ActionButton } from "./components/buttons/ActionButton";
+export { ConfirmButton } from "./components/buttons/ConfirmButton";
+export { LinkButton } from "./components/buttons/LinkButton";
+export {IconActionButton} from "./components/buttons/IconActionButton"
+export { SubmitButton } from "./components/buttons/SubmitButton";
+
+// Carousal
+export {BasicCarousel} from './components/carousel/BasicCarousel'

package/package.json

@@ -1,19 +1,19 @@
-{
-  "name": "ui-library-spj",
-  "version": "1.0.2",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "module",
-  "dependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
-    "postcss": "^8.5.6",
-    "react": "^19.2.3",
-    "tailwindcss": "^4.1.18"
-  }
-}
+{
+  "name": "ui-library-spj",
+  "version": "1.0.5",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "postcss": "^8.5.6",
+    "react": "^19.2.3",
+    "tailwindcss": "^4.1.18"
+  }
+}

package/postcss.config.mjs

@@ -1,5 +1,5 @@
-export default {
-    plugins: {
-        "@tailwindcss/postcss": {},
-    }
+export default {
+    plugins: {
+        "@tailwindcss/postcss": {},
+    }
 }