mithril-materialized 3.8.0 → 3.9.0

package/dist/circular-progress.d.ts

@@ -0,0 +1,43 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { MaterialColor, ColorIntensity } from './types';
+/** Progress mode - determinate shows specific progress, indeterminate shows loading animation */
+export type ProgressMode = 'determinate' | 'indeterminate';
+/** Progress size options */
+export type ProgressSize = 'small' | 'medium' | 'large';
+/** CircularProgress component attributes */
+export interface CircularProgressAttrs extends Attributes {
+    /** Progress mode (default: 'indeterminate') */
+    mode?: ProgressMode;
+    /** Current progress value (0-100) for determinate mode */
+    value?: number;
+    /** Maximum progress value (default: 100) */
+    max?: number;
+    /** Size variant (default: 'medium') */
+    size?: ProgressSize;
+    /** Materialize color (default: 'teal') */
+    color?: MaterialColor;
+    /** Color intensity modifier */
+    colorIntensity?: ColorIntensity;
+    /** Label to display inside the circle */
+    label?: string | number;
+    /** Auto-show percentage inside circle for determinate mode (default: false) */
+    showPercentage?: boolean;
+    /** Additional CSS class names */
+    className?: string;
+    /** Additional CSS styles */
+    style?: any;
+    /** HTML ID for the component */
+    id?: string;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** ARIA valuemin (default: 0) */
+    'aria-valuemin'?: number;
+    /** ARIA valuemax (default: 100) */
+    'aria-valuemax'?: number;
+    /** ARIA valuenow (current value) */
+    'aria-valuenow'?: number;
+    /** ARIA valuetext (custom text description) */
+    'aria-valuetext'?: string;
+}
+/** Create a CircularProgress component */
+export declare const CircularProgress: FactoryComponent<CircularProgressAttrs>;

package/dist/index.css

@@ -12043,4 +12043,479 @@ body.dark {
 [data-theme=dark] .toggle-group .toggle-button.checked {
   background-color: var(--mm-primary-color, #80cbc4);
   color: var(--mm-button-text, #000);
+}
+
+/* CircularProgress Component
+   ========================================================================== */
+.circular-progress {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mm-primary-color, #ee6e73);
+}
+.circular-progress--small {
+  width: 36px;
+  height: 36px;
+}
+.circular-progress--small .circular-progress__label {
+  font-size: 10px;
+}
+.circular-progress--medium {
+  width: 50px;
+  height: 50px;
+}
+.circular-progress--medium .circular-progress__label {
+  font-size: 12px;
+}
+.circular-progress--large {
+  width: 64px;
+  height: 64px;
+}
+.circular-progress--large .circular-progress__label {
+  font-size: 14px;
+}
+
+.circular-progress__svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+.circular-progress__circle {
+  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.circular-progress__circle--track {
+  opacity: 0.2;
+}
+.circular-progress__circle--indicator {
+  opacity: 1;
+}
+
+.circular-progress__label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: 500;
+  text-align: center;
+  line-height: 1;
+  color: currentColor;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.circular-progress--indeterminate .circular-progress__svg {
+  animation: circular-rotate 2s linear infinite;
+}
+.circular-progress--indeterminate .circular-progress__circle--indicator {
+  stroke-dasharray: 80, 200;
+  stroke-dashoffset: 0;
+  animation: circular-dash 1.5s ease-in-out infinite;
+}
+
+.circular-progress--determinate .circular-progress__circle--indicator {
+  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.circular-progress--red {
+  color: #F44336;
+}
+
+.circular-progress--pink {
+  color: #e91e63;
+}
+
+.circular-progress--purple {
+  color: #9c27b0;
+}
+
+.circular-progress--deep-purple {
+  color: #673ab7;
+}
+
+.circular-progress--indigo {
+  color: #3f51b5;
+}
+
+.circular-progress--blue {
+  color: #2196F3;
+}
+
+.circular-progress--light-blue {
+  color: #03a9f4;
+}
+
+.circular-progress--cyan {
+  color: #00bcd4;
+}
+
+.circular-progress--teal {
+  color: #009688;
+}
+
+.circular-progress--green {
+  color: #4CAF50;
+}
+
+.circular-progress--light-green {
+  color: #8bc34a;
+}
+
+.circular-progress--lime {
+  color: #cddc39;
+}
+
+.circular-progress--yellow {
+  color: #ffeb3b;
+}
+
+.circular-progress--amber {
+  color: #ffc107;
+}
+
+.circular-progress--orange {
+  color: #ff9800;
+}
+
+.circular-progress--deep-orange {
+  color: #ff5722;
+}
+
+.circular-progress--brown {
+  color: #795548;
+}
+
+.circular-progress--grey {
+  color: #9e9e9e;
+}
+
+.circular-progress--blue-grey {
+  color: #607d8b;
+}
+
+.circular-progress--lighten-5 {
+  filter: brightness(1.4);
+}
+
+.circular-progress--lighten-4 {
+  filter: brightness(1.3);
+}
+
+.circular-progress--lighten-3 {
+  filter: brightness(1.2);
+}
+
+.circular-progress--lighten-2 {
+  filter: brightness(1.1);
+}
+
+.circular-progress--lighten-1 {
+  filter: brightness(1.05);
+}
+
+.circular-progress--darken-1 {
+  filter: brightness(0.95);
+}
+
+.circular-progress--darken-2 {
+  filter: brightness(0.9);
+}
+
+.circular-progress--darken-3 {
+  filter: brightness(0.8);
+}
+
+.circular-progress--darken-4 {
+  filter: brightness(0.7);
+}
+
+@keyframes circular-rotate {
+  0% {
+    transform: rotate(-90deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@keyframes circular-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -15;
+  }
+  100% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -125;
+  }
+}
+[data-theme=dark] .circular-progress .circular-progress__circle--track {
+  opacity: 0.15;
+}
+
+[dir=rtl] .circular-progress__svg {
+  transform: rotate(90deg);
+}
+[dir=rtl] .circular-progress--indeterminate .circular-progress__svg {
+  animation: circular-rotate-rtl 2s linear infinite;
+}
+@keyframes circular-rotate-rtl {
+  0% {
+    transform: rotate(90deg);
+  }
+  100% {
+    transform: rotate(-270deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .circular-progress__circle,
+  .circular-progress__svg {
+    transition: none !important;
+    animation: none !important;
+  }
+  .circular-progress--indeterminate .circular-progress__svg {
+    animation: none;
+  }
+  .circular-progress--indeterminate .circular-progress__circle--indicator {
+    animation: none;
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -50;
+  }
+}
+@media (prefers-contrast: high) {
+  .circular-progress__circle--track {
+    opacity: 0.4;
+  }
+}
+/* LinearProgress Component
+   ========================================================================== */
+.linear-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  color: var(--mm-primary-color, #ee6e73);
+}
+
+.linear-progress__track {
+  position: relative;
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.linear-progress__track--small {
+  height: 4px;
+}
+.linear-progress__track--medium {
+  height: 8px;
+}
+.linear-progress__track--large {
+  height: 12px;
+}
+
+.linear-progress__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: currentColor;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 2px;
+}
+.linear-progress__bar--indeterminate {
+  width: 30%;
+  animation: linear-indeterminate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.linear-progress__label {
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  color: currentColor;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  min-width: 40px;
+  text-align: right;
+}
+
+.linear-progress--red {
+  color: #F44336;
+}
+
+.linear-progress--pink {
+  color: #e91e63;
+}
+
+.linear-progress--purple {
+  color: #9c27b0;
+}
+
+.linear-progress--deep-purple {
+  color: #673ab7;
+}
+
+.linear-progress--indigo {
+  color: #3f51b5;
+}
+
+.linear-progress--blue {
+  color: #2196F3;
+}
+
+.linear-progress--light-blue {
+  color: #03a9f4;
+}
+
+.linear-progress--cyan {
+  color: #00bcd4;
+}
+
+.linear-progress--teal {
+  color: #009688;
+}
+
+.linear-progress--green {
+  color: #4CAF50;
+}
+
+.linear-progress--light-green {
+  color: #8bc34a;
+}
+
+.linear-progress--lime {
+  color: #cddc39;
+}
+
+.linear-progress--yellow {
+  color: #ffeb3b;
+}
+
+.linear-progress--amber {
+  color: #ffc107;
+}
+
+.linear-progress--orange {
+  color: #ff9800;
+}
+
+.linear-progress--deep-orange {
+  color: #ff5722;
+}
+
+.linear-progress--brown {
+  color: #795548;
+}
+
+.linear-progress--grey {
+  color: #9e9e9e;
+}
+
+.linear-progress--blue-grey {
+  color: #607d8b;
+}
+
+.linear-progress--lighten-5 {
+  filter: brightness(1.4);
+}
+
+.linear-progress--lighten-4 {
+  filter: brightness(1.3);
+}
+
+.linear-progress--lighten-3 {
+  filter: brightness(1.2);
+}
+
+.linear-progress--lighten-2 {
+  filter: brightness(1.1);
+}
+
+.linear-progress--lighten-1 {
+  filter: brightness(1.05);
+}
+
+.linear-progress--darken-1 {
+  filter: brightness(0.95);
+}
+
+.linear-progress--darken-2 {
+  filter: brightness(0.9);
+}
+
+.linear-progress--darken-3 {
+  filter: brightness(0.8);
+}
+
+.linear-progress--darken-4 {
+  filter: brightness(0.7);
+}
+
+@keyframes linear-indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+[data-theme=dark] .linear-progress__track {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+[dir=rtl] .linear-progress__label {
+  text-align: left;
+}
+[dir=rtl] .linear-progress__bar--indeterminate {
+  animation: linear-indeterminate-rtl 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@keyframes linear-indeterminate-rtl {
+  0% {
+    right: -35%;
+    left: 100%;
+  }
+  60% {
+    right: 100%;
+    left: -90%;
+  }
+  100% {
+    right: 100%;
+    left: -90%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .linear-progress__bar {
+    transition: none !important;
+    animation: none !important;
+  }
+  .linear-progress__bar--indeterminate {
+    animation: none;
+    width: 100%;
+    left: 0;
+    opacity: 0.5;
+  }
+}
+@media (prefers-contrast: high) {
+  .linear-progress__track {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid currentColor;
+  }
+  [data-theme=dark] .linear-progress__track {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
 }

package/dist/index.d.ts

@@ -49,4 +49,6 @@ export * from './masonry';
 export * from './image-list';
 export * from './rating';
 export * from './toggle-group';
+export * from './circular-progress';
+export * from './linear-progress';
 export * from './types';