@mgremy/ng-primitives 0.13.0 → 0.14.1

package/theme/components/pagination.css

@@ -1,72 +0,0 @@
-@utility mgnp-pagination {
-  ul {
-    display: flex;
-    align-items: center;
-    gap: --spacing(2);
-  }
-}
-
-@utility mgnp-pagination-button {
-  all: unset;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  outline-style: none;
-  width: --spacing(8);
-  height: --spacing(8);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-medium);
-  background-color: var(--mg-background-ui);
-  color: var(--mg-text-ui);
-  box-shadow: var(--mg-shadow-button);
-
-  @variant data-hover {
-    @variant not-data-disabled {
-      @variant not-data-selected {
-        background-color: var(--mg-background-ui-hover);
-      }
-    }
-  }
-
-  @variant data-focus-visible {
-    @variant not-data-disabled {
-      outline: 2px solid var(--mg-ring-ui);
-    }
-  }
-
-  @variant data-press {
-    @variant not-data-disabled {
-      @variant not-data-selected {
-        background-color: var(--mg-background-ui-active);
-      }
-    }
-  }
-
-  @variant data-disabled {
-    cursor: not-allowed;
-    color: #d2d2d2;
-    box-shadow: none;
-    background-color: var(--mg-background-ui-disabled);
-  }
-
-  @variant data-selected {
-    background-color: var(--mg-background-ui-inverse);
-    color: var(--mg-text-inverse);
-  }
-}
-
-@layer base {
-  [ngpPagination][data-mgnp-component='mgnp-pagination'] {
-    @apply mgnp-pagination transition;
-
-    [ngpPaginationFirst],
-    [ngpPaginationPrevious],
-    [ngpPaginationButton],
-    [ngpPaginationNext],
-    [ngpPaginationLast] {
-      @apply mgnp-pagination-button transition;
-    }
-  }
-}

package/theme/components/switch.css

@@ -1,44 +0,0 @@
-@utility mgnp-switch {
-  position: relative;
-  outline: none;
-  border-radius: calc(infinity* 1px);
-  background-color: var(--mg-background-ui-secondary);
-  border: 1px solid var(--mg-border-ui);
-  width: --spacing(10);
-  height: --spacing(6);
-  padding: --spacing(0);
-
-  @variant data-focus-visible {
-    outline: 2px solid var(--mg-ring-ui);
-  }
-
-  @variant data-checked {
-    background-color: var(--mg-background-ui-active);
-    border-color: var(--mg-border-ui-secondary);
-  }
-}
-
-@utility mgnp-switch-thumb {
-  display: block;
-  outline: none;
-  border-radius: calc(infinity* 1px);
-  background-color: var(--mg-background-ui);
-  box-shadow: var(--mg-shadow-button);
-  width: --spacing(4);
-  height: --spacing(4);
-  margin-left: --spacing(1);
-
-  @variant data-checked {
-    transform: translateX(--spacing(4));
-  }
-}
-
-@layer base {
-  [mgnpSwitch][data-mgnp-component='mgnp-switch'] {
-    @apply mgnp-switch transition;
-  }
-
-  [mgnpSwitchThumb][data-mgnp-component='mgnp-switch-thumb'] {
-    @apply mgnp-switch-thumb transition;
-  }
-}

package/theme/components/toast.css

@@ -1,111 +0,0 @@
-@utility mgnp-toast {
-  position: absolute;
-  touch-action: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  height: fit-content;
-  padding: --spacing(3) --spacing(4);
-  border-radius: --spacing(2);
-  width: --spacing(87.5);
-  border: 1px solid var(--mg-border-ui);
-  background: var(--mg-background-ui);
-  box-shadow: var(--mg-shadow-ui);
-  z-index: var(--ngp-toast-z-index);
-  transform: var(--y);
-
-  @variant data-enter {
-    --y: translateY(0);
-    opacity: 1;
-    animation: mg-slide-in var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-
-  @variant data-exit {
-    opacity: 0;
-    transform: translateY(100%);
-    transition:
-      opacity var(--default-transition-duration) var(--default-transition-timing-function),
-      transform var(--default-transition-duration) var(--default-transition-timing-function);
-    --y: translateY(calc(calc(var(--lift) * var(--ngp-toast-gap)) * -1));
-  }
-
-  @variant data-[visible=false] {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @variant data-[position-x=end] {
-    right: 0;
-  }
-
-  @variant data-[position-x=start] {
-    left: 0;
-  }
-
-  @variant data-[position-y=top] {
-    top: 0;
-    --lift: 1;
-    --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));
-  }
-
-  @variant data-[position-y=bottom] {
-    bottom: 0;
-    --lift: -1;
-    --lift-amount: calc(var(--lift) * var(--ngp-toast-gap));
-  }
-
-  @variant data-[expanded=true] {
-    --y: translateY(calc(var(--lift) * var(--ngp-toast-offset)));
-    height: auto;
-
-    ::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      height: calc(var(--ngp-toast-gap) + 1px);
-      bottom: 100%;
-      width: 100%;
-    }
-  }
-
-  @variant data-[expanded=false] {
-    @variant data-[front=false] {
-      --scale: var(--ngp-toasts-before) * 0.05 + 1;
-      --y: translateY(calc(var(--lift-amount) * var(--ngp-toasts-before)))
-        scale(calc(-1 * var(--scale)));
-      height: var(--ngp-toast-front-height);
-    }
-  }
-
-  @variant data-[swiping=true] {
-    transform: var(--y) translateY(var(--ngp-toast-swipe-amount-y, 0))
-      translateX(var(--ngp-toast-swipe-amount-x, 0));
-
-    @variant data-[swipe-direction=left] {
-      /* Fade out from -45px to -100px swipe */
-      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-x, 0px)) - 45) / 55, 1));
-    }
-
-    @variant data-[swipe-direction=right] {
-      /* Fade out from 45px to 100px swipe */
-      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-x, 0px) - 45) / 55, 1));
-    }
-
-    @variant data-[swipe-direction=top] {
-      /* Fade out from -45px to -100px swipe */
-      opacity: calc(1 - clamp(0, ((-1 * var(--ngp-toast-swipe-y, 0px)) - 45) / 55, 1));
-    }
-
-    @variant data-[swipe-direction=bottom] {
-      /* Fade out from 45px to 100px swipe */
-      opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-y, 0px) - 45) / 55, 1));
-    }
-  }
-}
-
-@layer base {
-  [mgnpToast][data-mgnp-component='mgnp-toast'] {
-    @apply mgnp-toast transition;
-  }
-}

package/theme/components/tooltip.css

@@ -1,46 +0,0 @@
-@utility mgnp-tooltip {
-  position: absolute;
-  border: none;
-  animation: mg-show var(--default-transition-duration) var(--default-transition-timing-function);
-  max-width: --spacing(64);
-  padding-block: --spacing(2);
-  padding-inline: --spacing(3);
-  font-size: var(--text-xs);
-  line-height: var(--text-xs--line-height);
-  border-radius: var(--radius-lg);
-  background-color: var(--mg-background-ui-inverse);
-  color: var(--mg-text-inverse);
-  transform-origin: var(--ngp-tooltip-transform-origin);
-
-  @variant data-exit {
-    animation: mg-hide var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-}
-
-@utility mgnp-tooltip-arrow {
-  position: absolute;
-  pointer-events: none;
-  transform: rotate(45deg);
-  width: --spacing(2);
-  height: --spacing(2);
-  border-radius: var(--radius-xs);
-  background-color: var(--mg-background-ui-inverse);
-
-  @variant data-[placement="top"] {
-    top: calc(100% - 5px);
-  }
-
-  @variant data-[placement="bottom"] {
-    bottom: calc(100% - 5px);
-  }
-}
-
-@layer base {
-  [mgnpTooltip][data-mgnp-component='mgnp-tooltip'] {
-    @apply mgnp-tooltip transition;
-  }
-
-  [mgnpTooltipArrow][data-mgnp-component='mgnp-tooltip-arrow'] {
-    @apply mgnp-tooltip-arrow transition;
-  }
-}