mithril-materialized 2.0.0-beta.2 → 2.0.0-beta.5

package/dist/autocomplete.d.ts

@@ -1,6 +1,6 @@
 import { FactoryComponent } from 'mithril';
-import { InputAttributes } from './input-options';
-export interface AutoCompleteAttributes extends InputAttributes<string> {
+import { InputAttrs } from './input-options';
+export interface AutoCompleteAttrs extends InputAttrs<string> {
     /** The data object defining the autocomplete options */
     data?: Record<string, string | null>;
     /** Limit of how many options are shown. Default: Infinity */
@@ -11,4 +11,4 @@ export interface AutoCompleteAttributes extends InputAttributes<string> {
     onAutocomplete?: (value: string) => void;
 }
 /** Component to auto complete your text input - Pure Mithril implementation */
-export declare const Autocomplete: FactoryComponent<AutoCompleteAttributes>;
+export declare const Autocomplete: FactoryComponent<AutoCompleteAttrs>;

package/dist/button.d.ts

@@ -1,5 +1,5 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
-export interface HtmlAttributes {
+export interface HtmlAttrs {
     id?: string;
     for?: string;
     placeholder?: string;
@@ -7,7 +7,7 @@ export interface HtmlAttributes {
     disabled?: boolean;
     type?: 'submit' | 'button' | 'text' | 'textarea' | 'number';
 }
-export interface ButtonAttributes extends Attributes {
+export interface ButtonAttrs extends Attributes {
     /** Optional (e.g. in case you only want to use an icon) button label */
     label?: string;
     /** Optional icon material-icons name, @see https://materializecss.com/icons.html */
@@ -20,7 +20,7 @@ export interface ButtonAttributes extends Attributes {
      */
     modalId?: string;
     /** Some additional HTML attributes that can be attached to the button */
-    attr?: HtmlAttributes;
+    attr?: HtmlAttrs;
     /** Optional text-based tooltip, @see https://materializecss.com/tooltips.html */
     tooltip?: string;
     /** Optional location for the tooltip */
@@ -31,10 +31,10 @@ export interface ButtonAttributes extends Attributes {
  *
  * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
  */
-export declare const ButtonFactory: (element: string, defaultClassNames: string, type?: string) => FactoryComponent<ButtonAttributes>;
-export declare const Button: m.FactoryComponent<ButtonAttributes>;
-export declare const LargeButton: m.FactoryComponent<ButtonAttributes>;
-export declare const SmallButton: m.FactoryComponent<ButtonAttributes>;
-export declare const FlatButton: m.FactoryComponent<ButtonAttributes>;
-export declare const RoundIconButton: m.FactoryComponent<ButtonAttributes>;
-export declare const SubmitButton: m.FactoryComponent<ButtonAttributes>;
+export declare const ButtonFactory: (element: string, defaultClassNames: string, type?: string) => FactoryComponent<ButtonAttrs>;
+export declare const Button: m.FactoryComponent<ButtonAttrs>;
+export declare const LargeButton: m.FactoryComponent<ButtonAttrs>;
+export declare const SmallButton: m.FactoryComponent<ButtonAttrs>;
+export declare const FlatButton: m.FactoryComponent<ButtonAttrs>;
+export declare const RoundIconButton: m.FactoryComponent<ButtonAttrs>;
+export declare const SubmitButton: m.FactoryComponent<ButtonAttrs>;

package/dist/carousel.d.ts

@@ -25,7 +25,7 @@ export interface CarouselOptions {
     /** Don't wrap around and cycle through items */
     noWrap?: boolean;
 }
-export interface CarouselAttributes extends CarouselOptions, Attributes {
+export interface CarouselAttrs extends CarouselOptions, Attributes {
     /** The list of images */
     items: CarouselItem[];
     /** Called when carousel item changes */
@@ -35,4 +35,4 @@ export interface CarouselAttributes extends CarouselOptions, Attributes {
  * Materialize CSS Carousel component with dynamic positioning
  * Port of the original MaterializeCSS carousel logic
  */
-export declare const Carousel: FactoryComponent<CarouselAttributes>;
+export declare const Carousel: FactoryComponent<CarouselAttrs>;

package/dist/chip.d.ts

@@ -7,7 +7,7 @@ export interface ChipData {
 export interface AutocompleteOption extends ChipData {
     value?: string;
 }
-export interface ChipsAttributes {
+export interface ChipsAttrs {
     id?: string;
     data?: ChipData[];
     placeholder?: string;
@@ -28,4 +28,4 @@ export interface ChipsAttributes {
     onChipDelete?: (chip: ChipData) => void;
     onChipSelect?: (chip: ChipData) => void;
 }
-export declare const Chips: m.FactoryComponent<ChipsAttributes>;
+export declare const Chips: m.FactoryComponent<ChipsAttrs>;

package/dist/code-block.d.ts

@@ -1,8 +1,8 @@
 import { FactoryComponent, Attributes } from 'mithril';
-export interface CodeBlockAttributes extends Attributes {
+export interface CodeBlockAttrs extends Attributes {
     language?: string;
     code: string | string[];
     newRow?: boolean;
 }
 /** A simple code block without syntax high-lighting */
-export declare const CodeBlock: FactoryComponent<CodeBlockAttributes>;
+export declare const CodeBlock: FactoryComponent<CodeBlockAttrs>;

package/dist/collapsible.d.ts

@@ -9,7 +9,7 @@ export interface CollapsibleItem extends Attributes {
     /** Add an material icon in front of the header. */
     iconName?: string;
 }
-export interface CollapsibleAttributes extends Attributes {
+export interface CollapsibleAttrs extends Attributes {
     /** The list of accordeon/collabsible items */
     items: CollapsibleItem[];
     /** If true, only one item can be expanded at a time (accordion mode) */
@@ -23,4 +23,4 @@ export declare const CollapsibleItem: FactoryComponent<CollapsibleItem & {
  * Creates a collabsible or accordion component with pure CSS/Mithril implementation.
  * No MaterializeCSS JavaScript dependencies.
  */
-export declare const Collapsible: FactoryComponent<CollapsibleAttributes>;
+export declare const Collapsible: FactoryComponent<CollapsibleAttrs>;

package/dist/collection.d.ts

@@ -26,7 +26,7 @@ export interface CollectionItem {
     /** Any other virtual element properties, including attributes and event handlers. */
     [property: string]: any;
 }
-export interface CollectionAttributes extends Attributes {
+export interface CollectionAttrs extends Attributes {
     /** Optional header */
     header?: string;
     /** The list of items */
@@ -46,4 +46,4 @@ export declare const AnchorItem: FactoryComponent<{
  * Creates a Collection of items, optionally containing links, headers, secondary content or avatars.
  * @see https://materializecss.com/collections.html
  */
-export declare const Collection: FactoryComponent<CollectionAttributes>;
+export declare const Collection: FactoryComponent<CollectionAttrs>;

package/dist/datepicker.d.ts

@@ -0,0 +1,66 @@
+import { FactoryComponent } from 'mithril';
+import { InputAttrs } from './input-options';
+export interface DatePickerI18n {
+    cancel?: string;
+    clear?: string;
+    done?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+    months?: string[];
+    monthsShort?: string[];
+    weekdays?: string[];
+    weekdaysShort?: string[];
+    weekdaysAbbrev?: string[];
+}
+export interface DatePickerOptions {
+    /** Close when date is selected */
+    autoClose?: boolean;
+    /** The default output format for the input field value */
+    format?: string;
+    /** Custom parse function */
+    parse?: (dateString: string, format: string) => Date | null;
+    /** The initial date to view when first opened */
+    defaultDate?: Date;
+    /** Make the defaultDate the initial selected value */
+    setDefaultDate?: boolean;
+    /** Disable weekends */
+    disableWeekends?: boolean;
+    /** Custom function to disable specific days */
+    disableDayFn?: (date: Date) => boolean;
+    /** First day of week (0: Sunday, 1: Monday etc) */
+    firstDay?: number;
+    /** The earliest date that can be selected */
+    minDate?: Date;
+    /** The latest date that can be selected */
+    maxDate?: Date;
+    /** Number of years either side, or array of upper/lower range */
+    yearRange?: number | number[];
+    /** Show clear button */
+    showClearBtn?: boolean;
+    /** Show week numbers */
+    showWeekNumbers?: boolean;
+    /** Week numbering system: 'iso' (ISO 8601) or 'local' (local convention) */
+    weekNumbering?: 'iso' | 'local';
+    /** Internationalization */
+    i18n?: DatePickerI18n;
+    /** Callback when date is selected */
+    onSelect?: (date: Date) => void;
+    /** Callback when picker is opened */
+    onOpen?: () => void;
+    /** Callback when picker is closed */
+    onClose?: () => void;
+}
+export interface DatePickerAttrs extends InputAttrs<string>, DatePickerOptions {
+    /** Date format attribute (alternative to format property) */
+    format?: string;
+    /** Year range attribute (alternative to yearRange property) */
+    yearrange?: string;
+    /** Legacy: Date label (use label instead) */
+    dateLabel?: string;
+    /** Legacy: Display format (use format instead) */
+    displayFormat?: string;
+}
+/**
+ * Enhanced DatePicker component based on Materialize CSS datepicker
+ */
+export declare const DatePicker: FactoryComponent<DatePickerAttrs>;

package/dist/dropdown.d.ts

@@ -11,7 +11,7 @@ export interface DropdownItem<T extends string | number> {
     /** Add a divider */
     divider?: boolean;
 }
-export interface DropdownAttributes<T extends string | number> extends Attributes {
+export interface DropdownAttrs<T extends string | number> extends Attributes {
     /**
      * Optional id of the dropdown element
      * @default 'dropdown'
@@ -42,4 +42,4 @@ export interface DropdownAttributes<T extends string | number> extends Attribute
     helperText?: string;
 }
 /** Pure TypeScript Dropdown component - no Materialize dependencies */
-export declare const Dropdown: <T extends string | number>() => Component<DropdownAttributes<T>>;
+export declare const Dropdown: <T extends string | number>() => Component<DropdownAttrs<T>>;

package/dist/floating-action-button.d.ts

@@ -1,5 +1,5 @@
 import { FactoryComponent } from 'mithril';
-export interface FloatingActionButtonAttributes {
+export interface FloatingActionButtonAttrs {
     /** Optional classes to add to the top element */
     className?: string;
     /** Optional style to add to the top element, e.g. for positioning it inline */
@@ -34,4 +34,4 @@ export interface FloatingActionButtonAttributes {
 /**
  * Floating Action Button
  */
-export declare const FloatingActionButton: FactoryComponent<FloatingActionButtonAttributes>;
+export declare const FloatingActionButton: FactoryComponent<FloatingActionButtonAttrs>;

package/dist/index.css

@@ -7734,6 +7734,9 @@ label {
   font-size: 1rem;
   margin: 0 auto;
 }
+.datepicker-table.with-week-numbers {
+  width: 310px;
+}
 .datepicker-table thead {
   border-bottom: none;
 }
@@ -7741,6 +7744,13 @@ label {
   padding: 10px 5px;
   text-align: center;
 }
+.datepicker-table th.datepicker-week-header {
+  color: rgba(0, 0, 0, 0.38);
+  font-size: 0.8rem;
+  font-weight: 600;
+  width: 30px;
+  padding: 10px 2px;
+}
 .datepicker-table tr {
   border: none;
 }
@@ -7763,6 +7773,18 @@ label {
   color: rgba(0, 0, 0, 0.3);
   pointer-events: none;
 }
+.datepicker-table td.datepicker-week-number {
+  color: rgba(0, 0, 0, 0.38);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 0;
+  width: 30px;
+  padding: 5px 2px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+}
 
 .datepicker-day-button {
   background-color: transparent;
@@ -7775,9 +7797,6 @@ label {
   cursor: pointer;
   color: inherit;
 }
-.datepicker-day-button:focus {
-  background-color: #eee;
-}
 
 /* Footer */
 .datepicker-footer {
@@ -7816,6 +7835,9 @@ label {
   .datepicker-footer {
     width: 320px;
   }
+  .datepicker-table.with-week-numbers {
+    width: 350px;
+  }
   .datepicker-day-button {
     line-height: 44px;
   }
@@ -7887,82 +7909,188 @@ label {
   min-width: auto;
 }
 
+/* Timepicker Containers */
 .timepicker-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  max-width: 325px;
+  max-height: none;
+}
+
+.timepicker-container.modal-content {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
+  flex-direction: column;
+  padding: 0;
 }
-.timepicker-modal .timepicker-content {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
-  min-width: 320px;
-  max-width: 400px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+.text-primary {
+  color: rgb(255, 255, 255);
 }
-.timepicker-modal .timepicker-content .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+
+/* Clock Digital Display */
+.timepicker-digital-display {
+  flex: 1 auto;
+  background-color: #26a69a;
+  padding: 10px;
+  font-weight: 300;
 }
-.timepicker-modal .timepicker-content .modal-header h5 {
-  margin: 0;
+
+.timepicker-text-container {
+  font-size: 4rem;
+  font-weight: bold;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.timepicker-modal .timepicker-content .modal-header .btn-flat {
-  padding: 4px 8px;
-  font-size: 11px;
-  min-width: auto;
+
+.timepicker-span-hours,
+.timepicker-span-minutes,
+.timepicker-span-am-pm div {
+  cursor: pointer;
 }
-.timepicker-modal .timepicker-content .modal-header .btn-flat i.material-icons {
-  font-size: 14px;
-  margin-right: 4px;
+
+.timepicker-span-hours {
+  margin-right: 3px;
 }
-.timepicker-modal .timepicker-content .time-display {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin-bottom: 24px;
-  font-size: 2.5rem;
-  font-weight: 300;
+
+.timepicker-span-minutes {
+  margin-left: 3px;
 }
-.timepicker-modal .timepicker-content .time-display input[type=number] {
-  width: 80px;
+
+.timepicker-display-am-pm {
+  font-size: 1.3rem;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  font-weight: 400;
+}
+
+/* Analog Clock Display */
+.timepicker-analog-display {
+  flex: 2.5 auto;
+}
+
+.timepicker-plate {
+  background-color: #eee;
+  border-radius: 50%;
+  width: 270px;
+  height: 270px;
+  overflow: visible;
+  position: relative;
+  margin: auto;
+  margin-top: 25px;
+  margin-bottom: 5px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.timepicker-canvas,
+.timepicker-dial {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.timepicker-minutes {
+  visibility: hidden;
+}
+
+.timepicker-tick {
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.87);
+  line-height: 40px;
   text-align: center;
-  font-size: 2.5rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 8px;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  cursor: pointer;
+  font-size: 15px;
 }
-.timepicker-modal .timepicker-content .time-display .ampm-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+
+.timepicker-tick.active,
+.timepicker-tick:hover {
+  background-color: rgba(38, 166, 154, 0.25);
 }
-.timepicker-modal .timepicker-content .time-display .ampm-selector button {
-  min-width: 60px;
-  padding: 4px 8px;
+
+.timepicker-dial {
+  transition: transform 350ms, opacity 350ms;
 }
-.timepicker-modal .timepicker-content .timepicker-actions {
+
+.timepicker-dial-out {
+  opacity: 0;
+}
+.timepicker-dial-out.timepicker-hours {
+  transform: scale(1.1, 1.1);
+}
+.timepicker-dial-out.timepicker-minutes {
+  transform: scale(0.8, 0.8);
+}
+
+.timepicker-canvas {
+  transition: opacity 175ms;
+}
+.timepicker-canvas line {
+  stroke: #26a69a;
+  stroke-width: 4;
+  stroke-linecap: round;
+}
+
+.timepicker-canvas-out {
+  opacity: 0.25;
+}
+
+.timepicker-canvas-bearing {
+  stroke: none;
+  fill: #26a69a;
+}
+
+.timepicker-canvas-bg {
+  stroke: none;
+  fill: #26a69a;
+}
+
+/* Footer */
+.timepicker-footer {
+  margin: 0 auto;
+  padding: 5px 1rem;
   display: flex;
   justify-content: space-between;
-  gap: 8px;
-  margin-top: 24px;
 }
-.timepicker-modal .timepicker-content .timepicker-actions > div {
-  display: flex;
-  gap: 8px;
+
+.timepicker-clear {
+  color: #F44336;
 }
-.timepicker-modal .timepicker-content .timepicker-actions .btn-flat {
+
+.timepicker-close {
+  color: #26a69a;
+}
+
+.timepicker-clear,
+.timepicker-close {
   padding: 0 20px;
 }
 
-/* Legacy styles kept for applications using old Materialize TimePicker */
+/* Media Queries */
+@media only screen and (min-width : 601px) {
+  .timepicker-modal {
+    max-width: 600px;
+  }
+  .timepicker-container.modal-content {
+    flex-direction: row;
+  }
+  .timepicker-text-container {
+    top: 32%;
+  }
+  .timepicker-display-am-pm {
+    position: relative;
+    right: auto;
+    bottom: auto;
+    text-align: center;
+    margin-top: 1.2rem;
+  }
+}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './chip';
 export * from './code-block';
 export * from './collapsible';
 export * from './collection';
+export * from './datepicker';
 export * from './dropdown';
 export * from './floating-action-button';
 export * from './icon';
@@ -17,10 +18,15 @@ export * from './modal';
 export * from './option';
 export * from './pagination';
 export * from './parallax';
-export * from './pickers';
+export * from './datepicker';
+export * from './timepicker';
+export * from './pushpin';
 export * from './radio';
 export * from './select';
 export * from './switch';
 export * from './tabs';
 export * from './search-select';
+export * from './timepicker';
+export * from './toast';
+export * from './tooltip';
 export * from './utils';