@datability/8ui 1.2.3 → 1.4.0

package/dist/components/chip/index.scss

@@ -1,32 +1,96 @@
 .DBui-chip {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  width: fit-content;
-  padding: 0.4em 0.5em;
-  border-radius: 0.3em;
-  border: 1px solid #03287E;
-  background-color: #618aea;
-  gap: 0.5em;
-
-  &[data-checked='true'] {
-    cursor: pointer;
-
-    &:hover {
-      opacity: 0.5;
+  border-radius: var(--componentRadiusMd);
+  border: var(--componentBorderXs) solid;
+  overflow: clip;
+  white-space: nowrap;
+  max-width: 100%;
+  font-weight: 500;
+  box-sizing: border-box;
+
+  // --- Colors ---
+  &[data-color="default"] {
+    background-color: var(--componentColorDefaultBackgroundUtilitiesButtonBackground);
+    border-color: var(--componentColorDefaultBorderUtilitiesComponentBorder);
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+  }
+
+  &[data-color="primary"] {
+    background-color: var(--componentColorDefaultBackgroundPrimaryDefault);
+    border-color: var(--componentColorDefaultBorderPrimaryDefault);
+    color: var(--componentColorDefaultLabelNeutralPureWhite);
+  }
+
+  &[data-color="secondary"] {
+    background-color: var(--componentColorDefaultBackgroundSecondaryDefault);
+    border-color: var(--componentColorDefaultBorderSecondaryDefault);
+    color: var(--componentColorDefaultLabelNeutralPureWhite);
+  }
+
+  &[data-color="tertiary"] {
+    background-color: var(--componentColorDefaultBackgroundTertiaryDefault);
+    border-color: var(--componentColorDefaultBorderTertiaryDefault);
+    color: var(--componentColorDefaultLabelNeutralPureWhite);
+  }
+
+  // --- Disabled ---
+  &[data-disabled="true"] {
+    background-color: var(--componentColorDefaultBackgroundUtilitiesButtonBackground);
+    border-color: var(--componentColorDefaultBorderUtilitiesComponentBorder);
+    color: var(--componentColorDefaultLabelDisabledDefault);
+    pointer-events: none;
+  }
+
+  // --- Sizes ---
+  &[data-size="sm"] {
+    padding-left: var(--componentSpacingLg);
+    font-family: var(--typographyFontFamilyPlain), sans-serif;
+    font-size: var(--baselineLabelMdFontSize);
+    line-height: var(--baselineLabelMdLineHeight);
+
+    &[data-has-remove="true"] {
+      padding-right: var(--componentSpacingMd);
+      gap: var(--componentSpacingMd);
+    }
+
+    &[data-has-remove="false"] {
+      padding-right: var(--componentSpacingLg);
     }
   }
 
-  .DBui-chipIcon {
-    width: 20px;
-    height: 20px;
+  &[data-size="md"] {
+    padding-left: var(--componentSpacingLg);
+    font-family: var(--typographyFontFamilyPlain), sans-serif;
+    font-size: var(--baselineLabelLgFontSize);
+    line-height: var(--baselineLabelLgLineHeight);
+
+    &[data-has-remove="true"] {
+      padding-right: var(--componentSpacingMd);
+      gap: var(--componentSpacingMd);
+    }
 
-    &[data-checked='true'] {
-      cursor: pointer;
-      
-      &:hover {
-        opacity: 0.5;
-      }
+    &[data-has-remove="false"] {
+      padding-right: var(--componentSpacingLg);
     }
   }
-}
 
+  &[data-size="lg"] {
+    padding-left: var(--componentSpacingLg);
+    padding-top: var(--componentSpacingSm);
+    padding-bottom: var(--componentSpacingSm);
+    font-family: var(--typographyFontFamilyPlain), sans-serif;
+    font-size: var(--baselineSubtitleFontSize);
+    line-height: var(--baselineSubtitleLineHeight);
+
+    &[data-has-remove="true"] {
+      padding-right: var(--componentSpacingMd);
+      gap: var(--componentSpacingMd);
+    }
+
+    &[data-has-remove="false"] {
+      padding-right: var(--componentSpacingLg);
+    }
+  }
+
+}

package/dist/components/counter-label/index.scss

@@ -0,0 +1,131 @@
+.DBui-counterLabel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  // Shape: circle
+  &[data-shape='circle'] {
+    border-radius: var(--radiusCircular);
+
+    &[data-size='sm'] {
+      width: var(--iconMd);
+      height: var(--iconMd);
+    }
+
+    &[data-size='md'] {
+      width: var(--iconLg);
+      height: var(--iconLg);
+    }
+
+    &[data-size='lg'] {
+      width: var(--iconXl);
+      height: var(--iconXl);
+    }
+
+    &[data-size='xl'] {
+      width: var(--icon2xl);
+      height: var(--icon2xl);
+    }
+  }
+
+  // Shape: ellipse
+  &[data-shape='ellipse'] {
+    padding: 0 var(--spacingGapMd);
+
+    &[data-size='sm'] {
+      min-width: var(--iconLg);
+      height: var(--iconMd);
+      border-radius: var(--radiusLg);
+    }
+
+    &[data-size='md'] {
+      min-width: var(--iconXl);
+      height: var(--iconLg);
+      border-radius: var(--radiusLg);
+    }
+
+    &[data-size='lg'] {
+      min-width: var(--icon2xl);
+      height: var(--iconXl);
+      border-radius: var(--radius2xl);
+    }
+
+    &[data-size='xl'] {
+      min-width: var(--icon3xl);
+      height: var(--icon2xl);
+      border-radius: var(--radius2xl);
+    }
+  }
+
+  // Type: background + text color
+  &[data-type='default'] {
+    background-color: var(--componentColorDefaultBackgroundNeutralOnDefault);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelDefaultPureBlack);
+    }
+  }
+
+  &[data-type='secondary'] {
+    background-color: var(--surfaceDisabledDefault);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelDefaultQuaternary);
+    }
+  }
+
+  &[data-type='brand-primary'] {
+    background-color: var(--componentColorDefaultBackgroundPrimaryDefault);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+  }
+
+  &[data-type='brand-secondary'] {
+    background-color: var(--brandColorSecondary);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+  }
+
+  &[data-type='brand-tertiary'] {
+    background-color: var(--componentColorDefaultBackgroundTertiaryDefault);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+  }
+
+  &[data-type='black'] {
+    background-color: var(--componentColorDefaultBackgroundDefaultPureBlack);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+  }
+
+  &[data-type='white'] {
+    background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelDefaultPureBlack);
+    }
+  }
+
+  &[data-type='red'] {
+    background-color: var(--componentColorDefaultBackgroundDangerDefault);
+
+    .DBui-counterLabelText {
+      color: var(--componentColorDefaultLabelNeutralPureWhite);
+    }
+  }
+}
+
+.DBui-counterLabelText {
+  text-align: center;
+}

package/dist/components/dialog-box/index.scss

@@ -0,0 +1,89 @@
+.DBui-dialogBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: DBui-dialog-fade-in 0.2s ease-out forwards;
+
+  &[data-removing="true"] {
+    animation: DBui-dialog-fade-out 0.2s ease-out forwards;
+  }
+}
+
+@keyframes DBui-dialog-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes DBui-dialog-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes DBui-dialog-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes DBui-dialog-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.DBui-dialogBox {
+  background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  border-radius: var(--radiusMd);
+  box-shadow: var(--dropShadow400);
+  padding: var(--componentSpacing2xl) var(--componentSpacing4xl);
+  display: flex;
+  flex-direction: column;
+  min-width: 320px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+  animation: DBui-dialog-scale-in 0.2s ease-out forwards;
+
+  &[data-removing="true"] {
+    animation: DBui-dialog-scale-out 0.2s ease-out forwards;
+  }
+
+  .DBui-dialogBoxContent {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex: 1;
+    gap: var(--componentSpacingLg);
+  }
+
+  .DBui-dialogBoxMain {
+    display: flex;
+    flex-direction: column;
+    gap: var(--componentSpacingLg);
+    flex: 1;
+    min-width: 0;
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+  }
+
+  .DBui-dialogBoxActions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--componentSpacingXl);
+    margin-top: var(--componentSpacing2xl);
+  }
+}

package/dist/components/empty/index.scss

@@ -0,0 +1,26 @@
+.DBui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  overflow: clip;
+
+  .DBui-emptyImage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .DBui-emptyDescription {
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  &[data-type="basic"] .DBui-emptyDescription {
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+  }
+
+  &[data-type="simple"] .DBui-emptyDescription {
+    color: var(--componentColorDefaultLabelNeutralQuaternary);
+  }
+}

package/dist/components/favorite/index.scss

@@ -0,0 +1,43 @@
+.DBui-favorite {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 500px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  box-sizing: border-box;
+  box-shadow:
+    0px 4px 4px -4px rgba(12, 12, 13, 0.05),
+    0px 16px 32px -4px rgba(12, 12, 13, 0.1);
+
+  &[data-variant="ghost"] {
+    background: transparent;
+  }
+
+  &[data-variant="contained"] {
+    background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  }
+
+  &[data-variant="contained"][data-liked="true"] {
+    border: var(--componentBorderXs) solid var(--componentColorDefaultIconNeutralSecondary);
+  }
+
+  .DBui-favoriteIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+
+  &[data-liked="false"] .DBui-favoriteIcon {
+    color: #c3c3c3;
+  }
+
+  &[data-liked="true"] .DBui-favoriteIcon {
+    color: var(--componentColorDefaultBackgroundDangerDefault);
+  }
+}

package/dist/components/file-uploader/index.scss

@@ -0,0 +1,137 @@
+.DBui-fileUploader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: clip;
+  border-radius: var(--componentRadiusMd);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &[data-size="sm"] {
+    width: 60px;
+    height: 60px;
+  }
+
+  &[data-size="md"] {
+    width: 80px;
+    height: 80px;
+  }
+
+  // --- Primary & Uploading states (with border) ---
+  &[data-status="primary"],
+  &[data-status="uploading"] {
+    border-style: dashed;
+    border-width: var(--componentBorderXs);
+
+    &[data-variant="default"] {
+      border-color: var(--componentColorDefaultBorderSecondaryDefault);
+    }
+
+    &[data-variant="neutral"] {
+      border-color: var(--componentColorDefaultBorderNeutralQuaternary);
+    }
+  }
+
+  // --- Uploaded state (no border) ---
+  &[data-status="uploaded"] {
+    border: none;
+    cursor: default;
+  }
+
+  .DBui-fileUploaderInner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &[data-size="sm"] .DBui-fileUploaderInner {
+    gap: var(--componentSpacingMd);
+  }
+
+  &[data-size="md"] .DBui-fileUploaderInner {
+    gap: var(--componentSpacingMd);
+  }
+
+  &[data-size="md"][data-status="uploading"] .DBui-fileUploaderInner {
+    gap: var(--componentSpacingLg);
+  }
+
+  // --- Icon ---
+  .DBui-fileUploaderIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &[data-variant="default"] .DBui-fileUploaderIcon {
+    color: var(--componentColorDefaultLabelSecondaryDefault);
+  }
+
+  &[data-variant="neutral"] .DBui-fileUploaderIcon {
+    color: var(--componentColorDefaultLabelDefaultQuaternary);
+  }
+
+  &[data-size="sm"] .DBui-fileUploaderIcon {
+    width: var(--componentIconLg);
+    height: var(--componentIconLg);
+  }
+
+  &[data-size="md"] .DBui-fileUploaderIcon {
+    width: var(--componentIconXl);
+    height: var(--componentIconXl);
+  }
+
+  // --- Label color ---
+  &[data-variant="default"][data-status="primary"] .DBui-fileUploaderLabel,
+  &[data-variant="default"][data-status="uploading"] .DBui-fileUploaderLabel {
+    color: var(--componentColorDefaultLabelSecondaryDefault);
+  }
+
+  &[data-variant="neutral"][data-status="primary"] .DBui-fileUploaderLabel {
+    color: var(--componentColorDefaultLabelDefaultQuaternary);
+  }
+
+  &[data-variant="neutral"][data-status="uploading"] .DBui-fileUploaderLabel {
+    color: var(--componentColorDefaultLabelDefaultPureBlack);
+  }
+
+  // --- Progress bar width ---
+  .DBui-fileUploaderProgress {
+    width: 50px;
+  }
+
+  &[data-size="md"] .DBui-fileUploaderProgress {
+    width: 66px;
+  }
+
+  // --- Uploaded image preview ---
+  .DBui-fileUploaderPreviewWrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .DBui-fileUploaderPreview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--componentRadiusMd);
+  }
+
+  .DBui-fileUploaderDelete {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    display: none;
+  }
+
+  .DBui-fileUploaderPreviewWrapper:hover .DBui-fileUploaderDelete {
+    display: inline-flex;
+  }
+
+  // --- Hidden file input ---
+  .DBui-fileUploaderInput {
+    display: none;
+  }
+}

package/dist/components/input/auto-complete/index.scss

@@ -0,0 +1,46 @@
+@import '../extend.scss';
+
+.DBui-autoComplete {
+  position: relative;
+  display: inline-flex;
+}
+
+.DBui-autoCompleteTrigger {
+  @include input-field-container;
+
+  .DBui-autoCompleteActions {
+    display: flex;
+    align-items: center;
+    gap: var(--textInputGapSm);
+    flex-shrink: 0;
+  }
+
+  .DBui-autoCompleteIconText {
+    color: var(--textInputColorDefaultLabelIconText);
+  }
+}
+
+.DBui-autoCompleteDropdown {
+  width: max-content;
+  min-width: 100%;
+}
+
+.DBui-autoCompleteEmpty {
+  display: flex;
+  align-items: center;
+  padding: var(--spacingPaddingSm) var(--spacingGapXl);
+  color: var(--componentColorDefaultLabelDefaultPureBlack);
+
+  &[data-size="lg"],
+  &[data-size="xl"] {
+    padding-top: var(--spacingPaddingMd);
+    padding-bottom: var(--spacingPaddingMd);
+  }
+}
+
+.DBui-autoCompleteLoading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--componentSpacingMd) var(--componentSpacingXl);
+}