@ship-ui/core 0.19.5 → 0.22.0

package/styles/components/ship-datepicker.scss

@@ -1,317 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipDatepicker: true !default;
-
-@if $shipDatepicker == true {
-  sh-daterange-input,
-  sh-datepicker-input {
-    sh-form-field-popover {
-      .input-wrap {
-        .input {
-          display: grid;
-          grid-template-columns: 1fr auto auto;
-          align-items: center;
-
-          &.active-start input:first-of-type {
-            color: var(--primary-8);
-          }
-          &.active-end input:last-of-type {
-            color: var(--primary-8);
-          }
-        }
-
-        [suffix] {
-          margin-right: p2r(12);
-        }
-      }
-
-      .masked-value {
-        font: var(--paragraph-30B);
-        color: var(--base-8);
-        display: flex;
-        gap: p2r(4);
-
-        &.active-start .start-val {
-          color: var(--primary-8);
-        }
-
-        &.active-end .end-val {
-          color: var(--primary-8);
-        }
-
-        + input + input,
-        + input {
-          opacity: 0;
-          height: 0;
-          width: 0;
-          margin: 0;
-        }
-      }
-
-      [suffix] + [suffix].default-indicator {
-        display: none;
-      }
-    }
-
-    sh-datepicker {
-      z-index: 10000;
-      position: relative;
-      --dp-width: #{p2r(240)};
-    }
-  }
-
-  sh-daterange-input {
-    sh-popover .popover-content {
-      --dp-width: #{p2r(300)};
-      min-width: var(--dp-width);
-    }
-
-    @for $i from 1 through 3 {
-      sh-form-field-popover.columns-#{$i} {
-        $gap: 1rem;
-
-        sh-popover .popover-content {
-          --dp-width: calc(#{p2r($i * 300)} + #{(($i - 1) * $gap)});
-        }
-      }
-    }
-  }
-
-  sh-datepicker-input.sharp sh-datepicker,
-  sh-daterange-input.sharp sh-datepicker,
-  sh-datepicker.sharp {
-    --dp-sel-s: var(--shape-1);
-    --dp-ar: 1/0.8;
-    --dp-day-g: #{p2r(8 0)};
-  }
-
-  sh-datepicker {
-    --dp-sel-bg: var(--base-8);
-    --dp-sel-bw: 0;
-    --dp-sel-bc: transparent;
-    --dp-sel-s: 50%;
-    --dp-sel-c: #fff;
-    --dp-day-c: var(--base-8);
-    --dp-day-g: #{p2r(4 0)};
-    --dp-day-f: var(--paragraph-20);
-    --dp-width: #{p2r(300)};
-    --dp-ar: 1/1;
-
-    width: 100%;
-    padding: p2r(8);
-    max-width: var(--dp-width);
-    display: flex;
-    flex-direction: column;
-
-    &.disabled {
-      opacity: 0.5;
-      pointer-events: none;
-      user-select: none;
-      cursor: initial;
-    }
-
-    @for $i from 1 through 12 {
-      &.columns-#{$i} {
-        $gap: 1rem;
-
-        --dp-width: calc(#{p2r($i * 300)} + #{(($i - 1) * $gap)});
-      }
-    }
-
-    &.as-range {
-      section {
-        .days > div,
-        .days > button {
-          &.sel {
-            background: var(--dp-sel-bg);
-            opacity: 0.5;
-            border-radius: 0;
-          }
-
-          &.month-start,
-          &.week-start,
-          &.first {
-            border-top-left-radius: var(--dp-sel-s);
-            border-bottom-left-radius: var(--dp-sel-s);
-          }
-          &.month-end,
-          &.week-end,
-          &.last {
-            border-top-right-radius: var(--dp-sel-s);
-            border-bottom-right-radius: var(--dp-sel-s);
-          }
-
-          &.first,
-          &.last {
-            opacity: 1;
-          }
-        }
-      }
-
-      .month .days > div.out-of-scope,
-      .month .days > button.out-of-scope {
-        opacity: 0;
-        pointer-events: none;
-      }
-    }
-
-    header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: p2r(4 0);
-      gap: p2r(0);
-
-      .title {
-        font: var(--paragraph-20);
-      }
-
-      button {
-        appearance: none;
-        background-color: transparent;
-        border: 0;
-        cursor: pointer;
-        height: p2r(32);
-        color: var(--base-8);
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-
-    .months-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 1rem;
-    }
-
-    .month {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      grid-template-rows: 1fr 6fr;
-      gap: var(--dp-day-g);
-      align-items: flex-start;
-
-      .days,
-      .weekdays {
-        display: grid;
-        grid-column: 1 / -1;
-        gap: var(--dp-day-g);
-        grid-template-columns: subgrid;
-        position: relative;
-
-        > .days {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: grid;
-          grid-template-columns: repeat(7, 1fr);
-          grid-template-rows: repeat(7, 1fr);
-          gap: var(--dp-day-g);
-          z-index: 0;
-        }
-
-        > div,
-        > button {
-          appearance: none;
-          background: transparent;
-          border: none;
-          padding: 0;
-          margin: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          aspect-ratio: var(--dp-ar);
-          cursor: pointer;
-          position: relative;
-          z-index: 1;
-          color: var(--dp-day-c);
-          font: var(--dp-day-f);
-          user-select: none;
-          border-radius: var(--dp-sel-s);
-
-          &:focus-visible {
-            outline: 2px solid var(--primary-10, #005fcc);
-            outline-offset: -2px;
-          }
-
-          &.sel {
-            color: var(--dp-sel-c);
-            transition: color 75ms linear;
-          }
-
-          &.out-of-scope {
-            opacity: 0.4;
-          }
-
-          &.sel-el {
-            position: relative;
-            top: 0;
-            left: 0;
-            transition:
-              transform 75ms linear,
-              opacity 75ms linear;
-            background: var(--dp-sel-bg);
-            border-radius: var(--dp-sel-s);
-            border: var(--dp-sel-bw) solid var(--dp-sel-bc);
-            opacity: 0;
-            box-sizing: border-box;
-          }
-        }
-      }
-
-      .weekdays {
-        > div {
-          color: var(--base-12);
-        }
-      }
-    }
-
-    &.primary {
-      --dp-sel-bg: var(--primary-8);
-    }
-
-    &.accent {
-      --dp-sel-bg: var(--accent-8);
-    }
-
-    &.warn {
-      --dp-sel-bg: var(--warn-8);
-    }
-
-    &.error {
-      --dp-sel-bg: var(--error-8);
-    }
-
-    &.success {
-      --dp-sel-bg: var(--success-8);
-    }
-
-    &.raised {
-      --dp-sel-bg: var(--base-g2);
-
-      &.primary {
-        --dp-sel-bg: var(--primary-g2);
-      }
-
-      &.accent {
-        --dp-sel-bg: var(--accent-g2);
-      }
-
-      &.warn {
-        --dp-sel-bg: var(--warn-g2);
-      }
-
-      &.error {
-        --dp-sel-bg: var(--error-g2);
-      }
-
-      &.success {
-        --dp-sel-bg: var(--success-g2);
-      }
-    }
-  }
-}

package/styles/components/ship-dialog.scss

@@ -1,152 +0,0 @@
-@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);
-    --dialog-s: var(--shape-2);
-    --dialog-inner-s: var(--shape-2);
-
-    border: var(--border-10);
-    background: transparent;
-    border-radius: var(--dialog-s);
-    box-shadow: var(--box-shadow-40);
-    color: var(--base-8);
-    font: var(--paragraph-30);
-    padding: 0;
-    margin: auto;
-    z-index: 0;
-    display: flex;
-    flex-direction: column;
-
-    &:focus-visible {
-      outline: none;
-    }
-
-    &.type-b {
-      --dialog-s: #{p2r(26)};
-      --dialog-inner-s: #{p2r(20)};
-
-      background: var(--base-3);
-      padding: p2r(8);
-      outline: var(--border-10);
-      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(--dialog-inner-s);
-      background-color: var(--dialog-bg);
-      z-index: 2;
-      max-width: initial;
-      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: grid;
-      grid-template-areas:
-        'title actions'
-        'description actions';
-      grid-template-columns: 1fr min-content;
-      padding: var(--dialog-p);
-      gap: var(--dialog-g);
-
-      h1,
-      h2,
-      h3,
-      h4,
-      [title] {
-        grid-area: title;
-        font: var(--title-20);
-      }
-
-      p,
-      [description] {
-        grid-area: description;
-        font: var(--paragraph-30);
-      }
-
-      button,
-      [actions] {
-        grid-area: actions;
-      }
-
-      &.sticky {
-        background-color: var(--dialog-bg);
-        border-bottom: var(--border-10);
-        box-shadow: var(--box-shadow-35);
-        position: sticky;
-        top: 0;
-        z-index: 100;
-      }
-    }
-
-    [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: var(--border-10);
-        box-shadow: var(--box-shadow-35);
-        position: sticky;
-        bottom: 0;
-        z-index: 100;
-      }
-    }
-  }
-}

package/styles/components/ship-divider.scss

@@ -1,27 +0,0 @@
-@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-event-card.scss

@@ -1,51 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipEventCard: true !default;
-
-@if $shipEventCard == true {
-  sh-event-card {
-    display: flex;
-    gap: p2r(8);
-    width: 100%;
-    padding: p2r(16);
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      gap: p2r(4);
-      flex: 1;
-
-      > * {
-        color: var(--sheet-c);
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font: var(--paragraph-20B);
-      }
-    }
-
-    .actions [actions],
-    .actions {
-      display: flex;
-      gap: p2r(8);
-      align-items: center;
-
-      [shButton] {
-        --btn-bs: none;
-      }
-    }
-
-    &:before {
-      content: '';
-      display: block;
-      border-radius: p2r(3);
-      width: p2r(6);
-      background: var(--sheet-ic);
-    }
-  }
-}

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

@@ -1,47 +0,0 @@
-@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;
-      }
-    }
-  }
-}