mtrl 0.2.2 → 0.2.3

package/src/components/tabs/types.ts

@@ -0,0 +1,247 @@
+// src/components/tabs/types.ts
+import { TABS_VARIANTS } from './constants';
+
+/**
+ * Tab item configuration
+ * @category Components
+ */
+export interface TabItem {
+  /**
+   * Unique identifier for the tab
+   */
+  id: string;
+  
+  /**
+   * Display label for the tab
+   */
+  label: string;
+  
+  /**
+   * Optional icon HTML content
+   */
+  icon?: string;
+  
+  /**
+   * Whether the tab is disabled
+   * @default false
+   */
+  disabled?: boolean;
+  
+  /**
+   * Additional data to associate with this tab
+   */
+  data?: any;
+}
+
+/**
+ * Configuration interface for the Tabs component
+ * @category Components
+ */
+export interface TabsConfig {
+  /**
+   * Tabs variant that determines visual styling
+   * @default 'primary'
+   */
+  variant?: keyof typeof TABS_VARIANTS | string;
+  
+  /**
+   * Initial tab items
+   */
+  items?: TabItem[];
+  
+  /**
+   * Index of the initially active tab
+   * @default 0
+   */
+  activeIndex?: number;
+  
+  /**
+   * Whether the tabs component is initially disabled
+   * @default false
+   */
+  disabled?: boolean;
+  
+  /**
+   * Whether to show tab indicator
+   * @default true 
+   */
+  showIndicator?: boolean;
+  
+  /**
+   * Whether to enable animated transitions
+   * @default true
+   */
+  animated?: boolean;
+  
+  /**
+   * Whether tabs should be scrollable when they overflow
+   * @default true
+   */
+  scrollable?: boolean;
+  
+  /**
+   * Additional CSS classes to add to the tabs component
+   */
+  class?: string;
+  
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+  
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
+}
+
+/**
+ * Tabs component interface
+ * @category Components
+ */
+export interface TabsComponent {
+  /** The tabs container DOM element */
+  element: HTMLElement;
+  
+  /** The tabs list DOM element */
+  tabsListElement: HTMLElement;
+  
+  /** The tab indicator DOM element */
+  indicatorElement: HTMLElement;
+  
+  /** API for managing disabled state */
+  disabled: {
+    /** Enables the tabs component */
+    enable: () => void;
+    /** Disables the tabs component */
+    disable: () => void;
+    /** Checks if the tabs component is disabled */
+    isDisabled: () => boolean;
+  };
+  
+  /** API for managing component lifecycle */
+  lifecycle: {
+    /** Destroys the component and cleans up resources */
+    destroy: () => void;
+  };
+  
+  /**
+   * Gets a class name with the component's prefix
+   * @param name - Base class name
+   * @returns Prefixed class name
+   */
+  getClass: (name: string) => string;
+  
+  /**
+   * Enables the tabs component
+   * @returns The tabs component for chaining
+   */
+  enable: () => TabsComponent;
+  
+  /**
+   * Disables the tabs component
+   * @returns The tabs component for chaining
+   */
+  disable: () => TabsComponent;
+  
+  /**
+   * Gets all tab items
+   * @returns Array of tab items
+   */
+  getItems: () => TabItem[];
+  
+  /**
+   * Sets tab items, replacing any existing tabs
+   * @param items - Array of tab items
+   * @returns The tabs component for chaining
+   */
+  setItems: (items: TabItem[]) => TabsComponent;
+  
+  /**
+   * Adds a new tab
+   * @param item - Tab item configuration
+   * @param index - Optional index to insert at (appends if omitted)
+   * @returns The tabs component for chaining
+   */
+  addTab: (item: TabItem, index?: number) => TabsComponent;
+  
+  /**
+   * Removes a tab by ID or index
+   * @param idOrIndex - Tab ID or index
+   * @returns The tabs component for chaining
+   */
+  removeTab: (idOrIndex: string | number) => TabsComponent;
+  
+  /**
+   * Gets the currently active tab
+   * @returns The active tab item or null if none active
+   */
+  getActiveTab: () => TabItem | null;
+  
+  /**
+   * Gets the index of the currently active tab
+   * @returns The active tab index or -1 if none active
+   */
+  getActiveIndex: () => number;
+  
+  /**
+   * Sets the active tab by index
+   * @param index - Index of the tab to activate
+   * @returns The tabs component for chaining
+   */
+  setActiveTab: (index: number) => TabsComponent;
+  
+  /**
+   * Sets the active tab by ID
+   * @param id - ID of the tab to activate
+   * @returns The tabs component for chaining
+   */
+  setActiveTabById: (id: string) => TabsComponent;
+  
+  /**
+   * Destroys the tabs component and cleans up resources
+   */
+  destroy: () => void;
+  
+  /**
+   * Adds an event listener to the tabs component
+   * @param event - Event name ('change', 'click', etc.)
+   * @param handler - Event handler function
+   * @returns The tabs component for chaining
+   */
+  on: (event: string, handler: Function) => TabsComponent;
+  
+  /**
+   * Removes an event listener from the tabs component
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns The tabs component for chaining
+   */
+  off: (event: string, handler: Function) => TabsComponent;
+}
+
+/**
+ * Event data for tab change events
+ */
+export interface TabChangeEventData {
+  /**
+   * Index of the newly activated tab
+   */
+  index: number;
+  
+  /**
+   * The newly activated tab item
+   */
+  tab: TabItem;
+  
+  /**
+   * Index of the previously active tab or -1
+   */
+  previousIndex: number;
+  
+  /**
+   * The previously active tab item or null
+   */
+  previousTab: TabItem | null;
+}

package/src/components/textfield/_styles.scss

@@ -1,4 +1,4 @@
-// src/components/textfield/styles.scss
+// src/components/textfield/_styles.scss
 @use '../../styles/abstract/base' as base;
 @use '../../styles/abstract/variables' as v;
 @use '../../styles/abstract/functions' as f;
@@ -14,17 +14,102 @@ $component: '#{base.$prefix}-textfield';
   display: inline-flex;
   flex-direction: column;
   min-width: 210px;
-  
+
   // Size variants
   &--small {
     .#{$component}-input {
-      height: 48px;
+      height: 40px;
+      font-size: 14px;
+    }
+    
+    .#{$component}-label {
+      font-size: 14px;
+    }
+    
+    .#{$component}-helper {
+      font-size: 11px;
+      margin-top: 2px;
+    }
+    
+    &.#{$component}--filled {
+      .#{$component}-input {
+        padding: 16px 12px 6px;
+        
+        &:focus {
+          padding-bottom: 5px;
+        }
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-85%) scale(0.75);
+      }
+    }
+    
+    &.#{$component}--outlined {
+      .#{$component}-input {
+        padding: 10px 12px 11px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-130%) scale(0.75);
+      }
+      
+      &.#{$component}--focused .#{$component}-input {
+        height: 38px;
+        padding: 9px 11px 10px;
+      }
     }
   }
-
+  
+  &--medium {
+    // Default size, styles already defined in base
+  }
+  
   &--large {
     .#{$component}-input {
       height: 64px;
+      font-size: 16px;
+    }
+    
+    .#{$component}-label {
+      font-size: 16px;
+    }
+    
+    .#{$component}-helper {
+      font-size: 13px;
+      margin-top: 6px;
+    }
+    
+    &.#{$component}--filled {
+      .#{$component}-input {
+        padding: 26px 20px 8px;
+        
+        &:focus {
+          padding-bottom: 7px;
+        }
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-110%) scale(0.75);
+      }
+    }
+    
+    &.#{$component}--outlined {
+      .#{$component}-input {
+        padding: 16px 20px 17px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-170%) scale(0.75);
+      }
+      
+      &.#{$component}--focused .#{$component}-input {
+        padding: 15px 19px 16px;
+      }
     }
   }
   
@@ -50,6 +135,7 @@ $component: '#{base.$prefix}-textfield';
     @include m.shape('extra-small');
     padding: 13px 16px;
     width: 100%;
+    height: 56px;
     color: t.color('on-surface');
     border: 0;
     appearance: none;
@@ -187,6 +273,12 @@ $component: '#{base.$prefix}-textfield';
         color: t.color('primary');
       }
       
+      .#{$component}-input {
+        height: 55px;
+        padding: 20px 16px 6px;
+      }
+
+
       &:hover {
         border-bottom: 2px solid t.color('primary');
       }
@@ -290,6 +382,7 @@ $component: '#{base.$prefix}-textfield';
       }
       
       .#{$component}-input {
+        height: 54px;
         padding: 12px 15px 13px;
       }
       

package/src/components/tooltip/_styles.scss

@@ -0,0 +1,241 @@
+// src/components/tooltip/_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}-tooltip';
+$arrow-size: 8px;
+
+.#{$component} {
+  // Base styles
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  max-width: 200px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background-color: t.color('inverse-surface');
+  color: t.color('inverse-on-surface');
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.9);
+  transform-origin: center;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  
+  // Typography
+  @include m.typography('body-small');
+  font-weight: 500;
+  
+  // Transition
+  transition:
+    opacity 150ms cubic-bezier(0, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0, 0, 0.2, 1);
+  
+  // States
+  &--visible {
+    opacity: 0.9;
+    transform: scale(1);
+  }
+  
+  // Variants
+  
+  // Default variant
+  &--default {
+    // Default styles already applied in base
+  }
+  
+  // Rich variant (for rich content)
+  &--rich {
+    text-align: left;
+    padding: 8px 12px;
+  }
+  
+  // Plain variant (flat, no shadow)
+  &--plain {
+    background-color: t.color('surface-container-high');
+    color: t.color('on-surface');
+    box-shadow: none;
+    border: 1px solid t.color('outline');
+  }
+  
+  // Arrow styles
+  &__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: $arrow-size solid transparent;
+    pointer-events: none;
+    
+    // Top position (arrow points up)
+    &--top {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-bottom-color: t.color('inverse-surface');
+      border-top-width: 0;
+      
+      .#{$component}--plain & {
+        border-bottom-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Top-start position
+    &--top-start {
+      bottom: 100%;
+      left: $arrow-size;
+      border-bottom-color: t.color('inverse-surface');
+      border-top-width: 0;
+      
+      .#{$component}--plain & {
+        border-bottom-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Top-end position
+    &--top-end {
+      bottom: 100%;
+      right: $arrow-size;
+      border-bottom-color: t.color('inverse-surface');
+      border-top-width: 0;
+      
+      .#{$component}--plain & {
+        border-bottom-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Bottom position (arrow points down)
+    &--bottom {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-top-color: t.color('inverse-surface');
+      border-bottom-width: 0;
+      
+      .#{$component}--plain & {
+        border-top-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Bottom-start position
+    &--bottom-start {
+      top: 100%;
+      left: $arrow-size;
+      border-top-color: t.color('inverse-surface');
+      border-bottom-width: 0;
+      
+      .#{$component}--plain & {
+        border-top-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Bottom-end position
+    &--bottom-end {
+      top: 100%;
+      right: $arrow-size;
+      border-top-color: t.color('inverse-surface');
+      border-bottom-width: 0;
+      
+      .#{$component}--plain & {
+        border-top-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Left position (arrow points left)
+    &--left {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-right-color: t.color('inverse-surface');
+      border-left-width: 0;
+      
+      .#{$component}--plain & {
+        border-right-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Left-start position
+    &--left-start {
+      right: 100%;
+      top: $arrow-size;
+      border-right-color: t.color('inverse-surface');
+      border-left-width: 0;
+      
+      .#{$component}--plain & {
+        border-right-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Left-end position
+    &--left-end {
+      right: 100%;
+      bottom: $arrow-size;
+      border-right-color: t.color('inverse-surface');
+      border-left-width: 0;
+      
+      .#{$component}--plain & {
+        border-right-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Right position (arrow points right)
+    &--right {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-left-color: t.color('inverse-surface');
+      border-right-width: 0;
+      
+      .#{$component}--plain & {
+        border-left-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Right-start position
+    &--right-start {
+      left: 100%;
+      top: $arrow-size;
+      border-left-color: t.color('inverse-surface');
+      border-right-width: 0;
+      
+      .#{$component}--plain & {
+        border-left-color: t.color('surface-container-high');
+      }
+    }
+    
+    // Right-end position
+    &--right-end {
+      left: 100%;
+      bottom: $arrow-size;
+      border-left-color: t.color('inverse-surface');
+      border-right-width: 0;
+      
+      .#{$component}--plain & {
+        border-left-color: t.color('surface-container-high');
+      }
+    }
+  }
+  
+  // Positioning classes
+  &--top {
+    margin-bottom: $arrow-size;
+  }
+  
+  &--bottom {
+    margin-top: $arrow-size;
+  }
+  
+  &--left {
+    margin-right: $arrow-size;
+  }
+  
+  &--right {
+    margin-left: $arrow-size;
+  }
+}