@magmonium/one 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmonium/one",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Magmonium One — Angular design-system primitives for mm Apps",
   "author": "magmonium",
   "license": "MIT",
@@ -12,6 +12,13 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "fesm2022",
+    "types",
+    "assets",
+    "sass",
+    "README.md"
+  ],
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
@@ -21,7 +28,7 @@
     "@angular/elements": "^21.0.0",
     "@ngrx/signals": "^21.0.0",
     "rxjs": "^7.8.0",
-    "@magmonium/cli": "^0.7.8",
+    "@magmonium/cli": "^0.7.9",
     "socket.io-client": "^4.8.0"
   },
   "sideEffects": false,

package/sass/_date-picker.sass

@@ -0,0 +1,147 @@
+// Date Picker Component Styles
+@use 'mixins/flex' as flex
+@use 'mixins/sizing' as size
+@use 'mixins/spacing' as space
+@use 'mixins/grid' as grid
+@use 'mixins/text' as text
+
+// Main Container
+.date-picker
+  @include size.width-full
+  @include size.height-full
+  @include size.min-width(280px)
+  @include flex.flex-column
+  padding: 16px
+  // Scale down all buttons inside the picker to stay compact
+  --m-button-size: 0.75rem
+
+  // Day buttons are formatted as circular, compact buttons
+  .date-view__calendar__week__day
+    m-button
+      width: 28px
+      height: 28px
+      display: inline-flex
+      align-items: center
+      justify-content: center
+
+      button
+        padding: 0 !important
+        width: 100% !important
+        height: 100% !important
+        border-radius: 50% !important
+        display: flex
+        align-items: center
+        justify-content: center
+
+  // Month & Year grid buttons are compact rounded rectangles
+  .date-picker-month-view__grid, .date-picker-year-view__grid
+    m-button
+      width: 100%
+      button
+        padding: 0 4px !important
+        width: 100% !important
+
+  // All non-primary buttons in the picker are borderless
+  m-button button:not(.primary)
+    border-color: transparent !important
+
+  m-date-picker-month-view, m-date-picker-year-view, m-date-picker-date-view
+    display: flex
+    width: 100%
+    justify-content: center
+
+  &__content
+    padding: 8px 0 0 0
+    @include flex.flex-1
+    @include flex.flex
+    @include size.width-full
+    +flex.flex-center
+
+// Header — section-style flex row with space between nav and title
+.date-picker-header
+  display: flex
+  justify-content: center
+  align-items: center
+  padding: 0 0 8px 0
+  @include size.width-full
+
+  m-one-button-group, m-button-group, .button-group
+    display: flex
+    width: 100%
+    justify-content: space-between
+    align-items: center
+
+    m-button:nth-child(2)
+      margin-left: auto
+      margin-right: auto
+
+// Date View
+.date-view
+  @include size.size-full
+  @include flex.flex-column
+  @include flex.gap(8px)
+
+  &__weekdays
+    @include grid.grid-layout
+    @include grid.grid-template-columns(repeat(7, 1fr))
+    @include grid.grid-gap(4px)
+    @include grid.place-items(center)
+    @include size.width-full
+    margin-bottom: 4px
+
+    &__day
+      @include size.min-height(24px)
+      @include text.text-uppercase
+      @include flex.flex-center
+      font-size: 10px
+      font-weight: 800
+      letter-spacing: 0.05em
+      opacity: 0.6
+
+  &__calendar
+    @include flex.flex-column
+    @include flex.gap(4px)
+    @include flex.flex-1
+    @include size.width-full
+
+    &__week
+      @include grid.grid-layout
+      @include grid.grid-template-columns(repeat(7, 1fr))
+      @include grid.grid-gap(4px)
+      @include grid.place-items(center)
+      @include size.width-full
+
+      &__day
+        @include flex.flex-center
+        @include size.width-full
+        @include size.min-height(28px)
+
+// Month View
+.date-picker-month-view
+  @include size.size-full
+  @include flex.flex-column
+
+  &__grid
+    @include grid.grid-layout
+    @include grid.grid-template-columns(repeat(3, 1fr))
+    @include grid.grid-template-rows(repeat(3, 1fr))
+    @include grid.grid-gap(8px)
+    @include grid.place-items(center)
+    justify-items: center
+    @include size.width-full
+    @include flex.flex-1
+
+// Year View
+.date-picker-year-view
+  @include size.size-full
+  @include flex.flex-column
+
+  &__grid
+    @include grid.grid-layout
+    @include grid.grid-template-columns(repeat(3, 1fr))
+    @include grid.grid-template-rows(repeat(3, 1fr))
+    @include grid.grid-gap(8px)
+    @include grid.place-items(center)
+    justify-items: center
+    @include size.width-full
+    @include flex.flex-1

package/sass/_index.sass

@@ -0,0 +1,34 @@
+// @magmonium/sass - Main entry point
+
+// Variables
+@forward 'variables'
+
+// Functions
+@forward 'functions/functions'
+
+// Mixins
+@forward 'mixins'
+
+// Animations
+@forward 'animations'
+
+// M-components
+@forward 'm-components'
+
+// Export all as a single module
+@forward 'variables/colors' as colors-*
+@forward 'variables/spacing' as spacing-*
+@forward 'variables/typography' as typography-*
+@forward 'variables/borders' as borders-*
+@forward 'functions/functions' as functions-*
+@forward 'mixins/breakpoints' as breakpoints-*
+@forward 'mixins/utilities' as utilities-*
+@forward 'mixins/borders' as borders-*
+@forward 'mixins/layout' as layout-*
+@forward 'mixins/grid' as grid-*
+@forward 'animations/background/gradient' as gradient-animations-*
+@forward 'animations/background/particle' as particle-animations-*
+@forward 'animations/background/tech' as tech-animations-*
+@forward 'animations/background/nature' as nature-animations-*
+@forward 'animations/background/energy' as energy-animations-*
+@forward 'animations/background/new-effects' as effects-animations-*

package/sass/_input-date.sass

@@ -0,0 +1,25 @@
+// Date Input Component Styles
+// Scoped to .m-date-input to prevent style bleeding
+
+.m-date-input
+  .input-wrapper
+    position: relative
+    padding-right: 0 !important
+    $size: 1em
+    --m-text-input-padding-right: calc(#{$size} * 2.25)
+
+    input
+      width: 100%
+      padding-right: var(--m-text-input-padding-right) !important
+      box-sizing: border-box
+
+      &::placeholder
+        opacity: 0.5
+        font-style: italic
+
+    > .m-button, > .m-one-button
+      position: absolute
+      right: 0
+      top: 0
+      bottom: 0
+      --m-button-size: #{$size} !important

package/sass/_m-components.sass

@@ -0,0 +1,110 @@
+// Global display: block for m- components to ensure they occupy space correctly
+// Component-specific styles relocated from libs/sass
+
+m-frame, m-carousel, m-one-carousel
+  display: block
+
+// Scoped wizard stepper overrides to avoid app-specific lint restrictions
+.wizard__stepper
+  .stepper
+    display: flex
+    flex-direction: row
+    gap: 0.5rem
+    
+    @media (min-width: 992px) // desktop breakpoint
+      flex-direction: column
+      gap: 1.5rem
+
+  .stepper__step
+    display: flex
+    align-items: center
+    gap: 0.75rem
+    cursor: pointer
+    transition: all 0.3s ease
+    opacity: 0.5
+
+    &--selected
+      opacity: 1
+      
+      .stepper__step-icon
+        background: linear-gradient(135deg, #a855f7, #14b8a6) !important
+        border-color: transparent !important
+        box-shadow: 0 0 15px rgba(168, 85, 247, 0.5) !important
+        color: #ffffff !important
+
+      .stepper__step-label
+        color: #ffffff !important
+        font-weight: 600 !important
+
+    &--completed
+      opacity: 0.8
+      
+      .stepper__step-icon
+        background: rgba(20, 184, 166, 0.2) !important
+        border-color: #14b8a6 !important
+        color: #14b8a6 !important
+
+  .stepper__step-icon
+    width: 2.25rem !important
+    height: 2.25rem !important
+    border-radius: 50% !important
+    border: 2px solid rgba(255, 255, 255, 0.15) !important
+    background: rgba(15, 23, 42, 0.6) !important
+    color: #94a3b8 !important
+    display: flex !important
+    align-items: center !important
+    justify-content: center !important
+    font-weight: 700 !important
+    font-size: 0.875rem !important
+    transition: all 0.3s ease !important
+
+  .stepper__step-label
+    font-size: 0.875rem !important
+    color: #94a3b8 !important
+    font-weight: 500 !important
+    transition: all 0.3s ease !important
+    text-transform: capitalize !important
+
+// Scoped wizard footer button group overrides
+.wizard__footer
+  .m-button-group
+    display: flex
+    justify-content: space-between
+    gap: 1rem
+
+    button
+      font-weight: 600 !important
+      font-size: 0.9375rem !important
+      padding: 0.75rem 1.75rem !important
+      border-radius: 0.75rem !important
+      transition: all 0.3s ease !important
+      cursor: pointer
+
+    // Next / Submit Button
+    [name="next_step"] button, button:not([disabled]):not(.prev_step)
+      background: linear-gradient(135deg, #a855f7, #7c3aed) !important
+      color: #ffffff !important
+      border: none !important
+      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important
+
+      &:hover:not([disabled])
+        background: linear-gradient(135deg, #c084fc, #8b5cf6) !important
+        box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5) !important
+        transform: translateY(-2px)
+
+    // Prev Button
+    [name="prev_step"] button
+      background: rgba(255, 255, 255, 0.05) !important
+      color: #e2e8f0 !important
+      border: 1px solid rgba(255, 255, 255, 0.08) !important
+
+      &:hover:not([disabled])
+        background: rgba(255, 255, 255, 0.1) !important
+        transform: translateY(-2px)
+
+    button[disabled]
+      background: rgba(255, 255, 255, 0.03) !important
+      color: rgba(255, 255, 255, 0.15) !important
+      border: 1px solid rgba(255, 255, 255, 0.03) !important
+      box-shadow: none !important
+      cursor: not-allowed

package/sass/_menu.sass

@@ -0,0 +1,132 @@
+@use 'variables/number' as n
+@use 'variables/colors' as c
+
+.m-selector-box
+  position: fixed
+  z-index: n.$base-z-index * 10000
+
+  .m-context-menu
+    position: fixed
+
+  .m-dropdown-input
+    position: fixed
+
+  .m-color-picker
+    position: fixed
+
+    .color-picker-box
+      background: c.$background-color
+      border: var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)))
+      border-radius: var(--m-input-radius, 4px)
+      box-shadow: none
+
+  .m-date-input
+    position: fixed
+
+    .date-picker
+      background: c.$background-color
+      border: var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)))
+      border-radius: var(--m-input-radius, 8px)
+      box-shadow: none
+      padding: 0.75rem
+      animation: date-picker-in 200ms ease-out
+      // Small, borderless buttons throughout the picker
+      --m-button-size: 0.75rem
+
+      // Day buttons are formatted as circular, compact buttons
+      .date-view__calendar__week__day
+        m-button
+          width: 28px
+          height: 28px
+          display: inline-flex
+          align-items: center
+          justify-content: center
+
+          button
+            padding: 0 !important
+            width: 100% !important
+            height: 100% !important
+            border-radius: 50% !important
+            display: flex
+            align-items: center
+            justify-content: center
+
+      // Month & Year grid buttons are compact rounded rectangles
+      .date-picker-month-view__grid, .date-picker-year-view__grid
+        m-button
+          width: 100%
+          button
+            padding: 0 4px !important
+            width: 100% !important
+
+      // All non-primary buttons in the picker are borderless
+      m-button button:not(.primary)
+        border-color: transparent !important
+
+      m-date-picker-month-view, m-date-picker-year-view, m-date-picker-date-view
+        display: flex
+        width: 100%
+        justify-content: center
+
+    .date-picker-header
+      display: flex
+      align-items: center
+      justify-content: center
+      padding: 0 0 0.5rem 0
+
+      m-one-button-group, m-button-group, .button-group
+        display: flex
+        width: 100%
+        justify-content: space-between
+        align-items: center
+
+        m-button:nth-child(2)
+          margin-left: auto
+          margin-right: auto
+
+    .date-view
+      &__weekdays
+        display: grid
+        grid-template-columns: repeat(7, 1fr)
+        text-align: center
+        font-size: 0.65rem
+        font-weight: 800
+        text-transform: uppercase
+        color: c.$text-tertiary
+        padding: 0.25rem 0
+        gap: 0.25rem
+
+        &__day
+          padding: 0.125rem
+          opacity: 0.6
+
+      &__calendar
+        &__week
+          display: grid
+          grid-template-columns: repeat(7, 1fr)
+          text-align: center
+          gap: 0.25rem
+          padding: 0.125rem 0
+
+          &__day
+            display: flex
+            align-items: center
+            justify-content: center
+            padding: 0.125rem 0
+
+    .date-picker-month-view,
+    .date-picker-year-view
+      &__grid
+        display: grid
+        grid-template-columns: repeat(3, 1fr)
+        place-items: center
+        gap: 0.125rem
+        padding: 0.125rem 0
+
+@keyframes date-picker-in
+  from
+    opacity: 0
+    transform: scale(0.95) translateY(-4px)
+  to
+    opacity: 1
+    transform: scale(1) translateY(0)

package/sass/_reset.sass

@@ -0,0 +1,186 @@
+@use 'index' as m
+@use 'variables/number' as n
+@use 'utilities/spacing'
+@use 'utilities/borders'
+@use 'utilities/flex'
+@use 'utilities/position'
+@use 'utilities/sizing'
+@use 'utilities/display'
+@use 'utilities/colors'
+@use 'utilities/backgrounds'
+@use 'utilities/backdrops'
+@use 'utilities/links'
+@use 'utilities/text'
+@use 'utilities/lists'
+@use 'utilities/input'
+@use 'utilities/popup'
+@use 'mixins/input' as input-mixins
+@use 'mixins/label' as input-label
+@use 'mixins/links' as link-mixins
+@use 'mixins/text' as text-mixins
+@use 'mixins/lists' as list-mixins
+@use 'mixins/spacing' as spacing-mixins
+@use 'mixins/toggle' as toggle-mixins
+@use 'mixins/form' as forms-mixins
+@use 'mixins/position' as forms-position
+@use 'mixins/checkbox' as checkbox-mixin
+@use 'mixins/radio' as radio-mixin
+@use 'date-picker'
+@use 'input-date'
+@use 'menu'
+
+*,
+*::before,
+*::after
+  box-sizing: border-box
+  margin: 0
+  padding: 0
+
+  &:focus
+    outline: none
+
+html
+  @media (max-width: 768px)
+    font-size: 14px
+
+body
+  overflow: hidden
+  overflow-y: auto
+  font-size: m.$font-size-base
+  font-family: m.$font-family-base
+  background-color: m.$background-color
+  -webkit-text-size-adjust: 100%
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+  // root fallback container: cols with no m-section ancestor still resolve
+  // grid breakpoints against the viewport width (ADR 0001)
+  container-type: inline-size
+  container-name: mag-grid
+
+button
+  +m.button-reset
+
+h1, h2, h3, h4, h5, h6
+  margin: 0
+  padding: 0
+  font-weight: normal
+  font-size: inherit
+  line-height: inherit
+
+h1
+  +m.header(1)
+
+h2
+  +m.header(2)
+
+h3
+  +m.header(3)
+
+h4
+  +m.header(4)
+
+h5
+  +m.header(5)
+
+h6
+  +m.header(6)
+
+// Link reset using mixins
+a
+  @include link-mixins.link-base
+  @include link-mixins.link-states(m.$text, m.$mm, m.$mm-dark)
+  @include link-mixins.link-underline('hover')
+
+// Paragraph reset using mixins
+p
+  @include spacing-mixins.margin-y(1)
+  @include text-mixins.text-body
+
+  &:first-child
+    margin-top: 0
+
+  &:last-child
+    margin-bottom: 0
+
+ul, ol
+  @include list-mixins.list-reset
+
+li
+  @include list-mixins.list-item-reset
+
+label
+  +input-label.input-label
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="url"],
+input[type="tel"],
+textarea
+  +input-mixins.input-text-base
+
+.toggle
+  +toggle-mixins.toggle-container
+
+.toggle--row
+  flex-direction: row-reverse
+  justify-content: space-between
+  width: 100%
+
+.checkbox
+  +checkbox-mixin.checkbox-container-base
+  +checkbox-mixin.checkbox-container-states
+
+.radio
+  +radio-mixin.radio-container
+
+
+form
+  +forms-mixins.form-grid($gap: 1em)
+
++forms-position.generate-float-classes
+
+.m-selector-box
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  z-index: n.$base-z-index * 10000
+  pointer-events: none
+
+  > *
+    pointer-events: auto
+    position: absolute
+
+.modals
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  z-index: n.$base-z-index * 1000
+
+.modal
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  overflow: auto
+  @include m.premium-backdrop
+  animation: backdropFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards
+
+  .m-context-menu-box
+    width: 100% !important
+
+@keyframes backdropFadeIn
+  from
+    opacity: 0
+    backdrop-filter: blur(0px)
+  to
+    opacity: 1
+    backdrop-filter: blur(24px)
+
+.input-wrapper
+  +input-mixins.input-wrapper

package/sass/animations/_index.sass

@@ -0,0 +1,13 @@
+// @magmonium/sass - Animation System
+// Main entry point for all animations
+
+// Background animations
+@forward 'background'
+
+// Export animation mixins with namespace
+@forward 'background/gradient' as gradient-*
+@forward 'background/particle' as particle-*
+@forward 'background/tech' as tech-*
+@forward 'background/nature' as nature-*
+@forward 'background/energy' as energy-*
+@forward 'background/new-effects' as effects-*