@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-beta.1

package/src/styles/components/icon-button.css

@@ -1,6 +1,6 @@
 /* IconButton Component Styles */
 
-.mld-icon-button {
+.mint-icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -20,46 +20,46 @@
   transform: translateY(0);
 }
 
-.mld-icon-button:hover:not(.mld-icon-button--disabled) {
+.mint-icon-button:hover:not(.mint-icon-button--disabled) {
   transform: translateY(-1px);
 }
 
-.mld-icon-button:hover:not(.mld-icon-button--disabled):not(.mld-icon-button--ghost) {
+.mint-icon-button:hover:not(.mint-icon-button--disabled):not(.mint-icon-button--ghost) {
   box-shadow: var(--shadow-sm);
 }
 
-.mld-icon-button:active:not(.mld-icon-button--disabled) {
+.mint-icon-button:active:not(.mint-icon-button--disabled) {
   transform: translateY(0);
   box-shadow: none;
   background-image: none;
   transition-duration: 0.05s;
 }
 
-.mld-icon-button:focus-visible {
+.mint-icon-button:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-.mld-icon-button--disabled {
+.mint-icon-button--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
 /* Colored variants shift to neutral bg when disabled for WCAG AA contrast */
-.mld-icon-button--primary.mld-icon-button--disabled,
-.mld-icon-button--cta.mld-icon-button--disabled,
-.mld-icon-button--danger.mld-icon-button--disabled,
-.mld-icon-button--success.mld-icon-button--disabled {
+.mint-icon-button--primary.mint-icon-button--disabled,
+.mint-icon-button--cta.mint-icon-button--disabled,
+.mint-icon-button--danger.mint-icon-button--disabled,
+.mint-icon-button--success.mint-icon-button--disabled {
   background-color: var(--bg-tertiary);
   background-image: none;
   color: var(--text-muted);
 }
 
 /* Subtle top-to-bottom highlight on filled variants — catch of light. */
-.mld-icon-button--primary,
-.mld-icon-button--cta,
-.mld-icon-button--danger,
-.mld-icon-button--success {
+.mint-icon-button--primary,
+.mint-icon-button--cta,
+.mint-icon-button--danger,
+.mint-icon-button--success {
   background-image: linear-gradient(
     to bottom,
     rgba(255, 255, 255, 0.12),
@@ -68,107 +68,107 @@
 }
 
 /* Variants */
-.mld-icon-button--primary {
+.mint-icon-button--primary {
   background-color: var(--color-primary);
   color: white;
 }
 
-.mld-icon-button--primary:hover:not(.mld-icon-button--disabled) {
+.mint-icon-button--primary:hover:not(.mint-icon-button--disabled) {
   background-color: var(--color-primary-hover);
 }
 
-.mld-icon-button--secondary {
+.mint-icon-button--secondary {
   background-color: var(--bg-secondary);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
 }
 
-.mld-icon-button--secondary:hover:not(.mld-icon-button--disabled) {
+.mint-icon-button--secondary:hover:not(.mint-icon-button--disabled) {
   background-color: var(--bg-tertiary);
 }
 
-.mld-icon-button--cta {
+.mint-icon-button--cta {
   background-color: var(--color-cta);
   color: white;
 }
 
-.mld-icon-button--cta:hover:not(.mld-icon-button--disabled) {
+.mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
   background-color: var(--color-cta-hover);
 }
 
-.mld-icon-button--danger {
+.mint-icon-button--danger {
   background-color: var(--mint-error);
   color: white;
 }
 
-.mld-icon-button--danger:hover:not(.mld-icon-button--disabled) {
+.mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
   background-color: var(--mint-error-hover);
 }
 
-.mld-icon-button--success {
+.mint-icon-button--success {
   background-color: var(--mint-success);
   color: white;
 }
 
-.mld-icon-button--success:hover:not(.mld-icon-button--disabled) {
+.mint-icon-button--success:hover:not(.mint-icon-button--disabled) {
   background-color: var(--mint-success-hover);
 }
 
-.mld-icon-button--ghost {
+.mint-icon-button--ghost {
   background-color: transparent;
   color: var(--text-secondary);
 }
 
-.mld-icon-button--ghost:hover:not(.mld-icon-button--disabled) {
+.mint-icon-button--ghost:hover:not(.mint-icon-button--disabled) {
   background-color: var(--bg-tertiary);
   color: var(--text-primary);
 }
 
 /* Sizes */
-.mld-icon-button--sm {
+.mint-icon-button--sm {
   padding: 0.375rem;
   min-height: var(--form-height-sm);
 }
 
-.mld-icon-button--md {
+.mint-icon-button--md {
   padding: 0.5rem;
   min-height: var(--form-height-md);
 }
 
-.mld-icon-button--lg {
+.mint-icon-button--lg {
   padding: 0.75rem;
   min-height: var(--form-height-lg);
 }
 
-.mld-icon-button__icon--sm,
-.mld-icon-button__icon--md,
-.mld-icon-button__icon--lg {
+.mint-icon-button__icon--sm,
+.mint-icon-button__icon--md,
+.mint-icon-button__icon--lg {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.mld-icon-button__icon--sm {
+.mint-icon-button__icon--sm {
   width: 1rem;
   height: 1rem;
 }
 
-.mld-icon-button__icon--md {
+.mint-icon-button__icon--md {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.mld-icon-button__icon--lg {
+.mint-icon-button__icon--lg {
   width: 1.5rem;
   height: 1.5rem;
 }
 
 /* Spinner */
-.mld-icon-button__spinner {
-  animation: mld-spin 1s linear infinite;
+.mint-icon-button__spinner {
+  animation: mint-spin 1s linear infinite;
 }
 
-@keyframes mld-spin {
+@keyframes mint-spin {
   from {
     transform: rotate(0deg);
   }
@@ -178,15 +178,15 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .mld-icon-button {
+  .mint-icon-button {
     transition:
       color 0.15s ease,
       background-color 0.15s ease,
       border-color 0.15s ease,
       box-shadow 0.15s ease;
   }
-  .mld-icon-button:hover:not(.mld-icon-button--disabled),
-  .mld-icon-button:active:not(.mld-icon-button--disabled) {
+  .mint-icon-button:hover:not(.mint-icon-button--disabled),
+  .mint-icon-button:active:not(.mint-icon-button--disabled) {
     transform: none;
   }
 }

package/src/styles/components/input.css

@@ -1,6 +1,6 @@
 /* BaseInput Component Styles */
 
-.mld-input {
+.mint-input {
   display: block;
   width: 100%;
   font-family: inherit;
@@ -15,31 +15,31 @@
   box-sizing: border-box;
 }
 
-.mld-input::placeholder {
+.mint-input::placeholder {
   color: var(--text-muted);
 }
 
-.mld-input:hover:not(:focus-visible):not(.mld-input--disabled):not(.mld-input--error) {
+.mint-input:hover:not(:focus-visible):not(.mint-input--disabled):not(.mint-input--error) {
   border-color: var(--text-muted);
 }
 
-.mld-input:focus,
-.mld-input:focus-visible {
+.mint-input:focus,
+.mint-input:focus-visible {
   border-color: var(--color-primary);
   box-shadow: var(--focus-ring-soft);
 }
 
-.mld-input--error {
+.mint-input--error {
   border-color: var(--mint-error);
 }
 
-.mld-input--error:focus,
-.mld-input--error:focus-visible {
+.mint-input--error:focus,
+.mint-input--error:focus-visible {
   box-shadow: var(--focus-ring-soft-error);
 }
 
-.mld-input--disabled,
-.mld-input:disabled {
+.mint-input--disabled,
+.mint-input:disabled {
   background-color: var(--bg-tertiary);
   color: var(--text-muted);
   cursor: not-allowed;
@@ -47,19 +47,19 @@
 
 /* Size variants — 1px optical padding shift (0.16+).
    See CLAUDE.md § Optical Centering. */
-.mld-input--sm {
+.mint-input--sm {
   padding: 0.3125rem 0.625rem 0.4375rem;
   font-size: 0.8125rem;
   min-height: var(--form-height-sm);
 }
 
-.mld-input--md {
+.mint-input--md {
   padding: 0.4375rem 0.75rem 0.5625rem;
   font-size: 0.875rem;
   min-height: var(--form-height-md);
 }
 
-.mld-input--lg {
+.mint-input--lg {
   padding: 0.6875rem 1rem 0.8125rem;
   font-size: 1rem;
   min-height: var(--form-height-lg);

package/src/styles/components/loading-spinner.css

@@ -1,51 +1,51 @@
 /* LoadingSpinner Component Styles */
 
-.mld-spinner {
+.mint-spinner {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.mld-spinner__svg {
-  animation: mld-spin 1s linear infinite;
+.mint-spinner__svg {
+  animation: mint-spin 1s linear infinite;
 }
 
 /* Sizes */
-.mld-spinner--xs .mld-spinner__svg {
+.mint-spinner--xs .mint-spinner__svg {
   width: 16px;
   height: 16px;
 }
 
-.mld-spinner--sm .mld-spinner__svg {
+.mint-spinner--sm .mint-spinner__svg {
   width: 20px;
   height: 20px;
 }
 
-.mld-spinner--md .mld-spinner__svg {
+.mint-spinner--md .mint-spinner__svg {
   width: 24px;
   height: 24px;
 }
 
-.mld-spinner--lg .mld-spinner__svg {
+.mint-spinner--lg .mint-spinner__svg {
   width: 32px;
   height: 32px;
 }
 
 /* Variants */
-.mld-spinner--primary {
+.mint-spinner--primary {
   color: var(--color-primary);
 }
 
-.mld-spinner--cta {
+.mint-spinner--cta {
   color: var(--color-cta);
 }
 
-.mld-spinner--muted {
+.mint-spinner--muted {
   color: var(--text-muted);
 }
 
 /* Screen-reader only label */
-.mld-spinner__label {
+.mint-spinner__label {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -57,7 +57,7 @@
   border-width: 0;
 }
 
-@keyframes mld-spin {
+@keyframes mint-spin {
   from {
     transform: rotate(0deg);
   }

package/src/styles/components/modal.css

@@ -3,12 +3,12 @@
 /* ========================================================================
    Modal Backdrop — variant-agnostic outer wrapper
    ========================================================================
-   The outer .mld-modal positions the modal in the viewport. Variant
-   modifiers (.mld-modal--drawer / .mld-modal--sheet) repoint the
+   The outer .mint-modal positions the modal in the viewport. Variant
+   modifiers (.mint-modal--drawer / .mint-modal--sheet) repoint the
    flex alignment so the container slides in from the relevant edge.
    ======================================================================== */
 
-.mld-modal {
+.mint-modal {
   position: fixed;
   inset: 0;
   z-index: 50;
@@ -16,24 +16,24 @@
   padding: 1rem;
 }
 
-.mld-modal--centered {
+.mint-modal--centered {
   align-items: center;
   justify-content: center;
 }
 
-.mld-modal--drawer {
+.mint-modal--drawer {
   align-items: stretch;   /* fill viewport height */
   justify-content: flex-end;
   padding: 0;             /* drawer flush to the right edge */
 }
 
-.mld-modal--sheet {
+.mint-modal--sheet {
   align-items: flex-end;
   justify-content: center;
   padding: 0;             /* sheet flush to the bottom edge */
 }
 
-.mld-modal__overlay {
+.mint-modal__overlay {
   position: absolute;
   inset: 0;
   background-color: rgba(15, 23, 42, 0.55);
@@ -45,7 +45,7 @@
    Modal Container — shared card DNA
    ======================================================================== */
 
-.mld-modal__container {
+.mint-modal__container {
   position: relative;
   width: 100%;
   display: flex;
@@ -61,13 +61,13 @@
 
 /* ---------- Centered variant — card DNA with height cap (unchanged visually) ---------- */
 
-.mld-modal__container--centered {
+.mint-modal__container--centered {
   max-height: calc(100vh - 2rem);
 }
 
 /* ---------- Drawer variant — fills viewport height, right-edge anchored ---------- */
 
-.mld-modal__container--drawer {
+.mint-modal__container--drawer {
   max-height: 100vh;
   height: 100vh;
   border-radius: 0.875rem 0 0 0.875rem;   /* radius drops on right edge */
@@ -79,7 +79,7 @@
 
 /* ---------- Sheet variant — bottom-edge anchored, top-only radius ---------- */
 
-.mld-modal__container--sheet {
+.mint-modal__container--sheet {
   max-height: calc(100vh - 3rem);
   border-radius: 0.875rem 0.875rem 0 0;   /* top corners only */
   border-bottom: none;
@@ -95,31 +95,31 @@
    After:  sm 28 · md 35 · lg 45 · xl 57.5 · full 56 (unchanged)
    ======================================================================== */
 
-.mld-modal__container--sm   { max-width: 28rem; }
-.mld-modal__container--md   { max-width: 35rem; }
-.mld-modal__container--lg   { max-width: 45rem; }
-.mld-modal__container--xl   { max-width: 57.5rem; }
-.mld-modal__container--full { max-width: 56rem; }
+.mint-modal__container--sm   { max-width: 28rem; }
+.mint-modal__container--md   { max-width: 35rem; }
+.mint-modal__container--lg   { max-width: 45rem; }
+.mint-modal__container--xl   { max-width: 57.5rem; }
+.mint-modal__container--full { max-width: 56rem; }
 
 /* Drawer width ramps — narrower than centered widths since drawer fills height */
-.mld-modal__container--drawer.mld-modal__container--sm   { max-width: 21.25rem; /* 340px */ }
-.mld-modal__container--drawer.mld-modal__container--md   { max-width: 30rem;    /* 480px */ }
-.mld-modal__container--drawer.mld-modal__container--lg   { max-width: 40rem;    /* 640px */ }
-.mld-modal__container--drawer.mld-modal__container--xl   { max-width: 48rem;    /* 768px */ }
-.mld-modal__container--drawer.mld-modal__container--full { max-width: 100%;     /* full-drawer */ }
+.mint-modal__container--drawer.mint-modal__container--sm   { max-width: 21.25rem; /* 340px */ }
+.mint-modal__container--drawer.mint-modal__container--md   { max-width: 30rem;    /* 480px */ }
+.mint-modal__container--drawer.mint-modal__container--lg   { max-width: 40rem;    /* 640px */ }
+.mint-modal__container--drawer.mint-modal__container--xl   { max-width: 48rem;    /* 768px */ }
+.mint-modal__container--drawer.mint-modal__container--full { max-width: 100%;     /* full-drawer */ }
 
 /* Sheet widths — wider than drawer but still centered horizontally. Mobile override drops to 100% below */
-.mld-modal__container--sheet.mld-modal__container--sm   { max-width: 23.75rem; /* 380px */ }
-.mld-modal__container--sheet.mld-modal__container--md   { max-width: 28.75rem; /* 460px */ }
-.mld-modal__container--sheet.mld-modal__container--lg   { max-width: 36rem;    /* 576px */ }
-.mld-modal__container--sheet.mld-modal__container--xl   { max-width: 45rem;    /* 720px */ }
-.mld-modal__container--sheet.mld-modal__container--full { max-width: 100%; }
+.mint-modal__container--sheet.mint-modal__container--sm   { max-width: 23.75rem; /* 380px */ }
+.mint-modal__container--sheet.mint-modal__container--md   { max-width: 28.75rem; /* 460px */ }
+.mint-modal__container--sheet.mint-modal__container--lg   { max-width: 36rem;    /* 576px */ }
+.mint-modal__container--sheet.mint-modal__container--xl   { max-width: 45rem;    /* 720px */ }
+.mint-modal__container--sheet.mint-modal__container--full { max-width: 100%; }
 
 /* ========================================================================
    Grab-hint bar (sheet only)
    ======================================================================== */
 
-.mld-modal__grab-hint {
+.mint-modal__grab-hint {
   width: 2.5rem;
   height: 3px;
   background-color: var(--border-color);
@@ -132,7 +132,7 @@
    Header / body / footer (shared — unchanged vs. current modal.css)
    ======================================================================== */
 
-.mld-modal__header {
+.mint-modal__header {
   display: flex;
   align-items: flex-start;
   gap: 0.625rem;
@@ -140,12 +140,12 @@
   border-bottom: 1px solid var(--border-light);
 }
 
-.mld-modal__header-text {
+.mint-modal__header-text {
   flex: 1;
   min-width: 0;
 }
 
-.mld-modal__title {
+.mint-modal__title {
   font-size: 0.9375rem;
   font-weight: 600;
   letter-spacing: -0.005em;
@@ -156,14 +156,14 @@
   padding: 0 !important;
 }
 
-.mld-modal__subtitle {
+.mint-modal__subtitle {
   font-size: 0.75rem;
   color: var(--text-secondary);
   line-height: 1.4;
   margin: 0.125rem 0 0;
 }
 
-.mld-modal__close {
+.mint-modal__close {
   flex-shrink: 0;
   width: 1.75rem;
   height: 1.75rem;
@@ -178,23 +178,23 @@
   transition: color var(--mint-transition), background-color var(--mint-transition);
 }
 
-.mld-modal__close:hover {
+.mint-modal__close:hover {
   color: var(--text-primary);
   background-color: var(--bg-hover);
 }
 
-.mld-modal__close:focus-visible {
+.mint-modal__close:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-.mld-modal__close-icon {
+.mint-modal__close-icon {
   width: 0.875rem;
   height: 0.875rem;
   display: block;
 }
 
-.mld-modal__body {
+.mint-modal__body {
   padding: 1.125rem 1.25rem;
   flex: 1;
   min-height: 0;
@@ -204,7 +204,7 @@
   line-height: 1.55;
 }
 
-.mld-modal__footer {
+.mint-modal__footer {
   padding: 0.75rem 1.25rem;
   border-top: 1px solid var(--border-light);
   background-color: var(--bg-primary);
@@ -226,16 +226,16 @@
 .modal-centered-leave-active {
   transition: opacity 0.2s ease;
 }
-.modal-centered-enter-active .mld-modal__container,
-.modal-centered-leave-active .mld-modal__container {
+.modal-centered-enter-active .mint-modal__container,
+.modal-centered-leave-active .mint-modal__container {
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .modal-centered-enter-from,
 .modal-centered-leave-to {
   opacity: 0;
 }
-.modal-centered-enter-from .mld-modal__container,
-.modal-centered-leave-to .mld-modal__container {
+.modal-centered-enter-from .mint-modal__container,
+.modal-centered-leave-to .mint-modal__container {
   transform: scale(0.95);
   opacity: 0;
 }
@@ -245,16 +245,16 @@
 .modal-drawer-leave-active {
   transition: opacity 0.25s ease;
 }
-.modal-drawer-enter-active .mld-modal__container,
-.modal-drawer-leave-active .mld-modal__container {
+.modal-drawer-enter-active .mint-modal__container,
+.modal-drawer-leave-active .mint-modal__container {
   transition: transform 0.25s ease;
 }
 .modal-drawer-enter-from,
 .modal-drawer-leave-to {
   opacity: 0;
 }
-.modal-drawer-enter-from .mld-modal__container,
-.modal-drawer-leave-to .mld-modal__container {
+.modal-drawer-enter-from .mint-modal__container,
+.modal-drawer-leave-to .mint-modal__container {
   transform: translateX(100%);
 }
 
@@ -263,16 +263,16 @@
 .modal-sheet-leave-active {
   transition: opacity 0.25s ease;
 }
-.modal-sheet-enter-active .mld-modal__container,
-.modal-sheet-leave-active .mld-modal__container {
+.modal-sheet-enter-active .mint-modal__container,
+.modal-sheet-leave-active .mint-modal__container {
   transition: transform 0.25s ease;
 }
 .modal-sheet-enter-from,
 .modal-sheet-leave-to {
   opacity: 0;
 }
-.modal-sheet-enter-from .mld-modal__container,
-.modal-sheet-leave-to .mld-modal__container {
+.modal-sheet-enter-from .mint-modal__container,
+.modal-sheet-leave-to .mint-modal__container {
   transform: translateY(100%);
 }
 
@@ -287,12 +287,12 @@
     transition: opacity 0.1s ease;
   }
 
-  .modal-centered-enter-active .mld-modal__container,
-  .modal-centered-leave-active .mld-modal__container,
-  .modal-drawer-enter-active .mld-modal__container,
-  .modal-drawer-leave-active .mld-modal__container,
-  .modal-sheet-enter-active .mld-modal__container,
-  .modal-sheet-leave-active .mld-modal__container {
+  .modal-centered-enter-active .mint-modal__container,
+  .modal-centered-leave-active .mint-modal__container,
+  .modal-drawer-enter-active .mint-modal__container,
+  .modal-drawer-leave-active .mint-modal__container,
+  .modal-sheet-enter-active .mint-modal__container,
+  .modal-sheet-leave-active .mint-modal__container {
     transition: opacity 0.1s ease;
     transform: none !important;
   }
@@ -309,16 +309,16 @@
    ======================================================================== */
 
 @media (max-width: 767px) {
-  .mld-modal {
+  .mint-modal {
     align-items: flex-end;
     justify-content: center;
     padding: 0;
   }
 
-  .mld-modal__container,
-  .mld-modal__container--centered,
-  .mld-modal__container--drawer,
-  .mld-modal__container--sheet {
+  .mint-modal__container,
+  .mint-modal__container--centered,
+  .mint-modal__container--drawer,
+  .mint-modal__container--sheet {
     width: 100%;
     max-width: 100%;
     max-height: calc(100vh - 3rem);
@@ -332,19 +332,19 @@
   }
 
   /* All size variants collapse to 100% width under mobile */
-  .mld-modal__container--sm,
-  .mld-modal__container--md,
-  .mld-modal__container--lg,
-  .mld-modal__container--xl,
-  .mld-modal__container--full {
+  .mint-modal__container--sm,
+  .mint-modal__container--md,
+  .mint-modal__container--lg,
+  .mint-modal__container--xl,
+  .mint-modal__container--full {
     max-width: 100%;
   }
 
   /* Non-sheet variants flip to sheet-like slide-up animation under mobile */
-  .modal-centered-enter-from .mld-modal__container,
-  .modal-centered-leave-to .mld-modal__container,
-  .modal-drawer-enter-from .mld-modal__container,
-  .modal-drawer-leave-to .mld-modal__container {
+  .modal-centered-enter-from .mint-modal__container,
+  .modal-centered-leave-to .mint-modal__container,
+  .modal-drawer-enter-from .mint-modal__container,
+  .modal-drawer-leave-to .mint-modal__container {
     transform: translateY(100%);
   }
 }