@newlogic-digital/ui 3.4.2 → 3.7.5

package/src/styles/Libraries/Dialog.css

@@ -1,35 +0,0 @@
-.lib-dialog {
-  --lib-ripple-bg: rgb(var(--color-dark) / var(--tw-bg-opacity, 0.8));
-  --lib-dialog-py: 2rem;
-  --lib-dialog-px: 1.5rem;
-  --lib-dialog-animation-duration: 0.3s;
-
-  inset: 0;
-  z-index: var(--z-30);
-  position: fixed;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  background-color: var(--lib-ripple-bg);
-  overscroll-behavior: contain;
-  display: flex;
-  visibility: hidden;
-  padding: var(--lib-dialog-py) var(--lib-dialog-px);
-
-  &:not([open]) {
-    animation: var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;
-    pointer-events: none;
-  }
-
-  &[open] {
-    animation: var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in;
-  }
-
-  @nest .is-lib-dialog-open & {
-    visibility: visible;
-  }
-}
-
-.is-lib-dialog-open {
-  overflow: hidden;
-  padding-right: var(--lib-dialog-scrollbar-width, 0);
-}

package/src/styles/Libraries/Drawer.css

@@ -1,70 +0,0 @@
-.lib-drawer {
-  --lib-drawer-opacity: 0;
-
-  z-index: var(--z-30);
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  inset: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-
-  & > div {
-    scroll-snap-align: end;
-  }
-
-  &[data-action*="scroll"] {
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    user-select: none;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &:--state-active {
-      scroll-snap-type: x proximity;
-    }
-
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-  }
-
-  &::before {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    background-color: rgb(var(--color-dark) / 0.6);
-    content: "";
-    opacity: var(--lib-drawer-opacity);
-
-    @nest .is-opacity& {
-      transition: var(--transition-opacity);
-    }
-
-    @nest :not(:--state-active)& {
-      opacity: 0;
-    }
-  }
-
-  &:not(:--state-active) {
-    pointer-events: none;
-
-    & > div {
-      transform: translateX(-28.125rem);
-
-      @media (--media-m) {
-        transform: translateX(-22.5rem);
-      }
-    }
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    min-width: 100vw;
-    scroll-snap-align: end;
-  }
-}

package/src/styles/Libraries/Hint.css

@@ -1,201 +0,0 @@
-[class*="lib-hint-"] {
-  --lib-hint-bg: var(--color-dark);
-  --lib-hint-fg: var(--color-light);
-
-  position: relative;
-  text-align: center;
-
-  @nest .dark & {
-    --lib-hint-bg: var(--color-background-200);
-  }
-
-  &.lib-hint-light {
-    --lib-hint-bg: var(--color-light);
-    --lib-hint-fg: var(--color-dark);
-  }
-
-  &.lib-hint-error {
-    --lib-hint-bg: var(--color-error);
-  }
-
-  &.lib-hint-warning {
-    --lib-hint-bg: var(--color-warning);
-  }
-
-  &.lib-hint-info {
-    --lib-hint-bg: var(--color-info);
-  }
-
-  &.lib-hint-success {
-    --lib-hint-bg: var(--color-success);
-  }
-
-  &::before, &::after {
-    position: absolute;
-    visibility: hidden;
-    opacity: 0;
-    z-index: var(--z-10);
-    pointer-events: none;
-    transition: var(--transition) ease;
-    transition-delay: 0ms;
-    will-change: transform;
-    backface-visibility: hidden;
-
-    @nest :is(:hover, :focus-visible)& {
-      visibility: visible;
-      opacity: 1;
-      transition-delay: 100ms;
-    }
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    background-color: transparent;
-    border: 0.375rem solid transparent;
-    z-index: var(--z-20);
-
-    @nest [class*="lib-hint-top"]& {
-      border-top-color: rgb(var(--lib-hint-bg));
-    }
-
-    @nest [class*="lib-hint-bottom"]& {
-      border-bottom-color: rgb(var(--lib-hint-bg));
-    }
-
-    @nest [class*="lib-hint-left"]& {
-      border-left-color: rgb(var(--lib-hint-bg));
-    }
-
-    @nest [class*="lib-hint-right"]& {
-      border-right-color: rgb(var(--lib-hint-bg));
-    }
-  }
-
-  &::after {
-    border-radius: var(--radius);
-    background-color: rgb(var(--lib-hint-bg));
-    color: rgb(var(--lib-hint-fg));
-    padding: 0.75rem;
-    font-size: 0.875rem;
-    font-family: inherit;
-    line-height: 0.875rem;
-    white-space: nowrap;
-    box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--lib-hint-bg) / 0.15);
-    font-weight: var(--font-normal);
-
-    @nest .lib-hint-light& {
-      box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--color-dark) / 0.15);
-    }
-
-    @nest [aria-label]& {
-      content: attr(aria-label);
-    }
-
-    @nest :is(.lib-hint-sm, .lib-hint-md, .lib-hint-lg)& {
-      white-space: normal;
-      line-height: 1.5;
-      word-wrap: break-word;
-    }
-
-    @nest .lib-hint-sm& {
-      width: 5rem;
-    }
-
-    @nest .lib-hint-md& {
-      width: 10rem;
-    }
-
-    @nest .lib-hint-lg& {
-      width: 15rem;
-    }
-  }
-
-  &.lib-hint-top {
-    &::before, &::after {
-      bottom: 100%;
-      left: 50%;
-    }
-
-    &::before {
-      left: calc(50% - 0.375rem);
-      margin-bottom: -0.6875rem;
-
-      @nest :is(:hover, :focus-visible)& {
-        transform: translateY(-0.5rem);
-      }
-    }
-
-    &::after {
-      transform: translateX(-50%);
-
-      @nest :is(:hover, :focus-visible)& {
-        transform: translateX(-50%) translateY(-0.5rem);
-      }
-    }
-  }
-
-  &.lib-hint-bottom {
-    &::before, &::after {
-      top: 100%;
-      left: 50%;
-    }
-
-    &::before {
-      left: calc(50% - 0.375rem);
-      margin-top: -0.6875rem;
-
-      @nest :hover& {
-        transform: translateY(0.5rem);
-      }
-    }
-
-    &::after {
-      transform: translateX(-50%);
-
-      @nest :hover& {
-        transform: translateX(-50%) translateY(0.5rem);
-      }
-    }
-  }
-
-  &.lib-hint-right {
-    &::before, &::after {
-      left: 100%;
-      bottom: 50%;
-
-      @nest :hover& {
-        transform: translateX(0.5rem);
-      }
-    }
-
-    &::before {
-      margin-left: -0.6875rem;
-      margin-bottom: -0.375rem;
-    }
-
-    &::after {
-      margin-bottom: -1.1875rem;
-    }
-  }
-
-  &.lib-hint-left {
-    &::before, &::after {
-      right: 100%;
-      bottom: 50%;
-
-      @nest :hover& {
-        transform: translateX(-0.5rem);
-      }
-    }
-
-    &::before {
-      margin-right: -0.6875rem;
-      margin-bottom: -0.375rem;
-    }
-
-    &::after {
-      margin-bottom: -1.1875rem;
-    }
-  }
-}

package/src/styles/Libraries/NativeSlider.css

@@ -1,60 +0,0 @@
-[data-lib-ns] {
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  user-select: none;
-  scrollbar-width: none !important;
-  -ms-overflow-style: none;
-
-  & > * {
-    flex: 0 0 auto;
-    scroll-snap-align: start;
-
-    @nest .is-fade& {
-      opacity: 0;
-      transition: var(--transition-opacity);
-
-      &[data-state="active"] {
-        opacity: 1;
-      }
-    }
-  }
-
-  &::-webkit-scrollbar {
-    display: none !important;
-  }
-
-  &:not(.is-fade, .is-grabbing) {
-    scroll-behavior: smooth;
-    scroll-snap-type: x mandatory;
-  }
-
-  &.is-grabbing {
-    &, & * {
-      cursor: grabbing;
-    }
-
-    & a {
-      pointer-events: none;
-    }
-  }
-}
-
-[data-lib-ns-nav-item] {
-  width: 0.75rem;
-  height: 0.75rem;
-  border: 0.125rem solid rgb(var(--color-current));
-  border-radius: 50%;
-  cursor: pointer;
-  position: relative;
-
-  &::after {
-    position: absolute;
-    inset: -0.5rem;
-    content: "";
-  }
-
-  &[data-state*="active"] {
-    background-color: rgb(var(--color-current));
-  }
-}

package/src/styles/Libraries/Ripple.css

@@ -1,16 +0,0 @@
-[data-action*="lib#ripple"] {
-  position: relative;
-  user-select: none;
-}
-
-.lib-ripple {
-  --lib-ripple-animation-duration: 1s;
-  --lib-ripple-bg: rgb(var(--color-background) / var(--tw-bg-opacity, 0.4));
-
-  position: absolute;
-  background: var(--lib-ripple-bg);
-  border-radius: 50%;
-  transform: scale(0);
-  animation-duration: var(--lib-ripple-animation-duration);
-  pointer-events: none;
-}

package/src/styles/Libraries/Tabs.css

@@ -1,19 +0,0 @@
-[data-controller="lib-tabs"] {
-  & [data-lib-tabs-nav] {
-    & [data-lib-tabs-item][data-state="active"] {
-      cursor: default;
-    }
-  }
-
-  & [data-lib-tabs-area] {
-    & > [data-lib-tabs-item] {
-      animation: 0.3s ease 0s backwards 1 fade-out;
-      display: none;
-
-      &:--state-active {
-        animation: 0.3s ease 0s backwards 1 fade-in;
-        display: block;
-      }
-    }
-  }
-}

package/src/styles/Libraries/Tippy.css

@@ -1,87 +0,0 @@
-.tippy-content {
-  padding: 0;
-}
-
-.tippy-box {
-  --lib-tippy-bg: var(--color-dark);
-
-  &[data-theme~="light-border"] {
-    background-color: rgb(var(--color-background));
-    background-clip: padding-box;
-    border: 1px solid rgb(0 8 16 / 0.05);
-    color: rgb(var(--color-default));
-    box-shadow: 0 3px 14px -0.5px rgb(0 8 16 / 0.08);
-    border-radius: var(--radius);
-    left: 0.1875rem;
-
-    @nest .dark & {
-      --color-background: var(--color-background-200);
-    }
-
-    & .tippy-svg-arrow {
-      fill: rgb(var(--color-background));
-
-      &::after {
-        opacity: 0.3;
-      }
-    }
-  }
-
-  &[data-placement="bottom-end"] {
-    &[data-animation="scale"] {
-      transform-origin: top right;
-    }
-
-    & .tippy-svg-arrow {
-      left: auto !important;
-      right: 0.5rem;
-      transform: none !important;
-    }
-  }
-
-  &[data-placement="bottom-start"] {
-    &[data-animation="scale"] {
-      transform-origin: top left;
-    }
-  }
-}
-
-[data-controller*="lib-tippy"]:not([data-lib-tippy^="dropdown"]) {
-  cursor: default;
-}
-
-[data-tippy-root] {
-  &.is-full {
-    @media (--media-m) {
-      inset: 0 !important;
-      width: 100% !important;
-      height: 100% !important;
-      position: fixed !important;
-      transform: none !important;
-      pointer-events: none;
-      max-width: 100%;
-
-      & .tippy-content {
-        padding-bottom: env(safe-area-inset-bottom);
-        pointer-events: auto;
-      }
-
-      & .tippy-box {
-        max-width: 100% !important;
-        position: absolute;
-        border: 0 !important;
-        bottom: 0;
-        left: 0 !important;
-        right: 0;
-        border-radius: 2rem 2rem 0 0 !important;
-        transition-timing-function: ease !important;
-        transition-duration: 300ms !important;
-
-        &[data-state="hidden"] {
-          transform: translateY(100%);
-          opacity: 0;
-        }
-      }
-    }
-  }
-}

package/src/styles/Ui/Checkbox.css

@@ -1,150 +0,0 @@
-.ui-checkbox, .ui-radio {
-  --ui-checkbox-width: 1.25rem;
-  --ui-checkbox-size: 0.875rem;
-  --ui-checkbox-bg-opacity: 0.1;
-  --ui-checkbox-bg-raw: var(--color-background);
-  --ui-checkbox-border-opacity: 0.3;
-  --ui-checkbox-border-color-raw: var(--color-current);
-  --ui-checkbox-checked-bg: rgb(var(--ui-checkbox-checked-bg-raw));
-  --ui-checkbox-checked-bg-raw: var(--color-accent);
-  --ui-checkbox-checked-fg: rgb(var(--color-light));
-  --ui-checkbox-color: currentColor;
-  --ui-checkbox-radius: 0.375rem;
-  --ui-checkbox-icon: var(--icon-check);
-  --ui-checkbox-icon-size: 1.125rem;
-  --ui-checkbox-validity-size: 0.875rem;
-  --ui-checkbox-validity-offset: 0.375rem;
-
-  transition: var(--transition-color);
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-self: flex-start;
-  position: relative;
-  user-select: none;
-  font-size: var(--ui-checkbox-size);
-  z-index: 1;
-  color: var(--ui-checkbox-color);
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  @nest .text-light & {
-    --ui-checkbox-border-color-raw: var(--color-light);
-  }
-
-  &:--theme-light {
-    --ui-checkbox-checked-fg: rgb(var(--color-light));
-  }
-
-  &:--theme-dark {
-    --ui-checkbox-checked-fg: rgb(var(--color-dark));
-  }
-
-  &:--state-invalid {
-    --ui-checkbox-border-color-raw: var(--color-error);
-    --ui-checkbox-color: rgb(var(--color-error));
-  }
-
-  & em {
-    display: block;
-    width: 100%;
-    font-size: var(--ui-checkbox-validity-size);
-    color: rgb(var(--color-error));
-    font-style: normal;
-    margin-top: var(--ui-checkbox-validity-offset);
-  }
-
-  & input {
-    position: relative;
-    display: inline-flex;
-    appearance: none;
-    height: var(--ui-checkbox-width);
-    width: var(--ui-checkbox-width);
-    background-color: rgb(var(--ui-checkbox-bg-raw) / var(--ui-checkbox-bg-opacity));
-    border: 1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--ui-checkbox-border-opacity));
-    border-radius: var(--ui-checkbox-radius);
-    cursor: pointer;
-    outline: none;
-    justify-content: center;
-    align-items: center;
-    transition: var(--transition-border), var(--transition-background), var(--transition-shadow);
-
-    &::before {
-      line-height: var(--ui-checkbox-icon-size);
-      font-size: var(--ui-checkbox-icon-size);
-      text-indent: 0;
-      display: block;
-      transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
-      color: var(--ui-checkbox-checked-fg);
-      content: "";
-      background-color: currentColor;
-      mask: var(--ui-checkbox-icon);
-      transform: scale(0);
-      will-change: transform;
-      width: 1em;
-      height: 1em;
-    }
-
-    &:not(:only-child) {
-      margin-right: 0.75rem;
-
-      @nest .flex-row-reverse& {
-        margin-right: 0;
-        margin-left: 0.75rem;
-      }
-    }
-
-    &:is(:hover, :focus-visible) {
-      --ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
-      --ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
-      --ui-checkbox-border-opacity: 0.75;
-      --ui-checkbox-bg-opacity: 0.1;
-    }
-
-    &:checked {
-      --ui-checkbox-border-opacity: 0;
-
-      background-color: var(--ui-checkbox-checked-bg);
-
-      &:focus {
-        box-shadow:
-          0 0 0 0 rgb(var(--color-current)),
-          0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.15),
-          0 1px 2px 0 rgb(var(--color-current) / 0.05);
-
-        @nest .dark & {
-          box-shadow:
-            0 0 0 0 rgb(var(--color-current)),
-            0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.3),
-            0 1px 2px 0 rgb(var(--color-current) / 0.05);
-        }
-      }
-
-      &::before {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-
-    &[required] {
-      & + * {
-        &::after {
-          color: rgb(var(--color-error));
-          content: " *";
-        }
-      }
-    }
-  }
-
-  & a {
-    text-decoration: underline;
-    transition: var(--transition-opacity);
-    color: rgb(var(--color-accent));
-
-    @nest .no-touch &[href]:is(:hover, :focus-visible) {
-      opacity: 0.8;
-    }
-  }
-}

package/src/styles/Ui/Icon.css

@@ -1,33 +0,0 @@
-.ui-icon {
-  --ui-icon-hover-opacity: 0.7;
-  --ui-icon-size: 1.25rem;
-
-  display: inline-flex;
-  position: relative;
-  font-size: var(--ui-icon-size);
-
-  &, & svg {
-    width: 1em;
-    height: 1em;
-  }
-
-  & > * {
-    transition: var(--transition-opacity);
-
-    @nest .no-touch :is([href], button):is(:hover, :focus-visible)& {
-      opacity: var(--ui-icon-hover-opacity);
-    }
-  }
-}
-
-.ui-icon-text {
-  --ui-icon-hover-opacity: 0.7;
-
-  display: inline-flex;
-  align-items: center;
-  transition: var(--transition-opacity), var(--transition-color);
-
-  @nest .no-touch &:is([href], button):is(:hover, :focus-visible) {
-    opacity: var(--ui-icon-hover-opacity);
-  }
-}