@datability/8ui 1.2.2 → 1.3.0

package/dist/components/input/phone-input/index.scss

@@ -0,0 +1,31 @@
+@import '../extend.scss';
+
+.DBui-phoneInput {
+  @include input-field-container;
+
+  .DBui-phoneInputActions {
+    display: flex;
+    align-items: center;
+    gap: var(--textInputGapSm);
+    flex-shrink: 0;
+  }
+
+  .DBui-phoneInputIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--input-icon-size);
+    height: var(--input-icon-size);
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .DBui-phoneInputIconText {
+    color: var(--textInputColorDefaultLabelIconText);
+  }
+}

package/dist/components/input/radio-button/index.scss

@@ -0,0 +1,175 @@
+@import '../extend.scss';
+
+.DBui-radioList {
+  display: flex;
+  width: 100%;
+  gap: var(--spacingGap2xl);
+
+  &[data-vertical='true'] {
+    flex-direction: column;
+    gap: var(--spacingGapLg);
+  }
+
+  .DBui-radioItem {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+
+    &[data-disabled='true'] {
+      cursor: not-allowed;
+    }
+  }
+
+  .DBui-radioControl {
+    display: flex;
+    align-items: center;
+    padding-top: var(--spacingPaddingXs);
+    padding-bottom: var(--spacingPaddingXs);
+    flex-shrink: 0;
+  }
+
+  .DBui-radioNative {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  .DBui-radioCircle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radiusCircular);
+    border: var(--textInputBorderXs) solid var(--textInputColorDefaultBorderDefault);
+    background-color: var(--textInputColorDefaultBackgroundDefault);
+    transition: all 0.15s ease;
+    box-sizing: border-box;
+
+    &[data-checked='true'] {
+      border-color: var(--brandColorSecondary);
+    }
+
+    &[data-invalid='true']:not([data-checked='true']) {
+      border-color: var(--textInputColorDefaultBorderError);
+    }
+
+    &[data-disabled='true'] {
+      &[data-checked='true'] {
+        border-color: var(--utilitiesDisabledBackground);
+      }
+
+      &:not([data-checked='true']) {
+        background-color: var(--surfaceDisabledDefault);
+      }
+
+      .DBui-radioDot {
+        background-color: var(--utilitiesDisabledBackground);
+      }
+    }
+  }
+
+  .DBui-radioNative:focus-visible + .DBui-radioCircle {
+    border-color: var(--textInputColorDefaultBorderFocus);
+  }
+
+  .DBui-radioDot {
+    border-radius: var(--radiusCircular);
+    background-color: var(--brandColorSecondary);
+  }
+
+  .DBui-radioContent {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .DBui-radioLabelRow {
+    display: flex;
+    align-items: center;
+    gap: var(--spacingGapSm);
+  }
+
+  .DBui-radioLabel {
+    color: var(--textInputColorDefaultLabelTextTextFilled);
+  }
+
+  .DBui-radioImage {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .DBui-radioDescription {
+    color: var(--textDefaultTertiary);
+  }
+
+  // Size: sm (circle 12px, dot 6px)
+  &[data-size='sm'] {
+    .DBui-radioCircle {
+      width: var(--iconSm);
+      height: var(--iconSm);
+    }
+
+    // NOTE: no 6px token exists in tokens.css
+    .DBui-radioDot {
+      width: 6px;
+      height: 6px;
+    }
+
+    .DBui-radioItem {
+      gap: var(--spacingGapMd);
+    }
+  }
+
+  // Size: md (circle 14px, dot 8px)
+  &[data-size='md'] {
+    .DBui-radioCircle {
+      width: var(--iconMd);
+      height: var(--iconMd);
+    }
+
+    .DBui-radioDot {
+      width: 8px;
+      height: 8px;
+    }
+
+    .DBui-radioItem {
+      gap: var(--spacingGapMd);
+    }
+  }
+
+  // Size: lg (circle 16px, dot 10px)
+  &[data-size='lg'] {
+    .DBui-radioCircle {
+      width: var(--iconLg);
+      height: var(--iconLg);
+    }
+
+    .DBui-radioDot {
+      width: 10px;
+      height: 10px;
+    }
+
+    .DBui-radioItem {
+      gap: var(--spacingGapMd);
+    }
+  }
+
+  // Size: xl (circle 20px, dot 11.667px)
+  &[data-size='xl'] {
+    .DBui-radioCircle {
+      width: var(--iconXl);
+      height: var(--iconXl);
+    }
+
+    .DBui-radioDot {
+      width: 11.667px;
+      height: 11.667px;
+    }
+
+    .DBui-radioItem {
+      gap: var(--spacingGapLg);
+    }
+  }
+}

package/dist/components/input/select/index.scss

@@ -0,0 +1,68 @@
+@import '../extend.scss';
+
+.DBui-select {
+  position: relative;
+  display: inline-flex;
+}
+
+.DBui-selectTrigger {
+  @include input-field-container;
+  cursor: pointer;
+  user-select: none;
+
+  &[data-disabled="true"] {
+    pointer-events: none;
+  }
+
+  &[data-readonly="true"] {
+    pointer-events: none;
+  }
+
+  &[data-open="true"] {
+    box-shadow: inset 0 0 0 var(--textInputBorderXs) var(--textInputColorDefaultBorderFocus);
+  }
+
+  .DBui-selectValue {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .DBui-selectPlaceholder {
+    color: var(--textInputColorDefaultLabelPlaceholder);
+  }
+
+  .DBui-selectIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--input-icon-size);
+    height: var(--input-icon-size);
+    transition: transform 0.2s;
+
+    &[data-open="true"] {
+      transform: rotate(180deg);
+    }
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.DBui-selectDropdown {
+  width: max-content;
+  min-width: 100%;
+}
+
+.DBui-selectLoading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--componentSpacingMd) var(--componentSpacingXl);
+}

package/dist/components/input/text-input/index.scss

@@ -0,0 +1,31 @@
+@import '../extend.scss';
+
+.DBui-textInput {
+  @include input-field-container;
+
+  .DBui-textInputActions {
+    display: flex;
+    align-items: center;
+    gap: var(--textInputGapSm);
+    flex-shrink: 0;
+  }
+
+  .DBui-textInputIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--input-icon-size);
+    height: var(--input-icon-size);
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .DBui-textInputIconText {
+    color: var(--textInputColorDefaultLabelIconText);
+  }
+}

package/dist/components/input/textarea/index.scss

@@ -0,0 +1,9 @@
+@import '../extend.scss';
+
+.DBui-textarea {
+  @include input-field-container;
+
+  > textarea {
+    resize: vertical;
+  }
+}

package/dist/components/input/toggle/index.scss

@@ -0,0 +1,97 @@
+.DBui-toggle {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .DBui-toggleNative {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  .DBui-toggleTrack {
+    position: relative;
+    border-radius: var(--radiusCircular);
+    background-color: var(--componentColorDefaultBackgroundNeutralTertiary);
+    transition: background-color 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+    flex-shrink: 0;
+
+    &[data-checked='true'] {
+      background-color: var(--componentColorDefaultBackgroundSecondaryDefault);
+    }
+  }
+
+  .DBui-toggleThumb {
+    position: absolute;
+    border-radius: var(--radiusCircular);
+    background-color: var(--componentColorDefaultBackgroundNeutralPureWhite);
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+  }
+
+  // Size: sm (track 28x16, thumb 12, padding 2, travel 12)
+  &[data-size='sm'] {
+    .DBui-toggleTrack {
+      width: 28px;
+      height: 16px;
+    }
+
+    .DBui-toggleThumb {
+      width: 12px;
+      height: 12px;
+      top: 2px;
+      left: 2px;
+    }
+
+    .DBui-toggleTrack[data-checked='true'] .DBui-toggleThumb {
+      transform: translateX(12px);
+    }
+  }
+
+  // Size: md (track 44x24, thumb 20, padding 2, travel 20)
+  &[data-size='md'] {
+    .DBui-toggleTrack {
+      width: 44px;
+      height: 24px;
+    }
+
+    .DBui-toggleThumb {
+      width: 20px;
+      height: 20px;
+      top: 2px;
+      left: 2px;
+    }
+
+    .DBui-toggleTrack[data-checked='true'] .DBui-toggleThumb {
+      transform: translateX(20px);
+    }
+  }
+
+  // Size: lg (track 76x36, thumb 28, padding 4, travel 40)
+  &[data-size='lg'] {
+    .DBui-toggleTrack {
+      width: 76px;
+      height: 36px;
+    }
+
+    .DBui-toggleThumb {
+      width: 28px;
+      height: 28px;
+      top: 4px;
+      left: 4px;
+    }
+
+    .DBui-toggleTrack[data-checked='true'] .DBui-toggleThumb {
+      transform: translateX(40px);
+    }
+  }
+}

package/dist/components/loading/index.scss

@@ -0,0 +1,30 @@
+@keyframes DBui-loading-spin {
+  from {
+    transform: rotate(-90deg);
+  }
+  to {
+    transform: rotate(270deg);
+  }
+}
+
+.DBui-loading {
+  animation: DBui-loading-spin 1s linear infinite;
+
+  &[data-thickness="sm"] {
+    width: 40px;
+    height: 40px;
+  }
+
+  &[data-thickness="lg"] {
+    width: 44px;
+    height: 44px;
+  }
+
+  .DBui-loadingTrack {
+    stroke: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+  }
+
+  .DBui-loadingIndicator {
+    stroke: var(--componentColorDefaultBackgroundSecondaryDefault);
+  }
+}

package/dist/components/menu/index.scss

@@ -1,30 +1,182 @@
-.DBui-wrapperMenu {
-  display: inline-flex;
+.DBui-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background: var(--componentColorDefaultBackgroundNeutralPureWhite);
+  border: var(--componentBorderXs) solid var(--componentColorDefaultBorderNeutralOnDefault);
+  border-radius: var(--componentRadiusMd);
+  box-shadow: var(--dropShadow400);
+  padding: var(--spacingPaddingSm) 0;
+  overflow: clip;
+  min-width: 120px;
+}
+
+.DBui-menuItem {
+  display: flex;
   align-items: center;
+  justify-content: space-between;
+  padding: var(--spacingPaddingSm) var(--spacingGapXl);
+  background: var(--componentColorDefaultBackgroundNeutralPureWhite);
   cursor: pointer;
-}
 
-.DBui-wrapperMenuItem {
-  position: fixed;
-  background: #fff;
-  color: #000;
-  border-radius: 0.3em;
-  min-width: 140px;
-  max-width: 320px;
-  max-height: 45%;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  transition: opacity 0.1s ease;
-  z-index: var(--z-index-menu);
-
-  &[data-hidden='true'] {
-    opacity: 0;
-    visibility: hidden;
+  &[data-size="lg"],
+  &[data-size="xl"] {
+    padding-top: var(--spacingPaddingMd);
+    padding-bottom: var(--spacingPaddingMd);
+  }
+
+  &:focus-visible,
+  &[data-active="true"] {
+    background: var(--componentColorDefaultBackgroundQuaternaryOnDefault);
+    outline: none;
+  }
+
+  &[data-disabled="true"] {
+    opacity: 0.4;
     pointer-events: none;
   }
 
-  &[data-is-in-modal='true'] {
-    z-index: var(--z-index-menu-in-modal);
+  &[data-has-description="true"] {
+    align-items: flex-start;
+  }
+
+  .DBui-menuItemLeft {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--componentSpacingSm);
+
+    &[data-size="md"],
+    &[data-size="lg"],
+    &[data-size="xl"] {
+      gap: var(--componentSpacingMd);
+    }
+  }
+
+  .DBui-menuItemIconWrap {
+    display: flex;
+    align-items: center;
+    padding: var(--componentSpacingSm) 0;
+    flex-shrink: 0;
+  }
+
+  .DBui-menuItemIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--iconXs);
+    height: var(--iconXs);
+    color: var(--componentColorDefaultIconDefaultPureBlack);
+
+    &[data-size="md"] {
+      width: var(--iconSm);
+      height: var(--iconSm);
+    }
+
+    &[data-size="lg"] {
+      width: var(--iconMd);
+      height: var(--iconMd);
+    }
+
+    &[data-size="xl"] {
+      width: var(--iconLg);
+      height: var(--iconLg);
+    }
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .DBui-menuItemLabel {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .DBui-menuItemDescription {
+    color: var(--componentColorDefaultLabelDefaultQuaternary);
+  }
+
+  .DBui-menuItemRight {
+    display: flex;
+    align-items: center;
+    gap: var(--componentSpacingMd);
+  }
+
+  .DBui-menuItemChevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--iconSm);
+    height: var(--iconSm);
+    color: var(--componentColorDefaultIconDefaultPureBlack);
+
+    &[data-size="lg"] {
+      width: var(--iconMd);
+      height: var(--iconMd);
+    }
+
+    &[data-size="xl"] {
+      width: var(--iconLg);
+      height: var(--iconLg);
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.DBui-menuHeader {
+  display: flex;
+  align-items: center;
+  padding: var(--componentSpacingMd) var(--componentSpacingXl);
+  background: var(--componentColorDefaultBackgroundNeutralPureWhite);
+}
+
+.DBui-menuButton {
+  display: inline-flex;
+
+  &[data-full-width="true"] {
+    display: flex;
+    width: 100%;
+
+    .DBui-menuButtonTrigger {
+      width: 100%;
+    }
+  }
+
+  .DBui-menuButtonTrigger {
+    display: inline-flex;
+    cursor: pointer;
+  }
+}
+
+.DBui-menuButtonDropdown {
+  width: max-content;
+}
+
+.DBui-menuDivider {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  height: 10px;
+  overflow: clip;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 1px;
+    background: var(--componentColorDefaultBackgroundNeutralSecondary);
   }
 }