@ship-ui/core 0.13.2

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ship-ui/core",
+  "license": "MIT",
+  "version": "0.13.2",
+  "peerDependencies": {
+    "@angular/common": ">=19",
+    "@angular/core": ">=19"
+  },
+  "dependencies": {
+    "subset-font": "^2.3.0",
+    "@phosphor-icons/web": "^2.1.1",
+    "glob": "11.0.3",
+    "tslib": "^2.3.0"
+  },
+  "bin": {
+    "ship-fg": "./bin/ship-fg-node"
+  },
+  "libraryIcons": [
+    "upload-simple",
+    "magnifying-glass",
+    "x-bold",
+    "caret-left",
+    "caret-right",
+    "caret-down",
+    "caret-up",
+    "calendar",
+    "minus-bold",
+    "info",
+    "check-bold",
+    "check-circle",
+    "warning-octagon",
+    "warning",
+    "question",
+    "plus"
+  ],
+  "exports": {
+    ".": {
+      "sass": "./styles/*",
+      "assets": [
+        "./assets/**/*"
+      ],
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ship-ui-core.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ship-ui-core.mjs",
+  "typings": "index.d.ts"
+}

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

@@ -0,0 +1,49 @@
+@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(--grey-500);
+      color: var(--grey-contrast-500);
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+      z-index: 1000;
+    }
+  }
+}

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

@@ -0,0 +1,273 @@
+@use '../helpers.scss' as *;
+$shipAlert: true !default;
+
+@if $shipAlert == true {
+  sh-alert {
+    --alert-ad: 400ms;
+    --alert-bg: var(--base-2);
+
+    --alert-bc: var(--base-4);
+    --alert-state-ic: var(--base-12);
+    --alert-close-ic: var(--base-8);
+    --alert-title-c: var(--base-12);
+    --alert-content-c: var(--base-8);
+    --alert-bs: var(--box-shadow-10);
+    --alert-p: #{p2r(8 12)};
+
+    max-height: #{p2r(300)};
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    opacity: 1;
+    overflow: hidden;
+    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);
+
+    .alert {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      grid-template-rows: auto auto;
+      grid-template-areas:
+        'stateIcon title closeIcon'
+        '. content .';
+      padding: var(--alert-p);
+      align-items: flex-start;
+      gap: p2r(4 8);
+      border: 1px solid var(--alert-bc);
+      border-radius: var(--shape-2);
+      background: var(--alert-bg);
+    }
+
+    .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;
+      color: var(--alert-title-c);
+      padding-top: p2r(2);
+      font-weight: 500;
+    }
+
+    .content {
+      grid-area: content;
+      color: var(--alert-content-c);
+
+      &: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;
+      }
+    }
+
+    &.primary {
+      --alert-state-ic: var(--primary-8);
+      --alert-close-ic: var(--primary-8);
+      --alert-title-c: var(--primary-8);
+      --alert-content-c: var(--primary-8);
+      --alert-bg: var(--primary-1);
+      --alert-bc: var(--primary-4);
+    }
+
+    &.accent {
+      --alert-state-ic: var(--accent-8);
+      --alert-close-ic: var(--accent-8);
+      --alert-title-c: var(--accent-8);
+      --alert-content-c: var(--accent-8);
+      --alert-bg: var(--accent-1);
+      --alert-bc: var(--accent-4);
+    }
+
+    &.warn {
+      --alert-state-ic: var(--warn-8);
+      --alert-close-ic: var(--warn-8);
+      --alert-title-c: var(--warn-8);
+      --alert-content-c: var(--warn-8);
+      --alert-bg: var(--warn-1);
+      --alert-bc: var(--warn-4);
+    }
+
+    &.error {
+      --alert-state-ic: var(--error-8);
+      --alert-close-ic: var(--error-8);
+      --alert-title-c: var(--error-8);
+      --alert-content-c: var(--error-8);
+      --alert-bg: var(--error-1);
+      --alert-bc: var(--error-4);
+    }
+
+    &.success {
+      --alert-state-ic: var(--success-8);
+      --alert-close-ic: var(--success-8);
+      --alert-title-c: var(--success-8);
+      --alert-content-c: var(--success-8);
+      --alert-bg: var(--success-1);
+      --alert-bc: var(--success-4);
+    }
+
+    &.simple {
+      --alert-bc: var(--alert-bg);
+
+      &.primary {
+        --alert-content-c: var(--primary-6);
+      }
+
+      &.accent {
+        --alert-content-c: var(--accent-6);
+      }
+
+      &.warn {
+        --alert-content-c: var(--warn-6);
+      }
+
+      &.error {
+        --alert-content-c: var(--error-6);
+      }
+
+      &.success {
+        --alert-content-c: var(--success-7);
+      }
+    }
+
+    &.raised,
+    &.flat {
+      --alert-title-c: #fff;
+      --alert-content-c: #fff;
+      --alert-bg: var(--base-8);
+      --alert-bc: var(--alert-bg);
+      --alert-state-ic: #fff;
+      --alert-close-ic: #fff;
+      --alert-bs: none;
+
+      &.primary {
+        --alert-bg: var(--primary-8);
+      }
+
+      &.accent {
+        --alert-bg: var(--accent-8);
+      }
+
+      &.warn {
+        --alert-bg: var(--warn-8);
+      }
+
+      &.error {
+        --alert-bg: var(--error-8);
+      }
+
+      &.success {
+        --alert-bg: var(--success-8);
+      }
+    }
+
+    &.raised {
+      --alert-bg: var(--base-g6);
+      --alert-p: #{p2r(9 12)};
+
+      &.primary {
+        --alert-bg: var(--primary-g2);
+      }
+
+      &.accent {
+        --alert-bg: var(--accent-g2);
+      }
+
+      &.warn {
+        --alert-bg: var(--warn-g2);
+      }
+
+      &.error {
+        --alert-bg: var(--error-g2);
+      }
+
+      &.success {
+        --alert-bg: var(--success-g2);
+      }
+    }
+
+    &:has(.content:empty) .alert {
+      grid-template-rows: auto;
+      grid-template-areas: 'stateIcon title closeIcon';
+    }
+
+    &:has([content]) .alert {
+      --alert-p: #{p2r(12)};
+    }
+
+    &.outlined {
+      --alert-bg: var(--base-1);
+      --alert-bc: var(--base-4);
+      --alert-title-c: var(--base-12);
+      --alert-content-c: var(--base-8);
+      --alert-close-ic: var(--base-8);
+      --alert-bs: var(--box-shadow-20);
+    }
+  }
+}

package/styles/components/ship-button-group.component.scss

@@ -0,0 +1,63 @@
+@use '../helpers.scss' as *;
+$shipButtonGroup: true !default;
+
+@if $shipButtonGroup == true {
+  sh-button-group {
+    --btng-bg: var(--base-1);
+    --btng-c: var(--base-12);
+    --btng-ic: var(--base-12);
+    --btng-bc: var(--base-4);
+    --btng-h: #{p2r(40)};
+    --btng-p: #{p2r(0 12)};
+    --btng-s: var(--shape-2);
+    --btng-f: var(--paragraph-30);
+
+    display: inline-flex;
+    border: 1px solid var(--btng-bc);
+    border-radius: var(--btng-s);
+    height: var(--btng-h);
+    overflow: hidden;
+
+    &.small {
+      --btng-h: #{p2r(32)};
+      --btng-p: #{p2r(0 8)};
+    }
+
+    button {
+      border: 0;
+      flex: 1 0;
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: p2r(8);
+      position: relative;
+      padding: var(--btng-p);
+      transition: color 80ms linear;
+      min-width: auto;
+      cursor: pointer;
+      outline: none;
+      line-height: inherit;
+      user-select: none;
+      appearance: none;
+      overflow: visible;
+      vertical-align: middle;
+      white-space: nowrap;
+      background: var(--btng-bg);
+      color: var(--btng-c);
+      font: var(--btng-f);
+      border-left: 1px solid var(--btng-bc);
+
+      &:first-child {
+        border-left: 0;
+      }
+
+      &:hover,
+      &.active {
+        --btng-c: var(--base-12);
+        --btng-ic: var(--base-12);
+        --btng-bg: var(--base-3);
+      }
+    }
+  }
+}