@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/styles/components/time-picker.css

@@ -0,0 +1,171 @@
+/* TimePicker Component Styles */
+
+.mld-time-picker {
+  position: relative;
+}
+
+/* Input wrapper */
+.mld-time-picker__input-wrapper {
+  position: relative;
+}
+
+.mld-time-picker__input {
+  width: 100%;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  cursor: pointer;
+  padding-right: 2.5rem;
+}
+
+.mld-time-picker__input:focus-visible {
+  outline: none;
+  border-color: transparent;
+  box-shadow: var(--focus-ring);
+}
+
+.mld-time-picker__input--sm {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+.mld-time-picker__input--md {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.mld-time-picker__input--lg {
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+}
+
+.mld-time-picker__input--error {
+  border-color: var(--mint-error);
+}
+
+.mld-time-picker__input--error:focus-visible {
+  box-shadow: var(--focus-ring-error);
+}
+
+.mld-time-picker__input--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+  background-color: var(--bg-tertiary);
+}
+
+/* Clock icon */
+.mld-time-picker__icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding-right: 0.75rem;
+  pointer-events: none;
+}
+
+.mld-time-picker__icon svg {
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-muted);
+}
+
+/* Clear button */
+.mld-time-picker__clear-btn {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 1.75rem;
+  display: flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: color 0.15s ease;
+}
+
+.mld-time-picker__clear-btn:hover {
+  color: var(--text-primary);
+}
+
+.mld-time-picker__clear-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Dropdown */
+.mld-time-picker__dropdown {
+  position: absolute;
+  z-index: 50;
+  margin-top: 0.25rem;
+  width: 100%;
+  min-width: 10rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-primary);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+/* Slot list */
+.mld-time-picker__list {
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* Individual time slot */
+.mld-time-picker__slot {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  white-space: nowrap;
+}
+
+.mld-time-picker__slot:hover:not(.mld-time-picker__slot--disabled):not(.mld-time-picker__slot--active) {
+  background-color: var(--bg-hover);
+}
+
+.mld-time-picker__slot--active {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.mld-time-picker__slot--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.mld-time-picker__slot--highlighted {
+  background-color: var(--bg-hover);
+}
+
+/* Transition classes */
+.mld-time-picker__dropdown-enter-active {
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+}
+
+.mld-time-picker__dropdown-leave-active {
+  transition: opacity 0.075s ease-in, transform 0.075s ease-in;
+}
+
+.mld-time-picker__dropdown-enter-from,
+.mld-time-picker__dropdown-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.mld-time-picker__dropdown-enter-to,
+.mld-time-picker__dropdown-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}

package/src/styles/components/time-range-input.css

@@ -0,0 +1,42 @@
+/* TimeRangeInput Component Styles */
+
+.mld-time-range {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mld-time-range__start,
+.mld-time-range__end {
+  flex: 1;
+  min-width: 0;
+}
+
+.mld-time-range__separator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.mld-time-range__separator::before,
+.mld-time-range__separator::after {
+  content: '';
+  display: block;
+  width: 1rem;
+  height: 2px;
+  background-color: var(--border-color);
+}
+
+.mld-time-range__duration {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  background-color: var(--bg-tertiary);
+  border-radius: var(--radius, 0.375rem);
+  padding: 0.125rem 0.5rem;
+  white-space: nowrap;
+}
+
+.mld-time-range__duration--error {
+  color: var(--mint-error);
+}

package/src/styles/components/toast.css

@@ -0,0 +1,91 @@
+/* ToastNotification Component Styles */
+
+.mld-toast__container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+}
+
+.mld-toast__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md);
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-left: 4px solid;
+  box-shadow: var(--shadow-md);
+  pointer-events: auto;
+  cursor: pointer;
+  max-width: 24rem;
+  overflow: hidden;
+}
+
+/* Dark mode: near-black bg + white text — toast always contrasts with page */
+html.dark .mld-toast__item {
+  background-color: #0F172A;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.mld-toast__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+/* In dark mode, shift icons to 400-level (lighter) for contrast against near-black */
+html.dark .mld-toast__item--success .mld-toast__icon { color: #34D399 !important; }
+html.dark .mld-toast__item--error   .mld-toast__icon { color: #F87171 !important; }
+html.dark .mld-toast__item--warning .mld-toast__icon { color: #FBBF24 !important; }
+html.dark .mld-toast__item--info    .mld-toast__icon { color: #60A5FA !important; }
+
+.mld-toast__message {
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  flex: 1;
+  min-width: 0;
+}
+
+/* Light mode: keep semantic-colored message text (existing behavior) */
+.mld-toast__item--success .mld-toast__message { color: var(--mint-success-hover); }
+.mld-toast__item--error   .mld-toast__message { color: var(--mint-error-hover); }
+.mld-toast__item--warning .mld-toast__message { color: var(--mint-warning-hover); }
+.mld-toast__item--info    .mld-toast__message { color: var(--color-primary-hover); }
+
+/* Dark mode: white text, accent stays on left stripe + icon */
+html.dark .mld-toast__item .mld-toast__message {
+  color: #FFFFFF;
+}
+
+/* TTL progress bar — shrinks 100% → 0 over duration */
+.mld-toast__progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  width: 100%;
+  transform-origin: left center;
+  animation: mld-toast-progress linear forwards;
+  /* animation-duration set inline via toast.duration */
+}
+
+@keyframes mld-toast-progress {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mld-toast__progress { animation: none; opacity: 0.4; }
+}
+
+.toast-enter-active { transition: all 0.2s ease-out; }
+.toast-leave-active { transition: all 0.15s ease-in; }
+.toast-enter-from { opacity: 0; transform: translateX(30px); }
+.toast-leave-to   { opacity: 0; transform: translateX(30px); }

package/src/styles/components/toggle.css

@@ -0,0 +1,146 @@
+/* BaseToggle Component Styles */
+
+.mld-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.mld-toggle--reverse {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Reverse label refinement for sidebar use */
+.mld-toggle--reverse .mld-toggle__label {
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.mld-toggle--reverse .mld-toggle__label--sm {
+  font-size: 0.8125rem;
+}
+
+.mld-toggle--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.mld-toggle__track {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  padding: 2px;
+  border-radius: 9999px;
+  /* Explicit border-box — knob `left` math assumes the declared width/height
+     are the outer dimensions. Without this, a consumer without a global
+     box-sizing reset (e.g. raw Histoire) renders the track 4px too wide and
+     the on-state knob falls short of the right edge. */
+  box-sizing: border-box;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.mld-toggle__track--off {
+  background-color: var(--bg-tertiary);
+}
+
+.mld-toggle__track--on {
+  background-color: var(--color-primary);
+}
+
+.mld-toggle:not(.mld-toggle--disabled):hover .mld-toggle__track {
+  box-shadow: var(--shadow-sm);
+}
+
+.mld-toggle__track:focus {
+  outline: none;
+}
+
+.mld-toggle__track:focus-visible {
+  box-shadow: var(--focus-ring-soft);
+  outline: none;
+}
+
+.mld-toggle__track--sm {
+  width: 28px;
+  height: 16px;
+}
+
+.mld-toggle__track--md {
+  width: 40px;
+  height: 22px;
+}
+
+.mld-toggle__track--lg {
+  width: 52px;
+  height: 28px;
+}
+
+.mld-toggle__knob {
+  position: absolute;
+  top: 50%;
+  border-radius: 9999px;
+  background-color: #FFFFFF;
+  box-shadow: var(--shadow-sm);
+  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.mld-toggle__knob--sm {
+  width: 12px;
+  height: 12px;
+  margin-top: -6px;
+}
+
+.mld-toggle__knob--md {
+  width: 18px;
+  height: 18px;
+  margin-top: -9px;
+}
+
+.mld-toggle__knob--lg {
+  width: 24px;
+  height: 24px;
+  margin-top: -12px;
+}
+
+.mld-toggle__knob--off {
+  left: 2px;
+}
+
+.mld-toggle__knob--on-sm {
+  left: 14px;
+}
+
+.mld-toggle__knob--on-md {
+  left: 20px;
+}
+
+.mld-toggle__knob--on-lg {
+  left: 26px;
+}
+
+.mld-toggle__label {
+  color: var(--text-primary);
+}
+
+.mld-toggle__label--sm {
+  font-size: 0.875rem;
+}
+
+.mld-toggle__label--md {
+  font-size: 0.875rem;
+}
+
+.mld-toggle__label--lg {
+  font-size: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mld-toggle__knob {
+    transition: none;
+  }
+}

package/src/styles/components/tooltip.css

@@ -0,0 +1,91 @@
+/* Tooltip — Dark Short */
+
+.mld-tooltip {
+  display: inline-flex;
+}
+
+.mld-tooltip__content {
+  position: absolute;
+  z-index: 9999;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1.2;
+  color: #FFFFFF;
+  background: #0F172A;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
+}
+
+/* Multi-line opt-in via maxWidth prop */
+.mld-tooltip__content--multiline {
+  white-space: normal;
+  line-height: 1.4;
+}
+
+.mld-tooltip__body {
+  display: inline;
+}
+
+/* Keyboard shortcut chip */
+.mld-tooltip__shortcut {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.0625rem 0.375rem;
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 3px;
+  line-height: 1;
+}
+
+/* Arrow — color matches the dark tooltip bg */
+.mld-tooltip__content::after {
+  content: '';
+  position: absolute;
+  border-width: 4px;
+  border-style: solid;
+}
+
+.mld-tooltip__content--top::after,
+.mld-tooltip__content--top-start::after,
+.mld-tooltip__content--top-end::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: #0F172A transparent transparent transparent;
+}
+
+.mld-tooltip__content--bottom::after,
+.mld-tooltip__content--bottom-start::after,
+.mld-tooltip__content--bottom-end::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: transparent transparent #0F172A transparent;
+}
+
+.mld-tooltip__content--left::after,
+.mld-tooltip__content--left-start::after,
+.mld-tooltip__content--left-end::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-color: transparent transparent transparent #0F172A;
+}
+
+.mld-tooltip__content--right::after,
+.mld-tooltip__content--right-start::after,
+.mld-tooltip__content--right-end::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-color: transparent #0F172A transparent transparent;
+}

package/src/styles/components/unit-input.css

@@ -0,0 +1,123 @@
+/* UnitInput Component Styles */
+
+.mld-unit-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* ---------- Controls row (value input + unit chip) ---------- */
+
+.mld-unit-input__controls {
+  display: flex;
+  align-items: stretch;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  overflow: hidden;
+}
+
+.mld-unit-input__controls--sm { min-height: var(--form-height-sm); }
+.mld-unit-input__controls--md { min-height: var(--form-height-md); }
+.mld-unit-input__controls--lg { min-height: var(--form-height-lg); }
+
+.mld-unit-input__controls:hover:not(:has(:disabled)) {
+  border-color: var(--text-muted);
+}
+
+.mld-unit-input__controls:focus-within {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring-soft);
+}
+
+.mld-unit-input--error .mld-unit-input__controls {
+  border-color: var(--mint-error);
+}
+
+.mld-unit-input--error .mld-unit-input__controls:focus-within {
+  box-shadow: var(--focus-ring-soft-error);
+}
+
+.mld-unit-input--disabled .mld-unit-input__controls {
+  opacity: var(--mint-disabled-opacity);
+  background-color: var(--bg-secondary);
+}
+
+/* ---------- Value input — Fira Code, left-aligned ---------- */
+
+.mld-unit-input__value {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  background-color: transparent;
+  color: var(--text-primary);
+  border: none;
+  outline: none;
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.mld-unit-input__value::-webkit-outer-spin-button,
+.mld-unit-input__value::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.mld-unit-input__value:disabled { cursor: not-allowed; }
+
+/* Horizontal padding matches BaseInput canonical scale (10/12/16) so FormField's
+   12px label indent aligns with the value text across all input types. */
+.mld-unit-input__value--sm { padding: 0.3125rem 0.625rem 0.4375rem; font-size: 0.875rem; }
+.mld-unit-input__value--md { padding: 0.4375rem 0.75rem 0.5625rem;  font-size: 0.875rem; }
+.mld-unit-input__value--lg { padding: 0.6875rem 1rem 0.8125rem;     font-size: 1rem; }
+
+/* ---------- Unit chip ---------- */
+
+.mld-unit-input__unit {
+  display: flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  background-color: var(--color-primary-soft);
+  border-left: 1px solid var(--border-color);
+}
+
+.mld-unit-input__unit-select {
+  background: transparent;
+  border: none;
+  color: var(--color-primary-hover);
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0 0.375rem;
+  cursor: pointer;
+  outline: none;
+  text-transform: none;
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  line-height: 1;
+}
+
+.mld-unit-input__unit-select--sm { font-size: 0.6875rem; }
+.mld-unit-input__unit-select--md { font-size: 0.75rem; }
+.mld-unit-input__unit-select--lg { font-size: 0.8125rem; }
+
+.mld-unit-input__unit-select:disabled {
+  cursor: not-allowed;
+  color: var(--text-muted);
+}
+
+/* ---------- Conversion hint ---------- */
+
+.mld-unit-input__conversion-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-style: italic;
+  padding: 0 0.75rem;
+}
+
+.mld-unit-input__unit-group {
+  /* optgroup styling — browsers vary here; minimal override */
+  font-weight: 600;
+  font-style: normal;
+}