@kingsimba/nc-ui 0.1.0 → 0.1.2

package/dist/styles.css

@@ -2,10 +2,11 @@
   color-scheme: dark;
 
   /* Core colors */
-  --nc-bg: #151b23;
+  --nc-bg: #171e27;
   --nc-bg-secondary: #1a2332;
   --nc-bg-tertiary: #232d3d;
   --nc-bg-quaternary: #2c3847;
+  --nc-bg-text: var(--nc-bg);
   --nc-muted: #7a8a9a;
   --nc-text: #e8eef6;
   --nc-text-weak: #6b7280;
@@ -18,7 +19,7 @@
   /* UI element colors */
   --nc-border: #1f2937;
   --nc-button-border: #223042;
-  --nc-button-bg: #0f1722;
+  --nc-button-bg: var(--nc-bg-tertiary);
   --nc-button-hover: #162332;
   --nc-button-active: #1d2e42;
   --nc-overlay-hover: rgba(255, 255, 255, 0.05);
@@ -37,10 +38,11 @@
   color-scheme: light;
 
   /* Core colors */
-  --nc-bg: #f1f5f9;
-  --nc-bg-secondary: #ffffff;
-  --nc-bg-tertiary: #f1f5f9;
-  --nc-bg-quaternary: #e2e8f0;
+  --nc-bg: #dde5ef;
+  --nc-bg-secondary: #e8eef5;
+  --nc-bg-tertiary: #f8fafc;
+  --nc-bg-quaternary: #ffffff;
+  --nc-bg-text: var(--nc-bg-quaternary);
   --nc-muted: #64748b;
   --nc-text: #1e293b;
   --nc-text-weak: #64748b;
@@ -53,7 +55,7 @@
   /* UI element colors */
   --nc-border: #e2e8f0;
   --nc-button-border: #cbd5e1;
-  --nc-button-bg: #f8fafc;
+  --nc-button-bg: var(--nc-bg-tertiary);
   --nc-button-hover: #f1f5f9;
   --nc-button-active: #e2e8f0;
   --nc-overlay-hover: rgba(0, 0, 0, 0.05);
@@ -67,6 +69,112 @@
   --nc-code-comment: #008000;
 }
 
+/* ===== REUSABLE PUBLIC STYLES ===== */
+
+/* Typography - Headings */
+h1, .h1 { font-size: 2rem; font-weight: 700; color: var(--nc-text); margin: 0.5em 0 0.5em 0; line-height: 1.2; }
+h1:first-child, .h1:first-child { margin-top: 0; }
+h2, .h2 { font-size: 1.5rem; font-weight: 600; color: var(--nc-text); margin: 0.5em 0 0.5em 0; line-height: 1.3; }
+h2:first-child, .h2:first-child { margin-top: 0; }
+h3, .h3 { font-size: 1.25rem; font-weight: 600; color: var(--nc-text); margin: 0.4em 0 0.4em 0; line-height: 1.4; }
+h3:first-child, .h3:first-child { margin-top: 0; }
+h4, .h4 { font-size: 1rem; font-weight: 600; color: var(--nc-text); margin: 0.4em 0 0.4em 0; line-height: 1.4; }
+h4:first-child, .h4:first-child { margin-top: 0; }
+
+/* Text colors */
+p.weak { color: var(--nc-text-weak); }
+p.weaker { color: var(--nc-text-weaker); }
+
+/* Inline code */
+code, .code {
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  font-size: 0.875em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--nc-bg-tertiary);
+  color: var(--nc-text);
+  border: 1px solid var(--nc-border);
+}
+
+/* Code block */
+.code-block {
+  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  font-size: 13px;
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--nc-bg-tertiary);
+  color: var(--nc-text);
+  border: 1px solid var(--nc-border);
+  overflow-x: auto;
+  white-space: pre;
+  line-height: 1.5;
+}
+
+/* Tags */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--nc-bg-tertiary);
+  color: var(--nc-text);
+  border: 1px solid var(--nc-border);
+}
+
+.tag.red { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
+.tag.yellow { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
+.tag.green { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
+.tag.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
+
+/* Light theme tag adjustments */
+:root.light .tag.red { color: #dc2626; }
+:root.light .tag.yellow { color: #d97706; }
+:root.light .tag.green { color: #16a34a; }
+:root.light .tag.blue { color: #2563eb; }
+
+/* Block container */
+.block {
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--nc-bg-quaternary);
+  border: 1px solid var(--nc-border);
+  margin: 16px 0;
+  position: relative;
+}
+
+.block.icon { padding-left: 44px; }
+
+.block.icon::before {
+  position: absolute;
+  left: 14px;
+  top: 16px;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.block.note { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }
+.block.note.icon::before { content: "ℹ️"; }
+
+.block.warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }
+.block.warning.icon::before { content: "⚠️"; }
+
+.block.danger { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
+.block.danger.icon::before { content: "🚨"; }
+
+.block.dashed { border-style: dashed; border-width: 2px; }
+
+/* Paragraph */
+p { margin: 0.5em 0; color: var(--nc-text); }
+p:first-child { margin-top: 0; }
+
+/* Lists */
+ul, ol { margin: 0.5em 0; padding-left: 1.5em; color: var(--nc-text); }
+ul.no-dots { list-style-type: none; padding-left: 0; }
+li { margin: 0.75em 0; }
+li::marker { color: var(--nc-text-weak); }
+
 /* Button component */
 .nc-button {
   padding: 9px 14px;
@@ -109,7 +217,7 @@
 .nc-button.nc-ghost:active { background: var(--nc-button-active); transform: scale(0.97); }
 
 .nc-button.nc-small { padding: 2px 10px; font-size: 12px; margin: 0; border-radius: 6px; height: 32px; }
-.nc-button.nc-large { padding: 12px 14px; font-size: 16px; min-height: 60px; font-weight: bold; }
+.nc-button.nc-large { padding: 10px 24px; font-size: 16px; min-height: 60px; font-weight: bold; }
 .nc-button.nc-text-selectable { user-select: text; -webkit-user-select: text; text-transform: none; }
 
 /* Disabled state */
@@ -122,16 +230,21 @@
 
 /* Activity Indicator */
 .nc-activity-indicator {
-  border: 2px solid transparent;
-  border-top-color: var(--nc-primary);
-  border-radius: 50%;
-  animation: nc-spin 0.8s linear infinite;
+  animation: nc-spin 2s linear infinite;
   box-sizing: border-box;
+  color: var(--nc-primary);
 }
 
-.nc-activity-indicator.nc-small { width: 16px; height: 16px; border-width: 2px; }
-.nc-activity-indicator.nc-default { width: 24px; height: 24px; border-width: 2.5px; }
-.nc-activity-indicator.nc-large { width: 32px; height: 32px; border-width: 3px; }
+.nc-activity-indicator.nc-small { width: 16px; height: 16px; }
+.nc-activity-indicator.nc-default { width: 24px; height: 24px; }
+.nc-activity-indicator.nc-large { width: 32px; height: 32px; }
+
+.nc-activity-indicator-circle {
+  stroke: currentColor;
+  stroke-dasharray: 1, 150;
+  stroke-dashoffset: 0;
+  animation: nc-dash 1.5s ease-in-out infinite;
+}
 
 /* Overlay mode - covers parent element (parent must have position: relative) */
 .nc-activity-indicator-overlay {
@@ -152,6 +265,21 @@
   }
 }
 
+@keyframes nc-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
 /* Input component */
 .nc-input {
   background: var(--nc-button-bg);
@@ -500,7 +628,8 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 .nc-slider:disabled::-moz-range-thumb { cursor: not-allowed; }
 
 /* ListGroup component */
-.nc-list-group { margin-bottom: 0; }
+.nc-list-group { margin-bottom: 0; margin-top: 16px; }
+.nc-list-group:first-child { margin-top: 0; }
 .nc-list-group:last-child { margin-bottom: 16px; }
 
 .nc-list-group-title {
@@ -517,7 +646,7 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 }
 
 .nc-list-group-content {
-  background: var(--nc-button-bg);
+  background: var(--nc-bg-tertiary);
   border: 1px solid var(--nc-border);
   border-radius: 8px;
   overflow: hidden;
@@ -541,7 +670,39 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 .nc-list-group-title-tools { display: flex; gap: 8px; }
 
 /* Tabs component */
-.nc-tab-container { border-bottom: 1px solid var(--nc-border); }
+.nc-tab-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--nc-border);
+  background: var(--nc-bg-secondary);
+}
+
+.nc-tab-scroll-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.nc-tab-scroll {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex: 1;
+  min-width: 0;
+}
+
+.nc-tab-scroll::-webkit-scrollbar { display: none; }
+
+.nc-tab-scroll.nc-multiline {
+  flex-wrap: wrap;
+  overflow-x: visible;
+}
 
 .nc-tab-item {
   padding: 12px 16px;
@@ -553,11 +714,125 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
   border-bottom: 2px solid transparent;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
+.nc-tab-scroll.nc-multiline .nc-tab-item { flex-shrink: 1; }
+
 .nc-tab-item:hover { color: var(--nc-text); }
 .nc-tab-item.nc-active { color: var(--nc-primary); border-bottom-color: var(--nc-primary); }
 
+.nc-tab-toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 0 12px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--nc-border);
+}
+
+.nc-tab-scroll-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  pointer-events: none;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--nc-text-weak);
+}
+
+.nc-tab-scroll-indicator.nc-left {
+  left: 0;
+  background: linear-gradient(to right, var(--nc-bg-secondary) 20%, transparent);
+  justify-content: flex-start;
+  padding-left: 4px;
+}
+
+.nc-tab-scroll-indicator.nc-right {
+  right: 0;
+  background: linear-gradient(to left, var(--nc-bg-secondary) 20%, transparent);
+  justify-content: flex-end;
+  padding-right: 4px;
+}
+
+/* Vertical tabs */
+.nc-tab-container.nc-vertical {
+  flex-direction: column;
+  align-items: stretch;
+  border-bottom: none;
+}
+
+.nc-tab-container.nc-verticalLeft {
+  border-right: 1px solid var(--nc-border);
+}
+
+.nc-tab-container.nc-verticalRight {
+  border-left: 1px solid var(--nc-border);
+}
+
+.nc-tab-container.nc-vertical .nc-tab-scroll {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 8px;
+  gap: 4px;
+}
+
+.nc-tab-container.nc-vertical .nc-tab-item {
+  padding: 10px 12px;
+  font-size: 14px;
+  border-bottom: none;
+  border-radius: 4px;
+  text-transform: none;
+  letter-spacing: normal;
+  width: 100%;
+}
+
+.nc-tab-container.nc-verticalLeft .nc-tab-item {
+  text-align: left;
+}
+
+.nc-tab-container.nc-verticalRight .nc-tab-item {
+  text-align: right;
+}
+
+.nc-tab-container.nc-vertical .nc-tab-item:hover {
+  background: var(--nc-bg-tertiary);
+}
+
+.nc-tab-container.nc-vertical .nc-tab-item.nc-active {
+  background: var(--nc-primary);
+  color: white;
+}
+
+.nc-tab-container.nc-vertical .nc-tab-scroll-indicator {
+  left: 0;
+  right: 0;
+  width: auto;
+  height: 40px;
+  flex-direction: column;
+}
+
+.nc-tab-container.nc-vertical .nc-tab-scroll-indicator.nc-top {
+  top: 0;
+  bottom: auto;
+  background: linear-gradient(to bottom, var(--nc-bg-secondary) 20%, transparent);
+  justify-content: flex-start;
+  padding-top: 4px;
+}
+
+.nc-tab-container.nc-vertical .nc-tab-scroll-indicator.nc-bottom {
+  bottom: 0;
+  top: auto;
+  background: linear-gradient(to top, var(--nc-bg-secondary) 20%, transparent);
+  justify-content: flex-end;
+  padding-bottom: 4px;
+}
+
 /* Toggle component */
 .nc-toggle {
   position: relative;
@@ -864,4 +1139,93 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 .nc-token-constant { color: var(--nc-code-null) !important; }
 .nc-token-number { color: var(--nc-code-number) !important; }
 .nc-token-atrule { color: var(--nc-code-key) !important; }
-.nc-token-comment { color: var(--nc-code-comment) !important; }
+.nc-token-comment { color: var(--nc-code-comment) !important; }
+
+/* ===== NOTIFICATION COMPONENT ===== */
+.nc-notification {
+  min-width: 320px;
+  max-width: 400px;
+  background: var(--nc-bg-tertiary);
+  border: 1px solid var(--nc-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.nc-notification-content {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px 16px;
+  gap: 12px;
+}
+
+.nc-notification-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.nc-notification-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--nc-text);
+  margin-bottom: 4px;
+}
+
+.nc-notification-message {
+  font-size: 13px;
+  color: var(--nc-text-weak);
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.nc-notification-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--nc-text-weak);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+.nc-notification-dismiss:hover {
+  background: var(--nc-overlay-hover);
+  color: var(--nc-text);
+}
+
+/* Notification type variants */
+.nc-notification-success {
+  border-left: 3px solid var(--nc-success);
+}
+
+.nc-notification-success .nc-notification-title {
+  color: var(--nc-success);
+}
+
+.nc-notification-danger {
+  border-left: 3px solid var(--nc-danger);
+}
+
+.nc-notification-danger .nc-notification-title {
+  color: var(--nc-danger);
+}
+
+.nc-notification-warning {
+  border-left: 3px solid var(--nc-warning);
+}
+
+.nc-notification-warning .nc-notification-title {
+  color: var(--nc-warning);
+}
+
+.nc-notification-info {
+  border-left: 3px solid var(--nc-primary);
+}
+
+.nc-notification-info .nc-notification-title {
+  color: var(--nc-primary);
+}