@ship-ui/core 0.13.2

package/styles/components/ship-dialog.component.scss

@@ -0,0 +1,119 @@
+@use '../helpers.scss' as *;
+
+$shipDialog: true !default;
+
+@if $shipDialog == true {
+  dialog[shDialog] {
+    --dialog-p: #{p2r(16)};
+    --dialog-g: #{p2r(8)};
+    --dialog-bg: var(--base-1);
+
+    border: 1px solid var(--base-4);
+    background: transparent;
+    border-radius: var(--shape-2);
+    box-shadow: var(--box-shadow-40);
+    color: var(--base-8);
+    font: var(--paragraph-30);
+    padding: 0;
+    margin: auto;
+    z-index: 0;
+
+    &.type-b {
+      background: var(--base-2);
+      padding: p2r(8);
+      outline: 1px solid var(--base-4);
+      outline-offset: -1px;
+      overflow: hidden;
+
+      &::backdrop {
+        background: rgb(from var(--base-1) r g b / 30%);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+      }
+
+      .content {
+        border: 1px solid rgb(from var(--base-4) r g b / 70%);
+      }
+    }
+
+    .content {
+      position: relative;
+      border-radius: var(--shape-2);
+      background-color: var(--dialog-bg);
+      z-index: 2;
+      max-width: initial;
+      max-height: calc(96vh - #{p2r(16)});
+      position: relative;
+      overflow: auto;
+    }
+
+    .closeable-overlay {
+      position: fixed;
+      inset: 0;
+      opacity: 0;
+      z-index: 1;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .dialog-content {
+      position: relative;
+      z-index: 2;
+    }
+
+    .dialog-backdrop {
+      position: fixed;
+      inset: 0;
+      opacity: 0;
+      z-index: 1;
+    }
+
+    [header],
+    [content],
+    [footer] {
+      width: 100%;
+    }
+
+    [header] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--dialog-p);
+      gap: var(--dialog-g);
+
+      &.sticky {
+        background-color: var(--dialog-bg);
+        border-bottom: 1px solid var(--base-4);
+        box-shadow: var(--box-shadow-35);
+        position: sticky;
+        top: 0;
+      }
+    }
+
+    [content] {
+      padding: 0 var(--dialog-p);
+
+      &:not(:has(~ [footer])) {
+        padding-bottom: var(--dialog-p);
+      }
+    }
+
+    [footer] {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: var(--dialog-p);
+      gap: var(--dialog-g);
+
+      &.sticky {
+        background-color: var(--dialog-bg);
+        border-top: 1px solid var(--base-4);
+        box-shadow: var(--box-shadow-35);
+        position: sticky;
+        bottom: 0;
+      }
+    }
+  }
+}

package/styles/components/ship-divider.component.scss

@@ -0,0 +1,27 @@
+@use '../helpers.scss' as *;
+
+$shipDivider: true !default;
+
+@if $shipDivider == true {
+  sh-divider {
+    --divider-c: var(--base-4);
+    --divider-h: #{p2r(1)};
+
+    display: flex;
+    gap: p2r(8);
+    align-items: center;
+    text-align: center;
+
+    &:empty {
+      gap: 0;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      background: var(--divider-c);
+      height: var(--divider-h);
+      flex: 1 0;
+    }
+  }
+}

package/styles/components/ship-file-upload.component.scss

@@ -0,0 +1,47 @@
+@use '../helpers.scss' as *;
+
+$shipFileUpload: true !default;
+
+@if $shipFileUpload == true {
+  sh-file-upload {
+    --fu-bg-active: rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: p2r(12);
+    position: relative;
+    width: 100%;
+
+    sh-list {
+      border-radius: var(--shape-3);
+      background-color: var(--base-2);
+    }
+
+    .files-text,
+    .placeholder {
+      color: var(--base-8);
+      font: var(--paragraph-30B);
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      inset: 0;
+      cursor: pointer;
+      z-index: 100;
+    }
+
+    .bg-overlay {
+      opacity: 0;
+      position: absolute;
+      inset: p2r(1);
+      background-color: var(--fu-bg-active);
+      transition: opacity 125ms linear;
+      z-index: 0;
+      border-radius: var(--ff-s);
+
+      &.files-over {
+        opacity: 1;
+      }
+    }
+  }
+}

package/styles/components/ship-form-field.component.scss

@@ -0,0 +1,334 @@
+@use '../helpers.scss' as *;
+
+$shipFormField: true !default;
+$shipDatepicker: true !default;
+$shipFormFieldShadow: false !default;
+
+%smallFormField {
+  --ff-space: #{p2r(7 10)};
+  --ff-input-space: #{p2r(6 10)};
+  --ff-f: var(--paragraph-40B);
+
+  line-height: p2r(16);
+
+  .prefix,
+  .suffix {
+    line-height: p2r(16);
+
+    > sh-icon {
+      font-size: p2r(16);
+    }
+  }
+}
+
+@if $shipFormField == true {
+  sh-form-field-popover,
+  sh-form-field {
+    --ff-s: var(--shape-2);
+    --ff-bc: var(--base-4);
+    --ff-prefix-bg: var(--base-2);
+    --ff-suffix-bg: transparent;
+    --ff-ic: var(--base-8);
+    --ff-bg: var(--base-1);
+    --ff-f: var(--paragraph-30B);
+    --ff-spinner-size: #{p2r(20)};
+    --ff-spinner-thickness: #{p2r(2)};
+    --ff-space: #{p2r(9 12)};
+    --ff-input-space: #{p2r(10 12)};
+    --ff-mw: auto;
+
+    @if $shipFormFieldShadow != false {
+      --ff-bs: var(--box-shadow-10);
+    } @else {
+      --ff-bs: none;
+    }
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    width: 100%;
+
+    &[read-only],
+    &[read-only='true'],
+    &[readonly='true'],
+    &[readonly],
+    &.readonly,
+    &[disabled],
+    &[disabled='true'],
+    &.disabled,
+    &:has(input[disabled]),
+    &:has(textarea[disabled]),
+    &:has(textarea[disabled='true']),
+    &:has(input[disabled='true']) {
+      pointer-events: none;
+      user-select: none;
+      opacity: 0.5;
+    }
+
+    &.small {
+      @extend %smallFormField;
+    }
+
+    &.auto-width {
+      width: initial;
+
+      .input-wrap,
+      input {
+        width: initial;
+      }
+    }
+
+    &.center {
+      .input-wrap input[type='number'],
+      .input-wrap input {
+        text-align: center;
+      }
+    }
+
+    label {
+      display: flex;
+      align-items: center;
+      padding-bottom: p2r(4);
+      gap: p2r(4);
+
+      sh-icon {
+        font-size: p2r(16);
+      }
+    }
+
+    .suffix,
+    .prefix {
+      display: none;
+      align-items: center;
+      gap: p2r(4);
+      padding: var(--ff-space);
+      transition: background-color 125ms linear;
+      background-color: var(--ff-prefix-bg);
+      line-height: p2r(20);
+
+      &:not(:empty) {
+        display: flex;
+      }
+    }
+
+    .suffix {
+      background-color: var(--ff-suffix-bg);
+
+      &:has([textsuffix]) {
+        padding-left: 0;
+      }
+    }
+
+    &:has(input.ng-touched.ng-invalid) {
+      --ff-ic: var(--error-8);
+      --ff-bc: var(--error-8);
+      --ff-prefix-bg: var(--error-2);
+    }
+
+    &.autosize {
+      width: min-content;
+
+      .input-wrap {
+        height: auto;
+
+        textarea,
+        input {
+          field-sizing: content;
+        }
+      }
+    }
+
+    .input-wrap {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--ff-bc);
+      border-radius: var(--ff-s);
+      background: var(--ff-bg);
+      box-shadow: var(--ff-bs);
+      overflow: hidden;
+      transition: border-color 125ms linear;
+      min-width: var(--ff-mw);
+      width: 100%;
+
+      sh-popover,
+      .input {
+        flex: 1 0;
+        margin: var(--ff-space);
+      }
+
+      textarea {
+        resize: none;
+        margin: p2r(8 0);
+        color: var(--base-8);
+        field-sizing: content;
+      }
+
+      &:has(textarea) {
+        height: auto;
+        min-width: 100%;
+        max-width: 100%;
+      }
+
+      sh-icon {
+        color: var(--ff-ic);
+        transition: color 125ms linear;
+
+        &.primary {
+          --ff-ic: var(--primary-8);
+        }
+
+        &.accent {
+          --ff-ic: var(--accent-8);
+        }
+
+        &.warn {
+          --ff-ic: var(--warn-8);
+        }
+
+        &.error {
+          --ff-ic: var(--error-8);
+        }
+
+        &.success {
+          --ff-ic: var(--success-8);
+        }
+      }
+
+      sh-chip sh-icon {
+        color: var(--chip-ic);
+      }
+
+      sh-spinner {
+        --spinner-size: var(--ff-spinner-size);
+        --spinner-thickness: var(--ff-spinner-thickness);
+      }
+
+      textarea,
+      input {
+        appearance: none;
+        border: 0;
+        padding: 0;
+        background: transparent;
+        font: var(--paragraph-30B);
+        flex: 1 0;
+        color: var(--base-8);
+        margin: var(--ff-input-space);
+        width: 100%;
+
+        &::placeholder {
+          color: var(--base-6);
+        }
+
+        &:focus {
+          outline: none;
+        }
+
+        &[type='number'] {
+          appearance: textfield;
+          text-align: right;
+
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            display: none;
+          }
+
+          &:has(+ .suffix:not(:empty)) {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .helpers {
+      height: p2r(20);
+      display: flex;
+      align-items: center;
+      gap: p2r(4);
+      padding-top: p2r(4);
+      width: 100%;
+
+      [hint] {
+        color: var(--base-9);
+
+        &[suffix] {
+          text-align: right;
+          width: 100%;
+        }
+      }
+
+      &:has(.error-wrap:not(:empty)) .hint {
+        display: none;
+      }
+    }
+
+    // &:not(:has(input.ng-touched.ng-invalid)) {
+    //   &:has(.hint:empty) .helpers {
+    //     height: 0;
+    //     padding-top: 0;
+    //   }
+    // }
+
+    &:has(.error-wrap:empty + .hint:empty) .helpers {
+      height: 0;
+      padding-top: 0;
+    }
+
+    &:has(input.ng-touched.ng-invalid) .helpers .hint {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .error-wrap {
+      color: var(--error-8);
+      opacity: 1;
+      transition: opacity 125ms linear;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+    }
+
+    .hint {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      color: var(--base-8);
+      opacity: 1;
+      transition:
+        visibility 125ms linear,
+        opacity 125ms linear;
+      visibility: visible;
+
+      &:empty {
+        opacity: 0;
+      }
+    }
+
+    &.error {
+      --ff-ic: var(--error-8);
+    }
+
+    &.warning {
+      --ff-ic: var(--warn-8);
+    }
+
+    &.success {
+      --ff-ic: var(--success-8);
+    }
+  }
+}
+
+@if $shipDatepicker == true {
+  sh-daterange-input,
+  sh-datepicker-input {
+    &.small {
+      sh-form-field-popover,
+      sh-form-field {
+        @extend %smallFormField;
+      }
+    }
+  }
+}

package/styles/components/ship-icon.component.scss

@@ -0,0 +1,54 @@
+@use '../helpers.scss' as *;
+
+$shipIcon: true !default;
+
+@if $shipIcon == true {
+  sh-icon {
+    --icon-c: inherit;
+
+    font-size: p2r(20);
+    line-height: 1em;
+    width: 1em;
+    height: 1em;
+    min-width: 1em;
+    min-height: 1em;
+    max-width: 1em;
+    max-height: 1em;
+    text-align: left;
+    overflow: hidden;
+    display: inline-block;
+    color: var(--icon-c);
+
+    &.primary {
+      --icon-c: var(--primary-8);
+    }
+
+    &.accent {
+      --icon-c: var(--accent-8);
+    }
+
+    &.warn {
+      --icon-c: var(--warn-8);
+    }
+
+    &.error {
+      --icon-c: var(--error-8);
+    }
+
+    &.success {
+      --icon-c: var(--success-8);
+    }
+
+    &.large {
+      font-size: p2r(32);
+    }
+
+    &.small {
+      font-size: p2r(16);
+    }
+
+    &.inherit {
+      font-size: inherit;
+    }
+  }
+}

package/styles/components/ship-list.component.scss

@@ -0,0 +1,148 @@
+@use '../helpers.scss' as *;
+
+$shipList: true !default;
+
+@if $shipList == true {
+  sh-list {
+    --list-s: var(--shape-2);
+    --list-active-bg: var(--base-1);
+    --list-color: var(--base-9);
+    --list-active-bs: none;
+    --list-p: #{p2r(20 16)};
+    --list-item-p: #{p2r(8 12)};
+    --list-item-gap: #{p2r(8)};
+
+    width: 100%;
+    padding: var(--list-p);
+    gap: p2r(8);
+    display: flex;
+    flex-direction: column;
+
+    &.base-1 {
+      --list-active-bg: var(--base-1);
+      --list-active-bs: var(--box-shadow-20);
+    }
+
+    &:empty {
+      padding: 0;
+    }
+
+    > [title] {
+      color: var(--base-8);
+      margin: 0 0.75rem;
+      font: var(--paragraph-30);
+      line-height: p2r(24);
+    }
+
+    > [action],
+    > [item] {
+      border-radius: var(--list-s);
+      padding: var(--list-item-p);
+      font: var(--paragraph-30B);
+      color: var(--list-color);
+      display: flex;
+      align-items: center;
+      gap: var(--list-item-gap);
+      width: 100%;
+      user-select: none;
+      appearance: none;
+      border: 0;
+      text-align: left;
+      text-wrap: balance;
+      background-color: transparent;
+      text-decoration: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      [suffix] {
+        margin-left: auto;
+        color: var(--base-8);
+      }
+    }
+
+    :has(input[type='checkbox']),
+    :has(input[type='radio']),
+    > [action] {
+      cursor: pointer;
+    }
+
+    > [item]:has(input[type='checkbox']:checked),
+    > [action]:has(input[type='checkbox']:checked),
+    > [item]:has(input[type='radio']:checked),
+    > [action]:has(input[type='radio']:checked),
+    > [action].active,
+    > [action].selected {
+      --list-color: var(--base-12);
+
+      background-color: var(--list-active-bg);
+      box-shadow: var(--list-active-bs);
+    }
+
+    &.primary {
+      > [item]:has(input[type='checkbox']:checked),
+      > [action]:has(input[type='checkbox']:checked),
+      > [item]:has(input[type='radio']:checked),
+      > [action]:has(input[type='radio']:checked),
+      > [action].active,
+      > [action].selected {
+        sh-icon:first-child {
+          color: var(--primary-8);
+        }
+      }
+    }
+
+    &.accent {
+      > [item]:has(input[type='checkbox']:checked),
+      > [action]:has(input[type='checkbox']:checked),
+      > [item]:has(input[type='radio']:checked),
+      > [action]:has(input[type='radio']:checked),
+      > [action].active,
+      > [action].selected {
+        sh-icon:first-child {
+          color: var(--accent-8);
+        }
+      }
+    }
+
+    &.warn {
+      > [item]:has(input[type='checkbox']:checked),
+      > [action]:has(input[type='checkbox']:checked),
+      > [item]:has(input[type='radio']:checked),
+      > [action]:has(input[type='radio']:checked),
+      > [action].active,
+      > [action].selected {
+        sh-icon:first-child {
+          color: var(--warn-8);
+        }
+      }
+    }
+
+    &.error {
+      > [item]:has(input[type='checkbox']:checked),
+      > [action]:has(input[type='checkbox']:checked),
+      > [item]:has(input[type='radio']:checked),
+      > [action]:has(input[type='radio']:checked),
+      > [action].active,
+      > [action].selected {
+        sh-icon:first-child {
+          color: var(--error-8);
+        }
+      }
+    }
+
+    &.success {
+      > [item]:has(input[type='checkbox']:checked),
+      > [action]:has(input[type='checkbox']:checked),
+      > [item]:has(input[type='radio']:checked),
+      > [action]:has(input[type='radio']:checked),
+      > [action].active,
+      > [action].selected {
+        sh-icon:first-child {
+          color: var(--success-8);
+        }
+      }
+    }
+  }
+}