@mgremy/ng-primitives 0.12.0 → 0.14.0

package/theme/components/button.css

@@ -1,252 +0,0 @@
-@utility mgnp-button {
-  display: inline-block;
-  border: none;
-  height: fit-content;
-  width: max-content;
-  cursor: pointer;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--mg-shadow-button);
-
-  @variant data-focus-visible {
-    outline: 2px solid var(--mg-ring-ui);
-  }
-
-  @variant data-disabled {
-    opacity: 50%;
-    cursor: default;
-  }
-
-  /* Sizes */
-  @variant data-[mgnp-size=xs] {
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    padding-block: --spacing(1);
-    padding-inline: --spacing(1.5);
-  }
-
-  @variant data-[mgnp-size=sm] {
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
-    padding-block: --spacing(1);
-    padding-inline: --spacing(2);
-  }
-
-  @variant data-[mgnp-size=md] {
-    font-size: var(--text-base);
-    line-height: var(--text-base--line-height);
-    padding-block: --spacing(1.5);
-    padding-inline: --spacing(2.5);
-  }
-
-  @variant data-[mgnp-size=lg] {
-    font-size: var(--text-lg);
-    line-height: var(--text-lg--line-height);
-    padding-block: --spacing(2);
-    padding-inline: --spacing(3);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  @variant data-[mgnp-size=xl] {
-    font-size: var(--text-xl);
-    line-height: var(--text-xl--line-height);
-    padding-block: --spacing(2.5);
-    padding-inline: --spacing(4);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  /* Solid */
-  @variant data-[mgnp-variant=solid] {
-    /* Colors */
-    @variant data-[mgnp-color=ui] {
-      background-color: var(--mg-background-ui);
-
-      @variant data-hover {
-        background-color: var(--mg-background-ui-hover);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-ui-active);
-      }
-    }
-
-    @variant data-[mgnp-color=primary] {
-      background-color: var(--mg-background-primary);
-
-      @variant data-hover {
-        background-color: var(--mg-background-primary-hover);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-primary-active);
-      }
-    }
-
-    @variant data-[mgnp-color=secondary] {
-      background-color: var(--mg-background-secondary);
-
-      @variant data-hover {
-        background-color: var(--mg-background-secondary-hover);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-secondary-active);
-      }
-    }
-
-    @variant data-[mgnp-color=info] {
-      background-color: var(--mg-background-info);
-
-      @variant data-hover {
-        background-color: var(--mg-background-info-hover);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-info-active);
-      }
-    }
-
-    @variant data-[mgnp-color=success] {
-      background-color: var(--mg-background-success);
-
-      @variant data-hover {
-        background-color: var(--mg-background-success-hover);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-success-active);
-      }
-    }
-
-    @variant data-[mgnp-color=warning] {
-      background-color: var(--mg-background-warning);
-
-      @variant data-hover {
-        background-color: var(--mg-background-warning-hover);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-warning-active);
-      }
-    }
-
-    @variant data-[mgnp-color=danger] {
-      background-color: var(--mg-background-danger);
-
-      @variant data-hover {
-        background-color: var(--mg-background-danger-hover);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-danger-active);
-      }
-    }
-  }
-
-  /* Outline */
-  @variant data-[mgnp-variant=outline] {
-    background-color: transparent;
-    color: var(--mg-text-ui);
-
-    /* Colors */
-    @variant data-[mgnp-color=ui] {
-      @variant data-hover {
-        background-color: var(--mg-background-ui-inverse);
-        color: var(--mg-text-inverse);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-ui-inverse-active);
-      }
-    }
-
-    @variant data-[mgnp-color=primary] {
-      @variant not-data-hover {
-        color: var(--mg-text-primary);
-      }
-
-      @variant data-hover {
-        background-color: var(--mg-background-primary);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-primary-inverse-active);
-      }
-    }
-
-    @variant data-[mgnp-color=secondary] {
-      @variant not-data-hover {
-        color: var(--mg-text-secondary);
-      }
-
-      @variant data-hover {
-        background-color: var(--mg-background-secondary);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-secondary-inverse-active);
-      }
-    }
-
-    @variant data-[mgnp-color=info] {
-      @variant not-data-hover {
-        color: var(--mg-text-info);
-      }
-
-      @variant data-hover {
-        background-color: var(--mg-background-info);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-info-inverse-active);
-      }
-    }
-
-    @variant data-[mgnp-color=success] {
-      @variant not-data-hover {
-        color: var(--mg-text-success);
-      }
-
-      @variant data-hover {
-        background-color: var(--mg-background-success);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-success-inverse-active);
-      }
-    }
-
-    @variant data-[mgnp-color=warning] {
-      @variant not-data-hover {
-        color: var(--mg-text-warning);
-      }
-
-      @variant data-hover {
-        background-color: var(--mg-background-warning);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-warning-inverse-active);
-      }
-    }
-
-    @variant data-[mgnp-color=danger] {
-      @variant not-data-hover {
-        color: var(--mg-text-danger);
-      }
-
-      @variant data-hover {
-        background-color: var(--mg-background-danger);
-      }
-
-      @variant data-press {
-        background-color: var(--mg-background-danger-inverse-active);
-      }
-    }
-  }
-}
-
-@layer base {
-  [mgnpButton][data-mgnp-component='mgnp-button'] {
-    @apply mgnp-button transition;
-  }
-}

package/theme/components/checkbox.css

@@ -1,37 +0,0 @@
-@utility mgnp-checkbox {
-  display: flex;
-  flex: none;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  outline: none;
-  border: 1px solid var(--mg-border-ui);
-  color: var(--mg-text-inverse);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-base);
-  line-height: var(--text-base--line-height);
-  padding: --spacing(0);
-  width: --spacing(5);
-  height: --spacing(5);
-
-  @variant data-hover {
-    background-color: var(--mg-background-ui-hover);
-  }
-
-  @variant data-checked, data-indeterminate {
-    border-color: var(--mg-background-ui-inverse);
-    background-color: var(--mg-background-ui-inverse);
-  }
-
-  @variant data-focus-visible {
-    outline: --spacing(0.5) solid var(--mg-ring-ui);
-    outline-offset: --spacing(0.5);
-  }
-}
-
-@layer base {
-  [mgnpCheckbox][data-mgnp-component='mgnp-checkbox'] {
-    @apply mgnp-checkbox transition;
-  }
-}

package/theme/components/combobox.css

@@ -1,124 +0,0 @@
-@utility mgnp-combobox {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: fit-content;
-  width: fit-content;
-  border: none;
-  box-sizing: border-box;
-  border-radius: var(--radius-lg);
-  background-color: var(--mg-background-ui);
-  box-shadow: var(--mg-shadow-input);
-
-  @variant data-focus {
-    outline-offset: 2px;
-    outline: 2px solid var(--mg-ring-ui);
-  }
-}
-
-@utility mgnp-combobox-input {
-  flex: 1;
-  border: none;
-  background-color: transparent;
-  font-family: inherit;
-  outline: none;
-  height: auto;
-  width: auto;
-  padding-block: --spacing(0);
-  padding-inline: --spacing(4);
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-  color: var(--mg-text-ui);
-}
-
-@utility mgnp-combobox-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  box-shadow: none;
-  color: var(--mg-text-ui);
-}
-
-@utility mgnp-combobox-dropdown {
-  padding: --spacing(1);
-  outline: none;
-  position: absolute;
-  min-width: fit-content;
-  box-sizing: border-box;
-  overflow-y: auto;
-  z-index: 1001;
-  border-radius: var(--radius-xl);
-  margin-top: --spacing(1);
-  max-height: --spacing(60);
-  width: var(--ngp-combobox-width);
-  box-shadow: var(--mg-shadow-lg);
-  background-color: var(--mg-background-ui);
-  border: 1px solid var(--mg-border-ui);
-
-  @variant data-enter {
-    animation: mg-show var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-
-  @variant data-exit {
-    animation: mg-hide var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-}
-
-@utility mgnp-combobox-option {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  width: 100%;
-  box-sizing: border-box;
-  gap: --spacing(2);
-  padding-block: --spacing(1.5);
-  padding-inline: --spacing(3);
-  height: --spacing(9);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-  color: var(--mg-text-ui);
-
-  @variant data-hover {
-    background-color: var(--mg-background-ui-hover);
-  }
-
-  @variant data-press {
-    background-color: var(--mg-background-ui-active);
-  }
-
-  @variant data-active {
-    background-color: var(--mg-background-ui-active);
-  }
-
-  @variant data-disabled {
-    opacity: 50%;
-  }
-}
-
-@layer base {
-  [mgnpCombobox][data-mgnp-component='mgnp-combobox'] {
-    @apply mgnp-combobox transition;
-  }
-
-  [mgnpComboboxInput][data-mgnp-component='mgnp-combobox-input'] {
-    @apply mgnp-combobox-input transition;
-  }
-
-  [ngpComboboxButton][mgnpButton][data-mgnp-component='mgnp-button'] {
-    @apply mgnp-combobox-button transition;
-  }
-
-  [mgnpComboboxDropdown][data-mgnp-component='mgnp-combobox-dropdown'] {
-    @apply mgnp-combobox-dropdown transition;
-  }
-
-  [mgnpComboboxOption][data-mgnp-component='mgnp-combobox-option'] {
-    @apply mgnp-combobox-option transition;
-  }
-}

package/theme/components/dialog.css

@@ -1,101 +0,0 @@
-@utility mgnp-dialog {
-  background-color: var(--mg-background-ui);
-  box-shadow: var(--mg-shadow-button);
-  padding: --spacing(6);
-
-  @variant data-[mgnp-mode='modal'] {
-    border-radius: --spacing(2);
-    animation: mg-fade-in var(--default-transition-duration)
-      var(--default-transition-timing-function);
-
-    @variant data-exit {
-      animation: mg-fade-out var(--default-transition-duration)
-        var(--default-transition-timing-function);
-    }
-  }
-
-  @variant data-[mgnp-mode='drawer'] {
-    width: --spacing(80);
-    max-width: 100%;
-    height: 100%;
-    animation: mg-slide-in var(--default-transition-duration)
-      var(--default-transition-timing-function);
-
-    @variant data-exit {
-      animation: mg-slide-out var(--default-transition-duration)
-        var(--default-transition-timing-function);
-    }
-  }
-}
-
-@utility mgnp-dialog-title {
-  font-size: var(--text-lg);
-  line-height: var(--text-lg--line-height);
-  color: var(--mg-text-ui);
-  margin-block: --spacing(1);
-}
-
-@utility mgnp-dialog-description {
-  font-size: var(--text-base);
-  line-height: var(--text-base--line-height);
-  color: var(--mg-text-ui-disabled);
-  margin: --spacing(0);
-}
-
-@utility mgnp-dialog-overlay {
-  display: flex;
-  position: fixed;
-  z-index: 9999;
-  background-color: --alpha(var(--mg-background-ui) / 50%);
-  backdrop-filter: blur(--spacing(0.5));
-  inset: --spacing(0);
-
-  @variant data-[mgnp-mode='modal'] {
-    justify-content: center;
-    align-items: center;
-    animation: mg-fade-in var(--default-transition-duration)
-      var(--default-transition-timing-function);
-
-    @variant data-exit {
-      animation: mg-fade-out var(--default-transition-duration)
-        var(--default-transition-timing-function);
-    }
-  }
-
-  @variant data-[mgnp-mode='drawer'] {
-    align-items: stretch;
-    animation: mg-slide-in var(--default-transition-duration)
-      var(--default-transition-timing-function);
-
-    @variant data-[mgnp-drawer-position='start'] {
-      justify-content: flex-start;
-    }
-
-    @variant data-[mgnp-drawer-position='end'] {
-      justify-content: flex-end;
-    }
-
-    @variant data-exit {
-      animation: mg-slide-out var(--default-transition-duration)
-        var(--default-transition-timing-function);
-    }
-  }
-}
-
-@layer base {
-  [mgnpDialog][data-mgnp-component='mgnp-dialog'] {
-    @apply transition mgnp-dialog;
-  }
-
-  [mgnpDialogTitle][data-mgnp-component='mgnp-dialog-title'] {
-    @apply transition mgnp-dialog-title;
-  }
-
-  [mgnpDialogDescription][data-mgnp-component='mgnp-dialog-description'] {
-    @apply transition mgnp-dialog-description;
-  }
-
-  [mgnpDialogOverlay][data-mgnp-component='mgnp-dialog-overlay'] {
-    @apply transition mgnp-dialog-overlay;
-  }
-}

package/theme/components/input.css

@@ -1,26 +0,0 @@
-@utility mgnp-input {
-  width: 100%;
-  border: none;
-  outline: none;
-  height: --spacing(9);
-  padding-block: --spacing(0);
-  padding-inline: --spacing(4);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--mg-shadow-input);
-  background-color: var(--mg-background-ui);
-
-  @variant data-focus {
-    outline-offset: 2px;
-    outline: 2px solid var(--mg-ring-ui);
-  }
-
-  ::placeholder {
-    color: var(--mg-text-placeholder);
-  }
-}
-
-@layer base {
-  [mgnpInput][data-mgnp-component='mgnp-input'] {
-    @apply mgnp-input transition;
-  }
-}

package/theme/components/menu.css

@@ -1,61 +0,0 @@
-@utility mgnp-menu {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  padding: --spacing(1);
-  border-radius: var(--radius-lg);
-  background: var(--mg-background-ui);
-  border: 1px solid var(--mg-border-ui);
-  box-shadow: var(--mg-shadow-lg);
-  transform-origin: var(--ngp-menu-transform-origin);
-
-  @variant data-enter {
-    animation: mg-show var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-
-  @variant data-exit {
-    animation: mg-hide var(--default-transition-duration) var(--default-transition-timing-function);
-  }
-}
-
-@utility mgnp-menu-item {
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: start;
-  outline: none;
-  padding-block: --spacing(1.5);
-  padding-inline: --spacing(3.5);
-  min-width: --spacing(30);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-
-  @variant data-hover {
-    background-color: var(--mg-background-ui-hover);
-  }
-
-  @variant data-press {
-    background-color: var(--mg-background-ui-active);
-  }
-
-  @variant data-focus-visible {
-    z-index: 1;
-    outline: 2px solid var(--mg-ring-ui);
-  }
-
-  @variant data-disabled {
-    opacity: 50%;
-  }
-}
-
-@layer base {
-  [mgnpMenu][data-mgnp-component='mgnp-menu'] {
-    @apply mgnp-menu transition;
-  }
-
-  [mgnpMenuItem][data-mgnp-component='mgnp-menu-item'] {
-    @apply mgnp-menu-item transition;
-  }
-}

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;
-  }
-}