mtrl 0.2.2 → 0.2.3

package/src/components/slider/types.ts

@@ -0,0 +1,166 @@
+// src/components/slider/types.ts
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS, SLIDER_EVENTS } from './constants';
+
+/**
+ * Configuration interface for the Slider component
+ */
+export interface SliderConfig {
+  /** Minimum value of the slider */
+  min?: number;
+  
+  /** Maximum value of the slider */
+  max?: number;
+  
+  /** Current value of the slider */
+  value?: number;
+  
+  /** Secondary value for range slider (when using two thumbs) */
+  secondValue?: number;
+  
+  /** Step size for discrete slider */
+  step?: number;
+  
+  /** Whether the slider is disabled */
+  disabled?: boolean;
+  
+  /** Color variant of the slider */
+  color?: keyof typeof SLIDER_COLORS | SLIDER_COLORS;
+  
+  /** Size variant of the slider */
+  size?: keyof typeof SLIDER_SIZES | SLIDER_SIZES;
+  
+  /** Orientation of the slider */
+  orientation?: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS;
+  
+  /** Whether to show tick marks */
+  ticks?: boolean;
+  
+  /** Whether to show tick labels */
+  tickLabels?: boolean | string[];
+  
+  /** Whether to show the current value while dragging */
+  showValue?: boolean;
+  
+  /** Format function for displayed values */
+  valueFormatter?: (value: number) => string;
+  
+  /** Whether to snap to steps while dragging (discrete slider) */
+  snapToSteps?: boolean;
+  
+  /** Whether the slider is a range slider (two thumbs) */
+  range?: boolean;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Event handlers for slider events */
+  on?: {
+    [key in keyof typeof SLIDER_EVENTS]?: (event: SliderEvent) => void;
+  };
+}
+
+/**
+ * Slider event object
+ */
+export interface SliderEvent {
+  /** Slider component instance */
+  slider: SliderComponent;
+  
+  /** Current slider value */
+  value: number;
+  
+  /** Secondary slider value (for range slider) */
+  secondValue?: number;
+  
+  /** Original event if applicable */
+  originalEvent?: Event;
+  
+  /** Whether to prevent the default action */
+  preventDefault: () => void;
+  
+  /** Whether default action was prevented */
+  defaultPrevented: boolean;
+}
+
+/**
+ * Slider component interface
+ */
+export interface SliderComponent {
+  /** Slider element */
+  element: HTMLElement;
+  
+  /** Sets slider value */
+  setValue: (value: number, triggerEvent?: boolean) => SliderComponent;
+  
+  /** Gets slider value */
+  getValue: () => number;
+  
+  /** Sets secondary slider value (for range slider) */
+  setSecondValue: (value: number, triggerEvent?: boolean) => SliderComponent;
+  
+  /** Gets secondary slider value */
+  getSecondValue: () => number | null;
+  
+  /** Sets slider minimum */
+  setMin: (min: number) => SliderComponent;
+  
+  /** Gets slider minimum */
+  getMin: () => number;
+  
+  /** Sets slider maximum */
+  setMax: (max: number) => SliderComponent;
+  
+  /** Gets slider maximum */
+  getMax: () => number;
+  
+  /** Sets slider step size */
+  setStep: (step: number) => SliderComponent;
+  
+  /** Gets slider step size */
+  getStep: () => number;
+  
+  /** Enables the slider */
+  enable: () => SliderComponent;
+  
+  /** Disables the slider */
+  disable: () => SliderComponent;
+  
+  /** Checks if slider is disabled */
+  isDisabled: () => boolean;
+  
+  /** Sets slider color */
+  setColor: (color: keyof typeof SLIDER_COLORS | SLIDER_COLORS) => SliderComponent;
+  
+  /** Gets slider color */
+  getColor: () => string;
+  
+  /** Sets slider size */
+  setSize: (size: keyof typeof SLIDER_SIZES | SLIDER_SIZES) => SliderComponent;
+  
+  /** Gets slider size */
+  getSize: () => string;
+  
+  /** Sets slider orientation */
+  setOrientation: (orientation: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS) => SliderComponent;
+  
+  /** Gets slider orientation */
+  getOrientation: () => string;
+  
+  /** Shows or hides tick marks */
+  showTicks: (show: boolean) => SliderComponent;
+  
+  /** Shows or hides tick labels */
+  showTickLabels: (show: boolean | string[]) => SliderComponent;
+  
+  /** Shows or hides current value while dragging */
+  showCurrentValue: (show: boolean) => SliderComponent;
+  
+  /** Adds event listener */
+  on: (event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) => SliderComponent;
+  
+  /** Removes event listener */
+  off: (event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) => SliderComponent;
+  
+  /** Destroys the slider component and cleans up resources */
+  destroy: () => void;
+}

package/src/components/tabs/_styles.scss

@@ -0,0 +1,224 @@
+// src/components/tabs/_styles.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-tabs';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  
+  // Tabs list container
+  &__list {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    position: relative;
+    
+    // Handle scrollable tabs
+    .#{$component}--scrollable & {
+      overflow-x: auto;
+      scrollbar-width: none; // Firefox
+      -ms-overflow-style: none; // IE/Edge
+      
+      // Hide scrollbar in WebKit
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+  
+  // Individual tab
+  &__tab {
+    position: relative;
+    min-width: 90px;
+    max-width: 360px;
+    height: 48px;
+    padding: 0 16px;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    outline: none;
+    overflow: hidden;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    
+    // Typography
+    @include m.typography('label-large');
+    font-weight: 500;
+    text-align: center;
+    color: t.color('on-surface-variant');
+    
+    // Transitions
+    @include m.motion-transition(
+      color,
+      background-color
+    );
+    
+    // Hover state
+    &:hover:not(:disabled) {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    // Active state
+    &:active:not(:disabled) {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+    
+    // Selected state (active tab)
+    &--active {
+      color: t.color('primary');
+    }
+    
+    // Focus state
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      outline-offset: -2px;
+      z-index: 1;
+    }
+    
+    // Disabled state
+    &:disabled {
+      pointer-events: none;
+      color: t.alpha('on-surface', 0.38);
+      cursor: default;
+    }
+    
+    // Tab content
+    &-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      height: 100%;
+    }
+    
+    // Tab icon
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      
+      svg {
+        width: 18px;
+        height: 18px;
+        fill: currentColor;
+      }
+    }
+    
+    // Tab label
+    &-label {
+      @include m.truncate;
+    }
+  }
+  
+  // Active indicator
+  &__indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: t.color('primary');
+    transform-origin: left center;
+    z-index: 1;
+    
+    .#{$component}--animated & {
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    // Hide indicator if specified
+    .#{$component}--no-indicator & {
+      display: none;
+    }
+  }
+  
+  // Variants
+  
+  // Primary variant (default)
+  &--primary {
+    .#{$component}__tab {
+      color: t.color('on-surface-variant');
+      
+      &--active {
+        color: t.color('primary');
+      }
+    }
+    
+    .#{$component}__indicator {
+      background-color: t.color('primary');
+    }
+  }
+  
+  // Secondary variant
+  &--secondary {
+    .#{$component}__tab {
+      color: t.color('on-surface-variant');
+      
+      &--active {
+        color: t.color('secondary');
+      }
+    }
+    
+    .#{$component}__indicator {
+      background-color: t.color('secondary');
+    }
+  }
+  
+  // Segmented variant (Material Design 3 segmented buttons style)
+  &--segmented {
+    background-color: t.color('surface-container-low');
+    border-radius: 16px;
+    padding: 4px;
+    
+    .#{$component}__list {
+      background-color: transparent;
+    }
+    
+    .#{$component}__tab {
+      border-radius: 12px;
+      color: t.color('on-surface');
+      
+      &--active {
+        background-color: t.color('surface');
+        color: t.color('on-surface');
+        @include m.elevation(1);
+      }
+    }
+    
+    .#{$component}__indicator {
+      display: none;
+    }
+  }
+  
+  // Neutral variant
+  &--neutral {
+    .#{$component}__tab {
+      color: t.color('on-surface-variant');
+      
+      &--active {
+        color: t.color('on-surface');
+      }
+    }
+    
+    .#{$component}__indicator {
+      background-color: t.color('on-surface');
+    }
+  }
+  
+  // Disabled state
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+}