mtrl 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
   "author": "floor",
   "license": "MIT License",
@@ -25,6 +25,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
@@ -32,7 +33,8 @@
     "./styles": "./dist/styles.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
   "scripts": {
     "start": "bun run server.js",

package/src/styles/abstract/_base.scss

@@ -0,0 +1,2 @@
+// src/styles/abstract/_base.scss
+$prefix: 'mtrl';

package/src/styles/abstract/_config.scss

@@ -0,0 +1,28 @@
+// src/styles/abstract/_config.scss
+@use 'variables' as *;
+@forward 'variables';
+@forward 'functions';
+@forward 'mixins' show 
+  typography,
+  state-layer,
+  elevation,
+  motion-transition,
+  motion-exit,
+  motion-enter,
+  focus-ring,
+  interactive-states,
+  flex-center,
+  center-content,
+  container,
+  truncate,
+  shape,
+  breakpoint-up,
+  breakpoint-down,
+  breakpoint-between,
+  visually-hidden,
+  reduced-motion,
+  high-contrast,
+  rtl,
+  touch-target,
+  custom-scrollbar,
+  print;

package/src/styles/abstract/_functions.scss

@@ -0,0 +1,124 @@
+// src/styles/abstract/_functions.scss
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:color';
+@use 'variables' as v;
+
+// Get nested map value
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}
+
+// Get value from design tokens
+@function get-token($category, $token) {
+  $token-map: null;
+  
+  @if $category == 'state' {
+    $token-map: v.$state;
+  } @else if $category == 'motion' {
+    $token-map: v.$motion;
+  } @else if $category == 'elevation' {
+    $token-map: v.$elevation;
+  } @else if $category == 'typescale' {
+    $token-map: v.$typescale;
+  } @else if $category == 'shape' {
+    $token-map: v.$shape;
+  } @else if $category == 'z-index' {
+    $token-map: v.$z-index;
+  }
+  
+  @if not $token-map {
+    @error 'Unknown token category: #{$category}';
+  }
+  
+  $value: map.get($token-map, $token);
+  
+  @if not $value {
+    @error 'Unknown token: #{$token} in category #{$category}';
+  }
+  
+  @return $value;
+}
+
+// State Layer
+@function get-state-opacity($state) {
+  @return get-token('state', '#{$state}-state-layer-opacity');
+}
+
+// Motion
+@function get-motion-duration($duration) {
+  @return get-token('motion', 'duration-#{$duration}');
+}
+
+@function get-motion-easing($easing) {
+  @return get-token('motion', 'easing-#{$easing}');
+}
+
+// Elevation
+@function get-elevation($level) {
+  @return get-token('elevation', 'level-#{$level}');
+}
+
+// Typography
+@function get-typography($scale) {
+  @return get-token('typescale', $scale);
+}
+
+// Shape
+@function get-shape($size) {
+  @return get-token('shape', $size);
+}
+
+// Z-index
+@function get-z-index($layer) {
+  @return get-token('z-index', $layer);
+}
+
+// Breakpoints
+@function get-breakpoint($size) {
+  @return map.get(v.$breakpoints, $size);
+}
+
+// Color utilities
+@function get-luminance($color) {
+  $red: color.red($color);
+  $green: color.green($color);
+  $blue: color.blue($color);
+  
+  $luminance: ($red * 0.299 + $green * 0.587 + $blue * 0.114) / 255;
+  @return $luminance;
+}
+
+@function is-light-color($color) {
+  @return get-luminance($color) > 0.6;
+}
+
+@function get-contrast-color($color, $light: #fff, $dark: #000) {
+  @return if(is-light-color($color), $dark, $light);
+}
+
+// Unit conversion utilities
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return math.div($number, ($number * 0 + 1));
+  }
+  @return $number;
+}
+
+@function to-rem($size, $base-size: 16px) {
+  $rem-size: math.div(strip-unit($size), strip-unit($base-size));
+  @return #{$rem-size}rem;
+}
+
+@function to-em($size, $base-size: 16px) {
+  $em-size: math.div(strip-unit($size), strip-unit($base-size));
+  @return #{$em-size}em;
+}
+
+// Value constraint utility
+@function constrain($min, $value, $max) {
+  @return max($min, min($value, $max));
+}

package/src/styles/abstract/_mixins.scss

@@ -0,0 +1,401 @@
+// src/styles/abstract/_mixins.scss
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:math';
+@use 'variables' as v;
+@use 'functions' as f;
+
+// Common icons map
+$icons: (
+  'chevron_right': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="9 18 15 12 9 6"%3E%3C/polyline%3E%3C/svg%3E',
+  'chevron_down': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E',
+  'check': 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="20 6 9 17 4 12"%3E%3C/polyline%3E%3C/svg%3E'
+);
+
+@mixin icon($name, $size: 24px) {
+  $icon-url: map.get($icons, $name);
+  @if $icon-url {
+    content: '';
+    display: inline-block;
+    width: $size;
+    height: $size;
+    background-image: url($icon-url);
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
+// Typography
+@mixin typography($scale) {
+  $styles: f.get-typography($scale);
+  font-family: map.get($styles, 'font-family');
+  font-size: map.get($styles, 'font-size');
+  line-height: map.get($styles, 'line-height');
+  letter-spacing: map.get($styles, 'letter-spacing');
+  font-weight: map.get($styles, 'font-weight');
+}
+
+// State Layers
+@mixin state-layer($color, $state: 'hover', $selector: false) {
+  position: relative;
+  
+  @if $selector == false {
+    // Default behavior - create a pseudo-element for the state layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: $color;
+      opacity: f.get-state-opacity($state);
+      pointer-events: none;
+      border-radius: inherit;
+    }
+  } @else {
+    // Use the provided selector
+    #{$selector} {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: $color;
+      opacity: f.get-state-opacity($state);
+      pointer-events: none;
+      border-radius: inherit;
+    }
+  }
+}
+
+// Elevation
+@mixin elevation($level) {
+  box-shadow: f.get-elevation($level);
+}
+
+// Motion
+@mixin motion-transition($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short2') v.motion('easing-standard'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+@mixin motion-exit($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short4') v.motion('easing-exit'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+@mixin motion-enter($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short4') v.motion('easing-enter'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+// New mixins for specific animation behaviors
+@mixin motion-appear($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short3') v.motion('easing-appear'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+@mixin motion-disappear($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short2') v.motion('easing-disappear'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+@mixin motion-expand($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short4') v.motion('easing-expand'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+@mixin motion-collapse($properties...) {
+  $transitions: ();
+  @each $prop in $properties {
+    $transitions: list.append(
+      $transitions,
+      $prop f.get-motion-duration('short3') v.motion('easing-collapse'),
+      comma
+    );
+  }
+  transition: $transitions;
+}
+
+// Focus Ring
+@mixin focus-ring($color: var(--#{v.$prefix}-sys-color-primary), $width: 2px, $offset: 2px) {
+  &:focus-visible {
+    outline: $width solid $color;
+    outline-offset: $offset;
+    @include elevation(1);
+  }
+}
+
+// Interactive States
+@mixin interactive-states($config: ()) {
+  $default-config: (
+    base-color: var(--#{v.$prefix}-sys-color-primary),
+    hover-state: true,
+    focus-state: true,
+    active-state: true,
+    disabled-state: true,
+    disabled-opacity: 0.38
+  );
+  
+  $config: map.merge($default-config, $config);
+  
+  @if map.get($config, hover-state) {
+    &:hover {
+      @include state-layer(map.get($config, base-color), 'hover');
+    }
+  }
+  
+  @if map.get($config, focus-state) {
+    &:focus {
+      @include state-layer(map.get($config, base-color), 'focus');
+    }
+  }
+  
+  @if map.get($config, active-state) {
+    &:active {
+      @include state-layer(map.get($config, base-color), 'pressed');
+    }
+  }
+  
+  @if map.get($config, disabled-state) {
+    &:disabled {
+      opacity: map.get($config, disabled-opacity);
+      pointer-events: none;
+    }
+  }
+}
+
+// Layout
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin center-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin container($max-width: 1200px, $padding: 24px) {
+  width: 100%;
+  max-width: $max-width;
+  margin-inline: auto;
+  padding-inline: $padding;
+}
+
+// Text
+@mixin truncate($lines: 1) {
+  @if $lines == 1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+// Shape
+@mixin shape($size) {
+  border-radius: f.get-shape($size);
+}
+
+// Media Queries
+@mixin breakpoint-up($size) {
+  @media (min-width: f.get-breakpoint($size)) {
+    @content;
+  }
+}
+
+@mixin breakpoint-down($size) {
+  @media (max-width: f.get-breakpoint($size) - 1) {
+    @content;
+  }
+}
+
+@mixin breakpoint-between($min, $max) {
+  @media (min-width: f.get-breakpoint($min)) and (max-width: f.get-breakpoint($max) - 1) {
+    @content;
+  }
+}
+
+// A11y
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+@mixin high-contrast {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
+// RTL Support
+@mixin rtl {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+@mixin touch-target($size: 48px) {
+  // Position first to avoid the deprecation warning
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 50%;
+    width: $size;
+    height: $size;
+    transform: translate(-50%, -50%);
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+  
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
+// Scrollbars
+@mixin custom-scrollbar($config: ()) {
+  $default-config: (
+    width: 8px,
+    track-color: transparent,
+    thumb-color: rgba(0, 0, 0, 0.2),
+    thumb-hover-color: rgba(0, 0, 0, 0.3)
+  );
+  
+  $config: map.merge($default-config, $config);
+  
+  &::-webkit-scrollbar {
+    width: map.get($config, width);
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: map.get($config, track-color);
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: map.get($config, thumb-color);
+    border-radius: f.get-shape('full');
+    
+    &:hover {
+      background: map.get($config, thumb-hover-color);
+    }
+  }
+}
+
+
+// Scrollbar mixin for consistent styling across components
+@mixin scrollbar(
+  $width: 8px,
+  $track-color: rgba(0, 0, 0, 0.05),
+  $thumb-color: rgba(0, 0, 0, 0.2)
+) {
+  &::-webkit-scrollbar {
+    width: $width;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: $track-color;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: $thumb-color;
+    border-radius: math.div($width, 2);
+  }
+  
+  // Firefox scrollbar (future compatibility)
+  scrollbar-width: thin;
+  scrollbar-color: $thumb-color $track-color;
+}
+
+
+// Flexbox layout mixins
+@mixin flex-row($align: center, $justify: flex-start, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  align-items: $align;
+  justify-content: $justify;
+  @if $gap > 0 {
+    gap: $gap;
+  }
+}
+
+@mixin flex-column($align: flex-start, $justify: flex-start, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  align-items: $align;
+  justify-content: $justify;
+  @if $gap > 0 {
+    gap: $gap;
+  }
+}
+
+// Print
+@mixin print {
+  @media print {
+    @content;
+  }
+}