move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/controls/_keyboard.scss

@@ -0,0 +1,300 @@
+////
+///
+/// Keyboard Component Mixins
+/// =========================================================================
+///
+/// Provides mixins for creating virtual keyboard UI components for
+/// kiosks, touch interfaces, and accessibility features.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../variables" as *;
+
+
+// ============================================================================
+// Keyboard Container Mixins
+// ============================================================================
+
+///
+/// Main keyboard container.
+///
+@mixin keyboard_container {
+    background: var(--keyboard-bg, $keyboard-bg);
+    border-radius: var(--keyboard-radius, $keyboard-radius);
+    padding: var(--keyboard-padding, $keyboard-padding);
+}
+
+///
+/// Keyboard row layout.
+///
+@mixin keyboard_row {
+    display: flex;
+    justify-content: center;
+    gap: var(--keyboard-gap, $keyboard-gap);
+    margin-bottom: var(--keyboard-gap, $keyboard-gap);
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+// ============================================================================
+// Key Mixins
+// ============================================================================
+
+///
+/// Base key styling.
+///
+@mixin key_base {
+    min-width: var(--key-min-width, $key-min-width);
+    height: var(--key-height, $key-height);
+    border: none;
+    border-radius: var(--key-radius, $key-radius);
+    background: var(--key-bg, $key-bg);
+    color: var(--key-color, $key-color);
+    font-size: var(--key-font-size, $key-font-size);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    &:hover {
+        background: var(--key-bg-hover, $key-bg-hover);
+        transform: translateY(-2px);
+    }
+
+    &:active {
+        background: var(--key-bg-active, $key-bg-active);
+        transform: translateY(0);
+    }
+}
+
+///
+/// Space key (wide).
+///
+@mixin key_space {
+    flex: 1;
+    max-width: var(--key-space-max-width, $key-space-max-width);
+}
+
+///
+/// Special keys (shift, backspace, enter).
+///
+@mixin key_special {
+    min-width: var(--key-special-width, $key-special-width);
+    background: var(--key-special-bg, $key-special-bg);
+}
+
+///
+/// Mode switch key.
+///
+@mixin key_mode {
+    min-width: var(--key-special-width, $key-special-width);
+    background: var(--key-special-bg, $key-special-bg);
+}
+
+///
+/// Active/pressed key state.
+///
+@mixin key_active {
+    background: var(--key-bg-active, $key-bg-active);
+    transform: translateY(0) scale(0.95);
+}
+
+///
+/// Highlighted key state.
+///
+@mixin key_highlight {
+    background: var(--key-bg-active, $key-bg-active);
+    animation: key-glow 1s ease-in-out infinite;
+}
+
+
+// ============================================================================
+// Key Animations
+// ============================================================================
+
+///
+/// Key press animation keyframes.
+///
+@mixin keyframes_key_press {
+    @keyframes key-press {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(0.92);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+}
+
+///
+/// Key glow animation keyframes.
+///
+@mixin keyframes_key_glow {
+    @keyframes key-glow {
+        0%, 100% {
+            box-shadow: 0 0 0 rgba(102, 126, 234, 0);
+        }
+        50% {
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
+        }
+    }
+}
+
+
+// ============================================================================
+// Keyboard Layouts
+// ============================================================================
+
+///
+/// Compact keyboard layout.
+///
+@mixin keyboard_compact {
+    --keyboard-padding: 0.5rem;
+    --keyboard-gap: 4px;
+    --key-min-width: 32px;
+    --key-height: 40px;
+    --key-font-size: 14px;
+}
+
+///
+/// Large keyboard layout.
+///
+@mixin keyboard_large {
+    --keyboard-padding: 1.5rem;
+    --keyboard-gap: 8px;
+    --key-min-width: 48px;
+    --key-height: 56px;
+    --key-font-size: 18px;
+}
+
+///
+/// Floating keyboard styling.
+///
+@mixin keyboard_floating {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+    transform: translateY(0);
+    transition: transform 0.3s ease;
+}
+
+///
+/// Dark theme keyboard.
+///
+@mixin keyboard_dark {
+    --keyboard-bg: #1a1a2e;
+    --key-bg: #2d2d44;
+    --key-bg-hover: #3d3d5c;
+}
+
+///
+/// Light theme keyboard.
+///
+@mixin keyboard_light {
+    --keyboard-bg: #e5e5e5;
+    --key-bg: #ffffff;
+    --key-bg-hover: #f0f0f0;
+    --key-color: #333333;
+}
+
+
+// ============================================================================
+// Keyboard Input Mixins
+// ============================================================================
+
+///
+/// Keyboard input field.
+///
+@mixin keyboard_input {
+    width: 100%;
+    padding: 1rem;
+    font-size: 18px;
+    border: 2px solid var(--keyboard-input-border, #444);
+    border-radius: 8px;
+    background: var(--keyboard-input-bg, #0d1117);
+    color: var(--keyboard-input-color, white);
+    margin-bottom: 1.5rem;
+
+    &:focus {
+        outline: none;
+        border-color: var(--keyboard-input-focus, #667eea);
+    }
+}
+
+
+// ============================================================================
+// Keyboard Mode Mixins
+// ============================================================================
+
+///
+/// Mode button container.
+///
+@mixin keyboard_modes {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    justify-content: center;
+}
+
+///
+/// Mode button styling.
+///
+@mixin keyboard_mode_btn {
+    padding: 0.5rem 1rem;
+    border: 2px solid var(--keyboard-mode-border, #667eea);
+    border-radius: 8px;
+    background: transparent;
+    color: var(--keyboard-mode-color, #667eea);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &.active {
+        background: var(--keyboard-mode-active-bg, #667eea);
+        color: var(--keyboard-mode-active-color, white);
+    }
+}
+
+
+// ============================================================================
+// Keyboard Stats Mixins
+// ============================================================================
+
+///
+/// Stats display for keyboard metrics.
+///
+@mixin keyboard_stats {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--keyboard-stats-border, #444);
+    color: var(--keyboard-stats-color, #aaa);
+    font-size: 14px;
+
+    span {
+        color: var(--keyboard-stats-value, #667eea);
+        font-weight: 600;
+    }
+}
+

package/{scss/mixins/mouse → dist/scss/mixins/controls}/_pointer.scss

@@ -1,40 +1,28 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
-/// Pointers Mixin Module
-/// ===========================================================================
-///
-/// This module provides mixins for managing pointer events in CSS, allowing 
-/// for easy application of the `pointer-events` property with support for both 
-/// global and keyword values. These mixins are useful for managing user 
-/// interactions on various elements, including SVGs and standard HTML 
-/// elements. The module includes simplified mixins for frequently used 
-/// pointer-event states and utility mixins to handle hover styles based on 
-/// pointer-event settings.
-/// 
-/// 
-/// @group Mouse
+///
+/// Pointer Controls Mixin Module
+/// =========================================================================
+///
+/// Provides mixins for managing pointer events in CSS. Allows easy
+/// application of the `pointer-events` property with support for both
+/// global and keyword values. Useful for managing user interactions
+/// on various elements, including SVGs and standard HTML elements.
+///
+/// @group Controls
 /// @author Scape Agency
 /// @link https://move.gl
 /// @since 0.1.0 initial release
-/// @todo None
 /// @access public
-/// 
+///
 ////
 
 
-
-
 // ============================================================================
 // Use
 // ============================================================================
 
-@use "../dev" as *;
-@use "../variables" as *;
-@use "../mixins" as *;
+@use "../../variables" as *;
+@use "../../maps" as *;
 
 
 // ============================================================================
@@ -42,8 +30,11 @@
 // ============================================================================
 
 ///
-/// Mixin for setting pointer-events property with support for both global and 
-/// keyword values. This mixin can be used to enable or disable pointer events 
+/// Pointer Events Mixin
+/// ---------------------------------------------------------------------------
+///
+/// Mixin for setting pointer-events property with support for both global and
+/// keyword values. This mixin can be used to enable or disable pointer events
 /// on an element.
 ///
 /// @name pointer_events
@@ -62,59 +53,65 @@
 // Global Pointer Event Values
 // ============================================================================
 
+///
+/// ---------------------------------------------------------------------------
 ///
 /// Mixin for setting pointer-events to inherit from parent element.
-/// 
+///
 /// @name pointer_inherit
 /// @example scss - Usage
 ///   .element { @include pointer_inherit; } // Inherits pointer-events from parent
 ///
-@mixin pointer_inherit { 
-    @include pointer_events(inherit); 
+@mixin pointer_inherit {
+    @include pointer_events(inherit);
 }
 
 ///
 /// Mixin for setting pointer-events to initial value.
-/// 
+/// ---------------------------------------------------------------------------
+///
 /// @name pointer_initial
 /// @example scss - Usage
 ///   .element { @include pointer_initial; } // Sets pointer-events to initial
 ///
-@mixin pointer_initial { 
-    @include pointer_events(initial); 
+@mixin pointer_initial {
+    @include pointer_events(initial);
 }
 
 ///
 /// Mixin for setting pointer-events to revert.
-/// 
+/// ---------------------------------------------------------------------------
+///
 /// @name pointer_revert
 /// @example scss - Usage
 ///   .element { @include pointer_revert; } // Reverts pointer-events to previous value
 ///
-@mixin pointer_revert { 
-    @include pointer_events(revert); 
+@mixin pointer_revert {
+    @include pointer_events(revert);
 }
 
 ///
 /// Mixin for setting pointer-events to revert-layer.
-/// 
+/// ---------------------------------------------------------------------------
+///
 /// @name pointer_revert-layer
 /// @example scss - Usage
 ///   .element { @include pointer_revert-layer; } // Sets pointer-events to revert-layer
 ///
-@mixin pointer_revert-layer { 
-    @include pointer_events(revert-layer); 
+@mixin pointer_revert-layer {
+    @include pointer_events(revert-layer);
 }
 
 ///
 /// Mixin for setting pointer-events to unset.
-/// 
+/// ---------------------------------------------------------------------------
+///
 /// @name pointer_unset
 /// @example scss - Usage
 ///   .element { @include pointer_unset; } // Sets pointer-events to unset
 ///
-@mixin pointer_unset { 
-    @include pointer_events(unset); 
+@mixin pointer_unset {
+    @include pointer_events(unset);
 }
 
 // ============================================================================
@@ -123,75 +120,81 @@
 
 ///
 /// Mixin for setting pointer-events to auto, enabling all interactions.
-/// 
+/// ---------------------------------------------------------------------------
+///
 /// @name pointer_auto
 /// @example scss - Usage
 ///   .element { @include pointer_auto; } // Enables pointer events
 ///
-@mixin pointer_auto { 
-    @include pointer_events(auto); 
+@mixin pointer_auto {
+    @include pointer_events(auto);
 }
 
 ///
 /// Mixin for setting pointer-events to none, disabling all interactions.
-/// 
+/// ---------------------------------------------------------------------------
+///
 /// @name pointer_none
 /// @example scss - Usage
 ///   .element { @include pointer_none; } // Disables pointer events
 ///
-@mixin pointer_none { 
-    @include pointer_events(none); 
+@mixin pointer_none {
+    @include pointer_events(none);
 }
 
 ///
 /// Mixin for setting pointer-events to all (SVG Only).
-/// 
+/// ---------------------------------------------------------------------------
+///
 /// @name pointer_all
 /// @example scss - Usage
 ///   .svg-element { @include pointer_all; } // Enables all pointer events on SVG
 ///
-@mixin pointer_all { 
-    @include pointer_events(all); 
+@mixin pointer_all {
+    @include pointer_events(all);
 }
 
 // Additional SVG-specific pointer-events mixins
 
-@mixin pointer_fill { 
-    @include pointer_events(fill); 
+@mixin pointer_fill {
+    @include pointer_events(fill);
 }
 
-@mixin pointer_painted { 
-    @include pointer_events(painted); 
+@mixin pointer_painted {
+    @include pointer_events(painted);
 }
 
-@mixin pointer_stroke { 
-    @include pointer_events(stroke); 
+@mixin pointer_stroke {
+    @include pointer_events(stroke);
 }
 
-@mixin pointer_visible { 
-    @include pointer_events(visible); 
+@mixin pointer_visible {
+    @include pointer_events(visible);
 }
 
-@mixin pointer_visible-fill { 
-    @include pointer_events(visibleFill); 
+@mixin pointer_visible-fill {
+    @include pointer_events(visibleFill);
 }
 
-@mixin pointer_visible-painted { 
-    @include pointer_events(visiblePainted); 
+@mixin pointer_visible-painted {
+    @include pointer_events(visiblePainted);
 }
 
-@mixin pointer_visible-stroke { 
-    @include pointer_events(visibleStroke); 
+@mixin pointer_visible-stroke {
+    @include pointer_events(visibleStroke);
 }
 
 // ============================================================================
 // Utility Mixins
 // ============================================================================
 
+///
+///
+/// ---------------------------------------------------------------------------
 ///
 /// Mixin for applying hover styles only when pointer events are enabled.
 /// This ensures hover styles do not apply if the element is non-interactive.
-/// 
+///
 /// @name pointer_hover_check
 /// @example scss - Usage
 ///   .interactive-element {
@@ -202,16 +205,19 @@
 ///
 @mixin pointer_hover_check {
     @if pointer-events != 'none' {
-        &:hover { 
-            @content; 
+        &:hover {
+            @content;
         }
     }
 }
 
+///
+///
+/// ---------------------------------------------------------------------------
 ///
 /// Simplified mixin for commonly used global pointer-events values.
 /// Accepts 'inherit', 'initial', 'revert', 'revert-layer', and 'unset'.
-/// 
+///
 /// @name pointer_global
 /// @param {String} $value - The global value for pointer-events.
 /// @example scss - Usage
@@ -221,10 +227,13 @@
     @include pointer_events($value);
 }
 
+///
+///
+/// ---------------------------------------------------------------------------
 ///
 /// Simplified mixin for commonly used keyword pointer-events values.
 /// Accepts 'auto', 'none', 'all' and SVG-specific values.
-/// 
+///
 /// @name pointer_keyword
 /// @param {String} $value - The keyword value for pointer-events.
 /// @example scss - Usage
@@ -247,11 +256,11 @@
 .interactive-element {
     @include pointer_auto; // Enables pointer events
 }
-  
+
 .non-interactive-element {
     @include pointer_none; // Disables pointer events
 }
-  
+
 .custom-element {
     @include pointer_visible-painted; // Applies visiblePainted for SVG elements
 }