mtrl 0.1.3 → 0.2.0

package/src/components/checkbox/api.js

@@ -1,45 +0,0 @@
-// src/components/checkbox/api.js
-
-/**
- * Enhances checkbox component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.disabled - Disabled state handlers
- * @param {Object} options.lifecycle - Lifecycle handlers
- * @param {Object} options.checkable - Checked state handlers
- */
-export const withAPI = ({ disabled, lifecycle, checkable }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  // Value management
-  getValue: component.getValue,
-  setValue (value) {
-    component.setValue(value)
-    return this
-  },
-
-  // State management
-  check: checkable.check,
-  uncheck: checkable.uncheck,
-  toggle: checkable.toggle,
-  isChecked: checkable.isChecked,
-  setIndeterminate: component.setIndeterminate,
-
-  // Label management
-  setLabel (text) {
-    component.text?.setText(text)
-    return this
-  },
-  getLabel () {
-    return component.text?.getText() || ''
-  },
-
-  // Event handling
-  on: component.on,
-  off: component.off,
-
-  // State management
-  enable: disabled.enable,
-  disable: disabled.disable,
-  destroy: lifecycle.destroy
-})

package/src/components/checkbox/checkbox.js

@@ -1,96 +0,0 @@
-// src/components/checkbox/checkbox.js
-
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withTextLabel,
-  withDisabled,
-  withLifecycle,
-  withInput,
-  withCheckable
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { CHECKBOX_VARIANTS } from './constants'
-
-/**
- * Adds check icon to checkbox
- * @param {Object} config - Component configuration
- */
-const withCheckIcon = (config) => (component) => {
-  const icon = document.createElement('span')
-  icon.className = `${config.prefix}-checkbox-icon`
-  icon.innerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-      <path d="M9.55 14.6L6.35 11.4l-1.9 1.9L9.55 18.4l10.9-10.9-1.9-1.9z"/>
-    </svg>
-  `
-
-  component.element.appendChild(icon)
-  return component
-}
-
-/**
- * Creates a new Checkbox component
- * @param {Object} config - Checkbox configuration
- * @param {string} [config.name] - Input name attribute
- * @param {boolean} [config.checked] - Initial checked state
- * @param {boolean} [config.indeterminate] - Initial indeterminate state
- * @param {boolean} [config.required] - Whether input is required
- * @param {boolean} [config.disabled] - Whether checkbox is disabled
- * @param {string} [config.value] - Input value attribute
- * @param {string} [config.label] - Label text
- * @param {string} [config.labelPosition='end'] - Label position (start/end)
- * @param {string} [config.variant='filled'] - Visual variant
- * @param {string} [config.class] - Additional CSS classes
- */
-const createCheckbox = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'checkbox',
-    prefix: PREFIX,
-    variant: config.variant || CHECKBOX_VARIANTS.FILLED
-  }
-
-  const enhancedWithCheckable = (component) => {
-    const enhanced = withCheckable(baseConfig)(component)
-
-    // Add indeterminate state handling
-    if (config.indeterminate) {
-      enhanced.input.indeterminate = true
-    }
-
-    enhanced.setIndeterminate = (state) => {
-      enhanced.input.indeterminate = state
-      enhanced.element.classList.toggle(`${PREFIX}-checkbox--indeterminate`, state)
-      return enhanced
-    }
-
-    return enhanced
-  }
-
-  return pipe(
-    createBase,
-    withEvents(),
-    withElement({
-      tag: 'div',
-      componentName: 'checkbox',
-      className: config.class,
-      interactive: true
-    }),
-    withInput(baseConfig),
-    withCheckIcon(baseConfig),
-    withTextLabel(baseConfig),
-    enhancedWithCheckable,
-    withDisabled(baseConfig), // Pass the baseConfig to withDisabled
-    withLifecycle(),
-    comp => withAPI({
-      disabled: comp.disabled,
-      lifecycle: comp.lifecycle,
-      checkable: comp.checkable
-    })(comp)
-  )(baseConfig)
-}
-
-export default createCheckbox

package/src/components/checkbox/index.js

@@ -1,2 +0,0 @@
-// src/components/checkbox/index.js
-export { default } from './checkbox.js'

package/src/components/container/api.js

@@ -1,42 +0,0 @@
-// src/components/container/api.js
-
-/**
- * Enhances container component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.lifecycle - Lifecycle handlers
- */
-export const withAPI = ({ lifecycle }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  // Attribute management
-  get (prop) {
-    return component.element.getAttribute(prop)
-  },
-  set (prop, value) {
-    value === null
-      ? component.element.removeAttribute(prop)
-      : component.element.setAttribute(prop, value)
-    return this
-  },
-
-  // Content management
-  setContent (content) {
-    if (content instanceof Node) {
-      component.element.appendChild(content)
-    } else {
-      component.element.innerHTML = content
-    }
-    return this
-  },
-  getContent () {
-    return component.element.innerHTML
-  },
-
-  // Event handling
-  on: component.on,
-  off: component.off,
-
-  // Lifecycle
-  destroy: lifecycle.destroy
-})

package/src/components/container/container.js

@@ -1,45 +0,0 @@
-// src/components/container/container.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withEvents, withLifecycle } from '../../core/compose/features'
-import { withAPI } from './api'
-
-/**
- * Creates a new Container component
- * @param {Object} config - Container configuration
- * @param {string} [config.variant] - Visual variant
- * @param {number} [config.elevation] - Elevation level
- * @param {string} [config.class] - Additional CSS classes
- */
-const createContainer = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'container',
-    prefix: PREFIX
-  }
-
-  try {
-    return pipe(
-      createBase,
-      withElement({
-        tag: 'div',
-        componentName: 'container',
-        className: [
-          config.variant && `${PREFIX}-container--${config.variant}`,
-          config.elevation && `${PREFIX}-container--elevation-${config.elevation}`,
-          config.class
-        ]
-      }),
-      withEvents(),
-      withLifecycle(),
-      comp => withAPI({
-        lifecycle: comp.lifecycle
-      })(comp)
-    )(baseConfig)
-  } catch (error) {
-    throw new Error(`Failed to create container: ${error.message}`)
-  }
-}
-
-export default createContainer

package/src/components/container/index.js

@@ -1,2 +0,0 @@
-// src/components/container/index.js
-export { default } from './container.js'

package/src/components/container/styles.scss

@@ -1,66 +0,0 @@
-// src/components/container/_container.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}-container';
-
-.#{$component} {
-  @include m.shape('medium');
-  @include m.motion-transition(
-    background-color,
-    box-shadow
-  );
-  
-  padding: 16px;
-  background-color: t.color('surface-container');
-
-  // Surface container variants
-  &--low {
-    background-color: t.color('surface-container-low');
-  }
-  
-  &--lowest {
-    background-color: t.color('surface-container-lowest'); 
-  }
-
-  &--high {
-    background-color: t.color('surface-container-high');
-  }
-
-  &--highest {
-    background-color: t.color('surface-container-highest');
-  }
-
-  // Elevation variants
-  &--elevation-0 {
-    @include m.elevation(0);
-  }
-
-  &--elevation-1 {
-    @include m.elevation(1);
-  }
-
-  &--elevation-2 {
-    @include m.elevation(2);
-  }
-
-  &--elevation-3 {
-    @include m.elevation(3);
-  }
-
-  &--elevation-4 {
-    @include m.elevation(4);
-  }
-  
-  // Accessibility
-  @include m.reduced-motion {
-    transition: none;
-  }
-
-  @include m.high-contrast {
-    border: 1px solid currentColor;
-  }
-}

package/src/components/list/index.js

@@ -1,2 +0,0 @@
-// src/components/list/index.js
-export { default } from './list.js'

package/src/components/list/list-item.js

@@ -1,147 +0,0 @@
-// src/components/list/list-item.js
-
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withEvents, withDisabled } from '../../core/compose/features'
-
-/**
- * Supported list item layouts
- */
-export const LIST_ITEM_LAYOUTS = {
-  HORIZONTAL: 'horizontal', // Default horizontal layout
-  VERTICAL: 'vertical' // Stacked layout with vertical alignment
-}
-
-/**
- * Creates a DOM element with optional class and content
- * @param {string} tag - HTML tag name
- * @param {string} className - CSS class name
- * @param {string|HTMLElement} [content] - Element content or child element
- * @returns {HTMLElement} Created element
- */
-const createElement = (tag, className, content) => {
-  const element = document.createElement(tag)
-  element.className = className
-  if (content) {
-    if (typeof content === 'string') {
-      element.textContent = content
-    } else {
-      element.appendChild(content)
-    }
-  }
-  return element
-}
-
-/**
- * Creates a list item component
- * @param {Object} config - List item configuration
- * @param {string} [config.layout='horizontal'] - Item layout (horizontal/vertical)
- * @param {string|HTMLElement} [config.leading] - Leading content (icon/avatar)
- * @param {string} [config.headline] - Primary text
- * @param {string} [config.supportingText] - Secondary text
- * @param {string|HTMLElement} [config.trailing] - Trailing content (icon/meta)
- * @param {string} [config.overline] - Text above headline (vertical only)
- * @param {string|HTMLElement} [config.meta] - Meta information (vertical only)
- * @param {boolean} [config.disabled] - Disabled state
- * @param {boolean} [config.selected] - Selected state
- * @param {string} [config.class] - Additional CSS classes
- * @param {string} [config.role='listitem'] - ARIA role
- */
-const createListItem = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'list-item',
-    prefix: PREFIX
-  }
-
-  const createContent = (component) => {
-    const { element } = component
-    const { prefix } = baseConfig
-    const isVertical = config.layout === LIST_ITEM_LAYOUTS.VERTICAL
-
-    // Create content container
-    const content = createElement('div', `${prefix}-list-item-content`)
-
-    // Add leading content (icon/avatar)
-    if (config.leading) {
-      const leading = createElement('div', `${prefix}-list-item-leading`)
-      if (typeof config.leading === 'string') {
-        leading.innerHTML = config.leading
-      } else {
-        leading.appendChild(config.leading)
-      }
-      element.appendChild(leading)
-    }
-
-    // Text wrapper for proper alignment
-    const textWrapper = createElement('div', `${prefix}-list-item-text`)
-
-    // Add overline text (vertical only)
-    if (isVertical && config.overline) {
-      const overline = createElement('div', `${prefix}-list-item-overline`, config.overline)
-      textWrapper.appendChild(overline)
-    }
-
-    // Add headline (primary text)
-    if (config.headline) {
-      const headline = createElement('div', `${prefix}-list-item-headline`, config.headline)
-      textWrapper.appendChild(headline)
-    }
-
-    // Add supporting text (secondary text)
-    if (config.supportingText) {
-      const supporting = createElement('div', `${prefix}-list-item-supporting`, config.supportingText)
-      textWrapper.appendChild(supporting)
-    }
-
-    content.appendChild(textWrapper)
-
-    // Add meta information (vertical only)
-    if (isVertical && config.meta) {
-      const meta = createElement('div', `${prefix}-list-item-meta`)
-      if (typeof config.meta === 'string') {
-        meta.textContent = config.meta
-      } else {
-        meta.appendChild(config.meta)
-      }
-      content.appendChild(meta)
-    }
-
-    element.appendChild(content)
-
-    // Add trailing content (icon/meta)
-    if (config.trailing) {
-      const trailing = createElement('div', `${prefix}-list-item-trailing`)
-      if (typeof config.trailing === 'string') {
-        trailing.innerHTML = config.trailing
-      } else {
-        trailing.appendChild(config.trailing)
-      }
-      element.appendChild(trailing)
-    }
-
-    // Handle selected state
-    if (config.selected) {
-      element.setAttribute('aria-selected', 'true')
-      element.classList.add(`${prefix}-list-item--selected`)
-    }
-
-    return component
-  }
-
-  return pipe(
-    createBase,
-    withEvents(),
-    withElement({
-      tag: 'div',
-      role: config.role || 'listitem',
-      componentName: 'list-item',
-      className: `${config.layout === LIST_ITEM_LAYOUTS.VERTICAL ? 'vertical' : ''} ${config.class || ''}`
-    }),
-    withDisabled(),
-    createContent
-  )(baseConfig)
-}
-
-export default createListItem