pure-react-ui 1.0.0 → 1.2.0

package/dist/index.css

@@ -1,42 +1,454 @@
 .pru-btn {
   cursor: pointer;
+  letter-spacing: .02em;
   border: none;
-  border-radius: 6px;
-  padding: 10px 20px;
-  font-size: 16px;
+  border-radius: 2px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   font-weight: 500;
-  transition: background-color .2s;
+  text-decoration: none;
+  transition: all .2s cubic-bezier(.4, 0, .2, 1);
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
 }
 
 .pru-btn:disabled {
-  opacity: .6;
+  opacity: .5;
   cursor: not-allowed;
 }
 
+.pru-btn-xs {
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.pru-btn-small {
+  gap: 6px;
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+.pru-btn-medium {
+  padding: 10px 20px;
+  font-size: 14px;
+}
+
+.pru-btn-large {
+  padding: 14px 28px;
+  font-size: 16px;
+}
+
+.pru-btn-xl {
+  gap: 10px;
+  padding: 18px 36px;
+  font-size: 18px;
+}
+
+.pru-btn-full {
+  width: 100%;
+}
+
+.pru-btn-rounded {
+  border-radius: 50px;
+}
+
+.pru-btn-elevation-none {
+  box-shadow: none;
+}
+
+.pru-btn-elevation-sm {
+  box-shadow: 0 1px 2px #0000000d;
+}
+
+.pru-btn-elevation-md {
+  box-shadow: 0 4px 6px #00000012;
+}
+
+.pru-btn-elevation-lg {
+  box-shadow: 0 10px 15px #0000001a;
+}
+
+.pru-btn-elevation-sm:hover:not(:disabled), .pru-btn-elevation-md:hover:not(:disabled), .pru-btn-elevation-lg:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 20px #0000001f;
+}
+
 .pru-btn-primary {
   color: #fff;
-  background-color: #007bff;
+  background-color: #2563eb;
 }
 
 .pru-btn-primary:hover:not(:disabled) {
-  background-color: #0056b3;
+  background-color: #1d4ed8;
+}
+
+.pru-btn-primary:active:not(:disabled) {
+  background-color: #1e40af;
 }
 
 .pru-btn-secondary {
   color: #fff;
-  background-color: #6c757d;
+  background-color: #64748b;
 }
 
 .pru-btn-secondary:hover:not(:disabled) {
-  background-color: #545b62;
+  background-color: #475569;
+}
+
+.pru-btn-secondary:active:not(:disabled) {
+  background-color: #334155;
+}
+
+.pru-btn-success {
+  color: #fff;
+  background-color: #10b981;
+}
+
+.pru-btn-success:hover:not(:disabled) {
+  background-color: #059669;
+}
+
+.pru-btn-success:active:not(:disabled) {
+  background-color: #047857;
 }
 
 .pru-btn-danger {
   color: #fff;
-  background-color: #dc3545;
+  background-color: #ef4444;
 }
 
 .pru-btn-danger:hover:not(:disabled) {
-  background-color: #c82333;
+  background-color: #dc2626;
+}
+
+.pru-btn-danger:active:not(:disabled) {
+  background-color: #b91c1c;
+}
+
+.pru-btn-warning {
+  color: #fff;
+  background-color: #f59e0b;
+}
+
+.pru-btn-warning:hover:not(:disabled) {
+  background-color: #d97706;
+}
+
+.pru-btn-warning:active:not(:disabled) {
+  background-color: #b45309;
+}
+
+.pru-btn-info {
+  color: #fff;
+  background-color: #06b6d4;
+}
+
+.pru-btn-info:hover:not(:disabled) {
+  background-color: #0891b2;
+}
+
+.pru-btn-info:active:not(:disabled) {
+  background-color: #0e7490;
+}
+
+.pru-btn-outline-primary {
+  color: #2563eb;
+  background-color: #0000;
+  border: 2px solid #2563eb;
+}
+
+.pru-btn-outline-primary:hover:not(:disabled) {
+  color: #fff;
+  background-color: #2563eb;
+}
+
+.pru-btn-outline-primary:active:not(:disabled) {
+  background-color: #1d4ed8;
+  border-color: #1d4ed8;
+}
+
+.pru-btn-outline-secondary {
+  color: #64748b;
+  background-color: #0000;
+  border: 2px solid #64748b;
+}
+
+.pru-btn-outline-secondary:hover:not(:disabled) {
+  color: #fff;
+  background-color: #64748b;
+}
+
+.pru-btn-outline-secondary:active:not(:disabled) {
+  background-color: #475569;
+  border-color: #475569;
+}
+
+.pru-btn-outline-success {
+  color: #10b981;
+  background-color: #0000;
+  border: 2px solid #10b981;
+}
+
+.pru-btn-outline-success:hover:not(:disabled) {
+  color: #fff;
+  background-color: #10b981;
+}
+
+.pru-btn-outline-success:active:not(:disabled) {
+  background-color: #059669;
+  border-color: #059669;
+}
+
+.pru-btn-outline-danger {
+  color: #ef4444;
+  background-color: #0000;
+  border: 2px solid #ef4444;
+}
+
+.pru-btn-outline-danger:hover:not(:disabled) {
+  color: #fff;
+  background-color: #ef4444;
+}
+
+.pru-btn-outline-danger:active:not(:disabled) {
+  background-color: #dc2626;
+  border-color: #dc2626;
+}
+
+.pru-btn-outline-warning {
+  color: #f59e0b;
+  background-color: #0000;
+  border: 2px solid #f59e0b;
+}
+
+.pru-btn-outline-warning:hover:not(:disabled) {
+  color: #fff;
+  background-color: #f59e0b;
+}
+
+.pru-btn-outline-warning:active:not(:disabled) {
+  background-color: #d97706;
+  border-color: #d97706;
+}
+
+.pru-btn-outline-info {
+  color: #06b6d4;
+  background-color: #0000;
+  border: 2px solid #06b6d4;
+}
+
+.pru-btn-outline-info:hover:not(:disabled) {
+  color: #fff;
+  background-color: #06b6d4;
+}
+
+.pru-btn-outline-info:active:not(:disabled) {
+  background-color: #0891b2;
+  border-color: #0891b2;
+}
+
+.pru-btn-ghost-primary {
+  color: #2563eb;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-primary:hover:not(:disabled) {
+  background-color: #2563eb1a;
+}
+
+.pru-btn-ghost-primary:active:not(:disabled) {
+  background-color: #2563eb26;
+}
+
+.pru-btn-ghost-secondary {
+  color: #64748b;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-secondary:hover:not(:disabled) {
+  background-color: #64748b1a;
+}
+
+.pru-btn-ghost-secondary:active:not(:disabled) {
+  background-color: #64748b26;
+}
+
+.pru-btn-ghost-success {
+  color: #10b981;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-success:hover:not(:disabled) {
+  background-color: #10b9811a;
+}
+
+.pru-btn-ghost-success:active:not(:disabled) {
+  background-color: #10b98126;
+}
+
+.pru-btn-ghost-danger {
+  color: #ef4444;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-danger:hover:not(:disabled) {
+  background-color: #ef44441a;
+}
+
+.pru-btn-ghost-danger:active:not(:disabled) {
+  background-color: #ef444426;
+}
+
+.pru-btn-ghost-warning {
+  color: #f59e0b;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-warning:hover:not(:disabled) {
+  background-color: #f59e0b1a;
+}
+
+.pru-btn-ghost-warning:active:not(:disabled) {
+  background-color: #f59e0b26;
+}
+
+.pru-btn-ghost-info {
+  color: #06b6d4;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-info:hover:not(:disabled) {
+  background-color: #06b6d41a;
+}
+
+.pru-btn-ghost-info:active:not(:disabled) {
+  background-color: #06b6d426;
+}
+
+.pru-btn-gradient-primary {
+  color: #fff;
+  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
+  border: none;
+}
+
+.pru-btn-gradient-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
+}
+
+.pru-btn-gradient-primary:active:not(:disabled) {
+  background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%);
+}
+
+.pru-btn-gradient-success {
+  color: #fff;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border: none;
+}
+
+.pru-btn-gradient-success:hover:not(:disabled) {
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+}
+
+.pru-btn-gradient-success:active:not(:disabled) {
+  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
+}
+
+.pru-btn-gradient-danger {
+  color: #fff;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border: none;
+}
+
+.pru-btn-gradient-danger:hover:not(:disabled) {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+}
+
+.pru-btn-gradient-danger:active:not(:disabled) {
+  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
+}
+
+.pru-btn-spinner {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.pru-btn-spinner-inner {
+  border: 2px solid;
+  border-color: currentColor currentColor #0000 #0000;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  animation: .6s linear infinite pru-spin;
+}
+
+@keyframes pru-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pru-btn-ripple {
+  pointer-events: none;
+  background-color: #fff9;
+  border-radius: 50%;
+  animation: .6s ease-out pru-ripple;
+  position: absolute;
+  transform: scale(0);
+}
+
+@keyframes pru-ripple {
+  to {
+    opacity: 0;
+    transform: scale(4);
+  }
+}
+
+.pru-btn-icon-left, .pru-btn-icon-right {
+  align-items: center;
+  display: flex;
+}
+
+.pru-btn-content {
+  opacity: 1;
+  transition: opacity .2s;
+}
+
+.pru-btn[aria-disabled="true"] .pru-btn-content {
+  opacity: .7;
+}
+
+.pru-btn:active:not(:disabled) {
+  transform: scale(.98);
+}
+
+.pru-btn:focus {
+  outline: none;
+}
+
+.pru-btn:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid;
+}
+
+.pru-btn > * {
+  align-items: center;
+  display: inline-flex;
+}
+
+@media (width <= 640px) {
+  .pru-btn-xl {
+    padding: 14px 28px;
+    font-size: 16px;
+  }
+
+  .pru-btn-large {
+    padding: 12px 24px;
+    font-size: 15px;
+  }
 }
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"mappings":"AAAA;;;;;;;;;;AAUA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;AAKA","sources":["components/Button/Button.css"],"sourcesContent":[".pru-btn {\r\n  padding: 10px 20px;\r\n  border: none;\r\n  border-radius: 6px;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s ease;\r\n}\r\n\r\n.pru-btn:disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pru-btn-primary {\r\n  background-color: #007bff;\r\n  color: white;\r\n}\r\n\r\n.pru-btn-primary:hover:not(:disabled) {\r\n  background-color: #0056b3;\r\n}\r\n\r\n.pru-btn-secondary {\r\n  background-color: #6c757d;\r\n  color: white;\r\n}\r\n\r\n.pru-btn-secondary:hover:not(:disabled) {\r\n  background-color: #545b62;\r\n}\r\n\r\n.pru-btn-danger {\r\n  background-color: #dc3545;\r\n  color: white;\r\n}\r\n\r\n.pru-btn-danger:hover:not(:disabled) {\r\n  background-color: #c82333;\r\n}"],"names":[],"version":3,"file":"index.css.map"}
+{"mappings":"AACA;;;;;;;;;;;;;;;;;AAiBA;;;;;AAWA;;;;;;AAMA;;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAQA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAMA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAKA;;;;;;AAKA;;;;AAGA;;;;AAIA;;;;;;AAKA;;;;AAGA;;;;AAIA;;;;;;AAKA;;;;AAGA;;;;AAKA;;;;;;AAMA;;;;;;;;;AAUA;;;;;;AAOA;;;;;;;;;AASA;;;;;;;AAQA;;;;;AAMA;;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAIA;;;;;AAMA;;;;;AAMA;EACE;;;;;EAKA","sources":["components/Button/Button.css"],"sourcesContent":["/* Base Button Styles */\r\n.pru-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  border: none;\r\n  border-radius: 2px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n  position: relative;\r\n  overflow: hidden;\r\n  text-decoration: none;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;\r\n  letter-spacing: 0.02em;\r\n}\r\n\r\n.pru-btn:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pru-btn:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n/* Sizes */\r\n.pru-btn-xs {\r\n  padding: 4px 10px;\r\n  font-size: 12px;\r\n  gap: 4px;\r\n}\r\n\r\n.pru-btn-small {\r\n  padding: 6px 14px;\r\n  font-size: 13px;\r\n  gap: 6px;\r\n}\r\n\r\n.pru-btn-medium {\r\n  padding: 10px 20px;\r\n  font-size: 14px;\r\n}\r\n\r\n.pru-btn-large {\r\n  padding: 14px 28px;\r\n  font-size: 16px;\r\n}\r\n\r\n.pru-btn-xl {\r\n  padding: 18px 36px;\r\n  font-size: 18px;\r\n  gap: 10px;\r\n}\r\n\r\n/* Full width */\r\n.pru-btn-full {\r\n  width: 100%;\r\n}\r\n\r\n/* Rounded */\r\n.pru-btn-rounded {\r\n  border-radius: 50px;\r\n}\r\n\r\n/* Elevation Shadows */\r\n.pru-btn-elevation-none {\r\n  box-shadow: none;\r\n}\r\n\r\n.pru-btn-elevation-sm {\r\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.pru-btn-elevation-md {\r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\r\n}\r\n\r\n.pru-btn-elevation-lg {\r\n  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.pru-btn-elevation-sm:hover:not(:disabled),\r\n.pru-btn-elevation-md:hover:not(:disabled),\r\n.pru-btn-elevation-lg:hover:not(:disabled) {\r\n  transform: translateY(-1px);\r\n  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n/* Solid Variants */\r\n.pru-btn-primary {\r\n  background-color: #2563eb;\r\n  color: white;\r\n}\r\n.pru-btn-primary:hover:not(:disabled) {\r\n  background-color: #1d4ed8;\r\n}\r\n.pru-btn-primary:active:not(:disabled) {\r\n  background-color: #1e40af;\r\n}\r\n\r\n.pru-btn-secondary {\r\n  background-color: #64748b;\r\n  color: white;\r\n}\r\n.pru-btn-secondary:hover:not(:disabled) {\r\n  background-color: #475569;\r\n}\r\n.pru-btn-secondary:active:not(:disabled) {\r\n  background-color: #334155;\r\n}\r\n\r\n.pru-btn-success {\r\n  background-color: #10b981;\r\n  color: white;\r\n}\r\n.pru-btn-success:hover:not(:disabled) {\r\n  background-color: #059669;\r\n}\r\n.pru-btn-success:active:not(:disabled) {\r\n  background-color: #047857;\r\n}\r\n\r\n.pru-btn-danger {\r\n  background-color: #ef4444;\r\n  color: white;\r\n}\r\n.pru-btn-danger:hover:not(:disabled) {\r\n  background-color: #dc2626;\r\n}\r\n.pru-btn-danger:active:not(:disabled) {\r\n  background-color: #b91c1c;\r\n}\r\n\r\n.pru-btn-warning {\r\n  background-color: #f59e0b;\r\n  color: white;\r\n}\r\n.pru-btn-warning:hover:not(:disabled) {\r\n  background-color: #d97706;\r\n}\r\n.pru-btn-warning:active:not(:disabled) {\r\n  background-color: #b45309;\r\n}\r\n\r\n.pru-btn-info {\r\n  background-color: #06b6d4;\r\n  color: white;\r\n}\r\n.pru-btn-info:hover:not(:disabled) {\r\n  background-color: #0891b2;\r\n}\r\n.pru-btn-info:active:not(:disabled) {\r\n  background-color: #0e7490;\r\n}\r\n\r\n/* Outline Variants */\r\n.pru-btn-outline-primary {\r\n  background-color: transparent;\r\n  border: 2px solid #2563eb;\r\n  color: #2563eb;\r\n}\r\n.pru-btn-outline-primary:hover:not(:disabled) {\r\n  background-color: #2563eb;\r\n  color: white;\r\n}\r\n.pru-btn-outline-primary:active:not(:disabled) {\r\n  background-color: #1d4ed8;\r\n  border-color: #1d4ed8;\r\n}\r\n\r\n.pru-btn-outline-secondary {\r\n  background-color: transparent;\r\n  border: 2px solid #64748b;\r\n  color: #64748b;\r\n}\r\n.pru-btn-outline-secondary:hover:not(:disabled) {\r\n  background-color: #64748b;\r\n  color: white;\r\n}\r\n.pru-btn-outline-secondary:active:not(:disabled) {\r\n  background-color: #475569;\r\n  border-color: #475569;\r\n}\r\n\r\n.pru-btn-outline-success {\r\n  background-color: transparent;\r\n  border: 2px solid #10b981;\r\n  color: #10b981;\r\n}\r\n.pru-btn-outline-success:hover:not(:disabled) {\r\n  background-color: #10b981;\r\n  color: white;\r\n}\r\n.pru-btn-outline-success:active:not(:disabled) {\r\n  background-color: #059669;\r\n  border-color: #059669;\r\n}\r\n\r\n.pru-btn-outline-danger {\r\n  background-color: transparent;\r\n  border: 2px solid #ef4444;\r\n  color: #ef4444;\r\n}\r\n.pru-btn-outline-danger:hover:not(:disabled) {\r\n  background-color: #ef4444;\r\n  color: white;\r\n}\r\n.pru-btn-outline-danger:active:not(:disabled) {\r\n  background-color: #dc2626;\r\n  border-color: #dc2626;\r\n}\r\n\r\n.pru-btn-outline-warning {\r\n  background-color: transparent;\r\n  border: 2px solid #f59e0b;\r\n  color: #f59e0b;\r\n}\r\n.pru-btn-outline-warning:hover:not(:disabled) {\r\n  background-color: #f59e0b;\r\n  color: white;\r\n}\r\n.pru-btn-outline-warning:active:not(:disabled) {\r\n  background-color: #d97706;\r\n  border-color: #d97706;\r\n}\r\n\r\n.pru-btn-outline-info {\r\n  background-color: transparent;\r\n  border: 2px solid #06b6d4;\r\n  color: #06b6d4;\r\n}\r\n.pru-btn-outline-info:hover:not(:disabled) {\r\n  background-color: #06b6d4;\r\n  color: white;\r\n}\r\n.pru-btn-outline-info:active:not(:disabled) {\r\n  background-color: #0891b2;\r\n  border-color: #0891b2;\r\n}\r\n\r\n/* Ghost Variants */\r\n.pru-btn-ghost-primary {\r\n  background-color: transparent;\r\n  color: #2563eb;\r\n}\r\n.pru-btn-ghost-primary:hover:not(:disabled) {\r\n  background-color: rgba(37, 99, 235, 0.1);\r\n}\r\n.pru-btn-ghost-primary:active:not(:disabled) {\r\n  background-color: rgba(37, 99, 235, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-secondary {\r\n  background-color: transparent;\r\n  color: #64748b;\r\n}\r\n.pru-btn-ghost-secondary:hover:not(:disabled) {\r\n  background-color: rgba(100, 116, 139, 0.1);\r\n}\r\n.pru-btn-ghost-secondary:active:not(:disabled) {\r\n  background-color: rgba(100, 116, 139, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-success {\r\n  background-color: transparent;\r\n  color: #10b981;\r\n}\r\n.pru-btn-ghost-success:hover:not(:disabled) {\r\n  background-color: rgba(16, 185, 129, 0.1);\r\n}\r\n.pru-btn-ghost-success:active:not(:disabled) {\r\n  background-color: rgba(16, 185, 129, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-danger {\r\n  background-color: transparent;\r\n  color: #ef4444;\r\n}\r\n.pru-btn-ghost-danger:hover:not(:disabled) {\r\n  background-color: rgba(239, 68, 68, 0.1);\r\n}\r\n.pru-btn-ghost-danger:active:not(:disabled) {\r\n  background-color: rgba(239, 68, 68, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-warning {\r\n  background-color: transparent;\r\n  color: #f59e0b;\r\n}\r\n.pru-btn-ghost-warning:hover:not(:disabled) {\r\n  background-color: rgba(245, 158, 11, 0.1);\r\n}\r\n.pru-btn-ghost-warning:active:not(:disabled) {\r\n  background-color: rgba(245, 158, 11, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-info {\r\n  background-color: transparent;\r\n  color: #06b6d4;\r\n}\r\n.pru-btn-ghost-info:hover:not(:disabled) {\r\n  background-color: rgba(6, 182, 212, 0.1);\r\n}\r\n.pru-btn-ghost-info:active:not(:disabled) {\r\n  background-color: rgba(6, 182, 212, 0.15);\r\n}\r\n\r\n/* Gradient Variants */\r\n.pru-btn-gradient-primary {\r\n  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);\r\n  color: white;\r\n  border: none;\r\n}\r\n.pru-btn-gradient-primary:hover:not(:disabled) {\r\n  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);\r\n}\r\n.pru-btn-gradient-primary:active:not(:disabled) {\r\n  background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%);\r\n}\r\n\r\n.pru-btn-gradient-success {\r\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n  color: white;\r\n  border: none;\r\n}\r\n.pru-btn-gradient-success:hover:not(:disabled) {\r\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\r\n}\r\n.pru-btn-gradient-success:active:not(:disabled) {\r\n  background: linear-gradient(135deg, #047857 0%, #065f46 100%);\r\n}\r\n\r\n.pru-btn-gradient-danger {\r\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n  color: white;\r\n  border: none;\r\n}\r\n.pru-btn-gradient-danger:hover:not(:disabled) {\r\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\r\n}\r\n.pru-btn-gradient-danger:active:not(:disabled) {\r\n  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);\r\n}\r\n\r\n/* Loading Spinner */\r\n.pru-btn-spinner {\r\n  display: inline-flex;\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n\r\n.pru-btn-spinner-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 2px solid transparent;\r\n  border-top-color: currentColor;\r\n  border-right-color: currentColor;\r\n  border-radius: 50%;\r\n  animation: pru-spin 0.6s linear infinite;\r\n}\r\n\r\n@keyframes pru-spin {\r\n  to { \r\n    transform: rotate(360deg); \r\n  }\r\n}\r\n\r\n/* Ripple Effect */\r\n.pru-btn-ripple {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  background-color: rgba(255, 255, 255, 0.6);\r\n  pointer-events: none;\r\n  transform: scale(0);\r\n  animation: pru-ripple 0.6s ease-out;\r\n}\r\n\r\n@keyframes pru-ripple {\r\n  to {\r\n    transform: scale(4);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n/* Icon spacing */\r\n.pru-btn-icon-left,\r\n.pru-btn-icon-right {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.pru-btn-content {\r\n  opacity: 1;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.pru-btn[aria-disabled=\"true\"] .pru-btn-content {\r\n  opacity: 0.7;\r\n}\r\n\r\n/* Active state for better feedback */\r\n.pru-btn:active:not(:disabled) {\r\n  transform: scale(0.98);\r\n}\r\n\r\n/* Improved focus states for accessibility */\r\n.pru-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.pru-btn:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n/* Ensure proper alignment */\r\n.pru-btn > * {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n  .pru-btn-xl {\r\n    padding: 14px 28px;\r\n    font-size: 16px;\r\n  }\r\n  \r\n  .pru-btn-large {\r\n    padding: 12px 24px;\r\n    font-size: 15px;\r\n  }\r\n}"],"names":[],"version":3,"file":"index.css.map"}

package/dist/index.d.ts

@@ -1,10 +1,15 @@
 import React from "react";
-export interface ButtonProps {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
-    onClick?: () => void;
-    variant?: 'primary' | 'secondary' | 'danger';
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'ghost-primary' | 'ghost-secondary' | 'ghost-success' | 'ghost-danger' | 'ghost-warning' | 'ghost-info' | 'gradient-primary' | 'gradient-success' | 'gradient-danger';
+    size?: 'xs' | 'small' | 'medium' | 'large' | 'xl';
+    loading?: boolean;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    fullWidth?: boolean;
+    rounded?: boolean;
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    ripple?: boolean;
 }
 export const Button: React.FC<ButtonProps>;
 

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":";AAGA;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC;AAED,OAAO,MAAM,QAAQ,MAAM,EAAE,CAAC,WAAW,CAiBxC,CAAC","sources":["components/Button/Button.tsx","components/Button/index.ts","components/index.ts","index.ts"],"sourcesContent":["import React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps {\r\n  children: React.ReactNode; // Content to be displayed inside the button\r\n  onClick?: () => void; // Function to be called when the button is clicked\r\n  variant?: 'primary' | 'secondary' | 'danger'; // Style variant of the button\r\n  disabled?: boolean; // Whether the button is disabled\r\n  type?: 'button' | 'submit' | 'reset'; // Type of the button\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  children,\r\n  onClick,\r\n  variant = 'primary',\r\n  disabled = false,\r\n  type = 'button',\r\n}) => {\r\n  return (\r\n    <button\r\n      className={`pru-btn pru-btn-${variant}`}\r\n      onClick={onClick}\r\n      disabled={disabled}\r\n      type={type}\r\n    >\r\n      {children}\r\n    </button>\r\n  );\r\n};","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","export * from './Button';","export * from './components';"],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":";AAGA,4BAA6B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,iBAAiB,GACjB,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,GAChB,iBAAiB,GACjB,cAAc,GACd,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,eAAe,GACf,YAAY,GACZ,kBAAkB,GAClB,kBAAkB,GAClB,iBAAiB,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,OAAO,MAAM,QAAQ,MAAM,EAAE,CAAC,WAAW,CA0ExC,CAAC","sources":["components/Button/Button.tsx","components/Button/index.ts","components/index.ts","index.ts"],"sourcesContent":["import React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  children: React.ReactNode;\r\n  variant?:\r\n    | 'primary'\r\n    | 'secondary'\r\n    | 'success'\r\n    | 'danger'\r\n    | 'warning'\r\n    | 'info'\r\n    | 'outline-primary'\r\n    | 'outline-secondary'\r\n    | 'outline-success'\r\n    | 'outline-danger'\r\n    | 'outline-warning'\r\n    | 'outline-info'\r\n    | 'ghost-primary'\r\n    | 'ghost-secondary'\r\n    | 'ghost-success'\r\n    | 'ghost-danger'\r\n    | 'ghost-warning'\r\n    | 'ghost-info'\r\n    | 'gradient-primary'\r\n    | 'gradient-success'\r\n    | 'gradient-danger';\r\n  size?: 'xs' | 'small' | 'medium' | 'large' | 'xl';\r\n  loading?: boolean;\r\n  iconLeft?: React.ReactNode;\r\n  iconRight?: React.ReactNode;\r\n  fullWidth?: boolean;\r\n  rounded?: boolean;\r\n  elevation?: 'none' | 'sm' | 'md' | 'lg';\r\n  ripple?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  children,\r\n  variant = 'primary',\r\n  size = 'medium',\r\n  loading = false,\r\n  iconLeft,\r\n  iconRight,\r\n  fullWidth = false,\r\n  disabled = false,\r\n  rounded = false,\r\n  elevation = 'none',\r\n  ripple = true,\r\n  className = '',\r\n  onClick,\r\n  ...rest\r\n}) => {\r\n  const isDisabled = disabled || loading;\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (ripple && !isDisabled && buttonRef.current) {\r\n      createRipple(e, buttonRef.current);\r\n    }\r\n    if (onClick && !isDisabled) {\r\n      onClick(e);\r\n    }\r\n  };\r\n\r\n  const createRipple = (event: React.MouseEvent<HTMLButtonElement>, button: HTMLButtonElement) => {\r\n    const ripple = document.createElement('span');\r\n    const rect = button.getBoundingClientRect();\r\n    const size = Math.max(rect.width, rect.height);\r\n    const x = event.clientX - rect.left - size / 2;\r\n    const y = event.clientY - rect.top - size / 2;\r\n\r\n    ripple.style.width = ripple.style.height = `${size}px`;\r\n    ripple.style.left = `${x}px`;\r\n    ripple.style.top = `${y}px`;\r\n    ripple.classList.add('pru-btn-ripple');\r\n\r\n    const existingRipple = button.querySelector('.pru-btn-ripple');\r\n    if (existingRipple) {\r\n      existingRipple.remove();\r\n    }\r\n\r\n    button.appendChild(ripple);\r\n\r\n    setTimeout(() => {\r\n      ripple.remove();\r\n    }, 600);\r\n  };\r\n\r\n  return (\r\n    <button\r\n      ref={buttonRef}\r\n      className={`pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${\r\n        rounded ? 'pru-btn-rounded' : ''\r\n      } pru-btn-elevation-${elevation} ${className}`}\r\n      disabled={isDisabled}\r\n      aria-disabled={isDisabled}\r\n      aria-busy={loading}\r\n      onClick={handleClick}\r\n      {...rest}\r\n    >\r\n      {loading && (\r\n        <span className=\"pru-btn-spinner\" aria-hidden=\"true\">\r\n          <span className=\"pru-btn-spinner-inner\"></span>\r\n        </span>\r\n      )}\r\n      {iconLeft && !loading && <span className=\"pru-btn-icon-left\">{iconLeft}</span>}\r\n      <span className=\"pru-btn-content\">{children}</span>\r\n      {iconRight && !loading && <span className=\"pru-btn-icon-right\">{iconRight}</span>}\r\n    </button>\r\n  );\r\n};","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","export * from './Button';","export * from './components';"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.esm.css

@@ -1,42 +1,454 @@
 .pru-btn {
   cursor: pointer;
+  letter-spacing: .02em;
   border: none;
-  border-radius: 6px;
-  padding: 10px 20px;
-  font-size: 16px;
+  border-radius: 2px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   font-weight: 500;
-  transition: background-color .2s;
+  text-decoration: none;
+  transition: all .2s cubic-bezier(.4, 0, .2, 1);
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
 }
 
 .pru-btn:disabled {
-  opacity: .6;
+  opacity: .5;
   cursor: not-allowed;
 }
 
+.pru-btn-xs {
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.pru-btn-small {
+  gap: 6px;
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+.pru-btn-medium {
+  padding: 10px 20px;
+  font-size: 14px;
+}
+
+.pru-btn-large {
+  padding: 14px 28px;
+  font-size: 16px;
+}
+
+.pru-btn-xl {
+  gap: 10px;
+  padding: 18px 36px;
+  font-size: 18px;
+}
+
+.pru-btn-full {
+  width: 100%;
+}
+
+.pru-btn-rounded {
+  border-radius: 50px;
+}
+
+.pru-btn-elevation-none {
+  box-shadow: none;
+}
+
+.pru-btn-elevation-sm {
+  box-shadow: 0 1px 2px #0000000d;
+}
+
+.pru-btn-elevation-md {
+  box-shadow: 0 4px 6px #00000012;
+}
+
+.pru-btn-elevation-lg {
+  box-shadow: 0 10px 15px #0000001a;
+}
+
+.pru-btn-elevation-sm:hover:not(:disabled), .pru-btn-elevation-md:hover:not(:disabled), .pru-btn-elevation-lg:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 20px #0000001f;
+}
+
 .pru-btn-primary {
   color: #fff;
-  background-color: #007bff;
+  background-color: #2563eb;
 }
 
 .pru-btn-primary:hover:not(:disabled) {
-  background-color: #0056b3;
+  background-color: #1d4ed8;
+}
+
+.pru-btn-primary:active:not(:disabled) {
+  background-color: #1e40af;
 }
 
 .pru-btn-secondary {
   color: #fff;
-  background-color: #6c757d;
+  background-color: #64748b;
 }
 
 .pru-btn-secondary:hover:not(:disabled) {
-  background-color: #545b62;
+  background-color: #475569;
+}
+
+.pru-btn-secondary:active:not(:disabled) {
+  background-color: #334155;
+}
+
+.pru-btn-success {
+  color: #fff;
+  background-color: #10b981;
+}
+
+.pru-btn-success:hover:not(:disabled) {
+  background-color: #059669;
+}
+
+.pru-btn-success:active:not(:disabled) {
+  background-color: #047857;
 }
 
 .pru-btn-danger {
   color: #fff;
-  background-color: #dc3545;
+  background-color: #ef4444;
 }
 
 .pru-btn-danger:hover:not(:disabled) {
-  background-color: #c82333;
+  background-color: #dc2626;
+}
+
+.pru-btn-danger:active:not(:disabled) {
+  background-color: #b91c1c;
+}
+
+.pru-btn-warning {
+  color: #fff;
+  background-color: #f59e0b;
+}
+
+.pru-btn-warning:hover:not(:disabled) {
+  background-color: #d97706;
+}
+
+.pru-btn-warning:active:not(:disabled) {
+  background-color: #b45309;
+}
+
+.pru-btn-info {
+  color: #fff;
+  background-color: #06b6d4;
+}
+
+.pru-btn-info:hover:not(:disabled) {
+  background-color: #0891b2;
+}
+
+.pru-btn-info:active:not(:disabled) {
+  background-color: #0e7490;
+}
+
+.pru-btn-outline-primary {
+  color: #2563eb;
+  background-color: #0000;
+  border: 2px solid #2563eb;
+}
+
+.pru-btn-outline-primary:hover:not(:disabled) {
+  color: #fff;
+  background-color: #2563eb;
+}
+
+.pru-btn-outline-primary:active:not(:disabled) {
+  background-color: #1d4ed8;
+  border-color: #1d4ed8;
+}
+
+.pru-btn-outline-secondary {
+  color: #64748b;
+  background-color: #0000;
+  border: 2px solid #64748b;
+}
+
+.pru-btn-outline-secondary:hover:not(:disabled) {
+  color: #fff;
+  background-color: #64748b;
+}
+
+.pru-btn-outline-secondary:active:not(:disabled) {
+  background-color: #475569;
+  border-color: #475569;
+}
+
+.pru-btn-outline-success {
+  color: #10b981;
+  background-color: #0000;
+  border: 2px solid #10b981;
+}
+
+.pru-btn-outline-success:hover:not(:disabled) {
+  color: #fff;
+  background-color: #10b981;
+}
+
+.pru-btn-outline-success:active:not(:disabled) {
+  background-color: #059669;
+  border-color: #059669;
+}
+
+.pru-btn-outline-danger {
+  color: #ef4444;
+  background-color: #0000;
+  border: 2px solid #ef4444;
+}
+
+.pru-btn-outline-danger:hover:not(:disabled) {
+  color: #fff;
+  background-color: #ef4444;
+}
+
+.pru-btn-outline-danger:active:not(:disabled) {
+  background-color: #dc2626;
+  border-color: #dc2626;
+}
+
+.pru-btn-outline-warning {
+  color: #f59e0b;
+  background-color: #0000;
+  border: 2px solid #f59e0b;
+}
+
+.pru-btn-outline-warning:hover:not(:disabled) {
+  color: #fff;
+  background-color: #f59e0b;
+}
+
+.pru-btn-outline-warning:active:not(:disabled) {
+  background-color: #d97706;
+  border-color: #d97706;
+}
+
+.pru-btn-outline-info {
+  color: #06b6d4;
+  background-color: #0000;
+  border: 2px solid #06b6d4;
+}
+
+.pru-btn-outline-info:hover:not(:disabled) {
+  color: #fff;
+  background-color: #06b6d4;
+}
+
+.pru-btn-outline-info:active:not(:disabled) {
+  background-color: #0891b2;
+  border-color: #0891b2;
+}
+
+.pru-btn-ghost-primary {
+  color: #2563eb;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-primary:hover:not(:disabled) {
+  background-color: #2563eb1a;
+}
+
+.pru-btn-ghost-primary:active:not(:disabled) {
+  background-color: #2563eb26;
+}
+
+.pru-btn-ghost-secondary {
+  color: #64748b;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-secondary:hover:not(:disabled) {
+  background-color: #64748b1a;
+}
+
+.pru-btn-ghost-secondary:active:not(:disabled) {
+  background-color: #64748b26;
+}
+
+.pru-btn-ghost-success {
+  color: #10b981;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-success:hover:not(:disabled) {
+  background-color: #10b9811a;
+}
+
+.pru-btn-ghost-success:active:not(:disabled) {
+  background-color: #10b98126;
+}
+
+.pru-btn-ghost-danger {
+  color: #ef4444;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-danger:hover:not(:disabled) {
+  background-color: #ef44441a;
+}
+
+.pru-btn-ghost-danger:active:not(:disabled) {
+  background-color: #ef444426;
+}
+
+.pru-btn-ghost-warning {
+  color: #f59e0b;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-warning:hover:not(:disabled) {
+  background-color: #f59e0b1a;
+}
+
+.pru-btn-ghost-warning:active:not(:disabled) {
+  background-color: #f59e0b26;
+}
+
+.pru-btn-ghost-info {
+  color: #06b6d4;
+  background-color: #0000;
+}
+
+.pru-btn-ghost-info:hover:not(:disabled) {
+  background-color: #06b6d41a;
+}
+
+.pru-btn-ghost-info:active:not(:disabled) {
+  background-color: #06b6d426;
+}
+
+.pru-btn-gradient-primary {
+  color: #fff;
+  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
+  border: none;
+}
+
+.pru-btn-gradient-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
+}
+
+.pru-btn-gradient-primary:active:not(:disabled) {
+  background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%);
+}
+
+.pru-btn-gradient-success {
+  color: #fff;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border: none;
+}
+
+.pru-btn-gradient-success:hover:not(:disabled) {
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+}
+
+.pru-btn-gradient-success:active:not(:disabled) {
+  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
+}
+
+.pru-btn-gradient-danger {
+  color: #fff;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border: none;
+}
+
+.pru-btn-gradient-danger:hover:not(:disabled) {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+}
+
+.pru-btn-gradient-danger:active:not(:disabled) {
+  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
+}
+
+.pru-btn-spinner {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.pru-btn-spinner-inner {
+  border: 2px solid;
+  border-color: currentColor currentColor #0000 #0000;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  animation: .6s linear infinite pru-spin;
+}
+
+@keyframes pru-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pru-btn-ripple {
+  pointer-events: none;
+  background-color: #fff9;
+  border-radius: 50%;
+  animation: .6s ease-out pru-ripple;
+  position: absolute;
+  transform: scale(0);
+}
+
+@keyframes pru-ripple {
+  to {
+    opacity: 0;
+    transform: scale(4);
+  }
+}
+
+.pru-btn-icon-left, .pru-btn-icon-right {
+  align-items: center;
+  display: flex;
+}
+
+.pru-btn-content {
+  opacity: 1;
+  transition: opacity .2s;
+}
+
+.pru-btn[aria-disabled="true"] .pru-btn-content {
+  opacity: .7;
+}
+
+.pru-btn:active:not(:disabled) {
+  transform: scale(.98);
+}
+
+.pru-btn:focus {
+  outline: none;
+}
+
+.pru-btn:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid;
+}
+
+.pru-btn > * {
+  align-items: center;
+  display: inline-flex;
+}
+
+@media (width <= 640px) {
+  .pru-btn-xl {
+    padding: 14px 28px;
+    font-size: 16px;
+  }
+
+  .pru-btn-large {
+    padding: 12px 24px;
+    font-size: 15px;
+  }
 }
 /*# sourceMappingURL=index.esm.css.map */

package/dist/index.esm.css.map

@@ -1 +1 @@
-{"mappings":"AAAA;;;;;;;;;;AAUA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;AAKA","sources":["components/Button/Button.css"],"sourcesContent":[".pru-btn {\r\n  padding: 10px 20px;\r\n  border: none;\r\n  border-radius: 6px;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s ease;\r\n}\r\n\r\n.pru-btn:disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pru-btn-primary {\r\n  background-color: #007bff;\r\n  color: white;\r\n}\r\n\r\n.pru-btn-primary:hover:not(:disabled) {\r\n  background-color: #0056b3;\r\n}\r\n\r\n.pru-btn-secondary {\r\n  background-color: #6c757d;\r\n  color: white;\r\n}\r\n\r\n.pru-btn-secondary:hover:not(:disabled) {\r\n  background-color: #545b62;\r\n}\r\n\r\n.pru-btn-danger {\r\n  background-color: #dc3545;\r\n  color: white;\r\n}\r\n\r\n.pru-btn-danger:hover:not(:disabled) {\r\n  background-color: #c82333;\r\n}"],"names":[],"version":3,"file":"index.esm.css.map"}
+{"mappings":"AACA;;;;;;;;;;;;;;;;;AAiBA;;;;;AAWA;;;;;;AAMA;;;;;;AAMA;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAQA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAMA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAKA;;;;;;AAKA;;;;AAGA;;;;AAIA;;;;;;AAKA;;;;AAGA;;;;AAIA;;;;;;AAKA;;;;AAGA;;;;AAKA;;;;;;AAMA;;;;;;;;;AAUA;;;;;;AAOA;;;;;;;;;AASA;;;;;;;AAQA;;;;;AAMA;;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAIA;;;;;AAMA;;;;;AAMA;EACE;;;;;EAKA","sources":["components/Button/Button.css"],"sourcesContent":["/* Base Button Styles */\r\n.pru-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  border: none;\r\n  border-radius: 2px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n  position: relative;\r\n  overflow: hidden;\r\n  text-decoration: none;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;\r\n  letter-spacing: 0.02em;\r\n}\r\n\r\n.pru-btn:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pru-btn:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n/* Sizes */\r\n.pru-btn-xs {\r\n  padding: 4px 10px;\r\n  font-size: 12px;\r\n  gap: 4px;\r\n}\r\n\r\n.pru-btn-small {\r\n  padding: 6px 14px;\r\n  font-size: 13px;\r\n  gap: 6px;\r\n}\r\n\r\n.pru-btn-medium {\r\n  padding: 10px 20px;\r\n  font-size: 14px;\r\n}\r\n\r\n.pru-btn-large {\r\n  padding: 14px 28px;\r\n  font-size: 16px;\r\n}\r\n\r\n.pru-btn-xl {\r\n  padding: 18px 36px;\r\n  font-size: 18px;\r\n  gap: 10px;\r\n}\r\n\r\n/* Full width */\r\n.pru-btn-full {\r\n  width: 100%;\r\n}\r\n\r\n/* Rounded */\r\n.pru-btn-rounded {\r\n  border-radius: 50px;\r\n}\r\n\r\n/* Elevation Shadows */\r\n.pru-btn-elevation-none {\r\n  box-shadow: none;\r\n}\r\n\r\n.pru-btn-elevation-sm {\r\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.pru-btn-elevation-md {\r\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\r\n}\r\n\r\n.pru-btn-elevation-lg {\r\n  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.pru-btn-elevation-sm:hover:not(:disabled),\r\n.pru-btn-elevation-md:hover:not(:disabled),\r\n.pru-btn-elevation-lg:hover:not(:disabled) {\r\n  transform: translateY(-1px);\r\n  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n/* Solid Variants */\r\n.pru-btn-primary {\r\n  background-color: #2563eb;\r\n  color: white;\r\n}\r\n.pru-btn-primary:hover:not(:disabled) {\r\n  background-color: #1d4ed8;\r\n}\r\n.pru-btn-primary:active:not(:disabled) {\r\n  background-color: #1e40af;\r\n}\r\n\r\n.pru-btn-secondary {\r\n  background-color: #64748b;\r\n  color: white;\r\n}\r\n.pru-btn-secondary:hover:not(:disabled) {\r\n  background-color: #475569;\r\n}\r\n.pru-btn-secondary:active:not(:disabled) {\r\n  background-color: #334155;\r\n}\r\n\r\n.pru-btn-success {\r\n  background-color: #10b981;\r\n  color: white;\r\n}\r\n.pru-btn-success:hover:not(:disabled) {\r\n  background-color: #059669;\r\n}\r\n.pru-btn-success:active:not(:disabled) {\r\n  background-color: #047857;\r\n}\r\n\r\n.pru-btn-danger {\r\n  background-color: #ef4444;\r\n  color: white;\r\n}\r\n.pru-btn-danger:hover:not(:disabled) {\r\n  background-color: #dc2626;\r\n}\r\n.pru-btn-danger:active:not(:disabled) {\r\n  background-color: #b91c1c;\r\n}\r\n\r\n.pru-btn-warning {\r\n  background-color: #f59e0b;\r\n  color: white;\r\n}\r\n.pru-btn-warning:hover:not(:disabled) {\r\n  background-color: #d97706;\r\n}\r\n.pru-btn-warning:active:not(:disabled) {\r\n  background-color: #b45309;\r\n}\r\n\r\n.pru-btn-info {\r\n  background-color: #06b6d4;\r\n  color: white;\r\n}\r\n.pru-btn-info:hover:not(:disabled) {\r\n  background-color: #0891b2;\r\n}\r\n.pru-btn-info:active:not(:disabled) {\r\n  background-color: #0e7490;\r\n}\r\n\r\n/* Outline Variants */\r\n.pru-btn-outline-primary {\r\n  background-color: transparent;\r\n  border: 2px solid #2563eb;\r\n  color: #2563eb;\r\n}\r\n.pru-btn-outline-primary:hover:not(:disabled) {\r\n  background-color: #2563eb;\r\n  color: white;\r\n}\r\n.pru-btn-outline-primary:active:not(:disabled) {\r\n  background-color: #1d4ed8;\r\n  border-color: #1d4ed8;\r\n}\r\n\r\n.pru-btn-outline-secondary {\r\n  background-color: transparent;\r\n  border: 2px solid #64748b;\r\n  color: #64748b;\r\n}\r\n.pru-btn-outline-secondary:hover:not(:disabled) {\r\n  background-color: #64748b;\r\n  color: white;\r\n}\r\n.pru-btn-outline-secondary:active:not(:disabled) {\r\n  background-color: #475569;\r\n  border-color: #475569;\r\n}\r\n\r\n.pru-btn-outline-success {\r\n  background-color: transparent;\r\n  border: 2px solid #10b981;\r\n  color: #10b981;\r\n}\r\n.pru-btn-outline-success:hover:not(:disabled) {\r\n  background-color: #10b981;\r\n  color: white;\r\n}\r\n.pru-btn-outline-success:active:not(:disabled) {\r\n  background-color: #059669;\r\n  border-color: #059669;\r\n}\r\n\r\n.pru-btn-outline-danger {\r\n  background-color: transparent;\r\n  border: 2px solid #ef4444;\r\n  color: #ef4444;\r\n}\r\n.pru-btn-outline-danger:hover:not(:disabled) {\r\n  background-color: #ef4444;\r\n  color: white;\r\n}\r\n.pru-btn-outline-danger:active:not(:disabled) {\r\n  background-color: #dc2626;\r\n  border-color: #dc2626;\r\n}\r\n\r\n.pru-btn-outline-warning {\r\n  background-color: transparent;\r\n  border: 2px solid #f59e0b;\r\n  color: #f59e0b;\r\n}\r\n.pru-btn-outline-warning:hover:not(:disabled) {\r\n  background-color: #f59e0b;\r\n  color: white;\r\n}\r\n.pru-btn-outline-warning:active:not(:disabled) {\r\n  background-color: #d97706;\r\n  border-color: #d97706;\r\n}\r\n\r\n.pru-btn-outline-info {\r\n  background-color: transparent;\r\n  border: 2px solid #06b6d4;\r\n  color: #06b6d4;\r\n}\r\n.pru-btn-outline-info:hover:not(:disabled) {\r\n  background-color: #06b6d4;\r\n  color: white;\r\n}\r\n.pru-btn-outline-info:active:not(:disabled) {\r\n  background-color: #0891b2;\r\n  border-color: #0891b2;\r\n}\r\n\r\n/* Ghost Variants */\r\n.pru-btn-ghost-primary {\r\n  background-color: transparent;\r\n  color: #2563eb;\r\n}\r\n.pru-btn-ghost-primary:hover:not(:disabled) {\r\n  background-color: rgba(37, 99, 235, 0.1);\r\n}\r\n.pru-btn-ghost-primary:active:not(:disabled) {\r\n  background-color: rgba(37, 99, 235, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-secondary {\r\n  background-color: transparent;\r\n  color: #64748b;\r\n}\r\n.pru-btn-ghost-secondary:hover:not(:disabled) {\r\n  background-color: rgba(100, 116, 139, 0.1);\r\n}\r\n.pru-btn-ghost-secondary:active:not(:disabled) {\r\n  background-color: rgba(100, 116, 139, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-success {\r\n  background-color: transparent;\r\n  color: #10b981;\r\n}\r\n.pru-btn-ghost-success:hover:not(:disabled) {\r\n  background-color: rgba(16, 185, 129, 0.1);\r\n}\r\n.pru-btn-ghost-success:active:not(:disabled) {\r\n  background-color: rgba(16, 185, 129, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-danger {\r\n  background-color: transparent;\r\n  color: #ef4444;\r\n}\r\n.pru-btn-ghost-danger:hover:not(:disabled) {\r\n  background-color: rgba(239, 68, 68, 0.1);\r\n}\r\n.pru-btn-ghost-danger:active:not(:disabled) {\r\n  background-color: rgba(239, 68, 68, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-warning {\r\n  background-color: transparent;\r\n  color: #f59e0b;\r\n}\r\n.pru-btn-ghost-warning:hover:not(:disabled) {\r\n  background-color: rgba(245, 158, 11, 0.1);\r\n}\r\n.pru-btn-ghost-warning:active:not(:disabled) {\r\n  background-color: rgba(245, 158, 11, 0.15);\r\n}\r\n\r\n.pru-btn-ghost-info {\r\n  background-color: transparent;\r\n  color: #06b6d4;\r\n}\r\n.pru-btn-ghost-info:hover:not(:disabled) {\r\n  background-color: rgba(6, 182, 212, 0.1);\r\n}\r\n.pru-btn-ghost-info:active:not(:disabled) {\r\n  background-color: rgba(6, 182, 212, 0.15);\r\n}\r\n\r\n/* Gradient Variants */\r\n.pru-btn-gradient-primary {\r\n  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);\r\n  color: white;\r\n  border: none;\r\n}\r\n.pru-btn-gradient-primary:hover:not(:disabled) {\r\n  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);\r\n}\r\n.pru-btn-gradient-primary:active:not(:disabled) {\r\n  background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%);\r\n}\r\n\r\n.pru-btn-gradient-success {\r\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n  color: white;\r\n  border: none;\r\n}\r\n.pru-btn-gradient-success:hover:not(:disabled) {\r\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\r\n}\r\n.pru-btn-gradient-success:active:not(:disabled) {\r\n  background: linear-gradient(135deg, #047857 0%, #065f46 100%);\r\n}\r\n\r\n.pru-btn-gradient-danger {\r\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n  color: white;\r\n  border: none;\r\n}\r\n.pru-btn-gradient-danger:hover:not(:disabled) {\r\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\r\n}\r\n.pru-btn-gradient-danger:active:not(:disabled) {\r\n  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);\r\n}\r\n\r\n/* Loading Spinner */\r\n.pru-btn-spinner {\r\n  display: inline-flex;\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n\r\n.pru-btn-spinner-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 2px solid transparent;\r\n  border-top-color: currentColor;\r\n  border-right-color: currentColor;\r\n  border-radius: 50%;\r\n  animation: pru-spin 0.6s linear infinite;\r\n}\r\n\r\n@keyframes pru-spin {\r\n  to { \r\n    transform: rotate(360deg); \r\n  }\r\n}\r\n\r\n/* Ripple Effect */\r\n.pru-btn-ripple {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  background-color: rgba(255, 255, 255, 0.6);\r\n  pointer-events: none;\r\n  transform: scale(0);\r\n  animation: pru-ripple 0.6s ease-out;\r\n}\r\n\r\n@keyframes pru-ripple {\r\n  to {\r\n    transform: scale(4);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n/* Icon spacing */\r\n.pru-btn-icon-left,\r\n.pru-btn-icon-right {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.pru-btn-content {\r\n  opacity: 1;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.pru-btn[aria-disabled=\"true\"] .pru-btn-content {\r\n  opacity: 0.7;\r\n}\r\n\r\n/* Active state for better feedback */\r\n.pru-btn:active:not(:disabled) {\r\n  transform: scale(0.98);\r\n}\r\n\r\n/* Improved focus states for accessibility */\r\n.pru-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.pru-btn:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n/* Ensure proper alignment */\r\n.pru-btn > * {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n  .pru-btn-xl {\r\n    padding: 14px 28px;\r\n    font-size: 16px;\r\n  }\r\n  \r\n  .pru-btn-large {\r\n    padding: 12px 24px;\r\n    font-size: 15px;\r\n  }\r\n}"],"names":[],"version":3,"file":"index.esm.css.map"}

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import "./index.esm.css";
-import {jsx as $hCgyA$jsx} from "react/jsx-runtime";
-import "react";
+import {jsxs as $hCgyA$jsxs, jsx as $hCgyA$jsx} from "react/jsx-runtime";
+import $hCgyA$react from "react";
 
 
 function $parcel$exportWildcard(dest, source) {
@@ -30,13 +30,59 @@ $parcel$export($718c29e90f2592b1$exports, "Button", () => $3b676a50c78284a9$expo
 
 
 
-const $3b676a50c78284a9$export$353f5b6fc5456de1 = ({ children: children, onClick: onClick, variant: variant = 'primary', disabled: disabled = false, type: type = 'button' })=>{
-    return /*#__PURE__*/ (0, $hCgyA$jsx)("button", {
-        className: `pru-btn pru-btn-${variant}`,
-        onClick: onClick,
-        disabled: disabled,
-        type: type,
-        children: children
+const $3b676a50c78284a9$export$353f5b6fc5456de1 = ({ children: children, variant: variant = 'primary', size: size = 'medium', loading: loading = false, iconLeft: iconLeft, iconRight: iconRight, fullWidth: fullWidth = false, disabled: disabled = false, rounded: rounded = false, elevation: elevation = 'none', ripple: ripple = true, className: className = '', onClick: onClick, ...rest })=>{
+    const isDisabled = disabled || loading;
+    const buttonRef = (0, $hCgyA$react).useRef(null);
+    const handleClick = (e)=>{
+        if (ripple && !isDisabled && buttonRef.current) createRipple(e, buttonRef.current);
+        if (onClick && !isDisabled) onClick(e);
+    };
+    const createRipple = (event, button)=>{
+        const ripple = document.createElement('span');
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        ripple.classList.add('pru-btn-ripple');
+        const existingRipple = button.querySelector('.pru-btn-ripple');
+        if (existingRipple) existingRipple.remove();
+        button.appendChild(ripple);
+        setTimeout(()=>{
+            ripple.remove();
+        }, 600);
+    };
+    return /*#__PURE__*/ (0, $hCgyA$jsxs)("button", {
+        ref: buttonRef,
+        className: `pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${rounded ? 'pru-btn-rounded' : ''} pru-btn-elevation-${elevation} ${className}`,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading,
+        onClick: handleClick,
+        ...rest,
+        children: [
+            loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
+                className: "pru-btn-spinner",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
+                    className: "pru-btn-spinner-inner"
+                })
+            }),
+            iconLeft && !loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
+                className: "pru-btn-icon-left",
+                children: iconLeft
+            }),
+            /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
+                className: "pru-btn-content",
+                children: children
+            }),
+            iconRight && !loading && /*#__PURE__*/ (0, $hCgyA$jsx)("span", {
+                className: "pru-btn-icon-right",
+                children: iconRight
+            })
+        ]
     });
 };
 

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGWO,MAAM,4CAAgC,CAAC,YAC5C,QAAQ,WACR,OAAO,WACP,UAAU,qBACV,WAAW,aACX,OAAO,UACR;IACC,qBACE,gBAAC;QACC,WAAW,CAAC,gBAAgB,EAAE,SAAS;QACvC,SAAS;QACT,UAAU;QACV,MAAM;kBAEL;;AAGP","sources":["index.ts","components/index.ts","components/Button/index.ts","components/Button/Button.tsx"],"sourcesContent":["export * from './components';","export * from './Button';","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","import React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps {\r\n  children: React.ReactNode; // Content to be displayed inside the button\r\n  onClick?: () => void; // Function to be called when the button is clicked\r\n  variant?: 'primary' | 'secondary' | 'danger'; // Style variant of the button\r\n  disabled?: boolean; // Whether the button is disabled\r\n  type?: 'button' | 'submit' | 'reset'; // Type of the button\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  children,\r\n  onClick,\r\n  variant = 'primary',\r\n  disabled = false,\r\n  type = 'button',\r\n}) => {\r\n  return (\r\n    <button\r\n      className={`pru-btn pru-btn-${variant}`}\r\n      onClick={onClick}\r\n      disabled={disabled}\r\n      type={type}\r\n    >\r\n      {children}\r\n    </button>\r\n  );\r\n};"],"names":[],"version":3,"file":"index.esm.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGqCO,MAAM,4CAAgC,CAAC,YAC5C,QAAQ,WACR,UAAU,iBACV,OAAO,mBACP,UAAU,iBACV,QAAQ,aACR,SAAS,aACT,YAAY,iBACZ,WAAW,gBACX,UAAU,kBACV,YAAY,gBACZ,SAAS,iBACT,YAAY,aACZ,OAAO,EACP,GAAG,MACJ;IACC,MAAM,aAAa,YAAY;IAC/B,MAAM,YAAY,CAAA,GAAA,YAAI,EAAE,MAAM,CAAoB;IAElD,MAAM,cAAc,CAAC;QACnB,IAAI,UAAU,CAAC,cAAc,UAAU,OAAO,EAC5C,aAAa,GAAG,UAAU,OAAO;QAEnC,IAAI,WAAW,CAAC,YACd,QAAQ;IAEZ;IAEA,MAAM,eAAe,CAAC,OAA4C;QAChE,MAAM,SAAS,SAAS,aAAa,CAAC;QACtC,MAAM,OAAO,OAAO,qBAAqB;QACzC,MAAM,OAAO,KAAK,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,MAAM;QAC7C,MAAM,IAAI,MAAM,OAAO,GAAG,KAAK,IAAI,GAAG,OAAO;QAC7C,MAAM,IAAI,MAAM,OAAO,GAAG,KAAK,GAAG,GAAG,OAAO;QAE5C,OAAO,KAAK,CAAC,KAAK,GAAG,OAAO,KAAK,CAAC,MAAM,GAAG,GAAG,KAAK,EAAE,CAAC;QACtD,OAAO,KAAK,CAAC,IAAI,GAAG,GAAG,EAAE,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE,CAAC;QAC3B,OAAO,SAAS,CAAC,GAAG,CAAC;QAErB,MAAM,iBAAiB,OAAO,aAAa,CAAC;QAC5C,IAAI,gBACF,eAAe,MAAM;QAGvB,OAAO,WAAW,CAAC;QAEnB,WAAW;YACT,OAAO,MAAM;QACf,GAAG;IACL;IAEA,qBACE,iBAAC;QACC,KAAK;QACL,WAAW,CAAC,gBAAgB,EAAE,QAAQ,SAAS,EAAE,KAAK,CAAC,EAAE,YAAY,iBAAiB,GAAG,CAAC,EACxF,UAAU,oBAAoB,GAC/B,mBAAmB,EAAE,UAAU,CAAC,EAAE,WAAW;QAC9C,UAAU;QACV,iBAAe;QACf,aAAW;QACX,SAAS;QACR,GAAG,IAAI;;YAEP,yBACC,gBAAC;gBAAK,WAAU;gBAAkB,eAAY;0BAC5C,cAAA,gBAAC;oBAAK,WAAU;;;YAGnB,YAAY,CAAC,yBAAW,gBAAC;gBAAK,WAAU;0BAAqB;;0BAC9D,gBAAC;gBAAK,WAAU;0BAAmB;;YAClC,aAAa,CAAC,yBAAW,gBAAC;gBAAK,WAAU;0BAAsB;;;;AAGtE","sources":["index.ts","components/index.ts","components/Button/index.ts","components/Button/Button.tsx"],"sourcesContent":["export * from './components';","export * from './Button';","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","import React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  children: React.ReactNode;\r\n  variant?:\r\n    | 'primary'\r\n    | 'secondary'\r\n    | 'success'\r\n    | 'danger'\r\n    | 'warning'\r\n    | 'info'\r\n    | 'outline-primary'\r\n    | 'outline-secondary'\r\n    | 'outline-success'\r\n    | 'outline-danger'\r\n    | 'outline-warning'\r\n    | 'outline-info'\r\n    | 'ghost-primary'\r\n    | 'ghost-secondary'\r\n    | 'ghost-success'\r\n    | 'ghost-danger'\r\n    | 'ghost-warning'\r\n    | 'ghost-info'\r\n    | 'gradient-primary'\r\n    | 'gradient-success'\r\n    | 'gradient-danger';\r\n  size?: 'xs' | 'small' | 'medium' | 'large' | 'xl';\r\n  loading?: boolean;\r\n  iconLeft?: React.ReactNode;\r\n  iconRight?: React.ReactNode;\r\n  fullWidth?: boolean;\r\n  rounded?: boolean;\r\n  elevation?: 'none' | 'sm' | 'md' | 'lg';\r\n  ripple?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  children,\r\n  variant = 'primary',\r\n  size = 'medium',\r\n  loading = false,\r\n  iconLeft,\r\n  iconRight,\r\n  fullWidth = false,\r\n  disabled = false,\r\n  rounded = false,\r\n  elevation = 'none',\r\n  ripple = true,\r\n  className = '',\r\n  onClick,\r\n  ...rest\r\n}) => {\r\n  const isDisabled = disabled || loading;\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (ripple && !isDisabled && buttonRef.current) {\r\n      createRipple(e, buttonRef.current);\r\n    }\r\n    if (onClick && !isDisabled) {\r\n      onClick(e);\r\n    }\r\n  };\r\n\r\n  const createRipple = (event: React.MouseEvent<HTMLButtonElement>, button: HTMLButtonElement) => {\r\n    const ripple = document.createElement('span');\r\n    const rect = button.getBoundingClientRect();\r\n    const size = Math.max(rect.width, rect.height);\r\n    const x = event.clientX - rect.left - size / 2;\r\n    const y = event.clientY - rect.top - size / 2;\r\n\r\n    ripple.style.width = ripple.style.height = `${size}px`;\r\n    ripple.style.left = `${x}px`;\r\n    ripple.style.top = `${y}px`;\r\n    ripple.classList.add('pru-btn-ripple');\r\n\r\n    const existingRipple = button.querySelector('.pru-btn-ripple');\r\n    if (existingRipple) {\r\n      existingRipple.remove();\r\n    }\r\n\r\n    button.appendChild(ripple);\r\n\r\n    setTimeout(() => {\r\n      ripple.remove();\r\n    }, 600);\r\n  };\r\n\r\n  return (\r\n    <button\r\n      ref={buttonRef}\r\n      className={`pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${\r\n        rounded ? 'pru-btn-rounded' : ''\r\n      } pru-btn-elevation-${elevation} ${className}`}\r\n      disabled={isDisabled}\r\n      aria-disabled={isDisabled}\r\n      aria-busy={loading}\r\n      onClick={handleClick}\r\n      {...rest}\r\n    >\r\n      {loading && (\r\n        <span className=\"pru-btn-spinner\" aria-hidden=\"true\">\r\n          <span className=\"pru-btn-spinner-inner\"></span>\r\n        </span>\r\n      )}\r\n      {iconLeft && !loading && <span className=\"pru-btn-icon-left\">{iconLeft}</span>}\r\n      <span className=\"pru-btn-content\">{children}</span>\r\n      {iconRight && !loading && <span className=\"pru-btn-icon-right\">{iconRight}</span>}\r\n    </button>\r\n  );\r\n};"],"names":[],"version":3,"file":"index.esm.js.map"}

package/dist/index.js

@@ -1,6 +1,6 @@
 require("./index.css");
 var $g5Y9E$reactjsxruntime = require("react/jsx-runtime");
-require("react");
+var $g5Y9E$react = require("react");
 
 
 function $parcel$exportWildcard(dest, source) {
@@ -23,6 +23,10 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
 var $0bfc0d07c177cab5$exports = {};
 var $792310cfcca9bf5b$exports = {};
 
@@ -30,13 +34,59 @@ $parcel$export($792310cfcca9bf5b$exports, "Button", () => $af8861f1a735d489$expo
 
 
 
-const $af8861f1a735d489$export$353f5b6fc5456de1 = ({ children: children, onClick: onClick, variant: variant = 'primary', disabled: disabled = false, type: type = 'button' })=>{
-    return /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("button", {
-        className: `pru-btn pru-btn-${variant}`,
-        onClick: onClick,
-        disabled: disabled,
-        type: type,
-        children: children
+const $af8861f1a735d489$export$353f5b6fc5456de1 = ({ children: children, variant: variant = 'primary', size: size = 'medium', loading: loading = false, iconLeft: iconLeft, iconRight: iconRight, fullWidth: fullWidth = false, disabled: disabled = false, rounded: rounded = false, elevation: elevation = 'none', ripple: ripple = true, className: className = '', onClick: onClick, ...rest })=>{
+    const isDisabled = disabled || loading;
+    const buttonRef = (0, ($parcel$interopDefault($g5Y9E$react))).useRef(null);
+    const handleClick = (e)=>{
+        if (ripple && !isDisabled && buttonRef.current) createRipple(e, buttonRef.current);
+        if (onClick && !isDisabled) onClick(e);
+    };
+    const createRipple = (event, button)=>{
+        const ripple = document.createElement('span');
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        ripple.classList.add('pru-btn-ripple');
+        const existingRipple = button.querySelector('.pru-btn-ripple');
+        if (existingRipple) existingRipple.remove();
+        button.appendChild(ripple);
+        setTimeout(()=>{
+            ripple.remove();
+        }, 600);
+    };
+    return /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsxs)("button", {
+        ref: buttonRef,
+        className: `pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${rounded ? 'pru-btn-rounded' : ''} pru-btn-elevation-${elevation} ${className}`,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading,
+        onClick: handleClick,
+        ...rest,
+        children: [
+            loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
+                className: "pru-btn-spinner",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
+                    className: "pru-btn-spinner-inner"
+                })
+            }),
+            iconLeft && !loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
+                className: "pru-btn-icon-left",
+                children: iconLeft
+            }),
+            /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
+                className: "pru-btn-content",
+                children: children
+            }),
+            iconRight && !loading && /*#__PURE__*/ (0, $g5Y9E$reactjsxruntime.jsx)("span", {
+                className: "pru-btn-icon-right",
+                children: iconRight
+            })
+        ]
     });
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGWO,MAAM,4CAAgC,CAAC,YAC5C,QAAQ,WACR,OAAO,WACP,UAAU,qBACV,WAAW,aACX,OAAO,UACR;IACC,qBACE,gCAAC;QACC,WAAW,CAAC,gBAAgB,EAAE,SAAS;QACvC,SAAS;QACT,UAAU;QACV,MAAM;kBAEL;;AAGP","sources":["index.ts","components/index.ts","components/Button/index.ts","components/Button/Button.tsx"],"sourcesContent":["export * from './components';","export * from './Button';","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","import React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps {\r\n  children: React.ReactNode; // Content to be displayed inside the button\r\n  onClick?: () => void; // Function to be called when the button is clicked\r\n  variant?: 'primary' | 'secondary' | 'danger'; // Style variant of the button\r\n  disabled?: boolean; // Whether the button is disabled\r\n  type?: 'button' | 'submit' | 'reset'; // Type of the button\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  children,\r\n  onClick,\r\n  variant = 'primary',\r\n  disabled = false,\r\n  type = 'button',\r\n}) => {\r\n  return (\r\n    <button\r\n      className={`pru-btn pru-btn-${variant}`}\r\n      onClick={onClick}\r\n      disabled={disabled}\r\n      type={type}\r\n    >\r\n      {children}\r\n    </button>\r\n  );\r\n};"],"names":[],"version":3,"file":"index.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGqCO,MAAM,4CAAgC,CAAC,YAC5C,QAAQ,WACR,UAAU,iBACV,OAAO,mBACP,UAAU,iBACV,QAAQ,aACR,SAAS,aACT,YAAY,iBACZ,WAAW,gBACX,UAAU,kBACV,YAAY,gBACZ,SAAS,iBACT,YAAY,aACZ,OAAO,EACP,GAAG,MACJ;IACC,MAAM,aAAa,YAAY;IAC/B,MAAM,YAAY,CAAA,GAAA,sCAAI,EAAE,MAAM,CAAoB;IAElD,MAAM,cAAc,CAAC;QACnB,IAAI,UAAU,CAAC,cAAc,UAAU,OAAO,EAC5C,aAAa,GAAG,UAAU,OAAO;QAEnC,IAAI,WAAW,CAAC,YACd,QAAQ;IAEZ;IAEA,MAAM,eAAe,CAAC,OAA4C;QAChE,MAAM,SAAS,SAAS,aAAa,CAAC;QACtC,MAAM,OAAO,OAAO,qBAAqB;QACzC,MAAM,OAAO,KAAK,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,MAAM;QAC7C,MAAM,IAAI,MAAM,OAAO,GAAG,KAAK,IAAI,GAAG,OAAO;QAC7C,MAAM,IAAI,MAAM,OAAO,GAAG,KAAK,GAAG,GAAG,OAAO;QAE5C,OAAO,KAAK,CAAC,KAAK,GAAG,OAAO,KAAK,CAAC,MAAM,GAAG,GAAG,KAAK,EAAE,CAAC;QACtD,OAAO,KAAK,CAAC,IAAI,GAAG,GAAG,EAAE,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,EAAE,CAAC;QAC3B,OAAO,SAAS,CAAC,GAAG,CAAC;QAErB,MAAM,iBAAiB,OAAO,aAAa,CAAC;QAC5C,IAAI,gBACF,eAAe,MAAM;QAGvB,OAAO,WAAW,CAAC;QAEnB,WAAW;YACT,OAAO,MAAM;QACf,GAAG;IACL;IAEA,qBACE,iCAAC;QACC,KAAK;QACL,WAAW,CAAC,gBAAgB,EAAE,QAAQ,SAAS,EAAE,KAAK,CAAC,EAAE,YAAY,iBAAiB,GAAG,CAAC,EACxF,UAAU,oBAAoB,GAC/B,mBAAmB,EAAE,UAAU,CAAC,EAAE,WAAW;QAC9C,UAAU;QACV,iBAAe;QACf,aAAW;QACX,SAAS;QACR,GAAG,IAAI;;YAEP,yBACC,gCAAC;gBAAK,WAAU;gBAAkB,eAAY;0BAC5C,cAAA,gCAAC;oBAAK,WAAU;;;YAGnB,YAAY,CAAC,yBAAW,gCAAC;gBAAK,WAAU;0BAAqB;;0BAC9D,gCAAC;gBAAK,WAAU;0BAAmB;;YAClC,aAAa,CAAC,yBAAW,gCAAC;gBAAK,WAAU;0BAAsB;;;;AAGtE","sources":["index.ts","components/index.ts","components/Button/index.ts","components/Button/Button.tsx"],"sourcesContent":["export * from './components';","export * from './Button';","export { Button } from './Button';\r\nexport type { ButtonProps } from './Button';","import React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  children: React.ReactNode;\r\n  variant?:\r\n    | 'primary'\r\n    | 'secondary'\r\n    | 'success'\r\n    | 'danger'\r\n    | 'warning'\r\n    | 'info'\r\n    | 'outline-primary'\r\n    | 'outline-secondary'\r\n    | 'outline-success'\r\n    | 'outline-danger'\r\n    | 'outline-warning'\r\n    | 'outline-info'\r\n    | 'ghost-primary'\r\n    | 'ghost-secondary'\r\n    | 'ghost-success'\r\n    | 'ghost-danger'\r\n    | 'ghost-warning'\r\n    | 'ghost-info'\r\n    | 'gradient-primary'\r\n    | 'gradient-success'\r\n    | 'gradient-danger';\r\n  size?: 'xs' | 'small' | 'medium' | 'large' | 'xl';\r\n  loading?: boolean;\r\n  iconLeft?: React.ReactNode;\r\n  iconRight?: React.ReactNode;\r\n  fullWidth?: boolean;\r\n  rounded?: boolean;\r\n  elevation?: 'none' | 'sm' | 'md' | 'lg';\r\n  ripple?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  children,\r\n  variant = 'primary',\r\n  size = 'medium',\r\n  loading = false,\r\n  iconLeft,\r\n  iconRight,\r\n  fullWidth = false,\r\n  disabled = false,\r\n  rounded = false,\r\n  elevation = 'none',\r\n  ripple = true,\r\n  className = '',\r\n  onClick,\r\n  ...rest\r\n}) => {\r\n  const isDisabled = disabled || loading;\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (ripple && !isDisabled && buttonRef.current) {\r\n      createRipple(e, buttonRef.current);\r\n    }\r\n    if (onClick && !isDisabled) {\r\n      onClick(e);\r\n    }\r\n  };\r\n\r\n  const createRipple = (event: React.MouseEvent<HTMLButtonElement>, button: HTMLButtonElement) => {\r\n    const ripple = document.createElement('span');\r\n    const rect = button.getBoundingClientRect();\r\n    const size = Math.max(rect.width, rect.height);\r\n    const x = event.clientX - rect.left - size / 2;\r\n    const y = event.clientY - rect.top - size / 2;\r\n\r\n    ripple.style.width = ripple.style.height = `${size}px`;\r\n    ripple.style.left = `${x}px`;\r\n    ripple.style.top = `${y}px`;\r\n    ripple.classList.add('pru-btn-ripple');\r\n\r\n    const existingRipple = button.querySelector('.pru-btn-ripple');\r\n    if (existingRipple) {\r\n      existingRipple.remove();\r\n    }\r\n\r\n    button.appendChild(ripple);\r\n\r\n    setTimeout(() => {\r\n      ripple.remove();\r\n    }, 600);\r\n  };\r\n\r\n  return (\r\n    <button\r\n      ref={buttonRef}\r\n      className={`pru-btn pru-btn-${variant} pru-btn-${size} ${fullWidth ? 'pru-btn-full' : ''} ${\r\n        rounded ? 'pru-btn-rounded' : ''\r\n      } pru-btn-elevation-${elevation} ${className}`}\r\n      disabled={isDisabled}\r\n      aria-disabled={isDisabled}\r\n      aria-busy={loading}\r\n      onClick={handleClick}\r\n      {...rest}\r\n    >\r\n      {loading && (\r\n        <span className=\"pru-btn-spinner\" aria-hidden=\"true\">\r\n          <span className=\"pru-btn-spinner-inner\"></span>\r\n        </span>\r\n      )}\r\n      {iconLeft && !loading && <span className=\"pru-btn-icon-left\">{iconLeft}</span>}\r\n      <span className=\"pru-btn-content\">{children}</span>\r\n      {iconRight && !loading && <span className=\"pru-btn-icon-right\">{iconRight}</span>}\r\n    </button>\r\n  );\r\n};"],"names":[],"version":3,"file":"index.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pure-react-ui",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Pure React UI components with zero external dependencies – only React and plain CSS",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",