@dodlhuat/basix 1.2.0 → 1.2.2

package/css/placeholder.scss

@@ -1,33 +1,33 @@
-@use "properties";
-@use "parameters" as *;
-
-.placeholder {
-  display: inline-block;
-  cursor: wait;
-  min-height: calc($spacing * 0.65);
-  margin-right: calc($spacing / 2);
-  border-radius: $border-radius;
-  background: linear-gradient(
-    90deg,
-    var(--divider) 25%,
-    var(--secondary-background) 50%,
-    var(--divider) 75%
-  );
-  background-size: 200% 100%;
-  animation: placeholder-shimmer 1.5s ease-in-out infinite;
-
-  @for $i from 1 through 12 {
-    &.w-#{$i} {
-      width: calc(100% / (12 / $i));
-    }
-  }
-}
-
-@keyframes placeholder-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+.placeholder {
+  display: inline-block;
+  cursor: wait;
+  min-height: calc($spacing * 0.65);
+  margin-right: calc($spacing / 2);
+  border-radius: $border-radius;
+  background: linear-gradient(
+    90deg,
+    var(--divider) 25%,
+    var(--secondary-background) 50%,
+    var(--divider) 75%
+  );
+  background-size: 200% 100%;
+  animation: placeholder-shimmer 1.5s ease-in-out infinite;
+
+  @for $i from 1 through 12 {
+    &.w-#{$i} {
+      width: calc(100% / (12 / $i));
+    }
+  }
+}
+
+@keyframes placeholder-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

package/css/popover.scss

@@ -0,0 +1,206 @@
+@use "properties";
+@use "parameters" as *;
+
+$arrow: 6px;
+
+.popover {
+  position: fixed;
+  z-index: 900;
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: calc($border-radius * 2.5);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.03),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05),
+    0 12px 24px -4px rgba(0, 0, 0, 0.12);
+  min-width: 160px;
+  max-width: 320px;
+  opacity: 0;
+  pointer-events: none;
+
+  // Entry: offset from the trigger side + subtle scale
+  &[data-placement="top"]    { transform-origin: bottom center; transform: translateY(6px)  scale(0.95); }
+  &[data-placement="bottom"] { transform-origin: top center;    transform: translateY(-6px) scale(0.95); }
+  &[data-placement="left"]   { transform-origin: right center;  transform: translateX(6px)  scale(0.95); }
+  &[data-placement="right"]  { transform-origin: left center;   transform: translateX(-6px) scale(0.95); }
+
+  // Shift transform-origin to the anchor corner for aligned popovers
+  &[data-placement="bottom"][data-align="start"] { transform-origin: top left; }
+  &[data-placement="bottom"][data-align="end"]   { transform-origin: top right; }
+  &[data-placement="top"][data-align="start"]    { transform-origin: bottom left; }
+  &[data-placement="top"][data-align="end"]      { transform-origin: bottom right; }
+
+  transition:
+    opacity 0.18s ease,
+    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &.is-open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none !important;
+  }
+
+  // ── Arrows ─────────────────────────────────────────────────────────────────
+  // Two layers: ::before = border colour (1px larger), ::after = background fill
+  &[data-arrow="true"] {
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    // bottom placement → arrow ▲ at top of popover
+    &[data-placement="bottom"] {
+      &::before {
+        top: -($arrow + 1px);
+        left: var(--popover-arrow-offset, 50%);
+        transform: translateX(-50%);
+        border: ($arrow + 1px) solid transparent;
+        border-top-width: 0;
+        border-bottom-color: var(--divider);
+      }
+      &::after {
+        top: -$arrow;
+        left: var(--popover-arrow-offset, 50%);
+        transform: translateX(-50%);
+        border: $arrow solid transparent;
+        border-top-width: 0;
+        border-bottom-color: var(--background);
+      }
+    }
+
+    // top placement → arrow ▼ at bottom of popover
+    &[data-placement="top"] {
+      &::before {
+        bottom: -($arrow + 1px);
+        left: var(--popover-arrow-offset, 50%);
+        transform: translateX(-50%);
+        border: ($arrow + 1px) solid transparent;
+        border-bottom-width: 0;
+        border-top-color: var(--divider);
+      }
+      &::after {
+        bottom: -$arrow;
+        left: var(--popover-arrow-offset, 50%);
+        transform: translateX(-50%);
+        border: $arrow solid transparent;
+        border-bottom-width: 0;
+        border-top-color: var(--background);
+      }
+    }
+
+    // right placement → arrow ◁ at left of popover
+    &[data-placement="right"] {
+      &::before {
+        left: -($arrow + 1px);
+        top: var(--popover-arrow-offset, 50%);
+        transform: translateY(-50%);
+        border: ($arrow + 1px) solid transparent;
+        border-left-width: 0;
+        border-right-color: var(--divider);
+      }
+      &::after {
+        left: -$arrow;
+        top: var(--popover-arrow-offset, 50%);
+        transform: translateY(-50%);
+        border: $arrow solid transparent;
+        border-left-width: 0;
+        border-right-color: var(--background);
+      }
+    }
+
+    // left placement → arrow ▶ at right of popover
+    &[data-placement="left"] {
+      &::before {
+        right: -($arrow + 1px);
+        top: var(--popover-arrow-offset, 50%);
+        transform: translateY(-50%);
+        border: ($arrow + 1px) solid transparent;
+        border-right-width: 0;
+        border-left-color: var(--divider);
+      }
+      &::after {
+        right: -$arrow;
+        top: var(--popover-arrow-offset, 50%);
+        transform: translateY(-50%);
+        border: $arrow solid transparent;
+        border-right-width: 0;
+        border-left-color: var(--background);
+      }
+    }
+  }
+}
+
+// ── Content regions ──────────────────────────────────────────────────────────
+
+.popover-header {
+  padding: calc($spacing * 0.65) $spacing;
+  border-bottom: 1px solid var(--divider);
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--primary-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc($spacing * 0.5);
+  border-radius: calc($border-radius * 2.5) calc($border-radius * 2.5) 0 0;
+}
+
+.popover-body {
+  padding: calc($spacing * 0.75) $spacing;
+  color: var(--primary-text);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.popover-footer {
+  padding: calc($spacing * 0.65) $spacing;
+  border-top: 1px solid var(--divider);
+  display: flex;
+  justify-content: flex-end;
+  gap: calc($spacing * 0.5);
+  border-radius: 0 0 calc($border-radius * 2.5) calc($border-radius * 2.5);
+}
+
+// ── Action list (menu-style content) ─────────────────────────────────────────
+
+.popover-menu {
+  padding: calc($spacing * 0.375) 0;
+
+  .popover-menu-item {
+    display: flex;
+    align-items: center;
+    gap: calc($spacing * 0.6);
+    padding: calc($spacing * 0.45) $spacing;
+    font-size: 0.875rem;
+    color: var(--primary-text);
+    cursor: pointer;
+    transition: background 0.12s ease, color 0.12s ease;
+    user-select: none;
+
+    &:hover { background: var(--hover); }
+
+    &.is-destructive {
+      color: var(--error);
+      &:hover { background: color-mix(in srgb, var(--error) 8%, transparent); }
+    }
+  }
+
+  .popover-menu-divider {
+    height: 1px;
+    background: var(--divider);
+    margin: calc($spacing * 0.375) 0;
+  }
+
+  .popover-menu-label {
+    padding: calc($spacing * 0.3) $spacing calc($spacing * 0.2);
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--secondary-text);
+  }
+}

package/css/progress.scss

@@ -1,32 +1,76 @@
-@use "properties";
-@use "parameters" as *;
-
-.progress-bar {
-  background: var(--background);
-  border-radius: $border-radius;
-
-  .progress {
-    border-radius: $border-radius;
-    background: linear-gradient(
-                    45deg,
-                    rgba(255, 255, 255, 0.25) 25%,
-                    rgba(255, 255, 255, 0.15) 25%,
-                    rgba(255, 255, 255, 0.15) 50%,
-                    rgba(255, 255, 255, 0.25) 50%,
-                    rgba(255, 255, 255, 0.25) 75%,
-                    rgba(255, 255, 255, 0.15) 75%
-    ),
-    var(--accent-color);
-    background-size: 40px 40px;
-    animation: stripes 2.5s linear infinite;
-  }
-}
-
-@keyframes stripes {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 40px 0;
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+// ── Progress bar ──────────────────────────────────────────────────────────────
+
+.progress {
+  width: 100%;
+  height: 8px;
+  background: var(--secondary-background);
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: $border-radius;
+  background: var(--primary-text);
+  transition: width 0.3s ease;
+  min-width: 0;
+
+  // ── Color variants ────────────────────────────────────────────────────────
+  &.accent  { background: var(--accent-color); }
+  &.success { background: var(--success); }
+  &.warning { background: var(--warning); }
+  &.error   { background: var(--error); }
+
+  // ── Indeterminate ─────────────────────────────────────────────────────────
+  &.animated {
+    width: 40% !important;
+    background: var(--accent-color);
+    animation: progress-indeterminate 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes progress-indeterminate {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+
+// ── Skeleton ──────────────────────────────────────────────────────────────────
+
+@keyframes skeleton-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+%skeleton-base {
+  background: linear-gradient(
+    90deg,
+    var(--secondary-background) 25%,
+    var(--divider)              50%,
+    var(--secondary-background) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: $border-radius;
+  display: block;
+}
+
+.skeleton {
+  @extend %skeleton-base;
+}
+
+.skeleton-text {
+  @extend %skeleton-base;
+  height: 0.85em;
+  width: 100%;
+}
+
+.skeleton-avatar {
+  @extend %skeleton-base;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}

package/css/properties.scss

@@ -1,37 +1,52 @@
-:root {
-  --primary-text: #1E1F24;
-  --secondary-text: #62636C;
-  --divider: #D8D9E0;
-  --accent-text: #3D63DD;
-  --error: #D64545;
-  --warning: #C28A00;
-  --success: #2E8B57;
-  --secondary-background: #E7E8EC;
-  --background: #F9F9FB;
-  --accent-color: #3D63DD;
-  --accent-color-lighten: #87A5EF;
-  --accent-color-text: #D8D9E0;
-  --disabled: #D8D9E0;
-  --primary-dark: #1A1B1F;
-  --primary-light: #F0F1F3;
-  --hover: rgba(0, 0, 0, 0.04);
-}
-
-[data-theme="dark"] {
-  --primary-text: #EEEEF0;
-  --secondary-text: #B2B3BD;
-  --divider: #393A40;
-  --accent-text: #0E496D;
-  --error: #FF6B6B;
-  --warning: #F7B500;
-  --success: #5CC689;
-  --background: #111113;
-  --secondary-background: #19191B;
-  --accent-color: #1B7BB4;
-  --accent-color-lighten: #175982;
-  --accent-color-text: #B2B3BD;
-  --disabled: #303136;
-  --primary-dark: #0C0C0E;
-  --primary-light: #1E1F23;
-  --hover: rgba(255, 255, 255, 0.05);
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --error-tint: color-mix(in srgb, #D64545 12%, transparent);
+  --warning: #C28A00;
+  --warning-tint: color-mix(in srgb, #C28A00 12%, transparent);
+  --success: #2E8B57;
+  --success-tint: color-mix(in srgb, #2E8B57 12%, transparent);
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --primary-bg: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-tint: color-mix(in srgb, #3D63DD 12%, transparent);
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+  --primary-dark: #1A1B1F;
+  --primary-light: #F0F1F3;
+  --hover: rgba(0, 0, 0, 0.04);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.4rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+}
+
+[data-theme="dark"] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --error-tint: color-mix(in srgb, #FF6B6B 12%, transparent);
+  --warning: #F7B500;
+  --warning-tint: color-mix(in srgb, #F7B500 12%, transparent);
+  --success: #5CC689;
+  --success-tint: color-mix(in srgb, #5CC689 12%, transparent);
+  --background: #111113;
+  --primary-bg: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-tint: color-mix(in srgb, #1B7BB4 12%, transparent);
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+  --primary-dark: #0C0C0E;
+  --primary-light: #1E1F23;
+  --hover: rgba(255, 255, 255, 0.05);
 }