@ship-ui/core 0.19.4 → 0.22.0

package/styles/components/ship-accordion.scss

@@ -1,113 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipAccordion: true !default;
-
-@if $shipAccordion == true {
-  sh-accordion {
-    --acc-pad: #{p2r(16)};
-    --acc-f: var(--paragraph-30);
-    --acc-bc: var(--base-4);
-    --acc-s: var(--shape-2);
-
-    display: flex;
-    flex-direction: column;
-    border: var(--border-10);
-    border-color: var(--acc-bc);
-    border-radius: var(--acc-s);
-    overflow: hidden;
-    background: var(--base-1);
-
-    &:empty {
-      display: none;
-    }
-
-    &.small {
-      --acc-pad: #{p2r(12)};
-      --acc-f: var(--paragraph-40);
-    }
-
-    &.type-b {
-      --acc-s: 0;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      overflow: auto;
-
-      > details:last-child {
-        border-bottom: var(--border-10);
-      }
-    }
-
-    details {
-      width: 100%;
-
-      &.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-
-        summary {
-          cursor: not-allowed;
-        }
-      }
-
-      // Hide standard browser marker
-      > summary {
-        list-style: none;
-
-        &::-webkit-details-marker {
-          display: none;
-        }
-      }
-
-      > summary {
-        display: flex;
-        align-items: center;
-        padding: var(--acc-pad);
-        cursor: pointer;
-        user-select: none;
-        transition: background-color 0.2s;
-        font-weight: 500;
-        font-size: var(--acc-f);
-        border-bottom: var(--border-10);
-        border-color: var(--acc-bc);
-
-        &:focus-visible {
-          outline: 2px solid var(--primary-8);
-          outline-offset: -2px;
-          border-radius: var(--acc-s);
-        }
-
-        sh-icon {
-          transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-          color: var(--mono-11);
-          margin-left: auto;
-        }
-      }
-
-      &:last-child > summary {
-        border-bottom: 0;
-      }
-
-      &[open] {
-        > summary {
-          border-bottom: var(--border-10);
-          border-color: var(--acc-bc);
-
-          sh-icon {
-            transform: rotate(180deg);
-          }
-        }
-
-        + details {
-          border-top: var(--border-10);
-          border-color: var(--acc-bc);
-        }
-      }
-
-      > .content {
-        padding: var(--acc-pad);
-        background: var(--base-2);
-      }
-    }
-  }
-}

package/styles/components/ship-alert-container.scss

@@ -1,49 +0,0 @@
-@use '../helpers.scss' as *;
-$shipAlert: true !default;
-
-@if $shipAlert == true {
-  sh-alert-container {
-    width: 100%;
-    position: relative;
-
-    sh-alert {
-      margin-bottom: p2r(8);
-
-      &:first-of-type {
-        margin-bottom: 0;
-      }
-
-      &.alert-is-hidden {
-        margin-bottom: 0;
-      }
-    }
-
-    .scroller {
-      width: 100%;
-      max-height: 50vh;
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: p2r(8 16 16 8);
-    }
-
-    .container {
-      flex-direction: column-reverse;
-      display: flex;
-    }
-
-    .tray {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: p2r(24);
-      height: p2r(24);
-      background-color: var(--base-8);
-      color: var(--base-1);
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      border-radius: 50%;
-      z-index: 1000;
-    }
-  }
-}

package/styles/components/ship-alert.scss

@@ -1,177 +0,0 @@
-@use '../helpers.scss' as *;
-$shipAlert: true !default;
-
-@if $shipAlert == true {
-  sh-alert {
-    --alert-ad: 400ms;
-    --alert-bs: var(--box-shadow-10);
-    --alert-p: #{p2r(8)};
-
-    max-height: #{p2r(300)};
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    opacity: 1;
-    overflow: hidden;
-    display: block;
-    transition:
-      max-height var(--alert-ad) ease-in-out,
-      transform var(--alert-ad) ease-in-out,
-      opacity var(--alert-ad) ease-in-out,
-      margin-bottom var(--alert-ad) ease-in-out,
-      padding-top var(--alert-ad) ease-in-out,
-      padding-bottom var(--alert-ad) ease-in-out;
-    transform: translateY(0);
-    box-shadow: var(--alert-bs);
-
-    &.simple {
-      .content > * {
-        color: var(--sheet-c);
-        opacity: 0.7;
-      }
-    }
-
-    &.flat,
-    &.raised {
-      --sheet-c: #fff;
-
-      .content > * {
-        color: var(--sheet-c);
-        opacity: 0.8;
-      }
-    }
-
-    .alert {
-      display: grid;
-      grid-template-columns: auto 1fr 1fr;
-      grid-template-rows: auto auto;
-      grid-template-areas:
-        'stateIcon title closeIcon'
-        '. content .';
-      padding: var(--alert-p);
-      align-items: flex-start;
-      gap: p2r(4 8);
-
-      .close-icon {
-        display: none;
-      }
-
-      &:has(.actions:empty) {
-        grid-template-columns: auto 1fr;
-        grid-template-areas:
-          'stateIcon title'
-          '. content';
-
-        .actions {
-          display: none;
-        }
-
-        .close-icon {
-          display: block;
-        }
-      }
-
-      &:has(.content:empty) {
-        grid-template-rows: auto;
-        grid-template-areas: 'stateIcon title closeIcon';
-      }
-
-      &:has(.actions:empty):has(.content:empty) {
-        grid-template-columns: auto 1fr;
-        grid-template-areas: 'stateIcon title';
-      }
-    }
-
-    .actions {
-      grid-area: closeIcon;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: p2r(4);
-    }
-
-    .icon {
-      grid-area: stateIcon;
-      height: p2r(20);
-      width: p2r(20);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:first-of-type:not(:empty) + .icon {
-        display: none;
-      }
-    }
-
-    [icon],
-    .state-icon {
-      color: var(--alert-state-ic);
-    }
-
-    .close-icon {
-      grid-area: closeIcon;
-      color: var(--alert-close-ic);
-      transform: rotate(45deg);
-      transform-origin: center;
-    }
-
-    .title {
-      grid-area: title;
-      padding-top: p2r(2);
-      font-weight: 500;
-    }
-
-    .content {
-      grid-area: content;
-
-      &:empty {
-        display: none;
-      }
-    }
-
-    &.is-hidden {
-      max-height: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      opacity: 0;
-      margin-bottom: 0;
-      overflow: hidden;
-      transform: translateY(-40px);
-
-      &::before {
-        opacity: 0;
-      }
-    }
-
-    &.animate-in {
-      transition: none;
-      max-height: 0;
-      margin-bottom: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      opacity: 0;
-      overflow: hidden;
-      transform: translateY(0px);
-
-      &::before {
-        opacity: 0;
-      }
-    }
-
-    &.animate-out {
-      max-height: 0;
-      padding: 0;
-      opacity: 0;
-      overflow: hidden;
-      transform: translateY(-40px);
-
-      &::before {
-        opacity: 0;
-      }
-    }
-
-    &:has([content]) .alert {
-      --alert-p: #{p2r(12)};
-    }
-  }
-}

package/styles/components/ship-blueprint.scss

@@ -1,242 +0,0 @@
-@use '../helpers.scss' as *;
-$shipBlueprint: true !default;
-
-@if $shipBlueprint == true {
-  sh-blueprint {
-    --bp-bg: var(--base-1);
-    --bp-icon-c: var(--base-6);
-    --bp-stroke-c: var(--base-7);
-    --bp-stroke-ca: var(--primary-8);
-
-    display: flex;
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    > * {
-      box-sizing: border-box;
-    }
-
-    sh-icon {
-      font-size: p2r(16);
-      color: var(--bp-icon-c);
-    }
-
-    sh-card.type-c {
-      --card-bg: var(--base-1);
-    }
-
-    .validation-errors {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      padding: p2r(16);
-    }
-
-    .midpoint-div {
-      position: absolute;
-      background-color: var(--base-2);
-      border: var(--border-10);
-      padding: p2r(8);
-      gap: p2r(8);
-      border-radius: var(--shape-2);
-      transform: translate(-50%, -50%);
-      z-index: 100;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      sh-icon {
-        color: var(--base-12);
-      }
-    }
-
-    .canvas-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-
-      &.hovering-connection {
-        cursor: pointer;
-      }
-
-      &.locked {
-        .node {
-          pointer-events: none;
-        }
-      }
-    }
-
-    .action-panel {
-      position: absolute;
-      top: p2r(8);
-      right: p2r(8);
-      gap: p2r(8);
-      display: flex;
-      align-items: center;
-      z-index: 1000;
-    }
-
-    canvas {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .nodes-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      will-change: transform;
-    }
-    .canvas {
-      height: 100%;
-      width: 100%;
-      background-color: var(--bp-bg);
-      overflow: hidden;
-      touch-action: none;
-      position: relative;
-    }
-
-    .grid {
-      position: absolute;
-      inset: 0;
-      will-change: transform;
-    }
-
-    .tile {
-      position: absolute;
-      box-sizing: border-box;
-      width: 800px;
-      height: 800px;
-      background-image:
-        repeating-linear-gradient(0deg, var(--bp-grid-c) 0 2px, transparent 2px 100%),
-        repeating-linear-gradient(90deg, var(--bp-grid-c) 0 2px, transparent 2px 100%);
-      background-size: 20px 20px;
-    }
-
-    .node {
-      position: absolute;
-      min-width: 150px;
-      // min-height: 100px;
-      padding: 0;
-      transition: box-shadow 0.2s ease-in-out;
-      box-shadow: var(--box-shadow-10);
-      will-change: transform;
-
-      display: flex;
-      flex-direction: column;
-
-      header {
-        padding: p2r(8);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        background-color: var(--base-2);
-        border-bottom: var(--border-10);
-        cursor: grab;
-        user-select: none;
-
-        &:active {
-          cursor: grabbing;
-        }
-      }
-
-      &:has(header:hover) {
-        box-shadow: 0 0 10px 2px var(--primary-6);
-      }
-    }
-
-    .ports {
-      padding: p2r(8 0);
-      display: flex;
-      gap: p2r(8);
-    }
-
-    .inputs,
-    .outputs {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      flex: 1 0;
-      height: 100%;
-    }
-
-    .inputs {
-      .port {
-        border-radius: 0 50% 50% 0;
-        border-left-width: 0;
-      }
-    }
-
-    .outputs {
-      align-items: flex-end;
-
-      .port {
-        border-radius: 50% 0 0 50%;
-        border-right-width: 0;
-      }
-    }
-
-    .port-wrap {
-      display: flex;
-      gap: p2r(4);
-      align-items: center;
-    }
-
-    .port {
-      width: p2r(12);
-      height: p2r(12);
-      background-color: var(--bp-stroke-c);
-      border-radius: 50%;
-      border: var(--border-20);
-      cursor: pointer;
-      position: relative;
-    }
-
-    .port:hover {
-      background-color: var(--bp-stroke-ca);
-    }
-
-    .port-name {
-      font: var(--paragraph-40);
-      color: var(--base-12);
-      white-space: nowrap;
-    }
-
-    .svg-wrap {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-    }
-
-    .connections-svg {
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-    }
-
-    .connection-path {
-      stroke: var(--bp-stroke-c);
-      stroke-width: 3;
-      fill: none;
-      pointer-events: none;
-    }
-
-    .drag-path {
-      stroke: var(--bp-stroke-ca);
-      stroke-width: 3;
-      fill: none;
-      stroke-dasharray: 5, 5;
-      pointer-events: none;
-    }
-  }
-}