@nuvoui/core 1.3.4 → 1.4.0

package/src/styles/utilities/_container-queries.scss

@@ -1,95 +0,0 @@
-@use "sass:map";
-@use "sass:meta";
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
-
-// Container Query Mixins
-// Usage:
-// .container {
-//   container-type: inline-size;
-//   container-name: sidebar;
-// }
-// .item {
-//   @include container-up('md', 'sidebar') {
-//     // Styles for 'md' and up within 'sidebar' container
-//   }
-// }
-
-// /Container Query: Up
-@mixin container-up($breakpoint, $containerName: null) {
-  $bp-val: FN.get-breakpoint-value($breakpoint);
-  @container #{$containerName} (min-width: #{$bp-val}) {
-    @content;
-  }
-}
-
-// /Container Query: Down
-@mixin container-down($breakpoint, $containerName: null) {
-  $bp-val: FN.get-breakpoint-value($breakpoint);
-  @container #{$containerName} (max-width: (#{ $bp-val } - 0.02px)) {
-    @content;
-  }
-}
-
-// /Container Query: Between
-@mixin container-between($lower, $upper, $containerName: null) {
-  $min: FN.get-breakpoint-value($lower);
-  $max: FN.get-breakpoint-value($upper);
-  @container #{$containerName} (min-width: #{$min}) and (max-width: (#{ $max } - 0.02px)) {
-    @content;
-  }
-}
-
-// /Container Query: Only
-@mixin container-only($breakpoint, $containerName: null) {
-  $min: FN.get-breakpoint-value($breakpoint);
-  $next-breakpoint: null;
-
-  @each $name, $width in $breakpoints {
-    @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
-      $next-breakpoint: $width;
-    }
-  }
-
-  @if $next-breakpoint {
-    @container #{$containerName} (min-width: #{$min}) and (max-width: (#{ $next-breakpoint } - 0.02px)) {
-      @content;
-    }
-  } @else {
-    @container #{$containerName} (min-width: #{$min}) {
-      @content;
-    }
-  }
-}
-
-// /Container Query: Query by Size
-@mixin container-query($size, $containerName: null) {
-  @container #{$containerName} (min-width: $size) {
-    @content;
-  }
-}
-
-@mixin container-type($type: inline-size) {
-  container-type: $type;
-}
-
-@mixin container-name($name) {
-  container-name: $name;
-}
-
-@if FN.feature-enabled("container-queries") {
-  // Utility classes
-  #{VAR.$parent-selector} .container-inline-size {
-    container-type: inline-size;
-  }
-
-  #{VAR.$parent-selector} .container-size {
-    container-type: size;
-  }
-
-  @each $name in ("main", "sidebar", "card", "section") {
-    #{VAR.$parent-selector} .container-#{$name} {
-      container-name: $name;
-    }
-  }
-}

package/src/styles/utilities/_media-queries.scss

@@ -1,189 +0,0 @@
-// Section: Utilities
-// Module: Media Queries
-
-@use "sass:map";
-@use "sass:string";
-@use "sass:math";
-@use "sass:meta";
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
-
-// @description Media query mixins.
-// @param {string|number} $breakpoint - The breakpoint value.
-// @param {string} $type - The media query type (e.g. 'lg', 'md').
-@mixin media-up($breakpoint, $debug: null) {
-  $blueprint-value: FN.fix-units(FN.get-breakpoint-value($breakpoint, $debug));
-  $val: $blueprint-value - 0.01;
-  @media screen and (min-width: #{$val}) {
-    @content;
-  }
-}
-
-@mixin media-down($breakpoint) {
-  $blueprint-value: FN.fix-units(FN.get-breakpoint-value($breakpoint));
-  $val: $blueprint-value - 0.01;
-  @media screen and (max-width: #{$val}) {
-    @content;
-  }
-}
-
-@mixin media-between($lower, $upper) {
-  $lower-val: FN.fix-units(FN.get-breakpoint-value($lower));
-  $upper-val: FN.fix-units(FN.get-breakpoint-value($upper));
-  $upper-val: $upper-val - 0.01;
-  @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
-    @content;
-  }
-}
-
-// Only at specific breakpoint
-@mixin media-only($breakpoint) {
-  @if meta.type-of($breakpoint) == number and math.is-unitless($breakpoint) {
-    @error "media-only() needs a breakpoint value";
-  }
-
-  @if map.has-key(VAR.$breakpoints, $breakpoint) {
-    $min: FN.get-breakpoint-value($breakpoint);
-  } @else {
-    @error "media-only() needs a valid breakpoint value #{$breakpoint} is not in your $breakpoints map";
-  }
-
-  $next-breakpoint: null;
-
-  @each $name, $width in VAR.$breakpoints {
-    @if $width > $min and (meta.type-of($next-breakpoint) == "null" or $width < $next-breakpoint) {
-      $next-breakpoint: $width;
-    }
-  }
-
-  @if $next-breakpoint {
-    @media (min-width: #{$min}) and (max-width: #{$next-breakpoint - 0.02px}) {
-      @content;
-    }
-  } @else {
-    @media (min-width: #{$min}) {
-      @content;
-    }
-  }
-}
-
-// todo: doc
-// Touch devices
-@mixin touch {
-  @media (hover: none) and (pointer: coarse) {
-    @content;
-  }
-}
-
-// todo: doc
-// Print media
-@mixin print {
-  @media print {
-    @content;
-  }
-}
-
-// todo: doc
-// Example: @include supports(display: grid) { }
-@mixin supports($property) {
-  @supports (#{$property}) {
-    @content;
-  }
-}
-
-// todo: doc
-// System preference only
-@mixin prefers-dark {
-  @media (prefers-color-scheme: dark) {
-    @content;
-  }
-}
-
-// todo: doc
-// User preference takes precedence
-@mixin dark-mode {
-  @if VAR.$enable-dark-mode {
-    // todo: documentation as this will fully remove the dark mode by force
-    // Apply when user explicitly chooses dark
-    [data-theme="dark"] & {
-      @content;
-    }
-
-    // Apply when system is dark AND user hasn't made a choice
-    @media (prefers-color-scheme: dark) {
-      [data-theme="system"] & {
-        @content;
-      }
-    }
-  }
-}
-
-// todo: doc
-// Device orientation
-@mixin landscape {
-  @media screen and (orientation: landscape) {
-    @content;
-  }
-}
-
-// todo: doc
-@mixin portrait {
-  @media screen and (orientation: portrait) {
-    @content;
-  }
-}
-
-// todo: doc
-// Modern aspect ratio
-@mixin aspect-ratio($ratio) {
-  aspect-ratio: #{$ratio};
-}
-
-// todo: doc
-// Dynamic viewport units (modern browsers)
-@mixin dvh {
-  @supports (height: 100dvh) {
-    height: 100dvh;
-  }
-
-  @supports not (height: 100dvh) {
-    height: 100vh;
-  }
-}
-
-// todo: doc
-// Safe area insets (notches, home indicators)
-@mixin safe-area-inset($property, $position) {
-  #{$property}: env(safe-area-inset-#{$position});
-}
-
-// todo: doc
-@mixin reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    @content;
-  }
-}
-
-// todo: doc
-// Mouse precision detection
-@mixin fine-pointer {
-  @media (pointer: fine) {
-    @content;
-  }
-}
-
-// todo: doc
-// Display mode for PWAs
-@mixin display-mode($mode: "standalone") {
-  @media (display-mode: #{$mode}) {
-    @content;
-  }
-}
-
-// todo: doc
-// High contrast mode
-@mixin high-contrast {
-  @media (forced-colors: active) {
-    @content;
-  }
-}

package/src/styles/utilities/_tooltips.scss

@@ -1,258 +0,0 @@
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
-
-@mixin tooltip-variables {
-  // Tooltip core variables
-  --tooltip-bg: rgba(17 17 17 / 90%);
-  --tooltip-shadow-color: rgb(0 0 0 / 20%);
-  --tooltip-text-color: #fff;
-
-  // Animation variables
-  --microtip-transition-duration: 0.18s;
-  --microtip-transition-easing: ease-in-out;
-  --microtip-transition-delay: 0s;
-
-  // Typography variables
-  --microtip-font-size: 13px;
-  --microtip-font-weight: normal;
-  --microtip-text-transform: none;
-
-  // Sizing variables
-  --tooltip-small-width: 80px;
-  --tooltip-medium-width: 150px;
-  --tooltip-large-width: 260px;
-  --tooltip-border-radius: 4px;
-}
-
-@if FN.feature-enabled("tooltips") {
-  // Apply variables based on parent selector
-  @if VAR.$parent-selector == "" {
-    :root {
-      @include tooltip-variables;
-    }
-  } @else {
-    #{VAR.$parent-selector} {
-      @include tooltip-variables;
-    }
-  }
-
-  #{VAR.$parent-selector} [data-tooltip][role~="tooltip"] {
-    position: relative;
-
-    &::before,
-    &::after {
-      transform: translate3d(0, 0, 0);
-      backface-visibility: hidden;
-      will-change: transform;
-      opacity: 0;
-      pointer-events: none;
-      transition: all var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
-      position: absolute;
-      box-sizing: border-box;
-      z-index: 10;
-      transform-origin: top;
-    }
-
-    &::before {
-      background-size: 100% auto !important;
-      content: "";
-    }
-
-    &::after {
-      background: var(--tooltip-bg);
-      box-shadow: 0 3px 7px var(--tooltip-shadow-color);
-      border-radius: var(--tooltip-border-radius);
-      color: var(--tooltip-text-color);
-      content: attr(data-tooltip);
-      font-size: var(--microtip-font-size);
-      font-weight: var(--microtip-font-weight);
-      text-transform: var(--microtip-text-transform);
-      padding: 0.5em 1em;
-      white-space: nowrap;
-      box-sizing: content-box;
-    }
-
-    &:hover::before,
-    &:hover::after,
-    &:focus::before,
-    &:focus::after {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  // Top position tooltips
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
-    &::before {
-      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-      height: 6px;
-      width: 18px;
-      margin-bottom: 6px;
-      transform: translate3d(-50%, 0, 0);
-      bottom: 100%;
-      left: 50%;
-    }
-
-    &::after {
-      margin-bottom: 11px;
-      transform: translate3d(-50%, 0, 0);
-      bottom: 100%;
-      left: 50%;
-    }
-
-    &:hover::before {
-      transform: translate3d(-50%, -5px, 0);
-    }
-
-    &:hover::after {
-      transform: translate3d(-50%, -5px, 0);
-    }
-  }
-
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
-    &::after {
-      transform: translate3d(calc(-100% + 16px), 0, 0);
-      bottom: 100%;
-    }
-
-    &:hover::after {
-      transform: translate3d(calc(-100% + 16px), -5px, 0);
-    }
-  }
-
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
-    &::after {
-      transform: translate3d(calc(0% + -16px), 0, 0);
-      bottom: 100%;
-    }
-
-    &:hover::after {
-      transform: translate3d(calc(0% + -16px), -5px, 0);
-    }
-  }
-
-  // Bottom position tooltips
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
-    &::before {
-      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-      height: 6px;
-      width: 18px;
-      margin-top: 5px;
-      margin-bottom: 0;
-      transform: translate3d(-50%, -10px, 0);
-      bottom: auto;
-      left: 50%;
-      top: 100%;
-    }
-
-    &::after {
-      margin-top: 11px;
-      transform: translate3d(-50%, -10px, 0);
-      top: 100%;
-      left: 50%;
-    }
-
-    &:hover::before {
-      transform: translate3d(-50%, 0, 0);
-    }
-
-    &:hover::after {
-      transform: translate3d(-50%, 0, 0);
-    }
-  }
-
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
-    &::after {
-      transform: translate3d(calc(-100% + 16px), -10px, 0);
-      top: 100%;
-    }
-
-    &:hover::after {
-      transform: translate3d(calc(-100% + 16px), 0, 0);
-    }
-  }
-
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
-    &::after {
-      transform: translate3d(calc(0% + -16px), -10px, 0);
-      top: 100%;
-    }
-
-    &:hover::after {
-      transform: translate3d(calc(0% + -16px), 0, 0);
-    }
-  }
-
-  // Left position tooltips
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
-    &::before,
-    &::after {
-      inset: auto auto auto 100%;
-      left: auto; // Remove any left positioning
-      right: 100%; // Position to the left of the element
-      top: 50%;
-      transform: translate3d(10px, -50%, 0);
-    }
-
-    &::before {
-      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-      height: 18px;
-      width: 6px;
-      margin-right: 5px;
-      margin-bottom: 0;
-    }
-
-    &::after {
-      margin-right: 11px;
-    }
-
-    &:hover::before,
-    &:hover::after {
-      transform: translate3d(0, -50%, 0);
-    }
-  }
-
-  // Right position tooltips
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
-    &::before,
-    &::after {
-      bottom: auto;
-      left: 100%;
-      top: 50%;
-      transform: translate3d(-10px, -50%, 0);
-    }
-
-    &::before {
-      background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A// www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-      height: 18px;
-      width: 6px;
-      margin-bottom: 0;
-      margin-left: 5px;
-    }
-
-    &::after {
-      margin-left: 11px;
-    }
-
-    &:hover::before,
-    &:hover::after {
-      transform: translate3d(0, -50%, 0);
-    }
-  }
-
-  // Tooltip sizes
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
-    white-space: initial;
-    width: var(--tooltip-small-width);
-  }
-
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
-    white-space: initial;
-    width: var(--tooltip-medium-width);
-  }
-
-  #{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
-    white-space: initial;
-    width: var(--tooltip-large-width);
-  }
-}