zenkit-css 1.0.0

package/scss/components/_popconfirm.scss

@@ -0,0 +1,393 @@
+// ========================================
+// ZenKit - Popconfirm Component
+// Confirmation popover dialog
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Popconfirm Wrapper (Popover-like)
+// ----------------------------------------
+.popconfirm {
+  position: absolute;
+  z-index: $z-popover;
+  display: none;
+  max-width: 280px;
+  background-color: var(--bg-primary);
+  border-radius: $border-radius;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+              0 3px 6px -4px rgba(0, 0, 0, 0.12),
+              0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  animation: popconfirm-fade-in 0.15s ease;
+
+  &.is-open {
+    display: block;
+  }
+}
+
+@keyframes popconfirm-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// ----------------------------------------
+// Popconfirm Arrow
+// ----------------------------------------
+.popconfirm-arrow {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background-color: var(--bg-primary);
+    transform: rotate(45deg);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  }
+}
+
+// Arrow positions
+.popconfirm-placement-top .popconfirm-arrow,
+.popconfirm-placement-top-left .popconfirm-arrow,
+.popconfirm-placement-top-right .popconfirm-arrow {
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &::before {
+    top: -4px;
+    left: 4px;
+  }
+}
+
+.popconfirm-placement-bottom .popconfirm-arrow,
+.popconfirm-placement-bottom-left .popconfirm-arrow,
+.popconfirm-placement-bottom-right .popconfirm-arrow {
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &::before {
+    bottom: -4px;
+    left: 4px;
+  }
+}
+
+.popconfirm-placement-left .popconfirm-arrow,
+.popconfirm-placement-left-top .popconfirm-arrow,
+.popconfirm-placement-left-bottom .popconfirm-arrow {
+  right: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  &::before {
+    right: -4px;
+    top: 4px;
+  }
+}
+
+.popconfirm-placement-right .popconfirm-arrow,
+.popconfirm-placement-right-top .popconfirm-arrow,
+.popconfirm-placement-right-bottom .popconfirm-arrow {
+  left: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  &::before {
+    left: -4px;
+    top: 4px;
+  }
+}
+
+// ----------------------------------------
+// Popconfirm Content
+// ----------------------------------------
+.popconfirm-inner {
+  padding: 0.75rem 1rem;
+}
+
+.popconfirm-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.popconfirm-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+// Icon colors
+.popconfirm-warning .popconfirm-icon {
+  color: var(--warning);
+}
+
+.popconfirm-danger .popconfirm-icon,
+.popconfirm-error .popconfirm-icon {
+  color: var(--danger);
+}
+
+.popconfirm-info .popconfirm-icon {
+  color: var(--info);
+}
+
+.popconfirm-success .popconfirm-icon {
+  color: var(--success);
+}
+
+.popconfirm-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.popconfirm-description {
+  margin-top: 0.25rem;
+  margin-left: 1.5rem;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+// ----------------------------------------
+// Popconfirm Buttons
+// ----------------------------------------
+.popconfirm-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.popconfirm-btn {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: $border-radius-sm;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.popconfirm-btn-cancel {
+  color: var(--text-primary);
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+
+  &:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+  }
+}
+
+.popconfirm-btn-confirm {
+  color: #fff;
+  background-color: var(--primary);
+  border: 1px solid var(--primary);
+
+  &:hover {
+    background-color: var(--primary-dark);
+    border-color: var(--primary-dark);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Danger confirm button
+.popconfirm-danger .popconfirm-btn-confirm {
+  background-color: var(--danger);
+  border-color: var(--danger);
+
+  &:hover {
+    background-color: var(--danger-dark, #c0392b);
+    border-color: var(--danger-dark, #c0392b);
+  }
+}
+
+// ----------------------------------------
+// Popconfirm Loading
+// ----------------------------------------
+.popconfirm-btn-loading {
+  position: relative;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: 12px;
+    margin: -6px 0 0 -6px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  > * {
+    visibility: hidden;
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// ----------------------------------------
+// Popconfirm Sizes
+// ----------------------------------------
+.popconfirm-sm {
+  max-width: 220px;
+
+  .popconfirm-inner {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .popconfirm-title {
+    font-size: 0.8125rem;
+  }
+
+  .popconfirm-btn {
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+  }
+}
+
+.popconfirm-lg {
+  max-width: 360px;
+
+  .popconfirm-inner {
+    padding: 1rem 1.25rem;
+  }
+
+  .popconfirm-title {
+    font-size: 1rem;
+  }
+
+  .popconfirm-btn {
+    padding: 0.375rem 1rem;
+    font-size: 0.875rem;
+  }
+}
+
+// ----------------------------------------
+// Popconfirm Variants
+// ----------------------------------------
+// Bordered
+.popconfirm-bordered {
+  border: 1px solid var(--border-color);
+}
+
+// Dark theme
+.popconfirm-dark {
+  background-color: #1f1f1f;
+  color: rgba(255, 255, 255, 0.85);
+
+  .popconfirm-arrow::before {
+    background-color: #1f1f1f;
+  }
+
+  .popconfirm-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .popconfirm-description {
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .popconfirm-btn-cancel {
+    color: rgba(255, 255, 255, 0.85);
+    border-color: rgba(255, 255, 255, 0.2);
+
+    &:hover {
+      border-color: var(--primary);
+    }
+  }
+}
+
+// ----------------------------------------
+// Popconfirm Without Icon
+// ----------------------------------------
+.popconfirm-no-icon {
+  .popconfirm-icon {
+    display: none;
+  }
+
+  .popconfirm-description {
+    margin-left: 0;
+  }
+}
+
+// ----------------------------------------
+// Popconfirm Custom Buttons Layout
+// ----------------------------------------
+.popconfirm-buttons-left {
+  justify-content: flex-start;
+}
+
+.popconfirm-buttons-center {
+  justify-content: center;
+}
+
+.popconfirm-buttons-space-between {
+  justify-content: space-between;
+}
+
+// ----------------------------------------
+// Popconfirm with Input
+// ----------------------------------------
+.popconfirm-with-input {
+  max-width: 320px;
+}
+
+.popconfirm-input {
+  width: 100%;
+  margin: 0.5rem 0;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: $border-radius-sm;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+
+  &::placeholder {
+    color: var(--text-muted);
+  }
+
+  &:focus {
+    border-color: var(--primary);
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
+  }
+}
+
+// ----------------------------------------
+// Popconfirm Trigger States
+// ----------------------------------------
+.popconfirm-trigger {
+  display: inline-block;
+}
+
+.popconfirm-trigger-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/scss/components/_popover.scss

@@ -0,0 +1,298 @@
+// ========================================
+// ZenKit - Popover
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Popover Variables
+// ----------------------------------------
+.popover {
+  --popover-zindex: #{$z-tooltip};
+  --popover-max-width: 276px;
+  --popover-font-size: var(--text-sm);
+  --popover-bg: var(--bg-card);
+  --popover-border-width: #{$border-width};
+  --popover-border-color: var(--border);
+  --popover-border-radius: var(--radius-lg);
+  --popover-inner-border-radius: calc(var(--radius-lg) - #{$border-width});
+  --popover-box-shadow: #{$shadow-lg};
+  --popover-header-font-size: var(--text-base);
+  --popover-header-bg: var(--bg-muted);
+  --popover-header-color: var(--text);
+  --popover-header-padding-x: 1rem;
+  --popover-header-padding-y: 0.5rem;
+  --popover-body-color: var(--text);
+  --popover-body-padding-x: 1rem;
+  --popover-body-padding-y: 1rem;
+  --popover-arrow-width: 1rem;
+  --popover-arrow-height: 0.5rem;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--popover-zindex);
+  display: block;
+  max-width: var(--popover-max-width);
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-normal;
+  text-align: left;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  white-space: normal;
+  word-spacing: normal;
+  line-break: auto;
+  font-size: var(--popover-font-size);
+  word-wrap: break-word;
+  background-color: var(--popover-bg);
+  background-clip: padding-box;
+  border: var(--popover-border-width) solid var(--popover-border-color);
+  border-radius: var(--popover-border-radius);
+  box-shadow: var(--popover-box-shadow);
+
+  &.show {
+    opacity: 1;
+  }
+}
+
+// ----------------------------------------
+// Popover Arrow
+// ----------------------------------------
+.popover-arrow {
+  position: absolute;
+  display: block;
+  width: var(--popover-arrow-width);
+  height: var(--popover-arrow-height);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    content: "";
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0;
+  }
+}
+
+// ----------------------------------------
+// Popover Positions
+// ----------------------------------------
+// Top
+.popover-top,
+.popover[data-popper-placement^="top"] {
+  > .popover-arrow {
+    bottom: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
+
+    &::before {
+      bottom: 0;
+      border-width: var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0;
+      border-top-color: var(--popover-border-color);
+    }
+
+    &::after {
+      bottom: var(--popover-border-width);
+      border-width: var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0;
+      border-top-color: var(--popover-bg);
+    }
+  }
+}
+
+// Bottom
+.popover-bottom,
+.popover[data-popper-placement^="bottom"] {
+  > .popover-arrow {
+    top: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
+
+    &::before {
+      top: 0;
+      border-width: 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height);
+      border-bottom-color: var(--popover-border-color);
+    }
+
+    &::after {
+      top: var(--popover-border-width);
+      border-width: 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height);
+      border-bottom-color: var(--popover-bg);
+    }
+  }
+
+  // Special header style for bottom popover
+  .popover-header::before {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: var(--popover-arrow-width);
+    margin-left: calc(-0.5 * var(--popover-arrow-width));
+    content: "";
+    border-bottom: var(--popover-border-width) solid var(--popover-header-bg);
+  }
+}
+
+// Start (Left)
+.popover-start,
+.popover[data-popper-placement^="left"] {
+  > .popover-arrow {
+    right: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
+    width: var(--popover-arrow-height);
+    height: var(--popover-arrow-width);
+
+    &::before {
+      right: 0;
+      border-width: calc(var(--popover-arrow-width) * 0.5) 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height);
+      border-left-color: var(--popover-border-color);
+    }
+
+    &::after {
+      right: var(--popover-border-width);
+      border-width: calc(var(--popover-arrow-width) * 0.5) 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height);
+      border-left-color: var(--popover-bg);
+    }
+  }
+}
+
+// End (Right)
+.popover-end,
+.popover[data-popper-placement^="right"] {
+  > .popover-arrow {
+    left: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width));
+    width: var(--popover-arrow-height);
+    height: var(--popover-arrow-width);
+
+    &::before {
+      left: 0;
+      border-width: calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0;
+      border-right-color: var(--popover-border-color);
+    }
+
+    &::after {
+      left: var(--popover-border-width);
+      border-width: calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0;
+      border-right-color: var(--popover-bg);
+    }
+  }
+}
+
+// ----------------------------------------
+// Popover Header
+// ----------------------------------------
+.popover-header {
+  padding: var(--popover-header-padding-y) var(--popover-header-padding-x);
+  margin-bottom: 0;
+  font-size: var(--popover-header-font-size);
+  font-weight: $font-weight-semibold;
+  color: var(--popover-header-color);
+  background-color: var(--popover-header-bg);
+  border-bottom: var(--popover-border-width) solid var(--popover-border-color);
+  border-top-left-radius: var(--popover-inner-border-radius);
+  border-top-right-radius: var(--popover-inner-border-radius);
+
+  &:empty {
+    display: none;
+  }
+}
+
+// ----------------------------------------
+// Popover Body
+// ----------------------------------------
+.popover-body {
+  padding: var(--popover-body-padding-y) var(--popover-body-padding-x);
+  color: var(--popover-body-color);
+}
+
+// ----------------------------------------
+// Popover Fade Animation
+// ----------------------------------------
+.popover.fade {
+  opacity: 0;
+  transition: opacity $transition-fast linear;
+}
+
+.popover.fade.show {
+  opacity: 1;
+}
+
+// ----------------------------------------
+// Popover Variants
+// ----------------------------------------
+.popover-primary {
+  --popover-bg: var(--primary);
+  --popover-border-color: var(--primary);
+  --popover-header-bg: #{darken($primary, 5%)};
+  --popover-header-color: var(--white);
+  --popover-body-color: var(--white);
+}
+
+.popover-secondary {
+  --popover-bg: var(--gray-600);
+  --popover-border-color: var(--gray-600);
+  --popover-header-bg: var(--gray-700);
+  --popover-header-color: var(--white);
+  --popover-body-color: var(--white);
+}
+
+.popover-success {
+  --popover-bg: var(--success);
+  --popover-border-color: var(--success);
+  --popover-header-bg: #{darken($success, 5%)};
+  --popover-header-color: var(--white);
+  --popover-body-color: var(--white);
+}
+
+.popover-danger {
+  --popover-bg: var(--danger);
+  --popover-border-color: var(--danger);
+  --popover-header-bg: #{darken($danger, 5%)};
+  --popover-header-color: var(--white);
+  --popover-body-color: var(--white);
+}
+
+.popover-warning {
+  --popover-bg: var(--warning);
+  --popover-border-color: var(--warning);
+  --popover-header-bg: #{darken($warning, 5%)};
+  --popover-header-color: var(--gray-900);
+  --popover-body-color: var(--gray-900);
+}
+
+.popover-info {
+  --popover-bg: var(--info);
+  --popover-border-color: var(--info);
+  --popover-header-bg: #{darken($info, 5%)};
+  --popover-header-color: var(--white);
+  --popover-body-color: var(--white);
+}
+
+.popover-dark {
+  --popover-bg: var(--gray-800);
+  --popover-border-color: var(--gray-700);
+  --popover-header-bg: var(--gray-900);
+  --popover-header-color: var(--gray-100);
+  --popover-body-color: var(--gray-300);
+}
+
+// ----------------------------------------
+// Popover Sizes
+// ----------------------------------------
+.popover-sm {
+  --popover-max-width: 200px;
+  --popover-header-padding-x: 0.75rem;
+  --popover-header-padding-y: 0.375rem;
+  --popover-body-padding-x: 0.75rem;
+  --popover-body-padding-y: 0.75rem;
+  --popover-font-size: var(--text-xs);
+}
+
+.popover-lg {
+  --popover-max-width: 400px;
+  --popover-header-padding-x: 1.25rem;
+  --popover-header-padding-y: 0.75rem;
+  --popover-body-padding-x: 1.25rem;
+  --popover-body-padding-y: 1.25rem;
+}