unifyedx-storybook-new 0.1.15 → 0.1.18

package/README.md

@@ -1,4 +1,4 @@
-# 🎨 Acme Component Library
+# 🎨 Unifyed Component Library
 
 ![Storybook](https://img.shields.io/badge/-Storybook-FF4785?logo=storybook&logoColor=white)
 ![React](https://img.shields.io/badge/-React-61DAFB?logo=react&logoColor=white)
@@ -7,7 +7,7 @@
 
 A beautifully crafted collection of reusable, accessible React components built with modern web standards. Perfect for building consistent, production-ready UIs faster.
 
-![Component Library Preview](https://placehold.co/1200x600/111827/FFFFFF?text=Acme+Component+Library+Preview)
+![Component Library Preview](https://placehold.co/1200x600/111827/FFFFFF?text=Unifyed+Component+Library+Preview)
 
 ## ✨ Features
 

package/dist/unifyedx-storybook-new.css

@@ -3662,6 +3662,285 @@
   width: 1rem;
   height: 1rem;
 }
+
+.invite-flow-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: white;
+  font-family: sans-serif;
+}
+
+/* --- Header --- */
+
+.invite-flow-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.invite-flow-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.copy-link-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #2563eb;
+  font-weight: 600;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.copy-link-button:hover {
+  color: #1d4ed8;
+}
+
+.close-button {
+  color: #6b7280;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.close-button:hover {
+  color: #111827;
+}
+
+/* --- Main Content --- */
+
+.invite-flow-form {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.invite-flow-main {
+  flex-grow: 1;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.main-content-spacing > *:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+/* Search Section */
+
+.search-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 0.5rem;
+  align-items: flex-start;
+}
+
+.search-results-panel {
+  position: absolute;
+  top: 100%;
+  margin-top: 0.5rem;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  z-index: 10;
+}
+
+.search-results-list {
+  max-height: 15rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+
+.search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+}
+
+.search-result-item:not(.disabled) {
+  cursor: pointer;
+}
+
+.search-result-item:not(.disabled):hover {
+  background-color: #eef2ff;
+}
+
+.search-result-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.result-checkbox {
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  border-color: #d1d5db;
+  border-radius: 0.25rem;
+}
+
+.result-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+}
+
+.result-name {
+  font-weight: 500;
+  color: #1f2937;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.result-status-badge {
+  font-size: 0.875rem;
+  padding: 2px 12px;
+  border: 1px dashed;
+  border-radius: 9999px;
+  background-color: #f0fdfa;
+  color: #0f766e;
+}
+
+.result-status-text {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.search-panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+/* Pending Invites */
+
+.pending-invites-section {
+  padding-top: 1rem;
+}
+
+.pending-invites-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pending-invites-title {
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.pending-invites-list {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.pending-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+}
+
+.pending-item-details {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  overflow: hidden;
+}
+
+.pending-item-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.pending-item-name {
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pending-item-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.pending-item-permission {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.remove-invite-button {
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.remove-invite-button:hover {
+  color: #ef4444;
+}
+
+/* --- Footer --- */
+
+.invite-flow-footer {
+  padding: 1rem;
+  border-top: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.invite-count {
+  font-size: 0.875rem;
+  color: #4b5563;
+}
+
+.footer-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.error-message {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: #dc2626;
+}
 .avatar-container {
   display: inline-flex;
   align-items: center;