@datability/8ui 1.2.3 → 1.4.0

package/dist/components/table/index.scss

@@ -0,0 +1,174 @@
+// --- TableSort ---
+.DBui-tableSort {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #bababa;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &[data-size="sm"] {
+    width: var(--iconSm);
+    height: var(--iconSm);
+  }
+
+  &[data-size="md"] {
+    width: var(--iconLg);
+    height: var(--iconLg);
+  }
+
+  &[data-size="lg"] {
+    width: var(--icon2xl);
+    height: var(--icon2xl);
+  }
+}
+
+// --- Shared Checkbox ---
+.DBui-tableCheckbox {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.DBui-tableCheckboxNative {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.DBui-tableCheckboxBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--iconMd);
+  height: var(--iconMd);
+  border-radius: var(--componentRadiusSm);
+  border: var(--componentBorderXs) solid var(--componentColorDefaultBorderUtilitiesComponentBorder);
+  background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  box-sizing: border-box;
+  transition: all 0.15s ease;
+
+  &[data-checked="true"],
+  &[data-indeterminate="true"] {
+    background-color: var(--brandColorSecondary);
+    border-color: var(--brandColorSecondary);
+  }
+}
+
+.DBui-tableCheckboxIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--componentColorDefaultBorderNeutralPureWhite);
+
+  svg {
+    display: block;
+    width: var(--icon2xs);
+    height: var(--icon2xs);
+  }
+}
+
+// --- TableHead ---
+.DBui-tableHead {
+  display: flex;
+  align-items: center;
+  gap: var(--componentSpacingLg);
+  padding: var(--componentSpacingMd) var(--componentSpacingXl);
+  background-color: var(--componentColorDefaultBackgroundDisabledDefault);
+  overflow: clip;
+  min-height: 40px;
+
+  .DBui-tableHeadContent {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .DBui-tableHeadText {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+    white-space: nowrap;
+    line-height: 0;
+  }
+
+  .DBui-tableHeadSort {
+    flex-shrink: 0;
+    cursor: pointer;
+    display: inline-flex;
+  }
+}
+
+// --- TableCell ---
+.DBui-tableCell {
+  display: flex;
+  align-items: center;
+  gap: var(--componentSpacingLg);
+  padding: 0 var(--componentSpacingXl);
+  background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  border-bottom: var(--componentBorderXs) solid var(--componentColorDefaultBorderNeutralSecondary);
+  overflow: clip;
+}
+
+// --- Table Skeleton ---
+.DBui-tableSkeletonHead {
+  display: flex;
+  align-items: center;
+  padding: 20px 16px;
+  background-color: #e8e8e8;
+}
+
+.DBui-tableSkeletonCell {
+  display: flex;
+  align-items: center;
+  padding: 20px 16px;
+  background-color: #f4f4f4;
+  border-top: 1px solid #c6c6c6;
+}
+
+.DBui-tableSkeletonBar {
+  height: 8px;
+  background-color: #c6c6c6;
+  border-radius: 0;
+  animation: DBui-skeletonPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes DBui-skeletonPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+// --- Table ---
+.DBui-table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--componentSpacingLg);
+  width: 100%;
+
+  .DBui-tableGrid {
+    display: grid;
+    width: 100%;
+  }
+
+  .DBui-tableFooter {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+}

package/dist/components/tabs/index.scss

@@ -0,0 +1,63 @@
+.DBui-tabs {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+
+  .DBui-tabsItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--componentSpacingLg);
+    border-bottom: var(--componentBorderXs) solid;
+    cursor: pointer;
+    background: none;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    box-sizing: border-box;
+
+    // --- Default state ---
+    &[data-state="default"] {
+      background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+      border-bottom-color: var(--borderNeutralSecondary);
+
+      &:hover {
+        background-color: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+        border-bottom-color: var(--borderNeutralTertiary);
+      }
+    }
+
+    &[data-state="default"] .DBui-tabsItemContent {
+      color: var(--componentColorDefaultLabelNeutralSecondary);
+    }
+
+    &[data-state="default"]:hover .DBui-tabsItemContent {
+      color: var(--componentColorDefaultLabelSecondaryOnDefault);
+    }
+
+    // --- Active state ---
+    &[data-state="active"] {
+      background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+      border-bottom-color: var(--brandColorSecondary);
+    }
+
+    &[data-state="active"] .DBui-tabsItemContent {
+      color: var(--componentColorDefaultLabelSecondaryDefault);
+    }
+  }
+
+  .DBui-tabsItemContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--componentSpacingMd);
+  }
+
+  .DBui-tabsItemIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconMd);
+    height: var(--componentIconMd);
+  }
+}

package/dist/components/tag/index.scss

@@ -0,0 +1,89 @@
+.DBui-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--componentSpacingSm);
+  padding: var(--componentSpacingSm) var(--componentSpacingLg);
+  border-radius: 100px;
+  border: none;
+  box-sizing: border-box;
+
+  .DBui-tagIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconSm);
+    height: var(--componentIconSm);
+  }
+
+  // --- Default (filled) variant ---
+  &[data-variant="default"] {
+    &[data-color="primary"] {
+      background-color: var(--componentColorDefaultBackgroundPrimaryDefault);
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+
+    &[data-color="secondary"] {
+      background-color: var(--componentColorDefaultBackgroundSecondaryDefault);
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+
+    &[data-color="tertiary"] {
+      background-color: var(--componentColorDefaultBackgroundTertiaryDefault);
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+
+    &[data-color="default"] {
+      background-color: var(--componentColorDefaultBackgroundDefaultPureBlack);
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+
+    &[data-color="neutral"] {
+      background-color: var(--textInputColorDefaultBackgroundReadOnly);
+      color: var(--componentColorDefaultLabelDefaultPureBlack);
+    }
+
+    &[data-color="special"] {
+      background-color: var(--componentColorDefaultBackgroundUtilitiesTagBackground);
+      color: var(--componentColorDefaultLabelSecondaryDefault);
+    }
+  }
+
+  // --- Outline variant ---
+  &[data-variant="outline"] {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+
+    &[data-color="primary"] {
+      border-color: var(--componentColorDefaultBorderPrimaryDefault);
+      color: var(--componentColorDefaultLabelPrimaryDefault);
+    }
+
+    &[data-color="secondary"] {
+      border-color: var(--componentColorDefaultBorderSecondaryDefault);
+      color: var(--componentColorDefaultLabelSecondaryDefault);
+    }
+
+    &[data-color="tertiary"] {
+      border-color: var(--componentColorDefaultBorderTertiaryDefault);
+      color: var(--componentColorDefaultLabelTertiaryDefault);
+    }
+
+    &[data-color="default"] {
+      border-color: var(--componentColorDefaultBorderDefaultPureBlack);
+      color: var(--componentColorDefaultLabelDefaultPureBlack);
+    }
+
+    &[data-color="neutral"] {
+      background-color: var(--componentColorDefaultBackgroundUtilitiesButtonBackground);
+      border-color: var(--componentColorDefaultBorderUtilitiesComponentBorder);
+      color: var(--componentColorDefaultLabelDefaultPureBlack);
+    }
+
+    &[data-color="special"] {
+      border-color: var(--componentColorDefaultBorderTertiaryDefault);
+      color: var(--componentColorDefaultLabelTertiaryDefault);
+    }
+  }
+}

package/dist/components/toast/index.scss

@@ -0,0 +1,267 @@
+.DBui-toaster {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--componentSpacingLg);
+  pointer-events: none;
+  padding: var(--componentSpacing2xl);
+  box-sizing: border-box;
+
+  &[data-position="top-right"] {
+    top: 0;
+    right: 0;
+    align-items: flex-end;
+  }
+
+  &[data-position="top-left"] {
+    top: 0;
+    left: 0;
+    align-items: flex-start;
+  }
+
+  &[data-position="top-center"] {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+  }
+
+  &[data-position="bottom-right"] {
+    bottom: 0;
+    right: 0;
+    align-items: flex-end;
+  }
+
+  &[data-position="bottom-left"] {
+    bottom: 0;
+    left: 0;
+    align-items: flex-start;
+  }
+
+  &[data-position="bottom-center"] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+  }
+}
+
+@keyframes DBui-toast-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes DBui-toast-slide-out-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes DBui-toast-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes DBui-toast-slide-out-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes DBui-toast-slide-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes DBui-toast-slide-out-up {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes DBui-toast-slide-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes DBui-toast-slide-out-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.DBui-toast {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--componentSpacingLg);
+  align-items: flex-end;
+  justify-content: center;
+  padding: var(--componentSpacingXl) var(--componentSpacing2xl);
+  border-radius: var(--componentRadiusLg);
+  border: var(--componentBorderXs) solid;
+  box-shadow: var(--dropShadow200);
+  min-width: 320px;
+  max-width: 420px;
+  box-sizing: border-box;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+
+  // Slide direction by position
+  &[data-anim-dir="right"] {
+    animation-name: DBui-toast-slide-in-right;
+
+    &[data-removing="true"] {
+      animation-name: DBui-toast-slide-out-right;
+    }
+  }
+
+  &[data-anim-dir="left"] {
+    animation-name: DBui-toast-slide-in-left;
+
+    &[data-removing="true"] {
+      animation-name: DBui-toast-slide-out-left;
+    }
+  }
+
+  &[data-anim-dir="down"] {
+    animation-name: DBui-toast-slide-in-down;
+
+    &[data-removing="true"] {
+      animation-name: DBui-toast-slide-out-up;
+    }
+  }
+
+  &[data-anim-dir="up"] {
+    animation-name: DBui-toast-slide-in-up;
+
+    &[data-removing="true"] {
+      animation-name: DBui-toast-slide-out-down;
+    }
+  }
+
+  // Variants
+  &[data-type="default"] {
+    background-color: var(--componentColorDefaultBackgroundNeutralOnDefault);
+    border-color: var(--componentColorDefaultBorderDefaultTertiary);
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+
+    .DBui-toastIcon { color: var(--componentColorDefaultIconDefaultPureBlack); }
+  }
+
+  &[data-type="danger"] {
+    background-color: var(--componentColorDefaultBackgroundDangerOnTertiary);
+    border-color: var(--componentColorDefaultBorderDangerDefault);
+    color: var(--componentColorDefaultLabelDangerDefault);
+
+    .DBui-toastIcon { color: var(--componentColorDefaultIconDangerDefault); }
+  }
+
+  &[data-type="success"] {
+    background-color: var(--componentColorDefaultBackgroundSuccessOnTertiary);
+    border-color: var(--componentColorDefaultBorderSuccessOnDefault);
+    color: var(--componentColorDefaultLabelSuccessDefault);
+
+    .DBui-toastIcon { color: var(--componentColorDefaultIconSuccessDefault); }
+  }
+
+  &[data-type="warning"] {
+    background-color: var(--componentColorDefaultBackgroundWarningOnTertiary);
+    border-color: var(--componentColorDefaultBorderWarningOnDefault);
+    color: var(--componentColorDefaultBorderWarningOnDefault);
+
+    .DBui-toastIcon { color: var(--componentColorDefaultIconWarningOnDefault); }
+  }
+
+  &[data-type="info"] {
+    background-color: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+    border-color: var(--componentColorDefaultBorderSecondaryDefault);
+    color: var(--componentColorDefaultLabelSecondaryDefault);
+
+    .DBui-toastIcon { color: var(--componentColorDefaultIconSecondaryDefault); }
+  }
+
+  .DBui-toastContent {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+    gap: var(--componentSpacingLg);
+  }
+
+  .DBui-toastMain {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--componentSpacingLg);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .DBui-toastIcon {
+    display: flex;
+    align-items: center;
+    padding-top: var(--componentSpacingSm);
+    flex-shrink: 0;
+    width: var(--componentIcon3xl);
+    height: var(--componentIcon3xl);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .DBui-toastText {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+
+}