@inntechcorp/it-design 3.1.24 → 4.0.0-beta.2

package/dist/css/common.css

@@ -0,0 +1,116 @@
+@layer components {
+
+  /* ===== ErrorTooltip ===== */
+  .itd-error-tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    font-size: .785rem;
+    line-height: .875rem;
+    border-radius: calc(var(--itd-border-radius) - 2px);
+    padding: 8px 7px;
+    color: var(--itd-color-error-text);
+    background: var(--itd-color-error);
+    width: max-content;
+    max-width: 210px;
+    z-index: 1;
+
+    --_offset-x: var(--itd-error-offset-x, 0px);
+    --_offset-y: var(--itd-error-offset-y, 0px);
+
+    &::after {
+      content: "";
+      width: 0;
+      height: 0;
+      position: absolute;
+      border-left: 7px solid transparent;
+      border-right: 7px solid transparent;
+    }
+
+    /* Position: top-right (default) */
+    &[data-position="top-right"],
+    &:not([data-position]) {
+      right: -16px;
+      bottom: 30px;
+
+      &::after {
+        bottom: calc(-6px + var(--_offset-y));
+        right: calc(17px + var(--_offset-x));
+        border-top: 10px solid var(--itd-color-error);
+      }
+    }
+
+    /* Position: top-left */
+    &[data-position="top-left"] {
+      left: -10px;
+      bottom: 30px;
+
+      &::after {
+        bottom: calc(-6px + var(--_offset-y));
+        left: calc(17px + var(--_offset-x));
+        border-top: 10px solid var(--itd-color-error);
+      }
+    }
+
+    /* Position: bottom-left */
+    &[data-position="bottom-left"] {
+      left: -95px;
+      top: -40px;
+
+      &::after {
+        top: calc(-6px + var(--_offset-y));
+        left: calc(17px + var(--_offset-x));
+        border-bottom: 10px solid var(--itd-color-error);
+      }
+    }
+
+    /* Position: bottom-right */
+    &[data-position="bottom-right"] {
+      right: -95px;
+      bottom: -40px;
+
+      &::after {
+        top: calc(-6px + var(--_offset-y));
+        right: calc(17px + var(--_offset-x));
+        border-bottom: 10px solid var(--itd-color-error);
+      }
+    }
+  }
+
+  /* ===== ErrorBorder ===== */
+  .itd-error-border {
+    position: absolute;
+    border: 1px solid var(--itd-color-error-border);
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    border-radius: calc(var(--itd-border-radius) - 2px);
+    top: -1px;
+    left: -1px;
+    pointer-events: none;
+
+    &[data-full-size] {
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  /* ===== ErrorIconWrapper ===== */
+  .itd-error-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+
+    & svg circle {
+      fill: var(--itd-color-error);
+    }
+
+    & svg path {
+      fill: var(--itd-color-error-text);
+    }
+  }
+}

package/dist/css/components.css

@@ -0,0 +1,92 @@
+/* ================================= */
+/* COMPONENTS - Transition & Animation Styles */
+/* ITD Component Behaviors */
+/* ================================= */
+@layer components {
+
+  /* Modal Transitions */
+  .modal-enter {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+
+  .modal-enter-active {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 300ms, transform 300ms;
+    transition-delay: .3s;
+  }
+
+  .modal-exit {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .modal-exit-active {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+    transition: opacity 300ms, transform 300ms;
+  }
+
+  /* Select Menu Transitions */
+  .itd-select-dropdown-transition-enter {
+    opacity: 0;
+    transform: translateY(-5px) scale(0.975);
+  }
+
+  .itd-select-dropdown-transition-enter-active {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 200ms, transform 200ms;
+  }
+
+  .itd-select-dropdown-transition-exit {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .itd-select-dropdown-transition-exit-active {
+    opacity: 0;
+    transform: translateY(-5px) scale(0.975);
+    transition: opacity 200ms, transform 200ms;
+  }
+
+  /* DatePicker Modal Transitions */
+  .datepicker-modal-enter {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.975);
+  }
+
+  .datepicker-modal-enter-active {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 200ms, transform 200ms;
+  }
+
+  .datepicker-modal-exit {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .datepicker-modal-exit-active {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.975);
+    transition: opacity 200ms, transform 200ms;
+  }
+
+
+  /* ========== Accessibility: Reduced Motion ========== */
+  @media (prefers-reduced-motion: reduce) {
+    .modal-enter-active,
+    .modal-exit-active,
+    .itd-select-dropdown-transition-enter-active,
+    .itd-select-dropdown-transition-exit-active,
+    .datepicker-modal-enter-active,
+    .datepicker-modal-exit-active {
+      transition: none;
+      animation: none;
+    }
+  }
+
+}
+

package/dist/css/datepicker.css

@@ -0,0 +1,75 @@
+/* ================================= */
+/* DATEPICKER COMPONENT STYLES       */
+/* ================================= */
+@layer components {
+
+  .itd-date-picker {
+    position: relative;
+    height: max-content;
+
+    & input {
+      display: block;
+      width: 100%;
+      outline: none;
+    }
+
+    & .itd-datepicker-suffix {
+      width: calc(var(--itd-spacing) * 4);
+      height: calc(var(--itd-spacing) * 4);
+      display: inline-grid;
+      place-items: center;
+    }
+
+    & .itd-datepicker-icon {
+      color: var(--itd-color-text-neutral);
+      transition: color .2s ease;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--itd-color-text);
+      }
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+
+      & .itd-datepicker-icon svg {
+        color: var(--itd-color-disabled-text);
+      }
+    }
+  }
+
+  .itd-datepicker-calendar {
+    box-shadow: 0 0 30px rgba(0, 0, 0, .25);
+    z-index: 2;
+    position: absolute;
+    top: calc(100% + calc(var(--itd-spacing) * 1.5));
+    transform-origin: 0% 8%;
+    transform-box: fill-box;
+
+    &[data-position="left"] {
+      left: 0;
+    }
+
+    &[data-position="right"] {
+      right: 0;
+    }
+  }
+
+  .itd-datepicker-remove-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    & svg {
+      transition: color .2s ease;
+      color: var(--itd-color-text-neutral);
+    }
+
+    &:hover svg {
+      color: var(--itd-color-text);
+    }
+  }
+
+}

package/dist/css/form.css

@@ -0,0 +1,28 @@
+@layer components {
+  .itd-form-control {
+    display: flex;
+    justify-content: flex-end;
+    gap: calc(var(--itd-spacing) * 1.25);
+
+    &[data-position="start"] {
+      justify-content: flex-start;
+    }
+
+    &[data-position="center"] {
+      justify-content: center;
+    }
+
+    &[data-position="end"] {
+      justify-content: flex-end;
+    }
+  }
+
+  .itd-form-group {
+    display: flex;
+    flex-direction: column;
+
+    &[data-horizontal] {
+      flex-direction: row;
+    }
+  }
+}

package/dist/css/hovercard.css

@@ -0,0 +1,11 @@
+@layer components {
+  .itd-hovercard-content {
+    border-radius: var(--itd-border-radius);
+    background: var(--itd-popover);
+    color: var(--itd-color-text);
+    box-shadow: var(--itd-box-shadow);
+    border: 1px solid var(--itd-color-border);
+    min-width: 200px;
+    max-width: 300px;
+  }
+}