arco-clone-react 1.3.1 → 1.5.0

package/README.md

@@ -22,12 +22,10 @@ Test reports are automatically generated and deployed for every pull request.
 - Semantic versioning with automated releases
 - GitHub Actions CI/CD pipeline
 
-## ~~Installation~~
-
-🚨 to be configured later.
+## Installation
 
 ```bash
-npm install design-system-poc
+npm install arco-clone-react
 ```
 
 ## Usage

package/dist/index.css

@@ -496,6 +496,267 @@
 }
 
 
+/* src/components/Drawer/Drawer.module.css */
+/* Drawer Component Styles */
+
+.drawerContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.drawerContainer > * {
+  pointer-events: auto;
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Drawer */
+.drawer {
+  position: fixed;
+  background: var(--color-bg-white, #fff);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+/* Placement: Right (default) */
+.drawer.right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  animation: slideInRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Placement: Left */
+.drawer.left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  animation: slideInLeft 0.3s ease;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Placement: Top */
+.drawer.top {
+  top: 0;
+  left: 0;
+  right: 0;
+  animation: slideInTop 0.3s ease;
+}
+
+@keyframes slideInTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* Placement: Bottom */
+.drawer.bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  animation: slideInBottom 0.3s ease;
+}
+
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* Size: Small */
+.drawer.right.small,
+.drawer.left.small {
+  width: 320px;
+}
+
+.drawer.top.small,
+.drawer.bottom.small {
+  height: 240px;
+}
+
+/* Size: Medium (default) */
+.drawer.right.medium,
+.drawer.left.medium {
+  width: 480px;
+}
+
+.drawer.top.medium,
+.drawer.bottom.medium {
+  height: 360px;
+}
+
+/* Size: Large */
+.drawer.right.large,
+.drawer.left.large {
+  width: 640px;
+}
+
+.drawer.top.large,
+.drawer.bottom.large {
+  height: 480px;
+}
+
+/* Size: Full */
+.drawer.right.full,
+.drawer.left.full {
+  width: 100%;
+}
+
+.drawer.top.full,
+.drawer.bottom.full {
+  height: 100%;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--color-border, #e0e0e0);
+  flex-shrink: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary, #333);
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: var(--color-text-secondary, #666);
+  transition: all 0.2s ease;
+  margin-left: auto;
+}
+
+.closeButton:hover {
+  background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+  color: var(--color-text-primary, #333);
+}
+
+.closeButton:focus-visible {
+  outline: 2px solid var(--color-primary, #1890ff);
+  outline-offset: 2px;
+}
+
+.closeButton:active {
+  transform: scale(0.95);
+}
+
+/* Body */
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+/* Footer */
+.footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border, #e0e0e0);
+  flex-shrink: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .drawer.right.small,
+  .drawer.left.small,
+  .drawer.right.medium,
+  .drawer.left.medium {
+    width: 100%;
+  }
+
+  .drawer.top.small,
+  .drawer.bottom.small,
+  .drawer.top.medium,
+  .drawer.bottom.medium {
+    height: 80%;
+  }
+
+  .drawer.right.large,
+  .drawer.left.large {
+    width: 100%;
+  }
+
+  .drawer.top.large,
+  .drawer.bottom.large {
+    height: 90%;
+  }
+
+  .header {
+    padding: 1rem;
+  }
+
+  .body {
+    padding: 1rem;
+  }
+
+  .footer {
+    padding: 0.75rem 1rem;
+  }
+
+  .title {
+    font-size: 1.125rem;
+  }
+}
+
+
 /* src/components/Container/Container.module.css */
 /**
  * Container Component Styles
@@ -558,6 +819,142 @@
 }
 
 
+/* src/components/Collapse/Collapse.module.css */
+/**
+ * Collapse Component Styles
+ *
+ * Styling for Collapse component with smooth animations.
+ */
+
+.collapse {
+  display: block;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.bordered {
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+}
+
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  font-weight: 600;
+  color: #1d2129;
+}
+
+.header:hover:not(.disabled .header) {
+  background-color: #f7f8fa;
+}
+
+.header:focus-visible {
+  outline: 2px solid #165dff;
+  outline-offset: -2px;
+}
+
+.disabled .header {
+  cursor: not-allowed;
+}
+
+/* Sizes */
+.small .header {
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+.medium .header {
+  padding: 12px 16px;
+  font-size: 14px;
+}
+
+.large .header {
+  padding: 16px 20px;
+  font-size: 16px;
+}
+
+/* Icon */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  color: #86909c;
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+}
+
+.expanded .icon {
+  transform: rotate(0deg);
+}
+
+.header:not(.expanded) .icon {
+  transform: rotate(-90deg);
+}
+
+/* Header content */
+.headerContent {
+  flex: 1;
+}
+
+/* Content */
+.content {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+
+.contentExpanded {
+  overflow: visible;
+}
+
+.contentInner {
+  padding: 0 16px 16px 16px;
+  color: #4e5969;
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+}
+
+.small .contentInner {
+  padding: 0 12px 8px 12px;
+  font-size: 12px;
+}
+
+.medium .contentInner {
+  padding: 0 16px 12px 16px;
+  font-size: 14px;
+}
+
+.large .contentInner {
+  padding: 0 20px 16px 20px;
+  font-size: 16px;
+}
+
+
 /* src/components/Carousel/Carousel.module.css */
 /* Carousel Component Styles */
 
@@ -1120,139 +1517,3 @@
 }
 
 
-/* src/components/Collapse/Collapse.module.css */
-/**
- * Collapse Component Styles
- *
- * Styling for Collapse component with smooth animations.
- */
-
-.collapse {
-  display: block;
-  background-color: #ffffff;
-  overflow: hidden;
-}
-
-.bordered {
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-}
-
-.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Header */
-.header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.2s ease;
-  font-family:
-    'Nunito Sans',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    sans-serif;
-  font-weight: 600;
-  color: #1d2129;
-}
-
-.header:hover:not(.disabled .header) {
-  background-color: #f7f8fa;
-}
-
-.header:focus-visible {
-  outline: 2px solid #165dff;
-  outline-offset: -2px;
-}
-
-.disabled .header {
-  cursor: not-allowed;
-}
-
-/* Sizes */
-.small .header {
-  padding: 8px 12px;
-  font-size: 12px;
-}
-
-.medium .header {
-  padding: 12px 16px;
-  font-size: 14px;
-}
-
-.large .header {
-  padding: 16px 20px;
-  font-size: 16px;
-}
-
-/* Icon */
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  color: #86909c;
-  transition: transform 0.3s ease;
-  flex-shrink: 0;
-}
-
-.expanded .icon {
-  transform: rotate(0deg);
-}
-
-.header:not(.expanded) .icon {
-  transform: rotate(-90deg);
-}
-
-/* Header content */
-.headerContent {
-  flex: 1;
-}
-
-/* Content */
-.content {
-  height: 0;
-  overflow: hidden;
-  transition: height 0.3s ease;
-}
-
-.contentExpanded {
-  overflow: visible;
-}
-
-.contentInner {
-  padding: 0 16px 16px 16px;
-  color: #4e5969;
-  font-family:
-    'Nunito Sans',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    sans-serif;
-}
-
-.small .contentInner {
-  padding: 0 12px 8px 12px;
-  font-size: 12px;
-}
-
-.medium .contentInner {
-  padding: 0 16px 12px 16px;
-  font-size: 14px;
-}
-
-.large .contentInner {
-  padding: 0 20px 16px 20px;
-  font-size: 16px;
-}
-
-