@vueland/ui 0.0.1 → 0.0.3

package/dist/scss/utils/_cursor.scss

@@ -0,0 +1,140 @@
+.cursor {
+  &-default {
+    cursor: default;
+  }
+
+  &-pointer {
+    cursor: pointer;
+  }
+
+  &-wait {
+    cursor: wait;
+  }
+
+  &-text {
+    cursor: text;
+  }
+
+  &-move {
+    cursor: move;
+  }
+
+  &-help {
+    cursor: help;
+  }
+
+  &-not-allowed {
+    cursor: not-allowed;
+  }
+
+  /* Selection cursors */
+  &-cell {
+    cursor: cell;
+  }
+
+  &-crosshair {
+    cursor: crosshair;
+  }
+
+  &-vertical-text {
+    cursor: vertical-text;
+  }
+
+  &-alias {
+    cursor: alias;
+  }
+
+  &-copy {
+    cursor: copy;
+  }
+
+  &-no-drop {
+    cursor: no-drop;
+  }
+
+  &-grab {
+    cursor: grab;
+  }
+
+  &-grabbing {
+    cursor: grabbing;
+  }
+
+  /* Resize cursors - edges */
+  &-n-resize {
+    cursor: n-resize;
+  }
+
+  &-e-resize {
+    cursor: e-resize;
+  }
+
+  &-s-resize {
+    cursor: s-resize;
+  }
+
+  &-w-resize {
+    cursor: w-resize;
+  }
+
+  &-ne-resize {
+    cursor: ne-resize;
+  }
+
+  &-nw-resize {
+    cursor: nw-resize;
+  }
+
+  &-se-resize {
+    cursor: se-resize;
+  }
+
+  &-sw-resize {
+    cursor: sw-resize;
+  }
+
+  /* Resize cursors - directions (more specific) */
+  &-ew-resize {
+    cursor: ew-resize;
+  }
+
+  &-ns-resize {
+    cursor: ns-resize;
+  }
+
+  &-nesw-resize {
+    cursor: nesw-resize;
+  }
+
+  &-nwse-resize {
+    cursor: nwse-resize;
+  }
+
+  /* Zoom cursors */
+  &-zoom-in {
+    cursor: zoom-in;
+  }
+
+  &-zoom-out {
+    cursor: zoom-out;
+  }
+
+  /* Context menus */
+  &-context-menu {
+    cursor: context-menu;
+  }
+
+  /* Progress indicator */
+  &-progress {
+    cursor: progress;
+  }
+
+  /* Col-resize (for table columns) */
+  &-col-resize {
+    cursor: col-resize;
+  }
+
+  &-row-resize {
+    cursor: row-resize;
+  }
+}

package/dist/scss/utils/_display.scss

@@ -0,0 +1,32 @@
+@use "../maps/grids" as *;
+
+.d-none         { display: none !important; }
+.d-block        { display: block !important; }
+.d-inline       { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-flex         { display: flex !important; }
+.d-inline-flex  { display: inline-flex !important; }
+.d-grid         { display: grid !important; }
+.d-inline-grid  { display: inline-grid !important; }
+.d-table        { display: table !important; }
+.d-table-row    { display: table-row !important; }
+.d-table-cell   { display: table-cell !important; }
+.d-contents     { display: contents !important; }
+
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      .#{$size}\:d-none         { display: none !important; }
+      .#{$size}\:d-block        { display: block !important; }
+      .#{$size}\:d-inline       { display: inline !important; }
+      .#{$size}\:d-inline-block { display: inline-block !important; }
+      .#{$size}\:d-flex         { display: flex !important; }
+      .#{$size}\:d-inline-flex  { display: inline-flex !important; }
+      .#{$size}\:d-grid         { display: grid !important; }
+      .#{$size}\:d-inline-grid  { display: inline-grid !important; }
+      .#{$size}\:d-table        { display: table !important; }
+      .#{$size}\:d-table-cell   { display: table-cell !important; }
+      .#{$size}\:d-contents     { display: contents !important; }
+    }
+  }
+}

package/dist/scss/utils/_elevations.scss

@@ -0,0 +1,15 @@
+@use "../maps/elevations-map" as *;
+@use "sass:map";
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get($shadow-key-umbra, $z), map.get($shadow-key-penumbra, $z), map.get($shadow-key-ambient, $z) if(sass($important): !important)
+}
+
+$z: 24;
+@while $z >= 0 {
+  .elevation-#{$z} {
+    @include elevation($z, $important: true);
+  }
+
+  $z: $z - 1;
+}

package/dist/scss/utils/_flex.scss

@@ -0,0 +1,137 @@
+@use "../maps/grids" as *;
+@use "../maps/flexes-map" as *;
+@use "sass:map";
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-col {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse{
+  flex-wrap: wrap-reverse !important;
+}
+
+@each $key in map.keys($justify) {
+  .justify-#{$key} {
+    justify-content: map.get($justify, $key) !important;
+  }
+
+  .content-#{$key} {
+    align-content: map.get($justify, $key) !important;
+  }
+}
+
+@each $key in map.keys($align) {
+  .items-#{$key} {
+    align-items: map.get($align, $key) !important;
+  }
+
+  .self-#{$key} {
+    align-self: map.get($align, $key) !important;
+  }
+}
+
+@for $i from 1 through $columns {
+  .order-#{$i} {
+    order: $i !important;
+  }
+}
+
+@for $i from 0 through $flex-grow-step {
+  .grow-#{$i} {
+    flex-grow: $i !important;
+  }
+}
+
+@for $i from 0 through $flex-shrink-step {
+  .shrink-#{$i} {
+    flex-shrink: $i !important;
+  }
+}
+
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      .#{$size}\:d-flex {
+        display: flex !important;
+      }
+
+      .#{$size}\:d-inline-flex {
+        display: inline-flex !important;
+      }
+
+      .#{$size}\:flex-row {
+        flex-direction: row !important;
+      }
+
+      .#{$size}\:flex-col {
+        flex-direction: column !important;
+      }
+
+      .#{$size}\:flex-wrap {
+        flex-wrap: wrap !important;
+      }
+
+      .#{$size}\:flex-nowrap {
+        flex-wrap: nowrap !important;
+      }
+
+      @each $key in map.keys($justify) {
+        .#{$size}\:justify-#{$key} {
+          justify-content: map.get($justify, $key) !important;
+        }
+
+        .#{$size}\:content-#{$key} {
+          align-content: map.get($justify, $key) !important;
+        }
+      }
+
+      @each $key in map.keys($align) {
+        .#{$size}\:items-#{$key} {
+          align-items: map.get($align, $key) !important;
+        }
+
+        .#{$size}\:self-#{$key} {
+          align-self: map.get($align, $key) !important;
+        }
+      }
+
+      @for $i from 1 through $columns {
+        .#{$size}\:order-#{$i} {
+          order: $i !important;
+        }
+      }
+
+      @for $i from 0 through $flex-grow-step {
+        .#{$size}\:grow-#{$i} {
+          flex-grow: $i !important;
+        }
+      }
+
+      @for $i from 0 through $flex-shrink-step {
+        .#{$size}\:shrink-#{$i} {
+          flex-shrink: $i !important;
+        }
+      }
+    }
+  }
+}

package/dist/scss/utils/_grid.scss

@@ -0,0 +1,173 @@
+@use "../maps/grids" as *;
+
+$grid-cols-count: $columns;
+$grid-rows-count: 6;
+
+// ─── grid-template-columns ───────────────────────────────────────────────────
+
+@for $i from 1 through $grid-cols-count {
+  .grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr)) !important;
+  }
+}
+
+.grid-cols-none { grid-template-columns: none !important; }
+
+// ─── grid-template-rows ──────────────────────────────────────────────────────
+
+@for $i from 1 through $grid-rows-count {
+  .grid-rows-#{$i} {
+    grid-template-rows: repeat(#{$i}, minmax(0, 1fr)) !important;
+  }
+}
+
+.grid-rows-none { grid-template-rows: none !important; }
+
+// ─── col-span ────────────────────────────────────────────────────────────────
+
+@for $i from 1 through $grid-cols-count {
+  .col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i} !important;
+  }
+}
+
+.col-span-full { grid-column: 1 / -1 !important; }
+
+// ─── row-span ────────────────────────────────────────────────────────────────
+
+@for $i from 1 through $grid-rows-count {
+  .row-span-#{$i} {
+    grid-row: span #{$i} / span #{$i} !important;
+  }
+}
+
+.row-span-full { grid-row: 1 / -1 !important; }
+
+// ─── col-start / col-end ─────────────────────────────────────────────────────
+
+@for $i from 1 through ($grid-cols-count + 1) {
+  .col-start-#{$i} { grid-column-start: #{$i} !important; }
+  .col-end-#{$i}   { grid-column-end:   #{$i} !important; }
+}
+
+.col-start-auto { grid-column-start: auto !important; }
+.col-end-auto   { grid-column-end:   auto !important; }
+
+// ─── row-start / row-end ─────────────────────────────────────────────────────
+
+@for $i from 1 through ($grid-rows-count + 1) {
+  .row-start-#{$i} { grid-row-start: #{$i} !important; }
+  .row-end-#{$i}   { grid-row-end:   #{$i} !important; }
+}
+
+.row-start-auto { grid-row-start: auto !important; }
+.row-end-auto   { grid-row-end:   auto !important; }
+
+// ─── grid-auto-flow ──────────────────────────────────────────────────────────
+
+.grid-flow-row        { grid-auto-flow: row !important; }
+.grid-flow-col        { grid-auto-flow: column !important; }
+.grid-flow-dense      { grid-auto-flow: dense !important; }
+.grid-flow-row-dense  { grid-auto-flow: row dense !important; }
+.grid-flow-col-dense  { grid-auto-flow: column dense !important; }
+
+// ─── grid-auto-columns ───────────────────────────────────────────────────────
+
+.auto-cols-auto { grid-auto-columns: auto !important; }
+.auto-cols-min  { grid-auto-columns: min-content !important; }
+.auto-cols-max  { grid-auto-columns: max-content !important; }
+.auto-cols-fr   { grid-auto-columns: minmax(0, 1fr) !important; }
+
+// ─── grid-auto-rows ──────────────────────────────────────────────────────────
+
+.auto-rows-auto { grid-auto-rows: auto !important; }
+.auto-rows-min  { grid-auto-rows: min-content !important; }
+.auto-rows-max  { grid-auto-rows: max-content !important; }
+.auto-rows-fr   { grid-auto-rows: minmax(0, 1fr) !important; }
+
+// ─── place-items ─────────────────────────────────────────────────────────────
+
+.place-items-start   { place-items: start !important; }
+.place-items-end     { place-items: end !important; }
+.place-items-center  { place-items: center !important; }
+.place-items-stretch { place-items: stretch !important; }
+.place-items-baseline { place-items: baseline !important; }
+
+// ─── place-content ───────────────────────────────────────────────────────────
+
+.place-content-start   { place-content: start !important; }
+.place-content-end     { place-content: end !important; }
+.place-content-center  { place-content: center !important; }
+.place-content-stretch { place-content: stretch !important; }
+.place-content-between { place-content: space-between !important; }
+.place-content-around  { place-content: space-around !important; }
+.place-content-evenly  { place-content: space-evenly !important; }
+
+// ─── place-self ──────────────────────────────────────────────────────────────
+
+.place-self-auto    { place-self: auto !important; }
+.place-self-start   { place-self: start !important; }
+.place-self-end     { place-self: end !important; }
+.place-self-center  { place-self: center !important; }
+.place-self-stretch { place-self: stretch !important; }
+
+// ─── Responsive variants ─────────────────────────────────────────────────────
+
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+
+      @for $i from 1 through $grid-cols-count {
+        .#{$size}\:grid-cols-#{$i} {
+          grid-template-columns: repeat(#{$i}, minmax(0, 1fr)) !important;
+        }
+        .#{$size}\:col-span-#{$i} {
+          grid-column: span #{$i} / span #{$i} !important;
+        }
+        .#{$size}\:col-start-#{$i} { grid-column-start: #{$i} !important; }
+        .#{$size}\:col-end-#{$i}   { grid-column-end:   #{$i} !important; }
+      }
+
+      .#{$size}\:grid-cols-none { grid-template-columns: none !important; }
+      .#{$size}\:col-span-full  { grid-column: 1 / -1 !important; }
+
+      @for $i from 1 through $grid-rows-count {
+        .#{$size}\:grid-rows-#{$i} {
+          grid-template-rows: repeat(#{$i}, minmax(0, 1fr)) !important;
+        }
+        .#{$size}\:row-span-#{$i} {
+          grid-row: span #{$i} / span #{$i} !important;
+        }
+        .#{$size}\:row-start-#{$i} { grid-row-start: #{$i} !important; }
+        .#{$size}\:row-end-#{$i}   { grid-row-end:   #{$i} !important; }
+      }
+
+      .#{$size}\:grid-rows-none { grid-template-rows: none !important; }
+      .#{$size}\:row-span-full  { grid-row: 1 / -1 !important; }
+
+      .#{$size}\:grid-flow-row       { grid-auto-flow: row !important; }
+      .#{$size}\:grid-flow-col       { grid-auto-flow: column !important; }
+      .#{$size}\:grid-flow-dense     { grid-auto-flow: dense !important; }
+      .#{$size}\:grid-flow-row-dense { grid-auto-flow: row dense !important; }
+      .#{$size}\:grid-flow-col-dense { grid-auto-flow: column dense !important; }
+
+      .#{$size}\:place-items-start    { place-items: start !important; }
+      .#{$size}\:place-items-end      { place-items: end !important; }
+      .#{$size}\:place-items-center   { place-items: center !important; }
+      .#{$size}\:place-items-stretch  { place-items: stretch !important; }
+
+      .#{$size}\:place-content-start   { place-content: start !important; }
+      .#{$size}\:place-content-end     { place-content: end !important; }
+      .#{$size}\:place-content-center  { place-content: center !important; }
+      .#{$size}\:place-content-stretch { place-content: stretch !important; }
+      .#{$size}\:place-content-between { place-content: space-between !important; }
+      .#{$size}\:place-content-around  { place-content: space-around !important; }
+
+      .#{$size}\:place-self-auto    { place-self: auto !important; }
+      .#{$size}\:place-self-start   { place-self: start !important; }
+      .#{$size}\:place-self-end     { place-self: end !important; }
+      .#{$size}\:place-self-center  { place-self: center !important; }
+      .#{$size}\:place-self-stretch { place-self: stretch !important; }
+    }
+  }
+}

package/dist/scss/utils/_helpers.scss

@@ -0,0 +1,47 @@
+// Visually hidden (accessibility)
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Visibility
+.visible   { visibility: visible !important; }
+.invisible { visibility: hidden !important; }
+
+// Pointer events
+.pointer-events-none { pointer-events: none !important; }
+.pointer-events-auto { pointer-events: auto !important; }
+
+// User select
+.select-none { user-select: none !important; }
+.select-text { user-select: text !important; }
+.select-all  { user-select: all !important; }
+.select-auto { user-select: auto !important; }
+
+// Object fit
+.object-contain { object-fit: contain !important; }
+.object-cover   { object-fit: cover !important; }
+.object-fill    { object-fit: fill !important; }
+.object-none    { object-fit: none !important; }
+
+// Aspect ratio
+.aspect-square { aspect-ratio: 1 / 1 !important; }
+.aspect-video  { aspect-ratio: 16 / 9 !important; }
+.aspect-auto   { aspect-ratio: auto !important; }
+
+// Truncate multi-line
+@for $i from 1 through 5 {
+  .line-clamp-#{$i} {
+    display: -webkit-box !important;
+    -webkit-line-clamp: #{$i} !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+  }
+}

package/dist/scss/utils/_opacity.scss

@@ -0,0 +1,13 @@
+@use "sass:math";
+
+$max: 10;
+
+@for $i from 0 through $max {
+  .op-#{$i} {
+    opacity: math.div($i, $max) !important;
+  }
+
+  .hover\:op-#{$i}:hover {
+    opacity: math.div($i, $max) !important;
+  }
+}

package/dist/scss/utils/_overflow.scss

@@ -0,0 +1,51 @@
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+.overflow-x-auto {
+  overflow-x: auto !important;
+}
+
+.overflow-y-auto {
+  overflow-y: auto !important;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden !important;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll !important;
+}
+
+.overflow-clip {
+  overflow: clip !important;
+}
+
+.overflow-x-clip {
+  overflow-x: clip !important;
+}
+
+.overflow-y-clip {
+  overflow-y: clip !important;
+}

package/dist/scss/utils/_positions.scss

@@ -0,0 +1,42 @@
+@use "../maps/grids" as *;
+
+// Position
+.static   { position: static !important; }
+.relative { position: relative !important; }
+.absolute { position: absolute !important; }
+.fixed    { position: fixed !important; }
+.sticky   { position: sticky !important; }
+
+// Inset
+.inset-0   { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
+.inset-auto { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
+
+// Top / Bottom / Left / Right
+.top-0    { top: 0 !important; }
+.top-auto { top: auto !important; }
+.top-50   { top: 50% !important; }
+.top-100  { top: 100% !important; }
+
+.bottom-0    { bottom: 0 !important; }
+.bottom-auto { bottom: auto !important; }
+.bottom-50   { bottom: 50% !important; }
+.bottom-100  { bottom: 100% !important; }
+
+.left-0    { left: 0 !important; }
+.left-auto { left: auto !important; }
+.left-50   { left: 50% !important; }
+.left-100  { left: 100% !important; }
+
+.right-0    { right: 0 !important; }
+.right-auto { right: auto !important; }
+.right-50   { right: 50% !important; }
+.right-100  { right: 100% !important; }
+
+// Z-index — произвольные значения через JIT: z-[100]
+$z-levels: 0, 1, 2, 3, 4, 5, 10, 50;
+
+@each $z in $z-levels {
+  .z-#{$z} { z-index: $z !important; }
+}
+
+.z-auto { z-index: auto !important; }

package/dist/scss/utils/_radius.scss

@@ -0,0 +1,41 @@
+$radius-scale: (
+  0: 0,
+  2: 2px,
+  4: 4px,
+  6: 6px,
+  8: 8px,
+  12: 12px,
+  16: 16px,
+  24: 24px,
+  32: 32px
+);
+
+@each $key, $value in $radius-scale {
+  .radius-#{$key} {
+    border-radius: #{$value} !important;
+  }
+
+  .radius-tl-#{$key} {
+    border-top-left-radius: #{$value} !important;
+  }
+
+  .radius-tr-#{$key} {
+    border-top-right-radius: #{$value} !important;
+  }
+
+  .radius-bl-#{$key} {
+    border-bottom-left-radius: #{$value} !important;
+  }
+
+  .radius-br-#{$key} {
+    border-bottom-right-radius: #{$value} !important;
+  }
+}
+
+.radius-pill {
+  border-radius: 9999px !important;
+}
+
+.radius-circle {
+  border-radius: 50% !important;
+}