@datability/8ui 1.2.2 → 1.3.0

package/dist/components/tooltip/index.scss

@@ -0,0 +1,246 @@
+.DBui-tooltipAnchor {
+  display: inline-flex;
+}
+
+.DBui-tooltipPopover {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+
+  // =========================
+  // Anchor positioning (shared)
+  // =========================
+
+  // --- Top side ---
+  &[data-placement="top"],
+  &[data-placement="top-left"],
+  &[data-placement="top-right"] {
+    bottom: anchor(top);
+    margin-bottom: 6px;
+
+    .DBui-tooltipArrow {
+      bottom: -4px;
+      border-right-width: var(--componentBorderXs);
+      border-right-style: solid;
+      border-bottom-width: var(--componentBorderXs);
+      border-bottom-style: solid;
+    }
+  }
+
+  &[data-placement="top"] {
+    justify-self: anchor-center;
+
+    .DBui-tooltipArrow {
+      left: calc(50% - 4px);
+    }
+  }
+
+  &[data-placement="top-left"] {
+    left: anchor(left);
+  }
+
+  &[data-placement="top-right"] {
+    right: anchor(right);
+  }
+
+  // --- Bottom side ---
+  &[data-placement="bottom"],
+  &[data-placement="bottom-left"],
+  &[data-placement="bottom-right"] {
+    top: anchor(bottom);
+    margin-top: 6px;
+
+    .DBui-tooltipArrow {
+      top: -4px;
+      border-left-width: var(--componentBorderXs);
+      border-left-style: solid;
+      border-top-width: var(--componentBorderXs);
+      border-top-style: solid;
+    }
+  }
+
+  &[data-placement="bottom"] {
+    justify-self: anchor-center;
+
+    .DBui-tooltipArrow {
+      left: calc(50% - 4px);
+    }
+  }
+
+  &[data-placement="bottom-left"] {
+    left: anchor(left);
+  }
+
+  &[data-placement="bottom-right"] {
+    right: anchor(right);
+  }
+
+  // --- Left side ---
+  &[data-placement="left"],
+  &[data-placement="left-top"],
+  &[data-placement="left-bottom"] {
+    right: anchor(left);
+    margin-right: 6px;
+
+    .DBui-tooltipArrow {
+      right: -4px;
+      border-top-width: var(--componentBorderXs);
+      border-top-style: solid;
+      border-right-width: var(--componentBorderXs);
+      border-right-style: solid;
+    }
+  }
+
+  &[data-placement="left"] {
+    align-self: anchor-center;
+
+    .DBui-tooltipArrow {
+      top: calc(50% - 4px);
+    }
+  }
+
+  &[data-placement="left-top"] {
+    top: anchor(top);
+  }
+
+  &[data-placement="left-bottom"] {
+    bottom: anchor(bottom);
+  }
+
+  // --- Right side ---
+  &[data-placement="right"],
+  &[data-placement="right-top"],
+  &[data-placement="right-bottom"] {
+    left: anchor(right);
+    margin-left: 6px;
+
+    .DBui-tooltipArrow {
+      left: -4px;
+      border-bottom-width: var(--componentBorderXs);
+      border-bottom-style: solid;
+      border-left-width: var(--componentBorderXs);
+      border-left-style: solid;
+    }
+  }
+
+  &[data-placement="right"] {
+    align-self: anchor-center;
+
+    .DBui-tooltipArrow {
+      top: calc(50% - 4px);
+    }
+  }
+
+  &[data-placement="right-top"] {
+    top: anchor(top);
+  }
+
+  &[data-placement="right-bottom"] {
+    bottom: anchor(bottom);
+  }
+
+  // =========================
+  // Size: Small
+  // =========================
+  &[data-size="sm"] {
+    .DBui-tooltipArrow {
+      border-color: var(--componentColorDefaultBorderNeutralSecondary);
+    }
+
+    .DBui-tooltipCard {
+      align-items: center;
+      background: var(--componentColorDefaultBackgroundNeutralPureWhite);
+      border: var(--componentBorderXs) solid var(--componentColorDefaultBorderNeutralSecondary);
+      border-radius: var(--componentRadiusMd);
+      box-shadow: var(--dropShadow400);
+      padding: var(--spacingPaddingMd) var(--spacingPaddingLg);
+      white-space: nowrap;
+    }
+
+    &[data-placement^="left"] .DBui-tooltipCard,
+    &[data-placement^="right"] .DBui-tooltipCard {
+      align-items: flex-start;
+    }
+
+    // Arrow alignment offsets
+    &[data-placement="top-left"] .DBui-tooltipArrow,
+    &[data-placement="bottom-left"] .DBui-tooltipArrow {
+      left: 12px;
+    }
+
+    &[data-placement="top-right"] .DBui-tooltipArrow,
+    &[data-placement="bottom-right"] .DBui-tooltipArrow {
+      right: 12px;
+    }
+
+    &[data-placement="left-top"] .DBui-tooltipArrow,
+    &[data-placement="right-top"] .DBui-tooltipArrow {
+      top: 8px;
+    }
+
+    &[data-placement="left-bottom"] .DBui-tooltipArrow,
+    &[data-placement="right-bottom"] .DBui-tooltipArrow {
+      bottom: 8px;
+    }
+  }
+
+  // =========================
+  // Size: Large
+  // =========================
+  &[data-size="lg"] {
+    pointer-events: auto;
+
+    .DBui-tooltipArrow {
+      border-color: var(--componentColorDefaultBorderUtilitiesComponentBorder);
+    }
+
+    .DBui-tooltipCard {
+      align-items: flex-start;
+      background: var(--componentColorDefaultBackgroundNeutralPureWhite);
+      border: var(--componentBorderXs) solid var(--componentColorDefaultBorderUtilitiesComponentBorder);
+      border-radius: 6px;
+      box-shadow: var(--dropShadow200);
+      padding: var(--componentSpacing4xl);
+      gap: var(--spacingGap2xl);
+      width: 240px;
+    }
+
+    // Arrow alignment offsets
+    &[data-placement="top-left"] .DBui-tooltipArrow,
+    &[data-placement="bottom-left"] .DBui-tooltipArrow {
+      left: 32px;
+    }
+
+    &[data-placement="top-right"] .DBui-tooltipArrow,
+    &[data-placement="bottom-right"] .DBui-tooltipArrow {
+      right: 24px;
+    }
+
+    &[data-placement="left-top"] .DBui-tooltipArrow,
+    &[data-placement="right-top"] .DBui-tooltipArrow {
+      top: 32px;
+    }
+
+    &[data-placement="left-bottom"] .DBui-tooltipArrow,
+    &[data-placement="right-bottom"] .DBui-tooltipArrow {
+      bottom: 32px;
+    }
+  }
+}
+
+.DBui-tooltipArrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  transform: rotate(45deg);
+  z-index: 0;
+}
+
+.DBui-tooltipCard {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  color: var(--componentColorDefaultLabelDefaultPureBlack);
+}

package/dist/components/tree-folder/index.scss

@@ -0,0 +1,63 @@
+.DBui-treeFolder {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  width: 100%;
+
+  .DBui-treeFolderRow {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+
+    &[data-dragging="true"] {
+      opacity: 0.4;
+    }
+  }
+
+  .DBui-treeFolderIndent {
+    flex-shrink: 0;
+    width: 20px;
+    height: 32px;
+    background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  }
+
+  .DBui-treeFolderRow > .DBui-treeFolderLeft,
+  .DBui-treeFolderRow > .DBui-treeFolderRight {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // --- Drop indicators ---
+  .DBui-treeFolderDrop-before {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: var(--componentColorDefaultBackgroundSecondaryDefault);
+      z-index: 1;
+    }
+  }
+
+  .DBui-treeFolderDrop-after {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: var(--componentColorDefaultBackgroundSecondaryDefault);
+      z-index: 1;
+    }
+  }
+
+  .DBui-treeFolderDrop-inside {
+    outline: 2px solid var(--componentColorDefaultBackgroundSecondaryDefault);
+    outline-offset: -2px;
+    border-radius: 2px;
+  }
+}

package/dist/components/tree-folder-left/index.scss

@@ -0,0 +1,81 @@
+.DBui-treeFolderLeft {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: clip;
+  padding: var(--componentSpacingLg);
+  background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--componentColorDefaultBackgroundDisabledOnDefault);
+  }
+
+  &[data-active="true"] {
+    background-color: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+  }
+
+  .DBui-treeFolderLeftContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .DBui-treeFolderLeftLeft {
+    display: flex;
+    align-items: center;
+    gap: var(--componentSpacingMd);
+  }
+
+  .DBui-treeFolderLeftArrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconSm);
+    height: var(--componentIconSm);
+    color: var(--componentColorDefaultIconDefaultTertiary);
+    flex-shrink: 0;
+  }
+
+  .DBui-treeFolderLeftIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconMd);
+    height: var(--componentIconMd);
+    color: #54aeff;
+    flex-shrink: 0;
+  }
+
+  .DBui-treeFolderLeftLabelGroup {
+    display: flex;
+    align-items: center;
+    gap: var(--componentSpacingSm);
+  }
+
+  .DBui-treeFolderLeftLabel {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: normal;
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+    white-space: nowrap;
+  }
+
+  .DBui-treeFolderLeftRight {
+    display: flex;
+    align-items: center;
+    gap: var(--componentSpacingMd);
+  }
+
+  .DBui-treeFolderLeftIconRight {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconMd);
+    height: var(--componentIconMd);
+    color: var(--componentColorDefaultIconDefaultTertiary);
+    flex-shrink: 0;
+  }
+}

package/dist/components/tree-folder-right/index.scss

@@ -0,0 +1,92 @@
+.DBui-treeFolderRight {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: clip;
+  padding: var(--componentSpacingLg);
+  background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--componentColorDefaultBackgroundDisabledOnDefault);
+  }
+
+  &[data-active="true"] {
+    background-color: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+  }
+
+  .DBui-treeFolderRightContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .DBui-treeFolderRightLeft {
+    display: flex;
+    align-items: center;
+    gap: var(--componentSpacingMd);
+  }
+
+  .DBui-treeFolderRightRight {
+    display: flex;
+    align-items: center;
+    gap: var(--componentSpacingMd);
+  }
+
+  .DBui-treeFolderRightDrag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: var(--componentColorDefaultBackgroundNeutralQuaternary);
+    cursor: grab;
+    flex-shrink: 0;
+  }
+
+  .DBui-treeFolderRightIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconMd);
+    height: var(--componentIconMd);
+    color: #54aeff;
+    flex-shrink: 0;
+  }
+
+  .DBui-treeFolderRightLabelGroup {
+    display: flex;
+    align-items: center;
+    gap: var(--componentSpacingSm);
+  }
+
+  .DBui-treeFolderRightLabel {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: normal;
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+    white-space: nowrap;
+  }
+
+  .DBui-treeFolderRightIconRight {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconMd);
+    height: var(--componentIconMd);
+    color: var(--componentColorDefaultIconDefaultTertiary);
+    flex-shrink: 0;
+  }
+
+  .DBui-treeFolderRightArrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--componentIconSm);
+    height: var(--componentIconSm);
+    color: var(--componentColorDefaultIconDefaultTertiary);
+    flex-shrink: 0;
+  }
+}

package/dist/components/upload-dragger/index.scss

@@ -0,0 +1,61 @@
+.DBui-uploadDragger {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+  width: 100%;
+
+  .DBui-uploadDraggerDropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    padding: 16px 0;
+    background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+    border: var(--componentBorderXs) solid var(--componentColorDefaultBorderUtilitiesComponentBorder);
+    border-radius: var(--componentRadiusMd);
+    overflow: clip;
+    cursor: pointer;
+
+    &[data-dragging="true"] {
+      border-color: var(--componentColorDefaultBorderSecondaryDefault);
+    }
+  }
+
+  .DBui-uploadDraggerIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    color: var(--componentColorDefaultBackgroundSecondaryDefault);
+  }
+
+  .DBui-uploadDraggerText {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    text-align: center;
+    width: 100%;
+    overflow: clip;
+  }
+
+  .DBui-uploadDraggerTitle {
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+  }
+
+  .DBui-uploadDraggerDescription {
+    color: var(--componentColorDefaultLabelDefaultOnQuaternary);
+  }
+
+  .DBui-uploadDraggerInput {
+    display: none;
+  }
+
+  .DBui-uploadDraggerFiles {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+}

package/dist/components/upload-list-item/index.scss

@@ -0,0 +1,115 @@
+.DBui-uploadListItem {
+  display: flex;
+  align-items: center;
+  overflow: clip;
+  box-sizing: border-box;
+
+  // --- File type ---
+  &[data-type="file"] {
+    gap: var(--textInputGapLg);
+    padding: var(--componentSpacingMd) var(--componentSpacingLg);
+    background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+
+    &:hover {
+      background-color: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+    }
+
+    &[data-error="true"] {
+      background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+    }
+  }
+
+  // --- Image type ---
+  &[data-type="image"] {
+    gap: var(--componentSpacingLg);
+    padding: var(--componentSpacingLg);
+    background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+    border: var(--componentBorderXs) solid var(--componentColorDefaultBorderUtilitiesComponentBorder);
+    border-radius: var(--componentRadiusMd);
+
+    &:hover {
+      background-color: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+    }
+
+    &[data-error="true"] {
+      border-color: var(--componentColorDefaultBorderDangerSecondary);
+      background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+    }
+  }
+
+  // --- Wrapper ---
+  .DBui-uploadListItemWrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  // --- File icon ---
+  .DBui-uploadListItemFileIcon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--componentColorDefaultLabelSecondaryDefault);
+  }
+
+  &[data-error="true"] .DBui-uploadListItemFileIcon {
+    color: var(--componentColorDefaultLabelDangerSecondary);
+  }
+
+  // --- Image thumbnail ---
+  .DBui-uploadListItemThumbnail {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: var(--componentRadiusMd);
+    object-fit: cover;
+  }
+
+  // --- Error image placeholder ---
+  .DBui-uploadListItemErrorIcon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    color: var(--componentColorDefaultIconDangerSecondary);
+  }
+
+  // --- Filename ---
+  .DBui-uploadListItemName {
+    flex: 1;
+    min-width: 0;
+    color: var(--componentColorDefaultLabelSecondaryDefault);
+  }
+
+  &[data-error="true"] .DBui-uploadListItemName {
+    color: var(--componentColorDefaultLabelDangerSecondary);
+  }
+
+  // --- Remove button ---
+  .DBui-uploadListItemRemove {
+    flex-shrink: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--componentColorDefaultIconDefaultPureBlack);
+  }
+
+  &[data-error="true"] .DBui-uploadListItemRemove {
+    display: flex;
+    color: var(--componentColorDefaultIconDangerSecondary);
+  }
+
+  &:hover .DBui-uploadListItemRemove {
+    display: flex;
+  }
+}