@magmonium/one 0.0.3 → 0.0.5

package/sass/utilities/_display.sass

@@ -0,0 +1,308 @@
+// Display utility classes derived from mixins
+@use '../mixins/display' as display
+
+// Basic display classes
+.block
+  @include display.block
+
+.inline
+  @include display.inline
+
+.inline-block
+  @include display.inline-block
+
+.none
+  @include display.none
+
+.hidden
+  @include display.hidden
+
+.show
+  @include display.show
+
+// Note: Flex display classes are available from flex utilities
+
+// Grid display classes
+.grid
+  @include display.grid
+
+.inline-grid
+  @include display.inline-grid
+
+// Table display classes
+.table
+  @include display.table
+
+.table-row
+  @include display.table-row
+
+.table-cell
+  @include display.table-cell
+
+.table-column
+  @include display.table-column
+
+.table-row-group
+  @include display.table-row-group
+
+.table-header-group
+  @include display.table-header-group
+
+.table-footer-group
+  @include display.table-footer-group
+
+.table-caption
+  @include display.table-caption
+
+.table-column-group
+  @include display.table-column-group
+
+// List display classes
+.list-item
+  @include display.list-item
+
+// Content flow classes
+.flow-root
+  @include display.flow-root
+
+.contents
+  @include display.contents
+
+// Visibility classes
+.visible
+  @include display.visible
+
+.invisible
+  @include display.invisible
+
+.collapse
+  @include display.collapse
+
+// Screen reader utilities
+.sr-only
+  @include display.hide-visually
+
+.sr-show
+  @include display.show-visually
+
+.visually-hidden
+  @include display.hide-visually
+
+.visually-shown
+  @include display.show-visually
+
+// Responsive display classes - Mobile
+.hide-mobile
+  @include display.hide-mobile
+
+.show-mobile
+  @include display.show-mobile
+
+.mobile-only
+  @include display.mobile-only
+
+// Responsive display classes - Tablet
+.hide-tablet
+  @include display.hide-tablet
+
+.show-tablet
+  @include display.show-tablet
+
+.tablet-only
+  @include display.tablet-only
+
+// Responsive display classes - Desktop
+.hide-desktop
+  @include display.hide-desktop
+
+.show-desktop
+  @include display.show-desktop
+
+.desktop-only
+  @include display.desktop-only
+
+// Print display classes
+.hide-print
+  @include display.hide-print
+
+.show-print
+  @include display.show-print
+
+.print-only
+  @include display.print-only
+
+// Container query display classes
+.hide-container-small
+  @include display.hide-container-small
+
+.show-container-small
+  @include display.show-container-small
+
+.hide-container-large
+  @include display.hide-container-large
+
+.show-container-large
+  @include display.show-container-large
+
+// Specific responsive combinations
+@media (max-width: 480px)
+  .hide-xs
+    display: none !important
+
+  .show-xs
+    display: block !important
+
+  .flex-xs
+    display: flex !important
+
+  .grid-xs
+    display: grid !important
+
+  .inline-xs
+    display: inline !important
+
+  .inline-block-xs
+    display: inline-block !important
+
+@media (min-width: 481px) and (max-width: 768px)
+  .hide-sm
+    display: none !important
+
+  .show-sm
+    display: block !important
+
+  .flex-sm
+    display: flex !important
+
+  .grid-sm
+    display: grid !important
+
+  .inline-sm
+    display: inline !important
+
+  .inline-block-sm
+    display: inline-block !important
+
+@media (min-width: 769px) and (max-width: 1024px)
+  .hide-md
+    display: none !important
+
+  .show-md
+    display: block !important
+
+  .flex-md
+    display: flex !important
+
+  .grid-md
+    display: grid !important
+
+  .inline-md
+    display: inline !important
+
+  .inline-block-md
+    display: inline-block !important
+
+@media (min-width: 1025px) and (max-width: 1200px)
+  .hide-lg
+    display: none !important
+
+  .show-lg
+    display: block !important
+
+  .flex-lg
+    display: flex !important
+
+  .grid-lg
+    display: grid !important
+
+  .inline-lg
+    display: inline !important
+
+  .inline-block-lg
+    display: inline-block !important
+
+@media (min-width: 1201px)
+  .hide-xl
+    display: none !important
+
+  .show-xl
+    display: block !important
+
+  .flex-xl
+    display: flex !important
+
+  .grid-xl
+    display: grid !important
+
+  .inline-xl
+    display: inline !important
+
+  .inline-block-xl
+    display: inline-block !important
+
+// Hover display utilities
+.hover-show
+  display: none
+
+  &:hover
+    display: block
+
+.hover-hide
+  display: block
+
+  &:hover
+    display: none
+
+// Focus display utilities
+.focus-show
+  display: none
+
+  &:focus
+    display: block
+
+.focus-hide
+  display: block
+
+  &:focus
+    display: none
+
+// Group hover/focus utilities (for parent-child interactions)
+.group:hover .group-hover-show
+  display: block
+
+.group:hover .group-hover-hide
+  display: none
+
+.group:focus .group-focus-show
+  display: block
+
+.group:focus .group-focus-hide
+  display: none
+
+// Toggle utilities (JavaScript controlled)
+.toggle-hidden
+  display: none
+
+.toggle-shown
+  display: block
+
+// Animation-ready display utilities
+.fade-in-display
+  display: none
+  opacity: 0
+  transition: opacity 0.3s ease-in-out
+
+  &.active
+    display: block
+    opacity: 1
+
+.slide-in-display
+  display: none
+  transform: translateY(-10px)
+  opacity: 0
+  transition: all 0.3s ease-in-out
+
+  &.active
+    display: block
+    transform: translateY(0)
+    opacity: 1

package/sass/utilities/_flex.sass

@@ -0,0 +1,91 @@
+// Flex utility classes derived from mixins
+@use '../mixins/flex' as flex
+
+// Flex container classes
+.flex
+  @include flex.flex
+
+.inline-flex
+  @include flex.inline-flex
+
+.flex-column
+  @include flex.flex-column
+
+.flex-row
+  @include flex.flex-row
+
+.flex-center
+  @include flex.flex-center
+
+.flex-center-column
+  @include flex.flex-center-column
+
+.flex-start
+  @include flex.flex-start
+
+.flex-end
+  @include flex.flex-end
+
+.flex-between
+  @include flex.flex-between
+
+.flex-around
+  @include flex.flex-around
+
+.flex-evenly
+  @include flex.flex-evenly
+
+// Flex item classes
+.flex-1
+  @include flex.flex-1
+
+.flex-auto
+  @include flex.flex-auto
+
+.flex-none
+  @include flex.flex-none
+
+// Flex wrap classes
+.flex-nowrap
+  @include flex.flex-nowrap
+
+// Flex alignment classes
+.items-center
+  align-items: center
+
+.items-start
+  align-items: flex-start
+
+.items-end
+  align-items: flex-end
+
+.items-stretch
+  align-items: stretch
+
+// Gap utilities
+.gap-1
+  gap: 0.25rem
+
+.gap-2
+  gap: 0.5rem
+
+.gap-3
+  gap: 0.75rem
+
+.gap-4
+  gap: 1rem
+
+// Responsive flex classes
+@media (max-width: 768px)
+  .flex-column-mobile
+    @include flex.flex-column
+
+  .flex-center-mobile
+    @include flex.flex-center
+
+@media (min-width: 769px)
+  .flex-row-desktop
+    @include flex.flex-row
+
+  .flex-between-desktop
+    @include flex.flex-between