@libxai/board 0.17.47 → 0.17.48

package/dist/styles.css

@@ -10484,6 +10484,188 @@ body {
 }
 
 
+/* ============================================================================
+   ADD COLUMN BUTTON (v0.9.0)
+   Button component for adding new columns to the board
+   ============================================================================ */
+
+
+.asakaa-add-column {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--column-width);
+  max-width: var(--column-width);
+  flex-shrink: 0;
+  padding: var(--space-4);
+}
+
+
+.asakaa-add-column__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  height: 48px;
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text-tertiary);
+  background: transparent;
+  border: 2px dashed var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-smooth);
+}
+
+
+.asakaa-add-column__button:hover:not(:disabled) {
+  color: var(--color-blue);
+  border-color: var(--color-blue);
+  background: rgba(59, 130, 246, var(--opacity-subtle));
+}
+
+
+.asakaa-add-column__button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+/* Editing mode */
+
+
+.asakaa-add-column--editing {
+  min-width: var(--column-width);
+  max-width: var(--column-width);
+}
+
+
+.asakaa-add-column__input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+}
+
+
+.asakaa-add-column__input {
+  width: 100%;
+  height: 40px;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-sm);
+  color: var(--color-text-primary);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease-smooth);
+}
+
+
+.asakaa-add-column__input:focus {
+  border-color: var(--color-blue);
+}
+
+
+.asakaa-add-column__input::-moz-placeholder {
+  color: var(--color-text-tertiary);
+}
+
+
+.asakaa-add-column__input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+
+.asakaa-add-column__actions {
+  display: flex;
+  gap: var(--space-2);
+  justify-content: flex-end;
+}
+
+
+.asakaa-add-column__submit,
+.asakaa-add-column__cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-smooth);
+}
+
+
+.asakaa-add-column__submit {
+  color: white;
+  background: var(--color-blue);
+}
+
+
+.asakaa-add-column__submit:hover:not(:disabled) {
+  background: var(--color-blue-dark);
+}
+
+
+.asakaa-add-column__submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+.asakaa-add-column__cancel {
+  color: var(--color-text-tertiary);
+  background: transparent;
+}
+
+
+.asakaa-add-column__cancel:hover {
+  color: var(--color-text-primary);
+  background: rgba(255, 255, 255, var(--opacity-subtle));
+}
+
+
+/* Light theme overrides */
+
+
+.asakaa-board:not(.dark) .asakaa-add-column__button {
+  border-color: rgba(0, 0, 0, 0.15);
+  color: var(--color-text-tertiary);
+}
+
+
+.asakaa-board:not(.dark) .asakaa-add-column__button:hover:not(:disabled) {
+  border-color: var(--color-blue);
+  color: var(--color-blue);
+  background: rgba(59, 130, 246, 0.05);
+}
+
+
+.asakaa-board:not(.dark) .asakaa-add-column__input-wrapper {
+  background: var(--color-bg-secondary);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+
+.asakaa-board:not(.dark) .asakaa-add-column__input {
+  background: white;
+  border-color: rgba(0, 0, 0, 0.1);
+  color: var(--color-text-primary);
+}
+
+
+.asakaa-board:not(.dark) .asakaa-add-column__cancel:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+
 .placeholder\:text-\[\#6B7280\]::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libxai/board",
-  "version": "0.17.47",
+  "version": "0.17.48",
   "type": "module",
   "description": "Professional Gantt Chart + Kanban Board + ListView + CalendarBoard for React - Part of LibXAI Suite - TypeScript - Production-Ready - Zero Config",
   "author": "LibXAI <hello@libxai.com>",