mtrl 0.2.1 → 0.2.3

package/src/components/tooltip/types.ts

@@ -0,0 +1,178 @@
+// src/components/tooltip/types.ts
+import { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS } from './constants';
+
+/**
+ * Configuration interface for the Tooltip component
+ * @category Components
+ */
+export interface TooltipConfig {
+  /** 
+   * Tooltip content text
+   * @example 'Delete item'
+   */
+  text?: string;
+  
+  /** 
+   * HTML element that triggers the tooltip
+   * @example document.querySelector('#my-button')
+   */
+  target?: HTMLElement;
+  
+  /** 
+   * Tooltip position relative to the target
+   * @default 'bottom'
+   */
+  position?: keyof typeof TOOLTIP_POSITIONS | string;
+  
+  /** 
+   * Tooltip variant that determines visual styling
+   * @default 'default'
+   */
+  variant?: keyof typeof TOOLTIP_VARIANTS | string;
+  
+  /** 
+   * Whether the tooltip is initially visible
+   * @default false
+   */
+  visible?: boolean;
+  
+  /** 
+   * Show delay in milliseconds
+   * @default 300
+   */
+  showDelay?: number;
+  
+  /** 
+   * Hide delay in milliseconds
+   * @default 100
+   */
+  hideDelay?: number;
+  
+  /** 
+   * Whether to show the tooltip on focus
+   * @default true
+   */
+  showOnFocus?: boolean;
+  
+  /** 
+   * Whether to show the tooltip on hover
+   * @default true
+   */
+  showOnHover?: boolean;
+  
+  /** 
+   * Additional CSS classes to add to the tooltip
+   */
+  class?: string;
+  
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+  
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
+  
+  /**
+   * Optional z-index for the tooltip
+   */
+  zIndex?: number;
+  
+  /**
+   * Whether to enable rich (HTML) content
+   * @default false
+   */
+  rich?: boolean;
+}
+
+/**
+ * Tooltip component interface
+ * @category Components
+ */
+export interface TooltipComponent {
+  /** The tooltip's DOM element */
+  element: HTMLElement;
+  
+  /** The tooltip's target element */
+  target: HTMLElement | null;
+  
+  /** 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;
+  
+  /**
+   * Sets the tooltip text content
+   * @param text - New text content
+   * @returns The tooltip component for chaining
+   */
+  setText: (text: string) => TooltipComponent;
+  
+  /**
+   * Gets the tooltip text content
+   * @returns Tooltip text content
+   */
+  getText: () => string;
+  
+  /**
+   * Sets the tooltip position
+   * @param position - Position value
+   * @returns The tooltip component for chaining
+   */
+  setPosition: (position: keyof typeof TOOLTIP_POSITIONS | string) => TooltipComponent;
+  
+  /**
+   * Gets the current tooltip position
+   * @returns Current position
+   */
+  getPosition: () => string;
+  
+  /**
+   * Sets the tooltip target element
+   * @param target - Element to attach tooltip to
+   * @returns The tooltip component for chaining
+   */
+  setTarget: (target: HTMLElement) => TooltipComponent;
+  
+  /**
+   * Shows the tooltip
+   * @param immediate - Whether to show immediately (bypassing delay)
+   * @returns The tooltip component for chaining
+   */
+  show: (immediate?: boolean) => TooltipComponent;
+  
+  /**
+   * Hides the tooltip
+   * @param immediate - Whether to hide immediately (bypassing delay)
+   * @returns The tooltip component for chaining
+   */
+  hide: (immediate?: boolean) => TooltipComponent;
+  
+  /**
+   * Checks if the tooltip is currently visible
+   * @returns Whether the tooltip is visible
+   */
+  isVisible: () => boolean;
+  
+  /**
+   * Updates the tooltip's position relative to its target
+   * @returns The tooltip component for chaining
+   */
+  updatePosition: () => TooltipComponent;
+  
+  /**
+   * Destroys the tooltip component and cleans up resources
+   */
+  destroy: () => void;
+}

package/src/index.ts

@@ -2,13 +2,21 @@
 export { createElement } from './core/dom/create'
 export { default as createLayout } from './core/layout'
 export { default as createButton } from './components/button'
+export { default as createBadge } from './components/badge'
 export { default as createCard } from './components/card'
+export { default as createCarousel } from './components/carousel'
 export { default as createCheckbox } from './components/checkbox'
 export { default as createChip } from './components/chip'
+export { default as createDialog } from './components/dialog'
 export { default as createMenu } from './components/menu'
 export { default as createNavigation } from './components/navigation'
 export { default as createProgress } from './components/progress'
+export { default as createRadios } from './components/radios'
+export { default as createSheet } from './components/sheet'
+export { default as createSlider } from './components/slider'
 export { default as createSnackbar } from './components/snackbar'
 export { default as createSwitch } from './components/switch'
+export { default as createTabs } from './components/tabs'
 export { default as createTextfield } from './components/textfield'
-export { default as createList } from './components/list'
+export { default as createTooltip } from './components/tooltip'
+export { default as createList } from './components/list'

package/src/styles/abstract/_variables.scss

@@ -180,6 +180,22 @@ $z-index: (
 ) !default;
 
 // Component-specific tokens
+$card: (
+  'width': 344px,
+  'width-small': 344px,
+  'width-medium': 480px,
+  'width-large': 624px,
+  'border-radius': 12px,
+  'padding': 16px
+) !default;
+
+// Chip configuration
+$chip-config: (
+  'height': 32px,
+  'border-radius': 8px,
+  'padding-horizontal': 12px
+) !default;
+
 $button: (
   'height': 40px,
   'min-width': 64px,
@@ -222,4 +238,12 @@ $button: (
 
 @function button($prop) {
   @return map.get($button, $prop);
+}
+
+@function card($key) {
+  @return map.get($card, $key);
+}
+
+@function chip($key) {
+  @return map.get($chip-config, $key);
 }

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "noImplicitAny": false,
+    "allowJs": true,
+    "noErrorTruncation": true,
+    "noEmitOnError": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.spec.ts"]
+}

package/typedoc.json

@@ -0,0 +1,28 @@
+// typedoc.json
+{
+  "entryPoints": ["./src/index.ts"],
+  "out": "docs",
+  "name": "MTRL Documentation",
+  "exclude": ["**/node_modules/**", "**/*.test.ts", "**/*.spec.ts"],
+  "excludePrivate": true,
+  "excludeExternals": true,
+  "theme": "default",
+  "categoryOrder": ["Core", "Components", "Utilities", "*"],
+  "categorizeByGroup": true,
+  "readme": "README.md",
+  "includeVersion": true,
+  "hideGenerator": true,
+  "searchInComments": true,
+  "sort": ["static-first", "alphabetical"],
+  "navigationLinks": {
+    "GitHub": "https://github.com/floor/mtrl"
+  },
+  "skipErrorChecking": true,
+  "skipLibCheck": true,
+  "skipDiagnostics": true,
+  "disableSources": false,
+  "validation": {
+    "invalidLink": false,
+    "notDocumented": false
+  }
+}

package/typedoc.simple.json

@@ -0,0 +1,14 @@
+// typedoc.simple.json
+{
+  "entryPoints": ["./src/index.js"],
+  "out": "docs",
+  "name": "MTRL Documentation",
+  "exclude": ["**/node_modules/**", "**/*.test.js", "**/*.spec.js"],
+  "excludePrivate": true,
+  "theme": "default",
+  "readme": "README.md",
+  "includeVersion": true,
+  "entryPointStrategy": "expand",
+  "treatWarningsAsErrors": false,
+  "tsconfig": false
+}